chesspal 0.1.0 → 0.2.1

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/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;
+}