chesspal 0.0.1 → 0.2.0

package/dist/page/board/board.js

@@ -0,0 +1,125 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "preact/jsx-runtime";
+// The board: eight ranks of squares from a FEN, one side at the bottom, Zoe's pieces, the ranks and files on the edge squares. The player moves
+// with two clicks or by dragging a piece, which lifts off the board, in Zoe's design.
+import { useMemo, useRef } from "preact/hooks";
+import { BadgeIcon } from "../game/badges.js";
+import { riskOn } from "../helps/view.js";
+import { Piece } from "../pieces/pieces.js";
+import { bubblePlace, keptSquares } from "./explain.js";
+import { Arrows, Badge, Bubble, ControlCount, controlOf, kingSigns, Lifted, noSigns, Notch, Pins, PromotionChoice } from "./marks.js";
+import { backOf, motionOf, noMotion, playedOn, rearranged } from "./motion.js";
+import { useBoardPointer } from "./pointer.js";
+import { files, kingToMove, piecesOf } from "./squares.js";
+/**
+ * The board of a position, seen from one side, with the last move's squares marked. While the player may move, their pieces answer the pointer: a press
+ * picks one, and the legal moves of the piece picked show as dots, rings on captures; a second press on one of them, or a drag there, plays it. At any time
+ * the right button lights a square, or draws an arrow when dragged, until a left click.
+ */
+export function Board({ fen, bottom, lastMove, pointed, helps, control, bare, badge, drawn, nextMove, jumped, check, end, player, selected, targets, dots, names, notice, promotion, onSelect, onMove, onRefuse, onPromote, text }) {
+    const pieces = piecesOf(fen);
+    const mated = end?.how === "checkmate" ? kingToMove(fen, pieces) : undefined;
+    const signs = end === undefined ? noSigns : kingSigns(pieces, fen.split(" ")[1] === "b" ? "black" : "white", end);
+    const ranks = bottom === "white" ? [8, 7, 6, 5, 4, 3, 2, 1] : [1, 2, 3, 4, 5, 6, 7, 8];
+    const columns = bottom === "white" ? [...files] : [...files].reverse();
+    const seen = (square) => [columns.indexOf(square[0]), ranks.indexOf(Number(square[1]))];
+    const centreOf = (square) => [columns.indexOf(square[0]) + 0.5, ranks.indexOf(Number(square[1])) + 0.5];
+    const { board, drag, marks, drawing, focused, dragged, own, isTarget, down, moveTo, release, key, pressKey, promote, setCursor } = useBoardPointer({
+        columns,
+        ranks,
+        pieces,
+        player,
+        selected,
+        targets,
+        promotion,
+        onSelect,
+        onMove,
+        onRefuse,
+        onPromote,
+    });
+    // A new position slides the pieces of its move there, but for the one the player dragged, and shakes a king in check.
+    const before = useRef(undefined);
+    const motion = useMemo(() => {
+        const was = before.current === undefined ? undefined : piecesOf(before.current);
+        before.current = fen;
+        // A move played on the position before slides there, a step back over one slides it home; a jump through the game moves every piece to its place.
+        const fresh = was !== undefined && jumped !== true && lastMove !== undefined && playedOn(was, pieces, lastMove);
+        const undone = was !== undefined && jumped !== true && nextMove !== undefined && playedOn(pieces, was, nextMove);
+        const moved = was === undefined
+            ? noMotion
+            : fresh
+                ? motionOf(lastMove, dragged.current, check ? kingToMove(fen, pieces) : undefined, was)
+                : undone
+                    ? backOf(nextMove)
+                    : jumped === true
+                        ? rearranged(was, pieces)
+                        : noMotion;
+        dragged.current = undefined;
+        return moved;
+    }, [fen]);
+    // The arrows on the board, the AI's and the coach's under the player's, none while the board is bare; the helps' step aside while the player picks up
+    // a piece to move it (Stefano).
+    const aiArrows = bare === true || selected !== undefined || drag !== undefined ? [] : drawn?.arrows ?? [];
+    const ownArrows = bare === true ? [] : drawing === undefined ? marks.arrows : [...marks.arrows, drawing];
+    // The bare board hides the helps' signs too, the corners on the pieces at risk and the pins' lines (Stefano).
+    const signsOfHelps = bare === true ? undefined : helps;
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { ref: board, class: ["board", player === undefined ? "" : "playable", end === undefined ? "" : endClasses(end), control === undefined ? "" : "mapping", names ? "named" : ""].filter((name) => name !== "").join(" "), role: "group", "aria-label": text.boardLabel(fen.split(" ")[1] === "b" ? "black" : "white", lastMove?.san), onPointerDown: down, onPointerMove: moveTo, onPointerUp: (event) => release(event, false), onPointerCancel: (event) => release(event, true), onContextMenu: (event) => event.preventDefault(), 
+                // A click takes no focus, nor leaves it elsewhere: the arrows keep browsing the moves; a square has the focus only from the keyboard.
+                onMouseDown: (event) => {
+                    event.preventDefault();
+                    document.activeElement?.blur();
+                }, children: [ranks.flatMap((rank, row) => columns.map((file, column) => {
+                        const square = `${file}${rank}`;
+                        const piece = pieces.get(square);
+                        const dark = (files.indexOf(file) + rank) % 2 === 1;
+                        const marked = lastMove !== undefined && (lastMove.from === square || lastMove.to === square);
+                        const target = targets.find((move) => move.to === square);
+                        const sign = signs.get(square);
+                        const tinted = bare === true ? undefined : drawn?.squares?.find((one) => one.square === square)?.colour;
+                        const classes = [
+                            "square",
+                            dark ? "dark" : "light",
+                            marked ? "last" : "",
+                            mated === square ? "mated" : "",
+                            sign?.classes ?? "",
+                            selected === square ? "selected" : "",
+                            tinted === undefined ? "" : `noted ${tinted}`,
+                            bare !== true && marks.squares.includes(square) ? "marked" : "",
+                            pointed?.includes(square) === true ? "pointed" : "",
+                            notice?.explanation?.ring === square ? "culprit" : "",
+                            own(square) ? "own" : "",
+                            target === undefined ? "" : !dots ? "target" : target.san.includes("x") ? "hint capture" : "hint",
+                            drag?.over === square && drag.over !== drag.from ? "over" : "",
+                            drag?.from === square ? "from" : "",
+                            motion.slides.has(square) ? "slide" : "",
+                            motion.shake === square ? "shake" : "",
+                            motion.appear?.has(square) === true ? "appear" : "",
+                        ].filter((name) => name !== "").join(" ");
+                        const named = piece === undefined ? square : `${square}, ${text.piece(piece.toUpperCase(), piece === piece.toUpperCase() ? "white" : "black")}`;
+                        const label = [named, mated === square ? text.checkmate : "", isTarget(square) ? text.canGo : ""].filter((part) => part !== "").join(", ");
+                        const from = motion.slides.get(square);
+                        const moving = from !== undefined || motion.shake === square || motion.appear?.has(square) === true;
+                        // How far the sliding piece comes from, in squares as the board is turned.
+                        const away = from === undefined ? undefined : {
+                            "--dx": columns.indexOf(from[0]) - column,
+                            "--dy": ranks.indexOf(Number(from[1])) - row,
+                        };
+                        const risk = signsOfHelps === undefined ? undefined : riskOn(signsOfHelps, square);
+                        return (_jsxs("div", { class: classes, role: "button", "aria-label": label, "aria-pressed": own(square) ? selected === square : undefined, tabIndex: square === focused ? 0 : -1, "data-square": square, onKeyDown: (event) => key(event, square), onFocus: () => setCursor(square), 
+                            // A click with no pointer behind it, as a screen reader's in browse mode, presses the square as Enter does.
+                            onClick: (event) => event.detail === 0 && pressKey(square), style: away, children: [column === 0 ? _jsx("span", { class: "coordinate rank", children: rank }) : null, row === 7 ? _jsx("span", { class: "coordinate file", children: file }) : null, _jsx("span", { class: "square-name", "aria-hidden": "true", children: square }), motion.taken?.square === square
+                                    ? (_jsx("span", { class: "taken-piece", children: _jsx(Piece, { letter: motion.taken.letter }) }, `taken ${fen}`))
+                                    : null, motion.gone?.filter((gone) => gone.square === square).map((gone) => (_jsx("span", { class: "gone-piece", children: _jsx(Piece, { letter: gone.letter }) }, `gone ${fen}`))), control === undefined ? null : _jsx("span", { class: `control-ground ${controlOf(control[square])}`, "aria-hidden": "true" }), piece === undefined ? null : _jsx(Piece, { letter: piece }, moving ? fen : "still"), sign === undefined ? null : _jsx(Badge, { kind: sign.badge }), risk === undefined ? null : _jsx(Notch, { tone: risk }), control === undefined ? null : _jsx(ControlCount, { counts: control[square] }), badge === undefined || lastMove?.to !== square ? null : _jsx(BadgeIcon, { badge: badge.badge, title: badge.name })] }, square));
+                    })), signsOfHelps === undefined || signsOfHelps.pins.length === 0 || control !== undefined ? null : _jsx(Pins, { pins: signsOfHelps.pins, at: centreOf })] }), _jsx(Arrows, { arrows: aiArrows, at: centreOf, occupied: (square) => pieces.has(square) }), _jsx(Arrows, { arrows: ownArrows, at: centreOf }), notice?.explanation?.arrow === undefined ? null : _jsx(Arrows, { arrows: [notice.explanation.arrow], at: centreOf, explain: { occupied: pieces.has(notice.explanation.arrow.to) } }), drag === undefined || !pieces.has(drag.from) ? null : _jsx(Lifted, { drag: drag, letter: pieces.get(drag.from) }), promotion === undefined
+                ? null
+                : _jsx(PromotionChoice, { side: promotion.side, column: columns.indexOf(promotion.to[0]), down: ranks[0] === Number(promotion.to[1]), onPick: promote, text: text }), notice === undefined ? null : (_jsx(Bubble, { notice: notice, place: notice.square === undefined ? undefined : seen(notice.square), where: notice.square === undefined
+                    ? "above"
+                    : bubblePlace(seen(notice.square), keptSquares(notice.explanation).map(seen), (board.current?.clientWidth ?? 0) < narrowBoard) }))] }));
+}
+/** The board's classes at the end: how the game ended, and, a moment after it did, whether the player won or lost, which pick the effects in the style. */
+function endClasses(end) {
+    const side = end.winner === undefined ? "" : end.winner === end.player ? "player-won" : "player-lost";
+    const classes = ["ended", end.how === undefined ? "" : `by-${end.how.replaceAll(" ", "-")}`, end.fresh ? `fresh ${side}` : ""];
+    return classes.filter((name) => name !== "").join(" ").trim();
+}
+// A board narrower than this, in pixels, is a phone's: its bubble takes the board's width, and goes under the board when it has no room on it.
+const narrowBoard = 520;

package/dist/page/board/explain.js

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

package/dist/page/board/marks.js

@@ -0,0 +1,160 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "preact/jsx-runtime";
+// What the board draws over its squares and pieces: the kings' badges at the end, the arrows, the helps' corners and pins, the control map's counts, the
+// bubble of a refused move, the choice of a promotion and the piece lifted off the board.
+import { useEffect, useRef, useState } from "preact/hooks";
+import { Piece } from "../pieces/pieces.js";
+/** The corner folded on a piece at risk, red on the player's and green on the other side's, in ink when no side is theirs (D-91); before its line in the card. */
+export function Notch({ tone }) {
+    return (_jsx("span", { class: tone === undefined ? "help-notch" : `help-notch ${tone}`, "aria-hidden": "true", children: _jsxs("svg", { viewBox: "0 0 10 10", children: [_jsx("path", { d: "M0.5 0.5V9.5H9.5Z" }), tone === undefined ? null : _jsx("path", { class: "edge", d: "M0.5 0.5V9.5H9.5Z" }), _jsx("circle", { cx: "2.9", cy: "7.1", r: "1.1" })] }) }));
+}
+/** A king's badge in the corner of its square. */
+export function Badge({ kind }) {
+    return (_jsx("span", { class: `badge ${kind}`, "aria-hidden": "true", children: kind === "mate" ? "#" : kind === "half" ? "½" : (_jsx("svg", { viewBox: "0 0 24 24", children: kind === "crown" ? _jsx("path", { d: "M4 18L3 7L8.5 11L12 5L15.5 11L21 7L20 18Z" }) : _jsx("path", { d: "M6 21V4M6 4.5C10 2.5 13 6.5 18 4.5V13.5C13 15.5 10 11.5 6 13.5" }) })) }));
+}
+/**
+ * The arrows over the board, in squares from its top left corner: a knight's turns once, the long leg first. In ink when they explain a refused move, and
+ * cut short (Zoe): off the culprit's piece, and before the piece they point at, so both stay in sight.
+ */
+export function Arrows({ arrows, at, explain, occupied }) {
+    if (arrows.length === 0) {
+        return null;
+    }
+    const point = occupied === undefined ? arrowHead : helpsHead;
+    const shapes = arrows.map(({ from, to, colour }) => {
+        const [startX, startY] = at(from);
+        const [pointX, pointY] = at(to);
+        const knight = Math.abs(pointX - startX) * Math.abs(pointY - startY) === 2;
+        const corner = !knight
+            ? undefined
+            : Math.abs(pointY - startY) > Math.abs(pointX - startX)
+                ? [startX, pointY]
+                : [pointX, startY];
+        const [x0, y0] = explain === undefined ? [startX, startY] : towards([startX, startY], corner ?? [pointX, pointY], explainTrim.start);
+        const [x1, y1] = explain?.occupied === true || occupied?.(to) === true ? towards([pointX, pointY], corner ?? [startX, startY], explainTrim.end) : [pointX, pointY];
+        const [fromX, fromY] = corner ?? [x0, y0];
+        const length = Math.hypot(x1 - fromX, y1 - fromY);
+        const [dx, dy] = [(x1 - fromX) / length, (y1 - fromY) / length];
+        const [endX, endY] = [x1 - dx * point.length, y1 - dy * point.length];
+        const side = (sign) => `${endX - dy * point.width * sign},${endY + dx * point.width * sign}`;
+        // The shaft runs a quarter into the point, and its round cap a little further, so no seam shows and the cap stays inside the point.
+        const [shaftX, shaftY] = [x1 - dx * point.length * 0.75, y1 - dy * point.length * 0.75];
+        const shaft = `M${x0} ${y0}${corner === undefined ? "" : ` L${corner[0]} ${corner[1]}`} L${shaftX} ${shaftY}`;
+        const head = `${side(1)} ${x1},${y1} ${side(-1)}`;
+        return { key: `${from}${to}`, from, colour, shaft, head };
+    });
+    // Arrows off one square meet in one shape; an arrow from elsewhere keeps its own edge over them, so no shape is lost where points meet (Stefano).
+    const starts = [...new Set(shapes.map(({ from }) => from))];
+    return (_jsx("svg", { class: explain !== undefined ? "arrows explain" : occupied !== undefined ? "arrows drawn" : "arrows", viewBox: "0 0 8 8", "aria-hidden": "true", children: starts.map((start) => _jsx(ArrowGroup, { shapes: shapes.filter(({ from }) => from === start), edged: occupied !== undefined }, start)) }));
+}
+/** Each pin as a dashed line from the pinning piece through the pinned one to what stands behind it (D-78), over a halo that reads on every board. */
+export function Pins({ pins, at }) {
+    return (_jsx("svg", { class: "helps-layer", viewBox: "0 0 8 8", "aria-hidden": "true", children: pins.map((pin) => {
+            // The line stops short of both ends, as an explaining arrow does: it hides neither piece, nor the corner of a pinner at risk.
+            const [x0, y0] = towards(at(pin.by.square), at(pin.to.square), pinTrim);
+            const [x1, y1] = towards(at(pin.to.square), at(pin.by.square), pinTrim);
+            return (_jsxs("g", { class: "pin", children: [_jsx("line", { class: "halo", x1: x0, y1: y0, x2: x1, y2: y1 }), _jsx("line", { x1: x0, y1: y0, x2: x1, y2: y1 })] }, `${pin.by.square}${pin.piece.square}`));
+        }) }));
+}
+/** A square's counts on the control map, as a domino in its middle: how many of White's pieces reach it, and of Black's; none when no piece does. */
+export function ControlCount({ counts }) {
+    const [white, black] = counts ?? [0, 0];
+    if (white === 0 && black === 0) {
+        return null;
+    }
+    return (_jsxs("span", { class: "control-count", "aria-hidden": "true", children: [_jsx("b", { class: "white", children: white }), _jsx("b", { class: "black", children: black })] }));
+}
+/** Who reaches a square on the control map: only White, only Black, both or none. */
+export function controlOf(counts) {
+    const [white, black] = counts ?? [0, 0];
+    return white > 0 && black > 0 ? "both" : white > 0 ? "white" : black > 0 ? "black" : "none";
+}
+/**
+ * A bubble by the piece of a refused move, where it hides neither the culprit nor the arrow's point (`where`), kept on the board at its edges; in the
+ * board's middle without a piece.
+ */
+export function Bubble({ notice, place, where }) {
+    if (place === undefined) {
+        return _jsx("p", { class: "notice centre", role: "alert", children: notice.text }, notice.text);
+    }
+    const [column, row] = place;
+    const align = column <= 1 ? "start" : column >= 6 ? "end" : "middle";
+    const kind = notice.explanation?.kind;
+    return (_jsxs("p", { class: `notice ${align} ${where}`, role: "alert", style: { "--column": column, "--row": row }, children: [kind === undefined || notice.piece === undefined ? null : _jsx(ExplainIcon, { kind: kind, piece: notice.piece }), _jsx("span", { children: notice.text })] }, `${notice.square} ${notice.text}`));
+}
+/** The pieces a pawn may become, in a column from its square toward the middle of the board, over a shade that cancels the move; Esc cancels it too. */
+export function PromotionChoice({ side, column, down, onPick, text }) {
+    const first = useRef(null);
+    useEffect(() => {
+        first.current?.focus();
+        const escape = (event) => {
+            if (event.key === "Escape") {
+                onPick(undefined);
+            }
+        };
+        addEventListener("keydown", escape);
+        return () => removeEventListener("keydown", escape);
+    }, []);
+    return (_jsxs("div", { class: "promotion", role: "group", "aria-label": text.promoteTo, children: [_jsx("div", { class: "promotion-shade", onPointerDown: () => onPick(undefined) }), promotionPieces.map((piece, index) => (_jsx("button", { ref: index === 0 ? first : undefined, type: "button", class: "promotion-piece", style: { "--column": column, "--row": down ? index : 7 - index }, "aria-label": text.piece(piece.toUpperCase(), side), onClick: () => onPick(piece), children: _jsx(Piece, { letter: side === "white" ? piece.toUpperCase() : piece }) }, piece)))] }));
+}
+/** The piece lifted off the board: it rises a frame after it appears, so it grows into the air. */
+export function Lifted({ drag, letter }) {
+    const [up, setUp] = useState(false);
+    useEffect(() => {
+        const frame = requestAnimationFrame(() => setUp(true));
+        return () => cancelAnimationFrame(frame);
+    }, []);
+    const classes = ["lifted", up && !drag.back ? "up" : "", drag.touch ? "touch" : "", drag.back ? "back" : ""].filter((name) => name !== "").join(" ");
+    return (_jsx("div", { class: classes, style: { "--x": `${drag.at[0]}px`, "--y": `${drag.at[1]}px` }, children: _jsx(Piece, { letter: letter }) }));
+}
+/** The kings' signs at the end, by their squares: the loser's king lies down when mated or resigning; both kings of a draw stand, the stalemated one stuck. */
+export function kingSigns(pieces, toMove, end) {
+    const kingOf = (side) => [...pieces].find(([, letter]) => letter === (side === "white" ? "K" : "k"))?.[0];
+    const signs = new Map();
+    const sign = (side, badge, classes) => {
+        const square = kingOf(side);
+        if (square !== undefined) {
+            signs.set(square, { badge, classes });
+        }
+    };
+    if (end.winner === undefined) {
+        sign("white", "half", end.how === "stalemate" && toMove === "white" ? "drawn stalled" : "drawn");
+        sign("black", "half", end.how === "stalemate" && toMove === "black" ? "drawn stalled" : "drawn");
+        return signs;
+    }
+    const loser = end.winner === "white" ? "black" : "white";
+    sign(end.winner, "crown", "winner");
+    if (end.how === "checkmate" || end.how === "resignation") {
+        sign(loser, end.how === "checkmate" ? "mate" : "flag", "fallen");
+    }
+    return signs;
+}
+export const noSigns = new Map();
+/** Arrows off one square, the AI's on a white edge (D-78): every edge under every arrow, so one edge goes round them all where they meet. */
+function ArrowGroup({ shapes, edged }) {
+    return (_jsxs("g", { children: [edged
+                ? shapes.map(({ key, shaft, head }) => (_jsxs("g", { children: [_jsx("path", { class: "edge", d: shaft }), _jsx("polygon", { class: "edge", points: head })] }, `edge${key}`)))
+                : null, shapes.map(({ key, colour, shaft, head }) => (_jsxs("g", { class: colour, children: [_jsx("path", { d: shaft }), _jsx("polygon", { points: head })] }, key)))] }));
+}
+/** A point `distance` squares from `point` toward `target`. */
+function towards(point, target, distance) {
+    const length = Math.hypot(target[0] - point[0], target[1] - point[1]);
+    return [point[0] + (target[0] - point[0]) / length * distance, point[1] + (target[1] - point[1]) / length * distance];
+}
+/** The bubble's icon for a kind of reason: the piece moved, a pin, the player's king on red, a bar, the two ways of castling. */
+function ExplainIcon({ kind, piece }) {
+    const white = piece === piece.toUpperCase();
+    return (_jsx("span", { class: `explain-icon ${kind}`, "aria-hidden": "true", children: kind === "piece" ? _jsx(Piece, { letter: piece }) : kind === "king" ? _jsx(Piece, { letter: white ? "K" : "k" }) : (_jsx("svg", { viewBox: "0 0 24 24", children: kind === "pin"
+                ? _jsx("path", { d: "M9 3h6M10 3v6l-3 4h10l-3-4V3M12 13v8" })
+                : kind === "blocked"
+                    ? (_jsxs(_Fragment, { children: [_jsx("circle", { cx: "12", cy: "12", r: "8.5" }), _jsx("path", { class: "bar", d: "M7.5 12h9" })] }))
+                    : _jsx("path", { d: "M4 8h15M15 4l4 4-4 4M20 16H5M9 12l-4 4 4 4" }) })) }));
+}
+const promotionPieces = ["q", "n", "r", "b"];
+// How much an arrow that explains is cut, in squares: off the culprit at its start, and before an occupied square at its point.
+const explainTrim = { start: 0.36, end: 0.4 };
+// How much a pin's line is cut at each end, in squares.
+const pinTrim = 0.35;
+// An arrow's head, in squares: how long, and how far each side of its line.
+const arrowHead = { length: 0.42, width: 0.3 };
+// The helps' point, smaller in step with their thinner shaft (Stefano).
+const helpsHead = { length: 0.3, width: 0.21 };

package/dist/page/board/motion.js

@@ -0,0 +1,71 @@
+import { files } from "./squares.js";
+export const noMotion = { slides: new Map() };
+/**
+ * The last move slides, but for a piece the player dragged there (`dragged`, its squares), over the piece it takes, as it stood `before`; a castling rook
+ * slides always.
+ */
+export function motionOf(move, dragged, shake, before) {
+    const slides = new Map();
+    let taken;
+    if (dragged !== `${move.from}${move.to}`) {
+        slides.set(move.to, move.from);
+        // A pawn that takes en passant lands beside the pawn it takes.
+        const square = before.has(move.to) ? move.to : before.get(move.from)?.toLowerCase() === "p" && move.from[0] !== move.to[0] ? `${move.to[0]}${move.from[1]}` : undefined;
+        const letter = square === undefined ? undefined : before.get(square);
+        taken = square === undefined || letter === undefined ? undefined : { square, letter };
+    }
+    const rank = move.from[1];
+    if (move.san.startsWith("O-O-O")) {
+        slides.set(`d${rank}`, `a${rank}`);
+    }
+    else if (move.san.startsWith("O-O")) {
+        slides.set(`f${rank}`, `h${rank}`);
+    }
+    return { slides, ...(taken === undefined ? {} : { taken }), ...(shake === undefined ? {} : { shake }) };
+}
+/**
+ * A jump through the game, from the pieces `before` to those `now`: each piece slides to the nearest square where one like it stands now, the closest pairs
+ * first; a piece left over fades, and one that has no piece to come from appears.
+ */
+export function rearranged(before, now) {
+    const left = [...before].filter(([square, letter]) => now.get(square) !== letter);
+    const arrived = [...now].filter(([square, letter]) => before.get(square) !== letter);
+    const pairs = arrived
+        .flatMap(([to, letter]) => left.filter(([, was]) => was === letter).map(([from]) => ({ from, to, distance: distanceOf(from, to) })))
+        .sort((one, other) => one.distance - other.distance);
+    const slides = new Map();
+    const moved = new Set();
+    for (const { from, to } of pairs) {
+        if (!slides.has(to) && !moved.has(from)) {
+            slides.set(to, from);
+            moved.add(from);
+        }
+    }
+    return {
+        slides,
+        appear: new Set(arrived.map(([square]) => square).filter((square) => !slides.has(square))),
+        gone: left.filter(([square]) => !moved.has(square)).map(([square, letter]) => ({ square, letter })),
+    };
+}
+/** A move taken back: its piece, and a castling rook, slide home; a piece it took is there again under the one leaving. */
+export function backOf(move) {
+    const rank = move.from[1];
+    const slides = new Map([[move.from, move.to]]);
+    if (move.san.startsWith("O-O-O")) {
+        slides.set(`a${rank}`, `d${rank}`);
+    }
+    else if (move.san.startsWith("O-O")) {
+        slides.set(`h${rank}`, `f${rank}`);
+    }
+    return { slides };
+}
+/** Whether the pieces `now` are those `before` with the move played: the piece on its square came from where it began, a pawn there when it promoted. */
+export function playedOn(before, now, move) {
+    const piece = before.get(move.from);
+    const landed = now.get(move.to);
+    return piece !== undefined && !now.has(move.from) && (landed === piece || (move.san.includes("=") && piece.toLowerCase() === "p"));
+}
+/** How far apart two squares are, in squares. */
+function distanceOf(from, to) {
+    return Math.hypot(files.indexOf(from[0]) - files.indexOf(to[0]), Number(from[1]) - Number(to[1]));
+}