chesspal 0.2.3 → 0.3.0

package/dist/page/app/app.js

@@ -6,9 +6,10 @@ import { Thinker, Thought } from "../avatars/thought.js";
 import { Torretta } from "../avatars/torretta.js";
 import { Board } from "../board/board.js";
 import { explain } from "../board/explain.js";
+import { kingSigns } from "../board/signs.js";
 import { piecesOf } from "../board/squares.js";
 import { NewGameDialog } from "../dialogs/new-game.js";
-import { NameButton, PictureButton, PictureDialog, ProfilesDialog, Wizard } from "../dialogs/profiles.js";
+import { NameButton, PictureButton, ProfileDialog, ProfilesDialog, Wizard } from "../dialogs/profiles.js";
 import { SettingsPanel } from "../dialogs/settings.js";
 import { playerIn, studiedSides } from "../dialogs/studied.js";
 import { StudyDialog } from "../dialogs/study.js";
@@ -18,25 +19,30 @@ import { GameColumn } from "../game/column.js";
 import { howEnded, useDeclined, useJustEnded, useSawEnd } from "../game/ending.js";
 import { Steps } from "../game/move-list.js";
 import { useOpeningBook } from "../game/opening-book.js";
-import { aiSpoke, aiWords, judgmentsOf, playerSpent, playerWords, pliesOf, withBook, withJudgments, withoutReviews } from "../game/plies.js";
+import { aiSpoke, aiWords, analysisTalk, judgmentsOf, playerSpent, playerWords, pliesOf, withBook, withJudgments, withoutReviews } from "../game/plies.js";
+import { GuideDialog } from "../guide/guide.js";
 import { BareButton, HelpsCard, HintLine, MapButton } from "../helps/helps.js";
 import { helpsOf } from "../helps/view.js";
 import { FoldTab } from "../layout/fold-tab.js";
 import { nextFold, rememberFold, startFolds } from "../layout/folds.js";
 import { Header } from "../layout/header.js";
 import { standingsOf } from "../lead/view.js";
+import { MarksLegend } from "../legend/legend.js";
+import { legendOf } from "../legend/view.js";
 import { ChosenSet } from "../pieces/pieces.js";
 import { ClockFace, PlayerCard } from "../players/card.js";
 import { signature } from "../players/model-name.js";
 import { keepSettings } from "../profile/profile.js";
 import { languagesOf, saveSettings, settingsFrom, showSettings } from "../profile/settings.js";
 import { endSoundOf, playSound, soundOf, wakeSounds } from "../sounds/sounds.js";
+import { ChatOpener } from "../table/opener.js";
 import { AiNote, AiWords, Compose, PointSquare, TalkFaces } from "../talk/talk.js";
 import { textFor } from "../text.js";
 import { anchorName, useAnchor } from "./anchor.js";
-import { useBrowseKeys, useFoldKeys, useMapKey, useWheelSteps } from "./keys.js";
+import { useBrowseKeys, useFoldKeys, useLegendKey, useMapKey, useWheelSteps } from "./keys.js";
 import { phaseOf, verdictOf } from "./phase.js";
 import { post, sendMessage, sendMove, useServed } from "./served.js";
+import { tabTitle, useTabTitle } from "./title.js";
 /**
  * The page: the board of the game in the player's folder, where the player moves on their turn, the talk with the AI beside it, and the game's column; in the
  * settings the player chose, `start` as this browser remembered them (D-56).
@@ -135,6 +141,9 @@ export function App({ start }) {
     const [mapping, setMapping] = useState(false);
     // The board without its drawings while their button is held (Stefano).
     const [bare, setBare] = useState(false);
+    // The legend of the marks on the board, open until the player closes it (D-99).
+    const [legendOpen, setLegendOpen] = useState(false);
+    useLegendKey(() => setLegendOpen((open) => !open));
     const past = useMemo(() => viewing === undefined ? undefined : new Game({ tags: live.record.tags, moves: live.record.moves.slice(0, viewing) }), [live, viewing]);
     const next = useMemo(() => viewing === undefined ? undefined : new Game({ tags: live.record.tags, moves: live.record.moves.slice(0, viewing + 1) }).lastMove, [live, viewing]);
     const shown = useMemo(() => past ?? (pending === undefined ? live : withMove(live, pending)), [live, pending, past]);
@@ -196,6 +205,9 @@ export function App({ start }) {
     // game a link opens is there to look at: the analyst starts on the player's yes alone (D-89; Zoe and Federico).
     const playedName = game === undefined || game === null ? undefined : anchorName(game.name);
     useAnchor({ ready: served !== undefined, shown: studied !== undefined ? anchorName(studied.name) : idle ? undefined : playedName, played: playedName, going }, viewing, (plies) => goTo(plies ?? total), async (wanted) => await post("/api/study", { game: wanted, look: true }, text, name) === undefined);
+    // The tab names the game and the move shown, as the cards name its players; between games, Chesspal alone.
+    const titled = idle || served === undefined ? undefined : studiedSides(live.record.tags, served.profile.name, playedAs, text.sides, served.profile.accounts);
+    useTabTitle(titled === undefined ? undefined : tabTitle(titled.white.name, titled.black.name, at === 0 ? undefined : plies[at - 1]));
     // The header's theme switch picks the other of the two the page shows, leaving the system's.
     const switchTheme = () => change({ ...settings, theme: document.documentElement.dataset.theme === "dark" ? "light" : "dark" });
     // An action of the player's on the game: the game the server sends next shows it; a refusal shows on the board.
@@ -206,7 +218,9 @@ export function App({ start }) {
     const result = resultOf(live);
     const ended = isOver(result);
     const how = ended ? howEnded(live.outcome, live.record.tags.Termination) : undefined;
-    const winner = result === "1-0" ? "white" : result === "0-1" ? "black" : undefined;
+    // A game closed before any move counts for no one, as Lichess aborts it: no winner, no kings' signs.
+    const aborted = ended && plies.length === 0;
+    const winner = aborted ? undefined : result === "1-0" ? "white" : result === "0-1" ? "black" : undefined;
     const justEnded = useJustEnded(played === undefined || played === null ? undefined : over ? "over" : "going");
     const offer = played?.drawOffer;
     const declined = useDeclined(offer, total, ended);
@@ -222,16 +236,18 @@ export function App({ start }) {
             }
         },
     };
-    const { kind, verdict } = verdictOf(phase, how, winner, offer, declined, text);
+    const { kind, verdict } = aborted && phase === "over" ? { kind: "over", verdict: text.aborted } : verdictOf(phase, how, winner, offer, declined, text);
     const header = (_jsx(Header, { text: text, kind: kind, verdict: verdict, ...(!ended && (offer === "ai" || declined) ? { who: name } : {}), actions: actions, onNewGame: served === undefined ? undefined : () => setDialog("new-game"), 
         // Between games the new one stands out in the player's card (D-77): in the header only when the talk, and the card with it, is folded away.
-        standOut: studied !== undefined || (between && folds.talk !== "open"), onStudy: served === undefined || going ? undefined : () => setDialog("study"), flipped: flipped, onFlip: () => setFlipped(!flipped), sound: sound, onSound: () => change({ ...settings, sound: !sound }), onTheme: switchTheme, onSettings: () => setSetting(true), ...(served === undefined ? {} : { profile: served.profile, onProfile: () => setDialog("profiles") }) }));
+        standOut: studied !== undefined || (between && folds.talk !== "open"), onStudy: served === undefined || going ? undefined : () => setDialog("study"), flipped: flipped, onFlip: () => setFlipped(!flipped), sound: sound, onSound: () => change({ ...settings, sound: !sound }), onTheme: switchTheme, onSettings: () => setSetting(true), onGuide: () => setDialog("guide"), ...(served === undefined ? {} : { profile: served.profile, onProfile: () => setDialog("profiles") }) }));
     const panel = _jsx(SettingsPanel, { open: setting, settings: settings, onChange: change, onClose: () => setSetting(false), text: text });
+    // The guide opens before the page has its data too.
+    const guide = _jsx(GuideDialog, { open: dialog === "guide", onClose: () => setDialog(undefined), text: text });
     if (problem !== undefined) {
         return _jsx("p", { class: "problem", children: problem });
     }
     if (served === undefined || game === undefined) {
-        return (_jsxs(_Fragment, { children: [header, panel] }));
+        return (_jsxs(_Fragment, { children: [header, panel, guide] }));
     }
     // At the first start the page asks who plays (D-23), to complete the profile Chesspal made (D-71): the game comes after.
     if (served.profile.new === true) {
@@ -253,6 +269,22 @@ export function App({ start }) {
     const review = reviewed?.review;
     // An open hint draws on the board as it is, in place of the last move's drawings.
     const drawn = hintOpen && hint !== undefined && viewing === undefined && (hint.arrows !== undefined || hint.squares !== undefined) ? hint : review;
+    const drawnByCoach = hint !== undefined && drawn === hint;
+    // The game over, when this is its last position: the kings' signs, on the board and in the legend.
+    const boardEnd = ended && !aborted && viewing === undefined && pending === undefined ? { how, winner, player, fresh: justEnded } : undefined;
+    // The legend has the marks the board shows: none of the helps' or the drawings while the board is bare (D-99).
+    const shownBare = bare && helps !== undefined;
+    const legendRows = legendOf({
+        ...(review?.badge === undefined || shown.lastMove === undefined ? {} : { badge: { badge: review.badge, square: shown.lastMove.to } }),
+        ...(helps === undefined || shownBare ? {} : { helps }),
+        ...(drawn === undefined || shownBare ? {} : { drawn }),
+        control: mapping && helps !== undefined,
+        ...(boardEnd === undefined ? {} : { ends: kingSigns(piecesOf(shown.position.fen), shown.position.turn, boardEnd) }),
+    });
+    // In a game the coach draws on the player's moves, the AI on its own.
+    const drawer = drawnByCoach || (going && reviewed?.side === player) ? text.legend.drawnByCoach : text.legend.drawnBy(analyst);
+    const legendAt = (under) => (_jsx(MarksLegend, { rows: legendRows, open: legendOpen, onOpen: setLegendOpen, drawn: { words: drawnByCoach ? text.helpsCard.drawn : text.drawn, by: drawer }, onPoint: setPointed, under: under, text: text }));
+    const legend = legendAt(false);
     const summary = studied === undefined ? undefined : gameReviewOf(live.record);
     const closing = studied === undefined ? undefined : closingOf(live.record);
     // In analysis the AI's card says who played that game, as its PGN keeps it (D-82), not who plays now.
@@ -270,7 +302,10 @@ export function App({ start }) {
     const clockWaits = clock?.waiting === true && !ended && studied === undefined && viewing === undefined && live.position.turn === ai;
     const clockOf = (side) => clock === undefined ? undefined : (_jsx(ClockFace, { clock: clock, side: side, toMove: !ended && live.position.turn === side, held: pending !== undefined || (asleep && side === ai), onFlag: reload, text: text }));
     // Where to wake the chat, under the AI's card (over the board when the talk is folded); the button that starts the clocks, under the player's (Zoe).
-    const asleepNote = asleep ? _jsx("p", { class: "asleep", role: "status", children: text.asleep(name) }) : null;
+    // On the table with no chat at it, the note opens one instead (D-104).
+    const table = offline ? undefined : served.table;
+    const opener = table !== undefined && !table.chat ? _jsx(ChatOpener, { table: table, settings: settings, onChange: change, name: name, text: text }) : undefined;
+    const asleepNote = opener ?? (asleep ? _jsx("p", { class: "asleep", role: "status", children: sides === undefined ? text.asleep(name) : text.asleepInAnalysis(name) }) : null);
     const startClocks = clockWaits
         ? (_jsxs("button", { type: "button", class: "command primary start-clocks", onClick: () => act("/api/start", {}), children: [_jsx("svg", { class: "icon", viewBox: "0 0 24 24", "aria-hidden": "true", children: _jsx("path", { d: "M8 5.5v13l10.5-6.5z" }) }), text.startClocks] }))
         : null;
@@ -322,7 +357,8 @@ export function App({ start }) {
             setRefusal({ text: words, square: from, piece: pieces.get(from), explanation: explain(illegal, to, king) });
         }
     };
-    const sendWords = () => {
+    // In analysis the words go with the game and the move shown (D-101).
+    const sendWords = (position) => {
         const words = draft;
         // /clear and the other commands are for Claude's app: written here they would reach the AI as words (Sebastiano's playtest).
         if (isCommand(words)) {
@@ -330,7 +366,7 @@ export function App({ start }) {
             return;
         }
         setUnsent(undefined);
-        void sendMessage(words, text, name).then((refused) => {
+        void sendMessage(words, text, name, position).then((refused) => {
             setUnsent(refused?.text);
             clearSent(refused?.text, words);
         });
@@ -344,12 +380,10 @@ export function App({ start }) {
         setDialog(undefined);
         act("/api/new", { ai_colour: colour === "random" ? "random" : colour === "white" ? "black" : "white", level: chosen, ...(control === undefined ? {} : { clock: control }) });
     };
-    // In analysis the AI's note stays under the card on top and its word on the game over the one below, however the board is turned (D-69).
-    const top = flipped ? player : ai;
-    const bottom = flipped ? ai : player;
+    // In analysis the AI's note goes with the other side's card and the talk with the player's, turned round with the board as in a game (D-101, Zoe).
     const studiedCard = (side, place) => sides === undefined ? null : (_jsx(PlayerCard, { place: place, 
-        // The player changes their picture in analysis too, from their own side's card.
-        picture: sides[side].who === "player" ? _jsx(PictureButton, { profile: profile, onOpen: () => setDialog("picture"), text: text }) : pictureOf(sides[side], profile, 48, mood), name: sides[side].name, signed: sides[side].who === "ai" && playedBy !== undefined ? signature(playedBy.model, playedBy.effort) : undefined, side: side, taken: material.taken[side], ahead: ahead(side), badges: _jsx(BadgeCounts, { plies: plies, side: side, names: text.badges }), text: text }));
+        // The player opens their profile in analysis too, from their own side's card.
+        picture: sides[side].who === "player" ? _jsx(PictureButton, { profile: profile, onOpen: () => setDialog("profile"), text: text }) : pictureOf(sides[side], profile, 48, mood), name: sides[side].name, signed: sides[side].who === "ai" && playedBy !== undefined ? signature(playedBy.model, playedBy.effort) : undefined, side: side, taken: material.taken[side], ahead: ahead(side), badges: _jsx(BadgeCounts, { plies: plies, side: side, names: text.badges }), text: text }));
     // A game brought to analyse: the page shows it once the server has it in analysis; a refusal stays in the dialog.
     const studyGame = async (studied) => {
         const refused = await post("/api/study", studied, text, name);
@@ -358,22 +392,25 @@ export function App({ start }) {
         }
         return refused?.text;
     };
-    return (_jsx(ChosenSet.Provider, { value: settings.set, children: _jsxs(PointSquare.Provider, { value: pointSquare, children: [panel, _jsx(PictureDialog, { open: dialog === "picture", profile: profile, onClose: () => setDialog(undefined), text: text }), _jsx(ProfilesDialog, { open: dialog === "profiles", profiles: served.profiles, active: profile, locked: going ? text.profile.whilePlaying : undefined, dataFolder: served.dataFolder, onClose: () => setDialog(undefined), text: text }), _jsx(NewGameDialog, { open: dialog === "new-game", choice: choice, going: going, onStart: startNewGame, onClose: () => setDialog(undefined), text: text }), _jsx(StudyDialog, { open: dialog === "study", onStudy: studyGame, onClose: () => setDialog(undefined), you: profile.name, accounts: profile.accounts, ai: name, text: text }), offline ? _jsx("p", { class: "offline", role: "alert", children: text.offline(name) }) : null, served.outdated === true ? _jsx("p", { class: "outdated", role: "status", children: text.outdated(name) }) : null, _jsxs("main", { class: `app${flipped ? " flipped" : ""}${folds.talk === "open" ? "" : ` talk-${folds.talk}`}${folds.game === "folded" ? " folded" : ""}`, inert: offline, children: [header, sides === undefined
+    return (_jsx(ChosenSet.Provider, { value: settings.set, children: _jsxs(PointSquare.Provider, { value: pointSquare, children: [panel, _jsx(ProfileDialog, { open: dialog === "profile", profile: profile, onClose: () => setDialog(undefined), text: text }), _jsx(ProfilesDialog, { open: dialog === "profiles", profiles: served.profiles, active: profile, locked: going ? text.profile.whilePlaying : undefined, dataFolder: served.dataFolder, onEdit: () => setDialog("profile"), onClose: () => setDialog(undefined), text: text }), _jsx(NewGameDialog, { open: dialog === "new-game", choice: choice, going: going, onStart: startNewGame, onClose: () => setDialog(undefined), text: text }), guide, _jsx(StudyDialog, { open: dialog === "study", onStudy: studyGame, onClose: () => setDialog(undefined), you: profile.name, accounts: profile.accounts, ai: name, text: text }), offline ? _jsx("p", { class: "offline", role: "alert", children: text.offline(name) }) : null, served.outdated === true ? _jsx("p", { class: "outdated", role: "status", children: text.outdated(name) }) : null, _jsxs("main", { class: `app${flipped ? " flipped" : ""}${folds.talk === "open" ? "" : ` talk-${folds.talk}`}${folds.game === "folded" ? " folded" : ""}`, inert: offline, children: [header, sides === undefined
                             ? (_jsx(TalkFaces, { name: name, aiPicture: thinker(40), you: profile.name, picture: picture, ...(idle ? {} : { ai, player }), aiMoves: going && !playerToMove, playerMoves: playerToMove, unread: unread || asleep, text: text }))
-                            : (_jsx(TalkFaces, { name: sides[ai].name, aiPicture: pictureOf(sides[ai], profile, 40, mood), you: sides[player].name, picture: pictureOf(sides[player], profile, 40, mood), ai: ai, player: player, aiMoves: false, playerMoves: false, unread: asleep, text: text })), _jsx(FoldTab, { column: "talk", folded: folds.talk === "folded", label: thinking === undefined || folds.talk !== "folded" ? text.talk : `${text.talk}: ${text.thinking[thinking]}`, unread: (unread || asleep) && folds.talk === "folded", ...(thinking === undefined || folds.talk !== "folded" ? {} : { mark: _jsx(Thought, { thinking: thinking, words: text.thinking }) }), onFold: fold }), _jsx(FoldTab, { column: "game", folded: folds.game === "folded", label: text.game, onFold: fold }), _jsx("span", { class: "visually-hidden", "aria-live": "polite", children: unread ? text.wrote(name) : "" }), _jsx("div", { class: sides === undefined ? "talk" : "talk studied", id: "talk", children: sides !== undefined
-                                ? (_jsxs(_Fragment, { children: [_jsxs("section", { class: "ai-block", "aria-label": sides[top].name, children: [studiedCard(top, "ai"), asleepNote, _jsx(AiNote, { ...(reviewed === undefined ? {} : { ply: reviewed }), ...(shownOpening === undefined ? {} : { opening: shownOpening }), ...(at === total && closing !== undefined ? { closing } : {}), ...(at === 0 && summary !== undefined ? { summary } : {}), ...(summary === undefined ? { reviewing: true } : {}), name: analyst, by: annotator, mood: mood, ...(settings.voice ? { voice: text.language } : {}), text: text })] }), _jsx("section", { class: "you-block", "aria-label": sides[bottom].name, children: studiedCard(bottom, "you") })] }))
+                            : (_jsx(TalkFaces, { name: sides[ai].name, aiPicture: pictureOf(sides[ai], profile, 40, mood), you: sides[player].name, picture: pictureOf(sides[player], profile, 40, mood), ai: ai, player: player, aiMoves: false, playerMoves: false, unread: asleep, text: text })), _jsx(FoldTab, { column: "talk", folded: folds.talk === "folded", label: thinking === undefined || folds.talk !== "folded" ? text.talk : `${text.talk}: ${text.thinking[thinking]}`, unread: (unread || asleep) && folds.talk === "folded", ...(thinking === undefined || folds.talk !== "folded" ? {} : { mark: _jsx(Thought, { thinking: thinking, words: text.thinking }) }), onFold: fold }), _jsx(FoldTab, { column: "game", folded: folds.game === "folded", label: text.game, onFold: fold }), _jsx("span", { class: "visually-hidden", "aria-live": "polite", children: unread ? text.wrote(name) : "" }), _jsx("div", { class: sides === undefined ? "talk" : "talk studied", id: "talk", children: sides !== undefined && studied !== undefined
+                                ? (_jsxs(_Fragment, { children: [_jsxs("section", { class: "ai-block", "aria-label": sides[ai].name, children: [studiedCard(ai, "ai"), asleepNote, _jsx(AiNote, { ...(reviewed === undefined ? {} : { ply: reviewed }), ...(shownOpening === undefined ? {} : { opening: shownOpening }), ...(at === total && closing !== undefined ? { closing } : {}), ...(at === 0 && summary !== undefined ? { summary } : {}), ...(summary === undefined ? { reviewing: true } : {}), name: analyst, by: annotator, mood: mood, ...(settings.voice ? { voice: text.language } : {}), text: text })] }), _jsxs("section", { class: "you-block", "aria-label": sides[player].name, children: [_jsx("div", { class: "chat", children: _jsx(Compose, { lines: analysisTalk(talk, studied.name), newestFirst: false, spent: 0, draft: draft, onDraft: (words) => {
+                                                            setDraft(words);
+                                                            setUnsent(undefined);
+                                                        }, onSend: () => sendWords({ game: studied.name, at }), canMove: false, name: name, problem: unsent, about: { ...(at === 0 ? {} : { ply: plies[at - 1] }), onShow: goTo }, text: text }) }), studiedCard(player, "you")] })] }))
                                 : (_jsxs(_Fragment, { children: [_jsxs("section", { class: "ai-block", "aria-label": name, children: [_jsx(PlayerCard, { place: "ai", picture: thinker(48), name: name, signed: signed, side: idle ? undefined : ai, ...(idle ? {} : { level: text.start.levels[level] }), taken: material.taken[ai], ahead: ahead(ai), clock: clockOf(ai), text: text }), asleepNote, _jsx(AiWords, { words: aiWords(plies, ai, talk), newestFirst: !flipped, ...(settings.voice ? { voice: text.language } : {}) })] }), _jsxs("section", { class: "you-block", "aria-label": profile.name, children: [_jsx(Compose, { lines: said, newestFirst: flipped, 
                                                     // Between games, and before the first, the player writes freely, a line at a time, as the AI does (D-74, D-77).
                                                     spent: going ? playerSpent(plies, ai, talk) : 0, draft: draft, onDraft: (words) => {
                                                         setDraft(words);
                                                         setUnsent(undefined);
-                                                    }, onSend: sendWords, canMove: playerToMove, name: name, problem: unsent, text: text }), _jsx(PlayerCard, { place: "you", picture: _jsx(PictureButton, { profile: profile, onOpen: () => setDialog("picture"), text: text }), name: _jsx(NameButton, { profile: profile, onOpen: () => setDialog("profiles"), text: text }), side: idle ? undefined : player, taken: material.taken[player], ahead: ahead(player), turn: playerToMove, clock: _jsxs(_Fragment, { children: [clockOf(player), startClocks, nextGame] }), text: text })] })] })) }), _jsxs("div", { 
+                                                    }, onSend: sendWords, canMove: playerToMove, name: name, problem: unsent, text: text }), _jsx(PlayerCard, { place: "you", picture: _jsx(PictureButton, { profile: profile, onOpen: () => setDialog("profile"), text: text }), name: _jsx(NameButton, { profile: profile, onOpen: () => setDialog("profiles"), text: text }), side: idle ? undefined : player, taken: material.taken[player], ahead: ahead(player), turn: playerToMove, clock: _jsxs(_Fragment, { children: [clockOf(player), startClocks, nextGame] }), text: text })] })] })) }), _jsxs("div", { 
                             // Between games the board goes off (D-77): a game the page saw end once its effects are over, its final position less off than the table set.
                             class: between && !justEnded ? "board-wrap off" : "board-wrap", onWheel: wheel, 
                             // A press on the board while the player looks back brings the game as it is: the next one plays.
-                            onPointerDownCapture: viewing === undefined || studied !== undefined ? undefined : (event) => event.button === 0 && goTo(total), children: [_jsx(Board, { fen: shown.position.fen, bottom: flipped ? ai : player, lastMove: shown.lastMove, pointed: pointed, ...(helps === undefined ? {} : { helps }), ...(mapping && helps !== undefined ? { control: helps.strategy.control } : {}), bare: bare && helps !== undefined, ...(review?.badge === undefined ? {} : { badge: { badge: review.badge, name: text.badges[review.badge] } }), ...(drawn === undefined ? {} : { drawn }), nextMove: next, jumped: jumped, check: shown.position.check, end: ended && viewing === undefined && pending === undefined ? { how, winner, player, fresh: justEnded } : undefined, player: playerToMove && pending === undefined && viewing === undefined ? player : undefined, selected: selected, targets: selected === undefined || viewing !== undefined ? [] : live.legalMoves(selected), dots: settings.dots, names: settings.squareNames, notice: viewing === undefined ? refusal : undefined, promotion: promoting === undefined || viewing !== undefined || !playerToMove ? undefined : { ...promoting, side: player }, onPromote: (piece) => piece === undefined ? setPromoting(undefined) : play(promoting.from, promoting.to, piece), onSelect: select, onMove: play, onRefuse: refuse, text: text }), folds.talk !== "open" && (asleep || clockWaits)
-                                    ? (_jsxs("div", { class: "over-board", children: [asleep ? _jsx("p", { class: "asleep", role: "status", children: text.asleep(name) }) : null, startClocks] }))
-                                    : null] }), studied === undefined ? null : (_jsx("div", { class: "board-steps", children: _jsx(Steps, { shown: at, total: total, onStep: step, text: text }) })), helps === undefined ? null : (_jsxs("div", { class: "board-map", children: [_jsx(BareButton, { bare: bare, onBare: setBare, text: text }), _jsx(MapButton, { mapping: mapping, onMap: setMapping, text: text }), hint === undefined || viewing !== undefined ? null : _jsx(HintLine, { hint: hint, open: hintOpen, onOpen: openTheHint, text: text })] })), _jsx(GameColumn, { plies: idle ? [] : plies, result: ended ? result : undefined, how: how, lit: justEnded, started: idle ? undefined : played?.started, move: live.position.moveNumber, toMove: live.position.turn, opening: opening, helps: helps === undefined ? undefined : (_jsx(HelpsCard, { helps: helps, judged: judgments, hint: viewing === undefined ? hint : undefined, hintOpen: hintOpen, onHint: openTheHint, onPoint: setPointed, onMap: setMapping, mapping: mapping, onBare: setBare, bare: bare, text: text })), ...(standings === undefined ? {} : { standings }), ...(studied === undefined ? {} : { analysis: summary === undefined ? { by: analyst } : { by: analyst, summary } }), shownPlies: at, onShow: goTo, onStep: step, ...(studied === undefined ? {} : { onDownload: () => download(studied.pgn, pgnName(live.record.tags, "analysis")) }), ...(total === 0 ? {} : { onSaveMoves: () => download(writePgn(movesOnly(live.record)), pgnName(live.record.tags)) }), ...(between && game !== null ? { onAnalyse: () => void studyGame({ last: true }) } : {}), text: text })] })] }) }));
+                            onPointerDownCapture: viewing === undefined || studied !== undefined ? undefined : (event) => event.button === 0 && goTo(total), children: [_jsx(Board, { fen: shown.position.fen, bottom: flipped ? ai : player, lastMove: shown.lastMove, pointed: pointed, ...(helps === undefined ? {} : { helps }), ...(mapping && helps !== undefined ? { control: helps.strategy.control } : {}), bare: bare && helps !== undefined, ...(review?.badge === undefined ? {} : { badge: { badge: review.badge, name: text.badges[review.badge] } }), ...(drawn === undefined ? {} : { drawn }), nextMove: next, jumped: jumped, check: shown.position.check, end: boardEnd, player: playerToMove && pending === undefined && viewing === undefined ? player : undefined, selected: selected, targets: selected === undefined || viewing !== undefined ? [] : live.legalMoves(selected), dots: settings.dots, names: settings.squareNames, notice: viewing === undefined ? refusal : undefined, promotion: promoting === undefined || viewing !== undefined || !playerToMove ? undefined : { ...promoting, side: player }, onPromote: (piece) => piece === undefined ? setPromoting(undefined) : play(promoting.from, promoting.to, piece), onSelect: select, onMove: play, onRefuse: refuse, text: text }), folds.talk !== "open" && (asleep || opener !== undefined || clockWaits)
+                                    ? (_jsxs("div", { class: "over-board", children: [opener ?? (asleep ? _jsx("p", { class: "asleep", role: "status", children: text.asleep(name) }) : null), startClocks] }))
+                                    : null] }), studied === undefined ? null : (_jsx("div", { class: "board-steps", children: _jsx(Steps, { shown: at, total: total, onStep: step, text: text }) })), helps === undefined ? null : (_jsxs("div", { class: "board-map", children: [legendAt(true), _jsx(BareButton, { bare: bare, onBare: setBare, text: text }), _jsx(MapButton, { mapping: mapping, onMap: setMapping, text: text }), hint === undefined || viewing !== undefined ? null : _jsx(HintLine, { hint: hint, open: hintOpen, onOpen: openTheHint, text: text })] })), _jsx(GameColumn, { plies: idle ? [] : plies, result: ended ? result : undefined, how: how, lit: justEnded, started: idle ? undefined : played?.started, move: live.position.moveNumber, toMove: live.position.turn, opening: opening, helps: helps === undefined ? undefined : (_jsx(HelpsCard, { helps: helps, judged: judgments, hint: viewing === undefined ? hint : undefined, hintOpen: hintOpen, onHint: openTheHint, onPoint: setPointed, onMap: setMapping, mapping: mapping, onBare: setBare, bare: bare, legend: legend, text: text })), ...(helps === undefined && legendRows.length > 0 ? { legend } : {}), ...(standings === undefined ? {} : { standings }), ...(studied === undefined ? {} : { analysis: summary === undefined ? { by: analyst } : { by: analyst, summary } }), shownPlies: at, onShow: goTo, onStep: step, ...(studied === undefined ? {} : { onDownload: () => download(studied.pgn, pgnName(live.record.tags, "analysis")) }), ...(total === 0 ? {} : { onSaveMoves: () => download(writePgn(movesOnly(live.record)), pgnName(live.record.tags)) }), ...(between && game !== null && replayed.record.moves.length > 0 ? { onAnalyse: () => void studyGame({ last: true }) } : {}), text: text })] })] }) }));
 }
 /** The picture of a player of the game in analysis: the player's own, the AI's Torretta with its mood, or the plain face of someone else. */
 function pictureOf({ who }, profile, size, mood) {

package/dist/page/app/keys.js

@@ -1,5 +1,5 @@
-// The page's keys and wheel: [ and ] fold the side columns, M holds the helps' map (D-78), the arrows, Home and End step through the moves and f
-// and x turn the board, and the wheel over the board steps too.
+// The page's keys and wheel: [ and ] fold the side columns, M holds the helps' map (D-78), ? opens the legend (D-99), the arrows, Home and End step
+// through the moves and f and x turn the board, and the wheel over the board steps too.
 import { useEffect, useRef } from "preact/hooks";
 import { flipKeys, stepKeys } from "../game/browse.js";
 import { foldKeys, gameUnderBoard, oneColumn } from "../layout/folds.js";
@@ -52,6 +52,20 @@ export function useMapKey(helping, map) {
         };
     }, [helping]);
 }
+/** ? opens the legend of the marks on the board and closes it, while the page shows its ? (D-99). */
+export function useLegendKey(toggle) {
+    useEffect(() => {
+        const press = (event) => {
+            const shown = [...document.querySelectorAll(".legend-button")].some((button) => button.getClientRects().length > 0);
+            if (shown && forThePage(event) && event.key === "?") {
+                event.preventDefault();
+                toggle();
+            }
+        };
+        window.addEventListener("keydown", press);
+        return () => window.removeEventListener("keydown", press);
+    });
+}
 /** The keys of Lichess and chess.com: the arrows, Home and End step through the moves, f and x turn the board round. */
 export function useBrowseKeys(step, flip) {
     useEffect(() => {

package/dist/page/app/served.js

@@ -68,6 +68,6 @@ export function sendMove(move, words, text, name) {
     return post("/api/move", message === "" ? { move } : { move, message }, text, name);
 }
 /** Sends the player's words alone: the reason they were refused, or undefined. */
-export function sendMessage(words, text, name) {
-    return post("/api/message", { text: words.trim() }, text, name);
+export function sendMessage(words, text, name, shown) {
+    return post("/api/message", { text: words.trim(), ...shown }, text, name);
 }

package/dist/page/app/title.js

@@ -0,0 +1,17 @@
+// The tab's title names the game and the move shown, Stefano – Claude, 16. ♞f3, so that the player's bookmarks and tabs tell its games apart.
+import { useEffect } from "preact/hooks";
+import { figurinesOf } from "../../core/index.js";
+/** The title of a game: its players by their first names, White first, so that the move fits in a tab (Zoe), and the move shown with its number, none before the first. */
+export function tabTitle(white, black, shown) {
+    const players = `${firstName(white)} – ${firstName(black)}`;
+    return shown === undefined ? players : `${players}, ${shown.number}${shown.side === "white" ? "." : "..."} ${figurinesOf(shown.san)}`;
+}
+/** Keeps the tab's title, Chesspal's name while no game shows. */
+export function useTabTitle(title) {
+    useEffect(() => {
+        document.title = title ?? "Chesspal";
+    }, [title]);
+}
+function firstName(name) {
+    return name.trim().split(/\s+/)[0] || name;
+}

package/dist/page/avatars/torretta.js

@@ -18,8 +18,8 @@ function useChanged(mood) {
 function Face({ mood }) {
     switch (mood) {
         case "happy":
-            // Eyes closed in two arcs, a wide open smile.
-            return (_jsxs(_Fragment, { children: [_jsx("path", { class: "eyes line", d: "M50.5 78.5a4.5 4.5 0 0 1 9 0M68.5 78.5a4.5 4.5 0 0 1 9 0" }), _jsx("path", { class: "mouth", d: "M57 84h14a7 7 0 0 1-14 0Z" })] }));
+            // Eyes closed in two low arcs, a wide open smile with its corners just rounded.
+            return (_jsxs(_Fragment, { children: [_jsx("path", { class: "eyes line", d: "M50 77.5q5-5.4 10 0M68 77.5q5-5.4 10 0" }), _jsx("path", { class: "mouth", d: "M56.6 83.2H71.4Q73 83.2 72.9 84.6A9 7.8 0 0 1 55.1 84.6Q55 83.2 56.6 83.2Z" })] }));
         case "surprised":
             // Wide eyes and a round mouth.
             return (_jsxs(_Fragment, { children: [_jsxs("g", { class: "eyes", children: [_jsx("circle", { cx: "54.5", cy: "75.5", r: "5.8" }), _jsx("circle", { cx: "73.5", cy: "75.5", r: "5.8" })] }), _jsx("ellipse", { class: "mouth", cx: "64", cy: "88.5", rx: "3.4", ry: "4" })] }));
@@ -27,8 +27,8 @@ function Face({ mood }) {
             // Brows raised in the middle, smaller eyes, a frown; the light turns red.
             return (_jsxs(_Fragment, { children: [_jsx("path", { class: "brows", d: "M50 70L58 67M70 67L78 70" }), _jsxs("g", { class: "eyes", children: [_jsx("circle", { cx: "55", cy: "78.5", r: "3.8" }), _jsx("circle", { cx: "73", cy: "78.5", r: "3.8" })] }), _jsx("path", { class: "mouth line", d: "M56.5 91q7.5-6 15 0" })] }));
         case "thoughtful":
-            // A glance to the side under one raised brow, the mouth pushed to the other side; the light breathes.
-            return (_jsxs(_Fragment, { children: [_jsx("path", { class: "brows", d: "M71 68L80 66" }), _jsxs("g", { class: "eyes", children: [_jsx("circle", { cx: "58", cy: "76.5", r: "3.9" }), _jsx("circle", { cx: "76", cy: "76.5", r: "3.9" })] }), _jsx("path", { class: "mouth line", d: "M52.5 89L63 87" })] }));
+            // The neutral face tilted on the screen, a smaller mouth: the head bent of one who wonders; the light breathes.
+            return (_jsxs("g", { transform: "rotate(-12 64 79)", children: [_jsxs("g", { class: "eyes", children: [_jsx("circle", { cx: "55", cy: "74.5", r: "4.4" }), _jsx("circle", { cx: "73", cy: "74.5", r: "4.4" })] }), _jsx("rect", { class: "mouth", x: "60", y: "86.3", width: "8", height: "3.4", rx: "1.7" })] }));
         case "sad":
             // No brows, the face sunk low: eyes half shut under lids that droop outwards, a deep frown; the light goes out.
             return (_jsxs(_Fragment, { children: [_jsx("path", { class: "eyes", d: "M60.3 77.1A5.6 5.6 0 0 1 49.7 80.9ZM78.3 80.9A5.6 5.6 0 0 1 67.7 77.1Z" }), _jsx("path", { class: "mouth line", d: "M57.5 92.5q6.5-6.5 13 0" })] }));

package/dist/page/board/board.js

@@ -6,9 +6,10 @@ import { BadgeIcon } from "../game/badges.js";
 import { pinOn, riskOn, skewerOn } from "../helps/view.js";
 import { Piece } from "../pieces/pieces.js";
 import { bubblePlace, keptSquares } from "./explain.js";
-import { Arrows, Badge, Bubble, ControlCount, controlOf, kingSigns, Lifted, noSigns, Notch, PinsAndSkewers, PromotionChoice, Pushpin, Skewer } from "./marks.js";
+import { Arrows, Badge, Bubble, ControlCount, controlOf, Lifted, Notch, PinsAndSkewers, PromotionChoice, Pushpin, Skewer } from "./marks.js";
 import { backOf, motionOf, noMotion, playedOn, rearranged } from "./motion.js";
 import { useBoardPointer } from "./pointer.js";
+import { kingSigns, noSigns } from "./signs.js";
 import { files, kingToMove, piecesOf } from "./squares.js";
 /**
  * The board of a position, seen from one side, with the last move's squares marked. While the player may move, their pieces answer the pointer: a press

package/dist/page/board/marks.js

@@ -5,7 +5,10 @@ import { Piece } from "../pieces/pieces.js";
 export function Notch({ tone }) {
     return (_jsx("span", { class: tone === undefined ? "help-notch" : `help-notch ${tone}`, "aria-hidden": "true", children: _jsxs("svg", { viewBox: "0 0 10 10", children: [_jsx("path", { d: "M0.5 0.5V9.5H9.5Z" }), tone === undefined ? null : _jsx("path", { class: "edge", d: "M0.5 0.5V9.5H9.5Z" }), _jsx("circle", { cx: "2.9", cy: "7.1", r: "1.1" })] }) }));
 }
-/** The pushpin stuck in a pinned piece from the top left corner, its needle toward the piece, in the tone of its corner at risk (D-91); in ink in no side's. */
+/**
+ * The pushpin stuck in a pinned piece from the top left corner, its needle toward the piece, in the tone of its corner at risk (D-91); in ink in no side's;
+ * in the card's line, in its colour.
+ */
 export function Pushpin({ tone }) {
     return _jsx(Stuck, { kind: "help-pin", shape: pushpin, tone: tone });
 }
@@ -122,29 +125,6 @@ export function Lifted({ drag, letter }) {
     const classes = ["lifted", up && !drag.back ? "up" : "", drag.touch ? "touch" : "", drag.back ? "back" : ""].filter((name) => name !== "").join(" ");
     return (_jsx("div", { class: classes, style: { "--x": `${drag.at[0]}px`, "--y": `${drag.at[1]}px` }, children: _jsx(Piece, { letter: letter }) }));
 }
-/** The kings' signs at the end, by their squares: the loser's king lies down when mated or resigning; both kings of a draw stand, the stalemated one stuck. */
-export function kingSigns(pieces, toMove, end) {
-    const kingOf = (side) => [...pieces].find(([, letter]) => letter === (side === "white" ? "K" : "k"))?.[0];
-    const signs = new Map();
-    const sign = (side, badge, classes) => {
-        const square = kingOf(side);
-        if (square !== undefined) {
-            signs.set(square, { badge, classes });
-        }
-    };
-    if (end.winner === undefined) {
-        sign("white", "half", end.how === "stalemate" && toMove === "white" ? "drawn stalled" : "drawn");
-        sign("black", "half", end.how === "stalemate" && toMove === "black" ? "drawn stalled" : "drawn");
-        return signs;
-    }
-    const loser = end.winner === "white" ? "black" : "white";
-    sign(end.winner, "crown", "winner");
-    if (end.how === "checkmate" || end.how === "resignation") {
-        sign(loser, end.how === "checkmate" ? "mate" : "flag", "fallen");
-    }
-    return signs;
-}
-export const noSigns = new Map();
 /** Arrows off one square, the AI's on a white edge (D-78): every edge under every arrow, so one edge goes round them all where they meet. */
 function ArrowGroup({ shapes, edged }) {
     return (_jsxs("g", { children: [edged

package/dist/page/board/signs.js

@@ -0,0 +1,23 @@
+/** The kings' signs at the end, by their squares: the loser's king lies down when mated or resigning; both kings of a draw stand, the stalemated one stuck. */
+export function kingSigns(pieces, toMove, end) {
+    const kingOf = (side) => [...pieces].find(([, letter]) => letter === (side === "white" ? "K" : "k"))?.[0];
+    const signs = new Map();
+    const sign = (side, badge, classes) => {
+        const square = kingOf(side);
+        if (square !== undefined) {
+            signs.set(square, { badge, classes });
+        }
+    };
+    if (end.winner === undefined) {
+        sign("white", "half", end.how === "stalemate" && toMove === "white" ? "drawn stalled" : "drawn");
+        sign("black", "half", end.how === "stalemate" && toMove === "black" ? "drawn stalled" : "drawn");
+        return signs;
+    }
+    const loser = end.winner === "white" ? "black" : "white";
+    sign(end.winner, "crown", "winner");
+    if (end.how === "checkmate" || end.how === "resignation") {
+        sign(loser, end.how === "checkmate" ? "mate" : "flag", "fallen");
+    }
+    return signs;
+}
+export const noSigns = new Map();

package/dist/page/dialogs/analyses.js

@@ -45,7 +45,7 @@ export function Analyses({ onStudy, onLoad, you, accounts, ai, text }) {
     return (_jsxs("div", { class: "analyses", children: [_jsxs("label", { class: "search", children: [_jsx("svg", { class: "icon", viewBox: "0 0 24 24", "aria-hidden": "true", children: _jsx("path", { d: "M10.5 17A6.5 6.5 0 1 0 10.5 4A6.5 6.5 0 0 0 10.5 17ZM15.5 15.5L20 20" }) }), _jsx("input", { type: "search", value: query, placeholder: words.search, "aria-label": words.search, spellcheck: false, onInput: (event) => setQuery(event.currentTarget.value) })] }), _jsxs("button", { class: "load-row", type: "button", onClick: onLoad, children: [_jsx("span", { class: "plus", "aria-hidden": "true", children: _jsx("svg", { class: "icon", viewBox: "0 0 24 24", children: _jsx("path", { d: "M12 5V19M5 12H19" }) }) }), _jsxs("span", { children: [_jsx("b", { children: words.bring }), _jsx("small", { children: words.bringNote })] })] }), problem === undefined ? null : _jsx("p", { class: "problem", role: "alert", children: problem }), analyses.length > 0 && found.length === 0 ? _jsx("p", { class: "none", children: words.noMatch }) : null, found.length === 0 ? null : (_jsx("ul", { class: "games", "aria-label": words.yours, children: found.map(({ item, named, outcome }) => asking?.name === item.name
                     ? (_jsx(Question, { asked: asking.asked, game: named.sides, when: dayOf(item.date, text.language), by: by(item), busy: busy, onYes: () => void act(item.name, asking.asked), onNo: () => setAsking(undefined), words: words }, item.name))
                     : (_jsxs("li", { class: "game", children: [_jsxs("button", { class: "reopen", type: "button", disabled: busy, onClick: () => open(item.name), children: [_jsx(ResultTile, { result: item.result }), _jsxs("span", { class: "what", children: [_jsx("b", { class: "who", children: named.sides }), _jsx("span", { class: "meta", children: [dayOf(item.date, text.language), words.moves(item.moves), item.opening].filter((part) => part !== undefined).join(" · ") }), item.reviewed ? _jsx(Reviewed, { by: by(item), words: words }) : null] }), _jsxs("span", { class: "score", children: [_jsx("b", { children: scoreOf(item.result) }), outcome === undefined ? _jsx("span", {}) : _jsx(OutcomeBadge, { outcome: outcome, words: words })] })] }), _jsx("span", { class: "row-actions", children: _jsx("button", { class: `icon-button${menu?.name === item.name ? " on" : ""}`, type: "button", title: words.more, "aria-label": words.more, "aria-expanded": menu?.name === item.name, disabled: busy, onClick: (event) => setMenu(menu?.name === item.name ? undefined : { name: item.name, anchor: event.currentTarget }), children: _jsx("svg", { class: "icon", viewBox: "0 0 24 24", "aria-hidden": "true", children: _jsx("path", { d: "M5 12H5.01M12 12H12.01M19 12H19.01" }) }) }) }), menu?.name === item.name
-                                ? (_jsx(RowMenu, { anchor: menu.anchor, reviewed: item.reviewed, onPick: (asked) => {
+                                ? (_jsx(RowMenu, { anchor: menu.anchor, withReview: item.reviewed || item.begun === true, onPick: (asked) => {
                                         setMenu(undefined);
                                         setAsking({ name: item.name, asked });
                                     }, onClose: () => setMenu(undefined), words: words }))
@@ -53,9 +53,9 @@ export function Analyses({ onStudy, onLoad, you, accounts, ai, text }) {
 }
 /**
  * A row's menu, over the dialog and the page in the browser's top layer, under its button or above it when there is no room: analyse again and delete the
- * analysis, for a game reviewed; delete the game, apart and in red. Scrolling closes it, which would leave its button.
+ * analysis, for a game reviewed or whose review was begun; delete the game, apart and in red. Scrolling closes it, which would leave its button.
  */
-function RowMenu({ anchor, reviewed, onPick, onClose, words }) {
+function RowMenu({ anchor, withReview, onPick, onClose, words }) {
     const menu = useRef(null);
     useLayoutEffect(() => {
         const element = menu.current;
@@ -69,7 +69,7 @@ function RowMenu({ anchor, reviewed, onPick, onClose, words }) {
             window.removeEventListener("resize", onClose);
         };
     }, []);
-    return (_jsxs("div", { ref: menu, class: "row-menu", popover: "manual", children: [reviewed
+    return (_jsxs("div", { ref: menu, class: "row-menu", popover: "manual", children: [withReview
                 ? (_jsxs(_Fragment, { children: [_jsxs("button", { type: "button", onClick: () => onPick("redo"), children: [_jsx("svg", { class: "icon", viewBox: "0 0 24 24", "aria-hidden": "true", children: _jsx("path", { d: "M19 12A7 7 0 1 1 16.5 6.6M17 3V7H13" }) }), _jsxs("span", { children: [words.redo, _jsx("small", { children: words.redoNote })] })] }), _jsxs("button", { type: "button", onClick: () => onPick("unreview"), children: [_jsx("svg", { class: "icon", viewBox: "0 0 24 24", "aria-hidden": "true", children: _jsx("path", { d: "M5 19H19M8 15L4.5 11.5L12 4L18 10L11 17H8ZM8.5 7.5L14.5 13.5" }) }), _jsxs("span", { children: [words.unreview, _jsx("small", { children: words.unreviewNote })] })] }), _jsx("hr", {})] }))
                 : null, _jsxs("button", { class: "danger", type: "button", onClick: () => onPick("remove"), children: [_jsx(TrashIcon, {}), _jsx("span", { children: words.remove })] })] }));
 }

package/dist/page/dialogs/dialog.js

@@ -3,6 +3,9 @@ import { useEffect, useRef } from "preact/hooks";
 /** A dialog over the page, as the settings' one: Esc and a click outside close it; a step inside it goes back with the arrow beside its title. */
 export function Dialog({ open, title, onBack, onClose, text, children }) {
     const dialog = useRef(null);
+    // Open as the page wants it: a dialog the page closed itself, to open another, does not close that one when the browser says it closed.
+    const wanted = useRef(open);
+    wanted.current = open;
     useEffect(() => {
         const element = dialog.current;
         if (open && !element.open) {
@@ -22,5 +25,5 @@ export function Dialog({ open, title, onBack, onClose, text, children }) {
             onClose();
         }
     };
-    return (_jsxs("dialog", { ref: dialog, class: "dialog", "aria-label": title, onClose: onClose, onClick: closeOutside, children: [_jsxs("header", { children: [onBack === undefined ? null : (_jsx("button", { class: "icon-button", type: "button", title: text.profile.back, "aria-label": text.profile.back, onClick: onBack, children: _jsx("svg", { class: "icon", viewBox: "0 0 24 24", "aria-hidden": "true", children: _jsx("path", { d: "M15 6L9 12L15 18" }) }) })), _jsx("h2", { children: title }), _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" }) }) })] }), open ? children : null] }));
+    return (_jsxs("dialog", { ref: dialog, class: "dialog", "aria-label": title, onClose: () => wanted.current && onClose(), onClick: closeOutside, children: [_jsxs("header", { children: [onBack === undefined ? null : (_jsx("button", { class: "icon-button", type: "button", title: text.profile.back, "aria-label": text.profile.back, onClick: onBack, children: _jsx("svg", { class: "icon", viewBox: "0 0 24 24", "aria-hidden": "true", children: _jsx("path", { d: "M15 6L9 12L15 18" }) }) })), _jsx("h2", { children: title }), _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" }) }) })] }), open ? children : null] }));
 }

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);