chesspal 0.5.0 → 0.6.0

package/dist/page/app/app.js

@@ -17,9 +17,10 @@ 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 { Steps, stepsLine } from "../game/move-list.js";
 import { useOpeningBook } from "../game/opening-book.js";
 import { aiSpoke, aiWords, analysisTalk, judgmentsOf, playerSpent, playerWords, pliesOf, reviewCount, withBook, withJudgments, withoutReviews } from "../game/plies.js";
+import { afterMove, isJump, leaveLine, linePlies, lineRecord, onLine, stepLine } from "../game/variation.js";
 import { GuideDialog } from "../guide/guide.js";
 import { BareButton, HelpsCard, HintLine, MapButton } from "../helps/helps.js";
 import { helpsOf } from "../helps/view.js";
@@ -42,7 +43,7 @@ import { AiNameButton, ChatDialog, tableNote } from "../table/window.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, useLegendKey, useMapKey, useWheelSteps } from "./keys.js";
+import { useBrowseKeys, useEscapeKey, useFoldKeys, useLegendKey, useMapKey, useWheelSteps } from "./keys.js";
 import { helpsShown, phaseOf, verdictOf } from "./phase.js";
 import { ask, post, refusedText, sendMessage, sendMove, useServed } from "./served.js";
 import { tabTitle, useTabTitle } from "./title.js";
@@ -169,7 +170,7 @@ export function App({ start }) {
     const playedAs = studied === undefined ? name : aiNameOf(aiHostIn(live.record), aiModelIn(live.record)?.model) ?? text.ai;
     const analyst = annotator === undefined ? name : aiNameOf(annotator.annotator, annotator.annotator) ?? text.ai;
     const material = useMemo(() => materialOf(live.position.fen), [live]);
-    const pieces = useMemo(() => piecesOf(live.position.fen), [live]);
+    const piecesOnBoard = useMemo(() => piecesOf(live.position.fen), [live]);
     // How many of the game's first plies a line of the book reaches, as the server counts them (D-68).
     const bookPlies = studied !== undefined ? studied.book : game?.book ?? 0;
     // 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).
@@ -203,13 +204,27 @@ export function App({ start }) {
     // The legend of the marks on the board, open until the player closes it (D-99).
     const [legendOpen, setLegendOpen] = useState(false);
     useLegendKey(() => setLegendOpen((open) => !open));
+    // In analysis the player plays a variation from the move shown, White's moves and Black's (D-116): one line, kept by the page alone, faded once the board
+    // is back on the game.
+    const [line, setLine] = useState(undefined);
+    const analysing = studied !== undefined;
+    const onTheLine = analysing && onLine(line);
     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.
-    useEffect(() => setPointed(noSquares), [shown]);
+    const lineGame = useMemo(() => onTheLine ? new Game(lineRecord(live.record, line)) : undefined, [live, onTheLine ? line : undefined]);
+    const shown = useMemo(() => lineGame ?? past ?? (pending === undefined ? live : withMove(live, pending)), [live, pending, past, lineGame]);
+    // The move after the position shown, which a step back slides home: the line's own on the line.
+    const next = useMemo(() => onTheLine ? shown.legalMoves().find((move) => move.san === line.moves[line.cursor]) : viewing === undefined ? undefined : new Game({ tags: live.record.tags, moves: live.record.moves.slice(0, viewing + 1) }).lastMove, [live, viewing, shown]);
+    // Where the line starts its numbers when it leaves from the game's first position.
+    const firstPosition = useMemo(() => new Game({ tags: live.record.tags, moves: [] }).position, [live]);
+    // 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; in analysis a refusal
+    // goes off with it too.
+    useEffect(() => {
+        setPointed(noSquares);
+        if (analysing) {
+            setRefusal(undefined);
+        }
+    }, [shown]);
     // The player sees all of Chesspal's facts, whatever the AI's level (D-79): in a game with the helps on, always in analysis (D-114).
-    const analysing = studied !== undefined;
     const helped = helpsShown(phase, settings.helps);
     // 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 ?? "", playedAs, text.sides, served?.profile.accounts)) : game?.ai === undefined ? undefined : game.ai === "white" ? "black" : "white";
@@ -225,6 +240,7 @@ export function App({ start }) {
         setPending(undefined);
         setViewing(undefined);
         setPromoting(undefined);
+        setLine(undefined);
     }, [gameKey]);
     const played = studied === undefined ? game : null;
     useGameSounds(played, replayed, sound);
@@ -252,16 +268,43 @@ export function App({ start }) {
     const shownOpening = useMemo(() => bookAt === undefined || book === undefined ? undefined : openingOf(bookAt, book), [live, book, bookAt === undefined ? 0 : at]);
     // Whether the move shown is still the book's, whatever the badges show: the card says the move the game left it at, once it is past it.
     const leftBook = outOfBookMove(at, bookPlies);
-    // A jump of more than one move shows the position at once: only a step slides its pieces.
-    const shownBefore = useRef(at);
-    const jumped = Math.abs(shownBefore.current - at) > 1;
-    shownBefore.current = at;
+    // A jump of more than one move shows the position at once: only a step slides its pieces, on the game or on a variation.
+    const place = { at, cursor: onTheLine ? line.cursor : 0 };
+    const shownBefore = useRef(place);
+    const jumped = isJump(shownBefore.current, place);
+    shownBefore.current = place;
+    // A move of the game shown takes the board off a variation, which stays faded.
     const goTo = (count) => {
         setSelected(undefined);
+        setLine(leaveLine);
         setViewing(count >= total ? undefined : Math.max(0, count));
     };
-    const step = (to) => goTo(stepped(to, at, total));
+    // On a variation the arrows back and forward step through it; to either end of the game they leave it.
+    const step = (to) => {
+        if (onTheLine && (to === "back" || to === "forward")) {
+            setSelected(undefined);
+            setLine(stepLine(line, to));
+        }
+        else {
+            goTo(stepped(to, at, total));
+        }
+    };
     useBrowseKeys(step, () => setFlipped(!flipped));
+    // A move of the variation shown: the board goes back on it, at the game's move it leaves from.
+    const showLine = (cursor) => {
+        if (line !== undefined) {
+            setSelected(undefined);
+            setLine({ ...line, cursor });
+            setViewing(line.at >= total ? undefined : line.at);
+        }
+    };
+    // The cross and Esc close the variation: the board shows the game where it left it.
+    const closeLine = () => {
+        setSelected(undefined);
+        setLine(undefined);
+    };
+    // Esc first lets go of a piece picked, and leaves the legend, a promotion's choice, the settings and the dialogs to close themselves.
+    useEscapeKey(line === undefined || legendOpen || promoting !== undefined || setting || dialog !== undefined ? undefined : () => selected === undefined ? closeLine() : setSelected(undefined));
     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).
@@ -269,7 +312,8 @@ export function App({ start }) {
     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, setLinkIgnored);
     // The tab names the game and the move shown, as the cards name its players; between games, Chesspal alone.
     const titled = idle || served === undefined ? undefined : studiedSides(live.record.tags, served.profile.name, playedAs, text.sides, served.profile.accounts, othersOf(served.profiles, served.profile.id));
-    useTabTitle(titled === undefined ? undefined : tabTitle(titled.white.name, titled.black.name, at === 0 ? undefined : plies[at - 1]));
+    const lineNumbered = line === undefined ? undefined : linePlies(line, lineStartOf(plies, line.at, firstPosition));
+    useTabTitle(titled === undefined ? undefined : onTheLine ? tabTitle(titled.white.name, titled.black.name, lineNumbered?.[line.cursor - 1], true) : tabTitle(titled.white.name, titled.black.name, at === 0 ? undefined : plies[at - 1]));
     // 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.
@@ -322,7 +366,8 @@ export function App({ start }) {
     const mood = moodAt(live.record, sides?.white.who === "ai" ? "white" : sides?.black.who === "ai" ? "black" : ai, at).mood;
     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;
+    // On a variation the AI's badges, notes and drawings say nothing: they are of the game's moves (D-116).
+    const reviewed = onTheLine ? undefined : judged || at <= inBook ? plies[at - 1] : 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;
@@ -330,7 +375,7 @@ export function App({ start }) {
     const drawn = hintOpen && hint !== undefined && viewing === undefined && (hint.arrows !== undefined || hint.squares !== undefined) ? hint : review;
     const drawnByCoach = hint !== undefined && drawn === hint;
     // The game over, when this is its last position: the kings' signs, on the board and in the legend.
-    const boardEnd = ended && !aborted && viewing === undefined && pending === undefined ? { how, winner, player, fresh: justEnded } : undefined;
+    const boardEnd = ended && !aborted && viewing === undefined && pending === undefined && !onTheLine ? { how, winner, player, fresh: justEnded } : undefined;
     // The legend has the marks the board shows: none of the helps' or the drawings while the board is bare (D-99).
     const shownBare = bare && helps !== undefined;
     const legendRows = legendOf({
@@ -397,7 +442,7 @@ export function App({ start }) {
     const play = (from, to, piece) => {
         setSelected(undefined);
         setRefusal(undefined);
-        if (piece === undefined && promotes(pieces.get(from), to)) {
+        if (piece === undefined && promotes(piecesOnBoard.get(from), to)) {
             setPromoting({ from, to });
             return;
         }
@@ -416,9 +461,35 @@ export function App({ start }) {
             }
         });
     };
-    // A move the board refuses says why, without the AI (D-18), unless the player turned it off: the piece goes back, the reason over it.
+    // In analysis the player moves from the position shown, White's pieces and Black's, and a variation grows (D-116); the game's own next move only steps
+    // forward through it. The move sounds as the board stands after it.
+    const explore = (from, to, piece) => {
+        setSelected(undefined);
+        setRefusal(undefined);
+        if (piece === undefined && promotes(piecesOf(shown.position.fen).get(from), to)) {
+            setPromoting({ from, to });
+            return;
+        }
+        setPromoting(undefined);
+        const move = shown.legalMoves(from).find((legal) => legal.to === to && legal.promotion === piece);
+        if (move === undefined) {
+            return;
+        }
+        const after = afterMove(line, live.record.moves.map(({ san }) => san), at, move.san);
+        setLine(after.line);
+        setViewing(after.shown >= total ? undefined : after.shown);
+        const played = new Game(shown.record);
+        const moveSound = played.play(move.san).played && sound ? soundOf(played) : undefined;
+        if (moveSound !== undefined) {
+            playSound(moveSound);
+        }
+    };
+    // A move the board refuses says why, without the AI (D-18), unless the player turned it off: the piece goes back, the reason over it. In analysis, from
+    // the position shown.
     const refuse = (from, to) => {
-        const illegal = settings.explain ? live.whyNot(from, to) : undefined;
+        const board = analysing ? shown : live;
+        const pieces = analysing ? piecesOf(shown.position.fen) : piecesOnBoard;
+        const illegal = settings.explain ? board.whyNot(from, to) : undefined;
         if (illegal !== undefined) {
             const letterOn = (square) => pieces.get(square).toUpperCase();
             const sideOn = (square) => pieces.get(square) === letterOn(square) ? "white" : "black";
@@ -453,6 +524,10 @@ export function App({ start }) {
     };
     // In analysis the AI's note goes with the other side's card and the talk with the player's, turned round with the board as in a game (D-101, Zoe).
     const studiedCard = (side, place) => sides === undefined ? null : (_jsx(PlayerCard, { place: place, picture: pictureOf(sides[side], profile, served.profiles, 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 }));
+    // The variation as the column and the steps show it.
+    const lineView = !analysing || line === undefined || lineNumbered === undefined
+        ? undefined
+        : { plies: lineNumbered, at: line.at, cursor: line.cursor, onShow: showLine, onClose: closeLine, onBack: () => goTo(line.at) };
     // A game brought to analyse: the page shows it once the server has it in analysis; a refusal stays in the dialog. One the AI has to go over, with no
     // chat at the table, opens the chat's window: the analyst works with the chat's model (D-109).
     const studyGame = async (studied) => {
@@ -474,7 +549,7 @@ export function App({ start }) {
                         : 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, served.profiles, 40, mood), you: sides[player].name, picture: pictureOf(sides[player], profile, served.profiles, 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 && studied !== undefined
-                                ? (_jsxs(_Fragment, { children: [_jsxs("section", { class: "ai-block", "aria-label": sides[ai].name, children: [studiedCard(ai, "ai"), asleepNote, _jsx(AiNote, { ...(reviewed === undefined ? {} : { ply: reviewed }), ...(shownOpening === undefined ? {} : { opening: shownOpening }), ...(at === total && closing !== undefined ? { closing } : {}), ...(at === 0 && summary !== undefined ? { summary } : {}), ...(reviewing ? { reviewing: true } : {}), ...(count === undefined ? {} : { count }), ...(completeIt === undefined ? {} : { onComplete: completeIt }), name: analyst, by: annotator, mood: mood, ...(voiced ? { voice: text } : {}), text: text })] }), _jsxs("section", { class: "you-block", "aria-label": sides[player].name, children: [_jsx("div", { class: "chat", children: _jsx(Compose, { lines: analysisTalk(talk, studied.name), newestFirst: false, spent: 0, draft: draft, onDraft: (words) => {
+                                ? (_jsxs(_Fragment, { children: [_jsxs("section", { class: "ai-block", "aria-label": sides[ai].name, children: [studiedCard(ai, "ai"), asleepNote, _jsx(AiNote, { ...(reviewed === undefined ? {} : { ply: reviewed }), ...(shownOpening === undefined || onTheLine ? {} : { opening: shownOpening }), ...(at === total && closing !== undefined && !onTheLine ? { closing } : {}), ...(at === 0 && summary !== undefined && !onTheLine ? { summary } : {}), ...(reviewing ? { reviewing: true } : {}), ...(count === undefined ? {} : { count }), ...(completeIt === undefined ? {} : { onComplete: completeIt }), name: analyst, by: annotator, mood: mood, ...(voiced ? { voice: text } : {}), text: text })] }), _jsxs("section", { class: "you-block", "aria-label": sides[player].name, children: [_jsx("div", { class: "chat", children: _jsx(Compose, { lines: analysisTalk(talk, studied.name), newestFirst: false, spent: 0, draft: draft, onDraft: (words) => {
                                                             setDraft(words);
                                                             setUnsent(undefined);
                                                         }, onSend: () => sendWords({ game: studied.name, at }), canMove: false, name: name, problem: unsent, about: { ...(at === 0 ? {} : { ply: plies[at - 1] }), onShow: goTo }, ...(chatName === undefined ? {} : { to: chatName }), text: text }) }), studiedCard(player, "you")] })] }))
@@ -485,11 +560,18 @@ export function App({ start }) {
                                                         setUnsent(undefined);
                                                     }, onSend: sendWords, canMove: playerToMove, name: name, problem: unsent, text: text }), _jsx(PlayerCard, { place: "you", picture: picture, name: _jsx(NameButton, { profile: profile, onOpen: () => setDialog("profiles"), text: text }), side: idle ? undefined : player, taken: material.taken[player], ahead: ahead(player), turn: playerToMove, clock: _jsxs(_Fragment, { children: [clockOf(player), startClocks, nextGame] }), text: text })] })] })) }), _jsxs("div", { 
                             // 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 variation rings the board in the accent (D-116).
+                            class: between && !justEnded ? "board-wrap off" : onTheLine ? "board-wrap variation" : "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 } : {}), 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: boardEnd, 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 ? undefined : refusal ?? (linkIgnored === undefined ? undefined : { text: text.link[linkIgnored] }), 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" && (asleepNote !== null || 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: boardEnd, player: analysing ? (shown.outcome.over ? undefined : shown.position.turn) : playerToMove && pending === undefined && viewing === undefined ? player : undefined, selected: selected, targets: selected === undefined ? [] : analysing ? shown.legalMoves(selected) : viewing !== undefined ? [] : live.legalMoves(selected), dots: settings.dots, names: settings.squareNames, notice: viewing !== undefined && !analysing ? undefined : refusal ?? (linkIgnored === undefined ? undefined : { text: text.link[linkIgnored] }), promotion: promoting === undefined
+                                        ? undefined
+                                        : analysing
+                                            ? { ...promoting, side: shown.position.turn }
+                                            : viewing !== undefined || !playerToMove
+                                                ? undefined
+                                                : { ...promoting, side: player }, onPromote: (piece) => piece === undefined ? setPromoting(undefined) : (analysing ? explore : play)(promoting.from, promoting.to, piece), onSelect: select, onMove: analysing ? explore : play, onRefuse: refuse, text: text }), folds.talk !== "open" && (asleepNote !== null || clockWaits)
                                     ? (_jsxs("div", { class: "over-board", children: [asleepNote, startClocks] }))
-                                    : null] }), studied === undefined ? null : (_jsxs("div", { class: "board-steps", children: [_jsx(Steps, { shown: at, total: total, onStep: step, text: text }), standings === undefined ? null : _jsx(LeadChart, { plies: plies, standings: standings, shown: at, onShow: goTo, text: text })] })), helps === undefined ? null : (_jsxs("div", { class: "board-map", children: [legendAt(true), _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, ...(leftBook === undefined ? {} : { outOfBook: leftBook }), 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, legend: legend, text: text })), ...(helps === undefined && legendRows.length > 0 ? { legend } : {}), ...(standings === undefined ? {} : { standings }), ...(studied === undefined ? {} : {
+                                    : null] }), studied === undefined ? null : (_jsxs("div", { class: "board-steps", children: [_jsx(Steps, { shown: at, total: total, ...stepsLine(lineView, plies), onStep: step, text: text }), standings === undefined ? null : _jsx(LeadChart, { plies: plies, standings: standings, shown: at, onShow: goTo, text: text })] })), helps === undefined ? null : (_jsxs("div", { class: "board-map", children: [legendAt(true), _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, ...(leftBook === undefined ? {} : { outOfBook: leftBook }), 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, legend: legend, text: text })), ...(helps === undefined && legendRows.length > 0 ? { legend } : {}), ...(standings === undefined ? {} : { standings }), ...(studied === undefined ? {} : {
                                 analysis: {
                                     by: analyst,
                                     ...(summary === undefined ? {} : { summary }),
@@ -497,7 +579,7 @@ export function App({ start }) {
                                     ...(count === undefined ? {} : { count }),
                                     ...(completeIt === undefined ? {} : { onComplete: completeIt }),
                                 },
-                            }), 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 && replayed.record.moves.length > 0 ? { onAnalyse: () => void studyGame({ last: true }) } : {}), text: text }), _jsx(PageFoot, { version: served.version, text: text })] })] }) }));
+                            }), shownPlies: at, ...(lineView === undefined ? {} : { line: lineView }), 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 && replayed.record.moves.length > 0 ? { onAnalyse: () => void studyGame({ last: true }) } : {}), text: text }), _jsx(PageFoot, { version: served.version, text: text })] })] }) }));
 }
 /** The picture of a player of the game in analysis: the player's own, the AI's Torretta with its mood, another profile's, or the plain face of someone else. */
 function pictureOf({ who, profile: other }, profile, profiles, size, mood) {
@@ -580,6 +662,11 @@ function withMove(game, move) {
     const copy = new Game(game.record);
     return copy.play(move).played ? copy : game;
 }
+/** Where a variation that leaves the game after `at` moves starts its numbers: after the game's move there, or from the game's first position. */
+function lineStartOf(plies, at, first) {
+    const fork = plies[at - 1];
+    return fork === undefined ? first : fork.side === "white" ? { moveNumber: fork.number, turn: "black" } : { moveNumber: fork.number + 1, turn: "white" };
+}
 /** 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

@@ -1,5 +1,5 @@
 // The page's keys and wheel: [ and ] fold the side columns, M holds the helps' map (D-78), ? opens the legend (D-99), the arrows, Home and End step
-// through the moves and f and x turn the board, and the wheel over the board steps too.
+// through the moves and f and x turn the board, Esc closes a variation, 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";
@@ -87,6 +87,21 @@ export function useBrowseKeys(step, flip) {
         return () => window.removeEventListener("keydown", press);
     });
 }
+/** Esc closes what `close` closes, a variation in analysis (D-116), when nothing else on the page takes it: none while it is undefined. */
+export function useEscapeKey(close) {
+    useEffect(() => {
+        if (close === undefined) {
+            return;
+        }
+        const press = (event) => {
+            if (event.key === "Escape" && forThePage(event)) {
+                close();
+            }
+        };
+        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);

package/dist/page/app/title.js

@@ -1,10 +1,13 @@
 // The tab's title names the game and the move shown, Stefano – Claude, 16. ♞f3, so that the player's bookmarks and tabs tell its games apart.
 import { useEffect } from "preact/hooks";
 import { figurinesOf } from "../../core/index.js";
-/** The title of a game: its players by their first names, White first, so that the move fits in a tab (Zoe), and the move shown with its number, none before the first. */
-export function tabTitle(white, black, shown) {
+/**
+ * The title of a game: its players by their first names, White first, so that the move fits in a tab (Zoe), and the move shown with its number, none before
+ * the first; a move of a variation in analysis after its fork, ⑂ (D-116).
+ */
+export function tabTitle(white, black, shown, line = false) {
     const players = `${firstName(white)} – ${firstName(black)}`;
-    return shown === undefined ? players : `${players}, ${shown.number}${shown.side === "white" ? "." : "..."} ${figurinesOf(shown.san)}`;
+    return shown === undefined ? players : `${players}, ${line ? "⑂ " : ""}${shown.number}${shown.side === "white" ? "." : "..."} ${figurinesOf(shown.san)}`;
 }
 /** Keeps the tab's title, Chesspal's name while no game shows. */
 export function useTabTitle(title) {

package/dist/page/board/board.css

@@ -960,3 +960,9 @@
         transition: opacity 400ms ease, --kept 400ms ease;
     }
 }
+
+/* A variation in analysis rings the board in the accent, just outside its edge, on the page, where every skin leaves it in sight: nothing else changes (D-116) */
+.board-wrap.variation > .board {
+    outline: 3px solid var(--accent);
+    outline-offset: 2px;
+}

package/dist/page/game/column.js

@@ -4,18 +4,18 @@ 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 { MoveList, Steps, stepsLine } 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, outOfBook, 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, line, 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("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 })] })] })) }));
+            : (_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, ...(line === undefined ? {} : { line }), 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, ...stepsLine(line, plies), 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 }) {

package/dist/page/game/game.css

@@ -504,7 +504,7 @@
     font-weight: 600;
 }
 
-.moves li:nth-child(even) {
+.moves li:nth-child(even of :not(.line)) {
     background: var(--page);
 }
 
@@ -555,6 +555,97 @@
     box-shadow: 0 0 0 1.5px var(--card);
 }
 
+/* A variation in analysis (D-116): one row under the move it leaves from, indented, an accent edge on its left, its moves wrapping; the move it leaves
+   from underlined in the accent while the board shows the line */
+.moves li.line {
+    display: flex;
+    align-items: flex-start;
+    gap: 2px;
+    margin: 2px 0 2px 24px;
+    padding: 2px 2px 2px 8px;
+    border-left: 3px solid var(--accent);
+    border-radius: 0 6px 6px 0;
+    background: color-mix(in oklab, var(--accent) 8%, var(--card));
+    font-size: 13px;
+}
+
+.line-moves {
+    flex: 1;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 1px 2px;
+}
+
+.moves .line .ply {
+    margin-left: 0;
+    padding: 1px 4px;
+}
+
+.line-number {
+    color: var(--soft);
+    margin-right: 1px;
+}
+
+.moves .line .current .line-number {
+    color: #4d5866;
+}
+
+.moves .ply.fork {
+    box-shadow: inset 0 -2px 0 var(--accent);
+    border-radius: 5px 5px 0 0;
+}
+
+/* Back on the game the line fades, its moves still a click away */
+.moves li.line.faded {
+    opacity: 0.55;
+}
+
+.moves li.line.faded:hover,
+.moves li.line.faded:focus-within {
+    opacity: 0.85;
+}
+
+/* The cross that closes it, at the row's end; a finger's 32 pixels on a touch screen */
+.close-line {
+    display: grid;
+    place-items: center;
+    width: 24px;
+    height: 24px;
+    flex: none;
+    padding: 0;
+    border: 0;
+    border-radius: 50%;
+    background: none;
+    color: var(--soft);
+    cursor: pointer;
+}
+
+.close-line:hover {
+    background: color-mix(in oklab, var(--ink) 9%, transparent);
+    color: var(--ink);
+}
+
+.close-line .icon {
+    width: 14px;
+    height: 14px;
+    stroke-width: 2.2;
+}
+
+@media (pointer: coarse) {
+    .close-line {
+        width: 32px;
+        height: 32px;
+        margin-block: -4px;
+    }
+}
+
+@media (max-width: 479px) {
+    .moves li.line {
+        margin-left: 12px;
+        padding-left: 6px;
+    }
+}
+
 /* The buttons that step through the moves, under them as on Lichess and chess.com */
 .steps {
     display: flex;
@@ -591,6 +682,35 @@
     stroke-width: 2;
 }
 
+/* On a variation, the fork with the move it leaves from, in the accent: it takes the board back to the game */
+.steps .fork-back {
+    flex: 1.6;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 3px;
+    padding: 4px 6px;
+    border-color: var(--accent);
+    color: var(--accent);
+    font: inherit;
+    font-size: 13px;
+    white-space: nowrap;
+}
+
+.steps .fork-back:hover {
+    border-color: var(--accent);
+}
+
+.steps .fork-back span {
+    color: var(--ink);
+}
+
+.steps .fork-icon {
+    width: 16px;
+    height: 16px;
+    flex: none;
+}
+
 /* A piece in a move: the set's small one, White's white and Black's black, edged so either shows on either theme */
 .figurine {
     display: inline-block;

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

@@ -1,22 +1,30 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "preact/jsx-runtime";
+// The moves of the game beside the board, in pairs, with the pieces drawn as figures, the same in every language (D-50); the player looks back through them
+// with a click on one or with the buttons under them. In analysis a variation the player plays is one row under the move it leaves from (D-116).
+import { Fragment } from "preact";
 import { useEffect, useRef } from "preact/hooks";
 import { Figurine } from "../pieces/pieces.js";
 import { BadgeIcon, NoteIcon } from "./badges.js";
 import { FoldButton, useCardFold } from "./card-fold.js";
+import { lineText, moveNumberOf } from "./variation.js";
 /**
  * The moves numbered in pairs, the one the board shows marked (`shown`, how many moves it shows), and the result once the game is over; a click on a move
  * shows it. The list keeps its last move in sight, and the one shown while the player looks back.
  */
-export function MoveList({ plies, result, shown, onShow, tools, text }) {
+export function MoveList({ plies, result, shown, line, onShow, tools, text }) {
     const list = useRef(null);
     const [folded, toggleFold] = useCardFold("moves");
     const rows = rowsOf(plies);
-    const current = plies[shown - 1];
+    const onTheLine = line !== undefined && line.cursor > 0;
+    const current = onTheLine ? undefined : plies[shown - 1];
+    const fork = onTheLine ? plies[line.at - 1] : undefined;
+    // The line goes under the row of the move it leaves from, before the first row when it leaves from the start.
+    const lineAfter = line === undefined ? undefined : line.at === 0 ? -1 : rows.findIndex((row) => row.white === plies[line.at - 1] || row.black === plies[line.at - 1]);
     useEffect(() => {
         list.current?.scrollTo({ top: list.current.scrollHeight });
     }, [plies.length]);
     // Only the list scrolls to the move shown: the page under the board stays where the player has it.
-    useEffect(() => keepInSight(list.current), [shown]);
+    useEffect(() => keepInSight(list.current), [shown, line?.cursor, line?.plies.length]);
     // The cards above it change height with the position, the helps' card above all: the list follows, its move still in sight.
     useEffect(() => {
         const element = list.current;
@@ -27,26 +35,56 @@ export function MoveList({ plies, result, shown, onShow, tools, text }) {
         observer.observe(element);
         return () => observer.disconnect();
     }, []);
-    const move = (ply) => _jsx(Move, { ply: ply, current: ply !== undefined && ply === current, onShow: () => onShow(plies.indexOf(ply) + 1), text: text });
+    const move = (ply) => _jsx(Move, { ply: ply, current: ply !== undefined && ply === current, fork: ply !== undefined && ply === fork, onShow: () => onShow(plies.indexOf(ply) + 1), text: text });
+    const lineRow = line === undefined ? null : _jsx(LineRow, { line: line, text: text });
     // The card's title with its icon, a score sheet, as the other cards of the column, which folds the card to it (Stefano); only the list under it
     // scrolls, and it stays in the page while folded, so that it keeps its move in sight.
-    return (_jsxs("section", { class: `card moves-card${folded ? " folded" : ""}`, "aria-label": text.moves, children: [_jsxs("div", { class: "moves-head", children: [_jsx("h3", { class: "card-title", children: _jsxs(FoldButton, { folded: folded, onFold: toggleFold, text: text, children: [_jsx("svg", { class: "icon", viewBox: "0 0 24 24", "aria-hidden": "true", children: _jsx("path", { d: "M6 3H15L19 7V21H6ZM15 3V7H19M9 11H16M9 14.5H16M9 18H13" }) }), text.moves] }) }), tools] }), _jsxs("div", { ref: list, class: "moves", hidden: folded, children: [_jsx("ol", { children: rows.map(({ number, white, black }) => (_jsxs("li", { children: [_jsxs("span", { class: "number", children: [number, "."] }), move(white), move(black)] }, number))) }), result === undefined ? null : _jsx("p", { class: "result", children: result })] })] }));
+    return (_jsxs("section", { class: `card moves-card${folded ? " folded" : ""}`, "aria-label": text.moves, children: [_jsxs("div", { class: "moves-head", children: [_jsx("h3", { class: "card-title", children: _jsxs(FoldButton, { folded: folded, onFold: toggleFold, text: text, children: [_jsx("svg", { class: "icon", viewBox: "0 0 24 24", "aria-hidden": "true", children: _jsx("path", { d: "M6 3H15L19 7V21H6ZM15 3V7H19M9 11H16M9 14.5H16M9 18H13" }) }), text.moves] }) }), tools] }), _jsxs("div", { ref: list, class: "moves", hidden: folded, children: [_jsxs("ol", { children: [lineAfter === -1 ? lineRow : null, rows.map(({ number, white, black }, index) => (_jsxs(Fragment, { children: [_jsxs("li", { children: [_jsxs("span", { class: "number", children: [number, "."] }), move(white), move(black)] }), index === lineAfter ? lineRow : null] }, number)))] }), result === undefined ? null : _jsx("p", { class: "result", children: result })] })] }));
 }
-/** The buttons that step through the moves: to the start, back, forward, and to the game as it is; each one off where it could not go. */
-export function Steps({ shown, total, onStep, text }) {
+/**
+ * The buttons that step through the moves: to the start, back, forward, and to the game as it is; each one off where it could not go. On a variation,
+ * back and forward step through it, and the fork with the move it leaves from takes the board back to the game.
+ */
+export function Steps({ shown, total, line, fork, onStep, text }) {
+    const onTheLine = line !== undefined && line.cursor > 0;
     const button = (step, path, off) => (_jsx("button", { type: "button", title: text.steps[step], "aria-label": text.steps[step], disabled: off, onClick: () => onStep(step), children: _jsx("svg", { class: "icon", viewBox: "0 0 24 24", "aria-hidden": "true", children: _jsx("path", { d: path }) }) }));
-    return (_jsxs("nav", { class: "steps card", "aria-label": text.moves, children: [button("first", "M7 6V18M17 6L11 12L17 18", shown === 0), button("back", "M14.5 6L8.5 12L14.5 18", shown === 0), button("forward", "M9.5 6L15.5 12L9.5 18", shown === total), button("last", "M17 6V18M7 6L13 12L7 18", shown === total)] }));
+    return (_jsxs("nav", { class: "steps card", "aria-label": text.moves, children: [button("first", "M7 6V18M17 6L11 12L17 18", !onTheLine && shown === 0), button("back", "M14.5 6L8.5 12L14.5 18", !onTheLine && shown === 0), button("forward", "M9.5 6L15.5 12L9.5 18", onTheLine ? line.cursor === line.plies.length : shown === total), button("last", "M17 6V18M7 6L13 12L7 18", !onTheLine && shown === total), onTheLine ? _jsx(ForkButton, { fork: fork, onBack: line.onBack, text: text }) : null] }));
+}
+/** The variation for the steps, with the game's move it leaves from. */
+export function stepsLine(line, plies) {
+    const fork = line === undefined ? undefined : plies[line.at - 1];
+    return line === undefined ? {} : fork === undefined ? { line } : { line, fork };
 }
 /** A move in SAN with each piece's letter drawn as its figure, the same in every language (D-50), and a capture's x in grey, so the squares stand out. */
 export function Figurines({ san, side }) {
     return (_jsx(_Fragment, { children: san.split(/([KQRBNx])/).map((part, index) => index % 2 === 0 ? part : part === "x" ? _jsx("span", { class: "takes", children: "x" }, index) : _jsx(Figurine, { letter: part, side: side }, index)) }));
 }
-function Move({ ply, current, onShow, text }) {
+function Move({ ply, current, fork, onShow, text }) {
     if (ply === undefined) {
         return _jsx("span", { children: "\u2026" });
     }
     // 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] }));
+    return (_jsxs("button", { type: "button", class: current ? "ply current" : fork ? "ply fork" : "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] }));
+}
+/**
+ * The variation's row: its moves numbered as a PGN writes them, the one shown in the gold of the moves, and a cross that closes it; faded while the board
+ * shows the game, its moves still a click away.
+ */
+function LineRow({ line, text }) {
+    return (_jsxs("li", { class: line.cursor > 0 ? "line" : "line faded", "aria-label": `${text.variation.line}: ${lineText(line.plies)}`, children: [_jsx("span", { class: "line-moves", children: line.plies.map((ply, index) => {
+                    const current = index + 1 === line.cursor;
+                    const number = moveNumberOf(ply, index === 0);
+                    return (_jsxs("button", { type: "button", class: current ? "ply current" : "ply", "aria-current": current ? "step" : undefined, onClick: () => line.onShow(index + 1), children: [_jsxs("span", { class: "visually-hidden", children: [number, ply.san] }), _jsxs("span", { "aria-hidden": "true", children: [number === "" ? null : _jsx("span", { class: "line-number", children: number.replace("...", "…") }), _jsx(Figurines, { san: ply.san, side: ply.side })] })] }, index));
+                }) }), _jsx("button", { type: "button", class: "close-line", title: text.variation.close, "aria-label": text.variation.close, onClick: line.onClose, children: _jsx("svg", { class: "icon", viewBox: "0 0 24 24", "aria-hidden": "true", children: _jsx("path", { d: "M7 7L17 17M17 7L7 17" }) }) })] }));
+}
+/** The fork with the game's move the variation leaves from: it takes the board back to the game there. */
+function ForkButton({ fork, onBack, text }) {
+    const move = fork === undefined ? undefined : `${fork.number}${fork.side === "white" ? "." : "..."}${fork.san}`;
+    return (_jsxs("button", { type: "button", class: "fork-back", title: text.variation.back(move), "aria-label": text.variation.back(move), onClick: onBack, children: [_jsx(ForkIcon, {}), fork === undefined ? null : (_jsxs("span", { "aria-hidden": "true", children: [fork.number, fork.side === "white" ? "." : "…", _jsx(Figurines, { san: fork.san, side: fork.side })] }))] }));
+}
+/** The sign of a variation: a line that forks from the game's. */
+export function ForkIcon() {
+    return (_jsx("svg", { class: "icon fork-icon", viewBox: "0 0 24 24", "aria-hidden": "true", children: _jsx("path", { d: "M7 4V20M7 12C7 8 17 9 17 4M17 4L14 6.5M17 4L19.5 7" }) }));
 }
 /** 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) {

package/dist/page/game/variation.js

@@ -0,0 +1,65 @@
+import { stepped } from "./browse.js";
+/** Whether the board shows a move of the line, not the game. */
+export function onLine(line) {
+    return line !== undefined && line.cursor > 0;
+}
+/**
+ * The line after the player moves `san` where the board stands, and how many of the game's moves the board shows by then: on the game, its own next move
+ * steps forward and the line's first move goes back into the line; any other starts a new line. On the line, its own next move steps forward and any other
+ * cuts the line there and goes on with it.
+ */
+export function afterMove(line, game, shown, san) {
+    if (line !== undefined && line.cursor > 0) {
+        const moves = line.moves[line.cursor] === san ? line.moves : [...line.moves.slice(0, line.cursor), san];
+        return { line: { at: line.at, moves, cursor: line.cursor + 1 }, shown: line.at };
+    }
+    if (game[shown] === san) {
+        return { line: line === undefined ? undefined : { ...line, cursor: 0 }, shown: shown + 1 };
+    }
+    if (line?.at === shown && line.moves[0] === san) {
+        return { line: { ...line, cursor: 1 }, shown };
+    }
+    return { line: { at: shown, moves: [san], cursor: 1 }, shown };
+}
+/** The line after a step back or forward through it: back from its first move the board is on the game again, where the line leaves it. */
+export function stepLine(line, step) {
+    return { ...line, cursor: stepped(step, line.cursor, line.moves.length) };
+}
+/** The line with the board back on the game, the line kept faded. */
+export function leaveLine(line) {
+    return line === undefined ? undefined : { ...line, cursor: 0 };
+}
+/** The record of the position the board shows: the game's moves up to the line, then the line's up to its cursor. */
+export function lineRecord(record, line) {
+    const moves = [...record.moves.slice(0, line.at).map(({ san }) => san), ...line.moves.slice(0, line.cursor)];
+    return { tags: record.tags, moves: moves.map((san) => ({ san })) };
+}
+/** The line's moves numbered from the position it leaves the game at, given by its move number and the side to move. */
+export function linePlies(line, start) {
+    let { moveNumber: number, turn: side } = start;
+    return line.moves.map((san) => {
+        const ply = { san, number, side };
+        number += side === "black" ? 1 : 0;
+        side = side === "white" ? "black" : "white";
+        return ply;
+    });
+}
+/** The moves written as a PGN writes them, 12...Kf8 13.Nxe5 Bxe2: the number before White's moves, and before the first when it is Black's. */
+export function lineText(plies) {
+    return plies.map((ply, index) => `${moveNumberOf(ply, index === 0)}${ply.san}`).join(" ");
+}
+/** The number written before a move of a line, 13. or 12..., none before Black's but the first. */
+export function moveNumberOf(ply, first) {
+    return ply.side === "white" ? `${ply.number}.` : first ? `${ply.number}...` : "";
+}
+/** Whether the board goes from one place to another by more than one move, which shows the position at once instead of sliding a move. */
+export function isJump(from, to) {
+    if (from.cursor === 0 && to.cursor === 0) {
+        return Math.abs(from.at - to.at) > 1;
+    }
+    if (from.cursor > 0 && to.cursor > 0) {
+        return from.at !== to.at || Math.abs(from.cursor - to.cursor) > 1;
+    }
+    const [game, line] = from.cursor === 0 ? [from, to] : [to, from];
+    return !(game.at === line.at && line.cursor === 1);
+}

package/dist/page/guide/en.md

@@ -53,6 +53,7 @@ No chess engine plays for the AI: every move and every judgment is its own. Ches
 ![The bar that steps through the moves, and the judgments on the moves](analysis)
 
 - When the game is over, press **Analyse the game**: the AI goes over it and puts its judgments and notes on the moves. Read them by stepping through the moves with the arrows at the foot of the column, or by clicking a move.
+- In analysis, **move the pieces**, White's and Black's, from any move: a variation starts, with a coloured edge round the board. Click a move of the game to go back to it; the ✕, or Esc, closes the variation.
 - **Analyses**, in the header, opens your analyses, and loads a game played elsewhere: paste its PGN, or choose a .pgn file.
 - With your names on Lichess and Chess.com in your profile, **Load a game** lists your latest games there: click one to analyse it.
 - Ask the AI about the game in the box under its name.

package/dist/page/guide/it.md

@@ -53,6 +53,7 @@ Nessun motore di scacchi gioca al posto dell'AI: ogni mossa e ogni giudizio sono
 ![La barra per scorrere le mosse e i giudizi sulle mosse](analysis)
 
 - A partita finita premi **Analizza la partita**: l'AI la ripassa e mette sulle mosse i suoi giudizi e le sue note. Le leggi scorrendo le mosse con le frecce in fondo alla colonna, o cliccando una mossa.
+- Nell'analisi **muovi i pezzi**, bianchi e neri, da qualunque mossa: nasce una variante, con un bordo colorato attorno alla scacchiera. Clicca una mossa della partita per tornarci; la ✕, o Esc, chiude la variante.
 - **Analisi**, nell'intestazione, apre le tue analisi e carica una partita giocata altrove: incolla il suo PGN, o scegli un file .pgn.
 - Con i tuoi nomi su Lichess e Chess.com nel profilo, **Carica una partita** elenca le tue ultime partite là: clicca su una per analizzarla.
 - Chiedi all'AI della partita nella casella sotto il suo nome.

package/dist/page/text.js

@@ -84,6 +84,7 @@ const english = {
     game: "The game",
     moves: "Moves",
     steps: { first: "Start", back: "Previous move", forward: "Next move", last: "Back to the game" },
+    variation: { line: "Variation", close: "Close the variation (Esc)", back: (move) => move === undefined ? "Back to the start of the game" : `Back to the game, at ${move}` },
     noGame: "No game yet: press + to start one, or ask for one in the chat.",
     foldCard: "Fold the card",
     openCard: "Open the card",
@@ -523,6 +524,7 @@ const italian = {
     game: "La partita",
     moves: "Mosse",
     steps: { first: "Inizio", back: "Mossa precedente", forward: "Mossa successiva", last: "Torna alla partita" },
+    variation: { line: "Variante", close: "Chiudi la variante (Esc)", back: (move) => move === undefined ? "Torna all'inizio della partita" : `Torna alla partita, a ${move}` },
     noGame: "Nessuna partita: premi + per iniziarne una, o chiedila nella chat.",
     foldCard: "Chiudi la scheda",
     openCard: "Apri la scheda",

package/dist/server/page/game.js

@@ -7,7 +7,7 @@ import { asTheChatSees } from "./chat.js";
 import { tellWatchers } from "./events.js";
 import { bodyOf, bytesOf, isJson, json, jsonOf, runRoute, send, textOf } from "./http.js";
 import { profilesShown } from "./profiles.js";
-import { analystAtWork, chatPlayedAtLength, chatToRelaunch, chatToWaitFor, refuseWaited, relaunchChat, tableShown } from "./table.js";
+import { analystAtWork, chatForAnalysis, chatPlayedAtLength, chatToRelaunch, chatToWaitFor, refuseWaited, relaunchChat, tableShown } from "./table.js";
 import { updateShown } from "./update.js";
 /** Answers the page's requests about the game: true when the request was one. */
 export function answerGame(request, response, url, served) {
@@ -132,7 +132,8 @@ async function messageFromPage(request, response, served) {
 /**
  * A new game from the page, with the sides, the level and the clock the player chose: the sides and the level they leave out are as in the game
  * before, and no clock means a game without one. One going on goes to the archive unfinished, and the doorbell tells the chat, unless the table starts
- * it again. A chat the table holds that must be clear for it, and is at work, has the game wait with the choices kept until it has ended its answer (D-107).
+ * it again. A chat the table holds that must be clear for it, or that it started for the analysis, and is at work, has the game wait with the choices kept
+ * until it has ended its answer (D-107).
  */
 async function newGameFromPage(request, response, served) {
     const asked = 'Send the new game as JSON: {"ai_colour": "black", "level": "club", "clock": "10+5"}, each one optional; no clock for a game without one.';
@@ -152,7 +153,7 @@ async function newGameFromPage(request, response, served) {
         }
         // The game starts from the page, open: its clocks wait for the player's Start there. A chat the table starts again is clean: no /clear is asked.
         relaunching = chatToRelaunch(served);
-        if (!relaunching && chatToWaitFor(served) && chatPlayedAtLength(served, before)) {
+        if (!relaunching && chatToWaitFor(served) && (chatPlayedAtLength(served, before) || chatForAnalysis(served))) {
             waitForChat(served, input.data);
             send(response, 200, json, JSON.stringify({ waiting: true }));
             return;

package/dist/server/page/table.d.ts

@@ -22,11 +22,15 @@ export interface TableChats {
     /** Tells `changed` when the hosts' choices change: Antigravity's models, read from the player's account. */
     watch?(changed: () => void): void;
 }
-/** The chat `chesspal play` holds: the model and effort its host started with, none for the host's own, and the seat, the play's process. */
+/**
+ * The chat `chesspal play` holds: the model and effort its host started with, none for the host's own, the seat, the play's process, and `analysis` when
+ * it started it for the game in analysis on the page.
+ */
 export interface HeldChat {
     readonly model?: string | undefined;
     readonly effort?: string | undefined;
     readonly seat?: number;
+    readonly analysis?: true;
 }
 /** A chat opening at the table: one the page asked for, the one started again for a new game, or with another model or host (D-107). */
 export type Opening = "chat" | "again" | "restart";
@@ -69,7 +73,8 @@ export declare function tableShown(served: Served): {
 export declare function answerTable(request: IncomingMessage, response: ServerResponse, url: URL, served: Served): boolean;
 /**
  * Whether a new game starts the chat at the table again, clean (D-57): `chesspal play` holds it, it waits for the bell, no analyst of it is at work, and it
- * has seen a game move since it was first shown one; one that only greeted the player stays, as one opened from the chat's window before a new game.
+ * has seen a game move since it was first shown one; one that only greeted the player stays, as one opened from the chat's window before a new game. One
+ * `chesspal play` started for the analysis starts again all the same, at rest or still opening, or its first turn would analyse a game no longer there.
  */
 export declare function chatToRelaunch(served: Served): boolean;
 /**
@@ -82,6 +87,11 @@ export declare function relaunchChat(served: Served, how?: "again" | "restart",
  * it, it is at work, and no analyst of it is; with an analyst at work the player is asked for /clear, as with a chat opened by hand.
  */
 export declare function chatToWaitFor(served: Served): boolean;
+/**
+ * Whether the chat `chesspal play` holds was started for the analysis on the page: the one at the table, or, with none at it yet, the one still opening.
+ * A chat opened by hand never is.
+ */
+export declare function chatForAnalysis(served: Served): boolean;
 /**
  * Whether the chat at the table has played the game `current` at length (D-57), counted from the first position it was shown of it. A chat the table
  * started again for a game began after it, and new_game takes it for one cleared since: it holds the whole game all the same.

package/dist/server/page/table.js

@@ -62,22 +62,25 @@ export function answerTable(request, response, url, served) {
 }
 /**
  * Whether a new game starts the chat at the table again, clean (D-57): `chesspal play` holds it, it waits for the bell, no analyst of it is at work, and it
- * has seen a game move since it was first shown one; one that only greeted the player stays, as one opened from the chat's window before a new game.
+ * has seen a game move since it was first shown one; one that only greeted the player stays, as one opened from the chat's window before a new game. One
+ * `chesspal play` started for the analysis starts again all the same, at rest or still opening, or its first turn would analyse a game no longer there.
  */
 export function chatToRelaunch(served) {
     const { positionSeen, positionFirstSeen } = served.chat;
     const played = positionSeen?.started !== undefined && (positionFirstSeen === undefined || !samePosition(positionSeen, positionFirstSeen));
-    return played && heldChat(served) !== undefined && chatAtRest(served);
+    return chatForAnalysis(served) ? served.attached === undefined || chatAtRest(served) : played && heldChat(served) !== undefined && chatAtRest(served);
 }
 /**
  * Asks `chesspal play` to start the chat at the table again: once the new game has started, or with another model or host in its place (D-107). Whether
  * it was asked; the pages then show it opening.
  */
 export function relaunchChat(served, how = "again", host) {
-    const folder = served.attached?.chat.folder;
+    // One started for the analysis is asked again while it is still opening, in the table's folder.
+    const opening = served.attached === undefined && how === "again" && chatForAnalysis(served);
+    const folder = opening ? served.context.folder : served.attached?.chat.folder;
     // Another host may first ask whether it trusts the table's folder: the pages say so, as for a chat opened.
     const switching = how === "restart" && host !== undefined && host !== hostAtTable(served);
-    if (folder === undefined || heldChat(served) === undefined || served.table?.chats?.relaunch(folder, host) !== true) {
+    if (folder === undefined || (!opening && heldChat(served) === undefined) || served.table?.chats?.relaunch(folder, host) !== true) {
         return false;
     }
     noteOpening(served, switching ? "chat" : how);
@@ -90,6 +93,15 @@ export function relaunchChat(served, how = "again", host) {
 export function chatToWaitFor(served) {
     return heldChat(served) !== undefined && !chatAtRest(served) && !analystAtWork(served);
 }
+/**
+ * Whether the chat `chesspal play` holds was started for the analysis on the page: the one at the table, or, with none at it yet, the one still opening.
+ * A chat opened by hand never is.
+ */
+export function chatForAnalysis(served) {
+    const { attached, context, table } = served;
+    const held = table?.chats?.held(attached?.chat.folder ?? context.folder);
+    return held?.analysis === true && (attached === undefined || held.seat === attached.chat.seat);
+}
 /**
  * Whether the chat at the table has played the game `current` at length (D-57), counted from the first position it was shown of it. A chat the table
  * started again for a game began after it, and new_game takes it for one cleared since: it holds the whole game all the same.

package/dist/server/table/hosts/chats.js

@@ -34,7 +34,7 @@ export function terminalChats(context, chesspal = [process.execPath, ...process.
         // Only a chat in the table's folder can be the one chesspal play holds.
         held: (folder) => {
             const seat = samePath(folder, tableFolder(context.home())) ? seatHeld(folder, context.now()) : undefined;
-            return seat === undefined ? undefined : { model: seat.model, effort: seat.effort, seat: seat.pid };
+            return seat === undefined ? undefined : { model: seat.model, effort: seat.effort, seat: seat.pid, ...(seat.analysis === true ? { analysis: true } : {}) };
         },
         relaunch: (folder, host, updated) => samePath(folder, tableFolder(context.home())) && askAgain(folder, context.now(), { ...(host === undefined ? {} : { host }), ...(updated === true ? { updated } : {}) }),
     };

package/dist/server/table/hosts/play.d.ts

@@ -4,7 +4,7 @@ import { type HooksNews } from "./hooks.ts";
 import { type HostChoice, type HostName } from "./hosts.ts";
 /**
  * What `chesspal play` starts: the host's program, its arguments, folder and environment, whether it needs cmd, as a .cmd shim does on Windows, and the
- * model and effort it is given, which the seat notes for the page (D-107).
+ * model and effort it is given, which the seat notes for the page (D-107), as it notes a chat started for the game in analysis.
  */
 export interface HostLaunch {
     readonly program: string;
@@ -13,6 +13,8 @@ export interface HostLaunch {
     readonly env: NodeJS.ProcessEnv;
     readonly shell: boolean;
     readonly choice: HostChoice;
+    /** Started for the game in analysis on the page, with no game going on: a new game from the page starts it again. */
+    readonly analysis: boolean;
     /** Chesspal wrote Codex's hooks, the first time or again: Codex runs them only once the player trusts them. */
     readonly hooks?: HooksNews;
 }

package/dist/server/table/hosts/play.js

@@ -146,16 +146,17 @@ export function hostLaunch(context, host, env = process.env, exists) {
     const choices = tableChoices(folder, host);
     const choice = choiceIn(profileSettings(home, activeProfile(home).id), host, choices);
     const games = gameFolder(home);
-    const args = hostArgs(host, startMessage(languageIn(games, context.language), analysisAsked(games)), choice, folder, choices);
+    const analysis = analysisAsked(games);
+    const args = hostArgs(host, startMessage(languageIn(games, context.language), analysis), choice, folder, choices);
     // An effort the player set for every chat would win over the one chosen on the page: spawn leaves out a variable that is undefined.
     const effort = host === "claude" && choice.effort !== undefined ? { CLAUDE_CODE_EFFORT_LEVEL: undefined } : {};
     // The seat this play holds, by which its chat's server tells the table it is the chat held, and not another opened in the same folder.
     const childEnv = { ...env, ...Object.fromEntries(sessionMarks.map((name) => [name, undefined])), ...effort, CHESSPAL_SEAT: String(process.pid) };
     const script = npmScript(host, found, context.platform, exists ?? existsSync);
     if (script !== undefined) {
-        return { program: process.execPath, args: [script, ...args], folder, env: childEnv, shell: false, choice, ...hooks };
+        return { program: process.execPath, args: [script, ...args], folder, env: childEnv, shell: false, choice, analysis, ...hooks };
     }
-    return { program: found, args, folder, env: childEnv, shell: context.platform === "win32" && /\.(cmd|bat)$/i.test(found), choice, ...hooks };
+    return { program: found, args, folder, env: childEnv, shell: context.platform === "win32" && /\.(cmd|bat)$/i.test(found), choice, analysis, ...hooks };
 }
 /** Whether the board page shows a game in analysis, none going on: the chat opened there is for that game, brought to review or to talk over, not for a new one. */
 function analysisAsked(folder) {
@@ -185,10 +186,10 @@ const closedAtStartWords = {
     english: ["Claude Code closed as soon as it opened.", 'If it asks whether you trust this folder, go down to "Yes, I trust this folder" with the arrow keys, then press Enter.'],
     italian: ["Claude Code si è chiuso appena aperto.", "Se ti chiede se ti fidi della cartella, scendi con le frecce su «Yes, I trust this folder», poi premi Invio."],
 };
-// Runs the host as runHost does, the seat noting the model and effort it is given; one not installed, or that could not start, fails saying so.
+// Runs the host as runHost does, the seat noting the model and effort it is given, and whether for the analysis; one not installed, or that could not start, fails saying so.
 async function started(context, host, again) {
     const launch = hostLaunch(context, host);
-    takeSeat(launch.folder, { pid: process.pid, host, ...launch.choice });
+    takeSeat(launch.folder, { pid: process.pid, host, ...launch.choice, ...(launch.analysis ? { analysis: true } : {}) });
     // Codex asks the player to trust the hooks Chesspal wrote: said here, above its question, as init says it.
     if (launch.hooks !== undefined) {
         const words = hooksWords[launch.hooks];

package/dist/server/table/hosts/seat.d.ts

@@ -1,9 +1,13 @@
-/** The play process in the seat: its process id, its host, and the model and effort it started that host with, none for the host's own. */
+/**
+ * The play process in the seat: its process id, its host, and the model and effort it started that host with, none for the host's own; `analysis` when
+ * it started it for the game in analysis on the page, which a new game then starts again.
+ */
 export interface Seat {
     readonly pid: number;
     readonly host: string;
     readonly model?: string | undefined;
     readonly effort?: string | undefined;
+    readonly analysis?: true;
 }
 /**
  * Takes the seat for this play process, over a request left for one before it; it throws while another one holds it. A seat is held while its play

package/dist/server/table/hosts/seat.js

@@ -70,7 +70,7 @@ function seatIn(folder) {
         return undefined;
     }
     const text = (value) => (typeof value === "string" ? value : undefined);
-    return { pid: seat.pid, host: seat.host, model: text(seat.model), effort: text(seat.effort) };
+    return { pid: seat.pid, host: seat.host, model: text(seat.model), effort: text(seat.effort), ...(seat.analysis === true ? { analysis: true } : {}) };
 }
 function jsonIn(path) {
     try {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "chesspal",
-  "version": "0.5.0",
+  "version": "0.6.0",
   "description": "Play chess against an AI with a character, and learn with an AI coach: Chesspal keeps the rules, the board, the games and the memory; the AI plays, reasons and talks.",
   "type": "module",
   "bin": {