chesspal 0.2.4 → 0.3.1

package/dist/page/dialogs/dialogs.css

@@ -1005,12 +1005,6 @@ h3 + .switch {
     outline-offset: 2px;
 }
 
-.rating {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    gap: 8px;
-}
-
 .profile-form .start {
     width: 100%;
     padding: 13px;
@@ -1089,13 +1083,53 @@ h3 + .switch {
     height: 32px;
 }
 
-/* The names on Lichess and chess.com of the player in use, under their line: the site, the name, a tick once saved (D-93) */
-.dialog .accounts {
+/* The player in use, with the pencil that opens their profile beside their line */
+.profile-row {
+    display: flex;
+    gap: 6px;
+}
+
+.profile-row .choice {
+    flex: 1;
+}
+
+.profile-row .edit-profile {
+    flex: none;
+    align-self: center;
+}
+
+/* The profile window: the name with its tick once saved, as the names on the sites have */
+.profile-edit .field {
     display: grid;
-    grid-template-columns: auto 1fr 18px;
+    grid-template-columns: 1fr 18px;
+    align-items: center;
+    gap: 0 10px;
+}
+
+.profile-edit .field > span {
+    grid-column: 1 / -1;
+}
+
+.profile-edit .field .in-use {
+    width: 18px;
+    height: 18px;
+    color: var(--accent);
+}
+
+.profile-edit input[type="text"]:invalid {
+    border-color: var(--low-time);
+}
+
+/* The names on Lichess and chess.com: the site and the name; in the profile window the rating read there, and a tick once saved (D-93, D-105) */
+.accounts {
+    display: grid;
+    grid-template-columns: auto 1fr;
     align-items: center;
     gap: 6px 10px;
-    margin: -4px 0 12px;
+}
+
+.accounts.read {
+    grid-template-columns: auto 1fr minmax(4ch, auto) 18px;
 }
 
 .accounts label {
@@ -1132,6 +1166,46 @@ h3 + .switch {
     grid-column: 1 / -1;
 }
 
+/* The rating a site gives, its speed in its title; a cross for a name it does not know, a dash or the rating soft when it did not answer, dots while read */
+.accounts .site-mark {
+    color: var(--ink);
+    font-size: 15px;
+    font-weight: 600;
+    font-variant-numeric: tabular-nums;
+    text-align: right;
+}
+
+.accounts .site-mark span {
+    color: inherit;
+    font-size: inherit;
+}
+
+.accounts .site-mark.missing {
+    color: var(--low-time);
+}
+
+.accounts .site-mark.unreached,
+.accounts .site-mark.pending {
+    color: var(--soft);
+}
+
+/* The cross and the dash in words, under the names */
+.site-problem {
+    margin: 6px 0 0;
+    color: var(--low-time);
+    font-size: 13px;
+}
+
+.site-problem.unreached {
+    color: var(--soft);
+}
+
+.privacy {
+    margin: 8px 0 0;
+    color: var(--soft);
+    font-size: 13px;
+}
+
 .dialog .new-profile {
     border-color: var(--line);
     color: var(--ink);

package/dist/page/dialogs/profiles.js

@@ -1,9 +1,8 @@
 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/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 { avatarIds, chooseAvatar, editProfile, fideHighest, fideLowest, imageAddress, levels, makeProfile, nameLimit, openDataFolder, sendPhoto, useProfile, } from "../profile/profile.js";
 import { Dialog } from "./dialog.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.
@@ -12,30 +11,26 @@ import { Dialog } from "./dialog.js";
 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. */
+/** The player's picture on their card: a click opens their profile; 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 })] }));
+    return (_jsxs("button", { class: "me", type: "button", title: text.profile.editProfile, "aria-label": text.profile.yourPicture, "aria-haspopup": "dialog", onClick: onOpen, children: [_jsx(PlayerPicture, { profile: profile }), _jsx("span", { class: "me-cover", children: pencilIcon }), _jsx("span", { class: "me-badge", children: pencilIcon })] }));
 }
 /** 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 profile of the player in use, open while `open`: their picture, a drawn avatar or a photo of theirs, their name, how they play and their names on
+ * Lichess and chess.com, each saved once changed (D-93, D-106).
+ */
+export function ProfileDialog({ open, profile, onClose, text }) {
+    return (_jsx(Dialog, { open: open, title: text.profile.yourProfile, onClose: onClose, text: text, children: _jsx(ProfileEdit, { profile: profile, text: text }, profile.id) }));
 }
 /**
- * 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).
+ * 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; a pencil beside the
+ * one in use opens their profile.
  */
-export function ProfilesDialog({ open, profiles, active, locked, dataFolder, onClose, text }) {
+export function ProfilesDialog({ open, profiles, active, locked, dataFolder, onEdit, onClose, text }) {
     const [making, setMaking] = useState(false);
     const [problem, setProblem] = useState(undefined);
     useEffect(() => {
@@ -49,31 +44,85 @@ export function ProfilesDialog({ open, profiles, active, locked, dataFolder, onC
         }
         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, 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 })] })) }));
+    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("div", { class: "profile-row", children: [_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 === active.id
+                                ? (_jsx("button", { class: "icon-button edit-profile", type: "button", title: text.profile.editProfile, "aria-label": text.profile.editProfile, onClick: onEdit, children: pencilIcon }))
+                                : null] }, profile.id))) }), 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 }) {
+/**
+ * What the player changes in their profile, each part saved once changed: the picture, the name, how they play, and their names on Lichess and Chess.com,
+ * by which a game loaded from there is theirs (D-93). A field saved gets a tick; one the server would not take stays as typed, marked.
+ */
+function ProfileEdit({ 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);
+    const [fideWrong, setFideWrong] = useState(false);
+    const report = (refused) => {
+        setProblem(refused === undefined ? undefined : refusalText(refused, text));
+        return refused === undefined;
+    };
+    const save = (field, input) => {
         setSaved(undefined);
-        void saveAccounts(profile.id, changed).then((refused) => {
-            setProblem(refused === undefined ? undefined : refusalText(refused, text));
-            setSaved(refused === undefined ? site : undefined);
-        });
+        if (field === "fide") {
+            setFideWrong(!input.validity.valid);
+        }
+        if (input.validity.valid) {
+            const value = input.value.trim();
+            const change = field === "fide" ? { fide: value === "" ? "" : Number(value) } : { [field]: value };
+            void editProfile(profile.id, change).then((refused) => setSaved(report(refused) ? field : 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 })] }));
+    const tick = (field) => (saved === field ? checkIcon : noTick);
+    return (_jsxs("div", { class: "profile-form profile-edit", children: [_jsxs("fieldset", { children: [_jsx("legend", { children: words.avatar }), _jsx("div", { class: "avatars", children: avatarIds.map((id) => (_jsx("button", { class: "avatar-choice", type: "button", title: words.avatars[id], "aria-pressed": profile.image === undefined && profile.avatar === id, onClick: () => void chooseAvatar(profile.id, id).then(report), children: _jsx(DrawnAvatar, { id: id, size: 52, label: words.avatars[id] }) }, id))) }), _jsx(PhotoChoice, { on: profile.image !== undefined, current: imageAddress(profile), onPhoto: (photo) => void sendPhoto(profile.id, photo).then(report), text: text })] }), _jsxs("label", { class: "field", children: [_jsx("span", { children: words.name }), _jsx("input", { type: "text", required: true, maxLength: nameLimit, 
+                        // Not bound to the profile: a name the server would not take stays as typed, marked.
+                        defaultValue: profile.name, autocomplete: "given-name", onChange: (event) => save("name", event.currentTarget) }), tick("name")] }), _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: "profile-level", checked: profile.level === id, onChange: () => void editProfile(profile.id, { level: id }).then(report) }), _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.accounts, " ", _jsx("small", { children: words.optional })] }), _jsxs("div", { class: "accounts read", children: [accountSites.map((site) => (_jsxs("label", { title: words.accountTitle, children: [_jsx("span", { children: siteNames[site] }), _jsx(SiteName, { initial: profile.accounts?.[site] ?? "", site: site, onChange: (input) => save(site, input), text: text }), _jsx(SiteMark, { reading: readingOf(profile, site), pending: profile.accounts?.[site] !== undefined, text: text }), tick(site)] }, site))), _jsxs("label", { title: words.fideTitle, children: [_jsx("span", { children: "FIDE" }), _jsx(FideRating, { initial: profile.fide, onChange: (input) => save("fide", input), text: text }), _jsx("span", { class: "site-mark" }), tick("fide")] })] }), accountSites.map((site) => _jsx(SiteProblem, { reading: readingOf(profile, site), site: site, text: text }, site)), fideWrong ? _jsx("p", { class: "site-problem", children: words.fideRange(fideLowest, fideHighest) }) : null, _jsx("p", { class: "privacy", children: words.privacy })] }), problem === undefined ? null : _jsx("p", { class: "problem", role: "alert", children: problem })] }));
+}
+/**
+ * A field of the player's name on Lichess or Chess.com: in the wizard bound to its value, in the profile window not bound, so that a name the sites would
+ * not give stays as typed, marked, until it reads.
+ */
+function SiteName({ value, initial, site, onInput, onChange, text }) {
+    return (_jsx("input", { type: "text", ...(value === undefined ? { defaultValue: initial } : { value }), "aria-label": siteNames[site], placeholder: text.profile.username, maxLength: nameLimit, pattern: "\\s*[\\w\\-]*\\s*", autocomplete: "off", spellcheck: false, onInput: onInput === undefined ? undefined : (event) => onInput(event.currentTarget.value), onChange: onChange === undefined ? undefined : (event) => onChange(event.currentTarget) }));
+}
+/** The player's FIDE rating, typed: FIDE has no API (D-106). In the wizard bound to its value, in the profile window not bound, as a site's name. */
+function FideRating({ value, initial, onInput, onChange, text }) {
+    return (_jsx("input", { type: "number", ...(value === undefined ? { defaultValue: initial === undefined ? "" : String(initial) } : { value }), "aria-label": "FIDE", placeholder: text.profile.fidePlaceholder, min: fideLowest, max: fideHighest, step: 1, inputMode: "numeric", autocomplete: "off", onInput: onInput === undefined ? undefined : (event) => onInput(event.currentTarget.value), onChange: onChange === undefined ? undefined : (event) => onChange(event.currentTarget) }));
+}
+/**
+ * Beside a name on a site, what the site said of it (D-105): the rating that counts, its speed and last game in its title; a cross when the site has no
+ * such player; when it did not answer, the rating it gave before, soft, or a dash; dots while a name is being read. The line under the names says the
+ * cross and the dash in words.
+ */
+function SiteMark({ reading, pending, text }) {
+    const words = text.profile;
+    const rating = reading?.rating;
+    const number = rating === undefined ? null : _jsx(RatingNumber, { value: rating.value, said: words.ratingTitle(words.speeds[rating.speed], rating.played) });
+    if (reading === undefined) {
+        return pending
+            ? (_jsxs("span", { class: "site-mark pending", title: words.pending, children: [_jsx("span", { "aria-hidden": "true", children: "\u2026" }), _jsx("span", { class: "visually-hidden", children: words.pending })] }))
+            : _jsx("span", { class: "site-mark" });
+    }
+    if (reading.unreached === true) {
+        return _jsx("span", { class: "site-mark unreached", children: number ?? _jsx("span", { "aria-hidden": "true", children: "\u2013" }) });
+    }
+    return reading.found === false ? _jsx("span", { class: "site-mark missing", "aria-hidden": "true", children: "\u2715" }) : _jsx("span", { class: "site-mark", children: number });
+}
+/** A rating, its speed and last game in its title, and read aloud after it. */
+function RatingNumber({ value, said }) {
+    return (_jsxs("span", { title: said, children: [value, _jsx("span", { class: "visually-hidden", children: ` ${said}` })] }));
+}
+/** Under the names, in words, a name a site does not know or a site that did not answer: a phone has no title to hover. */
+function SiteProblem({ reading, site, text }) {
+    if (reading?.unreached === true) {
+        return _jsx("p", { class: "site-problem unreached", children: text.profile.unreached(siteNames[site]) });
+    }
+    return reading?.found === false ? _jsx("p", { class: "site-problem", children: text.profile.notFound(siteNames[site]) }) : null;
+}
+/** What the site said of the name the profile has there now: none for a name changed since it was read. */
+function readingOf(profile, site) {
+    const reading = profile.sites?.[site];
+    const account = profile.accounts?.[site];
+    return reading !== undefined && account !== undefined && reading.account.toLowerCase() === account.toLowerCase() ? reading : undefined;
 }
 const accountSites = ["lichess", "chesscom"];
 const siteNames = { lichess: "Lichess", chesscom: "Chess.com" };
@@ -107,15 +156,15 @@ function ProfileForm({ text, submit, suggestion, use = true, onMade }) {
     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 [names, setNames] = useState({ lichess: "", chesscom: "" });
+    const [fide, setFide] = useState("");
     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 }), use }).then((refused) => {
+        const rated = fide.trim() === "" ? {} : { fide: Number(fide) };
+        void makeProfile({ name, level, ...names, ...rated, ...(photo === undefined ? { avatar } : { photo }), use }).then((refused) => {
             setBusy(false);
             setProblem(refused === undefined ? undefined : refusalText(refused, text));
             if (refused === undefined) {
@@ -126,7 +175,7 @@ function ProfileForm({ text, submit, suggestion, use = true, 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 })] }));
+                                    } }), _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.accounts, " ", _jsx("small", { children: words.optional })] }), _jsxs("div", { class: "accounts", children: [accountSites.map((site) => (_jsxs("label", { title: words.accountTitle, children: [_jsx("span", { children: siteNames[site] }), _jsx(SiteName, { value: names[site], site: site, onInput: (value) => setNames({ ...names, [site]: value }), text: text })] }, site))), _jsxs("label", { title: words.fideTitle, children: [_jsx("span", { children: "FIDE" }), _jsx(FideRating, { value: fide, onInput: setFide, text: text })] })] }), _jsx("p", { class: "privacy", children: words.privacy })] }), 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 }) {
@@ -148,5 +197,9 @@ function refusalText(refused, text) {
 }
 // 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" }) }));
+/** The tick on the choice in use: the profile, a name saved, the chat at the table. */
+export 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" }) }));
+// The room of the tick beside a field not saved yet.
+const noTick = _jsx("svg", { class: "icon in-use", viewBox: "0 0 24 24", "aria-hidden": "true" });
+// The pencil on the player's picture and beside them in the menu: their profile opens.
+const pencilIcon = (_jsxs("svg", { class: "icon", viewBox: "0 0 24 24", "aria-hidden": "true", children: [_jsx("path", { d: "M4 20L5 15L15.5 4.5L19.5 8.5L9 19Z" }), _jsx("path", { d: "M13.5 6.5L17.5 10.5" })] }));

package/dist/page/game/column.js

@@ -14,7 +14,7 @@ export function GameColumn({ plies, result, how, lit, started, move, toMove, ope
     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, tools: legend, 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 })] })) }));
+            : (_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)] })), result !== undefined && plies.length === 0 ? null : _jsx(MoveList, { plies: plies, result: result, shown: shownPlies, onShow: onShow, tools: legend, 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 }) {
@@ -34,6 +34,10 @@ function GameCard({ plies, result, how, lit, started, move, toMove, bar, text })
     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] })] }));
     }
+    // A game closed before any move: aborted, with no result to show.
+    if (plies.length === 0) {
+        return (_jsxs("section", { class: `card game-card${lit ? " lit" : ""}`, "aria-label": text.game, children: [_jsx(ResultTile, { result: "*" }), _jsxs("div", { class: "what", children: [_jsx("p", { class: "head", children: _jsx("b", { class: "big", children: text.aborted }) }), _jsx("p", { class: "when", children: text.lasted(0) })] })] }));
+    }
     const winner = result === "1-0" ? "white" : result === "0-1" ? "black" : undefined;
     const first = plies[0];
     const last = plies.at(-1);

package/dist/page/game/plies.js

@@ -59,12 +59,15 @@ export function judgmentsOf(plies, player, { judgments }) {
 /** 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 };
 /**
- * The talk over a game in analysis (D-101): from the player's first line on it, the lines said since, but for the player's on another game; the last ten,
- * which is all half the column holds (Zoe).
+ * The talk over a game in analysis (D-101): from the player's first line on it, the lines said since on it, a line without a position belonging to the game
+ * of the player's last line before it; the last ten, which is all half the column holds (Zoe).
  */
 export function analysisTalk(talk, game) {
-    const first = talk.findIndex((line) => line.shown?.game === game);
-    return first === -1 ? [] : talk.slice(first).filter((line) => line.shown === undefined || line.shown.game === game).slice(-10);
+    let on;
+    return talk.filter((line) => {
+        on = line.shown?.game ?? on;
+        return on === game;
+    }).slice(-10);
 }
 /** How many times the AI has spoken in the game, its comments on its moves and its lines on the page: the page sees it speak when the count grows. */
 export function aiSpoke(plies, ai, talk) {

package/dist/page/guide/blocks.js

@@ -0,0 +1,67 @@
+// The markdown the guide is written in, read into blocks: headings, paragraphs, lists, tables, quotes, code; its comments left out. markdown.tsx draws them.
+// Copied from rpg-engine's guide (src/dashboard/help/blocks.ts), without the headings' icons and the cards' previews.
+/** The blocks of a markdown text. */
+export function markdownBlocks(text) {
+    const lines = text.replace(/\r\n/g, "\n").replace(/<!--[\s\S]*?-->/g, "").split("\n");
+    const blocks = [];
+    let index = 0;
+    // The lines from here on that go together: each the next, while it is one.
+    const run = (belongs) => {
+        const taken = [];
+        for (let line = lines[index]; line !== undefined && belongs(line); line = lines[index]) {
+            taken.push(line);
+            index += 1;
+        }
+        return taken;
+    };
+    for (let line = lines[index]; line !== undefined; line = lines[index]) {
+        const heading = /^(#{1,6})\s+(.*?)\s*$/.exec(line);
+        if (line.trim() === "") {
+            index += 1;
+        }
+        else if (heading !== null) {
+            blocks.push({ kind: "heading", level: heading[1]?.length ?? 1, text: heading[2] ?? "" });
+            index += 1;
+        }
+        else if (line.startsWith("```")) {
+            index += 1;
+            const code = run((one) => !one.startsWith("```"));
+            index += 1;
+            blocks.push({ kind: "code", text: code.join("\n") });
+        }
+        else if (/^-{3,}\s*$/.test(line)) {
+            blocks.push({ kind: "rule" });
+            index += 1;
+        }
+        else if (line.startsWith("|")) {
+            const [head = [], , ...rows] = run((one) => one.startsWith("|")).map(cells);
+            blocks.push({ kind: "table", head, rows });
+        }
+        else if (line.startsWith(">")) {
+            blocks.push({ kind: "quote", blocks: markdownBlocks(run((one) => one.startsWith(">")).map((one) => one.replace(/^> ?/, "")).join("\n")) });
+        }
+        else if (listItem(line) !== undefined) {
+            const ordered = listItem(line)?.ordered ?? false;
+            const items = run((one) => one.trim() !== "" && (listItem(one)?.ordered === ordered || (listItem(one) === undefined && /^\s/.test(one))));
+            blocks.push({ kind: "list", ordered, items: items.reduce((all, one) => (listItem(one) === undefined ? [...all.slice(0, -1), `${all.at(-1) ?? ""} ${one.trim()}`] : [...all, listItem(one)?.text ?? ""]), []) });
+        }
+        else {
+            const paragraph = run((one) => one.trim() !== "" && !/^(#{1,6}\s|```|>|\|)/.test(one) && listItem(one) === undefined);
+            blocks.push({ kind: "paragraph", text: paragraph.map((one) => one.trim()).join(" ") });
+        }
+    }
+    return blocks;
+}
+/** A heading's anchor as GitHub makes it: How it works, how-it-works. */
+export function anchorOf(heading) {
+    return heading.trim().toLowerCase().replace(/[^\p{L}\p{N}\s_-]/gu, "").replace(/\s/g, "-");
+}
+/** A list item's mark and text: - text, or 1. text; undefined for another line. */
+function listItem(line) {
+    const item = /^([-*]|\d+\.)\s+(.*)$/.exec(line);
+    return item === null ? undefined : { ordered: /\d/.test(item[1] ?? ""), text: item[2] ?? "" };
+}
+/** A table row's cells: | a | b |, a and b. */
+function cells(line) {
+    return line.trim().replace(/^\|/, "").replace(/\|$/, "").split("|").map((cell) => cell.trim());
+}

package/dist/page/guide/en.md

@@ -0,0 +1,66 @@
+# Chesspal: the guide
+
+With **Chesspal** you play chess against an **AI**, on a real board in your browser, and learn with it. This guide is for players: you do not need to know how to program.
+
+## How it works
+
+| Who | What they do |
+|---|---|
+| **You** | You move on the board and talk with the AI. |
+| **The AI** | Plays, reasons, judges the moves and answers you, in its chat. |
+| **Chesspal** | Keeps the rules, the board, the clock and your games, and hands the AI the facts of the position. |
+
+There are two windows: this **page**, with the board, and the AI's **chat**, in a window of its own. The AI plays from there, and Chesspal connects it to the page.
+
+No chess engine plays for the AI: every move and every judgment is its own. Chesspal checks that each move is legal and tells the AI what is on the board: the pieces attacked and defended, the pins, the opening's name.
+
+## Quick start
+
+1. Install **Node.js** from [nodejs.org](https://nodejs.org), the recommended (LTS) version, and an AI with your own subscription: **Claude Code** or **Codex**.
+2. Open a terminal, the window where you type commands (on Windows, Command Prompt: press Start, type `cmd`, press Enter; on macOS, Terminal), and type `npm install -g chesspal`, then `chesspal`: this page opens. The first time it offers an icon on your desktop, to open it with a double click.
+3. Press **Claude Code** or **Codex**: the AI's chat opens in a window of its own. Keep it open while you play.
+4. Press **New game**, choose your colour, the clock and the AI's level, and press **Start**.
+
+## If you are lost
+
+- **The AI does not answer**: look at its window. If it is asking you something, answer there; if you closed it, press **Claude Code** or **Codex** again.
+- **The page does not open**: double-click Chesspal's icon, or open it as in the [Quick start](#quick-start).
+- **Your games** are in a folder on your computer: **Who's playing?**, from your picture at the top right, shows where, and **Open the folder** opens it.
+
+## The AI's chat
+
+- The page opens the AI's **chat** with its buttons, in a window of its own: there the AI thinks and writes. Beside the buttons you choose its model (the version of the AI) and how much it reasons: the more it reasons, the slower it plays.
+- You talk with the AI in the box under its name, a few words with each move: it reads them with your move. You can also write to it in its window.
+- A **move written** in the chat counts too: `e4`, `Nf3`, with the English letters of the pieces (K Q R B N), or in words.
+- At each **new game**, the chat the page opened starts again clean by itself, once the AI has stopped thinking: a long chat makes the AI slower.
+
+## The game
+
+- **Move** by dragging a piece, or by clicking the piece and then its square. The dots show the legal moves; when a move is not allowed, the page says why.
+- **The clock**, if you chose one, starts with **Start**. The AI has its own and knows how much time it has left.
+- **Offer a draw** on your turn, once each side has moved; **Resign** ends the game.
+- **The helps**: with "The AI teaches as you play", in the settings, the **Helps** card shows the pieces in danger, the pins and the pawns, and the AI, as your coach, gives you an idea. The AI draws coloured arrows on the board: the **?** beside the moves explains every mark.
+- **Flip** turns the board round; **PGN** saves the moves in the file every chess site reads, to open on Lichess or Chess.com.
+
+## Review and analysis
+
+- When the game is over, press **Analyse the game**: the AI goes over it and puts its judgments and notes on the moves. Read them by stepping through the moves with the arrows.
+- **Analyses**, in the header, opens your analyses, and loads a game played elsewhere: paste its PGN, or choose a .pgn file.
+- Ask the AI about the game in the box under its name.
+- **Annotated PGN** saves the game with its comments.
+
+## Players and profile
+
+- **Who's playing?**: your picture at the top right chooses a player or adds one. Each has their own games and settings.
+- **Your profile**: a click on your picture beside the board, or the pencil in **Who's playing?**, changes your picture, your name, how you play, your names on Lichess and Chess.com and your FIDE rating.
+- **Your rating**: from your names there, Chesspal reads your public rating, the one of your rapid games if you play them, and tells the AI. No passwords: anyone can see that rating on the site. Without a name there, the AI knows how you play from **How do you play?**
+- **Your FIDE rating**, if you play tournaments, you type yourself: no site gives it to Chesspal. The AI reads it beside the site's, each on its own.
+- If you load a game played on Lichess or Chess.com, Chesspal knows which colour you played.
+
+## Questions and problems
+
+- **The AI is slow**: it really thinks over each move. Choose a faster model, or less reasoning, beside the chat's buttons.
+- **What it costs**: Chesspal is free; the AI uses your own subscription, and you pay nothing more.
+- **Can the AI play an illegal move?** No: Chesspal checks every move. Its judgments are its own, though, and an AI can be wrong, like a person.
+- **A backup**: copy the folder of your games, with the chat and the page closed.
+- **Something does not work?** Tell us on [GitHub](https://github.com/stefanocaronia/chesspal/issues): what you did, what you expected, what happened. GitHub is the site where Chesspal is made: you write there with a free account, and anyone can read it.

package/dist/page/guide/foot.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs } from "preact/jsx-runtime";
+import { Inline } from "./markdown.js";
+/** Where Chesspal lives, and how to support it. */
+export const footLinks = {
+    author: "https://stefanocaronia.it",
+    github: "https://github.com/stefanocaronia/chesspal",
+    npm: "https://www.npmjs.com/package/chesspal",
+    support: "https://www.paypal.com/paypalme/stefanocaronia",
+};
+/** The foot of the guide. */
+export function GuideFoot({ text }) {
+    const words = text.guide;
+    return (_jsxs("footer", { class: "guide-foot", children: [_jsxs("p", { class: "foot-own", children: [_jsxs("span", { children: ["© 2026 ", _jsx("a", { href: footLinks.author, target: "_blank", rel: "noreferrer", children: "Stefano Caronia" }), " · Chesspal"] }), _jsx("a", { href: footLinks.github, target: "_blank", rel: "noreferrer", title: "GitHub", "aria-label": words.onGitHub, children: _jsx("svg", { class: "icon", viewBox: "0 0 24 24", "aria-hidden": "true", children: _jsx("path", { d: githubPath }) }) }), _jsx("a", { href: footLinks.npm, target: "_blank", rel: "noreferrer", title: "npm", "aria-label": words.onNpm, children: _jsx("svg", { class: "icon", viewBox: "0 0 24 24", "aria-hidden": "true", children: _jsx("path", { d: npmPath }) }) }), _jsxs("a", { class: "foot-support", href: footLinks.support, target: "_blank", rel: "noreferrer", children: [_jsx("svg", { class: "icon", viewBox: "0 0 24 24", "aria-hidden": "true", children: _jsx("path", { d: heartPath }) }), words.support] })] }), _jsxs("details", { class: "credits", children: [_jsx("summary", { children: words.credits }), _jsx("ul", { children: words.creditLines.map((line) => (_jsx("li", { children: _jsx(Inline, { text: line, go: () => undefined }) }, line))) })] })] }));
+}
+// The icons of rpg-engine's foot.
+const githubPath = "M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.4 5.4 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65S8.93 17.38 9 18v4 M9 18c-4.51 2-5-2-7-2";
+const npmPath = "M11 21.73a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73Z M12 22V12 M3.29 7 12 12l8.71-5 M7.5 4.27l9 5.15";
+const heartPath = "M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z";