chesspal 0.3.0 → 0.3.2

package/dist/commands/{profiles.js → profiles/profiles.js}

@@ -2,11 +2,11 @@
 import { readFileSync } from "node:fs";
 import { resolve } from "node:path";
 import { z } from "zod";
-import { endOf } from "../games/index.js";
-import { activateProfile, activeProfile, createProfile, drawnAvatars, fideHighest, fideLowest, gameFolder, levels, listProfiles, nameLimit, removeOwnImage, saveOwnImage, updateProfile, } from "../profiles/index.js";
-import { gameAt } from "./clock.js";
+import { endOf } from "../../games/index.js";
+import { activateProfile, activeProfile, createProfile, drawnAvatars, fideHighest, fideLowest, gameFolder, levels, listProfiles, nameLimit, removeOwnImage, saveOwnImage, updateProfile, } from "../../profiles/index.js";
+import { gameAt } from "../answers/index.js";
+import { defineCommand } from "../registry/index.js";
 import { refreshRatings } from "./ratings.js";
-import { defineCommand } from "./registry.js";
 /** A change of profile refused while a game goes on: the page says it in the player's language. */
 export class GameGoingOn extends Error {
     constructor() {

package/dist/commands/{ratings.d.ts → profiles/ratings.d.ts}

@@ -1,4 +1,4 @@
-import type { Context } from "./context.ts";
+import type { Context } from "../registry/index.ts";
 /** A day, in milliseconds: the page reads the ratings again once they are older. */
 export declare const ratingsAge: number;
 /**

package/dist/commands/{ratings.js → profiles/ratings.js}

@@ -1,7 +1,7 @@
 // The player's ratings read again from the sites (D-105, D-106): when their names there change, and when the page opens a day after the last reading;
 // never from a tool of the AI's.
-import { listProfiles, profileFolder, saveReadings } from "../profiles/index.js";
-import { readingsStale, readSites } from "../sites/index.js";
+import { listProfiles, profileFolder, saveReadings } from "../../profiles/index.js";
+import { readingsStale, readSites } from "../../sites/index.js";
 /** A day, in milliseconds: the page reads the ratings again once they are older. */
 export const ratingsAge = 24 * 60 * 60 * 1000;
 /**

package/dist/commands/{context.d.ts → registry/context.d.ts}

@@ -41,6 +41,8 @@ export interface Context {
      * (D-71); null in a chat no tool has shown the game yet, none outside a chat.
      */
     positionSeen?: SeenPosition | null | undefined;
+    /** The first position a tool showed the chat: a chat that has seen no other since has only greeted the player, and a new game keeps it (D-57). */
+    positionFirstSeen?: SeenPosition | undefined;
     /** The instructions the MCP server gave in this chat, by their name and the chat's start: each comes once a chat (D-68); none on the command line. */
     told?: Set<string>;
     /** Who makes this tool call, as far as the host ties it to the call (D-81); none on the command line. */

package/dist/commands/{context.js → registry/context.js}

@@ -1,7 +1,7 @@
 // What every command runs with besides its input, injected by the command line, the MCP server or the tests: the folders, the time, the randomness.
 import { userInfo } from "node:os";
-import { dataFolder, openFolder } from "../home/index.js";
-import { ensureProfile } from "../profiles/index.js";
+import { dataFolder, openFolder } from "../../home/index.js";
+import { ensureProfile } from "../../profiles/index.js";
 /** The context of a process started in the player's folder: the data folder is found at the first command that needs it, once. */
 export function defaultContext() {
     let found;

package/dist/commands/registry/index.d.ts

@@ -0,0 +1,2 @@
+export { type Caller, type Context, defaultContext, type SeenPosition, speaksItalian } from "./context.ts";
+export { type AnyCommand, baseType, type Command, commandLineFieldProblem, defineCommand, inputProblems, isBoolean, isList, sentence, takesNumbers } from "./registry.ts";

package/dist/commands/registry/index.js

@@ -0,0 +1,3 @@
+// What a command is and what it runs with: the definition and the reading of its input, and the context of folders, time and randomness.
+export { defaultContext, speaksItalian } from "./context.js";
+export { baseType, commandLineFieldProblem, defineCommand, inputProblems, isBoolean, isList, sentence, takesNumbers } from "./registry.js";

package/dist/commands/setup/index.d.ts

@@ -0,0 +1,2 @@
+export { init } from "./init.ts";
+export { instructions, instructionsRead } from "./instructions.ts";

package/dist/commands/setup/index.js

@@ -0,0 +1,3 @@
+// The setting up of a player's folder for the hosts, and the opponent's instructions the MCP server gives.
+export { init } from "./init.js";
+export { instructions, instructionsRead } from "./instructions.js";

package/dist/commands/{init.d.ts → setup/init.d.ts}

@@ -9,7 +9,7 @@ interface FolderSetUp {
     hooksChanged?: true;
 }
 /** Makes a folder the player's chess table: the files through which Claude Code and Codex find Chesspal and the opponent's instructions (D-31). */
-export declare const init: import("./registry.ts").Command<z.ZodObject<{
+export declare const init: import("../registry/registry.ts").Command<z.ZodObject<{
     folder: z.ZodOptional<z.ZodString>;
 }, z.core.$strip>, FolderSetUp>;
 export {};

package/dist/commands/{init.js → setup/init.js}

@@ -3,9 +3,8 @@ import { relative, resolve } from "node:path";
 // Colours only on a terminal that shows them: none in a file, a pipe or with NO_COLOR.
 import { styleText } from "node:util";
 import { z } from "zod";
-import { codexHooksPath, setUpHosts } from "../host-files/index.js";
-import { speaksItalian } from "./context.js";
-import { defineCommand } from "./registry.js";
+import { codexHooksPath, setUpHosts } from "../../host-files/index.js";
+import { defineCommand, speaksItalian } from "../registry/index.js";
 /** Makes a folder the player's chess table: the files through which Claude Code and Codex find Chesspal and the opponent's instructions (D-31). */
 export const init = defineCommand({
     name: "init",

package/dist/commands/{instructions.d.ts → setup/instructions.d.ts}

@@ -1,7 +1,7 @@
 import { z } from "zod";
-import type { Context } from "./context.ts";
+import { type Context } from "../registry/index.ts";
 /** How to play as the player's opponent, which the chat reads before its first reply and again after a summary (D-102). */
-export declare const instructions: import("./registry.ts").Command<z.ZodObject<{}, z.core.$strip>, string>;
+export declare const instructions: import("../registry/registry.ts").Command<z.ZodObject<{}, z.core.$strip>, string>;
 /**
  * Whether the chat has read the opponent's instructions since it started, or was cleared or summarized, as its start keys them (D-57); without the host's
  * note of it, since the MCP server started. Always on the command line, which keeps nothing.

package/dist/commands/{instructions.js → setup/instructions.js}

@@ -1,8 +1,8 @@
 // The opponent's instructions, which the MCP server gives so that they follow the version installed (D-102).
 import { z } from "zod";
-import { lastChatStart } from "../games/index.js";
-import { opponentInstructions } from "../host-files/index.js";
-import { defineCommand } from "./registry.js";
+import { lastChatStart } from "../../games/index.js";
+import { opponentInstructions } from "../../host-files/index.js";
+import { defineCommand } from "../registry/index.js";
 /** How to play as the player's opponent, which the chat reads before its first reply and again after a summary (D-102). */
 export const instructions = defineCommand({
     name: "instructions",

package/dist/commands/{ai-say.d.ts → talk/ai-say.d.ts}

@@ -1,6 +1,5 @@
 import { z } from "zod";
-import { type GameSummary } from "./game-summary.ts";
-import { type Written } from "./say.ts";
+import { type GameSummary, type Written } from "../answers/index.ts";
 interface Said {
     /** The game, none when the AI spoke before the first (D-77). */
     game?: GameSummary;
@@ -9,7 +8,7 @@ interface Said {
     coach?: true;
 }
 /** The AI's words on the board page without a move, read only there, on the player's time: an answer, or a word it has to say (D-54, D-72). */
-export declare const aiSay: import("./registry.ts").Command<z.ZodObject<{
+export declare const aiSay: import("../registry/registry.ts").Command<z.ZodObject<{
     text: z.ZodString;
     mood: z.ZodOptional<z.ZodEnum<{
         neutral: "neutral";

package/dist/commands/{ai-say.js → talk/ai-say.js}

@@ -1,13 +1,9 @@
 import { z } from "zod";
-import { moods } from "../core/index.js";
-import { archivedName, talkLimits } from "../games/index.js";
-import { gameFolder } from "../profiles/index.js";
-import { analystLine, coachOnEnd, coachOnEndLine, reviewedLine, withAnalyst } from "./agents.js";
-import { newGameStep, nextStep, wordLines } from "./answer-lines.js";
-import { summaryOf } from "./game-summary.js";
-import { refuseOtherGame } from "./play-move.js";
-import { defineCommand } from "./registry.js";
-import { give, say, waitingWords } from "./say.js";
+import { moods } from "../../core/index.js";
+import { archivedName, talkLimits } from "../../games/index.js";
+import { gameFolder } from "../../profiles/index.js";
+import { analystLine, coachOnEnd, coachOnEndLine, give, newGameStep, nextStep, refuseOtherGame, reviewedLine, say, summaryOf, waitingWords, withAnalyst, wordLines } from "../answers/index.js";
+import { defineCommand } from "../registry/index.js";
 /** The AI's words on the board page without a move, read only there, on the player's time: an answer, or a word it has to say (D-54, D-72). */
 export const aiSay = defineCommand({
     name: "ai_say",

package/dist/commands/talk/index.d.ts

@@ -0,0 +1,2 @@
+export { aiSay } from "./ai-say.ts";
+export { playerSay } from "./player-say.ts";

package/dist/commands/talk/index.js

@@ -0,0 +1,3 @@
+// The talk at the table: the AI's words and the player's, said beside the moves.
+export { aiSay } from "./ai-say.js";
+export { playerSay } from "./player-say.js";

package/dist/commands/{player-say.d.ts → talk/player-say.d.ts}

@@ -1,5 +1,5 @@
 import { z } from "zod";
 /** The player's words to the AI, as the board page sends them: on the command line only, since the AI never writes for the player. */
-export declare const playerSay: import("./registry.ts").Command<z.ZodObject<{
+export declare const playerSay: import("../registry/registry.ts").Command<z.ZodObject<{
     text: z.ZodString;
 }, z.core.$strip>, string>;

package/dist/commands/{player-say.js → talk/player-say.js}

@@ -1,8 +1,8 @@
 import { z } from "zod";
-import { talkLimits } from "../games/index.js";
-import { gameFolder } from "../profiles/index.js";
-import { defineCommand } from "./registry.js";
-import { say } from "./say.js";
+import { talkLimits } from "../../games/index.js";
+import { gameFolder } from "../../profiles/index.js";
+import { say } from "../answers/index.js";
+import { defineCommand } from "../registry/index.js";
 /** The player's words to the AI, as the board page sends them: on the command line only, since the AI never writes for the player. */
 export const playerSay = defineCommand({
     name: "player_say",

package/dist/page/app/app.js

@@ -9,7 +9,7 @@ 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, ProfileDialog, ProfilesDialog, Wizard } from "../dialogs/profiles.js";
+import { NameButton, 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";
@@ -25,6 +25,7 @@ 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 { PageFoot } from "../layout/footer.js";
 import { Header } from "../layout/header.js";
 import { standingsOf } from "../lead/view.js";
 import { MarksLegend } from "../legend/legend.js";
@@ -35,7 +36,8 @@ 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 { UpdateDialog, UpdateNotice } from "../table/update.js";
+import { AiNameButton, ChatDialog, tableNote } from "../table/window.js";
 import { AiNote, AiWords, Compose, PointSquare, TalkFaces } from "../talk/talk.js";
 import { textFor } from "../text.js";
 import { anchorName, useAnchor } from "./anchor.js";
@@ -67,6 +69,18 @@ export function App({ start }) {
     };
     const [dialog, setDialog] = useState(undefined);
     const { data: served, problem, offline, reload } = useServed(() => setDialog("new-game"));
+    // Nuova partita with no chat at the table asks for one first (D-107): the chat's window, then the new game's, however the first closes.
+    const [chatFirst, setChatFirst] = useState(false);
+    const askNewGame = () => {
+        const table = offline ? undefined : served?.table;
+        const first = table !== undefined && !table.chat && table.opening === undefined;
+        setChatFirst(first);
+        setDialog(first ? "chat" : "new-game");
+    };
+    const closeChat = () => {
+        setDialog(chatFirst ? "new-game" : undefined);
+        setChatFirst(false);
+    };
     const [selected, setSelected] = useState(undefined);
     const [refusal, setRefusal] = useState(undefined);
     // A pawn taken to the last rank waits for the player to choose what it becomes.
@@ -237,9 +251,9 @@ export function App({ start }) {
         },
     };
     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"), 
+    const header = (_jsx(Header, { text: text, kind: kind, verdict: verdict, ...(!ended && (offer === "ai" || declined) ? { who: name } : {}), actions: actions, onNewGame: served === undefined ? undefined : askNewGame, 
         // 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), onGuide: () => setDialog("guide"), ...(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") }), ...(served?.update === undefined || served.table === undefined || offline ? {} : { update: { version: served.update.version, installing: served.update.installing === true }, onUpdate: () => setDialog("update") }) }));
     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 });
@@ -286,6 +300,8 @@ export function App({ start }) {
     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);
+    // An AI is going over the game only when the server says so: with no chat at it, nobody is (Stefano).
+    const reviewing = summary === undefined && studied?.reviewing === true && !offline;
     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.
     const playedBy = studied === undefined ? undefined : aiModelIn(live.record);
@@ -297,21 +313,25 @@ export function App({ start }) {
     const asleep = served.listening === false && !offline;
     // What the AI thinks on, a cloud at the Torretta's corner (Zoe): only in a game going on, and never while no chat hears the player, which the note says.
     const thinking = going && !asleep && !offline && studied === undefined ? served.thinking : undefined;
-    const thinker = (size) => (_jsx(Thinker, { thinking: thinking, words: text.thinking, children: _jsx(Torretta, { size: size, mood: mood }) }));
+    const thinker = (size) => (_jsx(Thinker, { thinking: thinking, words: text.thinking, children: _jsx(Torretta, { size: size, mood: mood, bust: true }) }));
     // The clocks wait for the player from the game's start: when the AI moves first, a button gives it the start; else the player's first move does (Stefano).
     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).
-    // On the table with no chat at it, the note opens one instead (D-104).
+    // On the table, what its chat is doing stands there, and in a game with no chat at it a line that opens the chat's window (D-107).
     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 atTable = table === undefined ? null : tableNote({ table, name, inGame: going, onOpen: () => setDialog("chat"), text });
+    const asleepNote = atTable !== null
+        ? atTable
+        : asleep && table?.chat !== false
+            ? _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;
     // Between games the next starts from the player's card, where the clock and the button that starts it stand in a game (D-77).
     const nextGame = between
-        ? (_jsxs("button", { type: "button", class: "command primary next-game", onClick: () => setDialog("new-game"), children: [_jsx("svg", { class: "icon", viewBox: "0 0 24 24", "aria-hidden": "true", children: _jsx("path", { d: "M12 5V19M5 12H19" }) }), text.newGame] }))
+        ? (_jsxs("button", { type: "button", class: "command primary next-game", onClick: askNewGame, children: [_jsx("svg", { class: "icon", viewBox: "0 0 24 24", "aria-hidden": "true", children: _jsx("path", { d: "M12 5V19M5 12H19" }) }), text.newGame] }))
         : null;
     // Words sent leave the box; what the player wrote on while they went stays.
     const clearSent = (refused, words) => {
@@ -381,9 +401,7 @@ export function App({ start }) {
         act("/api/new", { ai_colour: colour === "random" ? "random" : colour === "white" ? "black" : "white", level: chosen, ...(control === undefined ? {} : { clock: control }) });
     };
     // 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 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 }));
+    const studiedCard = (side, place) => sides === undefined ? null : (_jsx(PlayerCard, { place: place, picture: 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);
@@ -392,29 +410,35 @@ export function App({ start }) {
         }
         return refused?.text;
     };
-    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
+    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 }), table === undefined ? null : _jsx(ChatDialog, { open: dialog === "chat", table: table, settings: settings, onChange: change, name: name, onClose: closeChat, 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 }), served.update === undefined || served.table === undefined
+                    ? null
+                    : (_jsx(UpdateDialog, { open: dialog === "update", version: served.update.version, current: served.version, installing: served.update.installing === true, installed: served.update.installed === true, going: going, chat: served.table.chat ? (served.table.held ? "held" : "byHand") : undefined, name: name, onClose: () => setDialog(undefined), 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) })
+                    : served.update !== undefined && served.table === undefined
+                        ? _jsx(UpdateNotice, { version: served.update.version, name: name, text: text })
+                        : 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 && 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) => {
+                                ? (_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 } : {}), ...(reviewing ? { reviewing: true } : {}), name: analyst, by: annotator, mood: mood, ...(settings.voice ? { voice: text } : {}), 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, 
+                                : (_jsxs(_Fragment, { children: [_jsxs("section", { class: "ai-block", "aria-label": name, children: [_jsx(PlayerCard, { place: "ai", picture: thinker(48), name: table === undefined ? name : _jsx(AiNameButton, { name: name, table: table, onOpen: () => setDialog("chat"), text: text }), 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 } : {}) })] }), _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("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", { 
+                                                    }, onSend: sendWords, canMove: playerToMove, name: name, problem: unsent, text: text }), _jsx(PlayerCard, { place: "you", picture: picture, 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: 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 })] })] }) }));
+                            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" && (asleepNote !== null || clockWaits)
+                                    ? (_jsxs("div", { class: "over-board", children: [asleepNote, 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: { by: analyst, ...(summary === undefined ? {} : { summary }), ...(reviewing ? { reviewing: true } : {}) } }), 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 }), _jsx(PageFoot, { version: served.version, 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) {
-    return who === "ai" ? _jsx(Torretta, { size: size, mood: mood }) : _jsx(PlayerPicture, { profile: who === "player" ? profile : undefined, size: size });
+    return who === "ai" ? _jsx(Torretta, { size: size, mood: mood, bust: true }) : _jsx(PlayerPicture, { profile: who === "player" ? profile : undefined, size: size });
 }
 /**
  * Plays the sound of each move the game gains while the page watches it, the AI's and the player's, of its end without a move and of a draw offered:

package/dist/page/app/served.js

@@ -13,6 +13,8 @@ export function useServed(onNewGame) {
     const reload = useRef(() => { });
     useEffect(() => {
         let latest = 0;
+        // The Chesspal version of the first answer: a server of another, after an update, sends data this page may not read.
+        let pageVersion;
         const load = () => {
             // Two reads in flight may answer out of order: only the last one asked counts.
             const asked = ++latest;
@@ -22,6 +24,11 @@ export function useServed(onNewGame) {
                 if (asked !== latest) {
                     return;
                 }
+                pageVersion ??= body.version;
+                if (body.version !== undefined && body.version !== pageVersion) {
+                    window.location.reload();
+                    return;
+                }
                 setProblem(body.error);
                 if (body.error === undefined) {
                     setData(body);

package/dist/page/avatars/torretta.js

@@ -1,12 +1,19 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "preact/jsx-runtime";
 // The Torretta (D-45, D-46): the opponent and the logo, a rook that is a robot. Its screen shows the AI's mood (D-14, D-70): only the eyes, the mouth and the light change.
 import { useRef } from "preact/hooks";
-/** The Torretta at a size in pixels, with the face of a mood (neutral by default); with a label it is an image a screen reader names, else a decoration. */
-export function Torretta({ size, label, mood = "neutral" }) {
+/**
+ * The Torretta at a size in pixels, with the face of a mood (neutral by default); with a label it is an image a screen reader names, else a decoration.
+ * As a bust it is its own profile picture, on a player's card: a disc that frames it from the antenna to the screen, so that its face reads (Stefano).
+ */
+export function Torretta({ size, label, mood = "neutral", bust = false }) {
     // The face pops in when the mood changes, never when the Torretta first shows (the logo, a card, a dialog).
     const changed = useChanged(mood);
-    return (_jsxs("svg", { class: `torretta mood-${mood}`, viewBox: "0 0 128 128", width: size, height: size, role: label === undefined ? undefined : "img", "aria-label": label, "aria-hidden": label === undefined ? "true" : undefined, children: [_jsx("path", { class: "antenna", d: "M64 31V19" }), _jsx("circle", { class: "light", cx: "64", cy: "16", r: "5" }), _jsx("rect", { class: "shade", x: "29", y: "64", width: "12", height: "26", rx: "2" }), _jsx("rect", { class: "shade", x: "87", y: "64", width: "12", height: "26", rx: "2" }), _jsx("path", { class: "body", d: "M34 30H47V40H57V30H71V40H81V30H94V54L89 58L92 106H36L39 58L34 54Z" }), _jsx("rect", { class: "shade", x: "30", y: "104", width: "68", height: "12", rx: "4" }), _jsx("rect", { class: "screen", x: "44", y: "63", width: "40", height: "32", rx: "7" }), _jsx("g", { class: changed ? "expression changed" : "expression", children: _jsx(Face, { mood: mood }) }, mood)] }));
+    return (_jsxs("svg", { class: `torretta mood-${mood}${bust ? " bust" : ""}`, viewBox: bust ? bustFrame : fullFrame, width: size, height: size, role: label === undefined ? undefined : "img", "aria-label": label, "aria-hidden": label === undefined ? "true" : undefined, children: [bust ? _jsx("circle", { class: "back", cx: "64", cy: "56", r: "48" }) : null, _jsx("path", { class: "antenna", d: "M64 31V19" }), _jsx("circle", { class: "light", cx: "64", cy: "16", r: "5" }), _jsx("rect", { class: "shade", x: "29", y: "64", width: "12", height: "26", rx: "2" }), _jsx("rect", { class: "shade", x: "87", y: "64", width: "12", height: "26", rx: "2" }), _jsx("path", { class: "body", d: "M34 30H47V40H57V30H71V40H81V30H94V54L89 58L92 106H36L39 58L34 54Z" }), _jsx("rect", { class: "shade", x: "30", y: "104", width: "68", height: "12", rx: "4" }), _jsx("rect", { class: "screen", x: "44", y: "63", width: "40", height: "32", rx: "7" }), _jsx("g", { class: changed ? "expression changed" : "expression", children: _jsx(Face, { mood: mood }) }, mood)] }));
 }
+// The whole figure's frame: the square around it, from the antenna's light (y 11) to the base (y 116), two units clear of each, so that it fills its size.
+const fullFrame = "9.5 9 109 109";
+// The bust's frame, the square around its disc: the antenna's light three units under its top, the base left out below.
+const bustFrame = "16 8 96 96";
 /** Whether the mood has changed since the Torretta first showed: true from its first change on, so a face already shown never starts its entrance again. */
 function useChanged(mood) {
     const first = useRef(mood);

package/dist/page/dialogs/dialogs.css

@@ -291,6 +291,16 @@ h3 + .switch {
     translate: 14px 0;
 }
 
+/* A switch that cannot be used here: faded, and its tooltip says why */
+.switch:has(input:disabled),
+.switch input:disabled {
+    cursor: help;
+}
+
+.switch:has(input:disabled) > * {
+    opacity: 0.5;
+}
+
 @media (prefers-reduced-motion: reduce) {
     .switch input,
     .switch input::after {

package/dist/page/dialogs/profiles.js

@@ -11,11 +11,7 @@ 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 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.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. */
+/** The player's name on their card: a click opens the menu of the players, as their picture in the header does; from there the pencil opens their profile. */
 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" }) })] }));
 }
@@ -197,8 +193,8 @@ 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, and a field saved in the profile window.
-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.

package/dist/page/dialogs/settings.js

@@ -1,10 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "preact/jsx-runtime";
-import { useEffect, useRef } from "preact/hooks";
+import { useEffect, useRef, useState } from "preact/hooks";
 import { Piece } from "../pieces/pieces.js";
 import { looks, pieceSets } from "../profile/settings.js";
+import { hasVoice, onVoices } from "../talk/voice.js";
 /** The panel of the settings, open while `open` is true: every change goes to `onChange` at once. */
 export function SettingsPanel({ open, settings, onChange, onClose, text }) {
     const dialog = useRef(null);
+    const voiced = useVoiced(text.language);
     useEffect(() => {
         const element = dialog.current;
         if (open && !element.open) {
@@ -15,7 +17,7 @@ export function SettingsPanel({ open, settings, onChange, onClose, text }) {
         }
     }, [open]);
     const set = (key, value) => onChange({ ...settings, [key]: value });
-    return (_jsxs("dialog", { ref: dialog, class: "dialog", "aria-label": text.settings, onClose: onClose, onClick: (event) => event.target === dialog.current && onClose(), children: [_jsxs("header", { children: [_jsx("h2", { children: text.settings }), _jsx("button", { class: "icon-button", type: "button", title: text.close, "aria-label": text.close, onClick: onClose, children: _jsx("svg", { class: "icon", viewBox: "0 0 24 24", "aria-hidden": "true", children: _jsx("path", { d: "M6 6L18 18M18 6L6 18" }) }) })] }), _jsxs("div", { class: "setting-columns", children: [_jsxs(Section, { title: text.look, icon: lookIcon, children: [_jsxs("div", { class: "setting-group", children: [_jsx("p", { class: "setting-label", children: text.themeChoice }), _jsx(Segments, { label: text.themeChoice, children: ["system", "light", "dark"].map((theme) => _jsx(Choice, { on: settings.theme === theme, onPick: () => set("theme", theme), children: text.themes[theme] }, theme)) })] }), _jsxs("div", { class: "setting-group", children: [_jsxs("p", { class: "setting-label", children: [text.boardSkin, " ", _jsx("b", { children: nameOf(settings.board, text) })] }), _jsx(Swatches, { look: "board", label: text.boardSkin, settings: settings, onPick: (id) => set("board", id), text: text })] }), _jsxs("div", { class: "setting-group", children: [_jsx("p", { class: "setting-label", children: text.pieceSet }), _jsx("div", { class: "piece-sets", role: "radiogroup", "aria-label": text.pieceSet, children: pieceSets.map((pieceSet) => (_jsxs(Choice, { on: settings.set === pieceSet, onPick: () => set("set", pieceSet), children: [_jsxs("span", { class: "sample", children: [_jsx(Piece, { letter: "N", set: pieceSet }), _jsx(Piece, { letter: "n", set: pieceSet })] }), nameOf(pieceSet, text)] }, pieceSet))) })] }), _jsxs("div", { class: "setting-group setting-pair", children: [_jsxs("div", { children: [_jsx("p", { class: "setting-label", children: text.pieceColours }), _jsx(Swatches, { look: "pieces", label: text.pieceColours, settings: settings, onPick: (id) => set("pieces", id), text: text })] }), _jsxs("div", { children: [_jsx("p", { class: "setting-label", children: text.marksColour }), _jsx(Swatches, { look: "marks", label: text.marksColour, settings: settings, onPick: (id) => set("marks", id), text: text })] })] })] }), _jsxs("div", { class: "setting-column", children: [_jsxs(Section, { title: text.play, icon: playIcon, children: [_jsx(Switch, { on: settings.dots, onSwitch: (on) => set("dots", on), children: text.dots }), _jsx(Switch, { on: settings.squareNames, onSwitch: (on) => set("squareNames", on), children: text.squareNames }), _jsx(Switch, { on: settings.explain, onSwitch: (on) => set("explain", on), children: text.explain }), _jsx(Switch, { on: settings.book, onSwitch: (on) => set("book", on), children: text.bookBadges }), _jsx(Switch, { on: settings.helps, onSwitch: (on) => set("helps", on), children: text.helps }), _jsx(Switch, { on: settings.sound, onSwitch: (on) => set("sound", on), children: text.sounds }), _jsx(Switch, { on: settings.voice, onSwitch: (on) => set("voice", on), children: text.voice })] }), _jsx(Section, { title: text.languageChoice, icon: languageIcon, children: _jsx(Segments, { label: text.languageChoice, children: ["auto", "it", "en"].map((language) => _jsx(Choice, { on: settings.language === language, onPick: () => set("language", language), children: text.languages[language] }, language)) }) })] })] })] }));
+    return (_jsxs("dialog", { ref: dialog, class: "dialog", "aria-label": text.settings, onClose: onClose, onClick: (event) => event.target === dialog.current && onClose(), children: [_jsxs("header", { children: [_jsx("h2", { children: text.settings }), _jsx("button", { class: "icon-button", type: "button", title: text.close, "aria-label": text.close, onClick: onClose, children: _jsx("svg", { class: "icon", viewBox: "0 0 24 24", "aria-hidden": "true", children: _jsx("path", { d: "M6 6L18 18M18 6L6 18" }) }) })] }), _jsxs("div", { class: "setting-columns", children: [_jsxs(Section, { title: text.look, icon: lookIcon, children: [_jsxs("div", { class: "setting-group", children: [_jsx("p", { class: "setting-label", children: text.themeChoice }), _jsx(Segments, { label: text.themeChoice, children: ["system", "light", "dark"].map((theme) => _jsx(Choice, { on: settings.theme === theme, onPick: () => set("theme", theme), children: text.themes[theme] }, theme)) })] }), _jsxs("div", { class: "setting-group", children: [_jsxs("p", { class: "setting-label", children: [text.boardSkin, " ", _jsx("b", { children: nameOf(settings.board, text) })] }), _jsx(Swatches, { look: "board", label: text.boardSkin, settings: settings, onPick: (id) => set("board", id), text: text })] }), _jsxs("div", { class: "setting-group", children: [_jsx("p", { class: "setting-label", children: text.pieceSet }), _jsx("div", { class: "piece-sets", role: "radiogroup", "aria-label": text.pieceSet, children: pieceSets.map((pieceSet) => (_jsxs(Choice, { on: settings.set === pieceSet, onPick: () => set("set", pieceSet), children: [_jsxs("span", { class: "sample", children: [_jsx(Piece, { letter: "N", set: pieceSet }), _jsx(Piece, { letter: "n", set: pieceSet })] }), nameOf(pieceSet, text)] }, pieceSet))) })] }), _jsxs("div", { class: "setting-group setting-pair", children: [_jsxs("div", { children: [_jsx("p", { class: "setting-label", children: text.pieceColours }), _jsx(Swatches, { look: "pieces", label: text.pieceColours, settings: settings, onPick: (id) => set("pieces", id), text: text })] }), _jsxs("div", { children: [_jsx("p", { class: "setting-label", children: text.marksColour }), _jsx(Swatches, { look: "marks", label: text.marksColour, settings: settings, onPick: (id) => set("marks", id), text: text })] })] })] }), _jsxs("div", { class: "setting-column", children: [_jsxs(Section, { title: text.play, icon: playIcon, children: [_jsx(Switch, { on: settings.dots, onSwitch: (on) => set("dots", on), children: text.dots }), _jsx(Switch, { on: settings.squareNames, onSwitch: (on) => set("squareNames", on), children: text.squareNames }), _jsx(Switch, { on: settings.explain, onSwitch: (on) => set("explain", on), children: text.explain }), _jsx(Switch, { on: settings.book, onSwitch: (on) => set("book", on), children: text.bookBadges }), _jsx(Switch, { on: settings.helps, onSwitch: (on) => set("helps", on), children: text.helps }), _jsx(Switch, { on: settings.sound, onSwitch: (on) => set("sound", on), children: text.sounds }), _jsx(Switch, { on: settings.voice, onSwitch: (on) => set("voice", on), ...(voiced ? {} : { unavailable: text.noVoice }), children: text.voice })] }), _jsx(Section, { title: text.languageChoice, icon: languageIcon, children: _jsx(Segments, { label: text.languageChoice, children: ["auto", "it", "en"].map((language) => _jsx(Choice, { on: settings.language === language, onPick: () => set("language", language), children: text.languages[language] }, language)) }) })] })] })] }));
 }
 // The sections' line icons: a palette, a pawn, a globe.
 const lookIcon = (_jsxs(_Fragment, { children: [_jsx("path", { d: "M12 3a9 9 0 1 0 0 18c1.2 0 1.8-.8 1.8-1.7 0-1.2-1-1.6-1-2.6 0-1 .8-1.7 1.8-1.7H17a4 4 0 0 0 4-4C21 6.5 17 3 12 3Z" }), _jsx("circle", { cx: "7.5", cy: "11", r: "1.2" }), _jsx("circle", { cx: "10", cy: "7", r: "1.2" }), _jsx("circle", { cx: "14.5", cy: "7", r: "1.2" })] }));
@@ -34,8 +36,20 @@ function Segments({ label, children }) {
 function Choice({ on, onPick, children }) {
     return (_jsx("button", { type: "button", role: "radio", "aria-checked": on, onClick: onPick, children: children }));
 }
-function Switch({ on, onSwitch, children }) {
-    return (_jsxs("label", { class: "switch", children: [_jsx("span", { children: children }), _jsx("input", { type: "checkbox", role: "switch", checked: on, onChange: (event) => onSwitch(event.currentTarget.checked) })] }));
+/** A switch; one that cannot be used here is off and disabled, and its tooltip says why. */
+function Switch({ on, onSwitch, unavailable, children }) {
+    const usable = unavailable === undefined;
+    return (_jsxs("label", { class: "switch", title: unavailable, children: [_jsx("span", { children: children }), _jsx("input", { type: "checkbox", role: "switch", checked: on && usable, disabled: !usable, title: unavailable, onChange: (event) => onSwitch(event.currentTarget.checked) })] }));
+}
+/** Whether the browser has a voice for the language, looked at again whenever its voices change. */
+function useVoiced(language) {
+    const [voiced, setVoiced] = useState(() => hasVoice(language));
+    useEffect(() => {
+        const look = () => setVoiced(hasVoice(language));
+        look();
+        return onVoices(look);
+    }, [language]);
+    return voiced;
 }
 function nameOf(id, text) {
     return text.names[id] ?? id;

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)] })), 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 })] })) }));
+            : (_jsxs(_Fragment, { children: [_jsxs("div", { class: "side-cards", 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?.reviewing !== true ? null : (_jsxs("p", { class: "card review waiting", role: "status", children: [_jsx("span", { class: "spinner", "aria-hidden": "true" }), text.reviewing(analysis.by)] }))] }), _jsxs("div", { class: "side-foot", children: [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 }) {

package/dist/page/game/game.css

@@ -584,6 +584,6 @@
 }
 
 /* The saves and the steps stay at the foot of the column, with the moves folded too (Stefano) */
-.side > .moves-card + * {
+.side-foot > .moves-card + * {
     margin-top: auto;
 }