chesspal 0.1.0 → 0.2.1

package/dist/page/helps/helps.js

@@ -0,0 +1,220 @@
+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; and
+// the coach's words (D-88).
+import { Fragment } from "preact";
+import { useState } from "preact/hooks";
+import { Notch } from "../board/marks.js";
+import { BadgeIcon, NoteIcon } from "../game/badges.js";
+import { FoldButton, useCardFold } from "../game/card-fold.js";
+import { Figurines } from "../game/move-list.js";
+import { Figurine } from "../pieces/pieces.js";
+import { Legend, Marked } from "../talk/talk.js";
+import { groupOf, pinSquares, riskSquares, squaresOf, strategyOf } from "./view.js";
+/**
+ * The helps' card, between the opening and the moves: the coach's words, then the tactics in lines, the strategy in a table and the control map, seen while
+ * its button or M is held, and the board without its drawings while their button is. A line under the pointer lights its squares on the board. Its title
+ * folds it to the title and opens it again (Stefano).
+ */
+export function HelpsCard({ helps, judged, hint, hintOpen, onHint, onPoint, onMap, mapping, onBare, bare, text }) {
+    const [tab, setTab] = useState("tactics");
+    // The tactics' lines the player opened stay open from move to move, so that a pin is followed as the game goes on.
+    const [opened, setOpened] = useState(new Set());
+    const openLine = (key, open) => setOpened((lines) => new Set(open ? [...lines, key] : [...lines].filter((line) => line !== key)));
+    const [folded, toggleFold] = useCardFold("helps");
+    const words = text.helpsCard;
+    // The hint closes with the card, so that its drawings never stay on the board without its words (Zoe).
+    const fold = () => {
+        if (!folded) {
+            onHint(false);
+        }
+        toggleFold();
+    };
+    return (_jsxs("section", { class: `card helps-card${folded ? " folded" : ""}`, "aria-label": words.title, children: [_jsxs("div", { class: "helps-head", children: [_jsx("h3", { class: "card-title", children: _jsxs(FoldButton, { folded: folded, onFold: fold, text: text, children: [_jsx(HelpsIcon, {}), words.title] }) }), _jsxs("span", { class: "helps-tools", children: [_jsx(MapButton, { mapping: mapping, onMap: onMap, text: text }), _jsx(BareButton, { bare: bare, onBare: onBare, text: text })] })] }), folded ? null : (_jsxs(_Fragment, { children: [judged.length === 0 && hint === undefined ? null : (_jsxs("section", { class: `coach${judged.length === 0 ? " hint-only" : ""}`, "aria-label": words.coach, children: [judged.map((ply) => _jsx(Judged, { ply: ply, text: text }, `${ply.number} ${ply.side}`)), hint === undefined ? null : _jsx(HintLine, { hint: hint, open: hintOpen, onOpen: onHint, text: text })] })), _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 })] }), tab === "tactics"
+                        ? _jsx(Tactics, { helps: helps, opened: opened, onOpen: openLine, onPoint: onPoint, text: text })
+                        : _jsx(Strategy, { helps: helps, onPoint: onPoint, text: text })] }))] }));
+}
+/** The map's button (D-78), held to see the map: an icon, its tooltip saying how (Stefano); in the card's title, and on a phone under the board. */
+export function MapButton({ mapping, onMap, text }) {
+    return (_jsx(HoldButton, { on: mapping, onHold: onMap, title: text.helpsCard.mapHint, label: text.helpsCard.map, 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" })] }) }));
+}
+/**
+ * The button held to see the board bare, without the arrows and the squares the AI, the coach and the player drew on it, nor the helps' signs (Stefano): an eye shut.
+ */
+export function BareButton({ bare, onBare, text }) {
+    return (_jsx(HoldButton, { on: bare, onHold: onBare, title: text.helpsCard.bareHint, label: text.helpsCard.bare, kind: "bare-button", children: _jsxs("svg", { viewBox: "0 0 16 16", "aria-hidden": "true", children: [_jsx("path", { d: "M1.5 8S4 3.5 8 3.5 14.5 8 14.5 8 12 12.5 8 12.5 1.5 8 1.5 8Z" }), _jsx("circle", { cx: "8", cy: "8", r: "2" }), _jsx("path", { d: "M2.5 2.5l11 11" })] }) }));
+}
+/**
+ * The coach's hint, a line that opens on its words and the legend of what it draws (D-88): in the helps' card, and on a phone under the board, beside the
+ * map, where its drawings are in sight (Zoe).
+ */
+export function HintLine({ hint, open, onOpen, text }) {
+    const words = text.helpsCard;
+    return (_jsxs("details", { class: "coach-hint", open: open, onToggle: (event) => onOpen(event.currentTarget.open), children: [_jsx("summary", { children: open ? words.hideHint : words.showHint }), _jsx("span", { class: "note", children: _jsx(Marked, { text: hint.text }) }), hint.arrows === undefined && hint.squares === undefined ? null : _jsx(Legend, { review: hint, words: words.drawn })] }));
+}
+/** An icon the mouse holds, while what it shows lasts; a finger, or the keyboard, turns it on and off (D-78). */
+function HoldButton({ on, onHold, title, label, kind, children }) {
+    // A click carries its pointer's type: none from the keyboard.
+    const mouse = (event) => event instanceof PointerEvent && event.pointerType === "mouse";
+    return (_jsx("button", { type: "button", class: kind === undefined ? "hold-button" : `hold-button ${kind}`, "aria-pressed": on, "aria-label": label, title: title, onPointerDown: (event) => mouse(event) && onHold(true), onPointerUp: (event) => mouse(event) && onHold(false), onPointerLeave: (event) => mouse(event) && onHold(false), onClick: (event) => !mouse(event) && onHold(!on), children: children }));
+}
+/** The coach's judgment of the player's move: its badge and the move in a line, which opens on its note (D-78, D-88). */
+function Judged({ ply, text }) {
+    const { badge, note } = ply.review ?? {};
+    const head = (_jsxs(_Fragment, { children: [badge === undefined ? _jsx(NoteIcon, {}) : _jsx(BadgeIcon, { badge: badge }), _jsxs("b", { children: [_jsxs("span", { class: "move-number", children: [ply.number, ply.side === "white" ? "." : "..."] }), _jsx(Figurines, { san: ply.san, side: ply.side })] }), " ", badge === undefined ? null : text.badges[badge]] }));
+    return (_jsx("div", { class: `move-note judged ${badge ?? ""}`, children: note === undefined ? _jsx("span", { class: "head", children: head }) : (_jsxs("details", { children: [_jsx("summary", { class: "head", children: head }), _jsx("span", { class: "note", children: _jsx(Marked, { text: note }) })] })) }));
+}
+/**
+ * The tactics in lines (D-91): one a kind of fact and a side, its count, red when it threatens the player and green when it is their chance; a click opens
+ * its pieces, each with its squares (Stefano).
+ */
+function Tactics({ helps, opened, onOpen, onPoint, text }) {
+    const words = text.helpsCard;
+    const point = pointing(onPoint);
+    const calm = !helps.lines.some((line) => line.kind === "risk" || line.kind === "pin");
+    return (_jsxs("ul", { class: "help-rows", children: [calm
+                ? (_jsxs("li", { class: "safe", children: [_jsxs(RowIcon, { children: [_jsx("circle", { cx: "8", cy: "8", r: "6.5" }), _jsx("path", { d: "M5.2 8.2l2 2 3.8-4" })] }), words.nothingAtRisk] }))
+                : null, helps.lines.map((line) => {
+                const key = line.kind === "loose" ? "loose" : `${line.kind} ${line.side}`;
+                const open = opened.has(key);
+                return (_jsxs("li", { class: `help-line ${line.kind} ${line.tone}${open ? " open" : ""}`, children: [_jsxs("button", { type: "button", class: "line-head", "aria-expanded": open, onClick: () => onOpen(key, !open), ...point(squaresOf(line)), children: [_jsx(LineIcon, { kind: line.kind }), _jsx("span", { class: "line-name", children: line.kind === "loose" ? words.loose : words.line(line.kind, line.side, helps.you, line.kind !== "check" || line.toMove) }), _jsx(LineCount, { line: line, helps: helps, words: words })] }), open ? _jsx(LineDetails, { line: line, helps: helps, point: point, text: text }) : null] }, key));
+            })] }));
+}
+/** What the pointer on a line or a cell does: it lights the line's squares; a touch keeps them lit until the position changes, as a square in the AI's words. */
+function pointing(onPoint) {
+    return (squares) => ({
+        onPointerEnter: () => onPoint(squares),
+        onPointerLeave: (event) => event.pointerType === "mouse" && onPoint([]),
+    });
+}
+/** A line's sign: the corner of a piece at risk, a pin's link, a check's plus, the loose pieces' i; its colour is the line's. */
+function LineIcon({ kind }) {
+    if (kind === "risk") {
+        return _jsx(Notch, {});
+    }
+    if (kind === "loose") {
+        return _jsx(InfoIcon, {});
+    }
+    return (_jsx(RowIcon, { children: kind === "pin"
+            ? _jsx("path", { d: "M6.5 9.5l3-3M7.5 4.5l1-1a2.5 2.5 0 0 1 3.5 3.5l-1 1M8.5 11.5l-1 1a2.5 2.5 0 0 1-3.5-3.5l1-1" })
+            : (_jsxs(_Fragment, { children: [_jsx("circle", { cx: "8", cy: "8", r: "6.5" }), _jsx("path", { d: "M8 5v6M5 8h6" })] })) }));
+}
+/** How many: the loose pieces by side, each after its pawn, the player's first (Zoe); the others in one number. */
+function LineCount({ line, helps, words }) {
+    if (line.kind !== "loose") {
+        return _jsx("b", { class: "count", children: line.items.length });
+    }
+    const name = (side) => helps.you === undefined ? words[side] : side === helps.you ? words.yours : words.theirs;
+    const counts = helps.sides.map((side) => ({ side, count: line.items.filter((piece) => piece.side === side).length })).filter(({ count }) => count > 0);
+    return (_jsx("span", { class: "counts", children: counts.map(({ side, count }) => (_jsxs("span", { title: name(side), "aria-label": `${name(side)} ${count}`, children: [_jsx(Figurine, { letter: "P", side: side }), _jsx("b", { class: "count", children: count })] }, side))) }));
+}
+/** A line opened: its pieces, each lighting its own squares; the checks in figures; the loose pieces by side. */
+function LineDetails({ line, helps, point, text }) {
+    const words = text.helpsCard;
+    switch (line.kind) {
+        case "risk":
+            return (_jsx("ul", { class: "line-details", children: line.items.map((risk) => (_jsxs("li", { ...point(riskSquares(risk)), children: [text.piece(risk.piece.piece, risk.piece.side), " ", _jsx(Squares, { squares: [risk.piece.square] }), " \u00B7 ", words.attackers, ": ", _jsx(Squares, { squares: risk.piece.attackers }), risk.why === "undefended" ? null : (_jsxs(_Fragment, { children: [" ", "\u00B7 ", words.defenders, ": ", _jsx(Squares, { squares: risk.piece.defenders })] })), " \u00B7 ", words[risk.why]] }, risk.piece.square))) }));
+        case "pin":
+            return (_jsx("ul", { class: "line-details", children: line.items.map((pin) => (_jsxs("li", { ...point(pinSquares(pin)), children: [text.piece(pin.piece.piece, pin.piece.side), " ", _jsx(Squares, { squares: [pin.piece.square] }), " ", words.pinnedTo(pin.to.piece), " ", _jsx(Squares, { squares: [pin.to.square] }), ", ", words.pinnedBy(pin.by.piece), " ", _jsx(Squares, { squares: [pin.by.square] })] }, pin.piece.square))) }));
+        case "check":
+            return (_jsx("p", { class: "line-details", children: line.items.map((check) => (_jsx("span", { class: "help-move", children: _jsx(Figurines, { san: check, side: line.side }) }, check))) }));
+        case "loose":
+            return (_jsx("p", { class: "line-details", children: helps.sides.map((side) => _jsx(Pieces, { pieces: line.items.filter((piece) => piece.side === side) }, side)) }));
+    }
+}
+/** The helps' sign before the card's title: a lifebuoy (Stefano). */
+function HelpsIcon() {
+    return (_jsxs("svg", { class: "icon", viewBox: "0 0 24 24", "aria-hidden": "true", children: [_jsx("circle", { cx: "12", cy: "12", r: "8.5" }), _jsx("circle", { cx: "12", cy: "12", r: "3.5" }), _jsx("path", { d: "M6 6L9.5 9.5M18 6L14.5 9.5M6 18L9.5 14.5M18 18L14.5 14.5" })] }));
+}
+/** The icon before a line of facts, in its kind's colour (Stefano): a pin's link, nothing at risk's tick, a check's plus, the loose pieces' i. */
+function RowIcon({ children }) {
+    return (_jsx("span", { class: "row-icon", "aria-hidden": "true", children: _jsx("svg", { viewBox: "0 0 16 16", children: children }) }));
+}
+/** An i in a ring, before the loose pieces and the strategy's notes. */
+function InfoIcon() {
+    return (_jsxs(RowIcon, { children: [_jsx("circle", { cx: "8", cy: "8", r: "6.5" }), _jsx("path", { d: "M8 7.3V11M8 4.9v.1" })] }));
+}
+/** 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(", ") });
+}
+/**
+ * The strategy (Stefano): the phase and the open files on top, the squares each side controls in a bar, the table in groups each under its figure, a count
+ * or a tick in each cell, and the notes in lines as the tactics'. The player's side comes first, with no colour of good or bad (D-91).
+ */
+function Strategy({ helps, onPoint, text }) {
+    const words = text.helpsCard;
+    const profile = helps.strategy;
+    const { draw, pawnEnding } = profile;
+    const point = pointing(onPoint);
+    // A line opens under it at a click or a tap, on its name's meaning and each side's squares or files, since a phone has no pointer for a title (Rosa).
+    const [explained, setExplained] = useState(undefined);
+    const lines = strategyOf(profile);
+    const sideName = (side) => side === helps.you ? `${words[side]} ${words.you}` : words[side];
+    const notes = [
+        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),
+    ].filter((note) => note !== undefined);
+    return (_jsxs("div", { class: "strategy", children: [_jsxs("p", { class: "strategy-head", children: [_jsx("span", { class: "phase", children: words.phases[profile.phase] }), _jsxs("span", { children: [words.openFiles, ": ", _jsx(Chips, { items: profile.openFiles })] })] }), _jsx(ControlBar, { controlled: profile.controlled, sides: helps.sides, sideName: sideName, words: words }), _jsxs("table", { class: "strategy-table", children: [_jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", {}), helps.sides.map((side) => (_jsxs("th", { children: [_jsx(Figurine, { letter: "P", side: side }), sideName(side)] }, side)))] }) }), groups.map(({ group, letter }) => {
+                        const shown = lines.filter((line) => groupOf[line.row] === group);
+                        return shown.length === 0 ? null : (_jsxs("tbody", { children: [_jsx("tr", { class: "group", children: _jsxs("th", { colSpan: 3, children: [_jsx(Figurine, { letter: letter, side: "white" }), words.groups[group]] }) }), shown.map((line) => {
+                                    const [name, meaning] = words.rows[line.row];
+                                    const open = explained === line.row;
+                                    const listed = helps.sides.filter((side) => typeof line[side] === "object");
+                                    return (_jsxs(Fragment, { children: [_jsxs("tr", { class: open ? "open" : undefined, ...point(squaresIn(line)), children: [_jsx("th", { children: _jsx("button", { type: "button", class: "term", title: meaning, "aria-expanded": open, onClick: () => setExplained(open ? undefined : line.row), children: name }) }), helps.sides.map((side) => (_jsx("td", { children: _jsx(Cell, { cell: line[side], words: words }) }, side)))] }), open
+                                                ? (_jsx("tr", { class: "meaning", children: _jsxs("td", { colSpan: 3, children: [meaning, listed.map((side) => (_jsxs("span", { class: "listed", children: [sideName(side), ": ", _jsx(Chips, { items: line[side] })] }, side)))] }) }))
+                                                : null] }, line.row));
+                                })] }, group));
+                    })] }), notes.length === 0 ? null : (_jsx("ul", { class: "help-rows", children: notes.map((note) => (_jsxs("li", { class: "info", children: [_jsx(InfoIcon, {}), note] }, note))) }))] }));
+}
+// The groups of the strategy's table in their order, each with its figure.
+const groups = [{ group: "pawns", letter: "P" }, { group: "pieces", letter: "N" }, { group: "king", letter: "K" }];
+// The fifty-move count shows only when the draw is near: ten moves each, or less.
+const fiftyMovesShown = 20;
+/** The squares a side's cells of a strategy's line name, to light on the board; files and islands light none. */
+function squaresIn(line) {
+    return [line.white, line.black].flatMap((cell) => typeof cell === "object" ? cell.filter((item) => /^[a-h][1-8]$/.test(item)) : []);
+}
+/**
+ * The squares only one side controls and those both do, in a bar as long as their counts, the player's side on the left; its title says it in words.
+ */
+function ControlBar({ controlled, sides, sideName, words }) {
+    const { white, black, contested } = controlled;
+    const [left, right] = sides;
+    const parts = [{ side: left, count: controlled[left] }, { side: "both", count: contested }, { side: right, count: controlled[right] }].filter(({ count }) => count > 0);
+    return (_jsxs("div", { class: "control", title: words.controlled(white, black, contested), children: [_jsx("span", { class: "control-title", children: words.control }), _jsx("span", { class: "control-bar", role: "img", "aria-label": words.controlled(white, black, contested), children: parts.map(({ side, count }) => _jsx("span", { class: side, style: { flexGrow: count }, children: count }, side)) }), _jsxs("span", { class: "control-legend", "aria-hidden": "true", children: [_jsx("span", { children: sideName(left) }), _jsx("span", { children: words.both }), _jsx("span", { children: sideName(right) })] })] }));
+}
+/** Squares, files or islands in chips; none as a faint dash. */
+function Chips({ items }) {
+    return items.length === 0 ? _jsx("span", { class: "none", children: "\u2013" }) : _jsx(_Fragment, { children: items.map((item) => _jsx("b", { class: "chip", children: item }, item)) });
+}
+/** A cell of the strategy (Stefano): a count in bold, a yes as a tick, nothing or not yet as a faint dash, no more as a faint cross: marks, not words. */
+function Cell({ cell, words }) {
+    const none = _jsx("span", { class: "none", children: "\u2013" });
+    if (typeof cell === "object") {
+        return cell.length === 0 ? none : _jsx("b", { class: "count", children: cell.length });
+    }
+    if (typeof cell === "number") {
+        return cell === 0 ? none : _jsx("b", { class: "count", children: cell });
+    }
+    if (typeof cell === "boolean") {
+        return cell
+            ? (_jsx("span", { class: "yes", role: "img", "aria-label": words.yes, title: words.yes, children: _jsx("svg", { viewBox: "0 0 16 16", children: _jsx("path", { d: "M3.5 8.5l3 3 6-7" }) }) }))
+            : none;
+    }
+    if (cell === "unknown") {
+        return none;
+    }
+    if (cell === "not-yet") {
+        return _jsx("span", { class: "none", role: "img", "aria-label": words.notYet, title: words.notYet, children: "\u2013" });
+    }
+    return cell === "no-more"
+        ? (_jsx("span", { class: "no", role: "img", "aria-label": words.noMore, title: words.noMore, children: _jsx("svg", { viewBox: "0 0 16 16", children: _jsx("path", { d: "M4.5 4.5l7 7M11.5 4.5l-7 7" }) }) }))
+        : _jsx("b", { class: "chip", children: cell });
+}

package/dist/page/helps/view.js

@@ -0,0 +1,127 @@
+/** The helps of a game's position, whatever the AI's level (D-79), seen from the player's side when the page knows it (D-91). */
+export function helpsOf(game, you) {
+    const facts = game.facts;
+    const pieces = new Map(facts.pieces.map((piece) => [piece.square, piece]));
+    const on = (square) => pieces.get(square);
+    const risks = (squares, why) => squares.map((square) => ({ piece: on(square), why }));
+    const toMove = game.position.turn;
+    const atRisk = [...risks(facts.undefended, "undefended"), ...risks(facts.attackedByCheaper, "cheaper"), ...risks(facts.outnumbered, "outnumbered")];
+    const pins = facts.pins.map((pin) => ({ piece: on(pin.square), by: on(pin.by), to: on(pin.to) }));
+    const checks = facts.checks;
+    const otherChecks = facts.otherChecks ?? [];
+    const loose = facts.loose.map(on);
+    return {
+        toMove,
+        you,
+        atRisk,
+        pins,
+        checks,
+        otherChecks,
+        loose,
+        lines: tacticLines({ toMove, atRisk, pins, checks, otherChecks, loose }, you),
+        strategy: game.profile,
+        sides: you === "black" ? ["black", "white"] : ["white", "black"],
+    };
+}
+/** How the helps mark a square's piece at risk (D-91): red when it is the player's, green when it is the other side's, in ink when no side is theirs. */
+export function riskOn(helps, square) {
+    const risk = helps.atRisk.find((risk) => risk.piece.square === square);
+    return risk === undefined ? undefined : toneOf(risk.piece.side, helps.you);
+}
+/** The squares a line of the tactics lights on the board: its pieces, and those that attack or pin them; none for the checks. */
+export function squaresOf(line) {
+    switch (line.kind) {
+        case "risk":
+            return line.items.flatMap(riskSquares);
+        case "pin":
+            return line.items.flatMap(pinSquares);
+        case "check":
+            return [];
+        case "loose":
+            return line.items.map((piece) => piece.square);
+    }
+}
+/** A piece at risk and its attackers. */
+export function riskSquares(risk) {
+    return [risk.piece.square, ...risk.piece.attackers];
+}
+/** A pinned piece, the one that pins it and the one behind it. */
+export function pinSquares(pin) {
+    return [pin.piece.square, pin.by.square, pin.to.square];
+}
+/** Which group each line of the strategy's table stands in. */
+export const groupOf = {
+    isolated: "pawns",
+    doubled: "pawns",
+    backward: "pawns",
+    passed: "pawns",
+    islands: "pawns",
+    halfOpen: "pieces",
+    heavyOnFiles: "pieces",
+    onSeventh: "pieces",
+    outposts: "pieces",
+    bishopPair: "pieces",
+    space: "pieces",
+    undeveloped: "pieces",
+    castled: "king",
+    kingAttacks: "king",
+};
+/** 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,
+};
+// The tactics' lines that have something: with the player's side, their pieces at risk and pinned and the other side's checks, then the same the other way
+// round; without it, White's then Black's; the loose pieces last.
+function tacticLines(facts, you) {
+    const sideLines = (side) => [
+        { kind: "risk", side, tone: toneOf(side, you), items: facts.atRisk.filter((risk) => risk.piece.side === side) },
+        { kind: "pin", side, tone: toneOf(side, you), items: facts.pins.filter((pin) => pin.piece.side === side) },
+    ];
+    const checkLine = (side) => ({
+        kind: "check",
+        side,
+        tone: you === undefined ? "neutral" : side === you ? "chance" : "threat",
+        toMove: side === facts.toMove,
+        items: side === facts.toMove ? facts.checks : facts.otherChecks,
+    });
+    // The player's threats are their pieces' troubles and the other side's checks; their chances the other way round.
+    const lines = you === undefined
+        ? [...sideLines("white"), checkLine("white"), ...sideLines("black"), checkLine("black")]
+        : [...sideLines(you), checkLine(otherSide(you)), ...sideLines(otherSide(you)), checkLine(you)];
+    const loose = { kind: "loose", tone: "neutral", items: facts.loose };
+    return [...lines, loose].filter((line) => line.items.length > 0);
+}
+function otherSide(side) {
+    return side === "white" ? "black" : "white";
+}
+// A piece's trouble is a threat to its side's player and a chance for the other.
+function toneOf(side, you) {
+    return you === undefined ? "neutral" : side === you ? "threat" : "chance";
+}
+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/layout/fold-tab.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "preact/jsx-runtime";
+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, and a mark in the
+ * other corner, as the AI's thought cloud.
+ */
+export function FoldTab({ column, folded, label, unread = false, mark, 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: _jsxs("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" }) }), mark] }) }));
+}

package/dist/page/{folds.js → layout/folds.js}

@@ -1,4 +1,4 @@
-// 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
+// The side columns the player folds: 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: "]" };

package/dist/page/{header.js → layout/header.js}

@@ -1,12 +1,13 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "preact/jsx-runtime";
-import { Torretta } from "./torretta.js";
+import { PlayerPicture } from "../avatars/avatars.js";
+import { Torretta } from "../avatars/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
+ * The header, with how a game over ended, 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" })] }) })] }));
+export function Header({ text, verdict, kind, who, actions, onNewGame, standOut = false, onStudy, flipped, onFlip, sound, onSound, onTheme, onSettings, profile, onProfile }) {
+    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: "icon-button", 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: "icon-button", 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: "icon-button", 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" })] }) }), profile === undefined || onProfile === undefined ? null : (_jsx("button", { class: "icon-button player", type: "button", title: `${profile.name}: ${text.profile.profiles}`, "aria-label": `${profile.name}: ${text.profile.profiles}`, "aria-haspopup": "dialog", onClick: onProfile, children: _jsx(PlayerPicture, { profile: profile, size: 28 }) }))] }));
 }
 /** The answer to the AI's draw offer while it stands, else the player's own offer; then the resignation. */
 function Actions({ actions, text }) {