chesspal 0.3.4 → 0.3.6

package/dist/page/app/watch.js

@@ -0,0 +1,97 @@
+// How the page follows the server's game: it reads it when the server says it changed, tries a read lost on the way again, and connects again when the
+// browser gives the server up for good, as when an old table hands the page to the new one. Without Preact, so that a test drives it with fake timers.
+/** How many times, and how far apart in milliseconds, a read lost on the way is tried again; how long before a stream given up is opened again. */
+export const readTries = 5;
+export const readTryWait = 1000;
+export const reconnectWait = 3000;
+/** Follows the server's game: the first read when the events connect, another at each change, until `stop`. */
+export function watchServed(tools, listener) {
+    let latest = 0;
+    // The Chesspal version of the first answer: a server of another, after an update, sends data this page may not read.
+    let pageVersion;
+    // The reads of the game asked last that failed, and the next try.
+    let failures = 0;
+    let retry;
+    let reconnect;
+    let stopped = false;
+    // Whether the page shows a game: then a read that fails leaves it shown, offline, rather than replacing it with the error.
+    let shown = false;
+    let events = open();
+    function load(again = false) {
+        tools.cancel(retry);
+        failures = again ? failures : 0;
+        // Two reads in flight may answer out of order: only the last one asked counts.
+        const asked = ++latest;
+        tools.read()
+            .then((body) => {
+            if (asked !== latest || stopped) {
+                return;
+            }
+            pageVersion ??= body.version;
+            if (body.version !== undefined && body.version !== pageVersion) {
+                listener.otherVersion();
+                return;
+            }
+            listener.problem(body.error);
+            if (body.error === undefined) {
+                shown = true;
+                listener.offline(false);
+                listener.read(body);
+            }
+        })
+            .catch((error) => {
+            if (asked !== latest || stopped) {
+                return;
+            }
+            // With the server gone the page waits for it and says so: connecting again reads the game.
+            if (events.readyState !== streamOpen) {
+                listener.offline(true);
+                return;
+            }
+            // A read lost on the way while the server is there is tried again shortly.
+            if (++failures <= readTries) {
+                retry = tools.later(() => load(true), readTryWait);
+                return;
+            }
+            if (shown) {
+                listener.offline(true);
+            }
+            else {
+                listener.problem(String(error));
+            }
+        });
+    }
+    function open() {
+        const stream = tools.connect({
+            open: () => {
+                listener.offline(false);
+                load();
+            },
+            // The chat asks for a new game: the player chooses it in the New game window.
+            message: (data) => data === "new-game" ? listener.newGame() : load(),
+            // The browser connects again by itself, but not after a server that answered with an error: then the page does, a little later.
+            error: () => {
+                listener.offline(stream.readyState !== streamOpen);
+                if (stream.readyState === streamClosed && !stopped) {
+                    tools.cancel(reconnect);
+                    reconnect = tools.later(() => {
+                        events = open();
+                    }, reconnectWait);
+                }
+            },
+        });
+        return stream;
+    }
+    return {
+        reload: () => load(),
+        stop: () => {
+            stopped = true;
+            tools.cancel(retry);
+            tools.cancel(reconnect);
+            events.close();
+        },
+    };
+}
+// EventSource's states, which a test's fake stream has no class for.
+const streamOpen = 1;
+const streamClosed = 2;

package/dist/page/avatars/torretta.css

@@ -0,0 +1,108 @@
+/* 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;
+    }
+}

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 */
@@ -842,6 +842,7 @@
     left: 50%;
     top: 50%;
     transform: translate(-50%, -50%);
+    text-wrap: balance;
 }
 
 .notice.centre::after {

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,10 +6,11 @@ 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. */
-export function Analyses({ onStudy, onLoad, you, accounts, ai, text }) {
+export function Analyses({ onStudy, onLoad, you, accounts, others, ai, text }) {
     const words = text.study;
     const [analyses, reload] = useAnalyses();
     const [query, setQuery] = useState("");
@@ -17,13 +18,14 @@ export function Analyses({ onStudy, onLoad, you, accounts, 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);
@@ -37,14 +39,14 @@ export function Analyses({ onStudy, onLoad, you, accounts, ai, text }) {
         });
     };
     const rows = analyses.map((item) => {
-        const named = namedSides(item, you, accounts, ai, text);
+        const named = namedSides(item, you, accounts, others, ai, text);
         // How it went only for the player's own games: played here, or loaded and named by their name on the site (D-93).
         const played = item.name.startsWith("games/") ? named.you : accountSide(tagsOf(item), accounts);
         const outcome = played === undefined ? undefined : outcomeOf(item.result, played);
         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) => {
@@ -98,9 +100,9 @@ function placeUnder(menu, anchor) {
     menu.style.left = `${Math.max(edge, button.right - box.width)}px`;
 }
 /** Who played a game listed, as its analysis names them, «Stefano – Opus 5.5 · xhigh», and the player's side when they played one. */
-function namedSides(item, you, accounts, ai, text) {
+function namedSides(item, you, accounts, others, ai, text) {
     const model = item.aiModel === undefined ? ai : signature(item.aiModel.model, item.aiModel.effort);
-    const sides = studiedSides(tagsOf(item), you, model, text.sides, accounts);
+    const sides = studiedSides(tagsOf(item), you, model, text.sides, accounts, others);
     const side = playerIn(sides);
     return { sides: `${sides.white.name} – ${sides.black.name}`, ...(side === undefined ? {} : { you: side }) };
 }

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/dialogs/studied.js

@@ -1,6 +1,10 @@
 // The players of a game in analysis (D-69), as the page shows them: a game played here names them Player and AI, one played elsewhere by their names; the
-// player's own, by their names on Lichess and chess.com (D-93).
+// player's own, and another profile's, by their names on Lichess and chess.com (D-93), shown with the profile's name.
 import { accountSide } from "../../core/index.js";
+/** The profiles here other than the one in use. */
+export function othersOf(profiles, inUse) {
+    return (profiles ?? []).filter(({ id }) => id !== inUse);
+}
 /** The player's side in a game in analysis: none when they played neither side, or both. */
 export function playerIn(sides) {
     const white = sides.white.who === "player";
@@ -8,16 +12,17 @@ export function playerIn(sides) {
 }
 /**
  * Both sides of a game in analysis, and the one at the bottom: the player's, when one of them is, else White. The player is the side named Player, or by
- * their name, or by their name on the site the game was played on (D-93).
+ * their name, or by their name on the site the game was played on (D-93); a side that is not theirs and bears another profile's name there is that profile.
  */
-export function studiedSides(tags, you, ai, sides, accounts) {
+export function studiedSides(tags, you, ai, sides, accounts, others = []) {
     const sideOf = (side) => {
         const tag = (side === "white" ? tags.White : tags.Black)?.trim() ?? "";
-        if (tag === "Player" || tag.toLowerCase() === you.trim().toLowerCase()) {
+        if (tag === "Player" || tag.toLowerCase() === you.trim().toLowerCase() || accountSide(tags, accounts) === side) {
             return { name: you, who: "player" };
         }
-        if (accountSide(tags, accounts) === side) {
-            return { name: tag, who: "player" };
+        const other = others.find((profile) => accountSide(tags, profile.accounts) === side);
+        if (other !== undefined) {
+            return { name: other.name, who: "other", profile: other.id };
         }
         // A tag PGN leaves unknown names the side.
         return tag === "AI" ? { name: ai, who: "ai" } : { name: /^[?\-\s]*$/.test(tag) ? sides[side] : tag, who: "other" };

package/dist/page/dialogs/study.js

@@ -9,7 +9,7 @@ import { SiteGameList } from "./site-games.js";
  * The dialog the header's button opens; `onStudy` sends the choice and gives back why the server refused it, or undefined once it took it. The games played
  * here name their sides as their analysis does: the player by `you`, the AI by its model when the game keeps it (D-82), else by `ai`.
  */
-export function StudyDialog({ open, onStudy, onClose, onProfile, you, accounts, ai, text }) {
+export function StudyDialog({ open, onStudy, onClose, onProfile, you, accounts, others, ai, text }) {
     const [loading, setLoading] = useState(false);
     // Each opening starts from the list.
     useEffect(() => {
@@ -17,7 +17,7 @@ export function StudyDialog({ open, onStudy, onClose, onProfile, you, accounts,
             setLoading(false);
         }
     }, [open]);
-    return (_jsx(Dialog, { open: open, title: loading ? text.study.bring : text.study.title, onBack: loading ? () => setLoading(false) : undefined, onClose: onClose, text: text, children: loading ? _jsx(LoadForm, { onStudy: onStudy, onProfile: onProfile, accounts: accounts, text: text }) : _jsx(Analyses, { onStudy: onStudy, onLoad: () => setLoading(true), you: you, accounts: accounts, ai: ai, text: text }) }));
+    return (_jsx(Dialog, { open: open, title: loading ? text.study.bring : text.study.title, onBack: loading ? () => setLoading(false) : undefined, onClose: onClose, text: text, children: loading ? _jsx(LoadForm, { onStudy: onStudy, onProfile: onProfile, accounts: accounts, text: text }) : _jsx(Analyses, { onStudy: onStudy, onLoad: () => setLoading(true), you: you, accounts: accounts, others: others, ai: ai, text: text }) }));
 }
 /** The step that loads a game played elsewhere: one of the latest on the sites, or its PGN pasted, or read from a file. */
 function LoadForm({ onStudy, onProfile, accounts, text }) {

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;
@@ -229,6 +232,11 @@
     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;
@@ -394,6 +402,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 +448,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 +567,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/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**. 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.