chesspal 0.1.0 → 0.2.0

package/dist/page/{app.js → app/app.js}

@@ -1,35 +1,42 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "preact/jsx-runtime";
 import { useEffect, useMemo, useRef, useState } from "preact/hooks";
-import { aiModelIn, annotatorOf, closingOf, Game, gameReviewOf, materialOf, moodAt, movesOnly, openingOf, readPgn, suggestedLevel, timeControlText, writePgn, } from "../core/index.js";
-import { PlayerPicture } from "./avatars.js";
-import { BadgeCounts } from "./badges.js";
-import { Board, piecesOf } from "./board.js";
-import { flipKeys, stepKeys, stepped } from "./browse.js";
-import { howEnded, useDeclined, useJustEnded, useSawEnd } from "./ending.js";
-import { explain } from "./explain.js";
-import { FoldTab } from "./fold-tab.js";
-import { foldKeys, gameUnderBoard, nextFold, oneColumn, rememberFold, startFolds } from "./folds.js";
-import { GameColumn } from "./game-column.js";
-import { Header } from "./header.js";
-import { helpsOf } from "./helps-view.js";
-import { HelpsCard, MapButton } from "./helps.js";
-import { signature } from "./model-name.js";
-import { Steps } from "./move-list.js";
-import { NewGameDialog } from "./new-game-dialog.js";
-import { useOpeningBook } from "./opening-book.js";
-import { ChosenSet } from "./pieces.js";
-import { ClockFace, PlayerCard } from "./player-card.js";
-import { aiSpoke, aiWords, judgmentOf, playerSpent, playerWords, pliesOf, withBook, withoutReviews } from "./plies.js";
-import { NameButton, PictureButton, PictureDialog, ProfilesDialog, Wizard } from "./profile-dialogs.js";
-import { keepSettings } from "./profile.js";
-import { SettingsPanel } from "./settings-panel.js";
-import { languagesOf, saveSettings, settingsFrom, showSettings } from "./settings.js";
-import { endSoundOf, playSound, soundOf, wakeSounds } from "./sounds.js";
-import { studiedSides } from "./studied.js";
-import { StudyDialog } from "./study-dialog.js";
-import { AiNote, AiWords, Compose, PointSquare, TalkFaces } from "./talk.js";
-import { textFor } from "./text.js";
-import { Torretta } from "./torretta.js";
+import { aiModelIn, annotatorOf, closingOf, Game, gameReviewOf, materialOf, moodAt, movesOnly, openingOf, readPgn, suggestedLevel, timeControlText, writePgn, } from "../../core/index.js";
+import { PlayerPicture } from "../avatars/avatars.js";
+import { Thinker, Thought } from "../avatars/thought.js";
+import { Torretta } from "../avatars/torretta.js";
+import { Board } from "../board/board.js";
+import { explain } from "../board/explain.js";
+import { piecesOf } from "../board/squares.js";
+import { NewGameDialog } from "../dialogs/new-game.js";
+import { NameButton, PictureButton, PictureDialog, ProfilesDialog, Wizard } from "../dialogs/profiles.js";
+import { SettingsPanel } from "../dialogs/settings.js";
+import { playerIn, studiedSides } from "../dialogs/studied.js";
+import { StudyDialog } from "../dialogs/study.js";
+import { BadgeCounts } from "../game/badges.js";
+import { stepped } from "../game/browse.js";
+import { GameColumn } from "../game/column.js";
+import { howEnded, useDeclined, useJustEnded, useSawEnd } from "../game/ending.js";
+import { Steps } from "../game/move-list.js";
+import { useOpeningBook } from "../game/opening-book.js";
+import { aiSpoke, aiWords, judgmentsOf, playerSpent, playerWords, pliesOf, withBook, withJudgments, withoutReviews } from "../game/plies.js";
+import { BareButton, HelpsCard, HintLine, MapButton } from "../helps/helps.js";
+import { helpsOf } from "../helps/view.js";
+import { FoldTab } from "../layout/fold-tab.js";
+import { nextFold, rememberFold, startFolds } from "../layout/folds.js";
+import { Header } from "../layout/header.js";
+import { standingsOf } from "../lead/view.js";
+import { ChosenSet } from "../pieces/pieces.js";
+import { ClockFace, PlayerCard } from "../players/card.js";
+import { signature } from "../players/model-name.js";
+import { keepSettings } from "../profile/profile.js";
+import { languagesOf, saveSettings, settingsFrom, showSettings } from "../profile/settings.js";
+import { endSoundOf, playSound, soundOf, wakeSounds } from "../sounds/sounds.js";
+import { AiNote, AiWords, Compose, PointSquare, TalkFaces } from "../talk/talk.js";
+import { textFor } from "../text.js";
+import { anchorName, useAnchor } from "./anchor.js";
+import { useBrowseKeys, useFoldKeys, useMapKey, useWheelSteps } from "./keys.js";
+import { phaseOf, verdictOf } from "./phase.js";
+import { post, sendMessage, sendMove, useServed } from "./served.js";
 /**
  * The page: the board of the game in the player's folder, where the player moves on their turn, the talk with the AI beside it, and the game's column; in the
  * settings the player chose, `start` as this browser remembered them (D-56).
@@ -52,51 +59,16 @@ export function App({ start }) {
             keepSettings(served.profile.id, next);
         }
     };
-    const [served, setServed] = useState(undefined);
-    const [problem, setProblem] = useState(undefined);
-    const [offline, setOffline] = useState(false);
+    const [dialog, setDialog] = useState(undefined);
+    const { data: served, problem, offline, reload } = useServed(() => setDialog("new-game"));
     const [selected, setSelected] = useState(undefined);
     const [refusal, setRefusal] = useState(undefined);
-    // A pawn taken to the last rank waits for the player to choose what it becomes (T-11).
+    // A pawn taken to the last rank waits for the player to choose what it becomes.
     const [promoting, setPromoting] = useState(undefined);
     const [flipped, setFlipped] = useState(false);
     const [folds, setFolds] = useState(startFolds);
     const [draft, setDraft] = useState("");
     const [unsent, setUnsent] = useState(undefined);
-    const [dialog, setDialog] = useState(undefined);
-    // Reads the game again: when the server says it changed, and when a clock runs out on the page (T-37).
-    const reload = useRef(() => { });
-    useEffect(() => {
-        let latest = 0;
-        const load = () => {
-            // Two reads in flight may answer out of order: only the last one asked counts.
-            const asked = ++latest;
-            fetch("/api/game")
-                .then((response) => response.json())
-                .then((body) => {
-                if (asked !== latest) {
-                    return;
-                }
-                setProblem(body.error);
-                if (body.error === undefined) {
-                    setServed(body);
-                }
-            })
-                .catch((error) => setProblem(String(error)));
-        };
-        // The server says when the game changes, whoever changed it: the page reads it again, and as it connects, the first time or to a new chat's server.
-        // The server lives in the chat's MCP server: when the chat ends, after /clear in Claude's app too, the page waits for the next one and says so.
-        reload.current = load;
-        const events = new EventSource("/api/events");
-        events.onopen = () => {
-            setOffline(false);
-            load();
-        };
-        // The chat asks for a new game: the player chooses it in the New game window, which opens here.
-        events.onmessage = (event) => event.data === "new-game" ? setDialog("new-game") : load();
-        events.onerror = () => setOffline(events.readyState !== EventSource.OPEN);
-        return () => events.close();
-    }, []);
     // The profile in use brings its settings, as it comes and each time another comes in its place; one without any takes this browser's.
     const profileId = served?.profile.id;
     useEffect(() => {
@@ -122,44 +94,65 @@ export function App({ start }) {
     // Between games the board shows the table set for the next (D-77): before the first, and on a game over the page did not see end; one it saw end keeps
     // its final position until the next starts. The talk keeps the game's words all the same.
     const over = isOver(resultOf(replayed));
-    const going = studied === undefined && game !== undefined && game !== null && !over;
-    const between = studied === undefined && game !== undefined && !going;
     const sawEnd = useSawEnd(studied !== undefined || game === undefined || game === null ? undefined : over ? "over" : "going");
-    const idle = between && !sawEnd;
+    const phase = phaseOf(studied !== undefined, game, over, sawEnd);
+    const going = phase === "going";
+    const between = phase === "over" || phase === "idle";
+    const idle = phase === "idle";
     const tableSet = useMemo(() => new Game(), []);
     const live = idle ? tableSet : replayed;
     const material = useMemo(() => materialOf(live.position.fen), [live]);
     const pieces = useMemo(() => piecesOf(live.position.fen), [live]);
     // While the game goes on, the book's first moves carry its badge, when the player wants it, as the AI's review gives it after (D-69).
     const inBook = studied === undefined && settings.book ? game?.book ?? 0 : 0;
-    // The AI's judgments of the player's moves, and its drawings, show during a game only with the helps on, always once it is over (D-78).
+    // The judgments of the player's moves, and the AI's drawings, show during a game only with the helps on, always once it is over (D-78); during it the
+    // coach's come from its own file, never in the PGN the opponent may read (D-88).
     const judged = !going || settings.helps;
-    const plies = useMemo(() => withBook(judged ? pliesOf(replayed.record) : withoutReviews(pliesOf(replayed.record)), inBook), [replayed, inBook, judged]);
+    const coached = going ? game?.coach : undefined;
+    const plies = useMemo(() => {
+        const read = pliesOf(replayed.record);
+        return withBook(!judged ? withoutReviews(read) : coached === undefined ? read : withJudgments(read, coached), inBook);
+    }, [replayed, inBook, judged, coached]);
     const book = useOpeningBook(live.record.moves.length > 0);
     const opening = useMemo(() => book === undefined ? undefined : openingOf(live.record, book), [live, book]);
-    // The player's move shows at once, before the server has it: the game it sends next takes its place (T-70).
+    // The player's move shows at once, before the server has it: the game it sends next takes its place.
     const [pending, setPending] = useState(undefined);
-    // The player may look back through the moves played (T-88): `viewing` how many are shown, undefined for the game as it is; a new move brings it back.
+    // The coach's hint for the position on the board, none once the player has moved, folded until they open it; a new hint comes folded (Zoe).
+    const hint = pending === undefined && coached?.hint?.position === replayed.record.moves.length ? coached.hint : undefined;
+    const hintKey = hint === undefined ? undefined : `${hint.position} ${hint.text}`;
+    const [openHint, setOpenHint] = useState(undefined);
+    const hintOpen = hintKey !== undefined && openHint === hintKey;
+    const openTheHint = (open) => setOpenHint(open ? hintKey : undefined);
+    // The player may look back through the moves played: `viewing` how many are shown, undefined for the game as it is; a new move brings it back.
     const [viewing, setViewing] = useState(undefined);
-    // The squares the player points at in the AI's words or the helps' card, lit on the board (T-111); the control map while it is held (D-78).
+    // The squares the player points at in the AI's words or the helps' card, lit on the board; the control map while it is held (D-78).
     const [pointed, setPointed] = useState(noSquares);
     const pointSquare = useMemo(() => (square) => setPointed(square === undefined ? noSquares : [square]), []);
     const [mapping, setMapping] = useState(false);
+    // The board without its drawings while their button is held (Stefano).
+    const [bare, setBare] = useState(false);
     const past = useMemo(() => viewing === undefined ? undefined : new Game({ tags: live.record.tags, moves: live.record.moves.slice(0, viewing) }), [live, viewing]);
     const next = useMemo(() => viewing === undefined ? undefined : new Game({ tags: live.record.tags, moves: live.record.moves.slice(0, viewing + 1) }).lastMove, [live, viewing]);
     const shown = useMemo(() => past ?? (pending === undefined ? live : withMove(live, pending)), [live, pending, past]);
-    // A square lit from the AI's words goes off with the position: a touch keeps it lit until then, a mouse until it leaves the word (T-111).
+    // A square lit from the AI's words goes off with the position: a touch keeps it lit until then, a mouse until it leaves the word.
     useEffect(() => setPointed(noSquares), [shown]);
-    // With the helps on, the player sees all of Chesspal's facts, whatever the AI's level (D-79).
-    const helps = useMemo(() => going && settings.helps ? helpsOf(shown) : undefined, [shown, going, settings.helps]);
+    // With the helps on, the player sees all of Chesspal's facts, whatever the AI's level (D-79), in a game and in the analysis of one (Stefano).
+    const analysing = studied !== undefined;
+    // Seen from the player's side (D-91): theirs in a game, in analysis the side the game names theirs, none when it names neither.
+    const you = analysing ? playerIn(studiedSides(live.record.tags, served?.profile.name ?? "", name, text.sides, served?.profile.accounts)) : game?.ai === undefined ? undefined : game.ai === "white" ? "black" : "white";
+    const helps = useMemo(() => (going || analysing) && settings.helps ? helpsOf(shown, you) : undefined, [shown, going, analysing, settings.helps, you]);
+    // Who the AI saw ahead, the coach's with the helps on in a game and the analyst's in analysis, for the bar and the chart (D-90).
+    const drawnOnBoard = live.outcome.over && live.outcome.result === "1/2-1/2";
+    const standings = useMemo(() => (going && settings.helps) || analysing ? standingsOf(plies, drawnOnBoard) : undefined, [plies, drawnOnBoard, going, analysing, settings.helps]);
     useMapKey(helps !== undefined, setMapping);
-    // A game read again ends what the player was doing on the one before: the move sent, the look back, the choice of a promotion. A review written on the
-    // game in analysis leaves the player where they are in it.
+    // A new move or a new game ends what the player was doing on the one before: the move sent, the look back, the choice of a promotion. The same game
+    // sent again, for the talk, the coach's words or the settings, leaves them where they are (Zoe); so does a review written on the game in analysis.
+    const gameKey = studied !== undefined ? studied.name : game === undefined || game === null ? game : `${game.started} ${game.pgn}`;
     useEffect(() => {
         setPending(undefined);
         setViewing(undefined);
         setPromoting(undefined);
-    }, [studied === undefined ? game : studied.name]);
+    }, [gameKey]);
     const played = studied === undefined ? game : null;
     useGameSounds(played, replayed, sound);
     // Before the first game the AI speaks in the talk alone (D-77).
@@ -171,6 +164,10 @@ export function App({ start }) {
         if (next !== "open" && document.getElementById(column)?.contains(document.activeElement) === true) {
             document.getElementById(`fold-${column}`)?.focus();
         }
+        // The hint folds away with the game's column, so that its drawings never stay on the board without its words (Zoe).
+        if (column === "game" && next !== "open") {
+            setOpenHint(undefined);
+        }
         setFolds({ ...folds, [column]: next });
         rememberFold(column, next);
     };
@@ -191,6 +188,10 @@ export function App({ start }) {
     const step = (to) => goTo(stepped(to, at, total));
     useBrowseKeys(step, () => setFlipped(!flipped));
     const wheel = useWheelSteps(step);
+    // The move shown stays in the page's address, for a reload and a link to it; after the reset on a new game, which would undo the move it goes to. A
+    // game a link opens is there to look at: the analyst starts on the player's yes alone (D-89; Zoe and Federico).
+    const playedName = game === undefined || game === null ? undefined : anchorName(game.name);
+    useAnchor({ ready: served !== undefined, shown: studied !== undefined ? anchorName(studied.name) : idle ? undefined : playedName, played: playedName, going }, viewing, (plies) => goTo(plies ?? total), async (wanted) => await post("/api/study", { game: wanted, look: true }, text, name) === undefined);
     // The header's theme switch picks the other of the two the page shows, leaving the system's.
     const switchTheme = () => change({ ...settings, theme: document.documentElement.dataset.theme === "dark" ? "light" : "dark" });
     // An action of the player's on the game: the game the server sends next shows it; a refusal shows on the board.
@@ -217,21 +218,10 @@ export function App({ start }) {
             }
         },
     };
-    const header = (_jsx(Header, { text: text, kind: studied !== undefined ? "analysis" : idle ? "idle" : ended ? "over" : offer !== undefined || declined ? "offer" : undefined, verdict: studied !== undefined
-            ? text.analysing
-            : idle
-                ? text.noGameNow
-                : ended
-                    ? text.verdict(how, winner)
-                    : offer === "ai"
-                        ? text.offers
-                        : offer === "player"
-                            ? text.drawOffered
-                            : declined
-                                ? text.declines
-                                : undefined, ...(!ended && (offer === "ai" || declined) ? { who: name } : {}), actions: actions, onNewGame: served === undefined ? undefined : () => setDialog("new-game"), 
+    const { kind, verdict } = verdictOf(phase, how, winner, offer, declined, text);
+    const header = (_jsx(Header, { text: text, kind: kind, verdict: verdict, ...(!ended && (offer === "ai" || declined) ? { who: name } : {}), actions: actions, onNewGame: served === undefined ? undefined : () => setDialog("new-game"), 
         // Between games the new one stands out in the player's card (D-77): in the header only when the talk, and the card with it, is folded away.
-        standOut: studied !== undefined || (between && folds.talk !== "open"), onStudy: served === undefined || going ? undefined : () => setDialog("study"), flipped: flipped, onFlip: () => setFlipped(!flipped), sound: sound, onSound: () => change({ ...settings, sound: !sound }), onTheme: switchTheme, onSettings: () => setSetting(true) }));
+        standOut: studied !== undefined || (between && folds.talk !== "open"), onStudy: served === undefined || going ? undefined : () => setDialog("study"), flipped: flipped, onFlip: () => setFlipped(!flipped), sound: sound, onSound: () => change({ ...settings, sound: !sound }), onTheme: switchTheme, onSettings: () => setSetting(true), ...(served === undefined ? {} : { profile: served.profile, onProfile: () => setDialog("profiles") }) }));
     const panel = _jsx(SettingsPanel, { open: setting, settings: settings, onChange: change, onClose: () => setSetting(false), text: text });
     if (problem !== undefined) {
         return _jsx("p", { class: "problem", children: problem });
@@ -241,12 +231,12 @@ export function App({ start }) {
     }
     // At the first start the page asks who plays (D-23), to complete the profile Chesspal made (D-71): the game comes after.
     if (served.profile.new === true) {
-        return _jsx(Wizard, { text: text, hasGame: served.game !== null, account: served.profile.name, dataFolder: served.dataFolder, onMade: () => reload.current() });
+        return _jsx(Wizard, { text: text, hasGame: served.game !== null, account: served.profile.name, dataFolder: served.dataFolder, onMade: reload });
     }
     const profile = served.profile;
     const picture = _jsx(PlayerPicture, { profile: profile });
     // In analysis the cards name the players of the game, the player's side at the bottom when they played it (D-69).
-    const sides = studied === undefined ? undefined : studiedSides(live.record.tags, profile.name, name, text.sides);
+    const sides = studied === undefined ? undefined : studiedSides(live.record.tags, profile.name, name, text.sides, profile.accounts);
     const player = sides?.bottom ?? (game === null || game.ai === "black" ? "white" : "black");
     const ai = player === "white" ? "black" : "white";
     // The Torretta's face on the move shown: the mood the AI gave, while it lasts (D-70); in analysis, of the side the AI played.
@@ -254,9 +244,11 @@ export function App({ start }) {
     const playerToMove = going && live.position.turn === player;
     const ahead = (side) => side === "white" ? material.balance : -material.balance;
     const reviewed = judged || at <= inBook ? plies[at - 1] : undefined;
-    // With the helps on, the AI's judgment of the player's last move, once it has answered it (D-78).
-    const judgment = going && settings.helps ? judgmentOf(plies, player) : undefined;
+    // With the helps on, the coach's judgments of the player's last move, once the AI has answered it, and of one a held note let go only now (D-78, D-88).
+    const judgments = going && settings.helps ? judgmentsOf(plies, player, coached ?? noCoach) : [];
     const review = reviewed?.review;
+    // An open hint draws on the board as it is, in place of the last move's drawings.
+    const drawn = hintOpen && hint !== undefined && viewing === undefined && (hint.arrows !== undefined || hint.squares !== undefined) ? hint : review;
     const summary = studied === undefined ? undefined : gameReviewOf(live.record);
     const closing = studied === undefined ? undefined : closingOf(live.record);
     const annotator = studied === undefined ? undefined : annotatorOf(live.record);
@@ -268,9 +260,12 @@ export function App({ start }) {
     const clock = going ? game?.clock : undefined;
     // No chat hears the player: the page says where to wake it, and the AI's clock waits, as the server holds it.
     const asleep = served.listening === false && !offline;
+    // What the AI thinks on, a cloud at the Torretta's corner (Zoe): only in a game going on, and never while no chat hears the player, which the note says.
+    const thinking = going && !asleep && !offline && studied === undefined ? served.thinking : undefined;
+    const thinker = (size) => (_jsx(Thinker, { thinking: thinking, words: text.thinking, children: _jsx(Torretta, { size: size, mood: mood }) }));
     // The clocks wait for the player from the game's start: when the AI moves first, a button gives it the start; else the player's first move does (Stefano).
     const clockWaits = clock?.waiting === true && !ended && studied === undefined && viewing === undefined && live.position.turn === ai;
-    const clockOf = (side) => clock === undefined ? undefined : (_jsx(ClockFace, { clock: clock, side: side, toMove: !ended && live.position.turn === side, held: pending !== undefined || (asleep && side === ai), onFlag: () => reload.current(), text: text }));
+    const clockOf = (side) => clock === undefined ? undefined : (_jsx(ClockFace, { clock: clock, side: side, toMove: !ended && live.position.turn === side, held: pending !== undefined || (asleep && side === ai), onFlag: reload, text: text }));
     // Where to wake the chat, under the AI's card (over the board when the talk is folded); the button that starts the clocks, under the player's (Zoe).
     const asleepNote = asleep ? _jsx("p", { class: "asleep", role: "status", children: text.asleep(name) }) : null;
     const startClocks = clockWaits
@@ -337,7 +332,7 @@ export function App({ start }) {
             clearSent(refused?.text, words);
         });
     };
-    // The new game starts from the choices of the game before; the first, from the level that suits the player (T-58).
+    // The new game starts from the choices of the game before; the first, from the level that suits the player.
     const level = suggestedLevel(played === null ? undefined : replayed.record, profile.level);
     const lastControl = game?.clock?.control;
     const lastClock = lastControl === undefined ? undefined : timeControlText(lastControl);
@@ -349,8 +344,10 @@ export function App({ start }) {
     // In analysis the AI's note stays under the card on top and its word on the game over the one below, however the board is turned (D-69).
     const top = flipped ? player : ai;
     const bottom = flipped ? ai : player;
-    const studiedCard = (side, place) => sides === undefined ? null : (_jsx(PlayerCard, { place: place, picture: pictureOf(sides[side], profile, 48, mood), name: sides[side].name, signed: sides[side].who === "ai" && playedBy !== undefined ? signature(playedBy.model, playedBy.effort) : undefined, side: side, taken: material.taken[side], ahead: ahead(side), badges: _jsx(BadgeCounts, { plies: plies, side: side, names: text.badges }), text: text }));
-    // A game brought to analyse (T-92): the page shows it once the server has it in analysis; a refusal stays in the dialog.
+    const studiedCard = (side, place) => sides === undefined ? null : (_jsx(PlayerCard, { place: place, 
+        // The player changes their picture in analysis too, from their own side's card.
+        picture: sides[side].who === "player" ? _jsx(PictureButton, { profile: profile, onOpen: () => setDialog("picture"), text: text }) : pictureOf(sides[side], profile, 48, mood), name: sides[side].name, signed: sides[side].who === "ai" && playedBy !== undefined ? signature(playedBy.model, playedBy.effort) : undefined, side: side, taken: material.taken[side], ahead: ahead(side), badges: _jsx(BadgeCounts, { plies: plies, side: side, names: text.badges }), text: text }));
+    // A game brought to analyse: the page shows it once the server has it in analysis; a refusal stays in the dialog.
     const studyGame = async (studied) => {
         const refused = await post("/api/study", studied, text, name);
         if (refused === undefined) {
@@ -358,11 +355,11 @@ export function App({ start }) {
         }
         return refused?.text;
     };
-    return (_jsx(ChosenSet.Provider, { value: settings.set, children: _jsxs(PointSquare.Provider, { value: pointSquare, children: [panel, _jsx(PictureDialog, { open: dialog === "picture", profile: profile, onClose: () => setDialog(undefined), text: text }), _jsx(ProfilesDialog, { open: dialog === "profiles", profiles: served.profiles, active: profile, playing: going, dataFolder: served.dataFolder, onClose: () => setDialog(undefined), text: text }), _jsx(NewGameDialog, { open: dialog === "new-game", choice: choice, going: going, onStart: startNewGame, onClose: () => setDialog(undefined), text: text }), _jsx(StudyDialog, { open: dialog === "study", onStudy: studyGame, onClose: () => setDialog(undefined), you: profile.name, ai: name, text: text }), offline ? _jsx("p", { class: "offline", role: "alert", children: text.offline(name) }) : null, _jsxs("main", { class: `app${flipped ? " flipped" : ""}${folds.talk === "open" ? "" : ` talk-${folds.talk}`}${folds.game === "folded" ? " folded" : ""}`, inert: offline, children: [header, sides === undefined
-                            ? (_jsx(TalkFaces, { name: name, aiPicture: _jsx(Torretta, { size: 40, mood: mood }), you: profile.name, picture: picture, ...(idle ? {} : { ai, player }), aiMoves: going && !playerToMove, playerMoves: playerToMove, unread: unread || asleep, text: text }))
-                            : (_jsx(TalkFaces, { name: sides[ai].name, aiPicture: pictureOf(sides[ai], profile, 40, mood), you: sides[player].name, picture: pictureOf(sides[player], profile, 40, mood), ai: ai, player: player, aiMoves: false, playerMoves: false, unread: asleep, text: text })), _jsx(FoldTab, { column: "talk", folded: folds.talk === "folded", label: text.talk, unread: (unread || asleep) && folds.talk === "folded", onFold: fold }), _jsx(FoldTab, { column: "game", folded: folds.game === "folded", label: text.game, onFold: fold }), _jsx("span", { class: "visually-hidden", "aria-live": "polite", children: unread ? text.wrote(name) : "" }), _jsx("div", { class: sides === undefined ? "talk" : "talk studied", id: "talk", children: sides !== undefined
-                                ? (_jsxs(_Fragment, { children: [_jsxs("section", { class: "ai-block", "aria-label": sides[top].name, children: [studiedCard(top, "ai"), asleepNote, _jsx(AiNote, { ...(reviewed === undefined ? {} : { ply: reviewed }), ...(shownOpening === undefined ? {} : { opening: shownOpening }), ...(at === total && closing !== undefined ? { closing } : {}), ...(at === 0 && summary !== undefined ? { summary } : {}), name: name, by: annotator, mood: mood, ...(settings.voice ? { voice: text.language } : {}), text: text })] }), _jsx("section", { class: "you-block", "aria-label": sides[bottom].name, children: studiedCard(bottom, "you") })] }))
-                                : (_jsxs(_Fragment, { children: [_jsxs("section", { class: "ai-block", "aria-label": name, children: [_jsx(PlayerCard, { place: "ai", picture: _jsx(Torretta, { size: 48, mood: mood }), name: name, signed: signed, side: idle ? undefined : ai, ...(idle ? {} : { level: text.start.levels[level] }), taken: material.taken[ai], ahead: ahead(ai), clock: clockOf(ai), text: text }), asleepNote, _jsx(AiWords, { words: aiWords(plies, ai, talk), newestFirst: !flipped, ...(settings.voice ? { voice: text.language } : {}), ...(judgment === undefined ? {} : { judged: judgment }), text: text })] }), _jsxs("section", { class: "you-block", "aria-label": profile.name, children: [_jsx(Compose, { lines: said, newestFirst: flipped, 
+    return (_jsx(ChosenSet.Provider, { value: settings.set, children: _jsxs(PointSquare.Provider, { value: pointSquare, children: [panel, _jsx(PictureDialog, { open: dialog === "picture", profile: profile, onClose: () => setDialog(undefined), text: text }), _jsx(ProfilesDialog, { open: dialog === "profiles", profiles: served.profiles, active: profile, locked: going ? text.profile.whilePlaying : undefined, dataFolder: served.dataFolder, onClose: () => setDialog(undefined), text: text }), _jsx(NewGameDialog, { open: dialog === "new-game", choice: choice, going: going, onStart: startNewGame, onClose: () => setDialog(undefined), text: text }), _jsx(StudyDialog, { open: dialog === "study", onStudy: studyGame, onClose: () => setDialog(undefined), you: profile.name, accounts: profile.accounts, ai: name, text: text }), offline ? _jsx("p", { class: "offline", role: "alert", children: text.offline(name) }) : null, served.outdated === true ? _jsx("p", { class: "outdated", role: "status", children: text.outdated(name) }) : null, _jsxs("main", { class: `app${flipped ? " flipped" : ""}${folds.talk === "open" ? "" : ` talk-${folds.talk}`}${folds.game === "folded" ? " folded" : ""}`, inert: offline, children: [header, sides === undefined
+                            ? (_jsx(TalkFaces, { name: name, aiPicture: thinker(40), you: profile.name, picture: picture, ...(idle ? {} : { ai, player }), aiMoves: going && !playerToMove, playerMoves: playerToMove, unread: unread || asleep, text: text }))
+                            : (_jsx(TalkFaces, { name: sides[ai].name, aiPicture: pictureOf(sides[ai], profile, 40, mood), you: sides[player].name, picture: pictureOf(sides[player], profile, 40, mood), ai: ai, player: player, aiMoves: false, playerMoves: false, unread: asleep, text: text })), _jsx(FoldTab, { column: "talk", folded: folds.talk === "folded", label: thinking === undefined || folds.talk !== "folded" ? text.talk : `${text.talk}: ${text.thinking[thinking]}`, unread: (unread || asleep) && folds.talk === "folded", ...(thinking === undefined || folds.talk !== "folded" ? {} : { mark: _jsx(Thought, { thinking: thinking, words: text.thinking }) }), onFold: fold }), _jsx(FoldTab, { column: "game", folded: folds.game === "folded", label: text.game, onFold: fold }), _jsx("span", { class: "visually-hidden", "aria-live": "polite", children: unread ? text.wrote(name) : "" }), _jsx("div", { class: sides === undefined ? "talk" : "talk studied", id: "talk", children: sides !== undefined
+                                ? (_jsxs(_Fragment, { children: [_jsxs("section", { class: "ai-block", "aria-label": sides[top].name, children: [studiedCard(top, "ai"), asleepNote, _jsx(AiNote, { ...(reviewed === undefined ? {} : { ply: reviewed }), ...(shownOpening === undefined ? {} : { opening: shownOpening }), ...(at === total && closing !== undefined ? { closing } : {}), ...(at === 0 && summary !== undefined ? { summary } : {}), ...(summary === undefined ? { reviewing: true } : {}), name: name, by: annotator, mood: mood, ...(settings.voice ? { voice: text.language } : {}), text: text })] }), _jsx("section", { class: "you-block", "aria-label": sides[bottom].name, children: studiedCard(bottom, "you") })] }))
+                                : (_jsxs(_Fragment, { children: [_jsxs("section", { class: "ai-block", "aria-label": name, children: [_jsx(PlayerCard, { place: "ai", picture: thinker(48), name: name, signed: signed, side: idle ? undefined : ai, ...(idle ? {} : { level: text.start.levels[level] }), taken: material.taken[ai], ahead: ahead(ai), clock: clockOf(ai), text: text }), asleepNote, _jsx(AiWords, { words: aiWords(plies, ai, talk), newestFirst: !flipped, ...(settings.voice ? { voice: text.language } : {}) })] }), _jsxs("section", { class: "you-block", "aria-label": profile.name, children: [_jsx(Compose, { lines: said, newestFirst: flipped, 
                                                     // Between games, and before the first, the player writes freely, a line at a time, as the AI does (D-74, D-77).
                                                     spent: going ? playerSpent(plies, ai, talk) : 0, draft: draft, onDraft: (words) => {
                                                         setDraft(words);
@@ -371,9 +368,9 @@ export function App({ start }) {
                             // Between games the board goes off (D-77): a game the page saw end once its effects are over, its final position less off than the table set.
                             class: between && !justEnded ? "board-wrap off" : "board-wrap", onWheel: wheel, 
                             // A press on the board while the player looks back brings the game as it is: the next one plays.
-                            onPointerDownCapture: viewing === undefined || studied !== undefined ? undefined : (event) => event.button === 0 && goTo(total), children: [_jsx(Board, { fen: shown.position.fen, bottom: flipped ? ai : player, lastMove: shown.lastMove, pointed: pointed, ...(helps === undefined ? {} : { helps }), ...(mapping && helps !== undefined ? { control: helps.strategy.control } : {}), ...(review?.badge === undefined ? {} : { badge: { badge: review.badge, name: text.badges[review.badge] } }), ...(review === undefined ? {} : { drawn: review }), nextMove: next, jumped: jumped, check: shown.position.check, end: ended && viewing === undefined && pending === undefined ? { how, winner, player, fresh: justEnded } : undefined, player: playerToMove && pending === undefined && viewing === undefined ? player : undefined, selected: selected, targets: selected === undefined || viewing !== undefined ? [] : live.legalMoves(selected), dots: settings.dots, notice: viewing === undefined ? refusal : undefined, promotion: promoting === undefined || viewing !== undefined || !playerToMove ? undefined : { ...promoting, side: player }, onPromote: (piece) => piece === undefined ? setPromoting(undefined) : play(promoting.from, promoting.to, piece), onSelect: select, onMove: play, onRefuse: refuse, text: text }), folds.talk !== "open" && (asleep || clockWaits)
+                            onPointerDownCapture: viewing === undefined || studied !== undefined ? undefined : (event) => event.button === 0 && goTo(total), children: [_jsx(Board, { fen: shown.position.fen, bottom: flipped ? ai : player, lastMove: shown.lastMove, pointed: pointed, ...(helps === undefined ? {} : { helps }), ...(mapping && helps !== undefined ? { control: helps.strategy.control } : {}), bare: bare && helps !== undefined, ...(review?.badge === undefined ? {} : { badge: { badge: review.badge, name: text.badges[review.badge] } }), ...(drawn === undefined ? {} : { drawn }), nextMove: next, jumped: jumped, check: shown.position.check, end: ended && viewing === undefined && pending === undefined ? { how, winner, player, fresh: justEnded } : undefined, player: playerToMove && pending === undefined && viewing === undefined ? player : undefined, selected: selected, targets: selected === undefined || viewing !== undefined ? [] : live.legalMoves(selected), dots: settings.dots, names: settings.squareNames, notice: viewing === undefined ? refusal : undefined, promotion: promoting === undefined || viewing !== undefined || !playerToMove ? undefined : { ...promoting, side: player }, onPromote: (piece) => piece === undefined ? setPromoting(undefined) : play(promoting.from, promoting.to, piece), onSelect: select, onMove: play, onRefuse: refuse, text: text }), folds.talk !== "open" && (asleep || clockWaits)
                                     ? (_jsxs("div", { class: "over-board", children: [asleep ? _jsx("p", { class: "asleep", role: "status", children: text.asleep(name) }) : null, startClocks] }))
-                                    : null] }), studied === undefined ? null : (_jsx("div", { class: "board-steps", children: _jsx(Steps, { shown: at, total: total, onStep: step, text: text }) })), helps === undefined ? null : (_jsx("div", { class: "board-map", children: _jsx(MapButton, { mapping: mapping, onMap: setMapping, held: false, text: text }) })), _jsx(GameColumn, { plies: idle ? [] : plies, result: ended ? result : undefined, how: how, lit: justEnded, started: idle ? undefined : played?.started, move: live.position.moveNumber, toMove: live.position.turn, opening: opening, helps: helps === undefined ? undefined : (_jsx(HelpsCard, { helps: helps, onPoint: setPointed, onMap: setMapping, mapping: mapping, text: text })), ...(studied === undefined ? {} : { analysis: summary === undefined ? { by: name } : { by: name, summary } }), shownPlies: at, onShow: goTo, onStep: step, ...(studied === undefined ? {} : { onDownload: () => download(studied.pgn, pgnName(live.record.tags, "analysis")) }), ...(total === 0 ? {} : { onSaveMoves: () => download(writePgn(movesOnly(live.record)), pgnName(live.record.tags)) }), ...(between && game !== null ? { onAnalyse: () => void studyGame({ last: true }) } : {}), text: text })] })] }) }));
+                                    : null] }), studied === undefined ? null : (_jsx("div", { class: "board-steps", children: _jsx(Steps, { shown: at, total: total, onStep: step, text: text }) })), helps === undefined ? null : (_jsxs("div", { class: "board-map", children: [_jsx(BareButton, { bare: bare, onBare: setBare, text: text }), _jsx(MapButton, { mapping: mapping, onMap: setMapping, text: text }), hint === undefined || viewing !== undefined ? null : _jsx(HintLine, { hint: hint, open: hintOpen, onOpen: openTheHint, text: text })] })), _jsx(GameColumn, { plies: idle ? [] : plies, result: ended ? result : undefined, how: how, lit: justEnded, started: idle ? undefined : played?.started, move: live.position.moveNumber, toMove: live.position.turn, opening: opening, helps: helps === undefined ? undefined : (_jsx(HelpsCard, { helps: helps, judged: judgments, hint: viewing === undefined ? hint : undefined, hintOpen: hintOpen, onHint: openTheHint, onPoint: setPointed, onMap: setMapping, mapping: mapping, onBare: setBare, bare: bare, text: text })), ...(standings === undefined ? {} : { standings }), ...(studied === undefined ? {} : { analysis: summary === undefined ? { by: name } : { by: name, summary } }), shownPlies: at, onShow: goTo, onStep: step, ...(studied === undefined ? {} : { onDownload: () => download(studied.pgn, pgnName(live.record.tags, "analysis")) }), ...(total === 0 ? {} : { onSaveMoves: () => download(writePgn(movesOnly(live.record)), pgnName(live.record.tags)) }), ...(between && game !== null ? { onAnalyse: () => void studyGame({ last: true }) } : {}), text: text })] })] }) }));
 }
 /** The picture of a player of the game in analysis: the player's own, the AI's Torretta with its mood, or the plain face of someone else. */
 function pictureOf({ who }, profile, size, mood) {
@@ -381,7 +378,7 @@ function pictureOf({ who }, profile, size, mood) {
 }
 /**
  * Plays the sound of each move the game gains while the page watches it, the AI's and the player's, of its end without a move and of a draw offered:
- * none for a game loaded or begun again (T-71, T-100).
+ * none for a game loaded or begun again.
  */
 function useGameSounds(game, live, on) {
     const seen = useRef(undefined);
@@ -431,128 +428,13 @@ function useUnread(spoke, folded) {
     }, [spoke, folded]);
     return unread;
 }
-/**
- * `[` and `]` fold the talk and the game, as in editors with two side bars; never while the player types or drags a piece, nor in one column, nor the game
- * under the board.
- */
-function useFoldKeys(fold) {
-    useEffect(() => {
-        const press = (event) => {
-            if (!forThePage(event) || oneColumn()) {
-                return;
-            }
-            const column = Object.keys(foldKeys).find((key) => foldKeys[key] === event.key);
-            if (column !== undefined && !(column === "game" && gameUnderBoard())) {
-                event.preventDefault();
-                fold(column);
-            }
-        };
-        window.addEventListener("keydown", press);
-        return () => window.removeEventListener("keydown", press);
-    });
-}
-/** M held shows the control map while the helps are on (D-78); it goes off when M is let go or the page loses the focus. */
-function useMapKey(helping, map) {
-    useEffect(() => {
-        if (!helping) {
-            map(false);
-            return;
-        }
-        const down = (event) => {
-            if (forThePage(event) && event.key.toLowerCase() === "m") {
-                event.preventDefault();
-                map(true);
-            }
-        };
-        const up = (event) => {
-            if (event.key.toLowerCase() === "m") {
-                map(false);
-            }
-        };
-        const away = () => map(false);
-        window.addEventListener("keydown", down);
-        window.addEventListener("keyup", up);
-        window.addEventListener("blur", away);
-        return () => {
-            window.removeEventListener("keydown", down);
-            window.removeEventListener("keyup", up);
-            window.removeEventListener("blur", away);
-        };
-    }, [helping]);
-}
-/** The keys of Lichess and chess.com: the arrows, Home and End step through the moves (T-88), f and x turn the board round. */
-function useBrowseKeys(step, flip) {
-    useEffect(() => {
-        const press = (event) => {
-            const to = stepKeys[event.key];
-            const flips = flipKeys.includes(event.key.toLowerCase());
-            if (!forThePage(event) || (to === undefined && !flips)) {
-                return;
-            }
-            event.preventDefault();
-            if (to === undefined) {
-                flip();
-            }
-            else {
-                step(to);
-            }
-        };
-        window.addEventListener("keydown", press);
-        return () => window.removeEventListener("keydown", press);
-    });
-}
-/** The mouse wheel over the board steps through the moves, as on Lichess: down forward, a step a notch, however finely a touchpad turns it. */
-function useWheelSteps(step) {
-    const turned = useRef(0);
-    return (event) => {
-        event.preventDefault();
-        turned.current += event.deltaMode === WheelEvent.DOM_DELTA_PIXEL ? event.deltaY : event.deltaY * notch;
-        while (Math.abs(turned.current) >= notch) {
-            step(turned.current > 0 ? "forward" : "back");
-            turned.current -= Math.sign(turned.current) * notch;
-        }
-    };
-}
-// How far a wheel turns in one notch, in pixels.
-const notch = 100;
 const noSquares = [];
-/** Whether a key is the page's: not one the player types into a box or the settings, nor with a modifier, nor while a piece is in the air. */
-function forThePage(event) {
-    const typing = event.target.closest("input, textarea, select, [contenteditable], dialog") !== null;
-    return !(event.defaultPrevented || event.ctrlKey || event.altKey || event.metaKey || typing || document.documentElement.classList.contains("dragging"));
-}
-/** Sends the player's move to the server, which plays it as the chat would, with the words written for the AI: the reason it was refused, or undefined. */
-function sendMove(move, words, text, name) {
-    const message = words.trim();
-    return post("/api/move", message === "" ? { move } : { move, message }, text, name);
-}
-/** Sends the player's words alone: the reason they were refused, or undefined. */
-function sendMessage(words, text, name) {
-    return post("/api/message", { text: words.trim() }, text, name);
-}
+const noCoach = { judgments: [] };
 /** Whether the words are a command for Claude's app, such as /clear, rather than words for the AI. */
 function isCommand(words) {
     return /^\s*\/[a-z]/i.test(words);
 }
-/**
- * Sends a request to the server: the reason it was refused, in the player's language when the page knows the refusal (T-11, D-57), with the host's name where
- * it sends the player, or undefined.
- */
-async function post(path, body, text, name) {
-    try {
-        const response = await fetch(path, { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify(body) });
-        if (response.ok) {
-            return undefined;
-        }
-        const refused = (await response.json());
-        const known = refused.refusal === undefined ? undefined : text.refused[refused.refusal];
-        return { text: known?.(refused.most ?? 0, name) ?? refused.error ?? response.statusText, words: refused.refusal?.startsWith("words-") === true };
-    }
-    catch (error) {
-        return { text: String(error), words: false };
-    }
-}
-/** Saves a PGN file in the player's downloads: a game in analysis with its review, which the board page loads back ready (T-106), or the moves alone (T-59). */
+/** Saves a PGN file in the player's downloads: a game in analysis with its review, which the board page loads back ready, or the moves alone. */
 function download(pgn, name) {
     const link = document.createElement("a");
     link.href = URL.createObjectURL(new Blob([pgn], { type: "application/x-chess-pgn" }));
@@ -570,7 +452,7 @@ function withMove(game, move) {
     const copy = new Game(game.record);
     return copy.play(move).played ? copy : game;
 }
-/** Whether a pawn's move takes it to the last rank, where the player chooses what it becomes (T-11). */
+/** Whether a pawn's move takes it to the last rank, where the player chooses what it becomes. */
 function promotes(piece, to) {
     return (piece === "P" && to.endsWith("8")) || (piece === "p" && to.endsWith("1"));
 }

package/dist/page/app/keys.js

@@ -0,0 +1,94 @@
+// The page's keys and wheel: [ and ] fold the side columns, M holds the helps' map (D-78), the arrows, Home and End step through the moves and f
+// and x turn the board, and the wheel over the board steps too.
+import { useEffect, useRef } from "preact/hooks";
+import { flipKeys, stepKeys } from "../game/browse.js";
+import { foldKeys, gameUnderBoard, oneColumn } from "../layout/folds.js";
+/**
+ * `[` and `]` fold the talk and the game, as in editors with two side bars; never while the player types or drags a piece, nor in one column, nor the game
+ * under the board.
+ */
+export function useFoldKeys(fold) {
+    useEffect(() => {
+        const press = (event) => {
+            if (!forThePage(event) || oneColumn()) {
+                return;
+            }
+            const column = Object.keys(foldKeys).find((key) => foldKeys[key] === event.key);
+            if (column !== undefined && !(column === "game" && gameUnderBoard())) {
+                event.preventDefault();
+                fold(column);
+            }
+        };
+        window.addEventListener("keydown", press);
+        return () => window.removeEventListener("keydown", press);
+    });
+}
+/** M held shows the control map while the helps are on (D-78); it goes off when M is let go or the page loses the focus. */
+export function useMapKey(helping, map) {
+    useEffect(() => {
+        if (!helping) {
+            map(false);
+            return;
+        }
+        const down = (event) => {
+            if (forThePage(event) && event.key.toLowerCase() === "m") {
+                event.preventDefault();
+                map(true);
+            }
+        };
+        const up = (event) => {
+            if (event.key.toLowerCase() === "m") {
+                map(false);
+            }
+        };
+        const away = () => map(false);
+        window.addEventListener("keydown", down);
+        window.addEventListener("keyup", up);
+        window.addEventListener("blur", away);
+        return () => {
+            window.removeEventListener("keydown", down);
+            window.removeEventListener("keyup", up);
+            window.removeEventListener("blur", away);
+        };
+    }, [helping]);
+}
+/** The keys of Lichess and chess.com: the arrows, Home and End step through the moves, f and x turn the board round. */
+export function useBrowseKeys(step, flip) {
+    useEffect(() => {
+        const press = (event) => {
+            const to = stepKeys[event.key];
+            const flips = flipKeys.includes(event.key.toLowerCase());
+            if (!forThePage(event) || (to === undefined && !flips)) {
+                return;
+            }
+            event.preventDefault();
+            if (to === undefined) {
+                flip();
+            }
+            else {
+                step(to);
+            }
+        };
+        window.addEventListener("keydown", press);
+        return () => window.removeEventListener("keydown", press);
+    });
+}
+/** The mouse wheel over the board steps through the moves, as on Lichess: down forward, a step a notch, however finely a touchpad turns it. */
+export function useWheelSteps(step) {
+    const turned = useRef(0);
+    return (event) => {
+        event.preventDefault();
+        turned.current += event.deltaMode === WheelEvent.DOM_DELTA_PIXEL ? event.deltaY : event.deltaY * notch;
+        while (Math.abs(turned.current) >= notch) {
+            step(turned.current > 0 ? "forward" : "back");
+            turned.current -= Math.sign(turned.current) * notch;
+        }
+    };
+}
+// How far a wheel turns in one notch, in pixels.
+const notch = 100;
+/** Whether a key is the page's: not one the player types into a box or the settings, nor with a modifier, nor while a piece is in the air. */
+function forThePage(event) {
+    const typing = event.target.closest("input, textarea, select, [contenteditable], dialog") !== null;
+    return !(event.defaultPrevented || event.ctrlKey || event.altKey || event.metaKey || typing || document.documentElement.classList.contains("dragging"));
+}