chesspal 0.0.1 → 0.1.0

package/dist/page/plies.js

@@ -0,0 +1,62 @@
+// 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, 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 ply = {
+            san: move.san,
+            side: (index + offset) % 2 === 0 ? "white" : "black",
+            number: first + Math.floor((index + offset) / 2),
+            ...(review === undefined ? {} : { review }),
+        };
+        return comment === undefined || comment === "" ? ply : { ...ply, comment };
+    });
+}
+/** 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). */
+export function withoutReviews(plies) {
+    return plies.map(({ review, ...ply }) => ply);
+}
+/** The player's last move when the AI judged it, with a badge of its own or a note, and has moved since (D-78); none else. */
+export function judgmentOf(plies, player) {
+    const judged = plies.at(-2);
+    const review = judged?.review;
+    const answered = plies.at(-1)?.side !== player && judged?.side === player;
+    return answered && review !== undefined && (review.note !== undefined || (review.badge !== undefined && review.badge !== "book")) ? judged : undefined;
+}
+/** 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 (T-84). */
+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);
+}

package/dist/page/profile-dialogs.js

@@ -0,0 +1,123 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "preact/jsx-runtime";
+// The profiles on the page (D-23, D-45): the wizard that completes the first (D-71), the player's picture to change, and the menu that puts another in use or makes one.
+import { useEffect, useMemo, useState } from "preact/hooks";
+import { DrawnAvatar, PlayerPicture } from "./avatars.js";
+import { Dialog } from "./dialog.js";
+import { avatarIds, chooseAvatar, imageAddress, levels, makeProfile, nameLimit, openDataFolder, ratingLimits, ratingSites, sendPhoto, useProfile } from "./profile.js";
+import { Torretta } from "./torretta.js";
+/**
+ * The page at the first start, while the profile Chesspal made is new: who plays, and the game comes after (D-23, D-71); a game played before stays in it.
+ * The system's account is only a suggestion for the name (T-120), and the page says where the games go (T-119).
+ */
+export function Wizard({ text, hasGame, account, dataFolder, onMade }) {
+    return (_jsxs("main", { class: "wizard", children: [_jsx(Torretta, { size: 56 }), _jsx("h1", { children: text.profile.welcome }), _jsxs("p", { class: "lead", children: [text.profile.lead, hasGame ? _jsx("span", { children: text.profile.gameMoves }) : null] }), _jsx(ProfileForm, { text: text, submit: text.profile.start, suggestion: account, onMade: onMade }), _jsx(DataFolder, { folders: dataFolder, text: text })] }));
+}
+/** The player's picture on their card: a click opens the change of picture; a mark on it says so where nothing hovers. */
+export function PictureButton({ profile, onOpen, text }) {
+    return (_jsxs("button", { class: "me", type: "button", title: text.profile.changePicture, "aria-label": text.profile.yourPicture, "aria-haspopup": "dialog", onClick: onOpen, children: [_jsx(PlayerPicture, { profile: profile }), _jsx("span", { class: "me-cover", children: cameraIcon }), _jsx("span", { class: "me-badge", children: cameraIcon })] }));
+}
+/** The player's name on their card: a click opens the menu of the players. */
+export function NameButton({ profile, onOpen, text }) {
+    return (_jsxs("button", { class: "profile-name", type: "button", title: text.profile.changePlayer, "aria-label": `${profile.name}: ${text.profile.changePlayer}`, "aria-haspopup": "dialog", onClick: onOpen, children: [_jsx("span", { children: profile.name }), _jsx("svg", { class: "icon", viewBox: "0 0 24 24", "aria-hidden": "true", children: _jsx("path", { d: "M7 10L12 15L17 10" }) })] }));
+}
+/** The change of picture, open while `open`: one of the drawn avatars, or a photo of the player's, the one they have shown among them. */
+export function PictureDialog({ open, profile, onClose, text }) {
+    const [problem, setProblem] = useState(undefined);
+    const done = (refused) => {
+        setProblem(refused === undefined ? undefined : refusalText(refused, text));
+        if (refused === undefined) {
+            onClose();
+        }
+    };
+    return (_jsxs(Dialog, { open: open, title: text.profile.changePicture, onClose: onClose, text: text, children: [_jsx("div", { class: "avatars", children: avatarIds.map((id) => (_jsx("button", { class: "avatar-choice", type: "button", title: text.profile.avatars[id], "aria-pressed": profile.image === undefined && profile.avatar === id, onClick: () => void chooseAvatar(profile.id, id).then(done), children: _jsx(DrawnAvatar, { id: id, size: 52, label: text.profile.avatars[id] }) }, id))) }), _jsx(PhotoChoice, { on: profile.image !== undefined, current: imageAddress(profile), onPhoto: (photo) => void sendPhoto(profile.id, photo).then(done), text: text }), problem === undefined ? null : _jsx("p", { class: "problem", role: "alert", children: problem })] }));
+}
+/** The menu of the players, open while `open`: another put in use, or a new one made, never while a game goes on. */
+export function ProfilesDialog({ open, profiles, active, playing, dataFolder, onClose, text }) {
+    const [making, setMaking] = useState(false);
+    const [problem, setProblem] = useState(undefined);
+    useEffect(() => {
+        setMaking(false);
+        setProblem(undefined);
+    }, [open]);
+    const use = (id) => {
+        if (id === active.id) {
+            onClose();
+            return;
+        }
+        void useProfile(id).then((refused) => (refused === undefined ? onClose() : setProblem(refusalText(refused, text))));
+    };
+    return (_jsx(Dialog, { open: open, title: making ? text.profile.newProfile : text.profile.profiles, onBack: making ? () => setMaking(false) : undefined, onClose: onClose, text: text, children: making ? _jsx(ProfileForm, { text: text, submit: text.profile.create, onMade: onClose }) : (_jsxs(_Fragment, { children: [_jsx("p", { class: "note", children: text.profile.eachOwn }), _jsx("div", { class: "profile-list", role: "radiogroup", "aria-label": text.profile.profiles, children: profiles.map((profile) => (_jsxs("button", { class: "choice", type: "button", role: "radio", title: profile.name, "aria-checked": profile.id === active.id, disabled: playing && profile.id !== active.id, onClick: () => use(profile.id), children: [_jsx(PlayerPicture, { profile: profile, size: 32 }), _jsx("span", { children: profile.name }), profile.id === active.id ? checkIcon : null] }, profile.id))) }), playing ? _jsx("p", { class: "note", children: text.profile.whilePlaying }) : null, _jsx("button", { class: "command new-profile", type: "button", disabled: playing, onClick: () => setMaking(true), children: text.profile.newProfile }), problem === undefined ? null : _jsx("p", { class: "problem", role: "alert", children: problem }), _jsx(DataFolder, { folders: dataFolder, text: text })] })) }));
+}
+/** Where the games are, as the file manager walks there, and a button that opens it there (T-119). */
+function DataFolder({ folders, text }) {
+    const words = text.profile;
+    const [problem, setProblem] = useState(undefined);
+    // Opened a moment ago: Explorer may open behind the browser, and another click would open another window.
+    const [opened, setOpened] = useState(false);
+    useEffect(() => {
+        if (!opened) {
+            return undefined;
+        }
+        const timer = setTimeout(() => setOpened(false), 2000);
+        return () => clearTimeout(timer);
+    }, [opened]);
+    // A folder's name breaks only after its ›, never in its own spaces.
+    const shown = folders.map((name) => (name === "Documents" ? words.documents : name).replaceAll(" ", " ")).join(" › ");
+    const open = () => {
+        void openDataFolder().then((refused) => {
+            setProblem(refused === undefined ? undefined : words.noFolder);
+            setOpened(refused === undefined);
+        });
+    };
+    return (_jsxs("div", { class: "data-folder", children: [_jsxs("p", { class: "note", children: [words.gamesIn, " ", _jsx("b", { children: shown })] }), _jsx("button", { class: "command", type: "button", disabled: opened, onClick: open, children: opened ? words.opened : words.openFolder }), problem === undefined ? null : _jsx("p", { class: "problem", role: "alert", children: problem })] }));
+}
+/** The form that makes a profile and puts it in use: the wizard's, with the system's account as a suggestion (T-120), and the menu's for another player. */
+function ProfileForm({ text, submit, suggestion, onMade }) {
+    const words = text.profile;
+    const [name, setName] = useState("");
+    const [avatar, setAvatar] = useState(avatarIds[0]);
+    const [photo, setPhoto] = useState(undefined);
+    const [level, setLevel] = useState("casual");
+    const [rating, setRating] = useState("");
+    const [site, setSite] = useState("lichess");
+    const [problem, setProblem] = useState(undefined);
+    const [busy, setBusy] = useState(false);
+    const send = (event) => {
+        event.preventDefault();
+        setBusy(true);
+        const value = rating.trim() === "" ? undefined : Number(rating);
+        void makeProfile({ name, level, site, ...(value === undefined ? {} : { rating: value }), ...(photo === undefined ? { avatar } : { photo }) }).then((refused) => {
+            setBusy(false);
+            setProblem(refused === undefined ? undefined : refusalText(refused, text));
+            if (refused === undefined) {
+                onMade();
+            }
+        });
+    };
+    return (_jsxs("form", { class: "profile-form", onSubmit: send, children: [_jsxs("label", { class: "field", children: [_jsx("span", { children: words.name }), _jsx("input", { type: "text", required: true, maxLength: nameLimit, placeholder: words.namePlaceholder, autocomplete: "given-name", list: suggestion === undefined ? undefined : "name-suggestion", value: name, onInput: (event) => setName(event.currentTarget.value) }), suggestion === undefined ? null : (_jsx("datalist", { id: "name-suggestion", children: _jsx("option", { value: suggestion }) }))] }), _jsxs("fieldset", { children: [_jsx("legend", { children: words.avatar }), _jsx("div", { class: "avatars", children: avatarIds.map((id) => (_jsxs("label", { class: "avatar-choice", title: words.avatars[id], children: [_jsx("input", { type: "radio", name: "avatar", checked: photo === undefined && avatar === id, onChange: () => {
+                                        setAvatar(id);
+                                        setPhoto(undefined);
+                                    } }), _jsx("span", { class: "visually-hidden", children: words.avatars[id] }), _jsx(DrawnAvatar, { id: id, size: 52 })] }, id))) }), _jsx(PhotoChoice, { on: photo !== undefined, photo: photo, onPhoto: setPhoto, text: text })] }), _jsxs("fieldset", { children: [_jsx("legend", { children: words.level }), _jsx("div", { class: "levels", children: levels.map((id) => (_jsxs("label", { class: "level", children: [_jsx("input", { type: "radio", name: "level", checked: level === id, onChange: () => setLevel(id) }), _jsxs("span", { children: [_jsx("b", { children: words.levels[id][0] }), _jsx("small", { children: words.levels[id][1] })] })] }, id))) })] }), _jsxs("fieldset", { children: [_jsxs("legend", { children: [words.rating, " ", _jsx("small", { children: words.optional })] }), _jsxs("div", { class: "rating", children: [_jsx("input", { type: "number", inputmode: "numeric", min: ratingLimits.lowest, max: ratingLimits.highest, step: 1, placeholder: words.ratingPlaceholder, "aria-label": words.ratingLabel, value: rating, onInput: (event) => setRating(event.currentTarget.value) }), _jsx("select", { "aria-label": words.siteLabel, value: site, onChange: (event) => setSite(event.currentTarget.value), children: ratingSites.map((id) => _jsx("option", { value: id, children: words.sites[id] }, id)) })] })] }), problem === undefined ? null : _jsx("p", { class: "problem", role: "alert", children: problem }), _jsx("button", { class: "start", type: "submit", disabled: busy, children: submit })] }));
+}
+/** The choice of a photo of the player's, on a line of its own under the drawn avatars: the one chosen, or the one they have, shows in the ring. */
+function PhotoChoice({ on, photo, current, onPhoto, text }) {
+    const preview = useMemo(() => (photo === undefined ? undefined : URL.createObjectURL(photo)), [photo]);
+    useEffect(() => () => preview === undefined ? undefined : URL.revokeObjectURL(preview), [preview]);
+    const shown = preview ?? current;
+    return (_jsxs("label", { class: `avatar-choice upload${on ? " on" : ""}`, children: [_jsx("input", { type: "file", accept: "image/*", onChange: (event) => {
+                    const chosen = event.currentTarget.files?.[0];
+                    if (chosen !== undefined) {
+                        onPhoto(chosen);
+                    }
+                } }), shown === undefined ? _jsx("span", { class: "ring", children: cameraIcon }) : _jsx("img", { class: "avatar photo", src: shown, width: 36, height: 36, alt: "" }), _jsx("span", { children: text.profile.ownImage })] }));
+}
+function refusalText(refused, text) {
+    if (refused.refusal === "profile-game") {
+        return text.profile.whilePlaying;
+    }
+    return refused.refusal === "bad-image" ? text.profile.badImage : refused.error;
+}
+// Zoe's camera, on the picture to change.
+const cameraIcon = (_jsxs("svg", { class: "icon", viewBox: "0 0 24 24", "aria-hidden": "true", children: [_jsx("path", { d: "M4 8H7L9 5H15L17 8H20V19H4Z" }), _jsx("circle", { cx: "12", cy: "13", r: "3.5" })] }));
+// The profile in use, in the menu.
+const checkIcon = (_jsx("svg", { class: "icon in-use", viewBox: "0 0 24 24", "aria-hidden": "true", children: _jsx("path", { d: "M5 12.5L10 17.5L19 7.5" }) }));

package/dist/page/profile.js

@@ -0,0 +1,95 @@
+// The player's profile on the page (D-23, D-45): as the server sends it, the choices the wizard offers, and the requests that change it.
+/** How the player says they play, as the server keeps it. */
+export const levels = ["learning", "casual", "regular", "tournament"];
+/** Where a rating comes from. */
+export const ratingSites = ["lichess", "chess.com", "fide"];
+/** The lowest and highest rating the server takes. */
+export const ratingLimits = { lowest: 100, highest: 3500 };
+/** The longest name the server keeps. */
+export const nameLimit = 40;
+/** The drawn avatars, by the ids the server keeps (D-45, T-102). */
+export const avatarIds = ["short-hair", "bun", "glasses", "beanie", "beard", "curls", "moustache", "silver-bob", "cat", "owl"];
+/** The address of a profile's own image: it changes with the image. */
+export function imageAddress(profile) {
+    return profile.image === undefined ? undefined : `/api/profile/image?profile=${encodeURIComponent(profile.id)}&v=${encodeURIComponent(profile.image)}`;
+}
+/** Makes a profile and puts it in use, with the photo after it, made small first so that a photo that cannot be read makes no profile: the refusal, or undefined. */
+export async function makeProfile({ name, level, rating, site, avatar, photo }) {
+    const image = photo === undefined ? undefined : await shrunk(photo).catch(() => undefined);
+    if (photo !== undefined && image === undefined) {
+        return badImage;
+    }
+    const answer = await post("/api/profile/new", jsonOf({ name: name.trim(), level, ...(rating === undefined ? {} : { rating, site }), ...(avatar === undefined ? {} : { avatar }) }));
+    if ("refused" in answer) {
+        return answer.refused;
+    }
+    return image === undefined ? undefined : refusalOf(await post(forProfile("/api/profile/image", String(answer.done.profile)), imageOf(image)));
+}
+/** Puts another profile in use: the server's refusal, or undefined. */
+export async function useProfile(id) {
+    return refusalOf(await post("/api/profile/use", jsonOf({ profile: id })));
+}
+/** A drawn avatar for the profile the page shows: the server's refusal, or undefined. */
+export async function chooseAvatar(profile, avatar) {
+    return refusalOf(await post(forProfile("/api/profile/avatar", profile), jsonOf({ avatar })));
+}
+/** Opens the data folder in the system's file manager, where the page runs (T-119): the server's refusal, or undefined. */
+export async function openDataFolder() {
+    return refusalOf(await post("/api/data-folder/open", jsonOf({})));
+}
+/** Keeps the page's settings in the profile the page shows, so that they follow the player; the browser keeps them too. */
+export function keepSettings(profile, settings) {
+    void post(forProfile("/api/settings", profile), jsonOf(settings));
+}
+/** A photo of the player's, made small and square in the browser, sent as the picture of the profile the page shows: the refusal, or undefined. */
+export async function sendPhoto(profile, photo) {
+    const image = await shrunk(photo).catch(() => undefined);
+    return image === undefined ? badImage : refusalOf(await post(forProfile("/api/profile/image", profile), imageOf(image)));
+}
+// The side of the square picture sent: twice the largest the page shows it.
+const pictureSide = 192;
+const badImage = { error: "", refusal: "bad-image" };
+// The square taken from a photo: the middle across, and a third of the way down, where a face usually is.
+async function shrunk(photo) {
+    const bitmap = await createImageBitmap(photo);
+    const side = Math.min(bitmap.width, bitmap.height);
+    const canvas = document.createElement("canvas");
+    canvas.width = pictureSide;
+    canvas.height = pictureSide;
+    canvas.getContext("2d").drawImage(bitmap, (bitmap.width - side) / 2, (bitmap.height - side) / 3, side, side, 0, 0, pictureSide, pictureSide);
+    bitmap.close();
+    // A browser that cannot write WebP writes PNG.
+    const blob = await new Promise((done) => canvas.toBlob(done, "image/webp", 0.9));
+    if (blob === null) {
+        throw new Error("The picture could not be made.");
+    }
+    return blob;
+}
+// A request about the profile the page shows: the server refuses it when another is in use.
+function forProfile(path, profile) {
+    return `${path}?profile=${encodeURIComponent(profile)}`;
+}
+function jsonOf(body) {
+    return { headers: { "Content-Type": "application/json" }, body: JSON.stringify(body) };
+}
+function imageOf(image) {
+    return { headers: { "Content-Type": image.type }, body: image };
+}
+async function post(path, request) {
+    let response;
+    try {
+        response = await fetch(path, { method: "POST", ...request });
+    }
+    catch (error) {
+        return { refused: { error: String(error) } };
+    }
+    const body = await response.json().catch(() => ({}));
+    if (response.ok) {
+        return { done: body };
+    }
+    const error = typeof body.error === "string" ? body.error : response.statusText;
+    return { refused: typeof body.refusal === "string" ? { error, refusal: body.refusal } : { error } };
+}
+function refusalOf(answer) {
+    return "refused" in answer ? answer.refused : undefined;
+}

package/dist/page/settings-panel.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx, jsxs as _jsxs } from "preact/jsx-runtime";
+import { useEffect, useRef } from "preact/hooks";
+import { Piece } from "./pieces.js";
+import { looks, pieceSets } from "./settings.js";
+/** The panel of the settings, open while `open` is true: every change goes to `onChange` at once. */
+export function SettingsPanel({ open, settings, onChange, onClose, text }) {
+    const dialog = useRef(null);
+    useEffect(() => {
+        const element = dialog.current;
+        if (open && !element.open) {
+            element.showModal();
+        }
+        else if (!open && element.open) {
+            element.close();
+        }
+    }, [open]);
+    const set = (key, value) => onChange({ ...settings, [key]: value });
+    return (_jsxs("dialog", { ref: dialog, class: "settings", "aria-label": text.settings, onClose: onClose, onClick: (event) => event.target === dialog.current && onClose(), children: [_jsxs("header", { children: [_jsx("h2", { children: text.settings }), _jsx("button", { class: "theme", type: "button", title: text.close, "aria-label": text.close, onClick: onClose, children: _jsx("svg", { class: "icon", viewBox: "0 0 24 24", "aria-hidden": "true", children: _jsx("path", { d: "M6 6L18 18M18 6L6 18" }) }) })] }), _jsx("h3", { children: text.look }), _jsx(Choices, { label: text.themeChoice, children: ["system", "light", "dark"].map((theme) => _jsx(Choice, { on: settings.theme === theme, onPick: () => set("theme", theme), children: text.themes[theme] }, theme)) }), _jsx(Swatches, { look: "board", label: text.boardSkin, settings: settings, onPick: (id) => set("board", id), text: text }), _jsx(Choices, { label: text.pieceSet, children: pieceSets.map((pieceSet) => (_jsxs(Choice, { on: settings.set === pieceSet, onPick: () => set("set", pieceSet), children: [_jsxs("span", { class: "sample", children: [_jsx(Piece, { letter: "N", set: pieceSet }), _jsx(Piece, { letter: "n", set: pieceSet })] }), text.names[pieceSet] ?? pieceSet] }, pieceSet))) }), settings.set === "cburnett" ? null : _jsx(Swatches, { look: "pieces", label: text.pieceColours, settings: settings, onPick: (id) => set("pieces", id), text: text }), _jsx(Swatches, { look: "marks", label: text.marksColour, settings: settings, onPick: (id) => set("marks", id), text: text }), _jsx("h3", { children: text.play }), _jsx(Toggle, { on: settings.dots, onSwitch: (on) => set("dots", on), children: text.dots }), _jsx(Toggle, { on: settings.explain, onSwitch: (on) => set("explain", on), children: text.explain }), _jsx(Toggle, { on: settings.book, onSwitch: (on) => set("book", on), children: text.bookBadges }), _jsx(Toggle, { on: settings.helps, onSwitch: (on) => set("helps", on), children: text.helps }), _jsx(Toggle, { on: settings.sound, onSwitch: (on) => set("sound", on), children: text.sounds }), _jsx(Toggle, { on: settings.voice, onSwitch: (on) => set("voice", on), children: text.voice }), _jsx("h3", { children: text.languageChoice }), _jsx(Choices, { label: text.languageChoice, children: ["auto", "it", "en"].map((language) => _jsx(Choice, { on: settings.language === language, onPick: () => set("language", language), children: text.languages[language] }, language)) })] }));
+}
+/** The choices of a look, each a swatch drawn by the style sheet with the look's own colours. */
+function Swatches({ look, label, settings, onPick, text }) {
+    return (_jsx(Choices, { label: label, children: looks[look].map((id) => (_jsxs(Choice, { on: settings[look] === id, onPick: () => onPick(id), children: [_jsxs("span", { class: "swatch", [`data-${look}`]: id, children: [_jsx("i", {}), look === "marks" ? null : _jsx("i", {}), look === "board" ? _jsx("i", {}) : null] }), text.names[id] ?? id] }, id))) }));
+}
+function Choices({ label, children }) {
+    return (_jsxs("div", { class: "choices", role: "radiogroup", "aria-label": label, children: [_jsx("span", { class: "label", children: label }), _jsx("div", { class: "options", children: children })] }));
+}
+function Choice({ on, onPick, children }) {
+    return (_jsx("button", { class: "choice", type: "button", role: "radio", "aria-checked": on, onClick: onPick, children: children }));
+}
+function Toggle({ on, onSwitch, children }) {
+    return (_jsxs("label", { class: "toggle", children: [_jsx("span", { children: children }), _jsx("input", { type: "checkbox", role: "switch", checked: on, onChange: (event) => onSwitch(event.currentTarget.checked) })] }));
+}

package/dist/page/settings.js

@@ -0,0 +1,76 @@
+// The player's settings on the page (D-56): the look, the game's aids and the language, kept in the profile in use (T-19) and remembered by this browser.
+/** The piece sets: our two, whose colours the player picks, and cburnett with its own (D-52). */
+export const pieceSets = ["nitida", "torretta", "cburnett"];
+/** The choices of each look, by the ids the style sheet knows; the first is the default (T-82). */
+export const looks = {
+    board: ["azzurro", "verde", "noce", "ardesia", "grigio", "lavanda", "ciliegio", "menta", "carta"],
+    pieces: ["classico", "avorio", "notte", "bordeaux"],
+    marks: ["arancione", "rosso", "blu", "verde"],
+};
+/** The settings this browser remembers, each one it does not know taking its default; the theme and the sounds chosen before the panel come along. */
+export function loadSettings() {
+    const saved = read(remembered);
+    const oldTheme = read("chesspal-theme");
+    return settingsFrom(saved === null ? {} : parsed(saved), { theme: oldTheme === "light" || oldTheme === "dark" ? oldTheme : "system", sound: read("chesspal-sound") !== "off" });
+}
+/** Settings from what was kept, by this browser or in the profile: each one not known takes its default. */
+export function settingsFrom(value, defaults = { theme: "system", sound: true }) {
+    const stored = typeof value === "object" && value !== null ? value : {};
+    return {
+        theme: oneOf(stored.theme, ["system", "light", "dark"], defaults.theme),
+        board: oneOf(stored.board, looks.board, looks.board[0]),
+        set: oneOf(stored.set, pieceSets, pieceSets[0]),
+        pieces: oneOf(stored.pieces, looks.pieces, looks.pieces[0]),
+        marks: oneOf(stored.marks, looks.marks, looks.marks[0]),
+        dots: typeof stored.dots === "boolean" ? stored.dots : true,
+        explain: typeof stored.explain === "boolean" ? stored.explain : true,
+        book: typeof stored.book === "boolean" ? stored.book : true,
+        helps: typeof stored.helps === "boolean" ? stored.helps : false,
+        sound: typeof stored.sound === "boolean" ? stored.sound : defaults.sound,
+        voice: typeof stored.voice === "boolean" ? stored.voice : false,
+        language: oneOf(stored.language, ["auto", "it", "en"], "auto"),
+    };
+}
+/** Remembers the settings in this browser. */
+export function saveSettings(settings) {
+    try {
+        localStorage.setItem(remembered, JSON.stringify(settings));
+    }
+    catch {
+        // The choices last as long as the page.
+    }
+}
+/** Shows the settings' look on the page: the theme, the board's skin, the pieces' set and colours and the marks' colour, as attributes the style sheet reads. */
+export function showSettings(settings) {
+    const root = document.documentElement.dataset;
+    root.theme = settings.theme === "system" ? (matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light") : settings.theme;
+    root.board = settings.board;
+    root.set = settings.set;
+    root.pieces = settings.pieces;
+    root.marks = settings.marks;
+}
+/** The languages the page speaks in, by the setting: the browser's, or the one chosen. */
+export function languagesOf(settings) {
+    return settings.language === "auto" ? navigator.languages : [settings.language];
+}
+const remembered = "chesspal-settings";
+function read(key) {
+    try {
+        return localStorage.getItem(key);
+    }
+    catch {
+        return null;
+    }
+}
+function parsed(saved) {
+    try {
+        const value = JSON.parse(saved);
+        return typeof value === "object" && value !== null ? value : {};
+    }
+    catch {
+        return {};
+    }
+}
+function oneOf(value, choices, fallback) {
+    return choices.find((choice) => choice === value) ?? fallback;
+}

package/dist/page/sounds.js

@@ -0,0 +1,105 @@
+const folder = "/page/sounds/";
+/** The sound of the game's last move, from how the board stands after it; none before the first move. */
+export function soundOf(game) {
+    const last = game.lastMove;
+    const { outcome } = game;
+    if (last === undefined) {
+        return undefined;
+    }
+    if (outcome.over) {
+        return outcome.ending === "checkmate" ? "mate" : "draw";
+    }
+    return game.position.check ? "check" : last.san.includes("x") ? "capture" : "move";
+}
+/** The sound of a game ended without a move: a resignation, a flag fallen, a draw agreed; none for the ends that come with a move. */
+export function endSoundOf(how) {
+    return how === "resignation" ? "resign" : how === "time" ? "flag" : how === "agreement" ? "draw" : undefined;
+}
+/** Lets the page play sounds: loads the recordings, and since a browser plays none before the player has touched the page, the first touch wakes them. */
+export function wakeSounds() {
+    loadRecordings();
+    addEventListener("pointerdown", () => void audio()?.resume(), { once: true });
+}
+/** Plays a sound: its recordings together, else its tone; a browser without Web Audio plays none. */
+export function playSound(sound) {
+    const context = audio();
+    if (context === undefined) {
+        return;
+    }
+    const recorded = layers[sound].flatMap((layer) => recordings.get(layer) ?? []);
+    if (recorded.length < layers[sound].length) {
+        playTone(context, sound);
+        return;
+    }
+    for (const recording of recorded) {
+        const source = new AudioBufferSourceNode(context, { buffer: recording });
+        source.connect(context.destination);
+        source.start();
+    }
+}
+/** Fetches and decodes the recordings, offline so that the page wakes no sound before a touch; one that fails leaves its tone. */
+function loadRecordings() {
+    let decoder;
+    try {
+        decoder = new OfflineAudioContext({ length: 1, sampleRate: 48000 });
+    }
+    catch {
+        return;
+    }
+    for (const sound of Object.keys(tones)) {
+        void fetch(`${folder}${sound}.ogg`)
+            .then((response) => response.ok ? response.arrayBuffer() : Promise.reject(new Error(`No ${sound}.ogg.`)))
+            .then((bytes) => decoder.decodeAudioData(bytes))
+            .then((buffer) => recordings.set(sound, buffer), () => undefined);
+    }
+}
+function playTone(context, sound) {
+    for (const { frequency, at, length, wave, volume } of tones[sound]) {
+        const oscillator = new OscillatorNode(context, { type: wave, frequency });
+        const gain = new GainNode(context, { gain: 0 });
+        const start = context.currentTime + at;
+        // A quick attack and a fall, as a struck note has.
+        gain.gain.linearRampToValueAtTime(volume, start + 0.005);
+        gain.gain.exponentialRampToValueAtTime(0.0001, start + length);
+        oscillator.connect(gain).connect(context.destination);
+        oscillator.start(start);
+        oscillator.stop(start + length);
+    }
+}
+// A wooden knock for a piece set down, two for a capture, a call for a check, a chord for a mate, a falling pair for a draw, three falling notes for a
+// resignation, a timer's beeps for a flag, a rising pair for a draw offered.
+const tones = {
+    move: [{ frequency: 190, at: 0, length: 0.08, wave: "triangle", volume: 0.5 }, { frequency: 1200, at: 0, length: 0.02, wave: "sine", volume: 0.12 }],
+    capture: [{ frequency: 170, at: 0, length: 0.08, wave: "triangle", volume: 0.5 }, { frequency: 240, at: 0.06, length: 0.1, wave: "triangle", volume: 0.45 }],
+    check: [{ frequency: 660, at: 0, length: 0.14, wave: "sine", volume: 0.25 }, { frequency: 880, at: 0.11, length: 0.2, wave: "sine", volume: 0.25 }],
+    mate: [523, 659, 784, 1047].map((frequency, index) => ({ frequency, at: index * 0.06, length: 0.9, wave: "sine", volume: 0.18 })),
+    draw: [{ frequency: 440, at: 0, length: 0.3, wave: "sine", volume: 0.2 }, { frequency: 349, at: 0.22, length: 0.45, wave: "sine", volume: 0.2 }],
+    resign: [523, 392, 262].map((frequency, index) => ({ frequency, at: index * 0.11, length: index === 2 ? 0.5 : 0.25, wave: "triangle", volume: 0.25 })),
+    flag: [
+        ...[0, 0.11, 0.22].map((at) => ({ frequency: 988, at, length: 0.07, wave: "square", volume: 0.06 })),
+        { frequency: 440, at: 0.36, length: 0.4, wave: "triangle", volume: 0.25 },
+    ],
+    offer: [{ frequency: 659, at: 0, length: 0.45, wave: "sine", volume: 0.2 }, { frequency: 880, at: 0.16, length: 0.5, wave: "sine", volume: 0.2 }],
+};
+/** The recordings each sound plays at once. */
+const layers = {
+    move: ["move"],
+    capture: ["move", "capture"],
+    check: ["move", "check"],
+    mate: ["move", "mate"],
+    draw: ["draw"],
+    resign: ["resign"],
+    flag: ["flag"],
+    offer: ["offer"],
+};
+const recordings = new Map();
+let shared;
+function audio() {
+    try {
+        shared ??= new AudioContext();
+        return shared;
+    }
+    catch {
+        return undefined;
+    }
+}

package/dist/page/studied.js

@@ -0,0 +1,14 @@
+/** Both sides of a game in analysis, and the one at the bottom: the player's, when one of them is, else White. */
+export function studiedSides(tags, you, ai, sides) {
+    const sideOf = (side) => {
+        const tag = (side === "white" ? tags.White : tags.Black)?.trim() ?? "";
+        if (tag === "Player" || tag.toLowerCase() === you.trim().toLowerCase()) {
+            return { name: you, who: "player" };
+        }
+        // A tag PGN leaves unknown names the side.
+        return tag === "AI" ? { name: ai, who: "ai" } : { name: /^[?\-\s]*$/.test(tag) ? sides[side] : tag, who: "other" };
+    };
+    const white = sideOf("white");
+    const black = sideOf("black");
+    return { white, black, bottom: black.who === "player" && white.who !== "player" ? "black" : "white" };
+}

package/dist/page/study-dialog.js

@@ -0,0 +1,58 @@
+import { jsx as _jsx, jsxs as _jsxs } from "preact/jsx-runtime";
+// The dialog of the analyses (T-92, T-106): the games analysed or brought to study, to open again, and a game played elsewhere brought as a PGN, pasted or read
+// from a file, which the server keeps to study and puts in analysis.
+import { useEffect, useState } from "preact/hooks";
+import { Dialog } from "./dialog.js";
+import { signature } from "./model-name.js";
+import { studiedSides } from "./studied.js";
+/**
+ * The dialog the header's button opens; `onStudy` sends the choice and gives back why the server refused it, or undefined once it took it. The games played
+ * here name their sides as their analysis does: the player by `you`, the AI by its model when the game keeps it (D-82), else by `ai`.
+ */
+export function StudyDialog({ open, onStudy, onClose, you, ai, text }) {
+    return (_jsx(Dialog, { open: open, title: text.study.title, onClose: onClose, text: text, children: _jsx(StudyForm, { onStudy: onStudy, you: you, ai: ai, text: text }) }));
+}
+/** The form, made again at each opening: the list read anew, empty, with no problem shown. */
+function StudyForm({ onStudy, you, ai, text }) {
+    const words = text.study;
+    const [pgn, setPgn] = useState("");
+    const [problem, setProblem] = useState(undefined);
+    const [sending, setSending] = useState(false);
+    const analyses = useAnalyses();
+    const study = (studied) => {
+        setSending(true);
+        void onStudy(studied).then((refused) => {
+            setSending(false);
+            setProblem(refused);
+        });
+    };
+    const read = (file) => {
+        void file?.text().then((read) => {
+            setPgn(read);
+            setProblem(undefined);
+        });
+    };
+    return (_jsxs("form", { class: "profile-form study", onSubmit: (event) => {
+            event.preventDefault();
+            study({ pgn });
+        }, children: [analyses.length === 0 ? null : (_jsxs("section", { class: "analyses", "aria-label": words.yours, children: [_jsx("h3", { children: words.yours }), _jsx("ul", { children: analyses.map((item) => (_jsx("li", { children: _jsxs("button", { type: "button", disabled: sending, onClick: () => study({ game: item.name }), children: [_jsx("b", { children: sidesNamed(item, you, ai, text) }), _jsx("span", { class: "result", children: item.result }), _jsx("span", { class: "note", children: [item.date, item.opening, words.moves(item.moves)].filter((part) => part !== undefined).join(" · ") }), _jsx("span", { class: item.reviewed ? "state reviewed" : "state", children: item.reviewed ? words.reviewed : words.unreviewed })] }) }, item.name))) }), _jsx("h3", { children: words.bring })] })), _jsxs("label", { class: "field", children: [_jsx("span", { children: words.paste }), _jsx("textarea", { rows: analyses.length === 0 ? 10 : 6, value: pgn, autofocus: true, spellcheck: false, placeholder: '[White "…"]\n[Black "…"]\n\n1. e4 e5 2. Nf3 …', onInput: (event) => {
+                            setPgn(event.currentTarget.value);
+                            setProblem(undefined);
+                        } })] }), _jsxs("label", { class: "field file", children: [_jsx("span", { children: words.file }), _jsx("input", { type: "file", accept: ".pgn,application/x-chess-pgn,text/plain", onChange: (event) => read(event.currentTarget.files?.[0]) })] }), _jsx("p", { class: "note", children: words.note }), problem === undefined ? null : _jsx("p", { class: "problem", role: "alert", children: problem }), _jsx("button", { class: "start", type: "submit", disabled: pgn.trim() === "" || sending, children: words.start })] }));
+}
+/** Who played a game listed, as its analysis names them: «Stefano – Opus 5.5 · xhigh». */
+function sidesNamed(item, you, ai, text) {
+    const { white, black } = studiedSides({ White: item.white, Black: item.black }, you, item.aiModel === undefined ? ai : signature(item.aiModel.model, item.aiModel.effort), text.sides);
+    return `${white.name} – ${black.name}`;
+}
+/** The analyses of the player's folder, read once the dialog opens; none while they come, or when the server cannot give them. */
+function useAnalyses() {
+    const [analyses, setAnalyses] = useState([]);
+    useEffect(() => {
+        void fetch("/api/analyses")
+            .then(async (response) => response.ok ? await response.json() : [])
+            .catch(() => [])
+            .then(setAnalyses);
+    }, []);
+    return analyses;
+}