chesspal 0.3.1 → 0.3.3

package/dist/page/helps/helps.js

@@ -1,7 +1,4 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "preact/jsx-runtime";
-// The helps on the page (D-78, Zoe's sketch B): the board says where, the card says what, the facts the AI sees at the game's level and only those; and
-// the coach's words (D-88).
-import { Fragment } from "preact";
 import { useState } from "preact/hooks";
 import { Notch, Pushpin, Skewer } from "../board/marks.js";
 import { BadgeIcon, NoteIcon } from "../game/badges.js";
@@ -11,7 +8,7 @@ import { Figurine } from "../pieces/pieces.js";
 import { Legend, Marked } from "../talk/talk.js";
 import { groupOf, pinSquares, riskSquares, squaresOf, strategyOf } from "./view.js";
 /**
- * The helps' card, between the opening and the moves: the coach's words, then the tactics in lines, the strategy in a table and the control map, seen while
+ * The helps' card, between the opening and the moves: the coach's words, then the tactics in lines, the strategy in rows and the control map, seen while
  * its button or M is held, and the board without its drawings while their button is. A line under the pointer lights its squares on the board. Its title
  * folds it to the title and opens it again (Stefano).
  */
@@ -44,12 +41,12 @@ export function BareButton({ bare, onBare, text }) {
     return (_jsx(HoldButton, { on: bare, onHold: onBare, title: text.helpsCard.bareHint, label: text.helpsCard.bare, kind: "bare-button", children: _jsxs("svg", { viewBox: "0 0 16 16", "aria-hidden": "true", children: [_jsx("path", { d: "M1.5 8S4 3.5 8 3.5 14.5 8 14.5 8 12 12.5 8 12.5 1.5 8 1.5 8Z" }), _jsx("circle", { cx: "8", cy: "8", r: "2" }), _jsx("path", { d: "M2.5 2.5l11 11" })] }) }));
 }
 /**
- * The coach's hint, a line that opens on its words and the legend of what it draws (D-88): in the helps' card, and on a phone under the board, beside the
- * map, where its drawings are in sight (Zoe).
+ * The coach's hint, a line that opens on its words and the legend of what it draws (D-88): in the helps' card a tinted row behind a bulb, as the tactics',
+ * and on a phone under the board, beside the map, where its drawings are in sight (Zoe).
  */
 export function HintLine({ hint, open, onOpen, text }) {
     const words = text.helpsCard;
-    return (_jsxs("details", { class: "coach-hint", open: open, onToggle: (event) => onOpen(event.currentTarget.open), children: [_jsx("summary", { children: open ? words.hideHint : words.showHint }), _jsx("span", { class: "note", children: _jsx(Marked, { text: hint.text }) }), hint.arrows === undefined && hint.squares === undefined ? null : _jsx(Legend, { review: hint, words: words.drawn })] }));
+    return (_jsxs("details", { class: "coach-hint", open: open, onToggle: (event) => onOpen(event.currentTarget.open), children: [_jsxs("summary", { children: [_jsxs(RowIcon, { children: [_jsx("path", { d: "M5.5 10.5C4.3 9.7 3.5 8.4 3.5 7a4.5 4.5 0 0 1 9 0c0 1.4-.8 2.7-2 3.5V12h-5Z" }), _jsx("path", { d: "M6.5 14.2h3" })] }), open ? words.hideHint : words.showHint] }), _jsx("span", { class: "note", children: _jsx(Marked, { text: hint.text }) }), hint.arrows === undefined && hint.squares === undefined ? null : _jsx(Legend, { review: hint, words: words.drawn })] }));
 }
 /** An icon the mouse holds, while what it shows lasts; a finger, or the keyboard, turns it on and off (D-78). */
 function HoldButton({ on, onHold, title, label, kind, children }) {
@@ -57,11 +54,11 @@ function HoldButton({ on, onHold, title, label, kind, children }) {
     const mouse = (event) => event instanceof PointerEvent && event.pointerType === "mouse";
     return (_jsx("button", { type: "button", class: kind === undefined ? "hold-button" : `hold-button ${kind}`, "aria-pressed": on, "aria-label": label, title: title, onPointerDown: (event) => mouse(event) && onHold(true), onPointerUp: (event) => mouse(event) && onHold(false), onPointerLeave: (event) => mouse(event) && onHold(false), onClick: (event) => !mouse(event) && onHold(!on), children: children }));
 }
-/** The coach's judgment of the player's move: its badge and the move in a line, which opens on its note (D-78, D-88). */
+/** The coach's judgment of the player's move: its badge and the move in a row tinted in the badge's colour, which opens on its note (D-78, D-88). */
 function Judged({ ply, text }) {
     const { badge, note } = ply.review ?? {};
     const head = (_jsxs(_Fragment, { children: [badge === undefined ? _jsx(NoteIcon, {}) : _jsx(BadgeIcon, { badge: badge }), _jsxs("b", { children: [_jsxs("span", { class: "move-number", children: [ply.number, ply.side === "white" ? "." : "..."] }), _jsx(Figurines, { san: ply.san, side: ply.side })] }), " ", badge === undefined ? null : text.badges[badge]] }));
-    return (_jsx("div", { class: `move-note judged ${badge ?? ""}`, children: note === undefined ? _jsx("span", { class: "head", children: head }) : (_jsxs("details", { children: [_jsx("summary", { class: "head", children: head }), _jsx("span", { class: "note", children: _jsx(Marked, { text: note }) })] })) }));
+    return (_jsx("div", { class: `move-note judged ${badge ?? ""}`, style: badge === undefined ? undefined : { "--row": `var(--badge-${badge})` }, children: note === undefined ? _jsx("span", { class: "head", children: head }) : (_jsxs("details", { children: [_jsx("summary", { class: "head", children: head }), _jsx("span", { class: "note", children: _jsx(Marked, { text: note }) })] })) }));
 }
 /**
  * The tactics in lines (D-91): one a kind of fact and a side, its count, red when it threatens the player and green when it is their chance; a click opens
@@ -146,8 +143,8 @@ function Squares({ squares }) {
     return _jsx("b", { class: "square-name", children: squares.join(", ") });
 }
 /**
- * The strategy (Stefano): the phase and the open files on top, the squares each side controls in a bar, the table in groups each under its figure, a count
- * or a tick in each cell, and the notes in lines as the tactics'. The player's side comes first, with no colour of good or bad (D-91).
+ * The strategy (Stefano): the phases with the current one in a pill, the bar of the squares each side controls, then the lines in groups, each a name and a
+ * tile of a half per side, and the notes as the tactics'. The player's side comes first, with no colour of good or bad (D-91).
  */
 function Strategy({ helps, onPoint, text }) {
     const words = text.helpsCard;
@@ -166,34 +163,56 @@ function Strategy({ helps, onPoint, text }) {
         ...(pawnEnding?.squares ?? []).map((square) => words.pawnSquare(square.pawn, square.caught)),
         pawnEnding?.opposition === undefined ? undefined : words.opposition(pawnEnding.opposition),
     ].filter((note) => note !== undefined);
-    return (_jsxs("div", { class: "strategy", children: [_jsxs("p", { class: "strategy-head", children: [_jsx("span", { class: "phase", children: words.phases[profile.phase] }), _jsxs("span", { children: [words.openFiles, ": ", _jsx(Chips, { items: profile.openFiles })] })] }), _jsx(ControlBar, { controlled: profile.controlled, sides: helps.sides, sideName: sideName, words: words }), _jsxs("table", { class: "strategy-table", children: [_jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", {}), helps.sides.map((side) => (_jsxs("th", { children: [_jsx(Figurine, { letter: "P", side: side }), sideName(side)] }, side)))] }) }), groups.map(({ group, letter }) => {
-                        const shown = lines.filter((line) => groupOf[line.row] === group);
-                        return shown.length === 0 ? null : (_jsxs("tbody", { children: [_jsx("tr", { class: "group", children: _jsxs("th", { colSpan: 3, children: [_jsx(Figurine, { letter: letter, side: "white" }), words.groups[group]] }) }), shown.map((line) => {
-                                    const [name, meaning] = words.rows[line.row];
-                                    const open = explained === line.row;
-                                    const listed = helps.sides.filter((side) => typeof line[side] === "object");
-                                    return (_jsxs(Fragment, { children: [_jsxs("tr", { class: open ? "open" : undefined, ...point(squaresIn(line)), children: [_jsx("th", { children: _jsx("button", { type: "button", class: "term", title: meaning, "aria-expanded": open, onClick: () => setExplained(open ? undefined : line.row), children: name }) }), helps.sides.map((side) => (_jsx("td", { children: _jsx(Cell, { cell: line[side], words: words }) }, side)))] }), open
-                                                ? (_jsx("tr", { class: "meaning", children: _jsxs("td", { colSpan: 3, children: [meaning, listed.map((side) => (_jsxs("span", { class: "listed", children: [sideName(side), ": ", _jsx(Chips, { items: line[side] })] }, side)))] }) }))
-                                                : null] }, line.row));
-                                })] }, group));
-                    })] }), notes.length === 0 ? null : (_jsx("ul", { class: "help-rows", children: notes.map((note) => (_jsxs("li", { class: "info", children: [_jsx(InfoIcon, {}), note] }, note))) }))] }));
-}
-// The groups of the strategy's table in their order, each with its figure.
-const groups = [{ group: "pawns", letter: "P" }, { group: "pieces", letter: "N" }, { group: "king", letter: "K" }];
+    return (_jsxs("div", { class: "strategy", children: [_jsx(Phases, { current: profile.phase, words: words }), _jsx(ControlBar, { controlled: profile.controlled, sides: helps.sides, you: helps.you, words: words }), groups.map((group) => {
+                const shown = lines.filter((line) => groupOf[line.row] === group);
+                return shown.length === 0 ? null : (_jsx("ul", { class: "strategy-rows", children: shown.map((line) => {
+                        const [name, meaning] = words.rows[line.row];
+                        const open = explained === line.row;
+                        return (_jsxs("li", { class: open ? "open" : undefined, ...point(squaresIn(line)), children: [_jsxs("div", { class: "row-head", children: [_jsx("button", { type: "button", class: "term", title: meaning, "aria-expanded": open, onClick: () => setExplained(open ? undefined : line.row), children: name }), _jsx(Tile, { line: line, sides: helps.sides, sideName: sideName, words: words })] }), open ? _jsx(Meaning, { line: line, meaning: meaning, sides: helps.sides, sideName: sideName }) : null] }, line.row));
+                    }) }, group));
+            }), notes.length === 0 ? null : (_jsx("ul", { class: "help-rows", children: notes.map((note) => (_jsxs("li", { class: "info", children: [_jsx(InfoIcon, {}), note] }, note))) }))] }));
+}
+// The strategy's groups in their order, apart only by a gap.
+const groups = ["pawns", "pieces", "king"];
+const phases = ["opening", "middlegame", "endgame"];
 // The fifty-move count shows only when the draw is near: ten moves each, or less.
 const fiftyMovesShown = 20;
 /** The squares a side's cells of a strategy's line name, to light on the board; files and islands light none. */
 function squaresIn(line) {
+    if (line.row === "openFiles") {
+        return [];
+    }
     return [line.white, line.black].flatMap((cell) => typeof cell === "object" ? cell.filter((item) => /^[a-h][1-8]$/.test(item)) : []);
 }
-/**
- * The squares only one side controls and those both do, in a bar as long as their counts, the player's side on the left; its title says it in words.
- */
-function ControlBar({ controlled, sides, sideName, words }) {
+/** The game's three phases in a row, the current one in a pill. */
+function Phases({ current, words }) {
+    return (_jsx("ol", { class: "phases", children: phases.map((phase) => (_jsx("li", { "aria-current": phase === current ? "step" : undefined, children: _jsx("span", { children: words.phases[phase] }) }, phase))) }));
+}
+/** The squares only one side controls and those both do, in a bar as long as their counts, the player's side on the left; each part's title says it in words. */
+function ControlBar({ controlled, sides, you, words }) {
     const { white, black, contested } = controlled;
     const [left, right] = sides;
-    const parts = [{ side: left, count: controlled[left] }, { side: "both", count: contested }, { side: right, count: controlled[right] }].filter(({ count }) => count > 0);
-    return (_jsxs("div", { class: "control", title: words.controlled(white, black, contested), children: [_jsx("span", { class: "control-title", children: words.control }), _jsx("span", { class: "control-bar", role: "img", "aria-label": words.controlled(white, black, contested), children: parts.map(({ side, count }) => _jsx("span", { class: side, style: { flexGrow: count }, children: count }, side)) }), _jsxs("span", { class: "control-legend", "aria-hidden": "true", children: [_jsx("span", { children: sideName(left) }), _jsx("span", { children: words.both }), _jsx("span", { children: sideName(right) })] })] }));
+    const parts = [{ who: left, count: controlled[left] }, { who: "both", count: contested }, { who: right, count: controlled[right] }];
+    return (_jsx("span", { class: "control-bar", role: "img", "aria-label": words.controlled(white, black, contested), children: parts.filter(({ count }) => count > 0).map(({ who, count }) => _jsx("span", { class: who, style: { flexGrow: count }, title: words.controlledBy(who, count, who === you), children: count }, who)) }));
+}
+/** A line's tile: a half for each side, the player's first, in the bar's colours; the open files, both sides', in one half as wide as the two. */
+function Tile({ line, sides, sideName, words }) {
+    if (line.row === "openFiles") {
+        return (_jsx("span", { class: "row-tile", children: _jsxs("span", { class: "both", title: words.bothSides, children: [_jsx("span", { class: "visually-hidden", children: `${words.bothSides} ` }), _jsx("b", { class: "count", children: line.both.length })] }) }));
+    }
+    return (_jsx("span", { class: "row-tile", children: sides.map((side) => (_jsxs("span", { class: side, title: sideName(side), children: [_jsx("span", { class: "visually-hidden", children: `${sideName(side)} ` }), _jsx(Cell, { cell: line[side], words: words })] }, side))) }));
+}
+/** A line opened: its meaning, then each listed side's squares or files in chips; the open files with no side's name. */
+function Meaning({ line, meaning, sides, sideName }) {
+    if (line.row === "openFiles") {
+        return (_jsxs("div", { class: "meaning", children: [meaning, _jsx("span", { class: "listed", children: _jsx(Chips, { items: line.both }) })] }));
+    }
+    return (_jsxs("div", { class: "meaning", children: [meaning, sides.map((side) => {
+                const cell = line[side];
+                return typeof cell === "object"
+                    ? (_jsxs("span", { class: "listed", children: [sideName(side), ": ", _jsx(Chips, { items: cell })] }, side))
+                    : null;
+            })] }));
 }
 /** Squares, files or islands in chips; none as a faint dash. */
 function Chips({ items }) {

package/dist/page/helps/view.js

@@ -62,13 +62,14 @@ export function riskSquares(risk) {
 export function pinSquares(pin) {
     return [pin.piece.square, pin.by.square, pin.to.square];
 }
-/** Which group each line of the strategy's table stands in. */
+/** Which group each line of the strategy stands in. */
 export const groupOf = {
     isolated: "pawns",
     doubled: "pawns",
     backward: "pawns",
     passed: "pawns",
     islands: "pawns",
+    openFiles: "pieces",
     halfOpen: "pieces",
     heavyOnFiles: "pieces",
     onSeventh: "pieces",
@@ -79,11 +80,20 @@ export const groupOf = {
     castled: "king",
     kingAttacks: "king",
 };
-/** The strategy's table: only the lines where a side has something; the pawn islands only when a side has more than one. */
+/**
+ * The strategy's lines: only those where a side has something, the pawn islands only when a side has more than one; the open files, when there are any,
+ * first among the pieces' lines.
+ */
 export function strategyOf(profile) {
     const lines = Object.entries(cells).map(([row, cell]) => ({ row: row, white: cell(profile.white), black: cell(profile.black) }));
     const split = profile.white.pawns.islands.length > 1 || profile.black.pawns.islands.length > 1;
-    return lines.filter((line) => line.row === "islands" ? split : something(line.white) || something(line.black));
+    const shown = lines.filter((line) => line.row === "islands" ? split : something(line.white) || something(line.black));
+    if (profile.openFiles.length === 0) {
+        return shown;
+    }
+    const pawnLines = shown.filter((line) => groupOf[line.row] === "pawns");
+    const otherLines = shown.filter((line) => groupOf[line.row] !== "pawns");
+    return [...pawnLines, { row: "openFiles", both: profile.openFiles }, ...otherLines];
 }
 const cells = {
     isolated: (side) => side.pawns.isolated,

package/dist/page/{guide/foot.js → layout/footer.js}

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

package/dist/page/layout/header.js

@@ -1,13 +1,15 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "preact/jsx-runtime";
 import { PlayerPicture } from "../avatars/avatars.js";
 import { Torretta } from "../avatars/torretta.js";
+import { UpdateMark } from "../table/update.js";
 /**
  * The header, with how a game over ended, or that none goes on (D-77), or the AI's draw offer with the player's answer, the player's draw
  * and resignation in a game going on (D-65), a new game once the page has the folder's, the command that turns the board round and says whether it is
- * turned, the switches of the sounds and the theme, the gear of the settings (D-56) and the book of the guide.
+ * turned, on the table the mark of a newer Chesspal (D-108), the switches of the sounds and the theme, the gear of the settings (D-56) and the book of
+ * the guide.
  */
-export function Header({ text, verdict, kind, who, actions, onNewGame, standOut = false, onStudy, flipped, onFlip, sound, onSound, onTheme, onSettings, onGuide, profile, onProfile }) {
-    return (_jsxs("header", { class: "top", children: [_jsx(Torretta, { size: 34 }), _jsx("b", { class: "title", children: "Chesspal" }), _jsxs("p", { class: `verdict${kind === undefined ? "" : ` ${kind}`}`, role: "status", children: [verdict === undefined || kind === undefined ? null : _jsx(Icon, { class: "kind", children: kindIcons[kind] }), who === undefined || verdict === undefined ? verdict : (_jsxs(_Fragment, { children: [_jsx("span", { class: "ai-name", children: who }), _jsx("span", { children: verdict })] }))] }), actions === undefined ? null : _jsx(Actions, { actions: actions, text: text }), onNewGame === undefined ? null : (_jsxs("button", { class: standOut ? "command primary" : "command", type: "button", title: text.newGame, onClick: onNewGame, children: [_jsx(Icon, { class: "new", children: _jsx("path", { d: "M12 5V19M5 12H19" }) }), _jsx("span", { children: text.newGame })] })), onStudy === undefined ? null : (_jsxs("button", { class: "command", type: "button", title: text.study.title, onClick: onStudy, children: [_jsxs(Icon, { class: "study", children: [_jsx("circle", { cx: "10.5", cy: "10.5", r: "5.5" }), _jsx("path", { d: "M14.5 14.5L20 20" })] }), _jsx("span", { children: text.study.title })] })), _jsxs("button", { class: "command", type: "button", title: text.flip, "aria-pressed": flipped, onClick: onFlip, children: [_jsx(Icon, { class: "flip", children: _jsx("path", { d: "M7 4V17M7 17L4 14M7 17L10 14M17 20V7M17 7L14 10M17 7L20 10" }) }), _jsx("span", { children: text.flip })] }), _jsx("button", { class: "icon-button sound-button", type: "button", title: text.sounds, "aria-label": text.sounds, "aria-pressed": sound, onClick: onSound, children: _jsxs(Icon, { class: "speaker", children: [_jsx("path", { d: "M5 9.5H8.5L13 5.5V18.5L8.5 14.5H5Z" }), sound ? _jsx("path", { d: "M16.5 9A4 4 0 0 1 16.5 15M19 6.5A7.5 7.5 0 0 1 19 17.5" }) : _jsx("path", { d: "M15.5 9L21.5 15M21.5 9L15.5 15" })] }) }), _jsxs("button", { class: "icon-button theme-button", type: "button", title: text.theme, "aria-label": text.theme, onClick: onTheme, children: [_jsxs(Icon, { class: "sun", children: [_jsx("circle", { cx: "12", cy: "12", r: "4" }), _jsx("path", { d: "M12 2V4M12 20V22M2 12H4M20 12H22M4.9 4.9L6.3 6.3M17.7 17.7L19.1 19.1M4.9 19.1L6.3 17.7M17.7 6.3L19.1 4.9" })] }), _jsx(Icon, { class: "moon", children: _jsx("path", { d: "M20 14.5A8 8 0 1 1 9.5 4A6.5 6.5 0 0 0 20 14.5Z" }) })] }), _jsx("button", { class: "icon-button", type: "button", title: text.settings, "aria-label": text.settings, onClick: onSettings, children: _jsxs(Icon, { class: "gear", children: [_jsx("circle", { cx: "12", cy: "12", r: "3" }), _jsx("path", { d: "M9.72 5.38L10.19 2.67L13.81 2.67L14.28 5.38L15.07 5.71L17.31 4.12L19.88 6.69L18.29 8.93L18.62 9.72L21.33 10.19L21.33 13.81L18.62 14.28L18.29 15.07L19.88 17.31L17.31 19.88L15.07 18.29L14.28 18.62L13.81 21.33L10.19 21.33L9.72 18.62L8.93 18.29L6.69 19.88L4.12 17.31L5.71 15.07L5.38 14.28L2.67 13.81L2.67 10.19L5.38 9.72L5.71 8.93L4.12 6.69L6.69 4.12L8.93 5.71Z" })] }) }), _jsx("button", { class: "icon-button guide-button", type: "button", title: text.guide.title, "aria-label": text.guide.title, "aria-haspopup": "dialog", onClick: onGuide, children: _jsx(Icon, { class: "book", children: _jsx("path", { d: "M12 6.5C10 5 7 4.5 3.5 5V18.5C7 18 10 18.5 12 20C14 18.5 17 18 20.5 18.5V5C17 4.5 14 5 12 6.5ZM12 6.5V20" }) }) }), profile === undefined || onProfile === undefined ? null : (_jsx("button", { class: "icon-button player", type: "button", title: `${profile.name}: ${text.profile.profiles}`, "aria-label": `${profile.name}: ${text.profile.profiles}`, "aria-haspopup": "dialog", onClick: onProfile, children: _jsx(PlayerPicture, { profile: profile, size: 28 }) }))] }));
+export function Header({ text, verdict, kind, who, actions, onNewGame, standOut = false, onStudy, flipped, onFlip, sound, onSound, onTheme, onSettings, onGuide, profile, onProfile, update, onUpdate }) {
+    return (_jsxs("header", { class: "top", children: [_jsx(Torretta, { size: 34 }), _jsx("b", { class: "title", children: "Chesspal" }), _jsxs("p", { class: `verdict${kind === undefined ? "" : ` ${kind}`}`, role: "status", children: [verdict === undefined || kind === undefined ? null : _jsx(Icon, { class: "kind", children: kindIcons[kind] }), who === undefined || verdict === undefined ? verdict : (_jsxs(_Fragment, { children: [_jsx("span", { class: "ai-name", children: who }), _jsx("span", { children: verdict })] }))] }), actions === undefined ? null : _jsx(Actions, { actions: actions, text: text }), onNewGame === undefined ? null : (_jsxs("button", { class: standOut ? "command primary" : "command", type: "button", title: text.newGame, onClick: onNewGame, children: [_jsx(Icon, { class: "new", children: _jsx("path", { d: "M12 5V19M5 12H19" }) }), _jsx("span", { children: text.newGame })] })), onStudy === undefined ? null : (_jsx("button", { class: "icon-button", type: "button", title: text.study.title, "aria-label": text.study.title, "aria-haspopup": "dialog", onClick: onStudy, children: _jsxs(Icon, { class: "study", children: [_jsx("circle", { cx: "10.5", cy: "10.5", r: "5.5" }), _jsx("path", { d: "M14.5 14.5L20 20" })] }) })), _jsx("button", { class: "icon-button flip-button", type: "button", title: text.flip, "aria-label": text.flip, "aria-pressed": flipped, onClick: onFlip, children: _jsx(Icon, { class: "flip", children: _jsx("path", { d: "M7 4V17M7 17L4 14M7 17L10 14M17 20V7M17 7L14 10M17 7L20 10" }) }) }), update === undefined || onUpdate === undefined ? null : _jsx(UpdateMark, { version: update.version, installing: update.installing, onOpen: onUpdate, text: text }), _jsx("button", { class: "icon-button sound-button", type: "button", title: text.sounds, "aria-label": text.sounds, "aria-pressed": sound, onClick: onSound, children: _jsxs(Icon, { class: "speaker", children: [_jsx("path", { d: "M5 9.5H8.5L13 5.5V18.5L8.5 14.5H5Z" }), sound ? _jsx("path", { d: "M16.5 9A4 4 0 0 1 16.5 15M19 6.5A7.5 7.5 0 0 1 19 17.5" }) : _jsx("path", { d: "M15.5 9L21.5 15M21.5 9L15.5 15" })] }) }), _jsxs("button", { class: "icon-button theme-button", type: "button", title: text.theme, "aria-label": text.theme, onClick: onTheme, children: [_jsxs(Icon, { class: "sun", children: [_jsx("circle", { cx: "12", cy: "12", r: "4" }), _jsx("path", { d: "M12 2V4M12 20V22M2 12H4M20 12H22M4.9 4.9L6.3 6.3M17.7 17.7L19.1 19.1M4.9 19.1L6.3 17.7M17.7 6.3L19.1 4.9" })] }), _jsx(Icon, { class: "moon", children: _jsx("path", { d: "M20 14.5A8 8 0 1 1 9.5 4A6.5 6.5 0 0 0 20 14.5Z" }) })] }), _jsx("button", { class: "icon-button", type: "button", title: text.settings, "aria-label": text.settings, onClick: onSettings, children: _jsxs(Icon, { class: "gear", children: [_jsx("circle", { cx: "12", cy: "12", r: "3" }), _jsx("path", { d: "M9.72 5.38L10.19 2.67L13.81 2.67L14.28 5.38L15.07 5.71L17.31 4.12L19.88 6.69L18.29 8.93L18.62 9.72L21.33 10.19L21.33 13.81L18.62 14.28L18.29 15.07L19.88 17.31L17.31 19.88L15.07 18.29L14.28 18.62L13.81 21.33L10.19 21.33L9.72 18.62L8.93 18.29L6.69 19.88L4.12 17.31L5.71 15.07L5.38 14.28L2.67 13.81L2.67 10.19L5.38 9.72L5.71 8.93L4.12 6.69L6.69 4.12L8.93 5.71Z" })] }) }), _jsx("button", { class: "icon-button guide-button", type: "button", title: text.guide.title, "aria-label": text.guide.title, "aria-haspopup": "dialog", onClick: onGuide, children: _jsx(Icon, { class: "book", children: _jsx("path", { d: "M12 6.5C10 5 7 4.5 3.5 5V18.5C7 18 10 18.5 12 20C14 18.5 17 18 20.5 18.5V5C17 4.5 14 5 12 6.5ZM12 6.5V20" }) }) }), profile === undefined || onProfile === undefined ? null : (_jsx("button", { class: "icon-button player", type: "button", title: `${profile.name}: ${text.profile.profiles}`, "aria-label": `${profile.name}: ${text.profile.profiles}`, "aria-haspopup": "dialog", onClick: onProfile, children: _jsx(PlayerPicture, { profile: profile, size: 28 }) }))] }));
 }
 /** The answer to the AI's draw offer while it stands, else the player's own offer; then the resignation. */
 function Actions({ actions, text }) {

package/dist/page/layout/layout.css

@@ -81,8 +81,9 @@
         display: none;
     }
 
-    /* Beside a narrow board the offer and its answer take the room of the other commands, which come back once it is answered */
-    .top:has(.answer) .command:not(.answer) {
+    /* Beside a narrow board the offer and its answer take the room of the other commands and the flip, which come back once it is answered */
+    .top:has(.answer) .command:not(.answer),
+    .top:has(.answer) .flip-button {
         display: none;
     }
 }
@@ -114,6 +115,13 @@
     white-space: nowrap;
 }
 
+/* The board turned round: the flip stands pressed, its edge in the soft ink that reads on both themes (Zoe) */
+.top .flip-button[aria-pressed="true"] {
+    color: var(--ink);
+    border-color: var(--soft);
+    background: var(--card);
+}
+
 /* The player's picture, round and borderless, at the end of the header: it opens the menu of the players */
 .top .player {
     border-color: transparent;
@@ -152,10 +160,6 @@
     }
 }
 
-.top:has(.verdict.idle, .verdict.over) .command:has(.icon.flip) span {
-    display: none;
-}
-
 /* On a phone the player's card is under the board, below the fold: between games the header's new game stands out too, on the first screen */
 @media (max-width: 840px) {
     .top:has(.verdict.idle, .verdict.over) .command:has(.icon.new) {
@@ -205,10 +209,54 @@
     position: relative;
     /* 12.5cqw is a square, for the lifted piece too */
     container-type: inline-size;
-    width: min(calc(100vw - var(--left-now) - var(--right-now) - 2 * var(--gap) - 2 * var(--between)), max(var(--least), calc(100vh - var(--bar) - 3 * var(--between))));
+    width: min(calc(100vw - var(--left-now) - var(--right-now) - 2 * var(--gap) - 2 * var(--between)), max(var(--least), calc(100vh - var(--bar) - var(--foot) - 4 * var(--between))));
     transition: width 200ms cubic-bezier(0.2, 0, 0, 1);
 }
 
+/* The page's foot, a thin line under the board and as wide as it, in a row of its own under the others at every width (Stefano); it never widens the board's
+   column */
+.page-foot {
+    grid-column: board;
+    grid-row: -1 / span 1;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: space-between;
+    gap: 4px 14px;
+    min-height: var(--foot);
+    contain: inline-size;
+    color: var(--soft);
+    font-size: 12px;
+}
+
+.page-foot a {
+    display: inline-flex;
+    align-items: center;
+    gap: 5px;
+    color: inherit;
+    text-decoration: none;
+}
+
+.page-foot a:hover,
+.page-foot a:focus-visible {
+    color: var(--ink);
+}
+
+.foot-links {
+    display: inline-flex;
+    align-items: center;
+    gap: 14px;
+}
+
+.page-foot .icon {
+    width: 15px;
+    height: 15px;
+}
+
+.foot-support .icon {
+    color: var(--low-time);
+}
+
 .talk {
     grid-area: talk;
     display: flex;
@@ -422,6 +470,13 @@
     box-shadow: 0 0 0 2px var(--page);
 }
 
+/* On the Torretta's disc, clear of its battlement, ringed in the card's colour */
+.face.unread::after {
+    top: -2px;
+    right: -2px;
+    box-shadow: 0 0 0 2px var(--card);
+}
+
 .fold-tab button.unread::after {
     top: -4px;
     right: auto;
@@ -436,11 +491,11 @@
     flex: none;
 }
 
-/* Its trail clear of the battlements' corner, which the halo would bite */
+/* The trail's dot on the disc's edge, clear of the battlement */
 .thought {
     position: absolute;
-    top: -8px;
-    left: -10px;
+    top: -9px;
+    left: -12px;
     width: 24px;
     height: 20px;
     overflow: visible;
@@ -614,6 +669,14 @@
     min-height: 0;
 }
 
+/* The cards, then the foot: the moves, the saves and the steps */
+.side-cards,
+.side-foot {
+    display: flex;
+    flex-direction: column;
+    gap: var(--between);
+}
+
 .board-steps,
 .board-map {
     display: none;
@@ -664,6 +727,38 @@
     .side > * {
         width: var(--right);
     }
+
+    /* Beside the board the moves, the saves and the steps take the room the cards leave, by the board's lower edge, and the moves keep four rows at least; a
+       column too short for both scrolls the cards under the wheel, with no scrollbar, and the cards never give way themselves (Stefano, Zoe). A halo round
+       them keeps their shadows, which the scroll would cut, and they fade at the board's top edge and over the moves */
+    .side > .side-cards {
+        --halo: 16px;
+        flex: 0 1 auto;
+        min-height: 0;
+        width: calc(var(--right) + 2 * var(--halo));
+        margin: calc(-1 * var(--halo)) calc(-1 * var(--halo)) calc(-1 * var(--between));
+        padding: var(--halo) var(--halo) var(--between);
+        overflow: hidden auto;
+        scrollbar-width: none;
+        mask-image: linear-gradient(transparent, #000 var(--halo), #000 calc(100% - var(--between)), transparent);
+    }
+
+    .side > .side-cards > * {
+        flex-shrink: 0;
+    }
+
+    .side > .side-foot {
+        flex: 1 1 auto;
+    }
+
+    .side-foot > .moves-card:not(.folded) {
+        min-height: 150px;
+    }
+
+    /* A long game asks no room of its own: its moves scroll in what the cards leave */
+    .side-foot .moves {
+        contain: size;
+    }
 }
 
 /* Where three columns would leave the board small, the game's column goes under the board, always open */
@@ -909,6 +1004,15 @@
     box-shadow: 0 8px 24px rgb(0 0 0 / 16%);
 }
 
+/* On a phone it would cover the chat's line at the foot: it stands at the top of the column instead (Zoe) */
+@media (max-width: 840px) {
+    .outdated {
+        position: static;
+        margin: var(--between) var(--gap) 0;
+        box-shadow: none;
+    }
+}
+
 /* On a phone the header's first line holds the Torretta, which stands for the name, and every button down to the player's picture, a little closer; the
    sound and the theme stay in the settings */
 @media (max-width: 420px) {

package/dist/page/layout/window.js

@@ -1,10 +1,9 @@
-// The table's window the first time it opens (D-104): Chrome and Edge open an application window about 1000 px wide, where the page has two columns. The
-// page asks once for 16:9, 1600×900 or what the screen has, centred; after that the browser keeps the size the player gives it (Zoe).
+// The table's window as it opens (D-104): 16:9, 1600×900 or what the screen has, centred, every time the table opens it. Chrome and Edge keep one size for
+// every application window on 127.0.0.1, whatever its port, so the size they would give is any page's, often half a screen (Stefano).
 // The mark the table puts on the address of the window it opens (server/table/browser.ts).
 const mark = "opened";
-const sizedKey = "chesspal-window-sized";
 const wanted = { width: 1600, height: 900 };
-/** Sizes the window the table opened, once in this browser, and takes the mark off the address. */
+/** Sizes the window the table opened and takes the mark off the address, so that a reload keeps the size the player gave it. */
 export function fitOpenedWindow() {
     const address = new URL(location.href);
     if (!address.searchParams.has(mark)) {
@@ -12,13 +11,11 @@ export function fitOpenedWindow() {
     }
     address.searchParams.delete(mark);
     history.replaceState(history.state, "", address.pathname + address.search + address.hash);
-    if (sizedBefore()) {
-        return;
-    }
     const place = windowPlace(screen.availWidth, screen.availHeight);
+    // Chrome and Edge say where the window's screen starts: on a second screen the window stays there (Zoe).
+    const { availLeft = 0, availTop = 0 } = screen;
     window.resizeTo(place.width, place.height);
-    window.moveTo(place.left, place.top);
-    noteSized();
+    window.moveTo(availLeft + place.left, availTop + place.top);
 }
 /** Where the window goes on a screen with this much room: 1600×900, or less on a smaller screen, centred. */
 export function windowPlace(roomWidth, roomHeight) {
@@ -26,20 +23,3 @@ export function windowPlace(roomWidth, roomHeight) {
     const height = Math.min(wanted.height, roomHeight);
     return { width, height, left: Math.round((roomWidth - width) / 2), top: Math.round((roomHeight - height) / 2) };
 }
-function sizedBefore() {
-    try {
-        return localStorage.getItem(sizedKey) !== null;
-    }
-    catch {
-        // A browser that keeps nothing for the page: sizing it at every opening is the lesser harm.
-        return false;
-    }
-}
-function noteSized() {
-    try {
-        localStorage.setItem(sizedKey, "1");
-    }
-    catch {
-        // Nothing kept: the next opening sizes the window again.
-    }
-}

package/dist/page/main.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "preact/jsx-runtime";
-// The page's start: the window the table opened sized the first time, the settings this browser remembers, shown before the first frame, then the app
+// The page's start: the window the table opened sized as it opens, the settings this browser remembers, shown before the first frame, then the app
 // drawn into its place.
 import { render } from "preact";
 import { App } from "./app/app.js";

package/dist/page/pieces/pieces.js

@@ -12,8 +12,11 @@ const folder = "/page/pieces/";
  */
 export function Piece({ letter, set, small = false }) {
     const chosen = useContext(ChosenSet);
-    const white = letter === letter.toUpperCase();
-    return _jsx(Drawing, { href: `${folder}${set ?? chosen}${small ? "-small" : ""}.svg#${white ? "w" : "b"}${letter.toUpperCase()}`, class: `piece ${white ? "white" : "black"}` });
+    return _jsx(Drawing, { href: pieceSymbol(letter, set ?? chosen, small), class: `piece ${letter === letter.toUpperCase() ? "white" : "black"}` });
+}
+/** Where a piece is drawn, by its FEN letter: its symbol in the set's map, or in the map of the set's small pieces. */
+export function pieceSymbol(letter, set, small = false) {
+    return `${folder}${set}${small ? "-small" : ""}.svg#${letter === letter.toUpperCase() ? "w" : "b"}${letter.toUpperCase()}`;
 }
 /** A piece as the notation shows it (D-50): the chosen set's small piece, White's white and Black's black. */
 export function Figurine({ letter, side }) {

package/dist/page/style.css

@@ -11,3 +11,4 @@
 @import "legend/legend.css";
 @import "dialogs/dialogs.css";
 @import "guide/guide.css";
+@import "guide/drawings/drawings.css";

package/dist/page/table/table.css

@@ -60,6 +60,75 @@
     font-size: 13px;
 }
 
+/* The header's mark of a newer Chesspal (D-108): its border as the other buttons', not the accent, which reads as focus; inside, a full accent disc with a
+   white arrow (Zoe) */
+.top .update-button .icon circle {
+    fill: var(--accent);
+    stroke: none;
+}
+
+.top .update-button .icon path {
+    stroke: var(--on-accent);
+}
+
+/* One button more: under 360px the header's buttons come a little closer, or the last one goes past the edge */
+@media (max-width: 359px) {
+    .top {
+        column-gap: 2px;
+    }
+}
+
+/* Its window, as narrow as the chat's; the spinner beside what npm does; npm's failure with a cross, and each command on its line */
+.dialog:has(> .update-offer) {
+    width: min(460px, calc(100vw - 32px));
+}
+
+.update-state {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+
+.update-failed p {
+    margin: 0 0 6px;
+    color: var(--ink);
+    font-size: 14px;
+}
+
+.update-cross {
+    color: var(--low-time);
+    font-weight: 700;
+}
+
+.update-failed code,
+.update-notice code {
+    display: block;
+    margin-top: 4px;
+    font-family: ui-monospace, monospace;
+    white-space: nowrap;
+    user-select: all;
+}
+
+/* On a chat's own page, news and no warning: the card's ground and an accent border, the words beside the × that hides it */
+.outdated.update-notice {
+    display: flex;
+    align-items: flex-start;
+    gap: 8px;
+    border-color: var(--accent);
+    background: var(--card);
+}
+
+.update-notice > span {
+    flex: 1;
+    min-width: 0;
+}
+
+.update-notice .icon-button {
+    flex: none;
+    width: 30px;
+    height: 30px;
+}
+
 /* Empty, the state takes no room */
 .chat-state:empty {
     display: none;