chesspal 0.3.5 → 0.4.0

package/dist/page/table/window.js

@@ -1,52 +1,11 @@
-import { jsx as _jsx, jsxs as _jsxs } from "preact/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "preact/jsx-runtime";
 import { useEffect, useState } from "preact/hooks";
 import { Dialog } from "../dialogs/dialog.js";
 import { checkIcon } from "../dialogs/profiles.js";
+import { canAct, chatAction, choiceKeys, chosen, firstHost, offeredHosts, startedWith } from "./action.js";
 /** The chat's window: closed once a chat opens or starts again, the page then saying where it stands; `review` when it opened to have a game analysed. */
 export function ChatDialog({ open, review = false, table, settings, onChange, name, onClose, text }) {
-    const [sending, setSending] = useState(false);
-    const [failed, setFailed] = useState(false);
-    useEffect(() => setFailed(false), [open]);
-    const words = text.table;
-    const installed = table.hosts.filter((host) => host.installed && host.name in choiceKeys);
-    // A chat opened by hand is the player's: Chesspal cannot start it again. Its rows stay readable, as the ones waiting.
-    const byHand = table.chat && !table.held;
-    const busy = sending || table.opening !== undefined || table.waiting === true;
-    const choose = async (host) => {
-        setSending(true);
-        setFailed(false);
-        const done = table.chat ? await restartChat(host) : await openChat(host);
-        setSending(false);
-        if (done) {
-            onClose();
-        }
-        else {
-            setFailed(true);
-        }
-    };
-    // While a chat opens or waits to start again, the rows wait too, and the note says why.
-    const chooseNote = review ? words.reviewChoose : words.choose;
-    const note = installed.length === 0
-        ? words.install(name)
-        : busy
-            ? chatState(table, name, text) ?? chooseNote
-            : byHand
-                ? words.byHand(name)
-                : table.chat
-                    ? words.restartHint
-                    : chooseNote;
-    const offersChoices = installed.some((host) => host.models.length > 0 || host.efforts.length > 0);
-    // The chat at the table started with other choices than the ones kept now: its row starts it again with these, else it only closes the window.
-    const started = table.held ? table.started : undefined;
-    const changed = (host) => started !== undefined && (chosen(host, "model", settings) !== (started.model ?? "") || chosen(host, "effort", settings) !== (started.effort ?? ""));
-    return (_jsxs(Dialog, { open: open, title: review ? words.reviewTitle : words.title, onClose: onClose, text: text, children: [_jsx("p", { class: "note", children: note }), _jsxs("div", { class: "chat-hosts", role: "group", "aria-label": review ? words.reviewTitle : words.title, children: [offersChoices
-                        ? (_jsxs("div", { class: "chat-head", "aria-hidden": "true", children: [_jsx("span", {}), _jsx("span", { children: words.model }), _jsx("span", { children: words.effort })] }))
-                        : null, installed.map((host) => {
-                        const atTable = table.chat && table.host === host.name;
-                        const off = busy || byHand;
-                        const again = !atTable || changed(host);
-                        return (_jsxs("div", { class: "chat-host", children: [_jsxs("button", { class: "choice", type: "button", title: atTable && again ? words.restartChanged : undefined, "aria-current": atTable ? "true" : undefined, "aria-disabled": off, onClick: off ? undefined : again ? () => void choose(host.name) : onClose, children: [_jsx("span", { children: hostTitles[host.name] ?? host.name }), atTable ? (again ? restartIcon : checkIcon) : null] }), _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: "chat-state", role: "status", children: failed ? (table.chat ? words.notRestarted : words.failed) : null }), table.chat || installed.length === 0 ? null : (_jsxs("p", { class: "chat-command", children: [words.typeIt, " ", installed.map((host, index) => (_jsxs("span", { children: [index === 0 ? "" : " · ", _jsx("code", { children: host.command })] }, host.name)))] }))] }));
+    return (_jsx(Dialog, { open: open, title: review ? text.table.reviewTitle : text.table.title, onClose: onClose, text: text, children: _jsx(ChatForm, { review: review, table: table, settings: settings, onChange: onChange, name: name, onClose: onClose, text: text }) }));
 }
 /** The AI's name on its card, which opens the chat's window: with no chat at the table, a hollow ring before it says so. */
 export function AiNameButton({ name, table, onOpen, text }) {
@@ -54,14 +13,17 @@ export function AiNameButton({ name, table, onOpen, text }) {
     return (_jsxs("button", { class: "profile-name ai-name", type: "button", title: title, "aria-label": `${name}: ${title}`, "aria-haspopup": "dialog", onClick: onOpen, children: [table.chat ? null : _jsx("span", { class: "no-chat", "aria-hidden": "true" }), _jsx("span", { children: name }), _jsx("svg", { class: "icon", viewBox: "0 0 24 24", "aria-hidden": "true", children: _jsx("path", { d: "M7 10L12 15L17 10" }) })] }));
 }
 /**
- * The note on the chat at the table where the asleep note stands: one opening or starting again; one waiting to, with a ↻ that starts it at once and a ×
- * that lets the request go; in a game with no chat at the table, a line that opens the chat's window. None otherwise.
+ * The note on the chat at the table where the asleep note stands: one opening or starting again; one waiting to, or a new game waiting for it, with a ↻
+ * that starts it at once and a × that lets the request go; in a game with no chat at the table, a line that opens the chat's window. None otherwise.
  */
 export function tableNote({ table, name, inGame, onOpen, text }) {
     const words = text.table;
     const state = chatState(table, name, text);
-    if (table.waiting === true) {
-        return (_jsxs("p", { class: "asleep table-note", role: "status", children: [_jsx("span", { children: state }), _jsx("button", { class: "icon-button", type: "button", title: words.restartNow, "aria-label": words.restartNow, onClick: () => void endWaiting(true), children: restartIcon }), _jsx("button", { class: "icon-button", type: "button", title: words.cancel, "aria-label": words.cancel, onClick: () => void endWaiting(false), children: _jsx("svg", { class: "icon", viewBox: "0 0 24 24", "aria-hidden": "true", children: _jsx("path", { d: "M6 6L18 18M18 6L6 18" }) }) })] }));
+    if (table.waiting !== undefined) {
+        const newGame = table.waiting === "new-game";
+        const now = newGame ? words.newGameNow : words.restartNow;
+        const cancel = newGame ? words.newGameCancel : words.cancel;
+        return (_jsxs("p", { class: "asleep table-note", role: "status", children: [_jsx("span", { children: state }), _jsx("button", { class: "icon-button", type: "button", title: now, "aria-label": now, onClick: () => void endWaiting(true), children: restartIcon }), _jsx("button", { class: "icon-button", type: "button", title: cancel, "aria-label": cancel, onClick: () => void endWaiting(false), children: _jsx("svg", { class: "icon", viewBox: "0 0 24 24", "aria-hidden": "true", children: _jsx("path", { d: "M6 6L18 18M18 6L6 18" }) }) })] }));
     }
     if (state !== undefined) {
         return _jsx("p", { class: "asleep", role: "status", children: state });
@@ -71,38 +33,76 @@ export function tableNote({ table, name, inGame, onOpen, text }) {
     }
     return null;
 }
-/** What the page says of the chat at the table: one opening, starting again, or waiting to; nothing else. */
+/** What the page says of the chat at the table: one opening, starting again, or waiting to, for a new game too; nothing else. */
 export function chatState(table, name, text) {
     const words = text.table;
-    if (table.waiting === true) {
-        return words.waiting(name);
+    if (table.waiting !== undefined) {
+        return table.waiting === "new-game" ? words.newGameWaiting(name) : words.waiting(name);
     }
     return table.opening === "chat" ? words.opening : table.opening === "again" ? words.again(name) : table.opening === "restart" ? words.restart : undefined;
 }
 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" },
-};
 /** The ↻ of a chat that starts again. */
 const restartIcon = (_jsx("svg", { class: "icon in-use", viewBox: "0 0 24 24", "aria-hidden": "true", children: _jsx("path", { d: "M19.5 12a7.5 7.5 0 1 1-2.2-5.3M19.5 4.5v4h-4" }) }));
-/** A host's model or effort as the settings keep it: "" for the host's own, and for a choice it no longer offers. */
-function chosen(host, kind, settings) {
-    const key = choiceKeys[host.name][kind];
-    const offered = kind === "model" ? host.models : host.efforts;
-    return offered.includes(settings[key]) ? settings[key] : "";
+/** The window's form, made again at each opening with the host at the table selected, else the last the button used, else the first. */
+function ChatForm({ review, table, settings, onChange, name, onClose, text }) {
+    const words = text.table;
+    const installed = offeredHosts(table);
+    const [selected, setSelected] = useState(() => firstHost(table, settings));
+    const [sending, setSending] = useState(false);
+    const [failed, setFailed] = useState(false);
+    // The host at the table may come or go while the window is open: the selection follows it only if it was on none offered.
+    const host = installed.find((one) => one.name === selected) ?? installed.find((one) => one.name === firstHost(table, settings));
+    useEffect(() => setFailed(false), [selected]);
+    const action = chatAction(table, host, review);
+    // A chat opened by hand is the player's: Chesspal cannot start it again, so the button keeps its word, disabled, and the note says why.
+    const byHand = table.chat && !table.held;
+    const busy = table.opening !== undefined || table.waiting !== undefined;
+    const chooseNote = review ? words.reviewChoose : words.choose;
+    const note = installed.length === 0 ? words.install(name) : busy ? chatState(table, name, text) ?? chooseNote : byHand ? words.byHand(name) : table.chat ? words.restartHint : chooseNote;
+    // What the chat held started with, marked among the choices of its host.
+    const started = (kind) => (host !== undefined && table.held && table.host === host.name ? startedWith(table, host, kind) : undefined);
+    const submit = async (event) => {
+        event.preventDefault();
+        if (action === undefined || host === undefined || !canAct(table)) {
+            return;
+        }
+        setSending(true);
+        setFailed(false);
+        const done = table.chat ? await restartChat(host.name) : await openChat(host.name);
+        setSending(false);
+        if (done) {
+            onChange({ ...settings, chatHost: host.name });
+            onClose();
+        }
+        else {
+            setFailed(true);
+        }
+    };
+    return (_jsxs("form", { class: "profile-form chat-window", onSubmit: (event) => void submit(event), onKeyDown: submitOnEnter, children: [_jsx("p", { class: "note", children: note }), installed.length === 0 ? null : (_jsxs("fieldset", { children: [_jsx("legend", { children: words.chat }), _jsx("div", { class: "chat-hosts", children: installed.map((one) => {
+                            const atTable = table.chat && table.host === one.name;
+                            return (_jsxs("label", { class: "level", children: [_jsx("input", { type: "radio", name: "chat-host", checked: one.name === host?.name, onChange: () => setSelected(one.name), autofocus: one.name === host?.name }), _jsxs("span", { children: [_jsx("b", { children: hostTitles[one.name] ?? one.name }), atTable ? _jsx("span", { class: "at-table", title: words.atTable, role: "img", "aria-label": words.atTable, children: checkIcon }) : null] })] }, one.name));
+                        }) })] })), host === undefined ? null : (_jsxs(_Fragment, { children: [_jsx(Choices, { host: host, kind: "model", settings: settings, started: started("model"), onChange: onChange, text: text }), _jsx(Choices, { host: host, kind: "effort", settings: settings, started: started("effort"), onChange: onChange, text: text })] })), _jsx("p", { class: "problem chat-state", role: "status", children: failed ? (table.chat ? words.notRestarted : words.failed) : null }), action === undefined || host === undefined ? null : (_jsx("button", { class: "start", type: "submit", disabled: sending || !canAct(table), "aria-busy": sending, children: text.table.act[action](hostTitles[host.name] ?? host.name) })), table.chat || host === undefined ? null : (_jsxs("p", { class: "chat-command", children: [words.typeIt, " ", _jsx("code", { children: host.command })] }))] }));
+}
+/** Enter on a choice presses the button, the window's default action, as it would in a text field: the browser does not for radios. */
+function submitOnEnter(event) {
+    if (event.key === "Enter" && event.target instanceof HTMLInputElement) {
+        event.preventDefault();
+        event.currentTarget.requestSubmit();
+    }
 }
-/** 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 }) {
+/** A host's model or effort as a row of choices, its middle one chosen until the player chooses; the one the chat at the table `started` with bears a dot. */
+function Choices({ host, kind, settings, started, onChange, text }) {
     const key = choiceKeys[host.name][kind];
     const offered = kind === "model" ? host.models : host.efforts;
     const value = chosen(host, kind, settings);
-    const title = hostTitles[host.name] ?? host.name;
     if (offered.length === 0) {
-        return _jsx("span", {});
+        return null;
     }
-    return (_jsxs("select", { "aria-label": `${text.table[kind]}, ${title}`, title: `${text.table[kind]}: ${value === "" ? text.table.asHost(title) : value}`, value: value, onChange: (event) => onChange({ ...settings, [key]: event.currentTarget.value }), children: [_jsx("option", { value: "", children: "\u2014" }), offered.map((one) => _jsx("option", { value: one, children: shortName(one) }, one))] }));
+    return (_jsxs("fieldset", { children: [_jsx("legend", { children: text.table[kind] }), _jsx("div", { class: "chat-choices", children: offered.map((one) => {
+                    const words = one + (one === started ? ` · ${text.table.atTable}` : "");
+                    return (_jsxs("label", { class: one === started ? "level started" : "level", title: words, children: [_jsx("input", { type: "radio", name: `chat-${kind}`, checked: value === one, onChange: () => onChange({ ...settings, [key]: one }), "aria-label": words }), _jsx("span", { children: shortName(one) })] }, one));
+                }) })] }));
 }
 // Codex's models without the "gpt-" they all start with, so the choice stays narrow; the title keeps the whole name.
 function shortName(value) {
@@ -112,7 +112,7 @@ function shortName(value) {
 function openChat(host) {
     return asked("/api/table/chat", { host }, (answer) => answer.opened === true);
 }
-/** Asks the table to start at once the chat that waits to start again, cutting its answer, or to let the request go. */
+/** Asks the table to start at once the chat or the new game that waits, cutting the chat's answer, or to let the request go. */
 function endWaiting(now) {
     return asked("/api/table/waiting", { now }, () => true);
 }

package/dist/page/talk/talk.css

@@ -266,115 +266,6 @@
     color: var(--accent);
 }
 
-/* The Torretta, whose eyes blink now and then, and its moods (D-70): a new face that pops in, never fading out, a red light when worried, out when sad, a light that breathes when
-   thoughtful */
-.torretta .antenna {
-    fill: none;
-    stroke: var(--torretta-shade);
-    stroke-width: 4;
-    stroke-linecap: round;
-}
-
-.torretta .light {
-    fill: var(--torretta-light);
-    transition: fill 0.2s;
-}
-
-.torretta.mood-worried .light {
-    fill: var(--torretta-alarm);
-}
-
-.torretta.mood-thoughtful .light {
-    animation: ponder 2.4s ease-in-out infinite;
-}
-
-.torretta.mood-sad .light {
-    fill: var(--torretta-shade);
-}
-
-@keyframes ponder {
-    50% {
-        fill: var(--torretta-ponder);
-    }
-}
-
-.torretta .expression.changed {
-    transform-box: fill-box;
-    transform-origin: center;
-    animation: face-in 0.16s ease-out;
-}
-
-@keyframes face-in {
-    from {
-        transform: scale(0.8);
-    }
-}
-
-/* Its bust on a player's card: a disc of the player's picture's colour, which cuts what falls out of it */
-.torretta.bust {
-    clip-path: circle(50%);
-}
-
-.torretta .back {
-    fill: var(--say);
-}
-
-.torretta .shade {
-    fill: var(--torretta-shade);
-}
-
-.torretta .body {
-    fill: var(--torretta-body);
-}
-
-.torretta .screen {
-    fill: var(--torretta-screen);
-}
-
-.torretta .eyes,
-.torretta .mouth {
-    fill: var(--torretta-face);
-}
-
-.torretta .expression .line,
-.torretta .brows {
-    fill: none;
-    stroke: var(--torretta-face);
-    stroke-width: 3.4;
-    stroke-linecap: round;
-    stroke-linejoin: round;
-}
-
-.torretta .eyes {
-    transform-box: fill-box;
-    transform-origin: center;
-    animation: blink 6s infinite;
-}
-
-@keyframes blink {
-    0%,
-    95%,
-    100% {
-        transform: scaleY(1);
-    }
-
-    97% {
-        transform: scaleY(0.1);
-    }
-}
-
-@media (prefers-reduced-motion: reduce) {
-    .torretta .eyes,
-    .torretta .expression.changed,
-    .torretta.mood-thoughtful .light {
-        animation: none;
-    }
-
-    .torretta .light {
-        transition: none;
-    }
-}
-
 /* The bubbles: the AI's under its card, the tail under the Torretta's centre (14 px of padding, 48 px picture), and the player's above their box */
 .says,
 .sent {
@@ -403,6 +294,14 @@
     flex: none;
 }
 
+/* The newest, longer than its room, scrolls under the wheel or the finger with no scrollbar, fading where it is cut */
+.says > li.scrolls,
+.sent > li.scrolls {
+    overflow-y: auto;
+    scrollbar-width: none;
+    mask-image: linear-gradient(#000 calc(100% - 20px), transparent);
+}
+
 .say {
     position: relative;
     background: var(--say);
@@ -415,6 +314,42 @@
     overflow-wrap: anywhere;
 }
 
+/* The mark that skips the bubble read aloud, in its corner; the corner is kept while the voice is on, so the words never move when it comes and goes (Zoe) */
+.skip-reading {
+    float: right;
+    width: 22px;
+    height: 20px;
+    margin: 0 -7px 0 6px;
+    padding: 0;
+    border: 0;
+    border-radius: 6px;
+    background: none;
+    color: var(--accent);
+    cursor: pointer;
+}
+
+.skip-reading .icon {
+    display: block;
+    width: 16px;
+    height: 16px;
+    margin: auto;
+    fill: currentColor;
+    stroke: currentColor;
+    stroke-width: 1.5;
+    stroke-linejoin: round;
+}
+
+.skip-reading:hover,
+.skip-reading:focus-visible {
+    color: var(--say-ink);
+    background: color-mix(in oklab, currentColor 14%, transparent);
+}
+
+.skip-reading:focus-visible {
+    outline: 2px solid var(--accent);
+    outline-offset: 1px;
+}
+
 .say:first-child::before {
     content: "";
     position: absolute;
@@ -452,12 +387,11 @@
     overflow-wrap: anywhere;
 }
 
+/* A mark under the player's last line, its words in its title; empty once answered, still as high */
 .status {
     display: inline-flex;
-    align-items: center;
-    gap: 3px;
+    min-height: 15px;
     margin-top: 3px;
-    font-size: 12px;
     color: var(--soft);
 }
 
@@ -469,7 +403,6 @@
 
 .status.read {
     color: var(--accent);
-    font-weight: 600;
 }
 
 /* The box the player writes in: a bubble whose tail points at their picture */
@@ -653,7 +586,8 @@
 
 /* Only the note's first bubble has a tail, pointing up at the Torretta beside the AI's name, the board turned round or not (Stefano) */
 .ai-note > .say::before,
-.ai-note > .say::after {
+.ai-note > .say::after,
+.flipped .ai-note > .say::after {
     content: none;
 }
 
@@ -769,7 +703,7 @@
     background: var(--card);
     color: var(--ink);
     /* The dialogs' backdrop, over the whole window */
-    box-shadow: 0 0 0 100vmax rgba(16, 22, 29, 0.5), 0 16px 40px rgb(0 0 0 / 22%);
+    box-shadow: 0 0 0 100vmax rgba(16, 22, 29, 0.5), 0 16px 40px rgba(0, 0, 0, 0.22);
     font-size: 15px;
     line-height: 1.5;
     text-align: center;
@@ -784,7 +718,7 @@
     margin: 0 auto 12px;
     border-radius: 50%;
     background: var(--accent);
-    animation: reconnecting 1.6s ease-in-out infinite;
+    animation: reconnecting 1600ms ease-in-out infinite;
 }
 
 @keyframes reconnecting {
@@ -846,13 +780,13 @@
 
 .over-board > .asleep {
     margin: 0;
-    box-shadow: 0 2px 6px rgb(0 0 0 / 14%), 0 10px 28px rgb(0 0 0 / 20%);
+    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.14), 0 10px 28px rgba(0, 0, 0, 0.2);
 }
 
 .over-board > .start-clocks {
     flex: none;
     padding: 9px 22px;
-    box-shadow: 0 2px 6px rgb(0 0 0 / 14%), 0 8px 20px rgb(0 0 0 / 22%);
+    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.14), 0 8px 20px rgba(0, 0, 0, 0.22);
     pointer-events: auto;
 }
 

package/dist/page/talk/talk.js

@@ -1,41 +1,51 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "preact/jsx-runtime";
 // The talk on the board page (D-51, D-53): the AI's words in bubbles that point at the Torretta, the player's above the box they write in.
 import { createContext } from "preact";
-import { useContext, useEffect, useLayoutEffect, useRef } from "preact/hooks";
+import { useContext, useEffect, useLayoutEffect, useRef, useState } from "preact/hooks";
 import { Torretta } from "../avatars/torretta.js";
 import { BadgeIcon, NoteIcon } from "../game/badges.js";
 import { Figurines } from "../game/move-list.js";
 import { talkLimits } from "../game/plies.js";
+import { ReviewProgress } from "../game/review-progress.js";
 import { signature } from "../players/model-name.js";
-import { hush, speak } from "./voice.js";
+import { hasVoice, hush, onReading, reading, skip, speak } from "./voice.js";
 /** The AI's words of the game, a bubble each, the newest by the Torretta: below it, or above it on a board turned round; the first points at it. */
 export function AiWords({ words, newestFirst, voice }) {
     const list = useRef(null);
     useOnlyWhole(list, words, newestFirst);
     useSpokenNews(words, voice);
-    return (_jsx("ol", { ref: list, class: "says", "aria-live": "polite", children: inOrder(words.map((word, index) => (_jsx("li", { class: "say", style: aged(words.length - 1 - index), children: _jsx(Marked, { text: word }) }, index))), newestFirst) }));
+    const read = useReading(voice);
+    return (_jsx("ol", { ref: list, class: "says", "aria-live": "polite", children: inOrder(words.map((word, index) => (_jsxs("li", { class: "say", style: aged(words.length - 1 - index), children: [_jsx(SkipReading, { at: wordKey(index, word), read: read, voice: voice }), _jsx(Marked, { text: word })] }, index))), newestFirst) }));
 }
 /**
  * The AI's word on the move shown of a game in analysis (D-69), in a bubble under the Torretta beside the AI's name, pointing up at it: the move, its badge by name,
  * and its note when it wrote one; read out as the player steps through the game. The Torretta and the name stay when the move has no word.
  */
-export function AiNote({ ply, opening, closing, summary, reviewing, onComplete, name, by, mood, voice, text }) {
+export function AiNote({ ply, opening, closing, summary, reviewing, count, onComplete, name, by, mood, voice, text }) {
     // On a move of the book without the AI's note, the AI reports what the book says: the opening in the title, the variation under it.
     const book = ply?.review?.note === undefined ? opening : undefined;
     const shown = ply?.review ?? (book === undefined ? undefined : { badge: "book" });
     const title = [shown?.badge === undefined || (book !== undefined && shown.badge === "book") ? undefined : text.badges[shown.badge], book?.family].filter((part) => part !== undefined).join(" · ");
     const note = shown?.note ?? book?.variation;
-    const spoken = [ply === undefined || shown === undefined ? undefined : title, ply === undefined ? undefined : note, summary?.replace(/\s*•\s+/g, ". "), closing].filter((part) => part !== undefined && part !== "").join(". ");
+    // Each bubble read on its own, so the mark that skips one sits on the one read: the move's, the game's review, the end.
+    const moveWords = ply === undefined || shown === undefined ? "" : [title, note].filter((part) => part !== undefined && part !== "").join(". ");
+    const spoken = [
+        { key: `move:${moveWords}`, words: moveWords },
+        { key: `review:${summary ?? ""}`, words: summary?.replace(/\s*•\s+/g, ". ") ?? "" },
+        { key: `closing:${closing ?? ""}`, words: closing ?? "" },
+    ];
+    const keys = spoken.map((part) => part.key).join("\n");
+    const read = useReading(voice);
     useEffect(() => {
         if (voice !== undefined) {
             speak(spoken, voice);
         }
         return hush;
-    }, [spoken, voice]);
+    }, [keys, voice]);
     // The Torretta stays in sight through the whole analysis, over its bubbles, which show only where it wrote something.
-    return (_jsxs("div", { class: "ai-note", "aria-live": "polite", children: [_jsxs("p", { class: "who", children: [_jsx(Torretta, { size: 36, mood: mood }), _jsxs("span", { class: "signed", children: [name, by === undefined ? null : _jsx("small", { children: signature(by.annotator, by.effort) })] })] }), ply === undefined || shown === undefined ? null : (_jsxs("p", { class: `say move-note ${shown.badge ?? ""}`, children: [_jsxs("span", { class: "head", children: [shown.badge === undefined ? _jsx(NoteIcon, {}) : _jsx(BadgeIcon, { badge: shown.badge }), _jsxs("b", { children: [_jsxs("span", { class: "visually-hidden", children: [ply.number, ply.side === "white" ? "." : "...", ply.san] }), _jsxs("span", { "aria-hidden": "true", children: [_jsxs("span", { class: "move-number", children: [ply.number, ply.side === "white" ? "." : "..."] }), _jsx(Figurines, { san: ply.san, side: ply.side })] })] }), " ", title] }), note === undefined ? null : (_jsx("span", { class: "note", children: _jsx(Marked, { text: note }) })), shown.arrows === undefined && shown.squares === undefined ? null : _jsx(Legend, { review: shown, words: text.drawn })] })), summary === undefined ? null : _jsx(GameReview, { by: name, summary: summary, text: text }), closing === undefined ? null : (_jsx("p", { class: "say closing", children: _jsx(Marked, { text: closing }) })), reviewing === true
-                ? (_jsxs("p", { class: "say reviewing", children: [_jsx("span", { class: "spinner", "aria-hidden": "true" }), text.reviewing(name)] }))
-                : null, onComplete === undefined ? null : (_jsxs("p", { class: "say incomplete", children: [_jsx("span", { role: "status", children: text.incomplete }), _jsx("button", { type: "button", title: text.completeHint, "aria-label": text.completeHint, onClick: onComplete, children: text.complete })] }))] }));
+    return (_jsxs("div", { class: "ai-note", "aria-live": "polite", children: [_jsxs("p", { class: "who", children: [_jsx(Torretta, { size: 36, mood: mood }), _jsxs("span", { class: "signed", children: [name, by === undefined ? null : _jsx("small", { children: signature(by.annotator, by.effort) })] })] }), ply === undefined || shown === undefined ? null : (_jsxs("p", { class: `say move-note ${shown.badge ?? ""}`, children: [_jsx(SkipReading, { at: spoken[0].key, read: read, voice: voice }), _jsxs("span", { class: "head", children: [shown.badge === undefined ? _jsx(NoteIcon, {}) : _jsx(BadgeIcon, { badge: shown.badge }), _jsxs("b", { children: [_jsxs("span", { class: "visually-hidden", children: [ply.number, ply.side === "white" ? "." : "...", ply.san] }), _jsxs("span", { "aria-hidden": "true", children: [_jsxs("span", { class: "move-number", children: [ply.number, ply.side === "white" ? "." : "..."] }), _jsx(Figurines, { san: ply.san, side: ply.side })] })] }), " ", title] }), note === undefined ? null : (_jsx("span", { class: "note", children: _jsx(Marked, { text: note }) })), shown.arrows === undefined && shown.squares === undefined ? null : _jsx(Legend, { review: shown, words: text.drawn })] })), summary === undefined ? null : _jsx(GameReview, { by: name, summary: summary, skipping: _jsx(SkipReading, { at: spoken[1].key, read: read, voice: voice }), text: text }), closing === undefined ? null : (_jsxs("p", { class: "say closing", children: [_jsx(SkipReading, { at: spoken[2].key, read: read, voice: voice }), _jsx(Marked, { text: closing })] })), reviewing === true
+                ? (_jsxs("div", { class: "say reviewing", children: [_jsx("p", { role: "status", children: text.reviewing(name) }), count === undefined ? null : _jsx(ReviewProgress, { count: count, label: text.reviewing(name) })] }))
+                : null, onComplete === undefined ? null : (_jsxs("div", { class: "say incomplete", children: [_jsxs("p", { children: [_jsx("span", { role: "status", children: text.incomplete }), _jsx("button", { type: "button", title: text.completeHint, "aria-label": text.completeHint, onClick: onComplete, children: text.complete })] }), count === undefined || count.done === 0 ? null : _jsx(ReviewProgress, { count: count, label: text.incomplete, stopped: true })] }))] }));
 }
 /** The squares and moves in the AI's words, such as e3, Cxe4, 7.Nd4 or O-O: in bold, as the player looks for them on the board. */
 export function Marked({ text }) {
@@ -123,30 +133,58 @@ function squareIn(word) {
     return /[a-h][1-8](?!.*[a-h][1-8])/.exec(word)?.[0];
 }
 /** The AI's word on the whole game (D-69), in the Torretta's bubble at the start of the game: a paragraph, and its points as a list. */
-function GameReview({ by, summary, text }) {
+function GameReview({ by, summary, skipping, text }) {
     const [lead = "", ...points] = summary.split(/\s*•\s+/);
-    return (_jsxs("section", { class: "say review", "aria-label": text.reviewBy(by), children: [_jsxs("p", { class: "head", children: [_jsx("svg", { class: "icon", viewBox: "0 0 24 24", "aria-hidden": "true", children: _jsx("path", { d: "M12 4V20M8 20H16M5 7H19M5 7L2.5 13A2.5 2 0 0 0 7.5 13ZM19 7L16.5 13A2.5 2 0 0 0 21.5 13Z" }) }), text.reviewBy(by)] }), lead === "" ? null : (_jsx("p", { children: _jsx(Marked, { text: lead }) })), points.length === 0 ? null : (_jsx("ul", { children: points.map((point, index) => (_jsx("li", { children: _jsx(Marked, { text: point }) }, index))) }))] }));
+    return (_jsxs("section", { class: "say review", "aria-label": text.reviewBy(by), children: [skipping, _jsxs("p", { class: "head", children: [_jsx("svg", { class: "icon", viewBox: "0 0 24 24", "aria-hidden": "true", children: _jsx("path", { d: "M12 4V20M8 20H16M5 7H19M5 7L2.5 13A2.5 2 0 0 0 7.5 13ZM19 7L16.5 13A2.5 2 0 0 0 21.5 13Z" }) }), text.reviewBy(by)] }), lead === "" ? null : (_jsx("p", { children: _jsx(Marked, { text: lead }) })), points.length === 0 ? null : (_jsx("ul", { children: points.map((point, index) => (_jsx("li", { children: _jsx(Marked, { text: point }) }, index))) }))] }));
 }
 function RailPlayer({ place, picture, name, side, moves, unread = false }) {
     return (_jsxs("div", { class: `rail-player ${place}${moves ? " moving" : ""}`, children: [_jsx("span", { class: `face${unread ? " unread" : ""}`, children: picture }), _jsxs("span", { class: "rail-name", children: [name, " ", side === undefined ? null : _jsxs("span", { class: "note", children: ["\u00B7 ", side] })] })] }));
 }
-/** Reads aloud each word the AI adds while the page is open, not those already there. */
+/** Reads aloud each word the AI adds while the page is open, not those already there, a bubble after the other; the voice turned off stops it. */
 function useSpokenNews(words, voice) {
     const heard = useRef(words.length);
+    const speaking = voice !== undefined;
     useEffect(() => {
         if (voice !== undefined && words.length > heard.current) {
-            speak(words.slice(heard.current).join(" "), voice);
+            speak(words.slice(heard.current).map((word, index) => ({ key: wordKey(heard.current + index, word), words: word })), voice);
         }
         heard.current = words.length;
     }, [words.length, voice]);
+    useEffect(() => speaking ? hush : undefined, [speaking]);
+}
+/** A word of the AI's by its place in the game and its text, so a word of another game in the same place is not taken for it. */
+function wordKey(index, word) {
+    return `${index}:${word}`;
+}
+/** The key of the bubble the voice reads, none while it reads nothing or is off. */
+function useReading(voice) {
+    const [key, setKey] = useState(reading);
+    useEffect(() => onReading(setKey), []);
+    return voice === undefined ? undefined : key;
+}
+/**
+ * In the corner of a bubble the voice may read, a mark that stops reading it while it is read, and the next goes on; its room is kept while the voice is on,
+ * so the words never move when it comes and goes.
+ */
+function SkipReading({ at, read, voice }) {
+    if (voice === undefined || (read !== at && !hasVoice(voice.language))) {
+        return null;
+    }
+    if (read !== at) {
+        return _jsx("span", { class: "skip-reading", "aria-hidden": "true" });
+    }
+    return (_jsx("button", { type: "button", class: "skip-reading", title: voice.skipReading, "aria-label": voice.skipReading, onClick: () => skip(at), children: _jsx("svg", { class: "icon", viewBox: "0 0 24 24", "aria-hidden": "true", children: _jsx("path", { d: "M5 7L12 12L5 17ZM12 7L19 12L12 17ZM19 6.5V17.5" }) }) }));
 }
 /** A list's items, the newest first when it asks. */
 function inOrder(items, newestFirst) {
     return newestFirst ? items.reverse() : items;
 }
-/** A word fades with age: the newest whole, the older ones far back, so they never pass for the newest (Stefano), each fainter down to a floor. */
+/**
+ * A word fades with age: the newest whole, the older ones well back, so they never pass for the newest (Stefano), each fainter down to a floor where its text still
+ * keeps 3.5:1 on its bubble in the light theme.
+ */
 function aged(age) {
-    return { opacity: age === 0 ? 1 : Math.max(0.2, 0.4 - (age - 1) * 0.1) };
+    return { opacity: age === 0 ? 1 : Math.max(0.6, 0.7 - (age - 1) * 0.05) };
 }
 /** 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) {
@@ -170,9 +208,9 @@ function useOnlyWhole(list, lines, newestFirst = false) {
             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.
+                // The newest never hides: one longer than the column, as a note with the helps on (D-78), scrolls in itself with no scrollbar (talk.css).
                 style.maxHeight = item === newest ? room + "px" : "";
-                style.overflowY = item === newest && item.scrollHeight > room ? "auto" : "";
+                item.classList.toggle("scrolls", item === newest && item.scrollHeight > room);
                 style.visibility = item === newest || (place.top >= box.top - 1 && place.bottom <= box.bottom + 1) ? "" : "hidden";
             }
         };
@@ -182,8 +220,15 @@ function useOnlyWhole(list, lines, newestFirst = false) {
         return () => observer.disconnect();
     }, [list, lines.length, lines.at(-1)]);
 }
-/** Under the player's last line: one check once written, two once the AI has read it. */
+/**
+ * Under the player's last line, a mark with its words as title: one check once written, two once the AI has read it; once it has answered, its answer says it and
+ * the mark leaves, its room kept so the line does not move.
+ */
 function Status({ heard, name, text }) {
-    const read = heard === "read" || heard === "answered";
-    return (_jsxs("span", { class: read ? "status read" : "status", children: [_jsx("svg", { class: "icon", viewBox: "0 0 21 24", "aria-hidden": "true", children: read ? _jsx("path", { d: "M2 12.5L6 16.5L13.5 8M10 15.5L11 16.5L18.5 8" }) : _jsx("path", { d: "M3.5 12.5L7.5 16.5L15 8" }) }), read ? text.readBy(name) : text.sent] }));
+    if (heard === "answered") {
+        return _jsx("span", { class: "status", "aria-hidden": "true" });
+    }
+    const read = heard === "read";
+    const label = read ? text.readBy(name) : text.sent;
+    return (_jsx("span", { class: read ? "status read" : "status", role: "img", title: label, "aria-label": label, children: _jsx("svg", { class: "icon", viewBox: "0 0 21 24", "aria-hidden": "true", children: read ? _jsx("path", { d: "M2 12.5L6 16.5L13.5 8M10 15.5L11 16.5L18.5 8" }) : _jsx("path", { d: "M3.5 12.5L7.5 16.5L15 8" }) }) }));
 }