chesspal 0.1.0 → 0.2.1

package/dist/page/{new-game-dialog.js → dialogs/new-game.js}

@@ -1,8 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "preact/jsx-runtime";
 import { useState } from "preact/hooks";
-import { aiLevels } from "../core/index.js";
+import { aiLevels } from "../../core/index.js";
+import { Piece } from "../pieces/pieces.js";
 import { Dialog } from "./dialog.js";
-import { Piece } from "./pieces.js";
 /** The clocks offered: long enough for an AI that takes 10 to 30 seconds a move (D-13), with the seconds added at each move. */
 export const clocks = ["10+5", "15+10", "30+20"];
 /** The dialog the + opens, with the choices of the game before; the game going on, if any, goes to the archive unfinished when the new one starts. */
@@ -10,7 +10,7 @@ export function NewGameDialog({ open, choice, going, onStart, onClose, text }) {
     return (_jsx(Dialog, { open: open, title: text.newGame, onClose: onClose, text: text, children: _jsx(NewGameForm, { choice: choice, going: going, onStart: onStart, text: text }) }));
 }
 const colours = ["white", "black", "random"];
-/** The colours by their king, the chosen set's silhouette in fixed colours, which both themes show (T-94); either colour by both kings. */
+/** The colours by their king, the chosen set's silhouette in fixed colours, which both themes show; either colour by both kings. */
 const colourIcons = {
     white: _jsx(Piece, { letter: "K", small: true }),
     black: _jsx(Piece, { letter: "k", small: true }),

package/dist/page/{profile-dialogs.js → dialogs/profiles.js}

@@ -1,13 +1,13 @@
 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 { DrawnAvatar, PlayerPicture } from "../avatars/avatars.js";
+import { Torretta } from "../avatars/torretta.js";
+import { avatarIds, chooseAvatar, imageAddress, levels, makeProfile, nameLimit, openDataFolder, ratingLimits, ratingSites, saveAccounts, sendPhoto, useProfile, } from "../profile/profile.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).
+ * The system's account is only a suggestion for the name, and the page says where the games go.
  */
 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 })] }));
@@ -31,8 +31,11 @@ export function PictureDialog({ open, profile, onClose, text }) {
     };
     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 }) {
+/**
+ * The menu of the players, open while `open`: another put in use, never while a game goes on, or a new one made, which waits for it to end; and the names of the one in
+ * use on Lichess and chess.com (D-93).
+ */
+export function ProfilesDialog({ open, profiles, active, locked, dataFolder, onClose, text }) {
     const [making, setMaking] = useState(false);
     const [problem, setProblem] = useState(undefined);
     useEffect(() => {
@@ -46,9 +49,35 @@ export function ProfilesDialog({ open, profiles, active, playing, dataFolder, on
         }
         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 })] })) }));
+    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, use: locked === undefined, 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: locked !== undefined && 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))) }), _jsx(AccountsForm, { profile: active, text: text }, `${active.id} ${String(open)}`), locked === undefined ? null : _jsx("p", { class: "note", children: locked }), _jsx("button", { class: "command new-profile", type: "button", onClick: () => setMaking(true), children: text.profile.newProfile }), problem === undefined ? null : _jsx("p", { class: "problem", role: "alert", children: problem }), _jsx(DataFolder, { folders: dataFolder, text: text })] })) }));
+}
+/** The player's names on Lichess and chess.com, each saved once changed, with a tick beside it: a game loaded from there with that name is theirs (D-93). */
+function AccountsForm({ profile, text }) {
+    const words = text.profile;
+    const [names, setNames] = useState({ lichess: profile.accounts?.lichess ?? "", chesscom: profile.accounts?.chesscom ?? "" });
+    const [saved, setSaved] = useState(undefined);
+    const [problem, setProblem] = useState(undefined);
+    const save = (site, field) => {
+        // A name the sites would not give stays in its field, marked, until it reads.
+        if (!field.validity.valid) {
+            setSaved(undefined);
+            return;
+        }
+        const changed = { ...names, [site]: field.value.trim() };
+        setNames(changed);
+        setSaved(undefined);
+        void saveAccounts(profile.id, changed).then((refused) => {
+            setProblem(refused === undefined ? undefined : refusalText(refused, text));
+            setSaved(refused === undefined ? site : undefined);
+        });
+    };
+    return (_jsxs("div", { class: "accounts", children: [accountSites.map((site) => (_jsxs("label", { title: words.accountTitle, children: [_jsx("span", { children: siteNames[site] }), _jsx("input", { type: "text", 
+                        // Not bound to the names saved: a name the sites would not give stays as typed, marked.
+                        defaultValue: names[site], "aria-label": siteNames[site], placeholder: words.username, maxLength: nameLimit, pattern: "\\s*[\\w\\-]*\\s*", autocomplete: "off", spellcheck: false, onChange: (event) => save(site, event.currentTarget) }), saved === site ? checkIcon : _jsx("span", { class: "tick" })] }, site))), problem === undefined ? null : _jsx("p", { class: "problem", role: "alert", children: problem })] }));
 }
-/** Where the games are, as the file manager walks there, and a button that opens it there (T-119). */
+const accountSites = ["lichess", "chesscom"];
+const siteNames = { lichess: "Lichess", chesscom: "Chess.com" };
+/** Where the games are, as the file manager walks there, and a button that opens it there. */
 function DataFolder({ folders, text }) {
     const words = text.profile;
     const [problem, setProblem] = useState(undefined);
@@ -71,8 +100,8 @@ function DataFolder({ folders, text }) {
     };
     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 }) {
+/** The form that makes a profile and puts it in use: the wizard's, with the system's account as a suggestion, and the menu's for another player. */
+function ProfileForm({ text, submit, suggestion, use = true, onMade }) {
     const words = text.profile;
     const [name, setName] = useState("");
     const [avatar, setAvatar] = useState(avatarIds[0]);
@@ -86,7 +115,7 @@ function ProfileForm({ text, submit, suggestion, onMade }) {
         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) => {
+        void makeProfile({ name, level, site, ...(value === undefined ? {} : { rating: value }), ...(photo === undefined ? { avatar } : { photo }), use }).then((refused) => {
             setBusy(false);
             setProblem(refused === undefined ? undefined : refusalText(refused, text));
             if (refused === undefined) {

package/dist/page/dialogs/search.js

@@ -0,0 +1,31 @@
+// A full-text search over a list, as the player types it: any of the words found (OR), the items that match more of them first.
+/**
+ * The items that match any word of the query, in their order, those matching more words first; all of them for an empty query. A word matches a part of
+ * the item's text, or a longer form of one of its words: «Siciliana» finds «Sicilian», «Italiana» «Italian».
+ */
+export function searched(items, query, textOf) {
+    const wanted = wordsOf(query);
+    if (wanted.length === 0) {
+        return items;
+    }
+    return items
+        .map((item, index) => ({ item, index, found: matches(wordsOf(textOf(item)), wanted) }))
+        .filter(({ found }) => found > 0)
+        .sort((one, other) => other.found - one.found || one.index - other.index)
+        .map(({ item }) => item);
+}
+// A word of the query finds a longer form of the item's word only past this length, and only so many letters longer: «Sicilian» and «-a».
+const stemLength = 5;
+const endingLength = 2;
+/** How many words of the query the item's words hold. */
+function matches(words, wanted) {
+    const text = words.join(" ");
+    return wanted.filter((word) => text.includes(word) || words.some((one) => isFormOf(word, one))).length;
+}
+function isFormOf(word, stem) {
+    return stem.length >= stemLength && word.startsWith(stem) && word.length - stem.length <= endingLength;
+}
+/** The words of a text, lowercase and without accents, split at anything that is not a letter or a digit. */
+function wordsOf(text) {
+    return text.normalize("NFD").replace(/\p{M}/gu, "").toLowerCase().split(/[^\p{L}\p{N}]+/u).filter((word) => word !== "");
+}

package/dist/page/dialogs/settings.js

@@ -0,0 +1,42 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "preact/jsx-runtime";
+import { useEffect, useRef } from "preact/hooks";
+import { Piece } from "../pieces/pieces.js";
+import { looks, pieceSets } from "../profile/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: "dialog", "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: "icon-button", 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" }) }) })] }), _jsxs("div", { class: "setting-columns", children: [_jsxs(Section, { title: text.look, icon: lookIcon, children: [_jsxs("div", { class: "setting-group", children: [_jsx("p", { class: "setting-label", children: text.themeChoice }), _jsx(Segments, { label: text.themeChoice, children: ["system", "light", "dark"].map((theme) => _jsx(Choice, { on: settings.theme === theme, onPick: () => set("theme", theme), children: text.themes[theme] }, theme)) })] }), _jsxs("div", { class: "setting-group", children: [_jsxs("p", { class: "setting-label", children: [text.boardSkin, " ", _jsx("b", { children: nameOf(settings.board, text) })] }), _jsx(Swatches, { look: "board", label: text.boardSkin, settings: settings, onPick: (id) => set("board", id), text: text })] }), _jsxs("div", { class: "setting-group", children: [_jsx("p", { class: "setting-label", children: text.pieceSet }), _jsx("div", { class: "piece-sets", role: "radiogroup", "aria-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 })] }), nameOf(pieceSet, text)] }, pieceSet))) })] }), _jsxs("div", { class: "setting-group setting-pair", children: [_jsxs("div", { children: [_jsx("p", { class: "setting-label", children: text.pieceColours }), _jsx(Swatches, { look: "pieces", label: text.pieceColours, settings: settings, onPick: (id) => set("pieces", id), text: text })] }), _jsxs("div", { children: [_jsx("p", { class: "setting-label", children: text.marksColour }), _jsx(Swatches, { look: "marks", label: text.marksColour, settings: settings, onPick: (id) => set("marks", id), text: text })] })] })] }), _jsxs("div", { class: "setting-column", children: [_jsxs(Section, { title: text.play, icon: playIcon, children: [_jsx(Switch, { on: settings.dots, onSwitch: (on) => set("dots", on), children: text.dots }), _jsx(Switch, { on: settings.squareNames, onSwitch: (on) => set("squareNames", on), children: text.squareNames }), _jsx(Switch, { on: settings.explain, onSwitch: (on) => set("explain", on), children: text.explain }), _jsx(Switch, { on: settings.book, onSwitch: (on) => set("book", on), children: text.bookBadges }), _jsx(Switch, { on: settings.helps, onSwitch: (on) => set("helps", on), children: text.helps }), _jsx(Switch, { on: settings.sound, onSwitch: (on) => set("sound", on), children: text.sounds }), _jsx(Switch, { on: settings.voice, onSwitch: (on) => set("voice", on), children: text.voice })] }), _jsx(Section, { title: text.languageChoice, icon: languageIcon, children: _jsx(Segments, { 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 sections' line icons: a palette, a pawn, a globe.
+const lookIcon = (_jsxs(_Fragment, { children: [_jsx("path", { d: "M12 3a9 9 0 1 0 0 18c1.2 0 1.8-.8 1.8-1.7 0-1.2-1-1.6-1-2.6 0-1 .8-1.7 1.8-1.7H17a4 4 0 0 0 4-4C21 6.5 17 3 12 3Z" }), _jsx("circle", { cx: "7.5", cy: "11", r: "1.2" }), _jsx("circle", { cx: "10", cy: "7", r: "1.2" }), _jsx("circle", { cx: "14.5", cy: "7", r: "1.2" })] }));
+const playIcon = (_jsxs(_Fragment, { children: [_jsx("circle", { cx: "12", cy: "6.5", r: "2.8" }), _jsx("path", { d: "M9.6 10.5h4.8M10.3 10.5c0 3-1.3 5.5-2.8 7.5h9c-1.5-2-2.8-4.5-2.8-7.5M6.5 20.5h11" })] }));
+const languageIcon = (_jsxs(_Fragment, { children: [_jsx("circle", { cx: "12", cy: "12", r: "9" }), _jsx("path", { d: "M3 12h18M12 3c2.5 2.5 3.6 5.5 3.6 9s-1.1 6.5-3.6 9c-2.5-2.5-3.6-5.5-3.6-9S9.5 5.5 12 3Z" })] }));
+function Section({ title, icon, children }) {
+    return (_jsxs("section", { class: "setting-card", children: [_jsxs("h3", { children: [_jsx("svg", { class: "icon", viewBox: "0 0 24 24", "aria-hidden": "true", children: icon }), title] }), children] }));
+}
+/** The choices of a look, each a tile or a dot drawn by the style sheet with the look's own colours, its name in its title and for a screen reader. */
+function Swatches({ look, label, settings, onPick, text }) {
+    return (_jsx("div", { class: look === "board" ? "swatches skins" : "swatches", role: "radiogroup", "aria-label": label, children: looks[look].map((id) => (_jsx("button", { class: "swatch", type: "button", role: "radio", "aria-checked": settings[look] === id, title: nameOf(id, text), "aria-label": nameOf(id, text), onClick: () => onPick(id), [`data-${look}`]: id, children: look === "board" ? [0, 1, 2, 3].map((square) => _jsx("i", {}, square)) : null }, id))) }));
+}
+function Segments({ label, children }) {
+    return _jsx("div", { class: "segments", role: "radiogroup", "aria-label": label, children: children });
+}
+function Choice({ on, onPick, children }) {
+    return (_jsx("button", { type: "button", role: "radio", "aria-checked": on, onClick: onPick, children: children }));
+}
+function Switch({ on, onSwitch, children }) {
+    return (_jsxs("label", { class: "switch", children: [_jsx("span", { children: children }), _jsx("input", { type: "checkbox", role: "switch", checked: on, onChange: (event) => onSwitch(event.currentTarget.checked) })] }));
+}
+function nameOf(id, text) {
+    return text.names[id] ?? id;
+}

package/dist/page/dialogs/studied.js

@@ -0,0 +1,39 @@
+/** The player's side in a game in analysis: none when they played neither side, or both. */
+export function playerIn(sides) {
+    const white = sides.white.who === "player";
+    return white === (sides.black.who === "player") ? undefined : white ? "white" : "black";
+}
+/**
+ * Both sides of a game in analysis, and the one at the bottom: the player's, when one of them is, else White. The player is the side named Player, or by
+ * their name, or by their name on the site the game was played on (D-93).
+ */
+export function studiedSides(tags, you, ai, sides, accounts) {
+    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" };
+        }
+        if (accountSide(tags, accounts) === side) {
+            return { name: tag, 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" };
+}
+/**
+ * The side a game loaded from elsewhere names by one of the player's names on the sites (D-93): the one of its site when the Site tag says Lichess or
+ * chess.com, either otherwise; none when neither side, or both, has one.
+ */
+export function accountSide(tags, accounts) {
+    const site = (tags.Site ?? "").toLowerCase();
+    const names = [
+        site.includes("chess.com") ? undefined : accounts?.lichess,
+        site.includes("lichess") ? undefined : accounts?.chesscom,
+    ].filter((name) => name !== undefined).map((name) => name.trim().toLowerCase());
+    const white = names.includes(tags.White?.trim().toLowerCase() ?? "");
+    const black = names.includes(tags.Black?.trim().toLowerCase() ?? "");
+    return white === black ? undefined : white ? "white" : "black";
+}

package/dist/page/dialogs/study.js

@@ -0,0 +1,51 @@
+import { jsx as _jsx, jsxs as _jsxs } from "preact/jsx-runtime";
+// The dialog of the analyses (D-92): the list of the games analysed or brought to study, and a step that loads a game played elsewhere as a PGN, pasted or
+// read from a file, which the server keeps to study and puts in analysis.
+import { useEffect, useRef, useState } from "preact/hooks";
+import { Analyses } from "./analyses.js";
+import { Dialog } from "./dialog.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, accounts, ai, text }) {
+    const [loading, setLoading] = useState(false);
+    // Each opening starts from the list.
+    useEffect(() => {
+        if (!open) {
+            setLoading(false);
+        }
+    }, [open]);
+    return (_jsx(Dialog, { open: open, title: loading ? text.study.bring : text.study.title, onBack: loading ? () => setLoading(false) : undefined, onClose: onClose, text: text, children: loading ? _jsx(LoadForm, { onStudy: onStudy, text: text }) : _jsx(Analyses, { onStudy: onStudy, onLoad: () => setLoading(true), you: you, accounts: accounts, ai: ai, text: text }) }));
+}
+/** The step that loads a game played elsewhere: its PGN pasted, or read from a file. */
+function LoadForm({ onStudy, text }) {
+    const words = text.study;
+    const [pgn, setPgn] = useState("");
+    const [problem, setProblem] = useState(undefined);
+    const [sending, setSending] = useState(false);
+    const field = useRef(null);
+    // With a mouse only: on a phone the keyboard would cover the step.
+    useEffect(() => {
+        if (matchMedia("(pointer: fine)").matches) {
+            field.current?.focus();
+        }
+    }, []);
+    const read = (file) => {
+        void file?.text().then((read) => {
+            setPgn(read);
+            setProblem(undefined);
+        });
+    };
+    return (_jsxs("form", { class: "profile-form study", onSubmit: (event) => {
+            event.preventDefault();
+            setSending(true);
+            void onStudy({ pgn }).then((refused) => {
+                setSending(false);
+                setProblem(refused);
+            });
+        }, children: [_jsxs("label", { class: "field", children: [_jsx("span", { children: words.paste }), _jsx("textarea", { ref: field, rows: 10, value: pgn, 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 })] }));
+}

package/dist/page/{badges.js → game/badges.js}

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "preact/jsx-runtime";
-import { badges } from "../core/index.js";
+import { badges } from "../../core/index.js";
 /** A move's badge, as an inline SVG of class `move-badge`: 16px in a line of text, a third of the square in a `.square`. With a title it is an image with
  * that name; without, it is hidden from screen readers, for the text beside it to say it. */
 export function BadgeIcon({ badge, title }) {

package/dist/page/{browse.js → game/browse.js}

@@ -1,4 +1,4 @@
-// Looking back through the game played (T-88): one step at a time or to either end, with the keys of Lichess and chess.com, only to look at it.
+// Looking back through the game played: one step at a time or to either end, with the keys of Lichess and chess.com, only to look at it.
 /** The keys that step through the moves, as Lichess and chess.com have them: the arrows, and Home and End. */
 export const stepKeys = {
     ArrowLeft: "back",

package/dist/page/game/card-fold.js

@@ -0,0 +1,40 @@
+import { jsx as _jsx, jsxs as _jsxs } from "preact/jsx-runtime";
+import { useState } from "preact/hooks";
+/** Whether the card is folded, as this browser left it, and what folds it or opens it again. */
+export function useCardFold(card) {
+    const [folded, setFolded] = useState(() => read(card));
+    const toggle = () => {
+        remember(card, !folded);
+        setFolded(!folded);
+    };
+    return [folded, toggle];
+}
+/** A card's title as the button that folds the card and opens it again: its icon and name, then a chevron, down while the card is open. */
+export function FoldButton({ folded, onFold, text, children }) {
+    return (_jsxs("button", { type: "button", class: "card-fold", "aria-expanded": !folded, title: folded ? text.openCard : text.foldCard, onClick: onFold, children: [children, _jsx("svg", { class: "chevron", viewBox: "0 0 16 16", "aria-hidden": "true", children: _jsx("path", { d: folded ? "M6 4L10 8L6 12" : "M4 6L8 10L12 6" }) })] }));
+}
+function read(card) {
+    try {
+        return localStorage.getItem(keyOf(card)) === "folded";
+    }
+    catch {
+        // A browser that keeps nothing for the page: the card opens.
+        return false;
+    }
+}
+function remember(card, folded) {
+    try {
+        if (folded) {
+            localStorage.setItem(keyOf(card), "folded");
+        }
+        else {
+            localStorage.removeItem(keyOf(card));
+        }
+    }
+    catch {
+        // The choice lasts as long as the page.
+    }
+}
+function keyOf(card) {
+    return `chesspal-card-${card}`;
+}

package/dist/page/game/column.js

@@ -0,0 +1,55 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "preact/jsx-runtime";
+import { outOfBookMove } from "../../core/index.js";
+import { LeadBar, LeadChart } from "../lead/lead.js";
+import { standingAt } from "../lead/view.js";
+import { Piece } from "../pieces/pieces.js";
+import { FoldButton, useCardFold } from "./card-fold.js";
+import { MoveList, Steps } from "./move-list.js";
+import { ResultTile } from "./result-tile.js";
+/**
+ * The column, which the player folds with its tab; 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, standings, analysis, shownPlies, onShow, onStep, onDownload, onSaveMoves, onAnalyse, text }) {
+    const bar = standings === undefined ? undefined : _jsx(LeadBar, { standing: standingAt(standings, shownPlies), shown: shownPlies, text: 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, bar: bar, text: text }), analysis === undefined || standings === undefined ? null : _jsx(LeadChart, { plies: plies, standings: standings, shown: shownPlies, onShow: onShow, text: text }), opening === undefined ? null : _jsx(OpeningCard, { opening: opening, text: text }), helps, 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 }), onDownload === undefined && onSaveMoves === undefined ? null : (_jsxs("div", { class: "card analysis-actions", children: [onDownload === undefined ? null : _jsx(SaveButton, { label: text.study.download, hint: text.study.downloadHint, onSave: onDownload }), onSaveMoves === undefined ? null : _jsx(SaveButton, { label: text.saveMoves, hint: text.saveMovesHint, onSave: onSaveMoves })] })), onAnalyse === undefined ? null : _jsx(AnalyseButton, { label: text.study.analyseIt, onAnalyse: onAnalyse }), _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, its tooltip saying what the file holds. */
+function SaveButton({ label, hint, onSave }) {
+    return (_jsxs("button", { type: "button", title: hint, 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: 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.
+ */
+function GameCard({ plies, result, how, lit, started, move, toMove, bar, 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) }), bar] })] }));
+    }
+    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: [_jsx(ResultTile, { result: winner === undefined ? "1/2-1/2" : result }), _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)] }), bar] })] }));
+}
+/**
+ * The opening by Lichess's book: a book, crossed out once the game left it, and the family, which fold the card to them (Stefano); the variation under them,
+ * and the move the game left the book at.
+ */
+function OpeningCard({ opening, text }) {
+    const [foldedHere, toggleFold] = useCardFold("opening");
+    const book = opening.inBook ? text.inBook : `${text.outOfBook} ${outOfBookMove(opening)}`;
+    // The family alone has nothing under it to fold: no button, no chevron (Stefano).
+    const foldable = opening.variation !== undefined || !opening.inBook;
+    const folded = foldable && foldedHere;
+    const title = (_jsxs(_Fragment, { 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 })] }));
+    return (_jsxs("section", { class: `card opening${folded ? " folded" : ""}`, "aria-label": text.opening, children: [_jsx("h3", { class: "family", children: foldable ? _jsx(FoldButton, { folded: folded, onFold: toggleFold, text: text, children: title }) : title }), folded || opening.variation === undefined ? null : _jsx("p", { class: "variation", children: opening.variation }), folded || opening.inBook ? null : _jsxs("p", { class: "out", children: [text.outOfBook, " ", outOfBookMove(opening)] })] }));
+}

package/dist/page/{ending.js → game/ending.js}

@@ -1,4 +1,4 @@
-// How a game ended, as the page names it (T-77): by the board, or by a resignation or a draw agreed, which only the record's Termination tag says (D-37).
+// How a game ended, as the page names it: by the board, or by a resignation or a draw agreed, which only the record's Termination tag says (D-37).
 import { useEffect, useLayoutEffect, useRef, useState } from "preact/hooks";
 /** How the game ended, from the board or the record's Termination tag; undefined while it goes on, or when the record does not say. */
 export function howEnded(outcome, termination) {
@@ -10,7 +10,7 @@ export function howEnded(outcome, termination) {
     if (/^draw agreed$|by agreement|per accordo/i.test(termination ?? "")) {
         return "agreement";
     }
-    // A flag that fell (T-37): "Black lost on time", "Black ran out of time and White cannot mate".
+    // A flag that fell: "Black lost on time", "Black ran out of time and White cannot mate".
     if (/ (lost on|ran out of|won on) time\b|time forfeit|per tempo/i.test(termination ?? "")) {
         return "time";
     }