chesspal 0.3.0 → 0.3.2

package/dist/page/helps/helps.css

@@ -1,4 +1,4 @@
-/* The helps (D-78): their signs on the board, their card, the coach and the strategy's table */
+/* The helps (D-78): their signs on the board, their card, the coach and the strategy's rows */
 
 /* A piece at risk: a corner folded, bottom left, the square's free corner; in ink, or in the player's red and green (D-91) */
 .help-notch {
@@ -362,17 +362,11 @@
     content: "▾";
 }
 
-/* A finger needs a taller line, and the whole of a strategy's name (Zoe) */
+/* A finger needs a taller line (Zoe) */
 @media (pointer: coarse) {
     .help-rows .line-head {
         padding-block: 7px;
     }
-
-    .strategy-table .term {
-        display: block;
-        width: 100%;
-        padding: 6px 0;
-    }
 }
 
 .help-rows .line-head:hover,
@@ -552,31 +546,81 @@
     border-color: var(--accent);
 }
 
-.strategy-table {
-    width: 100%;
-    border-collapse: collapse;
-    font-size: 12.5px;
+/* The strategy (Stefano): the phases, the bar of the squares controlled, the lines in groups apart only by the gap, each a name and its tile, then the notes */
+.strategy {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+}
+
+/* The three phases in a row, joined by a thin line; the current one in a pill */
+.phases {
+    display: flex;
+    align-items: center;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    font-size: 12px;
     color: var(--soft);
 }
 
-.strategy-table th,
-.strategy-table td {
-    padding: 2px 4px;
-    text-align: left;
-    font-weight: 400;
+.phases li + li {
+    flex: 1 1 auto;
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    margin-left: 6px;
+}
+
+.phases li + li::before {
+    content: "";
+    flex: 1;
+    height: 1px;
+    background: var(--line);
 }
 
-.strategy-table thead th {
+.phases li span {
+    padding: 1px 9px;
+    white-space: nowrap;
+}
+
+.phases li[aria-current="step"] span {
+    border-radius: 999px;
+    background: color-mix(in srgb, var(--accent) 20%, transparent);
     color: var(--ink);
     font-weight: 700;
 }
 
-.strategy-table tbody tr + tr {
-    border-top: 1px solid var(--line);
+/* A group of lines, 3px apart (1px of gap and the heads' 1px of padding), with no line between them */
+.strategy-rows {
+    display: flex;
+    flex-direction: column;
+    gap: 1px;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    font-size: 12.5px;
+    color: var(--soft);
+}
+
+.strategy-rows .row-head {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) auto;
+    align-items: center;
+    gap: 8px;
+    margin: 0 -4px;
+    padding: 1px 4px;
+    border-radius: 6px;
+}
+
+/* A soft ground under the pointer and on the open line, as the tactics' lines have */
+.strategy-rows .row-head:hover,
+.strategy-rows li.open .row-head {
+    background: color-mix(in srgb, var(--soft) 12%, transparent);
 }
 
 /* A term with its meaning under the pointer, and under its line at a click or a tap (Rosa). */
-.strategy-table .term {
+.strategy-rows .term {
     padding: 0;
     border: 0;
     background: none;
@@ -588,60 +632,32 @@
     cursor: help;
 }
 
-.strategy-table tbody tr.meaning {
-    border-top: 0;
+/* A finger needs the whole of a strategy's name, after the base rule so that it wins */
+@media (pointer: coarse) {
+    .strategy-rows .term {
+        display: block;
+        width: 100%;
+        padding: 6px 0;
+    }
 }
 
-.strategy-table tr.meaning td {
-    padding-bottom: 4px;
+.strategy-rows li.open .term {
+    color: var(--ink);
+}
+
+.strategy-rows .meaning {
+    padding: 2px 0 4px;
     font-size: 12px;
     font-style: italic;
 }
 
 /* Under the meaning, each side's squares or files (Stefano) */
-.strategy-table tr.meaning .listed {
+.strategy-rows .meaning .listed {
     display: block;
     margin-top: 3px;
     font-style: normal;
 }
 
-/* The table's groups under their figure, in the accent; the sides' heads with their pawn */
-.strategy-table tr.group th {
-    padding-top: 7px;
-    color: var(--accent);
-    font-size: 12px;
-    font-weight: 700;
-}
-
-.strategy-table tbody tr.group + tr {
-    border-top: 0;
-}
-
-/* The strategy (Stefano): the phase in a pill and the open files on top, then the bar of the squares controlled, the table in groups, the notes */
-.strategy {
-    display: flex;
-    flex-direction: column;
-    gap: 8px;
-}
-
-.strategy-head {
-    display: flex;
-    flex-wrap: wrap;
-    align-items: center;
-    gap: 4px 10px;
-    margin: 0;
-    font-size: 12px;
-    color: var(--soft);
-}
-
-.strategy .phase {
-    padding: 1px 9px;
-    border-radius: 999px;
-    background: color-mix(in srgb, var(--accent) 20%, transparent);
-    color: var(--ink);
-    font-weight: 700;
-}
-
 /* Squares and files in chips, a count in bold, a yes as a green tick, nothing as a faint dash, no more as a faint cross */
 .strategy .chip {
     display: inline-block;
@@ -689,23 +705,12 @@
 }
 
 /* The squares each side controls: White's in white, both in grey, Black's in black, each as long as its count */
-.control {
-    display: grid;
-    gap: 3px;
-    font-size: 11px;
-    color: var(--soft);
-}
-
-.control-title {
-    font-size: 12px;
-}
-
 .control-bar {
     display: flex;
     height: 18px;
-    border: 1px solid var(--line);
     border-radius: 5px;
     overflow: hidden;
+    font-size: 11px;
     font-weight: 700;
 }
 
@@ -716,28 +721,67 @@
     min-width: 20px;
 }
 
-.control-bar .white {
+/* The thread that keeps the black half in sight on the dark theme, as the lead bar's */
+.control-bar,
+.row-tile {
+    border: 1px solid rgb(138 144 153 / 0.6);
+}
+
+/* The bar's colours, which the lines' tiles share */
+.control-bar .white,
+.row-tile .white {
     background: #f4f6f8;
     color: var(--fixed-ink);
 }
 
-.control-bar .both {
+.control-bar .both,
+.row-tile .both {
     background: #8d98a7;
-    color: #fff;
+    color: var(--fixed-ink);
 }
 
-.control-bar .black {
+.control-bar .black,
+.row-tile .black {
     background: var(--fixed-ink);
     color: #f4f6f8;
 }
 
-.control-legend {
+/* A line's tile: a half for each side, the player's first; the open files in one half as wide as the two */
+.row-tile {
     display: flex;
-    justify-content: space-between;
+    height: 20px;
+    border-radius: 5px;
+    overflow: hidden;
+    font-size: 12px;
+    font-weight: 700;
+    font-variant-numeric: tabular-nums;
+}
+
+.row-tile > span {
+    display: grid;
+    place-items: center;
+    width: 42px;
+}
+
+.row-tile > .both {
+    width: 84px;
+}
+
+/* In a tile the marks take the half's colour, but the tick, green */
+.strategy .row-tile .count {
+    color: inherit;
 }
 
-.strategy-table .figurine {
-    margin-right: 3px;
+.strategy .row-tile .chip {
+    margin: 0;
+    padding: 0;
+    background: none;
+    color: inherit;
+}
+
+.strategy .row-tile .no svg {
+    stroke: currentColor;
+    opacity: 0.6;
 }
 
 /* On a phone, or in a narrow window, the map of the squares and the coach's hint go under the board, out of the helps' card */

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).
  */
@@ -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 }) {