chesspal 0.3.1 → 0.3.3

package/dist/page/dialogs/settings.js

@@ -1,10 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "preact/jsx-runtime";
-import { useEffect, useRef } from "preact/hooks";
+import { useEffect, useRef, useState } from "preact/hooks";
 import { Piece } from "../pieces/pieces.js";
 import { looks, pieceSets } from "../profile/settings.js";
+import { hasVoice, onVoices } from "../talk/voice.js";
 /** The panel of the settings, open while `open` is true: every change goes to `onChange` at once. */
 export function SettingsPanel({ open, settings, onChange, onClose, text }) {
     const dialog = useRef(null);
+    const voiced = useVoiced(text.language);
     useEffect(() => {
         const element = dialog.current;
         if (open && !element.open) {
@@ -15,7 +17,7 @@ export function SettingsPanel({ open, settings, onChange, onClose, text }) {
         }
     }, [open]);
     const set = (key, value) => onChange({ ...settings, [key]: value });
-    return (_jsxs("dialog", { ref: dialog, class: "dialog", "aria-label": text.settings, onClose: onClose, onClick: (event) => event.target === dialog.current && onClose(), children: [_jsxs("header", { children: [_jsx("h2", { children: text.settings }), _jsx("button", { class: "icon-button", 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" }) }) })] }), _jsxs("div", { class: "setting-columns", children: [_jsxs(Section, { title: text.look, icon: lookIcon, children: [_jsxs("div", { class: "setting-group", children: [_jsx("p", { class: "setting-label", children: text.themeChoice }), _jsx(Segments, { label: text.themeChoice, children: ["system", "light", "dark"].map((theme) => _jsx(Choice, { on: settings.theme === theme, onPick: () => set("theme", theme), children: text.themes[theme] }, theme)) })] }), _jsxs("div", { class: "setting-group", children: [_jsxs("p", { class: "setting-label", children: [text.boardSkin, " ", _jsx("b", { children: nameOf(settings.board, text) })] }), _jsx(Swatches, { look: "board", label: text.boardSkin, settings: settings, onPick: (id) => set("board", id), text: text })] }), _jsxs("div", { class: "setting-group", children: [_jsx("p", { class: "setting-label", children: text.pieceSet }), _jsx("div", { class: "piece-sets", role: "radiogroup", "aria-label": text.pieceSet, children: pieceSets.map((pieceSet) => (_jsxs(Choice, { on: settings.set === pieceSet, onPick: () => set("set", pieceSet), children: [_jsxs("span", { class: "sample", children: [_jsx(Piece, { letter: "N", set: pieceSet }), _jsx(Piece, { letter: "n", set: pieceSet })] }), nameOf(pieceSet, text)] }, pieceSet))) })] }), _jsxs("div", { class: "setting-group setting-pair", children: [_jsxs("div", { children: [_jsx("p", { class: "setting-label", children: text.pieceColours }), _jsx(Swatches, { look: "pieces", label: text.pieceColours, settings: settings, onPick: (id) => set("pieces", id), text: text })] }), _jsxs("div", { children: [_jsx("p", { class: "setting-label", children: text.marksColour }), _jsx(Swatches, { look: "marks", label: text.marksColour, settings: settings, onPick: (id) => set("marks", id), text: text })] })] })] }), _jsxs("div", { class: "setting-column", children: [_jsxs(Section, { title: text.play, icon: playIcon, children: [_jsx(Switch, { on: settings.dots, onSwitch: (on) => set("dots", on), children: text.dots }), _jsx(Switch, { on: settings.squareNames, onSwitch: (on) => set("squareNames", on), children: text.squareNames }), _jsx(Switch, { on: settings.explain, onSwitch: (on) => set("explain", on), children: text.explain }), _jsx(Switch, { on: settings.book, onSwitch: (on) => set("book", on), children: text.bookBadges }), _jsx(Switch, { on: settings.helps, onSwitch: (on) => set("helps", on), children: text.helps }), _jsx(Switch, { on: settings.sound, onSwitch: (on) => set("sound", on), children: text.sounds }), _jsx(Switch, { on: settings.voice, onSwitch: (on) => set("voice", on), children: text.voice })] }), _jsx(Section, { title: text.languageChoice, icon: languageIcon, children: _jsx(Segments, { label: text.languageChoice, children: ["auto", "it", "en"].map((language) => _jsx(Choice, { on: settings.language === language, onPick: () => set("language", language), children: text.languages[language] }, language)) }) })] })] })] }));
+    return (_jsxs("dialog", { ref: dialog, class: "dialog", "aria-label": text.settings, onClose: onClose, onClick: (event) => event.target === dialog.current && onClose(), children: [_jsxs("header", { children: [_jsx("h2", { children: text.settings }), _jsx("button", { class: "icon-button", 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" }) }) })] }), _jsxs("div", { class: "setting-columns", children: [_jsxs(Section, { title: text.look, icon: lookIcon, children: [_jsxs("div", { class: "setting-group", children: [_jsx("p", { class: "setting-label", children: text.themeChoice }), _jsx(Segments, { label: text.themeChoice, children: ["system", "light", "dark"].map((theme) => _jsx(Choice, { on: settings.theme === theme, onPick: () => set("theme", theme), children: text.themes[theme] }, theme)) })] }), _jsxs("div", { class: "setting-group", children: [_jsxs("p", { class: "setting-label", children: [text.boardSkin, " ", _jsx("b", { children: nameOf(settings.board, text) })] }), _jsx(Swatches, { look: "board", label: text.boardSkin, settings: settings, onPick: (id) => set("board", id), text: text })] }), _jsxs("div", { class: "setting-group", children: [_jsx("p", { class: "setting-label", children: text.pieceSet }), _jsx("div", { class: "piece-sets", role: "radiogroup", "aria-label": text.pieceSet, children: pieceSets.map((pieceSet) => (_jsxs(Choice, { on: settings.set === pieceSet, onPick: () => set("set", pieceSet), children: [_jsxs("span", { class: "sample", children: [_jsx(Piece, { letter: "N", set: pieceSet }), _jsx(Piece, { letter: "n", set: pieceSet })] }), nameOf(pieceSet, text)] }, pieceSet))) })] }), _jsxs("div", { class: "setting-group setting-pair", children: [_jsxs("div", { children: [_jsx("p", { class: "setting-label", children: text.pieceColours }), _jsx(Swatches, { look: "pieces", label: text.pieceColours, settings: settings, onPick: (id) => set("pieces", id), text: text })] }), _jsxs("div", { children: [_jsx("p", { class: "setting-label", children: text.marksColour }), _jsx(Swatches, { look: "marks", label: text.marksColour, settings: settings, onPick: (id) => set("marks", id), text: text })] })] })] }), _jsxs("div", { class: "setting-column", children: [_jsxs(Section, { title: text.play, icon: playIcon, children: [_jsx(Switch, { on: settings.dots, onSwitch: (on) => set("dots", on), children: text.dots }), _jsx(Switch, { on: settings.squareNames, onSwitch: (on) => set("squareNames", on), children: text.squareNames }), _jsx(Switch, { on: settings.explain, onSwitch: (on) => set("explain", on), children: text.explain }), _jsx(Switch, { on: settings.book, onSwitch: (on) => set("book", on), children: text.bookBadges }), _jsx(Switch, { on: settings.helps, onSwitch: (on) => set("helps", on), children: text.helps }), _jsx(Switch, { on: settings.sound, onSwitch: (on) => set("sound", on), children: text.sounds }), _jsx(Switch, { on: settings.voice, onSwitch: (on) => set("voice", on), ...(voiced ? {} : { unavailable: text.noVoice }), children: text.voice })] }), _jsx(Section, { title: text.languageChoice, icon: languageIcon, children: _jsx(Segments, { label: text.languageChoice, children: ["auto", "it", "en"].map((language) => _jsx(Choice, { on: settings.language === language, onPick: () => set("language", language), children: text.languages[language] }, language)) }) })] })] })] }));
 }
 // The sections' line icons: a palette, a pawn, a globe.
 const lookIcon = (_jsxs(_Fragment, { children: [_jsx("path", { d: "M12 3a9 9 0 1 0 0 18c1.2 0 1.8-.8 1.8-1.7 0-1.2-1-1.6-1-2.6 0-1 .8-1.7 1.8-1.7H17a4 4 0 0 0 4-4C21 6.5 17 3 12 3Z" }), _jsx("circle", { cx: "7.5", cy: "11", r: "1.2" }), _jsx("circle", { cx: "10", cy: "7", r: "1.2" }), _jsx("circle", { cx: "14.5", cy: "7", r: "1.2" })] }));
@@ -34,8 +36,20 @@ function Segments({ label, children }) {
 function Choice({ on, onPick, children }) {
     return (_jsx("button", { type: "button", role: "radio", "aria-checked": on, onClick: onPick, children: children }));
 }
-function Switch({ on, onSwitch, children }) {
-    return (_jsxs("label", { class: "switch", children: [_jsx("span", { children: children }), _jsx("input", { type: "checkbox", role: "switch", checked: on, onChange: (event) => onSwitch(event.currentTarget.checked) })] }));
+/** A switch; one that cannot be used here is off and disabled, and its tooltip says why. */
+function Switch({ on, onSwitch, unavailable, children }) {
+    const usable = unavailable === undefined;
+    return (_jsxs("label", { class: "switch", title: unavailable, children: [_jsx("span", { children: children }), _jsx("input", { type: "checkbox", role: "switch", checked: on && usable, disabled: !usable, title: unavailable, onChange: (event) => onSwitch(event.currentTarget.checked) })] }));
+}
+/** Whether the browser has a voice for the language, looked at again whenever its voices change. */
+function useVoiced(language) {
+    const [voiced, setVoiced] = useState(() => hasVoice(language));
+    useEffect(() => {
+        const look = () => setVoiced(hasVoice(language));
+        look();
+        return onVoices(look);
+    }, [language]);
+    return voiced;
 }
 function nameOf(id, text) {
     return text.names[id] ?? id;

package/dist/page/game/column.js

@@ -14,7 +14,7 @@ export function GameColumn({ plies, result, how, lit, started, move, toMove, ope
     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: [_jsx(GameCard, { plies: plies, result: result, how: how, lit: lit, started: started, move: move, toMove: toMove, bar: bar, text: text }), analysis === undefined || standings === undefined ? null : _jsx(LeadChart, { plies: plies, standings: standings, shown: shownPlies, onShow: onShow, text: text }), opening === undefined ? null : _jsx(OpeningCard, { opening: opening, text: text }), helps, 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)] })), 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("p", { class: "card review waiting", role: "status", children: [_jsx("span", { class: "spinner", "aria-hidden": "true" }), text.reviewing(analysis.by)] })), analysis?.onComplete === undefined ? null : (_jsxs("div", { class: "card review incomplete", children: [_jsx("p", { role: "status", children: text.incomplete }), _jsx("button", { type: "button", title: text.completeHint, "aria-label": text.completeHint, onClick: analysis.onComplete, children: text.complete })] })), analysis === undefined || standings === undefined ? null : _jsx(LeadChart, { plies: plies, standings: standings, shown: shownPlies, onShow: onShow, text: text }), opening === undefined ? null : _jsx(OpeningCard, { opening: opening, 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 })] })] })) }));
 }
 /** 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

@@ -320,6 +320,27 @@
     color: var(--soft);
 }
 
+/* A review nobody is finishing: the note, and beside it the button that brings the game back to the AI (D-109); neutral, as no error (Zoe) */
+.review.incomplete,
+.say.incomplete {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 8px;
+    margin: 0;
+    color: var(--soft);
+}
+
+.review.incomplete button,
+.say.incomplete button {
+    flex: none;
+}
+
+/* On the bubble's tint the button keeps the card's ground, to read as one */
+.say.incomplete button {
+    background: var(--card);
+}
+
 .review ul {
     margin: 0;
     padding-left: 18px;
@@ -497,7 +518,8 @@
     padding: 8px;
 }
 
-.analysis-actions button {
+.analysis-actions button,
+.incomplete button {
     flex: 1;
     display: inline-flex;
     align-items: center;
@@ -513,7 +535,8 @@
     cursor: pointer;
 }
 
-.analysis-actions button:hover {
+.analysis-actions button:hover,
+.incomplete button:hover {
     border-color: var(--accent);
 }
 
@@ -584,6 +607,6 @@
 }
 
 /* The saves and the steps stay at the foot of the column, with the moves folded too (Stefano) */
-.side > .moves-card + * {
+.side-foot > .moves-card + * {
     margin-top: auto;
 }

package/dist/page/guide/blocks.js

@@ -1,4 +1,5 @@
-// The markdown the guide is written in, read into blocks: headings, paragraphs, lists, tables, quotes, code; its comments left out. markdown.tsx draws them.
+// The markdown the guide is written in, read into blocks: headings, paragraphs, lists, tables, quotes, code and drawings; its comments left out. markdown.tsx
+// draws them.
 // Copied from rpg-engine's guide (src/dashboard/help/blocks.ts), without the headings' icons and the cards' previews.
 /** The blocks of a markdown text. */
 export function markdownBlocks(text) {
@@ -16,9 +17,14 @@ export function markdownBlocks(text) {
     };
     for (let line = lines[index]; line !== undefined; line = lines[index]) {
         const heading = /^(#{1,6})\s+(.*?)\s*$/.exec(line);
+        const drawing = drawingOf(line);
         if (line.trim() === "") {
             index += 1;
         }
+        else if (drawing !== undefined) {
+            blocks.push(drawing);
+            index += 1;
+        }
         else if (heading !== null) {
             blocks.push({ kind: "heading", level: heading[1]?.length ?? 1, text: heading[2] ?? "" });
             index += 1;
@@ -46,7 +52,7 @@ export function markdownBlocks(text) {
             blocks.push({ kind: "list", ordered, items: items.reduce((all, one) => (listItem(one) === undefined ? [...all.slice(0, -1), `${all.at(-1) ?? ""} ${one.trim()}`] : [...all, listItem(one)?.text ?? ""]), []) });
         }
         else {
-            const paragraph = run((one) => one.trim() !== "" && !/^(#{1,6}\s|```|>|\|)/.test(one) && listItem(one) === undefined);
+            const paragraph = run((one) => one.trim() !== "" && !/^(#{1,6}\s|```|>|\|)/.test(one) && listItem(one) === undefined && drawingOf(one) === undefined);
             blocks.push({ kind: "paragraph", text: paragraph.map((one) => one.trim()).join(" ") });
         }
     }
@@ -56,6 +62,11 @@ export function markdownBlocks(text) {
 export function anchorOf(heading) {
     return heading.trim().toLowerCase().replace(/[^\p{L}\p{N}\s_-]/gu, "").replace(/\s/g, "-");
 }
+/** A drawing on a line of its own: ![what it shows](its name); undefined for another line. */
+function drawingOf(line) {
+    const drawing = /^!\[([^\]]*)\]\(([\w-]+)\)$/.exec(line.trim());
+    return drawing === null ? undefined : { kind: "drawing", name: drawing[2] ?? "", alt: drawing[1] ?? "" };
+}
 /** A list item's mark and text: - text, or 1. text; undefined for another line. */
 function listItem(line) {
     const item = /^([-*]|\d+\.)\s+(.*)$/.exec(line);

package/dist/page/guide/credits.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "preact/jsx-runtime";
+import { Inline } from "./markdown.js";
+/** The credits' page of the guide, under the title the guide gives every page. */
+export function GuideCredits({ text }) {
+    return (_jsx("ul", { children: text.guide.creditLines.map((line) => (_jsx("li", { children: _jsx(Inline, { text: line, go: () => undefined }) }, line))) }));
+}

package/dist/page/guide/drawings/analysis.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "preact/jsx-runtime";
+// Looking back at a game: the moves with their judgements, the one shown on the board in gold, and the bar of steps to the start, back, on and to the end
+import { Badge, Bar, Board, Card, Chevron, Pieces, Square } from "./parts.js";
+const grid = { x: 16, y: 10, cell: 25 };
+const position = ["r...r.k.", "pp...ppp", "..n.....", "...p....", "...P.B..", "..N..Q..", "PP...PPP", "R....RK."];
+/** The board at a move judged a mistake, the Moves card and the steps under it. */
+export function Analysis() {
+    return (_jsxs("svg", { class: "guide-art", viewBox: "0 0 480 220", "aria-hidden": "true", children: [_jsxs(Board, { grid: grid, children: [_jsx(Square, { grid: grid, file: 3, rank: 1, class: "last" }), _jsx(Square, { grid: grid, file: 5, rank: 3, class: "last" }), _jsx(Pieces, { grid: grid, ranks: position })] }), _jsx(Badge, { x: 163, y: 138, r: 6.5, kind: "mistake" }), _jsx(Card, { x: 236, y: 10, width: 228, height: 134 }), _jsx(Bar, { x: 248, y: 20.5, width: 48, strong: true }), _jsx("rect", { class: "quote", x: "242", y: "34", width: "216", height: "20", rx: "4" }), _jsx(Move, { y: 34, white: "best" }), _jsx(Move, { y: 58, black: "mistake" }), _jsx("rect", { class: "quote", x: "242", y: "82", width: "216", height: "20", rx: "4" }), _jsx(Move, { y: 82, white: "blunder", black: "best" }), _jsx("rect", { class: "last", x: "258", y: "108", width: "66", height: "16", rx: "4" }), _jsx(Move, { y: 106, white: "mistake", shown: true }), _jsx(Card, { x: 236, y: 156, width: 228, height: 54 }), _jsxs("g", { class: "accent-line", children: [_jsx("path", { d: "M259 177V189" }), _jsx(Chevron, { x: 268, y: 183, size: 12, left: true }), _jsx(Chevron, { x: 321.5, y: 183, size: 12, left: true }), _jsx(Chevron, { x: 378.5, y: 183, size: 12 }), _jsx(Chevron, { x: 432, y: 183, size: 12 }), _jsx("path", { d: "M441 177V189" })] })] }));
+}
+/** A row of the moves: its number, White's move and Black's, each with its badge if it has one; `shown` when White's is the one on the board. */
+function Move({ y, white, black, shown = false }) {
+    return (_jsxs("g", { children: [_jsx(Bar, { x: 246, y: y + 7.5, width: 8 }), _jsx(Bar, { x: 264, y: y + 7.5, width: 36, strong: true, class: shown ? "bar on-last" : undefined }), white !== undefined && _jsx(Badge, { x: 312, y: y + 10, r: 6, kind: white }), _jsx(Bar, { x: 350, y: y + 7.5, width: 36, strong: true }), black !== undefined && _jsx(Badge, { x: 398, y: y + 10, r: 6, kind: black })] }));
+}

package/dist/page/guide/drawings/drawings.css

@@ -0,0 +1,329 @@
+/* The guide's drawings (Zoe): sketches of the page on its own ground, every colour from the theme, so one drawing serves light and dark */
+
+.guide-drawing {
+    max-width: 520px;
+    margin: 6px auto 16px;
+    overflow: hidden;
+    border: 1px solid var(--line);
+    border-radius: var(--radius);
+    background: var(--page);
+}
+
+.guide-art {
+    display: block;
+    width: 100%;
+    height: auto;
+    aspect-ratio: 480 / 220;
+}
+
+/* The page's cards and what is written on them, as bars */
+.guide-art .paper {
+    fill: var(--card);
+    stroke: var(--line);
+    stroke-width: 1.5;
+}
+
+.guide-art .quote {
+    fill: var(--quote);
+}
+
+.guide-art .words {
+    fill: var(--say);
+}
+
+.guide-art .field {
+    fill: var(--page);
+    stroke: var(--line);
+    stroke-width: 1.5;
+}
+
+.guide-art .bar {
+    fill: color-mix(in oklab, var(--soft) 45%, var(--card));
+}
+
+.guide-art .bar.strong {
+    fill: color-mix(in oklab, var(--ink) 70%, var(--card));
+}
+
+.guide-art .bar.on-words {
+    fill: color-mix(in oklab, var(--say-ink) 55%, var(--say));
+}
+
+.guide-art .rule {
+    stroke: var(--line);
+    stroke-width: 1.5;
+}
+
+.guide-art .bullet {
+    fill: color-mix(in oklab, var(--soft) 60%, var(--card));
+}
+
+.guide-art .button,
+.guide-art .soft-line {
+    fill: none;
+    stroke: var(--soft);
+    stroke-width: 1.5;
+    stroke-linecap: round;
+}
+
+/* What the page speaks of, in the accent */
+.guide-art .accent {
+    fill: var(--accent);
+}
+
+.guide-art .bar.on-last {
+    fill: color-mix(in oklab, var(--fixed-ink) 70%, transparent);
+}
+
+.guide-art .bar.on-accent {
+    fill: var(--on-accent);
+}
+
+.guide-art .accent-line,
+.guide-art .on-accent-line,
+.guide-art .thread {
+    fill: none;
+    stroke: var(--accent);
+    stroke-width: 2.5;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+}
+
+.guide-art .on-accent-line {
+    stroke: var(--on-accent);
+    stroke-width: 2;
+}
+
+/* The tick of the player in use and the pencil to their profile, as the window of the players draws them */
+.guide-art .tick,
+.guide-art .pencil {
+    fill: none;
+    stroke: var(--accent);
+    stroke-linecap: round;
+    stroke-linejoin: round;
+}
+
+.guide-art .tick {
+    stroke-width: 2;
+}
+
+.guide-art .pencil {
+    stroke-width: 2.4;
+}
+
+
+.guide-art .knot,
+.guide-art .caret {
+    fill: var(--accent);
+}
+
+.guide-art .focused,
+.guide-art .call {
+    fill: var(--card);
+    stroke: var(--accent);
+    stroke-width: 2;
+}
+
+.guide-art .call-square,
+.guide-art .chosen {
+    fill: none;
+    stroke: var(--accent);
+    stroke-width: 1.5;
+}
+
+.guide-art .chosen {
+    stroke-width: 2.5;
+}
+
+/* The board and what the page draws on it */
+.guide-art .light {
+    fill: var(--light-square);
+}
+
+.guide-art .dark {
+    fill: var(--dark-square);
+}
+
+.guide-art .last {
+    fill: var(--last-move);
+}
+
+.guide-art .hint {
+    fill: var(--hint);
+}
+
+.guide-art .over {
+    fill: none;
+    stroke: var(--hover-edge);
+    stroke-width: 2.5;
+}
+
+.guide-art .ghost {
+    opacity: var(--ghost);
+}
+
+.guide-art .lift-shadow {
+    fill: var(--lift-shadow);
+    opacity: 0.6;
+}
+
+.guide-art .pointer {
+    fill: var(--ink);
+    stroke: var(--card);
+    stroke-width: 1.2;
+    stroke-linejoin: round;
+}
+
+.guide-art .drawn {
+    stroke: var(--help-halo);
+    stroke-width: 1.2;
+    stroke-linejoin: round;
+    opacity: 0.85;
+}
+
+.guide-art .drawn.green {
+    fill: var(--drawn-green);
+}
+
+.guide-art .help-halo,
+.guide-art .help-line {
+    fill: none;
+    stroke-linecap: round;
+}
+
+.guide-art .help-halo {
+    stroke: var(--help-halo);
+    stroke-width: 4.5;
+}
+
+.guide-art .help-line {
+    stroke: var(--help-line);
+    stroke-width: 2.2;
+    stroke-dasharray: 5 4;
+}
+
+.guide-art .danger {
+    fill: var(--drawn-red);
+}
+
+.guide-art .danger-line {
+    stroke: var(--drawn-red);
+    stroke-width: 2;
+    stroke-linecap: round;
+}
+
+.guide-art .danger-dot {
+    fill: var(--help-on);
+}
+
+.guide-art .danger-row {
+    fill: color-mix(in oklab, var(--drawn-red) 12%, var(--card));
+}
+
+/* The move badges: a disc in the colour of the judgement, a white sign */
+.guide-art .judgement.best {
+    fill: var(--badge-best);
+}
+
+.guide-art .judgement.mistake {
+    fill: var(--badge-mistake);
+}
+
+.guide-art .judgement.blunder {
+    fill: var(--badge-blunder);
+}
+
+.guide-art .sign {
+    fill: none;
+    stroke: var(--badge-ink);
+    stroke-linecap: round;
+    stroke-linejoin: round;
+}
+
+.guide-art .sign .dot {
+    fill: var(--badge-ink);
+    stroke: none;
+}
+
+.guide-art .clock {
+    fill: none;
+    stroke: var(--soft);
+    stroke-width: 1.3;
+    stroke-linecap: round;
+}
+
+.guide-art .clock.on-accent {
+    stroke: var(--on-accent);
+}
+
+/* The Torretta, and the players' faces on their discs */
+.guide-art .tower .antenna {
+    fill: none;
+    stroke: var(--torretta-shade);
+    stroke-width: 4;
+    stroke-linecap: round;
+}
+
+.guide-art .tower .light-bulb {
+    fill: var(--torretta-light);
+}
+
+.guide-art .tower .shade {
+    fill: var(--torretta-shade);
+}
+
+.guide-art .tower .body {
+    fill: var(--torretta-body);
+}
+
+.guide-art .tower .screen {
+    fill: var(--torretta-screen);
+}
+
+.guide-art .tower .features {
+    fill: var(--torretta-face);
+}
+
+.guide-art .person {
+    fill: var(--card);
+}
+
+.guide-art .tone-player {
+    fill: var(--badge-brilliant);
+}
+
+.guide-art .tone-1 {
+    fill: var(--badge-great);
+}
+
+.guide-art .tone-2 {
+    fill: var(--badge-book);
+}
+
+.guide-art .tone-3 {
+    fill: var(--badge-excellent);
+}
+
+.guide-art .tone-4 {
+    fill: var(--badge-miss);
+}
+
+.guide-art .tone-5 {
+    fill: var(--badge-note);
+}
+
+.guide-art .tone-6 {
+    fill: var(--badge-mistake);
+}
+
+.guide-art .tone-7 {
+    fill: var(--badge-good);
+}
+
+.guide-art .tone-8 {
+    fill: var(--badge-inaccuracy);
+}
+
+.guide-art .tone-9 {
+    fill: var(--torretta-body);
+}

package/dist/page/guide/drawings/drawings.js

@@ -0,0 +1,15 @@
+import { Analysis } from "./analysis.js";
+import { Game } from "./game.js";
+import { Helps } from "./helps.js";
+import { HowItWorks } from "./how-it-works.js";
+import { Players } from "./players.js";
+import { Talk } from "./talk.js";
+/** The guide's drawings, by the name its markdown gives them: ![what it shows](name). */
+export const drawings = {
+    "how-it-works": HowItWorks,
+    game: Game,
+    talk: Talk,
+    helps: Helps,
+    analysis: Analysis,
+    players: Players,
+};

package/dist/page/guide/drawings/game.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "preact/jsx-runtime";
+// Playing a move: a knight lifted from its square under the pointer, the dots of where it may go, the gold edge where it would land, and the player's clock running
+import { Bar, Board, Card, centre, Clock, corner, Face, PieceAt, PieceOn, Pieces, Square, Torretta } from "./parts.js";
+const grid = { x: 140, y: 10, cell: 25 };
+const position = ["rnbqkbnr", "pppp.ppp", "........", "....p...", "....P...", "........", "PPPP.PPP", "RNBQKB.R"];
+/** The board after 1.e4 e5 with White's knight in the air, the two players' cards on the left and the moves on the right. */
+export function Game() {
+    const over = corner(grid, 5, 3);
+    return (_jsxs("svg", { class: "guide-art", viewBox: "0 0 480 220", "aria-hidden": "true", children: [_jsxs(Board, { grid: grid, children: [_jsx(Square, { grid: grid, file: 4, rank: 7, class: "last" }), _jsx(Square, { grid: grid, file: 4, rank: 5, class: "last" }), _jsx(Pieces, { grid: grid, ranks: position }), _jsx(PieceOn, { grid: grid, file: 6, rank: 1, letter: "N", class: "ghost" }), _jsx(Dot, { file: 4, rank: 2 }), _jsx(Dot, { file: 7, rank: 3 }), _jsx("rect", { class: "over", x: over.x + 1.25, y: over.y + 1.25, width: grid.cell - 2.5, height: grid.cell - 2.5 })] }), _jsx("ellipse", { class: "lift-shadow", cx: over.x + 13, cy: over.y + 20, rx: "11", ry: "3.5" }), _jsx(PieceAt, { x: over.x - 3.5, y: over.y - 15, size: 32, letter: "N" }), _jsx("path", { class: "pointer", transform: `translate(${over.x + 17} ${over.y + 8})`, d: "M0 0V13L3.5 10L6 15.5L8.2 14.5L5.8 9.3H10Z" }), _jsx(Card, { x: 16, y: 10, width: 112, height: 48 }), _jsx(Torretta, { x: 18, y: 14, size: 32, bust: true }), _jsx(Bar, { x: 54, y: 20, width: 46, strong: true }), _jsx(Bar, { x: 54, y: 30, width: 30 }), _jsx("rect", { class: "quote", x: "54", y: "40", width: "44", height: "12", rx: "6" }), _jsx(Clock, { x: 61, y: 46, r: 3.4 }), _jsx(Bar, { x: 68, y: 43.5, width: 24 }), _jsx(Card, { x: 16, y: 162, width: 112, height: 48 }), _jsx(Face, { x: 34, y: 180, r: 12, tone: "tone-player" }), _jsx(Bar, { x: 54, y: 170, width: 46, strong: true }), _jsx(Bar, { x: 54, y: 180, width: 30 }), _jsx("rect", { class: "accent", x: "54", y: "192", width: "44", height: "12", rx: "6" }), _jsx(Clock, { x: 61, y: 198, r: 3.4, class: "clock on-accent" }), _jsx(Bar, { x: 68, y: 195.5, width: 24, class: "bar on-accent" }), _jsx(Card, { x: 352, y: 10, width: 112, height: 44 }), _jsx(Bar, { x: 362, y: 22, width: 70, strong: true }), _jsx(Bar, { x: 362, y: 34, width: 52 }), _jsx(Card, { x: 352, y: 150, width: 112, height: 60 }), _jsx(Bar, { x: 362, y: 162, width: 40, strong: true }), _jsx(Bar, { x: 362, y: 184, width: 8 }), _jsx(Bar, { x: 378, y: 184, width: 28 }), _jsx("rect", { class: "last", x: "414", y: "179", width: "40", height: "15", rx: "4" }), _jsx(Bar, { x: 420, y: 184, width: 28, class: "bar on-last" })] }));
+}
+/** The dot of a square the lifted piece may go to. */
+function Dot({ file, rank }) {
+    const { x, y } = centre(grid, file, rank);
+    return _jsx("circle", { class: "hint", cx: x, cy: y, r: grid.cell * 0.165 });
+}

package/dist/page/guide/drawings/helps.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "preact/jsx-runtime";
+import { Arrow, Badge, Bar, Board, Card, centre, Pieces, Square } from "./parts.js";
+const grid = { x: 16, y: 10, cell: 25 };
+const position = ["...qk...", ".....ppp", "p.n.....", ".B..p...", "....P...", "..N..N..", ".....PPP", ".....RK."];
+/** The board with its marks, and the Helps card open on its first tab. */
+export function Helps() {
+    const bishop = centre(grid, 1, 5);
+    return (_jsxs("svg", { class: "guide-art", viewBox: "0 0 480 220", "aria-hidden": "true", children: [_jsxs(Board, { grid: grid, children: [_jsx(Square, { grid: grid, file: 0, rank: 7, class: "last" }), _jsx(Square, { grid: grid, file: 0, rank: 6, class: "last" }), _jsx(Pieces, { grid: grid, ranks: position })] }), _jsx("path", { class: "help-halo", d: `M${bishop.x} ${bishop.y}L116 35` }), _jsx("path", { class: "help-line", d: `M${bishop.x} ${bishop.y}L116 35` }), _jsx("path", { class: "danger", d: "M41 110V97L54 110Z" }), _jsx("circle", { class: "danger-dot", cx: "44.5", cy: "106", r: "1.7" }), _jsx(Arrow, { from: centre(grid, 5, 3), to: centre(grid, 4, 5), width: 5, class: "drawn green" }), _jsx(Badge, { x: 38, y: 63, r: 6.5, kind: "best" }), _jsx(Card, { x: 236, y: 36, width: 228, height: 148 }), _jsx("circle", { class: "accent-line", cx: "252", cy: "55", r: "5.5" }), _jsx("circle", { class: "accent", cx: "252", cy: "55", r: "2" }), _jsx(Bar, { x: 264, y: 52.5, width: 44, class: "bar accent" }), _jsx("rect", { class: "button", x: "420", y: "48", width: "14", height: "14", rx: "3" }), _jsx("rect", { class: "button", x: "440", y: "48", width: "14", height: "14", rx: "3" }), _jsx(Bar, { x: 250, y: 70, width: 34, strong: true }), _jsx(Bar, { x: 298, y: 70, width: 40 }), _jsx("path", { class: "rule", d: "M246 85.5H454" }), _jsx("rect", { class: "accent", x: "246", y: "82", width: "42", height: "2.5", rx: "1" }), _jsx(Row, { y: 96, width: 96, children: _jsx("path", { class: "danger", d: "M252 112V100L264 112Z" }) }), _jsxs(Row, { y: 124, width: 88, children: [_jsx("path", { class: "danger-line", d: "M253 141L259 135" }), _jsx("circle", { class: "danger", cx: "260.5", cy: "133.5", r: "3.5" })] }), _jsx("rect", { class: "quote", x: "246", y: "152", width: "208", height: "22", rx: "4" }), _jsx("circle", { class: "soft-line", cx: "257", cy: "163", r: "4.5" }), _jsx(Bar, { x: 272, y: 160.5, width: 112 }), _jsx(Bar, { x: 418, y: 160.5, width: 8, strong: true }), _jsx(Bar, { x: 434, y: 160.5, width: 8, strong: true })] }));
+}
+/** A row of the card about the player's pieces in trouble: a red tint and edge, its sign, a line and a count. */
+function Row({ y, width, children }) {
+    return (_jsxs("g", { children: [_jsx("rect", { class: "danger-row", x: "246", y: y, width: "208", height: "22", rx: "4" }), _jsx("rect", { class: "danger", x: "246", y: y, width: "3", height: "22" }), children, _jsx(Bar, { x: 272, y: y + 8.5, width: width, strong: true }), _jsx(Bar, { x: 434, y: y + 8.5, width: 8, strong: true })] }));
+}

package/dist/page/guide/drawings/how-it-works.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "preact/jsx-runtime";
+// How Chesspal works: the board's page and the AI's chat, two windows tied by a thread, the call through which the AI plays
+import { Bar, Board, Card, Chevron, Face, Pieces, Square, Torretta } from "./parts.js";
+const grid = { x: 26, y: 42, cell: 19 };
+const position = [".....rk.", ".....ppp", "..n.....", "....p...", "....P...", ".....N..", ".....PPP", ".....RK."];
+/** The page with its board and the Torretta, the chat beside it, and the thread between them. */
+export function HowItWorks() {
+    return (_jsxs("svg", { class: "guide-art", viewBox: "0 0 480 220", "aria-hidden": "true", children: [_jsx(Window, { x: 16, width: 212 }), _jsxs(Board, { grid: grid, children: [_jsx(Square, { grid: grid, file: 1, rank: 8, class: "last" }), _jsx(Square, { grid: grid, file: 2, rank: 6, class: "last" }), _jsx(Pieces, { grid: grid, ranks: position })] }), _jsx(Torretta, { x: 186, y: 40, size: 32 }), _jsx(Bar, { x: 190, y: 78, width: 26, strong: true }), _jsx(Bar, { x: 190, y: 88, width: 18 }), _jsx(Face, { x: 203, y: 182, r: 11, tone: "tone-player" }), _jsx(Window, { x: 278, width: 186 }), _jsx(Card, { x: 288, y: 40, width: 166, height: 24, class: "quote" }), _jsx(Bar, { x: 296, y: 49, width: 100, strong: true }), _jsx("circle", { class: "bullet", cx: "293", cy: "78", r: "2.5" }), _jsx(Bar, { x: 300, y: 75, width: 130 }), _jsx(Bar, { x: 300, y: 86, width: 96 }), _jsx(Card, { x: 288, y: 102, width: 166, height: 26, class: "call" }), _jsx("rect", { class: "light", x: "296", y: "109", width: "12", height: "12" }), _jsx("rect", { class: "dark", x: "296", y: "109", width: "6", height: "6" }), _jsx("rect", { class: "dark", x: "302", y: "115", width: "6", height: "6" }), _jsx("rect", { class: "call-square", x: "296", y: "109", width: "12", height: "12" }), _jsx(Bar, { x: 316, y: 112, width: 74, strong: true }), _jsx("circle", { class: "bullet", cx: "293", cy: "146", r: "2.5" }), _jsx(Bar, { x: 300, y: 143, width: 120 }), _jsx(Bar, { x: 300, y: 154, width: 80 }), _jsx("rect", { class: "field", x: "288", y: "170", width: "166", height: "24", rx: "5" }), _jsx("g", { class: "accent-line", children: _jsx(Chevron, { x: 299, y: 182, size: 8 }) }), _jsx("rect", { class: "caret", x: "309", y: "176", width: "2", height: "12", rx: "1" }), _jsx("path", { class: "thread", d: "M228 108C258 108 258 115 288 115" }), _jsx("circle", { class: "knot", cx: "228", cy: "108", r: "4" }), _jsx("circle", { class: "knot", cx: "288", cy: "115", r: "4" })] }));
+}
+/** A window with its title bar and three dots, as tall as the drawing leaves. */
+function Window({ x, width }) {
+    return (_jsxs("g", { children: [_jsx(Card, { x: x, y: 16, width: width, height: 188 }), _jsx("path", { class: "rule", d: `M${x} 32H${x + width}` }), _jsx("circle", { class: "bullet", cx: x + 11, cy: "24", r: "2.5" }), _jsx("circle", { class: "bullet", cx: x + 20, cy: "24", r: "2.5" }), _jsx("circle", { class: "bullet", cx: x + 29, cy: "24", r: "2.5" })] }));
+}