chesspal 0.0.1 → 0.2.0

package/dist/page/game/move-list.js

@@ -0,0 +1,72 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "preact/jsx-runtime";
+import { useEffect, useRef } from "preact/hooks";
+import { Figurine } from "../pieces/pieces.js";
+import { BadgeIcon, NoteIcon } from "./badges.js";
+import { FoldButton, useCardFold } from "./card-fold.js";
+/**
+ * The moves numbered in pairs, the one the board shows marked (`shown`, how many moves it shows), and the result once the game is over; a click on a move
+ * shows it. The list keeps its last move in sight, and the one shown while the player looks back.
+ */
+export function MoveList({ plies, result, shown, onShow, text }) {
+    const list = useRef(null);
+    const [folded, toggleFold] = useCardFold("moves");
+    const rows = rowsOf(plies);
+    const current = plies[shown - 1];
+    useEffect(() => {
+        list.current?.scrollTo({ top: list.current.scrollHeight });
+    }, [plies.length]);
+    // Only the list scrolls to the move shown: the page under the board stays where the player has it.
+    useEffect(() => keepInSight(list.current), [shown]);
+    // The cards above it change height with the position, the helps' card above all: the list follows, its move still in sight.
+    useEffect(() => {
+        const element = list.current;
+        if (element === null) {
+            return;
+        }
+        const observer = new ResizeObserver(() => keepInSight(element));
+        observer.observe(element);
+        return () => observer.disconnect();
+    }, []);
+    const move = (ply) => _jsx(Move, { ply: ply, current: ply !== undefined && ply === current, onShow: () => onShow(plies.indexOf(ply) + 1), text: text });
+    // The card's title with its icon, a score sheet, as the other cards of the column, which folds the card to it (Stefano); only the list under it
+    // scrolls, and it stays in the page while folded, so that it keeps its move in sight.
+    return (_jsxs("section", { class: `card moves-card${folded ? " folded" : ""}`, "aria-label": text.moves, children: [_jsx("h3", { class: "card-title", children: _jsxs(FoldButton, { folded: folded, onFold: toggleFold, text: text, children: [_jsx("svg", { class: "icon", viewBox: "0 0 24 24", "aria-hidden": "true", children: _jsx("path", { d: "M6 3H15L19 7V21H6ZM15 3V7H19M9 11H16M9 14.5H16M9 18H13" }) }), text.moves] }) }), _jsxs("div", { ref: list, class: "moves", hidden: folded, children: [_jsx("ol", { children: rows.map(({ number, white, black }) => (_jsxs("li", { children: [_jsxs("span", { class: "number", children: [number, "."] }), move(white), move(black)] }, number))) }), result === undefined ? null : _jsx("p", { class: "result", children: result })] })] }));
+}
+/** The buttons that step through the moves: to the start, back, forward, and to the game as it is; each one off where it could not go. */
+export function Steps({ shown, total, onStep, text }) {
+    const button = (step, path, off) => (_jsx("button", { type: "button", title: text.steps[step], "aria-label": text.steps[step], disabled: off, onClick: () => onStep(step), children: _jsx("svg", { class: "icon", viewBox: "0 0 24 24", "aria-hidden": "true", children: _jsx("path", { d: path }) }) }));
+    return (_jsxs("nav", { class: "steps card", "aria-label": text.moves, children: [button("first", "M7 6V18M17 6L11 12L17 18", shown === 0), button("back", "M14.5 6L8.5 12L14.5 18", shown === 0), button("forward", "M9.5 6L15.5 12L9.5 18", shown === total), button("last", "M17 6V18M7 6L13 12L7 18", shown === total)] }));
+}
+/** A move in SAN with each piece's letter drawn as its figure, the same in every language (D-50), and a capture's x in grey, so the squares stand out. */
+export function Figurines({ san, side }) {
+    return (_jsx(_Fragment, { children: san.split(/([KQRBNx])/).map((part, index) => index % 2 === 0 ? part : part === "x" ? _jsx("span", { class: "takes", children: "x" }, index) : _jsx(Figurine, { letter: part, side: side }, index)) }));
+}
+function Move({ ply, current, onShow, text }) {
+    if (ply === undefined) {
+        return _jsx("span", { children: "\u2026" });
+    }
+    // A screen reader reads the move in SAN and the AI's badge by its name; the eye sees each piece's letter as its figure, and the badge's disc (D-69).
+    return (_jsxs("button", { type: "button", class: current ? "ply current" : "ply", "aria-current": current ? "step" : undefined, onClick: onShow, children: [_jsx("span", { class: "visually-hidden", children: ply.review?.badge === undefined ? ply.san : `${ply.san}, ${text.badges[ply.review.badge]}` }), _jsx("span", { "aria-hidden": "true", children: _jsx(Figurines, { san: ply.san, side: ply.side }) }), ply.review?.badge !== undefined ? _jsx(BadgeIcon, { badge: ply.review.badge }) : ply.review?.note !== undefined ? _jsx(NoteIcon, {}) : null] }));
+}
+/** Scrolls the list, and only the list, as little as it takes to show its current move. */
+function keepInSight(list) {
+    const box = list?.getBoundingClientRect();
+    const move = list?.querySelector(".current")?.getBoundingClientRect();
+    if (box === undefined || move === undefined) {
+        return;
+    }
+    list.scrollTop += Math.min(0, move.top - box.top) + Math.max(0, move.bottom - box.bottom);
+}
+/** The plies in rows of one number: White's move and Black's. */
+function rowsOf(plies) {
+    const rows = [];
+    for (const ply of plies) {
+        let row = rows.at(-1);
+        if (row?.number !== ply.number) {
+            row = { number: ply.number };
+            rows.push(row);
+        }
+        row[ply.side] = ply;
+    }
+    return rows;
+}

package/dist/page/game/opening-book.js

@@ -0,0 +1,14 @@
+// The book of the openings (D-16), fetched once the game has a move: the page names the opening itself, from the moves it replays.
+import { useEffect, useState } from "preact/hooks";
+let fetched;
+/** The book, once it is needed and has come; undefined before, or when it cannot be had. */
+export function useOpeningBook(needed) {
+    const [book, setBook] = useState(undefined);
+    useEffect(() => {
+        if (needed && book === undefined) {
+            fetched ??= fetch("/core/openings.json").then((response) => response.ok ? response.json() : undefined).catch(() => undefined);
+            void fetched.then(setBook);
+        }
+    }, [needed]);
+    return book;
+}

package/dist/page/game/plies.js

@@ -0,0 +1,82 @@
+// The moves of a game as the page shows them: each with its side and number, the comment the player may read and the AI's review; and the words said on
+// the page.
+import { drawingsIn, leadOf, reviewOf } from "../../core/index.js";
+/**
+ * The moves of a record, each with its side and number: a game may start from a position where Black moves first. A comment keeps only its words: the
+ * commands in it, such as the AI's plan that an ended game shows, and the (=) of a draw offer (D-65), are not for the page.
+ */
+export function pliesOf(record) {
+    const [, turn, , , , number] = (record.tags.FEN ?? "").split(" ");
+    const first = Number(number) || 1;
+    const offset = turn === "b" ? 1 : 0;
+    return record.moves.map((move, index) => {
+        const comment = move.comment?.replace(/\s*\[%[^\]]*\]/g, "").replace(/^\s*\(=\)/, "").trim();
+        // The AI's drawings with its own move, with the helps on, come without a badge or a note (D-78).
+        const drawings = drawingsIn(move.comment);
+        const review = reviewOf(move.comment) ?? (Object.keys(drawings).length === 0 ? undefined : drawings);
+        const lead = leadOf(move.comment);
+        const ply = {
+            san: move.san,
+            side: (index + offset) % 2 === 0 ? "white" : "black",
+            number: first + Math.floor((index + offset) / 2),
+            ...(review === undefined ? {} : { review }),
+            ...(lead === undefined ? {} : { lead }),
+        };
+        return comment === undefined || comment === "" ? ply : { ...ply, comment };
+    });
+}
+/** The moves with the coach's judgments on the player's, as the analyst's review shows on them (D-88), and who it saw ahead after the moves it was given (D-90). */
+export function withJudgments(plies, { judgments, leads = [] }) {
+    return plies.map((ply, index) => {
+        const judgment = judgments.find((one) => one.ply === index + 1);
+        const lead = leads.find((one) => one.position === index + 1)?.lead;
+        const judged = judgment === undefined
+            ? ply
+            : { ...ply, review: { ...(judgment.badge === undefined ? {} : { badge: judgment.badge }), ...(judgment.note === undefined ? {} : { note: judgment.note }) } };
+        return lead === undefined ? judged : { ...judged, lead };
+    });
+}
+/** The moves with the book's badge on the first `book` of them that have no review of the AI's. */
+export function withBook(plies, book) {
+    // A move the AI only drew on keeps its drawings beside the book's badge (D-78).
+    return book === 0 ? plies : plies.map((ply, index) => index < book && ply.review?.badge === undefined && ply.review?.note === undefined ? { ...ply, review: { ...ply.review, badge: "book" } } : ply);
+}
+/** The moves without the AI's review: during a game with the helps off the player sees neither its judgments nor its drawings (D-78), nor who is ahead (D-90). */
+export function withoutReviews(plies) {
+    return plies.map(({ review, lead, ...ply }) => ply);
+}
+/**
+ * The coach's judgments the card shows (D-78, D-88): first one whose note was held until the player's last move let it go, however far back its move (Zoe); then the latest, of the player's last move the AI has answered, else of the one before (Zoe and Federico). Only
+ * those with a badge of their own or a note.
+ */
+export function judgmentsOf(plies, player, { judgments }) {
+    const answered = plies.at(-1)?.side === player ? plies.slice(0, -1) : plies;
+    const latest = answered.filter((ply) => ply.side === player).slice(-2).reverse().find(judged);
+    const released = judgments.filter((judgment) => judgment.released === true).map(({ ply }) => answered[ply - 1])
+        .filter((ply) => ply !== undefined && ply !== latest && judged(ply));
+    return [...released, ...(latest === undefined ? [] : [latest])];
+}
+/** How long a line of the player's may be: the server's limit (D-54), which a test keeps equal. */
+export const talkLimits = { line: 200 };
+/** How many times the AI has spoken in the game, its comments on its moves and its lines on the page: the page sees it speak when the count grows. */
+export function aiSpoke(plies, ai, talk) {
+    return plies.filter((ply) => ply.side === ai && ply.comment !== undefined).length + talk.filter((line) => line.who === "ai").length;
+}
+/** The AI's words in the game going on (D-53), in the order said: its comments on its moves and what it said on the page. */
+export function aiWords(plies, ai, talk) {
+    // A comment counts as said just after its move, before what the AI said there; the sort keeps that order.
+    const comments = plies.flatMap((ply, index) => ply.side === ai && ply.comment !== undefined ? [{ text: ply.comment, ply: index + 1 }] : []);
+    return [...comments, ...talk.filter((line) => line.who === "ai")].sort((one, other) => one.ply - other.ply).map((word) => word.text);
+}
+/** The player's words in the game going on (D-53), in the order said. */
+export function playerWords(talk) {
+    return talk.filter((line) => line.who === "player");
+}
+/** How many characters the player has written since the AI's last move, of the 200 they may until its next one (D-54). */
+export function playerSpent(plies, ai, talk) {
+    const moved = plies.findLastIndex((ply) => ply.side === ai);
+    return talk.filter((line) => line.who === "player" && line.ply > moved).reduce((sum, line) => sum + line.text.length, 0);
+}
+function judged({ review }) {
+    return review?.note !== undefined || (review?.badge !== undefined && review.badge !== "book");
+}

package/dist/page/game/result-tile.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs } from "preact/jsx-runtime";
+// The result of a game as a little board: the winner's king standing over the loser's, laid down, or both standing in a draw; the game's card and the
+// list of the analyses show it.
+import { Piece } from "../pieces/pieces.js";
+/** The tile of a game's result, 1-0, 0-1 or 1/2-1/2; a star for a game without one. */
+export function ResultTile({ result }) {
+    const winner = result === "1-0" ? "white" : result === "0-1" ? "black" : undefined;
+    if (winner !== undefined) {
+        return (_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" }) })] }));
+    }
+    return result === "1/2-1/2"
+        ? (_jsxs("span", { class: "tile over draw", "aria-hidden": "true", children: [_jsx(Piece, { letter: "K" }), _jsx(Piece, { letter: "k" })] }))
+        : _jsx("span", { class: "tile open", "aria-hidden": "true", children: "*" });
+}