chesspal 0.5.0 → 0.7.0

package/dist/page/game/column.js

@@ -4,18 +4,19 @@ 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 }) {
-    const bar = standings === undefined ? undefined : _jsx(LeadBar, { standing: standingAt(standings, shownPlies), shown: shownPlies, text: 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 }) {
+    // In a game the bar waits for the coach's first estimate: a host that runs no coach gives none (Stefano).
+    const bar = standings === undefined || (analysis === undefined && standings.length === 0) ? 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: [_jsxs("p", { children: [_jsx("span", { role: "status", children: text.reviewing(analysis.by) }), analysis.onStop === undefined ? null : (_jsx("button", { type: "button", class: "stop-review", title: text.stopReview, "aria-label": text.stopReview, onClick: analysis.onStop, children: _jsx("svg", { class: "icon", viewBox: "0 0 24 24", "aria-hidden": "true", children: _jsx("path", { d: "M7 7L17 17M17 7L7 17" }) }) }))] }), 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

@@ -338,6 +338,7 @@
     color: var(--soft);
 }
 
+.review.waiting > p,
 .review.incomplete > p,
 .say.incomplete > p {
     display: flex;
@@ -504,7 +505,7 @@
     font-weight: 600;
 }
 
-.moves li:nth-child(even) {
+.moves li:nth-child(even of :not(.line)) {
     background: var(--page);
 }
 
@@ -555,6 +556,125 @@
     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 button that asks the AI to analyse it, small in the accent beside the cross; off while no chat hears the player */
+.analyse-line {
+    flex: none;
+    min-height: 24px;
+    padding: 1px 8px;
+    border: 1px solid var(--accent);
+    border-radius: 6px;
+    background: none;
+    color: var(--accent);
+    font: inherit;
+    font-size: 12px;
+    font-weight: 600;
+    cursor: pointer;
+}
+
+.analyse-line:hover:not(:disabled) {
+    background: color-mix(in oklab, var(--accent) 14%, transparent);
+}
+
+.analyse-line:disabled {
+    opacity: 0.45;
+    cursor: default;
+}
+
+/* The cross that closes it, at the row's end, as the one that stops the analysis asked; a finger's 32 pixels on a touch screen */
+.close-line,
+.stop-review {
+    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,
+.stop-review:hover {
+    background: color-mix(in oklab, var(--ink) 9%, transparent);
+    color: var(--ink);
+}
+
+.close-line .icon,
+.stop-review .icon {
+    width: 14px;
+    height: 14px;
+    stroke-width: 2.2;
+}
+
+@media (pointer: coarse) {
+    .close-line,
+    .stop-review {
+        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 +711,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, the button that asks the AI to analyse it, 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: "analyse-line", title: line.canAnalyse ? text.variation.analyseHint(line.analyst) : text.asleepInAnalysis(line.analyst), disabled: !line.canAnalyse, onClick: line.onAnalyse, children: text.variation.analyse }), _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/table/window.js

@@ -3,9 +3,12 @@ import { useEffect, useState } from "preact/hooks";
 import { Dialog } from "../dialogs/dialog.js";
 import { checkIcon } from "../dialogs/profiles.js";
 import { canAct, chatAction, choiceKeys, chosen, effortsOf, firstHost, offeredHosts, startedWith } from "./action.js";
-/** The chat's window: closed once a chat opens or starts again, the page then saying where it stands; `review` when it opened to have a game analysed. */
-export function ChatDialog({ open, review = false, table, settings, onChange, name, onClose, text }) {
-    return (_jsx(Dialog, { open: open, title: review ? text.table.reviewTitle : text.table.title, onClose: onClose, text: text, children: _jsx(ChatForm, { review: review, table: table, settings: settings, onChange: onChange, name: name, onClose: onClose, text: text }) }));
+/**
+ * The chat's window: `onStarted` once a chat opens or starts again, the page then saying where it stands; `onClose` when the player closes it without;
+ * `review` when it opened to have a game analysed.
+ */
+export function ChatDialog({ open, review = false, table, settings, onChange, name, onStarted, onClose, text }) {
+    return (_jsx(Dialog, { open: open, title: review ? text.table.reviewTitle : text.table.title, onClose: onClose, text: text, children: _jsx(ChatForm, { review: review, table: table, settings: settings, onChange: onChange, name: name, onStarted: onStarted, text: text }) }));
 }
 /** The AI's name on its card, which opens the chat's window: with no chat at the table, a hollow ring before it says so. */
 export function AiNameButton({ name, table, onOpen, text }) {
@@ -45,7 +48,7 @@ const hostTitles = { claude: "Claude Code", codex: "Codex", antigravity: "Antigr
 /** The ↻ of a chat that starts again. */
 const restartIcon = (_jsx("svg", { class: "icon in-use", viewBox: "0 0 24 24", "aria-hidden": "true", children: _jsx("path", { d: "M19.5 12a7.5 7.5 0 1 1-2.2-5.3M19.5 4.5v4h-4" }) }));
 /** The window's form, made again at each opening with the host at the table selected, else the last the button used, else the first. */
-function ChatForm({ review, table, settings, onChange, name, onClose, text }) {
+function ChatForm({ review, table, settings, onChange, name, onStarted, text }) {
     const words = text.table;
     const installed = offeredHosts(table);
     const [selected, setSelected] = useState(() => firstHost(table, settings));
@@ -73,7 +76,7 @@ function ChatForm({ review, table, settings, onChange, name, onClose, text }) {
         setSending(false);
         if (done) {
             onChange({ ...settings, chatHost: host.name });
-            onClose();
+            onStarted();
         }
         else {
             setFailed(true);

package/dist/page/talk/chat.css

@@ -106,3 +106,11 @@
     opacity: 1;
     background: color-mix(in oklab, currentColor 15%, transparent);
 }
+
+/* On a variation, the fork's sign under the moves before the move the board showed, in the bubble's colour (D-116) */
+.shown-line .fork-icon {
+    width: 14px;
+    height: 14px;
+    margin-right: 3px;
+    stroke-width: 2.2;
+}

package/dist/page/talk/talk.js

@@ -4,7 +4,7 @@ import { createContext } from "preact";
 import { useContext, useEffect, useLayoutEffect, useRef, useState } from "preact/hooks";
 import { Torretta } from "../avatars/torretta.js";
 import { BadgeIcon, NoteIcon } from "../game/badges.js";
-import { Figurines } from "../game/move-list.js";
+import { Figurines, ForkIcon } from "../game/move-list.js";
 import { talkLimits } from "../game/plies.js";
 import { ReviewProgress } from "../game/review-progress.js";
 import { signature } from "../players/model-name.js";
@@ -87,7 +87,7 @@ export function Compose({ lines, newestFirst, spent, draft, onDraft, onSend, can
     };
     return (_jsxs(_Fragment, { children: [_jsx("ol", { ref: list, class: "sent", "aria-live": "polite", children: inOrder(lines.map((line, index) => (_jsxs("li", { class: line.who === "ai" ? "from-ai" : undefined, style: about === undefined ? aged(lines.length - 1 - index) : reread(index, lastAnswer), children: [line.who === "ai"
                             ? (_jsxs(_Fragment, { children: [_jsx(Torretta, { size: 24 }), _jsx("p", { class: "say", children: _jsx(Marked, { text: line.text }) })] }))
-                            : (_jsxs("p", { class: "said", children: [about === undefined || line.shown?.move === undefined ? null : _jsx(ShownMove, { move: line.shown.move, onShow: () => about.onShow(line.shown.at), text: text }), line.text] })), index === lastWritten ? _jsx(Status, { heard: line.heard, name: name, text: text }) : null] }, index))), newestFirst) }), to, left <= 0 ? null : (_jsxs("form", { class: about === undefined ? "compose" : "compose asking", onSubmit: (event) => {
+                            : (_jsxs("p", { class: "said", children: [about === undefined ? null : _jsx(ShownPlace, { shown: line.shown, about: about, text: text }), line.text] })), index === lastWritten ? _jsx(Status, { heard: line.heard, name: name, text: text }) : null] }, index))), newestFirst) }), to, left <= 0 ? null : (_jsxs("form", { class: about === undefined ? "compose" : "compose asking", onSubmit: (event) => {
                     event.preventDefault();
                     submit();
                 }, children: [_jsx("p", { class: "limit", role: "status", children: problem ?? "" }), _jsx("textarea", { rows: 2, maxLength: left, placeholder: prompt, "aria-label": prompt, value: draft, onInput: (event) => onDraft(event.currentTarget.value), onKeyDown: (event) => {
@@ -106,6 +106,24 @@ export function Compose({ lines, newestFirst, spent, draft, onDraft, onSend, can
 export function TalkFaces({ name, aiPicture, you, picture, ai, player, aiMoves, playerMoves, unread, text }) {
     return (_jsxs("div", { class: "faces", children: [_jsx(RailPlayer, { place: "ai", picture: aiPicture ?? _jsx(Torretta, { size: 40, bust: true }), name: name, ...(ai === undefined ? {} : { side: text.sides[ai] }), moves: aiMoves, unread: unread }), _jsx(RailPlayer, { place: "you", picture: picture, name: you, ...(player === undefined ? {} : { side: text.sides[player] }), moves: playerMoves })] }));
 }
+/** Where a line of the player's was written: on a variation the board showed, its mark; else the game's move, none at the start. */
+function ShownPlace({ shown, about, text }) {
+    const variation = shown?.variation;
+    if (variation?.move !== undefined) {
+        return _jsx(ShownLine, { variation: variation, onShow: () => about.onLine(variation), text: text });
+    }
+    return (_jsxs(_Fragment, { children: [shown?.move === undefined ? null : _jsx(ShownMove, { move: shown.move, onShow: () => about.onShow(shown.at), text: text }), variation === undefined ? null : _jsx(ShownLine, { variation: variation, onShow: () => about.onLine(variation), text: text })] }));
+}
+/**
+ * The variation a line of the player's was written on, small at the line's head: the fork's sign in the accent and the move the board showed, none when
+ * it was set aside; a press puts the variation back on the board (D-116).
+ */
+function ShownLine({ variation, onShow, text }) {
+    const { move } = variation;
+    const label = text.variation.show(variation.text);
+    const [, number = "", san = ""] = /^(\d+\.+)(.+)$/.exec(move ?? "") ?? [];
+    return (_jsxs("button", { type: "button", class: "shown-move shown-line", title: label, "aria-label": label, onClick: onShow, children: [_jsx(ForkIcon, {}), move === undefined ? null : (_jsxs(_Fragment, { children: [_jsx("span", { class: "move-number", children: number }), _jsx(Figurines, { san: san, side: number.endsWith("...") ? "black" : "white" })] }))] }));
+}
 /** The move a line of the player's was written on, 14.♘f3, small at the line's head: a press shows it on the board again (Zoe). */
 function ShownMove({ move, onShow, text }) {
     const [, number = "", san = move] = /^(\d+\.+)(.+)$/.exec(move) ?? [];

package/dist/page/text.js

@@ -84,6 +84,15 @@ 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}`,
+        analyse: "Analyse",
+        analyseHint: (name) => `Ask ${name} to analyse this variation`,
+        analyseWords: "Analyse this variation",
+        show: (line) => `Show the variation ${line} on the board`,
+    },
     noGame: "No game yet: press + to start one, or ask for one in the chat.",
     foldCard: "Fold the card",
     openCard: "Open the card",
@@ -118,6 +127,7 @@ const english = {
         mated: (side) => `${side === "white" ? "White" : "Black"} is mated`,
     },
     reviewing: (name) => `${name} is going over the game…`,
+    stopReview: "Cancel the analysis",
     incomplete: "Analysis not complete",
     complete: "Complete it",
     completeHint: "Complete the analysis",
@@ -523,6 +533,15 @@ 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}`,
+        analyse: "Analizza",
+        analyseHint: (name) => `Chiedi a ${name} di analizzare questa variante`,
+        analyseWords: "Analizza questa variante",
+        show: (line) => `Rimetti sulla scacchiera la variante ${line}`,
+    },
     noGame: "Nessuna partita: premi + per iniziarne una, o chiedila nella chat.",
     foldCard: "Chiudi la scheda",
     openCard: "Apri la scheda",
@@ -557,6 +576,7 @@ const italian = {
         mated: (side) => `Matto al ${side === "white" ? "Bianco" : "Nero"}`,
     },
     reviewing: (name) => `${name} sta analizzando la partita…`,
+    stopReview: "Annulla l'analisi",
     incomplete: "Analisi non completa",
     complete: "Completa",
     completeHint: "Completa l'analisi",

package/dist/server/bell/bell.d.ts

@@ -11,6 +11,7 @@ export declare class Bell {
     private busy;
     private woken;
     private hooked;
+    private unheard;
     private stopWatch;
     private readonly news;
     private readonly changed;
@@ -25,6 +26,8 @@ export declare class Bell {
     get inTurn(): boolean;
     /** Whether the doorbell woke the chat in the turn it is in. */
     get woke(): boolean;
+    /** Whether the chat is out of its turn and hears nobody: its hook went without the bell, or it was stopped; until it calls a tool or a hook waits again. */
+    get deaf(): boolean;
     /** Whether the chat hears the player: in a turn, or waiting for the bell with a hook. */
     get listening(): boolean;
     /** The chat calls a tool, so it is in a turn: true when nobody was listening before. */
@@ -97,5 +100,5 @@ export type BellHeard = {
  * of its folder that serves its own page: the table is one more page to choose from, unless the ports to try are given (Priya).
  */
 export declare function bellHeard(input: string, ports?: number[]): Promise<BellHeard>;
-/** Adds a line to the log of the hooks that heard no bell, keeping its last lines; a log that cannot be written never stops the hook. */
-export declare function noteSilence(folder: string, why: string, now?: Date): void;
+/** Adds a line to the log of the doorbell's hooks, keeping its last lines; a log that cannot be written never stops the hook. */
+export declare function noteHook(folder: string, why: string, now?: Date): void;