chesspal 0.0.1 → 0.1.0

package/dist/page/dialog.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx, jsxs as _jsxs } from "preact/jsx-runtime";
+import { useEffect, useRef } from "preact/hooks";
+/** A dialog over the page, as the settings' one: Esc and a click outside close it; a step inside it goes back with the arrow beside its title. */
+export function Dialog({ open, title, onBack, onClose, text, children }) {
+    const dialog = useRef(null);
+    useEffect(() => {
+        const element = dialog.current;
+        if (open && !element.open) {
+            element.showModal();
+            // The field marked autofocus takes the focus, which the dialog itself would keep.
+            element.querySelector("[autofocus]")?.focus();
+        }
+        else if (!open && element.open) {
+            element.close();
+        }
+    }, [open]);
+    // A click on the backdrop reaches the dialog itself, as one on its padding does: only the first is outside its box.
+    const closeOutside = (event) => {
+        const box = dialog.current.getBoundingClientRect();
+        const inside = event.clientX >= box.left && event.clientX <= box.right && event.clientY >= box.top && event.clientY <= box.bottom;
+        if (event.target === dialog.current && !inside) {
+            onClose();
+        }
+    };
+    return (_jsxs("dialog", { ref: dialog, class: "settings profiles", "aria-label": title, onClose: onClose, onClick: closeOutside, children: [_jsxs("header", { children: [onBack === undefined ? null : (_jsx("button", { class: "theme", type: "button", title: text.profile.back, "aria-label": text.profile.back, onClick: onBack, children: _jsx("svg", { class: "icon", viewBox: "0 0 24 24", "aria-hidden": "true", children: _jsx("path", { d: "M15 6L9 12L15 18" }) }) })), _jsx("h2", { children: title }), _jsx("button", { class: "theme", type: "button", title: text.close, "aria-label": text.close, onClick: onClose, children: _jsx("svg", { class: "icon", viewBox: "0 0 24 24", "aria-hidden": "true", children: _jsx("path", { d: "M6 6L18 18M18 6L6 18" }) }) })] }), open ? children : null] }));
+}

package/dist/page/ending.js

@@ -0,0 +1,73 @@
+// How a game ended, as the page names it (T-77): by the board, or by a resignation or a draw agreed, which only the record's Termination tag says (D-37).
+import { useEffect, useLayoutEffect, useRef, useState } from "preact/hooks";
+/** How the game ended, from the board or the record's Termination tag; undefined while it goes on, or when the record does not say. */
+export function howEnded(outcome, termination) {
+    if (outcome.over) {
+        return outcome.ending;
+    }
+    // Ours, and those of games played elsewhere (D-68): "Game drawn by agreement", Lichess's "Time forfeit", chess.com's "X won by resignation" in any of
+    // its languages, "X ha vinto per abbandono".
+    if (/^draw agreed$|by agreement|per accordo/i.test(termination ?? "")) {
+        return "agreement";
+    }
+    // A flag that fell (T-37): "Black lost on time", "Black ran out of time and White cannot mate".
+    if (/ (lost on|ran out of|won on) time\b|time forfeit|per tempo/i.test(termination ?? "")) {
+        return "time";
+    }
+    // "White resigns", or a draw (D-65): "White resigns and Black cannot mate".
+    return / resigns\b|by resignation|per abbandono/i.test(termination ?? "") ? "resignation" : undefined;
+}
+/**
+ * Whether the game ended a moment ago under the player's eyes, from going on to over, for as long as the page's effects on it last; a game already over when
+ * the page reads it does not count. `state` is undefined until the page has the game.
+ */
+export function useJustEnded(state) {
+    const before = useRef(state);
+    const [just, setJust] = useState(false);
+    // Before the page paints: a frame of the end at rest would show before its effects.
+    useLayoutEffect(() => {
+        const ended = before.current === "going" && state === "over";
+        before.current = state;
+        if (!ended) {
+            return;
+        }
+        setJust(true);
+        const timer = setTimeout(() => setJust(false), effectsLast);
+        return () => {
+            clearTimeout(timer);
+            setJust(false);
+        };
+    }, [state]);
+    return just;
+}
+/**
+ * Whether the page saw the game end, from going on to over, while it stays over (D-77): its final position stays on the board until the next game. A game
+ * already over when the page reads it does not count. `state` is undefined until the page has the game.
+ */
+export function useSawEnd(state) {
+    // Known in the render itself: a frame of the table set in place of the final position would cost the last move its slide.
+    const seen = useRef({ state, saw: false });
+    seen.current = seeEnd(seen.current, state);
+    return seen.current.saw;
+}
+/** What the page knows after reading the game again in `state`: it saw the end when the game went from going on to over, and while it stays over. */
+export function seeEnd(before, state) {
+    return { state, saw: state === "over" && (before.saw || before.state === "going") };
+}
+/**
+ * Whether the AI declined the player's draw offer by its move (D-65): their offer gone with a move more and the game going on, until the next move. `moves`
+ * is how many the game has.
+ */
+export function useDeclined(offer, moves, over) {
+    const before = useRef({ offer, moves });
+    const [declinedAt, setDeclinedAt] = useState(undefined);
+    useEffect(() => {
+        if (before.current.offer === "player" && offer === undefined && moves > before.current.moves && !over) {
+            setDeclinedAt(moves);
+        }
+        before.current = { offer, moves };
+    }, [offer, moves, over]);
+    return declinedAt === moves && !over;
+}
+/** How long the effects of a game over last, the longest of the style's: the board's, then the card's light. */
+const effectsLast = 2800;

package/dist/page/explain.js

@@ -0,0 +1,58 @@
+/** The drawing for a move refused, `to` being where it went and `king` the square of the player's king. */
+export function explain(illegal, to, king) {
+    const kind = kinds[illegal.reason];
+    const by = illegal.by;
+    if (by === undefined) {
+        return { kind };
+    }
+    const target = illegal.reason === "attacked" ? to : illegal.reason === "castle-through" ? illegal.at : arrowsToKing.has(illegal.reason) ? king : undefined;
+    return target === undefined ? { kind, ring: by } : { kind, arrow: { from: by, to: target } };
+}
+/**
+ * Where the bubble of a refused move goes (Zoe's rule, T-91), squares as seen, in columns and rows from the top left: over the piece moved, else under it,
+ * so as never to hide the squares to `keep` (the culprit, the arrow's point); else under the board on a narrow one, or beside the piece on a wide one.
+ */
+export function bubblePlace(piece, keep, narrow) {
+    const [column, row] = piece;
+    // On a phone's board the bubble is taller than a square: it takes two rows.
+    const rows = narrow ? 2 : 1;
+    const free = (first, step) => first + step * (rows - 1) >= 0 && first + step * (rows - 1) <= 7 && !keep.some(([, kept]) => (kept - first) * step >= 0 && (kept - first) * step < rows);
+    if (free(row - 1, -1)) {
+        return "above";
+    }
+    if (free(row + 1, 1)) {
+        return "below";
+    }
+    if (narrow) {
+        return "under-board";
+    }
+    const right = keep.some(([kept, keptRow]) => keptRow === row && kept > column);
+    const left = keep.some(([kept, keptRow]) => keptRow === row && kept < column);
+    return right === left ? (column < 4 ? "right" : "left") : right ? "left" : "right";
+}
+/** The squares a bubble must leave in sight: the culprit, with its ring or the start of its arrow, and the arrow's point. */
+export function keptSquares(explanation) {
+    if (explanation === undefined) {
+        return [];
+    }
+    return explanation.arrow === undefined ? (explanation.ring === undefined ? [] : [explanation.ring]) : [explanation.arrow.from, explanation.arrow.to];
+}
+const kinds = {
+    "own": "piece",
+    "shape": "piece",
+    "pawn-straight": "piece",
+    "pawn-double": "piece",
+    "pawn-diagonal": "piece",
+    "en-passant-late": "piece",
+    "blocked": "blocked",
+    "pinned": "pin",
+    "check": "king",
+    "attacked": "king",
+    "castle-lost": "castle",
+    "castle-rook-gone": "castle",
+    "castle-blocked": "castle",
+    "castle-check": "castle",
+    "castle-through": "castle",
+};
+// The reasons whose culprit aims at the player's king.
+const arrowsToKing = new Set(["pinned", "check", "castle-check"]);

package/dist/page/fold-tab.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "preact/jsx-runtime";
+// The tab on a side column's outer edge, a drawer's handle, that slides the column under the board and pulls it out again (T-84).
+import { foldKeys } from "./folds.js";
+/** The tab of a column: open, on the column's outer edge; folded, peeking out from under the board, with a dot when the AI spoke meanwhile. */
+export function FoldTab({ column, folded, label, unread = false, onFold }) {
+    // The chevron points where a click moves the handle: in under the board, or out again.
+    const left = (column === "talk") === folded;
+    return (_jsx("div", { class: `fold-tab of-${column}${folded ? " folded" : ""}`, children: _jsx("button", { id: `fold-${column}`, class: unread ? "unread" : undefined, type: "button", title: `${label} (${foldKeys[column]})`, "aria-label": label, "aria-controls": column, "aria-expanded": !folded, "aria-keyshortcuts": foldKeys[column], onClick: () => onFold(column), children: _jsx("svg", { class: "icon", viewBox: "0 0 24 24", "aria-hidden": "true", children: _jsx("path", { d: left ? "M14 7L9 12L14 17" : "M10 7L15 12L10 17" }) }) }) }));
+}

package/dist/page/folds.js

@@ -0,0 +1,43 @@
+// The side columns the player folds (T-84): the talk on the left, which narrows to its two faces before it folds, the game on the right; each as this browser
+// remembers it.
+/** The key that folds each column, as in editors with two side bars. */
+export const foldKeys = { talk: "[", game: "]" };
+/** The columns as this browser left them; else both open. */
+export function startFolds() {
+    return { talk: read("talk"), game: read("game") === "folded" ? "folded" : "open" };
+}
+/** What a click on a column's tab makes of it: the talk narrows to its faces, then folds, then opens whole again; the game folds and opens. */
+export function nextFold(column, fold) {
+    if (fold === "open") {
+        return column === "talk" ? "rail" : "folded";
+    }
+    return fold === "rail" ? "folded" : "open";
+}
+/** Remembers how the player left a column. */
+export function rememberFold(column, fold) {
+    try {
+        localStorage.setItem(keys[column], fold);
+    }
+    catch {
+        // The choice lasts as long as the page.
+    }
+}
+/** Whether the game's column is under the board, where three columns would leave the board small, and does not fold. */
+export function gameUnderBoard() {
+    return matchMedia("(max-width: 1099px)").matches;
+}
+/** Whether the page is in one column, as on a phone, where nothing folds. */
+export function oneColumn() {
+    return matchMedia("(max-width: 840px)").matches;
+}
+const keys = { talk: "chesspal-talk", game: "chesspal-column" };
+function read(column) {
+    try {
+        const fold = localStorage.getItem(keys[column]);
+        return fold === "rail" || fold === "folded" ? fold : "open";
+    }
+    catch {
+        // A browser that keeps nothing for the page: the defaults decide.
+        return "open";
+    }
+}

package/dist/page/game-column.js

@@ -0,0 +1,44 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "preact/jsx-runtime";
+import { outOfBookMove } from "../core/index.js";
+import { MoveList, Steps } from "./move-list.js";
+import { Piece } from "./pieces.js";
+/**
+ * The column, which the player folds with its tab (T-84); under the board, where three columns would leave the board small, always open. A game in analysis
+ * (D-69) says above the moves that the AI is going over it, until its word on the whole game comes, which the talk shows.
+ */
+export function GameColumn({ plies, result, how, lit, started, move, toMove, opening, helps, analysis, shownPlies, onShow, onStep, onDownload, onSaveMoves, onAnalyse, 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: [_jsx(GameCard, { plies: plies, result: result, how: how, lit: lit, started: started, move: move, toMove: toMove, text: text }), opening === undefined ? null : _jsx(OpeningCard, { opening: opening, text: text }), helps, onDownload === undefined && onSaveMoves === undefined ? null : (_jsxs("div", { class: "card analysis-actions", children: [onDownload === undefined ? null : _jsx(SaveButton, { label: text.study.download, onSave: onDownload }), onSaveMoves === undefined ? null : _jsx(SaveButton, { label: text.saveMoves, onSave: onSaveMoves })] })), onAnalyse === undefined ? null : _jsx(AnalyseButton, { label: text.study.analyseIt, onAnalyse: onAnalyse }), analysis === undefined || analysis.summary !== undefined ? null : (_jsxs("p", { class: "card review waiting", role: "status", children: [_jsx("span", { class: "spinner", "aria-hidden": "true" }), text.reviewing(analysis.by)] })), _jsx(MoveList, { plies: plies, result: result, shown: shownPlies, onShow: onShow, text: text }), _jsx(Steps, { shown: shownPlies, total: plies.length, onStep: onStep, text: text })] })) }));
+}
+/** A button that saves the game as a file in the player's downloads. */
+function SaveButton({ label, onSave }) {
+    return (_jsxs("button", { type: "button", onClick: onSave, children: [_jsx("svg", { class: "icon", viewBox: "0 0 24 24", "aria-hidden": "true", children: _jsx("path", { d: "M12 4V15M7 10L12 15L17 10M5 19H19" }) }), label] }));
+}
+/** The button that opens the game over in analysis. */
+function AnalyseButton({ label, onAnalyse }) {
+    return (_jsx("div", { class: "card analysis-actions", children: _jsxs("button", { type: "button", onClick: onAnalyse, children: [_jsx("svg", { class: "icon", viewBox: "0 0 24 24", "aria-hidden": "true", children: _jsx("path", { d: "M12 4V20M8 20H16M5 7H19M5 7L2.5 13A2.5 2 0 0 0 7.5 13ZM19 7L16.5 13A2.5 2 0 0 0 21.5 13Z" }) }), label] }) }));
+}
+/**
+ * The game's card, as tall as a player's (T-84): a little board of four squares with the king to move, the move and when the game started; at the end, the result on the
+ * square, the winner's king standing over the loser's, laid down, or both standing in a draw, how it ended and how many moves it lasted; lit up a moment when the
+ * game ends under the player's eyes (T-77).
+ */
+function GameCard({ plies, result, how, lit, started, move, toMove, text }) {
+    const when = started === undefined ? undefined : new Date(started).toLocaleString(text.language, { day: "numeric", month: "short", hour: "2-digit", minute: "2-digit" });
+    if (result === undefined) {
+        return (_jsxs("section", { class: "card game-card", "aria-label": text.game, children: [_jsx("span", { class: "tile moving", "aria-hidden": "true", children: _jsx(Piece, { letter: toMove === "white" ? "K" : "k" }) }), _jsxs("div", { class: "what", children: [_jsxs("p", { class: "head", children: [text.move, " ", _jsx("b", { class: "big", children: move }), _jsxs("span", { class: "visually-hidden", children: [", ", text.toMove(toMove)] })] }), when === undefined ? null : _jsx("p", { class: "when", children: text.started(when) })] })] }));
+    }
+    const winner = result === "1-0" ? "white" : result === "0-1" ? "black" : undefined;
+    const first = plies[0];
+    const last = plies.at(-1);
+    const lasted = first === undefined || last === undefined ? 0 : last.number - first.number + 1;
+    return (_jsxs("section", { class: `card game-card${lit ? " lit" : ""}`, "aria-label": text.game, children: [winner === undefined
+                ? (_jsxs("span", { class: "tile over draw", "aria-hidden": "true", children: [_jsx(Piece, { letter: "K" }), _jsx(Piece, { letter: "k" })] }))
+                : (_jsxs("span", { class: "tile over win", "aria-hidden": "true", children: [_jsx("span", { class: "down", children: _jsx(Piece, { letter: winner === "white" ? "k" : "K" }) }), _jsx("span", { class: "up", children: _jsx(Piece, { letter: winner === "white" ? "K" : "k" }) })] })), _jsxs("div", { class: "what", children: [_jsxs("p", { class: "head", children: [_jsx("b", { class: "big", children: result === "1/2-1/2" ? "½–½" : result.replace("-", "–") }), " \u00B7 ", winner === undefined ? text.draw : text.won(winner)] }), _jsxs("p", { class: "when", children: [how === undefined ? "" : `${text.ended[how]} · `, text.lasted(lasted)] })] })] }));
+}
+/** The opening by Lichess's book: a book, crossed out once the game left it, and the family; the variation under them, and the move the game left the book at. */
+function OpeningCard({ opening, text }) {
+    const book = opening.inBook ? text.inBook : `${text.outOfBook} ${outOfBookMove(opening)}`;
+    return (_jsxs("section", { class: "card opening", "aria-label": text.opening, children: [_jsxs("p", { class: "family", children: [_jsx("span", { class: `book${opening.inBook ? "" : " out"}`, title: book, role: "img", "aria-label": book, children: _jsxs("svg", { class: "icon", viewBox: "0 0 24 24", "aria-hidden": "true", children: [_jsx("path", { d: "M12 6.5C10 5 7 4.5 4 5V18C7 17.5 10 18 12 19.5C14 18 17 17.5 20 18V5C17 4.5 14 5 12 6.5ZM12 6.5V19.5" }), opening.inBook ? null : _jsx("path", { d: "M3.5 3.5L20.5 20.5" })] }) }), _jsx("b", { children: opening.family })] }), opening.variation === undefined ? null : _jsx("p", { class: "variation", children: opening.variation }), opening.inBook ? null : _jsxs("p", { class: "out", children: [text.outOfBook, " ", outOfBookMove(opening)] })] }));
+}

package/dist/page/header.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "preact/jsx-runtime";
+import { Torretta } from "./torretta.js";
+/**
+ * The header, with how a game over ended (T-77), or that none goes on (D-77), or the AI's draw offer with the player's answer, the player's draw
+ * and resignation in a game going on (D-65), a new game once the page has the folder's, the command that turns the board round and says whether it is
+ * turned, the switches of the sounds and the theme, and the gear of the settings (D-56).
+ */
+export function Header({ text, verdict, kind, who, actions, onNewGame, standOut = false, onStudy, flipped, onFlip, sound, onSound, onTheme, onSettings }) {
+    return (_jsxs("header", { class: "top", children: [_jsx(Torretta, { size: 34 }), _jsx("b", { class: "title", children: "Chesspal" }), _jsxs("p", { class: `verdict${kind === undefined ? "" : ` ${kind}`}`, role: "status", children: [verdict === undefined || kind === undefined ? null : _jsx(Icon, { class: "kind", children: kindIcons[kind] }), who === undefined || verdict === undefined ? verdict : (_jsxs(_Fragment, { children: [_jsx("span", { class: "ai-name", children: who }), _jsx("span", { children: verdict })] }))] }), actions === undefined ? null : _jsx(Actions, { actions: actions, text: text }), onNewGame === undefined ? null : (_jsxs("button", { class: standOut ? "command primary" : "command", type: "button", title: text.newGame, onClick: onNewGame, children: [_jsx(Icon, { class: "new", children: _jsx("path", { d: "M12 5V19M5 12H19" }) }), _jsx("span", { children: text.newGame })] })), onStudy === undefined ? null : (_jsxs("button", { class: "command", type: "button", title: text.study.title, onClick: onStudy, children: [_jsxs(Icon, { class: "study", children: [_jsx("circle", { cx: "10.5", cy: "10.5", r: "5.5" }), _jsx("path", { d: "M14.5 14.5L20 20" })] }), _jsx("span", { children: text.study.title })] })), _jsxs("button", { class: "command", type: "button", title: text.flip, "aria-pressed": flipped, onClick: onFlip, children: [_jsx(Icon, { class: "flip", children: _jsx("path", { d: "M7 4V17M7 17L4 14M7 17L10 14M17 20V7M17 7L14 10M17 7L20 10" }) }), _jsx("span", { children: text.flip })] }), _jsx("button", { class: "theme", type: "button", title: text.sounds, "aria-label": text.sounds, "aria-pressed": sound, onClick: onSound, children: _jsxs(Icon, { class: "speaker", children: [_jsx("path", { d: "M5 9.5H8.5L13 5.5V18.5L8.5 14.5H5Z" }), sound ? _jsx("path", { d: "M16.5 9A4 4 0 0 1 16.5 15M19 6.5A7.5 7.5 0 0 1 19 17.5" }) : _jsx("path", { d: "M15.5 9L21.5 15M21.5 9L15.5 15" })] }) }), _jsxs("button", { class: "theme", type: "button", title: text.theme, "aria-label": text.theme, onClick: onTheme, children: [_jsxs(Icon, { class: "sun", children: [_jsx("circle", { cx: "12", cy: "12", r: "4" }), _jsx("path", { d: "M12 2V4M12 20V22M2 12H4M20 12H22M4.9 4.9L6.3 6.3M17.7 17.7L19.1 19.1M4.9 19.1L6.3 17.7M17.7 6.3L19.1 4.9" })] }), _jsx(Icon, { class: "moon", children: _jsx("path", { d: "M20 14.5A8 8 0 1 1 9.5 4A6.5 6.5 0 0 0 20 14.5Z" }) })] }), _jsx("button", { class: "theme", type: "button", title: text.settings, "aria-label": text.settings, onClick: onSettings, children: _jsxs(Icon, { class: "gear", children: [_jsx("circle", { cx: "12", cy: "12", r: "3" }), _jsx("path", { d: "M9.72 5.38L10.19 2.67L13.81 2.67L14.28 5.38L15.07 5.71L17.31 4.12L19.88 6.69L18.29 8.93L18.62 9.72L21.33 10.19L21.33 13.81L18.62 14.28L18.29 15.07L19.88 17.31L17.31 19.88L15.07 18.29L14.28 18.62L13.81 21.33L10.19 21.33L9.72 18.62L8.93 18.29L6.69 19.88L4.12 17.31L5.71 15.07L5.38 14.28L2.67 13.81L2.67 10.19L5.38 9.72L5.71 8.93L4.12 6.69L6.69 4.12L8.93 5.71Z" })] }) })] }));
+}
+/** The answer to the AI's draw offer while it stands, else the player's own offer; then the resignation. */
+function Actions({ actions, text }) {
+    const { offer, canOffer, onOffer, onAnswer, onResign } = actions;
+    return (_jsxs(_Fragment, { children: [offer === "ai"
+                ? (_jsxs(_Fragment, { children: [_jsxs("button", { class: "command answer", type: "button", title: text.acceptDraw, onClick: () => onAnswer(true), children: [_jsx(Icon, { class: "accept", children: _jsx("path", { d: "M5 12.5L10 17L19 7" }) }), _jsx("span", { children: text.acceptDraw })] }), _jsxs("button", { class: "command answer", type: "button", title: text.declineDrawTitle, onClick: () => onAnswer(false), children: [_jsx(Icon, { class: "decline", children: _jsx("path", { d: "M7 7L17 17M17 7L7 17" }) }), _jsx("span", { children: text.declineDraw })] })] }))
+                : (_jsxs("button", { class: "command", type: "button", title: offer === "player" ? text.drawOffered : canOffer ? text.offerDraw : text.offerDrawWhen, "aria-pressed": offer === "player", "aria-disabled": !canOffer, onClick: offer === "player" ? undefined : onOffer, children: [_jsx(Icon, { class: "half", children: _jsx("path", { d: "M5 7L7.5 5V11M16 5L8 19M13.5 14.5C13.5 13 17.5 12.5 17.5 15C17.5 16.5 13.5 18 13.5 19H18" }) }), _jsx("span", { children: text.offerDraw })] })), _jsxs("button", { class: "command", type: "button", title: text.resign, onClick: onResign, children: [_jsx(Icon, { class: "resign", children: _jsx("path", { d: "M6 21V4M6 4H18L15.5 8.5L18 13H6" }) }), _jsx("span", { children: text.resign })] })] }));
+}
+// A pair of scales, a flag, two hands, a pause.
+const kindIcons = {
+    analysis: _jsx("path", { d: "M12 4V20M8 20H16M5 7H19M5 7L2.5 13A2.5 2 0 0 0 7.5 13ZM19 7L16.5 13A2.5 2 0 0 0 21.5 13Z" }),
+    over: _jsx("path", { d: "M6 21V4M6 4H17L14.5 8L17 12H6" }),
+    offer: _jsx("path", { d: "M3 12L7 8L11 10L14 7L21 12M7 14L10 17M10 13L13 16M13 12L16 15" }),
+    idle: _jsx("path", { d: "M9 6.5V17.5M15 6.5V17.5" }),
+};
+function Icon({ class: name, children }) {
+    return _jsx("svg", { class: `icon ${name}`, viewBox: "0 0 24 24", "aria-hidden": "true", children: children });
+}

package/dist/page/helps-view.js

@@ -0,0 +1,51 @@
+/** The helps of a game's position, whatever the AI's level (D-79). */
+export function helpsOf(game) {
+    const facts = game.facts;
+    const pieces = new Map(facts.pieces.map((piece) => [piece.square, piece]));
+    const on = (square) => pieces.get(square);
+    const atRisk = (squares, why) => squares.map((square) => ({ piece: on(square), why }));
+    return {
+        toMove: game.position.turn,
+        atRisk: [...atRisk(facts.undefended, "undefended"), ...atRisk(facts.attackedByCheaper, "cheaper"), ...atRisk(facts.outnumbered, "outnumbered")],
+        pins: facts.pins.map((pin) => ({ piece: on(pin.square), by: on(pin.by), to: on(pin.to) })),
+        checks: facts.checks,
+        otherChecks: facts.otherChecks ?? [],
+        loose: facts.loose.map(on),
+        strategy: game.profile,
+    };
+}
+/** Whether the helps mark a square's piece as at risk. */
+export function atRiskOn(helps, square) {
+    return helps.atRisk.some((risk) => risk.piece.square === square);
+}
+/** The strategy's table: only the lines where a side has something; the pawn islands only when a side has more than one. */
+export function strategyOf(profile) {
+    const lines = Object.entries(cells).map(([row, cell]) => ({ row: row, white: cell(profile.white), black: cell(profile.black) }));
+    const split = profile.white.pawns.islands.length > 1 || profile.black.pawns.islands.length > 1;
+    return lines.filter((line) => line.row === "islands" ? split : something(line.white) || something(line.black));
+}
+const cells = {
+    isolated: (side) => side.pawns.isolated,
+    doubled: (side) => side.pawns.doubled,
+    backward: (side) => side.pawns.backward,
+    passed: (side) => side.pawns.passed,
+    islands: (side) => side.pawns.islands,
+    halfOpen: (side) => side.halfOpenFiles,
+    heavyOnFiles: (side) => side.heavyOnFiles,
+    onSeventh: (side) => side.onSeventh,
+    outposts: (side) => side.outposts.map((outpost) => outpost.square),
+    bishopPair: (side) => side.bishopPair,
+    space: (side) => side.space,
+    undeveloped: (side) => side.undeveloped,
+    castled: castlingOf,
+    kingAttacks: (side) => side.king?.attacksNear ?? 0,
+};
+function castlingOf(side) {
+    if (side.castled === "O-O" || side.castled === "O-O-O") {
+        return side.castled;
+    }
+    return side.castlingRights.length > 0 ? "not-yet" : side.castled === "no" ? "no-more" : "unknown";
+}
+function something(cell) {
+    return typeof cell === "object" ? cell.length > 0 : typeof cell === "number" ? cell > 0 : typeof cell === "boolean" ? cell : cell !== "unknown";
+}

package/dist/page/helps.js

@@ -0,0 +1,90 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "preact/jsx-runtime";
+// The helps on the page (D-78, Zoe's sketch B): the board says where, the card says what, the facts the AI sees at the game's level and only those.
+import { Fragment } from "preact";
+import { useState } from "preact/hooks";
+import { strategyOf } from "./helps-view.js";
+import { Figurines } from "./move-list.js";
+import { Figurine } from "./pieces.js";
+/** The corner folded in ink on a piece at risk: on the board, and before its line in the card. */
+export function Notch() {
+    return (_jsx("span", { class: "help-notch", "aria-hidden": "true", children: _jsxs("svg", { viewBox: "0 0 10 10", children: [_jsx("path", { d: "M0.5 0.5V9.5H9.5Z" }), _jsx("circle", { cx: "2.9", cy: "7.1", r: "1.1" })] }) }));
+}
+/**
+ * The helps' card, between the opening and the moves: the tactics in lines, the strategy in a table and the control map, seen while its button
+ * or M is held. A line under the pointer lights its squares on the board.
+ */
+export function HelpsCard({ helps, onPoint, onMap, mapping, text }) {
+    const [tab, setTab] = useState("tactics");
+    const words = text.helpsCard;
+    return (_jsxs("section", { class: "card helps-card", "aria-label": words.title, children: [_jsx("h3", { class: "helps-title", children: words.title }), _jsxs("div", { class: "tabs", role: "tablist", children: [_jsx("button", { type: "button", role: "tab", "aria-selected": tab === "tactics", onClick: () => setTab("tactics"), children: words.tactics }), _jsx("button", { type: "button", role: "tab", "aria-selected": tab === "strategy", onClick: () => setTab("strategy"), children: words.strategy }), _jsx(MapButton, { mapping: mapping, onMap: onMap, held: true, text: text })] }), tab === "tactics" ? _jsx(Tactics, { helps: helps, onPoint: onPoint, text: text }) : _jsx(Strategy, { profile: helps.strategy, text: text })] }));
+}
+/**
+ * The map's button (D-78): the mouse holds it to see the map; a finger, or the keyboard, turns it on and off. In the card's tabs it says it is held; on a
+ * phone it sits under the board.
+ */
+export function MapButton({ mapping, onMap, held, text }) {
+    // A click carries its pointer's type: none from the keyboard.
+    const mouse = (event) => event instanceof PointerEvent && event.pointerType === "mouse";
+    return (_jsxs("button", { type: "button", class: "map-button", "aria-pressed": mapping, title: text.helpsCard.mapHint, onPointerDown: (event) => mouse(event) && onMap(true), onPointerUp: (event) => mouse(event) && onMap(false), onPointerLeave: (event) => mouse(event) && onMap(false), onClick: (event) => !mouse(event) && onMap(!mapping), children: [_jsxs("svg", { viewBox: "0 0 16 16", "aria-hidden": "true", children: [_jsx("path", { d: "M2 2h5v5H2zM9 9h5v5H9z" }), _jsx("path", { d: "M9 2h5v5H9zM2 9h5v5H2z", opacity: ".35" })] }), text.helpsCard.map, held ? _jsxs("small", { children: ["(", text.helpsCard.hold, ")"] }) : null] }));
+}
+function Tactics({ helps, onPoint, text }) {
+    const words = text.helpsCard;
+    // A row lights its squares while the pointer is on it; a touch keeps them lit until the position changes, as a square in the AI's words (T-111).
+    const point = (squares) => ({
+        onPointerEnter: () => onPoint(squares),
+        onPointerLeave: (event) => event.pointerType === "mouse" && onPoint([]),
+    });
+    const other = helps.toMove === "white" ? "black" : "white";
+    const loose = helps.loose.map((piece) => piece.square);
+    return (_jsxs("ul", { class: "help-rows", children: [helps.atRisk.map(({ piece, why }) => (_jsxs("li", { class: "points", ...point([piece.square, ...piece.attackers]), children: [_jsx(Notch, {}), text.piece(piece.piece, piece.side), " ", _jsx(Squares, { squares: [piece.square] }), " \u00B7 ", words.attackers, ": ", _jsx(Squares, { squares: piece.attackers }), why === "undefended" ? null : (_jsxs(_Fragment, { children: [" ", "\u00B7 ", words.defenders, ": ", _jsx(Squares, { squares: piece.defenders })] })), " \u00B7 ", words[why]] }, `risk ${piece.square}`))), helps.pins.map(({ piece, by, to }) => (_jsxs("li", { class: "points", ...point([piece.square, by.square, to.square]), children: [_jsx("span", { class: "row-icon", "aria-hidden": "true", children: "\u26D3" }), text.piece(piece.piece, piece.side), " ", _jsx(Squares, { squares: [piece.square] }), " ", words.pinnedTo(to.piece), " ", _jsx(Squares, { squares: [to.square] }), ", ", words.pinnedBy(by.piece), " ", _jsx(Squares, { squares: [by.square] })] }, `pin ${piece.square}`))), helps.atRisk.length === 0 && helps.pins.length === 0 ? _jsx("li", { class: "quiet", children: words.nothingAtRisk }) : null, helps.checks.length === 0 ? null : _jsx(Checks, { name: words.checks(helps.toMove, true), checks: helps.checks, side: helps.toMove }), helps.otherChecks.length === 0 ? null : _jsx(Checks, { name: words.checks(other, false), checks: helps.otherChecks, side: other }), loose.length === 0 ? null : (_jsxs("li", { class: "points quiet", ...point(loose), children: [words.loose, ": ", _jsx(Pieces, { pieces: helps.loose.filter((piece) => piece.side === "white") }), _jsx(Pieces, { pieces: helps.loose.filter((piece) => piece.side === "black") })] }, "loose"))] }));
+}
+/** A side's checks in SAN, drawn with the move list's figures (D-50). */
+function Checks({ name, checks, side }) {
+    return (_jsxs("li", { children: [_jsx("span", { class: "row-icon", "aria-hidden": "true", children: "+" }), name, ": ", checks.map((check) => (_jsx("span", { class: "help-move", children: _jsx(Figurines, { san: check, side: side }) }, check)))] }));
+}
+/** Pieces of one side, each its figure and its square. */
+function Pieces({ pieces }) {
+    return pieces.length === 0 ? null : (_jsx("span", { class: "help-pieces", children: pieces.map((piece) => (_jsxs("span", { class: "help-move", children: [_jsx(Figurine, { letter: piece.piece, side: piece.side }), _jsx("b", { class: "square-name", children: piece.square })] }, piece.square))) }));
+}
+function Squares({ squares }) {
+    return _jsx("b", { class: "square-name", children: squares.join(", ") });
+}
+function Strategy({ profile, text }) {
+    const words = text.helpsCard;
+    const files = profile.openFiles.length === 0 ? "–" : profile.openFiles.join(", ");
+    const { draw, pawnEnding } = profile;
+    // A name's meaning shows under its line at a click or a tap, since a phone has no pointer for the title (Rosa, T-117).
+    const [explained, setExplained] = useState(undefined);
+    const notes = [
+        words.openFiles(files),
+        words.controlled(profile.controlled.white, profile.controlled.black, profile.controlled.contested),
+        words.phases[profile.phase],
+        profile.oppositeBishops ? words.oppositeBishops : undefined,
+        draw.repetitions > 1 ? words.repetitions(draw.repetitions) : undefined,
+        draw.fiftyMovesLeft <= fiftyMovesShown ? words.fiftyMoves(draw.fiftyMovesLeft) : undefined,
+        draw.insufficient ? words.insufficient : undefined,
+        ...(pawnEnding?.squares ?? []).map((square) => words.pawnSquare(square.pawn, square.caught)),
+        pawnEnding?.opposition === undefined ? undefined : words.opposition(pawnEnding.opposition),
+    ];
+    return (_jsxs("div", { class: "strategy", children: [_jsxs("table", { class: "profile-table", children: [_jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", {}), _jsx("th", { children: words.white }), _jsx("th", { children: words.black })] }) }), _jsx("tbody", { children: strategyOf(profile).map((line) => {
+                            const [name, meaning] = words.rows[line.row];
+                            const open = explained === line.row;
+                            return (_jsxs(Fragment, { children: [_jsxs("tr", { children: [_jsx("th", { children: _jsx("button", { type: "button", class: "term", title: meaning, "aria-expanded": open, onClick: () => setExplained(open ? undefined : line.row), children: name }) }), _jsx("td", { children: cellText(line.white, words) }), _jsx("td", { children: cellText(line.black, words) })] }), open
+                                        ? (_jsx("tr", { class: "meaning", children: _jsx("td", { colSpan: 3, children: meaning }) }))
+                                        : null] }, line.row));
+                        }) })] }), _jsx("p", { class: "profile-foot", children: notes.filter((note) => note !== undefined).join(" · ") })] }));
+}
+// The fifty-move count shows only when the draw is near: ten moves each, or less.
+const fiftyMovesShown = 20;
+function cellText(cell, words) {
+    if (typeof cell === "object") {
+        return cell.length === 0 ? "–" : cell.join(", ");
+    }
+    if (typeof cell === "number") {
+        return String(cell);
+    }
+    if (typeof cell === "boolean") {
+        return cell ? words.yes : "–";
+    }
+    return cell === "not-yet" ? words.notYet : cell === "no-more" ? words.noMore : cell === "unknown" ? "–" : cell;
+}

package/dist/page/main.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "preact/jsx-runtime";
+// The page's start: the settings this browser remembers, shown before the first frame, then the app drawn into its place.
+import { render } from "preact";
+import { App } from "./app.js";
+import { loadSettings, showSettings } from "./settings.js";
+const settings = loadSettings();
+showSettings(settings);
+render(_jsx(App, { start: settings }), document.getElementById("app"));

package/dist/page/model-name.js

@@ -0,0 +1,20 @@
+// A model's name as the player says it, on the AI's card and under its analysis (D-81, D-82): the game's PGN keeps the id the host wrote.
+/** Who played or reviewed, as the page signs it: the model's name and the effort in the host's word, no other words (Stefano), «Opus 5.5 · xhigh». */
+export function signature(model, effort) {
+    return effort === undefined ? modelName(model) : `${modelName(model)} · ${effort}`;
+}
+/**
+ * The name of a Claude model, from its id however the host writes it: claude-opus-5-5, us.anthropic.claude-opus-5-5-20261101-v1:0 and
+ * claude-opus-5-5@20261101 are Opus 5.5, claude-3-5-sonnet-20241022 is Sonnet 3.5; an id of another model stays as it is.
+ */
+export function modelName(id) {
+    const [, family, major, minor] = currentId.exec(id) ?? [];
+    const [, oldMajor, oldMinor, oldFamily] = family === undefined ? oldId.exec(id) ?? [] : [];
+    const name = family ?? oldFamily;
+    const version = [major ?? oldMajor, minor ?? oldMinor].filter((part) => part !== undefined).join(".");
+    return name === undefined ? id : `${name[0].toUpperCase()}${name.slice(1).toLowerCase()} ${version}`;
+}
+// The family, then the version, whose minor never runs into the date after it: claude-opus-4-20250514 is Opus 4.
+const currentId = /claude-(opus|sonnet|haiku|fable)-(\d{1,2})(?:-(\d{1,2}))?(?!\d)/i;
+// Before the fourth generation the version came first.
+const oldId = /claude-(\d)(?:-(\d))?-(opus|sonnet|haiku)/i;

package/dist/page/move-list.js

@@ -0,0 +1,68 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "preact/jsx-runtime";
+import { useEffect, useRef } from "preact/hooks";
+import { BadgeIcon, NoteIcon } from "./badges.js";
+import { Figurine } from "./pieces.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, text }) {
+    const list = useRef(null);
+    const rows = rowsOf(plies);
+    const current = plies[shown - 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]);
+    // 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;
+        if (element === null) {
+            return;
+        }
+        const observer = new ResizeObserver(() => keepInSight(element));
+        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 });
+    return (_jsxs("div", { ref: list, class: "moves card", role: "region", "aria-label": text.moves, 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 })] }));
+}
+/** 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 }) {
+    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)] }));
+}
+function Move({ ply, current, 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] }));
+}
+/** 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)) }));
+}
+/** Scrolls the list, and only the list, as little as it takes to show its current move. */
+function keepInSight(list) {
+    const box = list?.getBoundingClientRect();
+    const move = list?.querySelector(".current")?.getBoundingClientRect();
+    if (box === undefined || move === undefined) {
+        return;
+    }
+    list.scrollTop += Math.min(0, move.top - box.top) + Math.max(0, move.bottom - box.bottom);
+}
+/** The plies in rows of one number: White's move and Black's. */
+function rowsOf(plies) {
+    const rows = [];
+    for (const ply of plies) {
+        let row = rows.at(-1);
+        if (row?.number !== ply.number) {
+            row = { number: ply.number };
+            rows.push(row);
+        }
+        row[ply.side] = ply;
+    }
+    return rows;
+}

package/dist/page/new-game-dialog.js

@@ -0,0 +1,42 @@
+import { jsx as _jsx, jsxs as _jsxs } from "preact/jsx-runtime";
+import { useState } from "preact/hooks";
+import { aiLevels } from "../core/index.js";
+import { Dialog } from "./dialog.js";
+import { Piece } from "./pieces.js";
+/** The clocks offered: long enough for an AI that takes 10 to 30 seconds a move (D-13), with the seconds added at each move. */
+export const clocks = ["10+5", "15+10", "30+20"];
+/** The dialog the + opens, with the choices of the game before; the game going on, if any, goes to the archive unfinished when the new one starts. */
+export function NewGameDialog({ open, choice, going, onStart, onClose, text }) {
+    return (_jsx(Dialog, { open: open, title: text.newGame, onClose: onClose, text: text, children: _jsx(NewGameForm, { choice: choice, going: going, onStart: onStart, text: text }) }));
+}
+const colours = ["white", "black", "random"];
+/** The colours by their king, the chosen set's silhouette in fixed colours, which both themes show (T-94); either colour by both kings. */
+const colourIcons = {
+    white: _jsx(Piece, { letter: "K", small: true }),
+    black: _jsx(Piece, { letter: "k", small: true }),
+    random: (_jsxs("span", { class: "kings", children: [_jsx(Piece, { letter: "K", small: true }), _jsx(Piece, { letter: "k", small: true })] })),
+};
+/** A clock face with the minutes each side has filled in, as a slice of the hour; with no minutes, the face crossed out: a game without a clock. */
+function ClockIcon({ minutes }) {
+    const angle = Math.min(minutes ?? 0, 59.9) / 60 * 2 * Math.PI;
+    const end = `${(12 + 8 * Math.sin(angle)).toFixed(2)} ${(12 - 8 * Math.cos(angle)).toFixed(2)}`;
+    return (_jsxs("svg", { class: "icon clock-icon", viewBox: "0 0 24 24", "aria-hidden": "true", children: [_jsx("circle", { cx: "12", cy: "12", r: "8" }), minutes === undefined ? _jsx("path", { d: "M5 19L19 5" }) : _jsx("path", { class: "slice", d: `M12 12V4A8 8 0 ${angle > Math.PI ? 1 : 0} 1 ${end}Z` })] }));
+}
+/** The form, made again at each opening with the choices it starts from. */
+function NewGameForm({ choice, going, onStart, text }) {
+    const words = text.start;
+    const [colour, setColour] = useState(choice.colour);
+    const [level, setLevel] = useState(choice.level);
+    const [clock, setClock] = useState(choice.clock);
+    // A clock of the game before that the dialog does not offer, such as one asked in the chat, is offered too.
+    const offered = choice.clock === undefined || clocks.includes(choice.clock) ? clocks : [...clocks, choice.clock];
+    const start = (event) => {
+        event.preventDefault();
+        onStart({ colour, level, ...(clock === undefined ? {} : { clock }) });
+    };
+    return (_jsxs("form", { class: "profile-form new-game", onSubmit: start, children: [_jsxs("fieldset", { children: [_jsx("legend", { children: words.colour }), _jsx("div", { class: "row", children: colours.map((id) => _jsx(Option, { group: "colour", on: colour === id, onPick: () => setColour(id), label: words.colours[id], icon: colourIcons[id], first: choice.colour === id }, id)) })] }), _jsxs("fieldset", { children: [_jsx("legend", { children: words.level }), _jsx("div", { class: "levels", children: aiLevels.map((id) => _jsx(Option, { group: "level", on: level === id, onPick: () => setLevel(id), label: words.levels[id][0], note: words.levels[id][1] }, id)) }), _jsx("p", { class: "sees", "aria-live": "polite", children: words.levels[level][2] })] }), _jsxs("fieldset", { children: [_jsxs("legend", { children: [words.clock, " ", _jsx("small", { children: words.clockNote })] }), _jsxs("div", { class: "row", children: [_jsx(Option, { group: "clock", on: clock === undefined, onPick: () => setClock(undefined), label: words.noClock, icon: _jsx(ClockIcon, {}) }), offered.map((id) => _jsx(Option, { group: "clock", on: clock === id, onPick: () => setClock(id), label: id, icon: _jsx(ClockIcon, { minutes: Number(id.split("+")[0]) }) }, id))] })] }), going ? _jsx("p", { class: "note", children: words.abandons }) : null, _jsx("button", { class: "start", type: "submit", children: words.start })] }));
+}
+/** One choice of a group, as the levels of the profile's form show them: an icon over its label, or a note under it; the `first` takes the focus when the dialog opens. */
+function Option({ group, on, onPick, label, note, icon, first = false }) {
+    return (_jsxs("label", { class: "level", children: [_jsx("input", { type: "radio", name: group, checked: on, onChange: onPick, autofocus: first }), _jsxs("span", { children: [icon, _jsx("b", { children: label }), note === undefined ? null : _jsx("small", { children: note })] })] }));
+}

package/dist/page/opening-book.js

@@ -0,0 +1,14 @@
+// The book of the openings (D-16), fetched once the game has a move: the page names the opening itself, from the moves it replays.
+import { useEffect, useState } from "preact/hooks";
+let fetched;
+/** The book, once it is needed and has come; undefined before, or when it cannot be had. */
+export function useOpeningBook(needed) {
+    const [book, setBook] = useState(undefined);
+    useEffect(() => {
+        if (needed && book === undefined) {
+            fetched ??= fetch("/core/openings.json").then((response) => response.ok ? response.json() : undefined).catch(() => undefined);
+            void fetched.then(setBook);
+        }
+    }, [needed]);
+    return book;
+}