chesspal 0.1.0 → 0.2.0

package/dist/page/board.js

@@ -1,566 +0,0 @@
-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 (T-9), 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 (T-70).
-import { useEffect, useMemo, useRef, useState } from "preact/hooks";
-import { BadgeIcon } from "./badges.js";
-import { bubblePlace, keptSquares } from "./explain.js";
-import { atRiskOn } from "./helps-view.js";
-import { Notch } from "./helps.js";
-import { Piece } from "./pieces.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, badge, drawn, nextMove, jumped, check, end, player, selected, targets, dots, 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 = useRef(null);
-    const press = useRef(undefined);
-    const [drag, setDrag] = useState(undefined);
-    const marking = useRef(undefined);
-    const [marks, setMarks] = useState(noMarks);
-    const [drawing, setDrawing] = useState(undefined);
-    // A new position slides the pieces of its move there, but for the one the player dragged, and shakes a king in check (T-74).
-    const before = useRef(undefined);
-    const dragged = 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 (T-88).
-        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]);
-    const own = (square) => {
-        const piece = pieces.get(square);
-        return player !== undefined && piece !== undefined && (piece === piece.toUpperCase()) === (player === "white");
-    };
-    // Where a move to a square lands: there, or castling's square for a king taken onto its own rook, as on Lichess; none for a square it cannot go to.
-    const landing = (square) => targets.find((move) => move.to === square || rookOf(move) === square)?.to;
-    const isTarget = (square) => landing(square) !== undefined;
-    // A press on a square that is not the player's, and none of the piece picked's moves, puts the piece down, saying why it cannot go there.
-    const putDown = (square) => {
-        onSelect(undefined);
-        if (selected !== undefined) {
-            onRefuse(selected, square);
-        }
-    };
-    // The keyboard (T-11): the arrows move between the squares as the board is turned, Enter and Space press one as a click does, Esc puts the piece down.
-    const [cursor, setCursor] = useState(undefined);
-    const focused = cursor ?? selected ?? `${columns[0]}${ranks[7]}`;
-    const key = (event, square) => {
-        const step = arrowSteps[event.key];
-        if (step !== undefined) {
-            const column = Math.min(7, Math.max(0, columns.indexOf(square[0]) + step[0]));
-            const row = Math.min(7, Math.max(0, ranks.indexOf(Number(square[1])) + step[1]));
-            const next = `${columns[column]}${ranks[row]}`;
-            event.preventDefault();
-            setCursor(next);
-            board.current.querySelector(`[data-square="${next}"]`).focus();
-        }
-        else if (event.key === "Enter" || event.key === " ") {
-            event.preventDefault();
-            pressKey(square);
-        }
-        else if (event.key === "Escape" && selected !== undefined) {
-            onSelect(undefined);
-        }
-    };
-    // The focus goes back to the board after the choice of a promotion: to the pawn's square when it was cancelled, else to where it went.
-    const promote = (piece) => {
-        const back = piece === undefined ? promotion.from : promotion.to;
-        onPromote(piece);
-        setCursor(back);
-        requestAnimationFrame(() => board.current?.querySelector(`[data-square="${back}"]`)?.focus());
-    };
-    const pressKey = (square) => {
-        setMarks(noMarks);
-        if (player === undefined) {
-            return;
-        }
-        if (selected !== undefined && isTarget(square)) {
-            onMove(selected, landing(square));
-        }
-        else if (own(square)) {
-            onSelect(selected === square ? undefined : square);
-        }
-        else {
-            putDown(square);
-        }
-    };
-    // The square under a point, as the board is turned; none off the board.
-    const squareAt = (x, y) => {
-        const box = board.current.getBoundingClientRect();
-        const column = Math.floor((x - box.left) / (box.width / 8));
-        const row = Math.floor((y - box.top) / (box.height / 8));
-        return column >= 0 && column < 8 && row >= 0 && row < 8 ? `${columns[column]}${ranks[row]}` : undefined;
-    };
-    // Where a square's corner is in the window.
-    const cornerOf = (square) => {
-        const box = board.current.getBoundingClientRect();
-        const size = box.width / 8;
-        return [box.left + columns.indexOf(square[0]) * size, box.top + ranks.indexOf(Number(square[1])) * size];
-    };
-    const goBack = () => {
-        setDrag((now) => now === undefined ? undefined : { ...now, at: cornerOf(now.from), over: undefined, back: true });
-    };
-    useEffect(() => {
-        if (drag === undefined) {
-            return;
-        }
-        // Esc puts the piece back; a piece going back lands within 260 ms, whether its transition ends or not.
-        const escape = (event) => {
-            if (event.key === "Escape") {
-                press.current = undefined;
-                goBack();
-            }
-        };
-        const landed = drag.back ? setTimeout(() => setDrag(undefined), reducedMotion() ? 0 : 260) : undefined;
-        addEventListener("keydown", escape);
-        document.documentElement.classList.add("dragging");
-        return () => {
-            removeEventListener("keydown", escape);
-            document.documentElement.classList.remove("dragging");
-            clearTimeout(landed);
-        };
-    }, [drag?.back, drag === undefined]);
-    const down = (event) => {
-        const square = squareAt(event.clientX, event.clientY);
-        if (square === undefined) {
-            return;
-        }
-        // The right button marks a square, or draws an arrow when dragged (T-73); the left one clears them all, and moves.
-        if (event.button === 2) {
-            marking.current = { from: square, id: event.pointerId };
-            board.current.setPointerCapture(event.pointerId);
-            return;
-        }
-        if (event.button !== 0) {
-            return;
-        }
-        setMarks(noMarks);
-        if (player === undefined || drag !== undefined) {
-            return;
-        }
-        if (selected !== undefined && isTarget(square)) {
-            // A finger plays when it lifts, so a page scrolled from a dot plays nothing.
-            if (event.pointerType === "touch") {
-                press.current = { from: selected, to: landing(square), x: event.clientX, y: event.clientY, was: false, touch: true, id: event.pointerId, moved: false };
-            }
-            else {
-                onMove(selected, landing(square));
-            }
-            return;
-        }
-        if (!own(square)) {
-            putDown(square);
-            return;
-        }
-        press.current = { from: square, x: event.clientX, y: event.clientY, was: selected === square, touch: event.pointerType === "touch", id: event.pointerId, moved: false };
-        board.current.setPointerCapture(event.pointerId);
-        onSelect(square);
-    };
-    const moveTo = (event) => {
-        const mark = marking.current;
-        if (mark !== undefined && event.pointerId === mark.id) {
-            const to = squareAt(event.clientX, event.clientY);
-            setDrawing(to === undefined || to === mark.from ? undefined : { from: mark.from, to });
-            return;
-        }
-        const now = press.current;
-        if (now === undefined || event.pointerId !== now.id) {
-            return;
-        }
-        const box = board.current.getBoundingClientRect();
-        const size = box.width / 8;
-        const distance = Math.hypot(event.clientX - now.x, event.clientY - now.y);
-        if (now.to !== undefined) {
-            if (distance >= 8) {
-                press.current = undefined;
-            }
-            return;
-        }
-        // A press becomes a drag past 4 px of the mouse, 8 of a finger; before, it is a click.
-        if (drag === undefined && distance < (now.touch ? 8 : 4)) {
-            return;
-        }
-        now.moved ||= distance >= size / 2;
-        // A finger holds the piece three quarters of a square above it, and drops it where the piece is seen; until it has gone half a square, the
-        // piece stays on its own, so a touch never pushes it a square on by mistake.
-        const over = now.touch && !now.moved ? now.from : squareAt(event.clientX, now.touch ? event.clientY - 0.75 * size : event.clientY);
-        setDrag({ from: now.from, at: [event.clientX - size / 2, event.clientY - size / 2], over, touch: now.touch, back: false });
-    };
-    const release = (event, cancelled) => {
-        const mark = marking.current;
-        if (mark !== undefined && event.pointerId === mark.id) {
-            const to = squareAt(event.clientX, event.clientY);
-            marking.current = undefined;
-            setDrawing(undefined);
-            if (!cancelled && to !== undefined) {
-                setMarks((now) => toggled(now, mark.from, to));
-            }
-            return;
-        }
-        const now = press.current;
-        if (now === undefined || event.pointerId !== now.id) {
-            return;
-        }
-        press.current = undefined;
-        if (now.to !== undefined) {
-            if (!cancelled) {
-                onMove(now.from, now.to);
-            }
-            return;
-        }
-        if (drag === undefined) {
-            // A click on the piece already picked puts it down.
-            if (now.was) {
-                onSelect(undefined);
-            }
-            return;
-        }
-        const to = drag.over;
-        const landed = to === undefined || to === drag.from ? undefined : landing(to);
-        if (!cancelled && landed !== undefined) {
-            setDrag(undefined);
-            dragged.current = `${drag.from}${landed}`;
-            onMove(drag.from, landed);
-        }
-        else if (!cancelled && to === drag.from) {
-            setDrag(undefined);
-        }
-        else {
-            goBack();
-            // A game that changed under the drag may have given the turn away: no reason for a piece that may not move.
-            if (!cancelled && to !== undefined && to !== drag.from && player !== undefined) {
-                onRefuse(drag.from, to);
-            }
-        }
-    };
-    return (_jsxs(_Fragment, { children: [_jsxs("div", { ref: board, class: ["board", player === undefined ? "" : "playable", end === undefined ? "" : endClasses(end), control === undefined ? "" : "mapping"].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 = 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}`,
-                            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,
-                        };
-                        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 }), helps !== undefined && atRiskOn(helps, square) ? _jsx(Notch, {}) : null, control === undefined ? null : _jsx(ControlCount, { counts: control[square] }), badge === undefined || lastMove?.to !== square ? null : _jsx(BadgeIcon, { badge: badge.badge, title: badge.name })] }, square));
-                    })), helps === undefined || helps.pins.length === 0 || control !== undefined ? null : _jsx(Pins, { pins: helps.pins, at: centreOf })] }), drawn?.arrows === undefined ? null : _jsx(Arrows, { arrows: drawn.arrows, at: centreOf, occupied: (square) => pieces.has(square) }), _jsx(Arrows, { arrows: drawing === undefined ? marks.arrows : [...marks.arrows, drawing], 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 pieces of a FEN by square, as its letters: uppercase for White. */
-export function piecesOf(fen) {
-    const pieces = new Map();
-    const rows = (fen.split(" ")[0] ?? "").split("/");
-    rows.forEach((row, index) => {
-        let file = 0;
-        for (const letter of row) {
-            if (/\d/.test(letter)) {
-                file += Number(letter);
-            }
-            else {
-                pieces.set(`${files[file]}${8 - index}`, letter);
-                file += 1;
-            }
-        }
-    });
-    return pieces;
-}
-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.
- */
-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.
- */
-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 })),
-    };
-}
-/** 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]));
-}
-/** A move taken back: its piece, and a castling rook, slide home; a piece it took is there again under the one leaving. */
-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. */
-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"));
-}
-/** The square of the king whose side is to move in a FEN. */
-function kingToMove(fen, pieces) {
-    const king = fen.split(" ")[1] === "b" ? "k" : "K";
-    return [...pieces].find(([, letter]) => letter === king)?.[0];
-}
-const noSigns = new Map();
-/** 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. */
-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;
-}
-/** 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 king's badge in the corner of its square. */
-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" }) })) }));
-}
-const noMarks = { squares: [], arrows: [] };
-/** The marks with a square, or an arrow when the squares differ, added; taken away when they were there. */
-function toggled(marks, from, to) {
-    if (from === to) {
-        return { ...marks, squares: marks.squares.includes(to) ? marks.squares.filter((square) => square !== to) : [...marks.squares, to] };
-    }
-    const there = marks.arrows.some((arrow) => arrow.from === from && arrow.to === to);
-    return { ...marks, arrows: there ? marks.arrows.filter((arrow) => arrow.from !== from || arrow.to !== to) : [...marks.arrows, { from, to }] };
-}
-/**
- * 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 (T-91, Zoe): off the culprit's piece, and before the piece they point at, so both stay in sight.
- */
-function Arrows({ arrows, at, explain, occupied }) {
-    if (arrows.length === 0) {
-        return null;
-    }
-    return (_jsx("svg", { class: explain !== undefined ? "arrows explain" : occupied !== undefined ? "arrows drawn" : "arrows", viewBox: "0 0 8 8", "aria-hidden": "true", children: 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 * arrowHead.length, y1 - dy * arrowHead.length];
-            const side = (sign) => `${endX - dy * arrowHead.width * sign},${endY + dx * arrowHead.width * sign}`;
-            // The shaft runs halfway into the point, so no seam shows where they meet; the layer's opacity hides the overlap.
-            const [shaftX, shaftY] = [x1 - dx * arrowHead.length / 2, y1 - dy * arrowHead.length / 2];
-            const shaft = `M${x0} ${y0}${corner === undefined ? "" : ` L${corner[0]} ${corner[1]}`} L${shaftX} ${shaftY}`;
-            const head = `${side(1)} ${x1},${y1} ${side(-1)}`;
-            return (_jsxs("g", { class: colour, children: [occupied === undefined ? null : (_jsxs(_Fragment, { children: [_jsx("path", { class: "edge", d: shaft }), _jsx("polygon", { class: "edge", points: head })] })), _jsx("path", { d: shaft }), _jsx("polygon", { points: head })] }, `${from}${to}`));
-        }) }));
-}
-/** 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. */
-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}`));
-        }) }));
-}
-/** Who reaches a square on the control map: only White, only Black, both or none. */
-function controlOf(counts) {
-    const [white, black] = counts ?? [0, 0];
-    return white > 0 && black > 0 ? "both" : white > 0 ? "white" : black > 0 ? "black" : "none";
-}
-/** 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. */
-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 })] }));
-}
-/** 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];
-}
-/**
- * A bubble by the piece of a refused move, where it hides neither the culprit nor the arrow's point (`where`, T-91), kept on the board at its edges; in the
- * board's middle without a piece.
- */
-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 bubble's icon for a kind of reason (T-91): 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" }) })) }));
-}
-/** 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. */
-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)))] }));
-}
-const promotionPieces = ["q", "n", "r", "b"];
-/** The corner of the rook a castling moves; none for another move. */
-function rookOf(move) {
-    return move.san.startsWith("O-O-O") ? `a${move.from[1]}` : move.san.startsWith("O-O") ? `h${move.from[1]}` : undefined;
-}
-// How each arrow moves the keyboard's square, in columns and rows as the board is seen.
-const arrowSteps = { ArrowLeft: [-1, 0], ArrowRight: [1, 0], ArrowUp: [0, -1], ArrowDown: [0, 1] };
-// 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 };
-// 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;
-// 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 piece lifted off the board: it rises a frame after it appears, so it grows into the air. */
-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 }) }));
-}
-function reducedMotion() {
-    return matchMedia("(prefers-reduced-motion: reduce)").matches;
-}
-const files = "abcdefgh";

package/dist/page/fold-tab.js

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

package/dist/page/game-column.js

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