chesspal 0.3.0 → 0.3.2

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" })] }));
+}

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

@@ -0,0 +1,103 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "preact/jsx-runtime";
+import { useContext, useId } from "preact/hooks";
+import { ChosenSet, pieceSymbol } from "../../pieces/pieces.js";
+/** The top-left corner of a square: `file` 0 to 7 from a, `rank` 1 to 8, White at the bottom. */
+export function corner(grid, file, rank) {
+    return { x: grid.x + file * grid.cell, y: grid.y + (8 - rank) * grid.cell };
+}
+/** The centre of a square. */
+export function centre(grid, file, rank) {
+    const { x, y } = corner(grid, file, rank);
+    return { x: x + grid.cell / 2, y: y + grid.cell / 2 };
+}
+/** A card of the page, its corners as the page's. */
+export function Card({ x, y, width, height, class: name = "paper" }) {
+    return _jsx("rect", { class: name, x: x, y: y, width: width, height: height, rx: "6" });
+}
+/** A line of text, as a rounded bar: `strong` for a title or a name. */
+export function Bar({ x, y, width, strong = false, class: name }) {
+    return _jsx("rect", { class: name ?? (strong ? "bar strong" : "bar"), x: x, y: y, width: width, height: "5", rx: "2.5" });
+}
+/** The board's squares, light and dark. */
+export function Board({ grid, children }) {
+    return (_jsxs("g", { children: [_jsx("rect", { class: "light", x: grid.x, y: grid.y, width: grid.cell * 8, height: grid.cell * 8 }), _jsx("path", { class: "dark", d: darkSquares(grid) }), children] }));
+}
+/** A square filled with one of the board's colours: the last move, a hint. */
+export function Square({ grid, file, rank, class: name }) {
+    const { x, y } = corner(grid, file, rank);
+    return _jsx("rect", { class: name, x: x, y: y, width: grid.cell, height: grid.cell });
+}
+/** A piece of the chosen set by its FEN letter, on a square of the board. */
+export function PieceOn({ grid, file, rank, letter, class: name }) {
+    const { x, y } = corner(grid, file, rank);
+    return _jsx(PieceAt, { x: x, y: y, size: grid.cell, letter: letter, class: name });
+}
+/** A piece of the chosen set anywhere in the drawing, `size` wide, coloured by the settings as the board's. */
+export function PieceAt({ x, y, size, letter, class: name = "" }) {
+    const set = useContext(ChosenSet);
+    const side = letter === letter.toUpperCase() ? "white" : "black";
+    return _jsx("use", { href: pieceSymbol(letter, set), x: x, y: y, width: size, height: size, class: `piece ${side} ${name}` });
+}
+/** The pieces of a position, one string a rank from the 8th down, "." for an empty square: "....k..." */
+export function Pieces({ grid, ranks }) {
+    return (_jsx("g", { children: ranks.flatMap((row, index) => [...row].map((letter, file) => letter === "." ? null : _jsx(PieceOn, { grid: grid, file: file, rank: 8 - index, letter: letter }, `${file}${index}`))) }));
+}
+/** An arrow from one point to another, its shaft `width` wide, as the AI draws them on the board. */
+export function Arrow({ from, to, width, class: name }) {
+    return _jsx("polygon", { class: name, points: arrowPoints(from, to, width) });
+}
+/** The Torretta with its neutral face, `size` wide, its top-left corner at x, y; as a `bust`, as on a player's card, in a disc `size` wide, clipped to it. */
+export function Torretta({ x, y, size, bust = false }) {
+    const clip = useId();
+    if (bust) {
+        return (_jsxs("g", { transform: `translate(${x} ${y}) scale(${size / 96}) translate(-16 -8)`, children: [_jsx("clipPath", { id: clip, children: _jsx("circle", { cx: "64", cy: "56", r: "48" }) }), _jsx("circle", { class: "words", cx: "64", cy: "56", r: "48" }), _jsx("g", { "clip-path": `url(#${clip})`, children: _jsx(Figure, {}) })] }));
+    }
+    return (_jsx("g", { transform: `translate(${x} ${y}) scale(${size / 128})`, children: _jsx(Figure, {}) }));
+}
+/** A person's head and shoulders in a disc of `tone`, a class of drawings.css; `ring` draws the accent around it. */
+export function Face({ x, y, r, tone, ring = false }) {
+    const side = r * 0.7;
+    const low = y + r * 0.71;
+    return (_jsxs("g", { children: [ring && _jsx("circle", { class: "chosen", cx: x, cy: y, r: r + 3.5 }), _jsx("circle", { class: tone, cx: x, cy: y, r: r }), _jsx("circle", { class: "person", cx: x, cy: y - r * 0.2, r: r * 0.34 }), _jsx("path", { class: "person", d: `M${x - side} ${low}Q${x - side} ${y + r * 0.22} ${x} ${y + r * 0.22}Q${x + side} ${y + r * 0.22} ${x + side} ${low}A${r} ${r} 0 0 1 ${x - side} ${low}Z` })] }));
+}
+/** A move's badge, a disc and its sign: best (a tick), mistake (?) or blunder (??). */
+export function Badge({ x, y, r, kind }) {
+    return (_jsxs("g", { children: [_jsx("circle", { class: `judgement ${kind}`, cx: x, cy: y, r: r }), kind === "best" && _jsx("path", { class: "sign", style: { strokeWidth: r * 0.28 }, d: `M${x - r * 0.45} ${y + r * 0.02}L${x - r * 0.12} ${y + r * 0.36}L${x + r * 0.45} ${y - r * 0.32}` }), kind === "mistake" && _jsx(Question, { x: x, y: y, size: r }), kind === "blunder" && (_jsxs(_Fragment, { children: [_jsx(Question, { x: x - r * 0.36, y: y, size: r * 0.8 }), _jsx(Question, { x: x + r * 0.36, y: y, size: r * 0.8 })] }))] }));
+}
+/** A small clock face with its two hands. */
+export function Clock({ x, y, r, class: name = "clock" }) {
+    return (_jsxs("g", { class: name, children: [_jsx("circle", { cx: x, cy: y, r: r }), _jsx("path", { d: `M${x} ${y - r * 0.6}V${y}L${x + r * 0.45} ${y + r * 0.3}` })] }));
+}
+/** A chevron pointing left or right, centred on x, y. */
+export function Chevron({ x, y, size, left = false }) {
+    const reach = left ? -size / 2 : size / 2;
+    return _jsx("path", { d: `M${x - reach / 2} ${y - size / 2}L${x + reach / 2} ${y}L${x - reach / 2} ${y + size / 2}` });
+}
+/** The Torretta's figure on its own grid of 128, its disc's frame 16 8 96 96 as the page's bust. */
+function Figure() {
+    return (_jsxs("g", { class: "tower", children: [_jsx("path", { class: "antenna", d: "M64 31V19" }), _jsx("circle", { class: "light-bulb", cx: "64", cy: "16", r: "5" }), _jsx("rect", { class: "shade", x: "29", y: "64", width: "12", height: "26", rx: "2" }), _jsx("rect", { class: "shade", x: "87", y: "64", width: "12", height: "26", rx: "2" }), _jsx("path", { class: "body", d: "M34 30H47V40H57V30H71V40H81V30H94V54L89 58L92 106H36L39 58L34 54Z" }), _jsx("rect", { class: "shade", x: "30", y: "104", width: "68", height: "12", rx: "4" }), _jsx("rect", { class: "screen", x: "44", y: "63", width: "40", height: "32", rx: "7" }), _jsx("circle", { class: "features", cx: "55", cy: "76", r: "4.6" }), _jsx("circle", { class: "features", cx: "73", cy: "76", r: "4.6" }), _jsx("rect", { class: "features", x: "58", y: "85.4", width: "12", height: "3.2", rx: "1.6" })] }));
+}
+/** A question mark on a grid of one, `size` wide, centred on x, y. */
+function Question({ x, y, size }) {
+    return (_jsxs("g", { class: "sign", transform: `translate(${x} ${y}) scale(${size})`, children: [_jsx("path", { style: { strokeWidth: 0.24 }, d: "M-0.3 -0.22Q-0.3 -0.55 0 -0.55Q0.3 -0.55 0.3 -0.25Q0.3 -0.02 0 0.08V0.2" }), _jsx("circle", { class: "dot", cy: "0.48", r: "0.14" })] }));
+}
+function darkSquares(grid) {
+    const steps = [];
+    for (let row = 0; row < 8; row++) {
+        for (let column = 0; column < 8; column++) {
+            if ((row + column) % 2 === 1) {
+                steps.push(`M${grid.x + column * grid.cell} ${grid.y + row * grid.cell}h${grid.cell}v${grid.cell}h${-grid.cell}z`);
+            }
+        }
+    }
+    return steps.join("");
+}
+function arrowPoints(from, to, width) {
+    const length = Math.hypot(to.x - from.x, to.y - from.y);
+    const along = { x: (to.x - from.x) / length, y: (to.y - from.y) / length };
+    const across = { x: -along.y, y: along.x };
+    const head = width * 2.2;
+    const neck = { x: to.x - along.x * head, y: to.y - along.y * head };
+    const at = (base, side) => `${(base.x + across.x * side).toFixed(1)},${(base.y + across.y * side).toFixed(1)}`;
+    return [at(from, width / 2), at(neck, width / 2), at(neck, width * 1.15), `${to.x},${to.y}`, at(neck, -width * 1.15), at(neck, -width / 2), at(from, -width / 2)].join(" ");
+}

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

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "preact/jsx-runtime";
+// The players: the player's face in the header, ringed, and under it the window of the players, the one in use ticked, with the pencil to their profile
+import { Bar, Card, Face, Torretta } from "./parts.js";
+/** The players in the window, from the top: the player's own is the second. */
+const players = [{ tone: "tone-2", name: 58 }, { tone: "tone-player", name: 46 }, { tone: "tone-6", name: 66 }];
+const own = 1;
+const row = { x: 136, y: 102, width: 298, height: 28, step: 34 };
+/** A strip of the header with the player's face at its end, and the window «Chi gioca?» it opens. */
+export function Players() {
+    return (_jsxs("svg", { class: "guide-art", viewBox: "0 0 480 220", "aria-hidden": "true", children: [_jsx(Card, { x: 16, y: 10, width: 448, height: 36 }), _jsx(Torretta, { x: 22, y: 11, size: 34 }), _jsx("rect", { class: "quote", x: "64", y: "19", width: "60", height: "18", rx: "9" }), [350, 376, 402].map((x) => _jsx("rect", { class: "field", x: x, y: "18", width: "20", height: "20", rx: "5" }, x)), _jsx(Face, { x: 442, y: 28, r: 11, tone: "tone-player", ring: true }), _jsx("rect", { class: "lift-shadow", x: "121", y: "63", width: "330", height: "150", rx: "6" }), _jsx(Card, { x: 120, y: 60, width: 330, height: 150 }), _jsx(Bar, { x: 136, y: 73, width: 62, strong: true }), _jsx("path", { class: "soft-line", d: "M426 70L434 78M434 70L426 78" }), _jsx(Bar, { x: 136, y: 88, width: 120 }), players.map((player, index) => _jsx(PlayerRow, { index: index, tone: player.tone, name: player.name }, player.tone))] }));
+}
+/** A line of the window: a face and a name; the player's own is ticked and has the pencil beside it. */
+function PlayerRow({ index, tone, name }) {
+    const y = row.y + index * row.step;
+    const middle = y + row.height / 2;
+    const mine = index === own;
+    const width = mine ? row.width - row.height - 6 : row.width;
+    return (_jsxs("g", { children: [_jsx(Card, { x: row.x, y: y, width: width, height: row.height }), _jsx(Face, { x: row.x + 16, y: middle, r: 9, tone: tone }), _jsx(Bar, { x: row.x + 32, y: middle - 2.5, width: name, strong: true }), mine && (_jsxs(_Fragment, { children: [_jsx("path", { class: "tick", d: `M${row.x + width - 26} ${middle}l4 4l7 -8` }), _jsx(Card, { x: row.x + row.width - row.height, y: y, width: row.height, height: row.height }), _jsxs("g", { class: "pencil", transform: `translate(${row.x + row.width - row.height + 6} ${y + 6}) scale(0.667)`, children: [_jsx("path", { d: "M4 20L5 15L15.5 4.5L19.5 8.5L9 19Z" }), _jsx("path", { d: "M13.5 6.5L17.5 10.5" })] })] }))] }));
+}

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

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "preact/jsx-runtime";
+// Talking to the AI: under its name, the player's question, its answer, and the box where the player writes, beside the board
+import { Bar, Board, Card, Chevron, Pieces, Torretta } from "./parts.js";
+const grid = { x: 256, y: 10, cell: 30 };
+const position = [".....rk.", ".....ppp", "..n.....", "....p...", "..B.P...", ".....N..", ".....PPP", "......K."];
+/** The AI's card, the talk under it and the box with its send button, the board cut by the drawing's edge. */
+export function Talk() {
+    return (_jsxs("svg", { class: "guide-art", viewBox: "0 0 480 220", "aria-hidden": "true", children: [_jsx(Board, { grid: grid, children: _jsx(Pieces, { grid: grid, ranks: position }) }), _jsx(Card, { x: 16, y: 10, width: 220, height: 46 }), _jsx(Torretta, { x: 18, y: 13, size: 36, bust: true }), _jsx(Bar, { x: 58, y: 24, width: 56, strong: true }), _jsx(Bar, { x: 58, y: 35, width: 34 }), _jsx(Card, { x: 86, y: 66, width: 150, height: 24 }), _jsx(Bar, { x: 96, y: 75.5, width: 110, strong: true }), _jsx(Card, { x: 16, y: 100, width: 200, height: 42, class: "words" }), _jsx(Bar, { x: 26, y: 111, width: 170, class: "bar on-words" }), _jsx(Bar, { x: 26, y: 123, width: 120, class: "bar on-words" }), _jsx(Card, { x: 16, y: 154, width: 220, height: 56, class: "paper focused" }), _jsx(Bar, { x: 28, y: 168, width: 104 }), _jsx("rect", { class: "caret", x: "136", y: "163", width: "2", height: "15", rx: "1" }), _jsx("rect", { class: "accent", x: "176", y: "187", width: "50", height: "16", rx: "8" }), _jsx(Bar, { x: 186, y: 192.5, width: 18, class: "bar on-accent" }), _jsx("g", { class: "on-accent-line", children: _jsx(Chevron, { x: 213, y: 195, size: 7 }) })] }));
+}