chesspal 0.3.6 → 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

@@ -294,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);
@@ -306,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;
@@ -343,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);
 }
 
@@ -360,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 */
@@ -544,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;
 }
 
@@ -660,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;
@@ -675,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 {
@@ -737,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" }) }) }));
 }

package/dist/page/talk/voice.js

@@ -1,33 +1,38 @@
-/** Reads the words aloud in the voice's language, the moves in words, cutting short what was being read. */
-export function speak(words, voice) {
+/** Reads the bubbles aloud one after the other in the voice's language, the moves in words, cutting short what was being read. */
+export function speak(readings, voice) {
     if (typeof speechSynthesis === "undefined") {
         return;
     }
-    const said = spokenMoves(words.replace(/\*\*/g, ""), voice.saidMove).trim();
-    speechSynthesis.cancel();
-    clearTimeout(pending);
-    if (said === "") {
-        return;
+    stop();
+    queue = readings.map((reading) => ({ key: reading.key, said: spokenMoves(reading.words.replace(/\*\*/g, ""), voice.saidMove).trim() })).filter((reading) => reading.said !== "");
+    language = voice.language;
+    readNextSoon();
+}
+/** Stops reading the bubble the key names, when it is the one read, and goes on with the next. */
+export function skip(key) {
+    if (current?.key === key) {
+        stop();
+        readNextSoon();
     }
-    // Chrome drops words spoken right after a cancel, and lists its voices late the first time: the words wait a moment.
-    pending = setTimeout(() => {
-        const utterance = new SpeechSynthesisUtterance(said);
-        const reader = readerFor(voice.language);
-        utterance.lang = reader?.lang ?? voice.language;
-        if (reader !== undefined) {
-            utterance.voice = reader;
-        }
-        speechSynthesis.resume();
-        speechSynthesis.speak(utterance);
-    }, 150);
 }
-/** Stops reading. */
+/** Stops reading, and forgets what was waiting. */
 export function hush() {
     if (typeof speechSynthesis !== "undefined") {
-        clearTimeout(pending);
-        speechSynthesis.cancel();
+        queue = [];
+        stop();
     }
 }
+/** The key of the bubble being read, from the moment the voice starts it to its end; none while nothing is read. */
+export function reading() {
+    return current?.started === true ? current.key : undefined;
+}
+/** Calls the listener whenever the bubble being read changes: what it returns stops it. */
+export function onReading(listener) {
+    listeners.add(listener);
+    return () => {
+        listeners.delete(listener);
+    };
+}
 /** Whether the browser has a voice for the language: without one the words cannot be read. */
 export function hasVoice(language) {
     return typeof speechSynthesis !== "undefined" && readerFor(language) !== undefined;
@@ -61,7 +66,73 @@ export function spokenMoves(words, say) {
         return say({ piece, ...said, takes: takes !== undefined, square, ...promoted, ...checked });
     });
 }
+// What waits to be read, what is read and in which language, and who wants to know which bubble is read.
+let queue = [];
+let current;
+let language = "";
 let pending;
+const listeners = new Set();
+// Chrome drops words spoken right after a cancel, and lists its voices late the first time: the words wait a moment.
+function readNextSoon() {
+    pending = setTimeout(readNext, 150);
+}
+function readNext() {
+    const next = queue.shift();
+    if (next === undefined) {
+        return;
+    }
+    const utterance = new SpeechSynthesisUtterance(next.said);
+    const reader = readerFor(language);
+    utterance.lang = reader?.lang ?? language;
+    if (reader !== undefined) {
+        utterance.voice = reader;
+    }
+    const reading = { key: next.key, utterance, started: false };
+    current = reading;
+    // A cancel fires end or error in some browsers and nothing in others: only the events of the utterance read now count, and the page drops its own at once.
+    utterance.onstart = () => {
+        if (current === reading) {
+            reading.started = true;
+            // The voice may stop with no event at all: a look each second at whether it still speaks, so no mark stays on a bubble nobody reads.
+            reading.watch = setInterval(() => {
+                if (current === reading && !speechSynthesis.speaking) {
+                    finished(reading);
+                }
+            }, 1000);
+            tell();
+        }
+    };
+    utterance.onend = () => finished(reading);
+    utterance.onerror = () => finished(reading);
+    speechSynthesis.resume();
+    speechSynthesis.speak(utterance);
+}
+function finished(reading) {
+    if (current === reading) {
+        drop();
+        readNext();
+    }
+}
+// Cuts short what is read, keeping what waits.
+function stop() {
+    clearTimeout(pending);
+    drop();
+    speechSynthesis.cancel();
+}
+function drop() {
+    const was = current;
+    clearInterval(was?.watch);
+    current = undefined;
+    if (was?.started === true) {
+        tell();
+    }
+}
+function tell() {
+    const key = reading();
+    for (const listener of listeners) {
+        listener(key);
+    }
+}
 // A move in SAN, with the pieces' letters or figurines, as the AI writes it; the parts named, castling apart.
 const movePattern = /(?<![\w♔-♟])(?:(?<castles>O-O(?:-O)?|0-0(?:-0)?)|(?:(?<figurine>[♔-♟])[\uFE0E\uFE0F]?|(?<letter>[KQRBN]))?(?<from>[a-h]?[1-8]?)(?<takes>[x×])?(?<square>[a-h][1-8])(?:=?(?<promotion>[QRBN]|[♔-♟]))?[\uFE0E\uFE0F]?)(?<check>\+\+|[+#])?(?![\w♔-♟])/gu;
 // A piece's letter, or its figurine: White's run ♔♕♖♗♘♙ and Black's ♚♛♜♝♞♟, in SAN's order.