chesspal 0.0.1 → 0.2.0

package/dist/page/app/keys.js

@@ -0,0 +1,94 @@
+// The page's keys and wheel: [ and ] fold the side columns, M holds the helps' map (D-78), the arrows, Home and End step through the moves and f
+// and x turn the board, and the wheel over the board steps too.
+import { useEffect, useRef } from "preact/hooks";
+import { flipKeys, stepKeys } from "../game/browse.js";
+import { foldKeys, gameUnderBoard, oneColumn } from "../layout/folds.js";
+/**
+ * `[` and `]` fold the talk and the game, as in editors with two side bars; never while the player types or drags a piece, nor in one column, nor the game
+ * under the board.
+ */
+export function useFoldKeys(fold) {
+    useEffect(() => {
+        const press = (event) => {
+            if (!forThePage(event) || oneColumn()) {
+                return;
+            }
+            const column = Object.keys(foldKeys).find((key) => foldKeys[key] === event.key);
+            if (column !== undefined && !(column === "game" && gameUnderBoard())) {
+                event.preventDefault();
+                fold(column);
+            }
+        };
+        window.addEventListener("keydown", press);
+        return () => window.removeEventListener("keydown", press);
+    });
+}
+/** M held shows the control map while the helps are on (D-78); it goes off when M is let go or the page loses the focus. */
+export function useMapKey(helping, map) {
+    useEffect(() => {
+        if (!helping) {
+            map(false);
+            return;
+        }
+        const down = (event) => {
+            if (forThePage(event) && event.key.toLowerCase() === "m") {
+                event.preventDefault();
+                map(true);
+            }
+        };
+        const up = (event) => {
+            if (event.key.toLowerCase() === "m") {
+                map(false);
+            }
+        };
+        const away = () => map(false);
+        window.addEventListener("keydown", down);
+        window.addEventListener("keyup", up);
+        window.addEventListener("blur", away);
+        return () => {
+            window.removeEventListener("keydown", down);
+            window.removeEventListener("keyup", up);
+            window.removeEventListener("blur", away);
+        };
+    }, [helping]);
+}
+/** The keys of Lichess and chess.com: the arrows, Home and End step through the moves, f and x turn the board round. */
+export function useBrowseKeys(step, flip) {
+    useEffect(() => {
+        const press = (event) => {
+            const to = stepKeys[event.key];
+            const flips = flipKeys.includes(event.key.toLowerCase());
+            if (!forThePage(event) || (to === undefined && !flips)) {
+                return;
+            }
+            event.preventDefault();
+            if (to === undefined) {
+                flip();
+            }
+            else {
+                step(to);
+            }
+        };
+        window.addEventListener("keydown", press);
+        return () => window.removeEventListener("keydown", press);
+    });
+}
+/** The mouse wheel over the board steps through the moves, as on Lichess: down forward, a step a notch, however finely a touchpad turns it. */
+export function useWheelSteps(step) {
+    const turned = useRef(0);
+    return (event) => {
+        event.preventDefault();
+        turned.current += event.deltaMode === WheelEvent.DOM_DELTA_PIXEL ? event.deltaY : event.deltaY * notch;
+        while (Math.abs(turned.current) >= notch) {
+            step(turned.current > 0 ? "forward" : "back");
+            turned.current -= Math.sign(turned.current) * notch;
+        }
+    };
+}
+// How far a wheel turns in one notch, in pixels.
+const notch = 100;
+/** Whether a key is the page's: not one the player types into a box or the settings, nor with a modifier, nor while a piece is in the air. */
+function forThePage(event) {
+    const typing = event.target.closest("input, textarea, select, [contenteditable], dialog") !== null;
+    return !(event.defaultPrevented || event.ctrlKey || event.altKey || event.metaKey || typing || document.documentElement.classList.contains("dragging"));
+}

package/dist/page/app/phase.js

@@ -0,0 +1,30 @@
+/**
+ * The page's phase: a game `analysing`, else the game the server sent, null before the first, whether it is `over`, and whether the page saw it end, which
+ * keeps its final position until the next starts.
+ */
+export function phaseOf(analysing, game, over, sawEnd) {
+    if (analysing) {
+        return "analysis";
+    }
+    if (game === undefined) {
+        return undefined;
+    }
+    if (game !== null && !over) {
+        return "going";
+    }
+    return sawEnd ? "over" : "idle";
+}
+/** What the header says of the game, with the kind that gives it a colour and an icon: in analysis, none going on, how it ended, or the draw offered. */
+export function verdictOf(phase, how, winner, offer, declined, text) {
+    if (phase === "analysis") {
+        return { kind: "analysis", verdict: text.analysing };
+    }
+    if (phase === "idle") {
+        return { kind: "idle", verdict: text.noGameNow };
+    }
+    if (phase === "over") {
+        return { kind: "over", verdict: text.verdict(how, winner) };
+    }
+    const verdict = offer === "ai" ? text.offers : offer === "player" ? text.drawOffered : declined ? text.declines : undefined;
+    return verdict === undefined ? {} : { kind: "offer", verdict };
+}

package/dist/page/app/served.js

@@ -0,0 +1,73 @@
+// What the page asks the server (D-47): the game of the player's folder, read again each time it changes, and the player's moves, words and choices sent
+// there, refused in the player's language.
+import { useEffect, useRef, useState } from "preact/hooks";
+/**
+ * The game of the player's folder, read from the server, and read again each time the server says it changed, whoever changed it; `onNewGame` when the chat
+ * asks for a new game, which the player chooses on the page.
+ */
+export function useServed(onNewGame) {
+    const [data, setData] = useState(undefined);
+    const [problem, setProblem] = useState(undefined);
+    const [offline, setOffline] = useState(false);
+    // Reads the game again: when the server says it changed, and when a clock runs out on the page.
+    const reload = useRef(() => { });
+    useEffect(() => {
+        let latest = 0;
+        const load = () => {
+            // Two reads in flight may answer out of order: only the last one asked counts.
+            const asked = ++latest;
+            fetch("/api/game")
+                .then((response) => response.json())
+                .then((body) => {
+                if (asked !== latest) {
+                    return;
+                }
+                setProblem(body.error);
+                if (body.error === undefined) {
+                    setData(body);
+                }
+            })
+                .catch((error) => setProblem(String(error)));
+        };
+        // The server says when the game changes, whoever changed it: the page reads it again, and as it connects, the first time or to a new chat's server.
+        // The server lives in the chat's MCP server: when the chat ends, after /clear in Claude's app too, the page waits for the next one and says so.
+        reload.current = load;
+        const events = new EventSource("/api/events");
+        events.onopen = () => {
+            setOffline(false);
+            load();
+        };
+        // The chat asks for a new game: the player chooses it in the New game window, which opens here.
+        events.onmessage = (event) => event.data === "new-game" ? onNewGame() : load();
+        events.onerror = () => setOffline(events.readyState !== EventSource.OPEN);
+        return () => events.close();
+    }, []);
+    return { data, problem, offline, reload: () => reload.current() };
+}
+/**
+ * Sends a request to the server: the reason it was refused, in the player's language when the page knows the refusal (D-57), with the host's name where
+ * it sends the player, or undefined.
+ */
+export async function post(path, body, text, name) {
+    try {
+        const response = await fetch(path, { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify(body) });
+        if (response.ok) {
+            return undefined;
+        }
+        const refused = (await response.json());
+        const known = refused.refusal === undefined ? undefined : text.refused[refused.refusal];
+        return { text: known?.(refused.most ?? 0, name) ?? refused.error ?? response.statusText, words: refused.refusal?.startsWith("words-") === true };
+    }
+    catch (error) {
+        return { text: String(error), words: false };
+    }
+}
+/** Sends the player's move to the server, which plays it as the chat would, with the words written for the AI: the reason it was refused, or undefined. */
+export function sendMove(move, words, text, name) {
+    const message = words.trim();
+    return post("/api/move", message === "" ? { move } : { move, message }, text, name);
+}
+/** Sends the player's words alone: the reason they were refused, or undefined. */
+export function sendMessage(words, text, name) {
+    return post("/api/message", { text: words.trim() }, text, name);
+}

package/dist/page/avatars/avatars.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs } from "preact/jsx-runtime";
+// The player's picture (D-45): their own image when the profile has one, else one of the drawn avatars, else the plain face of a page without profiles.
+import { imageAddress } from "../profile/profile.js";
+/** The player's picture, `size` pixels wide: their image, their drawn avatar, or the plain face. */
+export function PlayerPicture({ profile, size = 48 }) {
+    const image = profile === undefined ? undefined : imageAddress(profile);
+    if (image !== undefined) {
+        return _jsx("img", { class: "avatar photo", src: image, width: size, height: size, alt: "" });
+    }
+    return profile?.avatar === undefined ? _jsx(PlainFace, {}) : _jsx(DrawnAvatar, { id: profile.avatar, size: size });
+}
+/** One of the drawn avatars, its colour behind it in the picture; named for a screen reader when `label` is given. */
+export function DrawnAvatar({ id, size, label }) {
+    return _jsx("img", { class: "avatar drawn", src: `/page/avatars/${id}.webp`, width: size, height: size, alt: label ?? "", decoding: "async" });
+}
+/** The player's picture on a page without profiles: a simple face, in a circle. */
+function PlainFace() {
+    return (_jsxs("svg", { class: "avatar", viewBox: "0 0 64 64", width: "48", height: "48", "aria-hidden": "true", children: [_jsx("circle", { class: "back", cx: "32", cy: "32", r: "32" }), _jsx("path", { class: "shirt", d: "M10 66C11 52 20 45 32 45C44 45 53 52 54 66Z" }), _jsx("path", { class: "skin", d: "M27 37H37V47C37 50 27 50 27 47Z" }), _jsx("circle", { class: "skin", cx: "32", cy: "28", r: "12" }), _jsx("path", { class: "hair", d: "M19.5 29C18 18 24 12.5 32.5 12.5C41 12.5 46.5 18 44.5 29C43 23.5 39 20.5 33 21.5C28 22.5 23 24 19.5 29Z" }), _jsx("circle", { class: "eye", cx: "27.5", cy: "29.5", r: "1.7" }), _jsx("circle", { class: "eye", cx: "36.5", cy: "29.5", r: "1.7" }), _jsx("path", { class: "smile", d: "M28.5 34.5Q32 37.5 35.5 34.5" })] }));
+}

package/dist/page/avatars/thought.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "preact/jsx-runtime";
+/** The AI's picture with its thought cloud while it thinks; the picture alone else. */
+export function Thinker({ thinking, words, children }) {
+    return (_jsxs("span", { class: "thinker", children: [children, thinking === undefined ? null : _jsx(Thought, { thinking: thinking, words: words })] }));
+}
+/** The cloud alone, as on the folded talk's tab: named for a screen reader that explores it, never announced, since the AI's move says it is done. */
+export function Thought({ thinking, words }) {
+    const dots = thinking === "move" ? { radius: 1.8, at: [6.8, 11.5, 16.2] } : { radius: 1.4, at: [7.3, 11.5, 15.7] };
+    return (_jsxs("svg", { class: `thought ${thinking}`, viewBox: "0 0 24 20", role: "img", "aria-label": words[thinking], children: [_jsx("title", { children: words[thinking] }), _jsx("path", { class: "cloud", d: "M7 1.5h9a5.5 5.5 0 0 1 0 11H7a5.5 5.5 0 0 1 0-11Z" }), _jsx("circle", { class: "cloud", cx: "19", cy: "16.5", r: "2.1" }), dots.at.map((x) => _jsx("circle", { class: "dot", cx: x, cy: "7", r: dots.radius }, x))] }));
+}

package/dist/page/avatars/torretta.js

@@ -0,0 +1,38 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "preact/jsx-runtime";
+// The Torretta (D-45, D-46): the opponent and the logo, a rook that is a robot. Its screen shows the AI's mood (D-14, D-70): only the eyes, the mouth and the light change.
+import { useRef } from "preact/hooks";
+/** The Torretta at a size in pixels, with the face of a mood (neutral by default); with a label it is an image a screen reader names, else a decoration. */
+export function Torretta({ size, label, mood = "neutral" }) {
+    // The face pops in when the mood changes, never when the Torretta first shows (the logo, a card, a dialog).
+    const changed = useChanged(mood);
+    return (_jsxs("svg", { class: `torretta mood-${mood}`, viewBox: "0 0 128 128", width: size, height: size, role: label === undefined ? undefined : "img", "aria-label": label, "aria-hidden": label === undefined ? "true" : undefined, children: [_jsx("path", { class: "antenna", d: "M64 31V19" }), _jsx("circle", { class: "light", cx: "64", cy: "16", r: "5" }), _jsx("rect", { class: "shade", x: "29", y: "64", width: "12", height: "26", rx: "2" }), _jsx("rect", { class: "shade", x: "87", y: "64", width: "12", height: "26", rx: "2" }), _jsx("path", { class: "body", d: "M34 30H47V40H57V30H71V40H81V30H94V54L89 58L92 106H36L39 58L34 54Z" }), _jsx("rect", { class: "shade", x: "30", y: "104", width: "68", height: "12", rx: "4" }), _jsx("rect", { class: "screen", x: "44", y: "63", width: "40", height: "32", rx: "7" }), _jsx("g", { class: changed ? "expression changed" : "expression", children: _jsx(Face, { mood: mood }) }, mood)] }));
+}
+/** Whether the mood has changed since the Torretta first showed: true from its first change on, so a face already shown never starts its entrance again. */
+function useChanged(mood) {
+    const first = useRef(mood);
+    const changed = useRef(false);
+    changed.current ||= mood !== first.current;
+    return changed.current;
+}
+/** The eyes and the mouth of a mood, on the screen (x 44–84, y 63–95); strokes of 3.4 at least, to read at 40 px. */
+function Face({ mood }) {
+    switch (mood) {
+        case "happy":
+            // Eyes closed in two arcs, a wide open smile.
+            return (_jsxs(_Fragment, { children: [_jsx("path", { class: "eyes line", d: "M50.5 78.5a4.5 4.5 0 0 1 9 0M68.5 78.5a4.5 4.5 0 0 1 9 0" }), _jsx("path", { class: "mouth", d: "M57 84h14a7 7 0 0 1-14 0Z" })] }));
+        case "surprised":
+            // Wide eyes and a round mouth.
+            return (_jsxs(_Fragment, { children: [_jsxs("g", { class: "eyes", children: [_jsx("circle", { cx: "54.5", cy: "75.5", r: "5.8" }), _jsx("circle", { cx: "73.5", cy: "75.5", r: "5.8" })] }), _jsx("ellipse", { class: "mouth", cx: "64", cy: "88.5", rx: "3.4", ry: "4" })] }));
+        case "worried":
+            // Brows raised in the middle, smaller eyes, a frown; the light turns red.
+            return (_jsxs(_Fragment, { children: [_jsx("path", { class: "brows", d: "M50 70L58 67M70 67L78 70" }), _jsxs("g", { class: "eyes", children: [_jsx("circle", { cx: "55", cy: "78.5", r: "3.8" }), _jsx("circle", { cx: "73", cy: "78.5", r: "3.8" })] }), _jsx("path", { class: "mouth line", d: "M56.5 91q7.5-6 15 0" })] }));
+        case "thoughtful":
+            // A glance to the side under one raised brow, the mouth pushed to the other side; the light breathes.
+            return (_jsxs(_Fragment, { children: [_jsx("path", { class: "brows", d: "M71 68L80 66" }), _jsxs("g", { class: "eyes", children: [_jsx("circle", { cx: "58", cy: "76.5", r: "3.9" }), _jsx("circle", { cx: "76", cy: "76.5", r: "3.9" })] }), _jsx("path", { class: "mouth line", d: "M52.5 89L63 87" })] }));
+        case "sad":
+            // No brows, the face sunk low: eyes half shut under lids that droop outwards, a deep frown; the light goes out.
+            return (_jsxs(_Fragment, { children: [_jsx("path", { class: "eyes", d: "M60.3 77.1A5.6 5.6 0 0 1 49.7 80.9ZM78.3 80.9A5.6 5.6 0 0 1 67.7 77.1Z" }), _jsx("path", { class: "mouth line", d: "M57.5 92.5q6.5-6.5 13 0" })] }));
+        default:
+            return (_jsxs(_Fragment, { children: [_jsxs("g", { class: "eyes", children: [_jsx("circle", { cx: "55", cy: "76", r: "4.6" }), _jsx("circle", { cx: "73", cy: "76", r: "4.6" })] }), _jsx("rect", { class: "mouth", x: "58", y: "85.4", width: "12", height: "3.2", rx: "1.6" })] }));
+    }
+}

package/dist/page/base.css

@@ -0,0 +1,160 @@
+/* What every part shares: the page's type, its buttons and icons, the focus ring, the spinner */
+
+* {
+    box-sizing: border-box;
+}
+
+body {
+    margin: 0;
+    min-height: 100vh;
+    background: var(--page);
+    color: var(--ink);
+    font-family: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", sans-serif;
+    font-size: 15px;
+    -webkit-font-smoothing: antialiased;
+}
+
+button,
+textarea {
+    font: inherit;
+    color: inherit;
+}
+
+button {
+    cursor: pointer;
+}
+
+.icon {
+    width: 17px;
+    height: 17px;
+    fill: none;
+    stroke: currentColor;
+    stroke-width: 1.7;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+}
+
+:focus-visible {
+    outline: 2px solid var(--accent);
+    outline-offset: 2px;
+}
+
+.command {
+    display: inline-flex;
+    align-items: center;
+    gap: 7px;
+    background: none;
+    border: 1px solid transparent;
+    border-radius: 8px;
+    padding: 7px 11px;
+    font-size: 14px;
+    color: var(--soft);
+}
+
+.command:hover,
+.command[aria-pressed="true"] {
+    color: var(--ink);
+    border-color: var(--line);
+    background: var(--card);
+}
+
+.command.primary {
+    background: var(--accent);
+    border-color: var(--accent);
+    color: var(--on-accent);
+}
+
+.command.primary:hover {
+    background: color-mix(in oklab, var(--accent) 85%, var(--ink));
+    border-color: transparent;
+    color: var(--on-accent);
+}
+
+/* A draw the player cannot offer now: before a move each, on the AI's turn, or with an offer standing (D-65); their own offer stands pressed, at full strength */
+.command[aria-disabled="true"]:not([aria-pressed="true"]) {
+    cursor: default;
+    opacity: 0.5;
+}
+
+.command[aria-disabled="true"]:not([aria-pressed="true"]):hover {
+    color: var(--soft);
+    border-color: transparent;
+    background: none;
+}
+
+.icon-button {
+    display: grid;
+    place-items: center;
+    width: 36px;
+    height: 36px;
+    background: none;
+    border: 1px solid var(--line);
+    border-radius: 8px;
+    color: var(--soft);
+}
+
+.icon-button:hover {
+    color: var(--ink);
+}
+
+:root[data-theme="dark"] .icon-button .sun,
+:root:not([data-theme="dark"]) .icon-button .moon {
+    display: none;
+}
+
+.spinner {
+    flex: none;
+    width: 14px;
+    height: 14px;
+    border: 2px solid color-mix(in srgb, var(--accent) 25%, transparent);
+    border-top-color: var(--accent);
+    border-radius: 50%;
+    animation: spin 900ms linear infinite;
+}
+
+@keyframes spin {
+    to {
+        transform: rotate(360deg);
+    }
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .spinner {
+        animation-duration: 3s;
+    }
+}
+
+.visually-hidden {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+}
+
+/* The cards, in every column */
+.card {
+    background: var(--card);
+    border: 1px solid var(--line);
+    border-radius: var(--radius);
+    padding: 12px 14px;
+    box-shadow: var(--shadow);
+}
+
+.note {
+    color: var(--soft);
+    font-size: 13px;
+    font-weight: 400;
+}
+
+.empty {
+    margin: 0;
+    color: var(--soft);
+}
+
+.problem {
+    max-width: 40em;
+    margin: 24px auto;
+    padding: 0 16px;
+}