chesspal 0.2.3 → 0.3.0

package/dist/page/players/card.js

@@ -8,7 +8,7 @@ export function PlayerCard({ place, picture, name, signed, side, level, taken, a
     const opponent = side === "white" ? "black" : "white";
     return (_jsx("section", { class: `card player ${place}`, children: _jsxs("div", { class: "player-line", children: [picture, _jsxs("div", { class: "who", children: [_jsx("div", { class: "name", title: typeof name === "string" ? name : undefined, children: name }), signed === undefined ? null : _jsx("div", { class: "signed", title: signed, children: signed }), side === undefined ? null : (_jsxs("div", { class: "note", children: [text.sides[side], level === undefined ? null : (_jsxs(_Fragment, { children: [" ", "\u00B7 ", _jsx(LevelTip, { level: level })] })), turn
                                     ? (_jsxs(_Fragment, { children: [" ", "\u00B7 ", _jsx("b", { class: "turn", children: text.yourTurn })] }))
-                                    : null] })), _jsxs("div", { class: "taken", role: "img", "aria-label": text.taken(taken.map((piece) => text.piece(piece, opponent)), ahead), children: [groupsOf(taken).map((group) => (_jsx("span", { class: group[0]?.toUpperCase() === "P" ? "group pawns" : "group", children: group.map((piece, index) => _jsx(Piece, { letter: opponent === "white" ? piece : piece.toLowerCase(), small: true }, index)) }, group[0]))), ahead > 0 ? _jsxs("span", { class: "balance", children: ["+", ahead] }) : null] }), badges] }), clock] }) }));
+                                    : null] }))] }), clock, side === undefined && taken.length === 0 && badges === undefined ? null : (_jsxs("div", { class: "haul", children: [_jsxs("div", { class: "taken", role: "img", "aria-label": text.taken(taken.map((piece) => text.piece(piece, opponent)), ahead), children: [groupsOf(taken).map((group) => (_jsx("span", { class: group[0]?.toUpperCase() === "P" ? "group pawns" : "group", children: group.map((piece, index) => _jsx(Piece, { letter: opponent === "white" ? piece : piece.toLowerCase(), small: true }, index)) }, group[0]))), ahead > 0 ? _jsxs("span", { class: "balance", children: ["+", ahead] }) : null] }), badges] }))] }) }));
 }
 /**
  * A side's time on the game's clock, as the server keeps it: it runs while the side is to move and the game goes on, unless `held` (a move on its way);

package/dist/page/profile/profile.js

@@ -1,12 +1,15 @@
 // The player's profile on the page (D-23, D-45): as the server sends it, the choices the wizard offers, and the requests that change it.
 /** How the player says they play, as the server keeps it. */
 export const levels = ["learning", "casual", "regular", "tournament"];
-/** Where a rating comes from. */
-export const ratingSites = ["lichess", "chess.com", "fide"];
-/** The lowest and highest rating the server takes. */
-export const ratingLimits = { lowest: 100, highest: 3500 };
+/** The sites a rating is read from, by the player's names there (D-105). */
+export const ratingSites = ["lichess", "chess.com"];
+/** The speeds whose rating counts, in the order they count (D-106). */
+export const speeds = ["rapid", "classical", "blitz"];
 /** The longest name the server keeps. */
 export const nameLimit = 40;
+/** The FIDE ratings the server takes, as whole numbers (D-106). */
+export const fideLowest = 1400;
+export const fideHighest = 3000;
 /** The drawn avatars, by the ids the server keeps (D-45). */
 export const avatarIds = ["short-hair", "bun", "glasses", "beanie", "beard", "curls", "moustache", "silver-bob", "cat", "owl"];
 /** The address of a profile's own image: it changes with the image. */
@@ -14,12 +17,14 @@ export function imageAddress(profile) {
     return profile.image === undefined ? undefined : `/api/profile/image?profile=${encodeURIComponent(profile.id)}&v=${encodeURIComponent(profile.image)}`;
 }
 /** Makes a profile, in use unless `use` is false, with the photo after it, made small first so that a photo that cannot be read makes no profile: the refusal, or undefined. */
-export async function makeProfile({ name, level, rating, site, avatar, photo, use }) {
+export async function makeProfile({ name, level, lichess, chesscom, fide, avatar, photo, use }) {
     const image = photo === undefined ? undefined : await shrunk(photo).catch(() => undefined);
     if (photo !== undefined && image === undefined) {
         return badImage;
     }
-    const answer = await post("/api/profile/new", jsonOf({ name: name.trim(), level, ...(rating === undefined ? {} : { rating, site }), ...(avatar === undefined ? {} : { avatar }), ...(use === false ? { use } : {}) }));
+    const names = { ...(lichess?.trim() ? { lichess: lichess.trim() } : {}), ...(chesscom?.trim() ? { chesscom: chesscom.trim() } : {}) };
+    const chosen = { ...(fide === undefined ? {} : { fide }), ...(avatar === undefined ? {} : { avatar }), ...(use === false ? { use } : {}) };
+    const answer = await post("/api/profile/new", jsonOf({ name: name.trim(), level, ...names, ...chosen }));
     if ("refused" in answer) {
         return answer.refused;
     }
@@ -33,9 +38,9 @@ export async function useProfile(id) {
 export async function chooseAvatar(profile, avatar) {
     return refusalOf(await post(forProfile("/api/profile/avatar", profile), jsonOf({ avatar })));
 }
-/** The player's names on Lichess and chess.com for the profile the page shows, an empty one removed: the server's refusal, or undefined. */
-export async function saveAccounts(profile, accounts) {
-    return refusalOf(await post(forProfile("/api/profile/accounts", profile), jsonOf({ lichess: accounts.lichess.trim(), chesscom: accounts.chesscom.trim() })));
+/** What the player changes in the profile the page shows: an empty level or site name removed. The server's refusal, or undefined. */
+export async function editProfile(profile, changes) {
+    return refusalOf(await post(forProfile("/api/profile/edit", profile), jsonOf(changes)));
 }
 /** Opens the data folder in the system's file manager, where the page runs: the server's refusal, or undefined. */
 export async function openDataFolder() {

package/dist/page/profile/settings.js

@@ -30,6 +30,11 @@ export function settingsFrom(value, defaults = { theme: "system", sound: true })
         sound: typeof stored.sound === "boolean" ? stored.sound : defaults.sound,
         voice: typeof stored.voice === "boolean" ? stored.voice : false,
         language: oneOf(stored.language, ["auto", "it", "en"], "auto"),
+        // Checked against what the host offers when the chat opens, which this page does not know.
+        claudeModel: word(stored.claudeModel),
+        claudeEffort: word(stored.claudeEffort),
+        codexModel: word(stored.codexModel),
+        codexEffort: word(stored.codexEffort),
     };
 }
 /** Remembers the settings in this browser. */
@@ -75,3 +80,7 @@ function parsed(saved) {
 function oneOf(value, choices, fallback) {
     return choices.find((choice) => choice === value) ?? fallback;
 }
+// A host's model or effort, a short word; empty when it is none.
+function word(value) {
+    return typeof value === "string" && /^[\w.-]{1,40}$/.test(value) ? value : "";
+}

package/dist/page/style.css

@@ -4,6 +4,10 @@
 @import "layout/layout.css";
 @import "board/board.css";
 @import "talk/talk.css";
+@import "talk/chat.css";
+@import "table/opener.css";
 @import "game/game.css";
 @import "helps/helps.css";
+@import "legend/legend.css";
 @import "dialogs/dialogs.css";
+@import "guide/guide.css";

package/dist/page/table/opener.css

@@ -0,0 +1,65 @@
+/* The table with no chat at it (D-104): the asleep note's box, with a row for each host, its button and its choices, and the command to type instead */
+.opener {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) auto auto;
+    gap: 8px 6px;
+}
+
+.opener > p {
+    grid-column: 1 / -1;
+    margin: 0;
+}
+
+/* One row a host, its columns shared with the other's through the subgrid: the choices as wide as their longest name, the button takes the rest, all as tall */
+.opener-host {
+    display: grid;
+    grid-column: 1 / -1;
+    grid-template-columns: subgrid;
+}
+
+.opener-host > .command {
+    justify-content: center;
+    padding: 6px 8px;
+    overflow: hidden;
+    white-space: nowrap;
+}
+
+.opener-host > .command:disabled,
+.opener-host > .command:disabled:hover {
+    cursor: default;
+    opacity: 0.5;
+    background: var(--accent);
+    border-color: var(--accent);
+}
+
+.opener-host select {
+    padding: 4px;
+    border: 1px solid var(--line);
+    border-radius: 6px;
+    background: var(--card);
+    color: var(--ink);
+    font: inherit;
+    font-size: 13px;
+}
+
+/* Empty, the state takes no room: its margin gives back the row's gap */
+.opener-state:empty {
+    margin-bottom: -8px;
+}
+
+.opener-command {
+    color: var(--soft);
+    font-size: 12.5px;
+}
+
+/* Each command whole on its line; two families, so the browser does not shrink the monospace */
+.opener-command code {
+    font-family: ui-monospace, monospace;
+    white-space: nowrap;
+    user-select: all;
+}
+
+/* Over the board, where the note lets clicks through to the squares, only its buttons, choices and commands take them */
+.over-board > .opener :is(button, select, code) {
+    pointer-events: auto;
+}

package/dist/page/table/opener.js

@@ -0,0 +1,59 @@
+import { jsx as _jsx, jsxs as _jsxs } from "preact/jsx-runtime";
+// The table with no chat at it (D-104): a button for each host installed, which opens a terminal with a chat at the table, the model and effort it plays
+// with beside it, kept in the profile, and the command to type in a terminal instead.
+import { useState } from "preact/hooks";
+/** Where the asleep note stands while no chat is at the table: the hosts that open one, their choices, and the command to type. */
+export function ChatOpener({ table, settings, onChange, name, text }) {
+    const [sending, setSending] = useState(false);
+    const [failed, setFailed] = useState(false);
+    const words = text.table;
+    const installed = table.hosts.filter((host) => host.installed && host.name in choiceKeys);
+    const busy = sending || table.opening !== undefined;
+    const open = async (host) => {
+        setSending(true);
+        setFailed(false);
+        const opened = await openChat(host);
+        setSending(false);
+        setFailed(!opened);
+    };
+    // The chat started again for a new game needs nothing of the player.
+    if (table.opening === "again") {
+        return _jsx("p", { class: "asleep", role: "status", children: words.again(name) });
+    }
+    if (installed.length === 0) {
+        return _jsx("p", { class: "asleep", role: "status", children: words.install(name) });
+    }
+    // The state stays in the page, empty when there is none, so a screen reader hears it change.
+    return (_jsxs("section", { class: "asleep opener", "aria-label": words.label, children: [_jsx("p", { children: words.noChat(name) }), installed.map((host) => (_jsxs("div", { class: "opener-host", children: [_jsx("button", { type: "button", class: "command primary", disabled: busy, onClick: () => void open(host.name), children: hostTitles[host.name] ?? host.name }), _jsx(Choice, { host: host, kind: "model", settings: settings, onChange: onChange, text: text }), _jsx(Choice, { host: host, kind: "effort", settings: settings, onChange: onChange, text: text })] }, host.name))), _jsx("p", { class: "opener-state", role: "status", children: busy ? words.opening : failed ? words.failed : null }), _jsxs("p", { class: "opener-command", children: [words.typeIt, " ", installed.map((host, index) => (_jsxs("span", { children: [index === 0 ? "" : " · ", _jsx("code", { children: host.command })] }, host.name)))] })] }));
+}
+const hostTitles = { claude: "Claude Code", codex: "Codex" };
+// The settings that keep each host's choice.
+const choiceKeys = {
+    claude: { model: "claudeModel", effort: "claudeEffort" },
+    codex: { model: "codexModel", effort: "codexEffort" },
+};
+/** A host's model or effort: a dash keeps the host's own; a choice it no longer offers shows as the dash. Its title says what it stands at, the dash too. */
+function Choice({ host, kind, settings, onChange, text }) {
+    const key = choiceKeys[host.name][kind];
+    const offered = kind === "model" ? host.models : host.efforts;
+    const chosen = offered.includes(settings[key]) ? settings[key] : "";
+    const title = hostTitles[host.name] ?? host.name;
+    if (offered.length === 0) {
+        return null;
+    }
+    return (_jsxs("select", { "aria-label": `${text.table[kind]}, ${title}`, title: `${text.table[kind]}: ${chosen === "" ? text.table.asHost(title) : chosen}`, value: chosen, onChange: (event) => onChange({ ...settings, [key]: event.currentTarget.value }), children: [_jsx("option", { value: "", children: "\u2014" }), offered.map((value) => _jsx("option", { value: value, children: shortName(value) }, value))] }));
+}
+// Codex's models without the "gpt-" they all start with, so the choice fits beside the button in the column; the title keeps the whole name.
+function shortName(value) {
+    return value.replace(/^gpt-/, "");
+}
+/** Asks the table to open a terminal with a chat in the host: whether it did. */
+async function openChat(host) {
+    try {
+        const response = await fetch("/api/table/chat", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ host }) });
+        return response.ok && (await response.json()).opened === true;
+    }
+    catch {
+        return false;
+    }
+}

package/dist/page/talk/chat.css

@@ -0,0 +1,97 @@
+/* The talk over a game in analysis (D-101): the player's words and the AI's answers in one thread over the box, by the player's card; the AI's note stays
+   with the other side's card, and the thread gives way before the cards do (Zoe) */
+.talk.studied > .you-block {
+    flex: 1 1 auto;
+    max-height: none;
+}
+
+/* A line apart from the AI's note, which another voice signed (Zoe) */
+.talk.studied > section > .chat {
+    display: flex;
+    flex-direction: column;
+    flex: 1 1 auto;
+    min-height: 0;
+    margin-top: 12px;
+    padding-top: 10px;
+    border-top: 1px solid var(--line);
+}
+
+.chat > .compose {
+    flex: none;
+}
+
+/* The thread reads in time's order whichever way the board is turned: the newest words just over the box (Zoe) */
+.flipped .talk.studied,
+.flipped .talk.studied > section {
+    flex-direction: column;
+}
+
+.flipped .talk.studied .sent {
+    justify-content: flex-end;
+    margin: 0 0 8px;
+}
+
+.flipped .talk.studied .compose {
+    margin: 0;
+}
+
+/* Beside the board the talk takes the room the AI's notes leave, not half the column as in a game; turned round, the player's card goes on top and the
+   AI's note below the box; on a phone the talk has an area of its own (layout.css) */
+@media (min-width: 841px) {
+    .chat > .sent {
+        flex: 1 1 0;
+    }
+
+    .flipped .talk.studied,
+    .flipped .talk.studied > section {
+        flex-direction: column-reverse;
+    }
+
+    .flipped .talk.studied > section > .chat {
+        margin: 0 0 12px;
+        padding: 0 0 10px;
+        border-top: 0;
+        border-bottom: 1px solid var(--line);
+    }
+}
+
+/* The AI's answers on the left, in its bubbles, without the tail that points at the Torretta: it is not by them */
+.sent li.from-ai {
+    align-self: flex-start;
+    align-items: flex-start;
+}
+
+.talk.studied .sent .say::before,
+.talk.studied .sent .say::after {
+    content: none;
+}
+
+/* The box has no tail either: the card it would point at may be someone else's */
+.compose.asking::after {
+    content: none;
+}
+
+/* The move a line was written on, small at its head: a press shows it again */
+.shown-move {
+    display: flex;
+    align-items: center;
+    gap: 1px;
+    min-height: 24px;
+    margin: -2px 0 2px -6px;
+    padding: 2px 6px;
+    border: 0;
+    border-radius: 6px;
+    background: none;
+    color: inherit;
+    font: inherit;
+    font-size: 12px;
+    font-weight: 600;
+    opacity: 0.85;
+    cursor: pointer;
+}
+
+.shown-move:hover,
+.shown-move:focus-visible {
+    opacity: 1;
+    background: color-mix(in oklab, currentColor 15%, transparent);
+}

package/dist/page/talk/talk.css

@@ -1,23 +1,42 @@
 /* The talk's column: the players' cards with their pictures and names, the faces, the words said and the box to write in, the card of a page offline,
    and the notes laid over the board between games */
 
-/* The picture stays at the card's top left, however many lines the card has; the clock in the middle */
+/* The picture at the card's top left, the clock at its top right (Stefano); the pieces taken and the badges under the name, run to the card's edge, under
+   the clock too; the button that starts the clocks, or the next game, takes the card's width below */
 .player-line {
-    display: flex;
-    align-items: flex-start;
-    gap: 12px;
+    display: grid;
+    grid-template-columns: auto minmax(0, 1fr) auto;
+    grid-template-rows: auto 1fr;
+    column-gap: 12px;
+    align-items: start;
+}
+
+.player-line > :first-child {
+    grid-column: 1;
+    grid-row: 1;
+}
+
+.player-line:has(> .haul) > :first-child {
+    grid-row: 1 / span 2;
+}
+
+.player-line > .who {
+    grid-column: 2;
+    grid-row: 1;
 }
 
 .player-line > .clock {
-    align-self: center;
+    grid-column: 3;
+    grid-row: 1;
 }
 
-.player-line > svg {
-    flex: none;
+.player-line > .haul {
+    grid-column: 2 / -1;
+    grid-row: 2;
+    min-width: 0;
 }
 
 .who {
-    flex: 1;
     min-width: 0;
     line-height: 1.25;
 }
@@ -76,14 +95,11 @@
 
 /* The clocks wait for the player (Zoe): the button that starts them takes a line of the player's card, under the clock it starts, off the board's squares;
    between games the new game takes the same line, in the clock's place (D-77) */
-.player-line:has(> .start-clocks, > .next-game) {
-    flex-wrap: wrap;
-    row-gap: 10px;
-}
-
 .start-clocks,
 .next-game {
-    flex: 1 0 100%;
+    grid-column: 1 / -1;
+    grid-row: 3;
+    margin-top: 10px;
     justify-content: center;
     padding: 8px 14px;
     font-size: 15px;
@@ -107,7 +123,8 @@
     align-self: center;
 }
 
-.player-line > .who:not(:has(.note)) .taken:empty {
+/* In analysis, a side that took nothing has its badges right under its name */
+.haul:has(> .badge-counts) > .taken:empty {
     display: none;
 }
 
@@ -430,6 +447,12 @@
     display: none;
 }
 
+/* A bubble keeps its height: one that does not fit is hidden whole, the newest scrolls in itself (talk.tsx) */
+.says > li,
+.sent > li {
+    flex: none;
+}
+
 .say {
     position: relative;
     background: var(--say);
@@ -646,11 +669,6 @@
     margin: 8px 0 0;
 }
 
-/* In analysis nothing in the talk gives way: on a short screen the talk scrolls whole */
-.talk.studied {
-    overflow-y: auto;
-}
-
 .talk.studied > section,
 .talk.studied > section > * {
     flex: none;
@@ -703,12 +721,6 @@
     margin-top: 4px;
 }
 
-/* In analysis the board turned round changes which side's card is on top, never the order of the talk */
-.flipped .talk.studied,
-.flipped .talk.studied > section {
-    flex-direction: column;
-}
-
 .move-note .head {
     display: flex;
     align-items: center;

package/dist/page/talk/talk.js

@@ -59,29 +59,35 @@ export function Legend({ review, words }) {
 }
 /**
  * The player's words of the game, the newest by the box they write in with how far it got, and the box: Enter or the button sends the words alone, the next
- * move takes them with it. 200 characters from one move of the AI's to the next: once they are written, the box goes until its move (D-54).
+ * move takes them with it. 200 characters from one move of the AI's to the next: once they are written, the box goes until its move (D-54). In analysis the
+ * AI's answers are in the same thread, and each line of the player's names the move it was written on (D-101).
  */
-export function Compose({ lines, newestFirst, spent, draft, onDraft, onSend, canMove, name, problem, text }) {
+export function Compose({ lines, newestFirst, spent, draft, onDraft, onSend, canMove, name, problem, about, text }) {
     const list = useRef(null);
     useOnlyWhole(list, lines.map((line) => line.text));
     const left = talkLimits.line - spent;
     const blank = draft.trim() === "";
+    const lastWritten = lines.findLastIndex((line) => line.who === "player");
+    const lastAnswer = lines.findLastIndex((line) => line.who === "ai");
+    const prompt = about === undefined ? text.writeTo(name) : text.askAbout(name);
     const submit = () => {
         if (!blank) {
             onSend();
         }
     };
-    return (_jsxs(_Fragment, { children: [_jsx("ol", { ref: list, class: "sent", "aria-live": "polite", children: inOrder(lines.map((line, index) => (_jsxs("li", { style: aged(lines.length - 1 - index), children: [_jsx("p", { class: "said", children: line.text }), index === lines.length - 1 ? _jsx(Status, { heard: line.heard, name: name, text: text }) : null] }, index))), newestFirst) }), left <= 0 ? null : (_jsxs("form", { class: "compose", onSubmit: (event) => {
+    return (_jsxs(_Fragment, { children: [_jsx("ol", { ref: list, class: "sent", "aria-live": "polite", children: inOrder(lines.map((line, index) => (_jsxs("li", { class: line.who === "ai" ? "from-ai" : undefined, style: about === undefined ? aged(lines.length - 1 - index) : reread(index, lastAnswer), children: [line.who === "ai"
+                            ? (_jsx("p", { class: "say", children: _jsx(Marked, { text: line.text }) }))
+                            : (_jsxs("p", { class: "said", children: [about === undefined || line.shown?.move === undefined ? null : _jsx(ShownMove, { move: line.shown.move, onShow: () => about.onShow(line.shown.at), text: text }), line.text] })), index === lastWritten ? _jsx(Status, { heard: line.heard, name: name, text: text }) : null] }, index))), newestFirst) }), left <= 0 ? null : (_jsxs("form", { class: about === undefined ? "compose" : "compose asking", onSubmit: (event) => {
                     event.preventDefault();
                     submit();
-                }, children: [_jsx("p", { class: "limit", role: "status", children: problem ?? "" }), _jsx("textarea", { rows: 2, maxLength: left, placeholder: text.writeTo(name), "aria-label": text.writeTo(name), value: draft, onInput: (event) => onDraft(event.currentTarget.value), onKeyDown: (event) => {
+                }, children: [_jsx("p", { class: "limit", role: "status", children: problem ?? "" }), _jsx("textarea", { rows: 2, maxLength: left, placeholder: prompt, "aria-label": prompt, value: draft, onInput: (event) => onDraft(event.currentTarget.value), onKeyDown: (event) => {
                             if (event.key === "Enter" && !event.shiftKey && !event.isComposing) {
                                 event.preventDefault();
                                 submit();
                             }
                         } }), _jsxs("div", { class: "foot", children: [spent + draft.length >= talkLimits.line - 50
                                 ? _jsxs("span", { class: "count", children: [spent + draft.length, "/", talkLimits.line] })
-                                : _jsx("span", { class: "hint", children: !blank && canMove ? text.withMove : "" }), _jsxs("button", { class: "send", type: "submit", disabled: blank, children: [text.send, _jsx("svg", { class: "icon", viewBox: "0 0 24 24", "aria-hidden": "true", children: _jsx("path", { d: "M5 12H18M13 7L18 12L13 17" }) })] })] })] }))] }));
+                                : _jsx("span", { class: "hint", children: about === undefined ? !blank && canMove ? text.withMove : "" : _jsx(OnMove, { ply: about.ply, text: text }) }), _jsxs("button", { class: "send", type: "submit", disabled: blank, children: [text.send, _jsx("svg", { class: "icon", viewBox: "0 0 24 24", "aria-hidden": "true", children: _jsx("path", { d: "M5 12H18M13 7L18 12L13 17" }) })] })] })] }))] }));
 }
 /**
  * The talk narrowed to a card beside the board: the Torretta above, the player below, each with their name and side written down the card, a ring on
@@ -90,6 +96,18 @@ export function Compose({ lines, newestFirst, spent, draft, onDraft, onSend, can
 export function TalkFaces({ name, aiPicture, you, picture, ai, player, aiMoves, playerMoves, unread, text }) {
     return (_jsxs("div", { class: "faces", children: [_jsx(RailPlayer, { place: "ai", picture: aiPicture ?? _jsx(Torretta, { size: 40 }), name: name, ...(ai === undefined ? {} : { side: text.sides[ai] }), moves: aiMoves, unread: unread }), _jsx(RailPlayer, { place: "you", picture: picture, name: you, ...(player === undefined ? {} : { side: text.sides[player] }), moves: playerMoves })] }));
 }
+/** The move a line of the player's was written on, 14.♘f3, small at the line's head: a press shows it on the board again (Zoe). */
+function ShownMove({ move, onShow, text }) {
+    const [, number = "", san = move] = /^(\d+\.+)(.+)$/.exec(move) ?? [];
+    return (_jsxs("button", { type: "button", class: "shown-move", title: text.goTo(move), "aria-label": text.goTo(move), onClick: onShow, children: [_jsx("span", { class: "move-number", children: number }), _jsx(Figurines, { san: san, side: number.endsWith("...") ? "black" : "white" })] }));
+}
+/** What the words go with in analysis: the move shown, or the whole game at its start. */
+function OnMove({ ply, text }) {
+    if (ply === undefined) {
+        return _jsx(_Fragment, { children: text.onWholeGame });
+    }
+    return (_jsxs(_Fragment, { children: [text.onMove, " ", _jsxs("span", { class: "move-number", children: [ply.number, ply.side === "white" ? "." : "..."] }), _jsx(Figurines, { san: ply.san, side: ply.side })] }));
+}
 function OnBoard({ text }) {
     const point = useContext(PointSquare);
     return (_jsx(_Fragment, { children: text.split(boardWords).map((part, index) => index % 2 === 1
@@ -130,6 +148,10 @@ function inOrder(items, newestFirst) {
 function aged(age) {
     return { opacity: age === 0 ? 1 : Math.max(0.2, 0.4 - (age - 1) * 0.1) };
 }
+/** In analysis the talk is read again: the AI's last answer and what follows it whole, the older lines a little back, still readable (Zoe). */
+function reread(index, lastAnswer) {
+    return { opacity: index >= lastAnswer ? 1 : 0.75 };
+}
 /**
  * A list that never scrolls: a bubble that does not fit whole in it is hidden, the oldest first since the newest sit by the card, and shows again when the
  * window grows.
@@ -142,13 +164,15 @@ function useOnlyWhole(list, lines, newestFirst = false) {
         }
         const fit = () => {
             const box = element.getBoundingClientRect();
+            const padding = getComputedStyle(element);
+            const room = element.clientHeight - parseFloat(padding.paddingTop) - parseFloat(padding.paddingBottom);
             const newest = newestFirst ? element.firstElementChild : element.lastElementChild;
             for (const item of element.children) {
                 const place = item.getBoundingClientRect();
                 const style = item.style;
                 // The newest never hides: one longer than the column, as a note with the helps on (D-78), scrolls in itself.
-                style.maxHeight = item === newest ? box.height + "px" : "";
-                style.overflowY = item === newest && item.scrollHeight > box.height ? "auto" : "";
+                style.maxHeight = item === newest ? room + "px" : "";
+                style.overflowY = item === newest && item.scrollHeight > room ? "auto" : "";
                 style.visibility = item === newest || (place.top >= box.top - 1 && place.bottom <= box.bottom + 1) ? "" : "hidden";
             }
         };