chesspal 0.3.5 → 0.4.0

package/dist/page/base.css

@@ -120,7 +120,7 @@ button {
 
 @media (prefers-reduced-motion: reduce) {
     .spinner {
-        animation-duration: 3s;
+        animation-duration: 3000ms;
     }
 }
 

package/dist/page/board/board.css

@@ -375,23 +375,23 @@
 }
 
 .badge.crown {
-    background: #e0a526;
-    color: #3b2a00;
+    background: var(--king-crown);
+    color: var(--king-crown-ink);
 }
 
 /* The mate white on the red square, edged in red */
 .badge.mate {
     background: #fff;
-    color: #c81e1e;
-    box-shadow: 0 0 0 max(1.5px, 0.25cqw) #c81e1e, 0 0.2cqw 0.6cqw rgba(0, 0, 0, 0.4);
+    color: var(--king-mate);
+    box-shadow: 0 0 0 max(1.5px, 0.25cqw) var(--king-mate), 0 0.2cqw 0.6cqw rgba(0, 0, 0, 0.4);
 }
 
 .badge.flag {
-    background: #4a4f57;
+    background: var(--king-flag);
 }
 
 .badge.half {
-    background: #69727d;
+    background: var(--king-draw);
 }
 
 /* A move's badge (D-69): 16px beside a move, a third of a square in the corner of its arrival, edged in white as the kings' badges */
@@ -789,7 +789,7 @@
 .notice.right,
 .notice.left {
     top: calc((var(--row) + 0.5) * 12.5cqw);
-    max-width: min(calc((var(--room) * 12.5cqw) - 12px), 340px);
+    max-width: min(calc(var(--room) * 12.5cqw - 12px), 340px);
 }
 
 .notice.right {
@@ -842,6 +842,7 @@
     left: 50%;
     top: 50%;
     transform: translate(-50%, -50%);
+    text-wrap: balance;
 }
 
 .notice.centre::after {
@@ -886,7 +887,9 @@
 }
 
 .promotion-piece:hover {
-    box-shadow: var(--shadow), inset 0 0 0 max(2px, 0.625cqw) var(--hover-edge);
+    box-shadow:
+        var(--shadow),
+        inset 0 0 0 max(2px, 0.625cqw) var(--hover-edge);
 }
 
 /* White inside dark reads on every square and every theme. */

package/dist/page/board/marks.js

@@ -110,8 +110,8 @@ export function PromotionChoice({ side, column, down, onPick, text }) {
                 onPick(undefined);
             }
         };
-        addEventListener("keydown", escape);
-        return () => removeEventListener("keydown", escape);
+        window.addEventListener("keydown", escape);
+        return () => window.removeEventListener("keydown", escape);
     }, []);
     return (_jsxs("div", { class: "promotion", role: "group", "aria-label": text.promoteTo, children: [_jsx("div", { class: "promotion-shade", onPointerDown: () => onPick(undefined) }), promotionPieces.map((piece, index) => (_jsx("button", { ref: index === 0 ? first : undefined, type: "button", class: "promotion-piece", style: { "--column": column, "--row": down ? index : 7 - index }, "aria-label": text.piece(piece.toUpperCase(), side), onClick: () => onPick(piece), children: _jsx(Piece, { letter: side === "white" ? piece.toUpperCase() : piece }) }, piece)))] }));
 }

package/dist/page/board/pointer.js

@@ -96,10 +96,10 @@ export function useBoardPointer({ columns, ranks, pieces, player, selected, targ
             }
         };
         const landed = drag.back ? setTimeout(() => setDrag(undefined), reducedMotion() ? 0 : 260) : undefined;
-        addEventListener("keydown", escape);
+        window.addEventListener("keydown", escape);
         document.documentElement.classList.add("dragging");
         return () => {
-            removeEventListener("keydown", escape);
+            window.removeEventListener("keydown", escape);
             document.documentElement.classList.remove("dragging");
             clearTimeout(landed);
         };

package/dist/page/dialogs/analyses.js

@@ -6,6 +6,7 @@ import { accountSide } from "../../core/index.js";
 import { ResultTile } from "../game/result-tile.js";
 import { signature } from "../players/model-name.js";
 import { OutcomeBadge, outcomeOf } from "./outcome.js";
+import { useRowKeys } from "./rows.js";
 import { searched } from "./search.js";
 import { playerIn, studiedSides } from "./studied.js";
 /** The list, read anew at each opening: the search, the row that loads a game, then a row for each game found, with its menu or its question. */
@@ -17,13 +18,14 @@ export function Analyses({ onStudy, onLoad, you, accounts, others, ai, text }) {
     const [asking, setAsking] = useState(undefined);
     const [busy, setBusy] = useState(false);
     const [problem, setProblem] = useState(undefined);
+    const rowKeys = useRowKeys();
     useClosing(menu !== undefined, () => setMenu(undefined));
     useClosing(asking !== undefined, () => setAsking(undefined));
     const act = async (name, asked) => {
         setBusy(true);
         const refused = asked === "remove" ? await deletion("/api/delete-game", name) : await deletion("/api/delete-review", name);
-        // Analysing again opens the game without its review: the chat's analyst goes over it (D-89).
-        const after = refused === undefined && asked === "redo" ? await onStudy({ game: name }) : refused;
+        // Analysing again opens the game without its review: the chat's analyst goes over it (D-89), asked for by the player.
+        const after = refused === undefined && asked === "redo" ? await onStudy({ game: name, redo: true }) : refused;
         setBusy(false);
         setAsking(undefined);
         setProblem(after);
@@ -44,7 +46,7 @@ export function Analyses({ onStudy, onLoad, you, accounts, others, ai, text }) {
         return { item, named, outcome };
     });
     const found = searched(rows, query, ({ item, named, outcome }) => searchText(item, named.sides, outcome, text));
-    return (_jsxs("div", { class: "analyses", children: [_jsxs("label", { class: "search", children: [_jsx("svg", { class: "icon", viewBox: "0 0 24 24", "aria-hidden": "true", children: _jsx("path", { d: "M10.5 17A6.5 6.5 0 1 0 10.5 4A6.5 6.5 0 0 0 10.5 17ZM15.5 15.5L20 20" }) }), _jsx("input", { type: "search", value: query, placeholder: words.search, "aria-label": words.search, spellcheck: false, onInput: (event) => setQuery(event.currentTarget.value) })] }), _jsxs("button", { class: "load-row", type: "button", onClick: onLoad, children: [_jsx("span", { class: "plus", "aria-hidden": "true", children: _jsx("svg", { class: "icon", viewBox: "0 0 24 24", children: _jsx("path", { d: "M12 5V19M5 12H19" }) }) }), _jsxs("span", { children: [_jsx("b", { children: words.bring }), _jsx("small", { children: words.bringNote })] })] }), problem === undefined ? null : _jsx("p", { class: "problem", role: "alert", children: problem }), analyses.length > 0 && found.length === 0 ? _jsx("p", { class: "none", children: words.noMatch }) : null, found.length === 0 ? null : (_jsx("ul", { class: "games", "aria-label": words.yours, children: found.map(({ item, named, outcome }) => asking?.name === item.name
+    return (_jsxs("div", { class: "analyses", children: [_jsxs("label", { class: "search", children: [_jsx("svg", { class: "icon", viewBox: "0 0 24 24", "aria-hidden": "true", children: _jsx("path", { d: "M10.5 17A6.5 6.5 0 1 0 10.5 4A6.5 6.5 0 0 0 10.5 17ZM15.5 15.5L20 20" }) }), _jsx("input", { type: "search", value: query, placeholder: words.search, "aria-label": words.search, spellcheck: false, onInput: (event) => setQuery(event.currentTarget.value) })] }), _jsxs("button", { class: "load-row", type: "button", onClick: onLoad, children: [_jsx("span", { class: "plus", "aria-hidden": "true", children: _jsx("svg", { class: "icon", viewBox: "0 0 24 24", children: _jsx("path", { d: "M12 5V19M5 12H19" }) }) }), _jsxs("span", { children: [_jsx("b", { children: words.bring }), _jsx("small", { children: words.bringNote })] })] }), problem === undefined ? null : _jsx("p", { class: "problem", role: "alert", children: problem }), analyses.length > 0 && found.length === 0 ? _jsx("p", { class: "none", children: words.noMatch }) : null, found.length === 0 ? null : (_jsx("ul", { class: "games", "aria-label": words.yours, ...rowKeys, children: found.map(({ item, named, outcome }) => asking?.name === item.name
                     ? (_jsx(Question, { asked: asking.asked, game: named.sides, when: dayOf(item.date, text.language), by: by(item), busy: busy, onYes: () => void act(item.name, asking.asked), onNo: () => setAsking(undefined), words: words }, item.name))
                     : (_jsxs("li", { class: "game", children: [_jsxs("button", { class: "reopen", type: "button", disabled: busy, onClick: () => open(item.name), children: [_jsx(ResultTile, { result: item.result }), _jsxs("span", { class: "what", children: [_jsx("b", { class: "who", children: named.sides }), _jsx("span", { class: "meta", children: [dayOf(item.date, text.language), words.moves(item.moves), item.opening].filter((part) => part !== undefined).join(" · ") }), item.reviewed ? _jsx(Reviewed, { by: by(item), words: words }) : null] }), _jsxs("span", { class: "score", children: [_jsx("b", { children: scoreOf(item.result) }), outcome === undefined ? _jsx("span", {}) : _jsx(OutcomeBadge, { outcome: outcome, words: words })] })] }), _jsx("span", { class: "row-actions", children: _jsx("button", { class: `icon-button${menu?.name === item.name ? " on" : ""}`, type: "button", title: words.more, "aria-label": words.more, "aria-expanded": menu?.name === item.name, disabled: busy, onClick: (event) => setMenu(menu?.name === item.name ? undefined : { name: item.name, anchor: event.currentTarget }), children: _jsx("svg", { class: "icon", viewBox: "0 0 24 24", "aria-hidden": "true", children: _jsx("path", { d: "M5 12H5.01M12 12H12.01M19 12H19.01" }) }) }) }), menu?.name === item.name
                                 ? (_jsx(RowMenu, { anchor: menu.anchor, withReview: item.reviewed || item.begun === true, onPick: (asked) => {

package/dist/page/dialogs/dialogs.css

@@ -622,7 +622,9 @@ h3 + .switch {
 
 /* A game without a result: its star on a coin of the card's colour, readable where the four squares meet */
 .analyses .tile.open {
-    background: radial-gradient(circle, var(--card) 0 11px, transparent 11.5px), conic-gradient(var(--dark-square) 0 25%, var(--light-square) 0 50%, var(--dark-square) 0 75%, var(--light-square) 0);
+    background:
+        radial-gradient(circle, var(--card) 0 11px, transparent 11.5px),
+        conic-gradient(var(--dark-square) 0 25%, var(--light-square) 0 50%, var(--dark-square) 0 75%, var(--light-square) 0);
     color: var(--soft);
     font-size: 18px;
     font-weight: 700;

package/dist/page/dialogs/rows.js

@@ -0,0 +1,72 @@
+import { useLayoutEffect, useRef } from "preact/hooks";
+/**
+ * Makes the list's rows one stop of the Tab: the row's button focused last, or the first row's, takes the Tab, the others only the arrows. Up and down go
+ * to the row above and below, Home and End to the first and the last, left and right between a row's own buttons. A row that asks a question in its place
+ * keeps its buttons in the Tab's order.
+ */
+export function useRowKeys() {
+    const ref = useRef(null);
+    const current = useRef(undefined);
+    // After each render the rows may have changed, by a search or a game deleted: the one stop is the button focused last, if still there, or the first.
+    useLayoutEffect(() => {
+        if (ref.current !== null) {
+            setStop(rowsOf(ref.current).flat(), current.current);
+        }
+    });
+    const onFocusIn = (event) => {
+        const buttons = ref.current === null ? [] : rowsOf(ref.current).flat();
+        if (buttons.includes(event.target)) {
+            current.current = event.target;
+            setStop(buttons, current.current);
+        }
+    };
+    const onKeyDown = (event) => {
+        const rows = ref.current === null ? [] : rowsOf(ref.current);
+        const row = rows.findIndex((buttons) => buttons.includes(event.target));
+        if (row === -1) {
+            return;
+        }
+        const next = target(event.key, rows, row, rows[row].indexOf(event.target));
+        if (next !== undefined) {
+            event.preventDefault();
+            next.focus();
+        }
+    };
+    return { ref, onKeyDown, onFocusIn };
+}
+/** Gives the Tab to the button wanted, if it is still in the list, else to the first. */
+function setStop(buttons, wanted) {
+    const stop = wanted !== undefined && buttons.includes(wanted) ? wanted : buttons[0];
+    for (const button of buttons) {
+        button.tabIndex = button === stop ? 0 : -1;
+    }
+}
+/** The button a key goes to from the row and column focused, or none for a key the list leaves to the page. */
+function target(key, rows, row, column) {
+    const at = (index) => {
+        const buttons = rows[Math.max(0, Math.min(rows.length - 1, index))];
+        return buttons[Math.min(column, buttons.length - 1)];
+    };
+    switch (key) {
+        case "ArrowDown":
+            return at(row + 1);
+        case "ArrowUp":
+            return at(row - 1);
+        case "Home":
+            return at(0);
+        case "End":
+            return at(rows.length - 1);
+        case "ArrowRight":
+            return rows[row][Math.min(column + 1, rows[row].length - 1)];
+        case "ArrowLeft":
+            return rows[row][Math.max(column - 1, 0)];
+        default:
+            return undefined;
+    }
+}
+/** The rows' own buttons, row by row, those that can take the focus: the row's, and its menu's button, never a menu's or a question's. */
+function rowsOf(list) {
+    return [...list.querySelectorAll(":scope > li:not([role])")]
+        .map((row) => [...row.querySelectorAll(":scope > button, :scope > .row-actions > button")].filter((button) => !button.disabled))
+        .filter((buttons) => buttons.length > 0);
+}

package/dist/page/dialogs/site-games.js

@@ -3,6 +3,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "preact/jsx-ru
 import { useEffect, useState } from "preact/hooks";
 import { Piece } from "../pieces/pieces.js";
 import { OutcomeBadge, outcomeOf } from "./outcome.js";
+import { useRowKeys } from "./rows.js";
 /**
  * The list, asked of the server when the step opens and the profile has a name on a site. `picked` is the game being sent, whose row keeps the accent and
  * a spinner while the others wait; `problem`, why the server refused it, shown under the list; `onProfile` opens the profile, where the names go.
@@ -11,6 +12,7 @@ export function SiteGameList({ accounts, picked, problem, onPick, onProfile, tex
     const words = text.study;
     const named = accounts?.lichess !== undefined || accounts?.chesscom !== undefined;
     const answer = useSiteGames(named, words.siteGamesRefused);
+    const rowKeys = useRowKeys();
     if (!named) {
         return (_jsxs("div", { class: "field analyses site-games", children: [_jsx("span", { children: words.siteGames }), _jsxs("p", { class: "none", children: [`${words.siteGamesNoAccount} `, _jsx("button", { class: "add-names", type: "button", onClick: onProfile, children: words.siteGamesProfile })] })] }));
     }
@@ -20,7 +22,7 @@ export function SiteGameList({ accounts, picked, problem, onPick, onProfile, tex
                     ? _jsx("p", { class: "site-problem", children: answer.refusal })
                     : (_jsxs(_Fragment, { children: [_jsx(SiteProblems, { answer: answer, text: text }), answer.games.length === 0
                                 ? (answer.answered.length === 0 ? null : _jsx("p", { class: "none", children: words.siteGamesNone }))
-                                : (_jsx("ul", { class: `games${picked === undefined ? "" : " picking"}`, "aria-label": words.siteGames, children: answer.games.map((game) => _jsx(GameRow, { game: game, picked: picked, onPick: onPick, text: text }, game.name)) })), problem === undefined ? null : _jsx("p", { class: "problem", role: "alert", children: problem })] }))] }));
+                                : (_jsx("ul", { class: `games${picked === undefined ? "" : " picking"}`, "aria-label": words.siteGames, ...rowKeys, children: answer.games.map((game) => _jsx(GameRow, { game: game, picked: picked, onPick: onPick, text: text }, game.name)) })), problem === undefined ? null : _jsx("p", { class: "problem", role: "alert", children: problem })] }))] }));
 }
 const siteNames = { "lichess": "Lichess", "chess.com": "Chess.com" };
 /** The sites that did not answer, both in one line, and those without a player by the profile's name, in the profile window's words. */

package/dist/page/game/column.js

@@ -1,20 +1,21 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "preact/jsx-runtime";
-import { outOfBookMove } from "../../core/index.js";
+import {} from "../../core/index.js";
 import { LeadBar, LeadChart } from "../lead/lead.js";
 import { standingAt } from "../lead/view.js";
 import { Piece } from "../pieces/pieces.js";
 import { FoldButton, useCardFold } from "./card-fold.js";
 import { MoveList, Steps } from "./move-list.js";
 import { ResultTile } from "./result-tile.js";
+import { ReviewProgress } from "./review-progress.js";
 /**
  * The column, which the player folds with its tab; under the board, where three columns would leave the board small, always open. A game in analysis
  * (D-69) says above the moves that the AI is going over it, until its word on the whole game comes, which the talk shows.
  */
-export function GameColumn({ plies, result, how, lit, started, move, toMove, opening, helps, legend, standings, analysis, shownPlies, onShow, onStep, onDownload, onSaveMoves, onAnalyse, text }) {
+export function GameColumn({ plies, result, how, lit, started, move, toMove, opening, outOfBook, helps, legend, standings, analysis, shownPlies, onShow, onStep, onDownload, onSaveMoves, onAnalyse, text }) {
     const bar = standings === undefined ? undefined : _jsx(LeadBar, { standing: standingAt(standings, shownPlies), shown: shownPlies, text: text });
     return (_jsx("aside", { class: "side", id: "game", "aria-label": text.game, children: started === undefined && analysis === undefined
             ? (_jsxs(_Fragment, { children: [_jsx("p", { class: "card empty", children: text.noGame }), onAnalyse === undefined ? null : _jsx(AnalyseButton, { label: text.study.analyseLast, onAnalyse: onAnalyse })] }))
-            : (_jsxs(_Fragment, { children: [_jsxs("div", { class: "side-cards", children: [_jsx(GameCard, { plies: plies, result: result, how: how, lit: lit, started: started, move: move, toMove: toMove, bar: bar, text: text }), analysis?.reviewing !== true ? null : (_jsxs("p", { class: "card review waiting", role: "status", children: [_jsx("span", { class: "spinner", "aria-hidden": "true" }), text.reviewing(analysis.by)] })), analysis?.onComplete === undefined ? null : (_jsxs("div", { class: "card review incomplete", children: [_jsx("p", { role: "status", children: text.incomplete }), _jsx("button", { type: "button", title: text.completeHint, "aria-label": text.completeHint, onClick: analysis.onComplete, children: text.complete })] })), analysis === undefined || standings === undefined ? null : _jsx(LeadChart, { plies: plies, standings: standings, shown: shownPlies, onShow: onShow, text: text }), opening === undefined ? null : _jsx(OpeningCard, { opening: opening, text: text }), helps] }), _jsxs("div", { class: "side-foot", children: [result !== undefined && plies.length === 0 ? null : _jsx(MoveList, { plies: plies, result: result, shown: shownPlies, onShow: onShow, tools: legend, text: text }), onDownload === undefined && onSaveMoves === undefined ? null : (_jsxs("div", { class: "card analysis-actions", children: [onDownload === undefined ? null : _jsx(SaveButton, { label: text.study.download, hint: text.study.downloadHint, onSave: onDownload }), onSaveMoves === undefined ? null : _jsx(SaveButton, { label: text.saveMoves, hint: text.saveMovesHint, onSave: onSaveMoves })] })), onAnalyse === undefined ? null : _jsx(AnalyseButton, { label: text.study.analyseIt, onAnalyse: onAnalyse }), _jsx(Steps, { shown: shownPlies, total: plies.length, onStep: onStep, text: text })] })] })) }));
+            : (_jsxs(_Fragment, { children: [_jsxs("div", { class: "side-cards", children: [_jsx(GameCard, { plies: plies, result: result, how: how, lit: lit, started: started, move: move, toMove: toMove, bar: bar, text: text }), analysis?.reviewing !== true ? null : (_jsxs("div", { class: "card review waiting", children: [_jsx("p", { role: "status", children: text.reviewing(analysis.by) }), analysis.count === undefined ? null : _jsx(ReviewProgress, { count: analysis.count, label: text.reviewing(analysis.by) })] })), analysis?.onComplete === undefined ? null : (_jsxs("div", { class: "card review incomplete", children: [_jsxs("p", { children: [_jsx("span", { role: "status", children: text.incomplete }), _jsx("button", { type: "button", title: text.completeHint, "aria-label": text.completeHint, onClick: analysis.onComplete, children: text.complete })] }), analysis.count === undefined || analysis.count.done === 0 ? null : _jsx(ReviewProgress, { count: analysis.count, label: text.incomplete, stopped: true })] })), analysis === undefined || standings === undefined ? null : _jsx(LeadChart, { plies: plies, standings: standings, shown: shownPlies, onShow: onShow, text: text }), opening === undefined ? null : _jsx(OpeningCard, { opening: opening, ...(outOfBook === undefined ? {} : { outOfBook }), text: text }), helps] }), _jsxs("div", { class: "side-foot", children: [result !== undefined && plies.length === 0 ? null : _jsx(MoveList, { plies: plies, result: result, shown: shownPlies, onShow: onShow, tools: legend, text: text }), onDownload === undefined && onSaveMoves === undefined ? null : (_jsxs("div", { class: "card analysis-actions", children: [onDownload === undefined ? null : _jsx(SaveButton, { label: text.study.download, hint: text.study.downloadHint, onSave: onDownload }), onSaveMoves === undefined ? null : _jsx(SaveButton, { label: text.saveMoves, hint: text.saveMovesHint, onSave: onSaveMoves })] })), onAnalyse === undefined ? null : _jsx(AnalyseButton, { label: text.study.analyseIt, onAnalyse: onAnalyse }), _jsx(Steps, { shown: shownPlies, total: plies.length, onStep: onStep, text: text })] })] })) }));
 }
 /** A button that saves the game as a file in the player's downloads, its tooltip saying what the file holds. */
 function SaveButton({ label, hint, onSave }) {
@@ -48,12 +49,13 @@ function GameCard({ plies, result, how, lit, started, move, toMove, bar, text })
  * The opening by Lichess's book: a book, crossed out once the game left it, and the family, which fold the card to them (Stefano); the variation under them,
  * and the move the game left the book at.
  */
-function OpeningCard({ opening, text }) {
+function OpeningCard({ opening, outOfBook, text }) {
     const [foldedHere, toggleFold] = useCardFold("opening");
-    const book = opening.inBook ? text.inBook : `${text.outOfBook} ${outOfBookMove(opening)}`;
+    const inBook = outOfBook === undefined;
+    const book = inBook ? text.inBook : `${text.outOfBook} ${outOfBook}`;
     // The family alone has nothing under it to fold: no button, no chevron (Stefano).
-    const foldable = opening.variation !== undefined || !opening.inBook;
+    const foldable = opening.variation !== undefined || !inBook;
     const folded = foldable && foldedHere;
-    const title = (_jsxs(_Fragment, { children: [_jsx("span", { class: `book${opening.inBook ? "" : " out"}`, title: book, role: "img", "aria-label": book, children: _jsxs("svg", { class: "icon", viewBox: "0 0 24 24", "aria-hidden": "true", children: [_jsx("path", { d: "M12 6.5C10 5 7 4.5 4 5V18C7 17.5 10 18 12 19.5C14 18 17 17.5 20 18V5C17 4.5 14 5 12 6.5ZM12 6.5V19.5" }), opening.inBook ? null : _jsx("path", { d: "M3.5 3.5L20.5 20.5" })] }) }), _jsx("b", { children: opening.family })] }));
-    return (_jsxs("section", { class: `card opening${folded ? " folded" : ""}`, "aria-label": text.opening, children: [_jsx("h3", { class: "family", children: foldable ? _jsx(FoldButton, { folded: folded, onFold: toggleFold, text: text, children: title }) : title }), folded || opening.variation === undefined ? null : _jsx("p", { class: "variation", children: opening.variation }), folded || opening.inBook ? null : _jsxs("p", { class: "out", children: [text.outOfBook, " ", outOfBookMove(opening)] })] }));
+    const title = (_jsxs(_Fragment, { children: [_jsx("span", { class: `book${inBook ? "" : " out"}`, title: book, role: "img", "aria-label": book, children: _jsxs("svg", { class: "icon", viewBox: "0 0 24 24", "aria-hidden": "true", children: [_jsx("path", { d: "M12 6.5C10 5 7 4.5 4 5V18C7 17.5 10 18 12 19.5C14 18 17 17.5 20 18V5C17 4.5 14 5 12 6.5ZM12 6.5V19.5" }), inBook ? null : _jsx("path", { d: "M3.5 3.5L20.5 20.5" })] }) }), _jsx("b", { children: opening.family })] }));
+    return (_jsxs("section", { class: `card opening${folded ? " folded" : ""}`, "aria-label": text.opening, children: [_jsx("h3", { class: "family", children: foldable ? _jsx(FoldButton, { folded: folded, onFold: toggleFold, text: text, children: title }) : title }), folded || opening.variation === undefined ? null : _jsx("p", { class: "variation", children: opening.variation }), folded || inBook ? null : _jsxs("p", { class: "out", children: [text.outOfBook, " ", outOfBook] })] }));
 }

package/dist/page/game/game.css

@@ -129,8 +129,8 @@
     height: 14px;
     margin-top: 6px;
     border-radius: 7px;
-    background: #3b4048;
-    box-shadow: 0 0 0 1px rgb(138 144 153 / 0.6);
+    background: var(--side-black);
+    box-shadow: 0 0 0 1px var(--side-edge);
     overflow: hidden;
 }
 
@@ -139,7 +139,7 @@
     position: absolute;
     inset: 3px auto 3px calc(50% - 0.5px);
     width: 1px;
-    background: #8a9099;
+    background: var(--side-both);
 }
 
 /* On a position after the one the AI estimated: the player's move, until the coach speaks again */
@@ -150,7 +150,7 @@
 .lead-bar .white {
     position: absolute;
     inset: 0 auto 0 0;
-    background: #f5f5f2;
+    background: var(--side-white);
     transition: width 400ms ease;
 }
 
@@ -172,12 +172,12 @@
 .lead-bar .figure.white,
 .lead-bar .figure.even {
     left: 6px;
-    color: #2a2f36;
+    color: var(--fixed-ink);
 }
 
 .lead-bar .figure.black {
     right: 6px;
-    color: #f5f5f2;
+    color: var(--side-white);
 }
 
 /* The chart of the game in analysis: the white area is White's share, the line in the middle an even game; a dot on a move a badge marks, a line on the move
@@ -191,10 +191,13 @@
     position: relative;
     height: 72px;
     border-radius: 6px;
-    background: #3b4048;
-    box-shadow: 0 0 0 1px rgb(138 144 153 / 0.6);
+    background: var(--side-black);
+    box-shadow: 0 0 0 1px var(--side-edge);
     overflow: hidden;
     cursor: pointer;
+    /* A finger drawn across it runs through the game; up and down it scrolls the page */
+    touch-action: pan-y;
+    user-select: none;
 }
 
 .lead-chart svg {
@@ -204,7 +207,7 @@
 }
 
 .lead-chart .white-area {
-    fill: #f5f5f2;
+    fill: var(--side-white);
 }
 
 .lead-chart .pending {
@@ -212,7 +215,7 @@
 }
 
 .lead-chart .even {
-    stroke: #8a9099;
+    stroke: var(--side-both);
     stroke-width: 1;
     stroke-dasharray: 3 3;
     fill: none;
@@ -225,10 +228,15 @@
     width: 2px;
     margin-left: -1px;
     background: #ffc450;
-    box-shadow: 0 0 0 1px rgb(20 23 27 / 0.6);
+    box-shadow: 0 0 0 1px rgba(20, 23, 27, 0.6);
     pointer-events: none;
 }
 
+/* The move a click would show, under the mouse: the same line, fainter (Zoe) */
+.lead-chart .ghost {
+    opacity: 0.5;
+}
+
 .lead-chart .dot {
     position: absolute;
     width: 8px;
@@ -311,24 +319,104 @@
     line-height: 1.45;
 }
 
+/* The line that says the AI reviews, and under it how far it has got */
 .review.waiting,
 .say.reviewing {
-    display: flex;
-    align-items: center;
+    display: grid;
     gap: 8px;
     margin: 0;
     color: var(--soft);
 }
 
-/* A review nobody is finishing: the note, and beside it the button that brings the game back to the AI (D-109); neutral, as no error (Zoe) */
+/* A review nobody is finishing: the note, and beside it the button that brings the game back to the AI (D-109); neutral, as no error (Zoe). Under them,
+   how far it got */
 .review.incomplete,
 .say.incomplete {
+    display: grid;
+    gap: 8px;
+    margin: 0;
+    color: var(--soft);
+}
+
+.review.incomplete > p,
+.say.incomplete > p {
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 8px;
-    margin: 0;
-    color: var(--soft);
+}
+
+/* How far a review has got: a thin bar in the accent and the count, 12/33. Before the first move a short run goes back and forth; full, while the word on
+   the whole game is written, it breathes; stopped unfinished, it stands still in the soft ink */
+.review-progress {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+
+.review-progress .track {
+    flex: 1;
+    height: 4px;
+    overflow: hidden;
+    border-radius: 2px;
+    background: color-mix(in srgb, var(--accent) 20%, transparent);
+}
+
+.review-progress .fill {
+    display: block;
+    width: 0;
+    height: 100%;
+    border-radius: inherit;
+    background: var(--accent);
+    transition: width 300ms ease-out;
+}
+
+.review-progress .count {
+    flex: none;
+    font-size: 12px;
+    font-variant-numeric: tabular-nums;
+}
+
+.review-progress.waiting .fill {
+    width: 30%;
+    animation: review-run 1400ms ease-in-out infinite alternate;
+}
+
+.review-progress.writing .fill {
+    animation: review-breath 1600ms ease-in-out infinite;
+}
+
+.review-progress.stopped .track {
+    background: color-mix(in srgb, var(--soft) 20%, transparent);
+}
+
+.review-progress.stopped .fill {
+    background: var(--soft);
+}
+
+@keyframes review-run {
+    to {
+        translate: 233%;
+    }
+}
+
+@keyframes review-breath {
+    50% {
+        opacity: 0.45;
+    }
+}
+
+/* Still: before the first move a faint full bar, the count then grows without sliding */
+@media (prefers-reduced-motion: reduce) {
+    .review-progress .fill {
+        transition: none;
+        animation: none;
+    }
+
+    .review-progress.waiting .fill {
+        width: 100%;
+        opacity: 0.35;
+    }
 }
 
 .review.incomplete button,
@@ -394,6 +482,8 @@
     overflow: hidden auto;
     scrollbar-width: none;
     font-size: 14px;
+    /* A row too long for a phone never makes the page wider */
+    contain: inline-size;
 }
 
 .moves ol {
@@ -438,6 +528,11 @@
     cursor: pointer;
 }
 
+/* A move never breaks, its piece always beside its square: a long one takes room from its neighbour in the row */
+.moves .ply {
+    white-space: nowrap;
+}
+
 /* The move under the pointer in a neutral grey, never the accent, so it never reads as the move shown (Stefano) */
 .moves .ply:hover {
     background: color-mix(in oklab, var(--ink) 9%, transparent);
@@ -552,6 +647,32 @@
     }
 }
 
+/* On a phone the rows give the moves all the room they can, so that two columns hold a move with its badge on one line (Zoe) */
+@media (max-width: 479px) {
+    .moves ol {
+        column-gap: 8px;
+    }
+
+    .moves li {
+        grid-template-columns: 22px 1fr 1fr;
+        column-gap: 4px;
+        padding: 3px 4px;
+    }
+
+    .moves .ply {
+        gap: 3px;
+        padding: 1px 4px;
+        margin-left: -4px;
+    }
+}
+
+/* On the narrowest phones two columns would leave a move no room: one column */
+@media (max-width: 359px) {
+    .moves ol {
+        columns: 1;
+    }
+}
+
 /* A card's title in the game's column, its icon in the accent as the opening's book: the helps' lifebuoy, the moves' score sheet (Stefano) */
 .card-title {
     display: flex;

package/dist/page/game/move-list.js

@@ -48,14 +48,16 @@ function Move({ ply, current, onShow, text }) {
     // A screen reader reads the move in SAN and the AI's badge by its name; the eye sees each piece's letter as its figure, and the badge's disc (D-69).
     return (_jsxs("button", { type: "button", class: current ? "ply current" : "ply", "aria-current": current ? "step" : undefined, onClick: onShow, children: [_jsx("span", { class: "visually-hidden", children: ply.review?.badge === undefined ? ply.san : `${ply.san}, ${text.badges[ply.review.badge]}` }), _jsx("span", { "aria-hidden": "true", children: _jsx(Figurines, { san: ply.san, side: ply.side }) }), ply.review?.badge !== undefined ? _jsx(BadgeIcon, { badge: ply.review.badge }) : ply.review?.note !== undefined ? _jsx(NoteIcon, {}) : null] }));
 }
-/** Scrolls the list, and only the list, as little as it takes to show its current move. */
+/** Scrolls the list, and only the list, as little as it takes to show the whole row of its current move, and the result under the last one. */
 function keepInSight(list) {
-    const box = list?.getBoundingClientRect();
-    const move = list?.querySelector(".current")?.getBoundingClientRect();
-    if (box === undefined || move === undefined) {
+    const row = list?.querySelector(".current")?.closest("li");
+    if (list === null || !row) {
         return;
     }
-    list.scrollTop += Math.min(0, move.top - box.top) + Math.max(0, move.bottom - box.bottom);
+    const box = list.getBoundingClientRect();
+    const top = row.getBoundingClientRect().top;
+    const bottom = (row.nextElementSibling === null ? list.lastElementChild ?? row : row).getBoundingClientRect().bottom;
+    list.scrollTop += Math.min(0, top - box.top) + Math.max(0, bottom - box.bottom);
 }
 /** The plies in rows of one number: White's move and Black's. */
 function rowsOf(plies) {

package/dist/page/game/plies.js

@@ -91,3 +91,7 @@ export function playerSpent(plies, ai, talk) {
 function judged({ review }) {
     return review?.note !== undefined || (review?.badge !== undefined && review.badge !== "book");
 }
+/** How far a review has got, as status tells the AI: the moves the analyst has said who is ahead after, of all the game's. */
+export function reviewCount(plies) {
+    return { done: plies.filter((ply) => ply.lead !== undefined).length, total: plies.length };
+}

package/dist/page/game/review-progress.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "preact/jsx-runtime";
+/**
+ * The line that says the analyst works, and under it a thin bar with the count, 12/33: a bar that runs back and forth before the first move is said, full
+ * and breathing while the word on the whole game is written; still, in the soft ink, when the review stopped unfinished.
+ */
+export function ReviewProgress({ count, label, stopped = false }) {
+    const { done, total } = count;
+    const started = done > 0;
+    const state = stopped ? " stopped" : !started ? " waiting" : done >= total ? " writing" : "";
+    return (_jsxs("span", { class: `review-progress${state}`, role: "progressbar", "aria-label": label, "aria-valuemin": 0, "aria-valuemax": total, ...(started || stopped ? { "aria-valuenow": done, "aria-valuetext": `${done}/${total}` } : {}), children: [_jsx("span", { class: "track", "aria-hidden": "true", children: _jsx("span", { class: "fill", style: started ? { width: `${(100 * done) / Math.max(total, 1)}%` } : undefined }) }), started || stopped ? _jsxs("span", { class: "count", "aria-hidden": "true", children: [done, "/", total] }) : null] }));
+}

package/dist/page/guide/drawings/drawings.css

@@ -111,7 +111,6 @@
     stroke-width: 2.4;
 }
 
-
 .guide-art .knot,
 .guide-art .caret {
     fill: var(--accent);

package/dist/page/guide/en.md

@@ -18,7 +18,7 @@ No chess engine plays for the AI: every move and every judgment is its own. Ches
 
 ### Getting started
 
-1. Click the **AI's name**, at the top left, and choose its chat among those on your computer: **Claude Code** or **Codex**. It opens in a window of its own: keep it open while you play.
+1. Click the **AI's name**, at the top left, and choose its chat among those on your computer: **Claude Code** or **Codex**. It opens in a window of its own: keep it open while you play. The first time it asks some questions. Whether you trust the folder: **Yes** (in Claude Code No is chosen already: go down to Yes with the arrow keys, then Enter). With Codex, about the hooks, Chesspal's two helpers: **Trust all and continue**. On Windows Codex also asks whether to set up its sandbox, the protected space it works in: choose the first option, and yes when Windows asks for permission.
 2. Press **New game**, choose your colour, the clock and the AI's level, and press **Start**.
 3. Move: the AI answers on the board, and with a few words under its name.
 
@@ -35,7 +35,7 @@ No chess engine plays for the AI: every move and every judgment is its own. Ches
 
 ![The box to write in under the AI's name, and its answer](talk)
 
-- You talk with the AI in the **box under its name**, a few words with each move: it reads them with your move. You can also write to it in its window.
+- You talk with the AI in the **box under its name**, a few words with each move: it reads them with your move. You can also write to it in its window. With Codex, if you write there while it waits for your move, press **Esc** after Enter: else it reads your message only after your move.
 - A **move written** in the chat counts too: `e4`, `Nf3`, with the English letters of the pieces (K Q R B N), or in words.
 - **The AI's name** opens the choice of its chat: Claude Code or Codex, the model (which AI: some are faster, others stronger) and how much it reasons. The more it reasons, the slower it plays. If you change them, the chat starts afresh in the same window: the AI forgets what you talked about, and the game stays as it is.
 - At each **new game**, the chat the page opened starts afresh by itself, once the AI has stopped thinking: a long chat makes the AI slower.

package/dist/page/guide/it.md

@@ -18,7 +18,7 @@ Nessun motore di scacchi gioca al posto dell'AI: ogni mossa e ogni giudizio sono
 
 ### Per cominciare
 
-1. Clicca il **nome dell'AI**, in alto a sinistra, e scegli la chat fra quelle che hai sul computer: **Claude Code** o **Codex**. Si apre in una finestra sua: tienila aperta mentre giochi.
+1. Clicca il **nome dell'AI**, in alto a sinistra, e scegli la chat fra quelle che hai sul computer: **Claude Code** o **Codex**. Si apre in una finestra sua: tienila aperta mentre giochi. La prima volta fa qualche domanda. Se ti fidi della cartella: **Sì** (in Claude Code è già scelto No: scendi su Yes con le frecce, poi Invio). Con Codex, sugli hook, i due aiutanti di Chesspal: **Trust all and continue**. Su Windows Codex chiede anche se preparare la sua sandbox, lo spazio protetto dove lavora: scegli la prima opzione, e sì quando Windows chiede il permesso.
 2. Premi **Nuova partita**, scegli il colore, l'orologio e il livello dell'AI, e premi **Inizia**.
 3. Muovi: l'AI risponde sulla scacchiera, e con qualche parola sotto il suo nome.
 
@@ -35,7 +35,7 @@ Nessun motore di scacchi gioca al posto dell'AI: ogni mossa e ogni giudizio sono
 
 ![La casella per scrivere sotto il nome dell'AI, e la sua risposta](talk)
 
-- Parli con l'AI nella **casella sotto il suo nome**, qualche parola a ogni mossa: le legge con la tua mossa. Puoi scriverle anche nella sua finestra.
+- Parli con l'AI nella **casella sotto il suo nome**, qualche parola a ogni mossa: le legge con la tua mossa. Puoi scriverle anche nella sua finestra. Con Codex, se gli scrivi lì mentre aspetta la tua mossa, dopo Invio premi **Esc**: se no legge il messaggio solo dopo la tua mossa.
 - Anche una **mossa scritta** nella chat vale: `e4`, `Nf3`, con le lettere inglesi dei pezzi (K Q R B N), o a parole.
 - **Il nome dell'AI** apre la scelta della chat: Claude Code o Codex, il modello (quale AI: alcune sono più veloci, altre più forti) e quanto ragiona. Più ragiona, più gioca lenta. Se cambi, la chat riparte da capo nella stessa finestra: l'AI dimentica la chiacchierata di prima, la partita resta com'è.
 - A ogni **nuova partita** la chat aperta dalla pagina riparte da capo da sola, se l'AI ha finito di pensare: una chat lunga rende l'AI più lenta.