chesspal 0.3.5 → 0.3.6

package/dist/page/helps/helps.js

@@ -1,12 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "preact/jsx-runtime";
 import { useState } from "preact/hooks";
-import { Notch, Pushpin, Skewer } from "../board/marks.js";
 import { BadgeIcon, NoteIcon } from "../game/badges.js";
 import { FoldButton, useCardFold } from "../game/card-fold.js";
 import { Figurines } from "../game/move-list.js";
-import { Figurine } from "../pieces/pieces.js";
 import { Legend, Marked } from "../talk/talk.js";
-import { groupOf, pinSquares, riskSquares, squaresOf, strategyOf } from "./view.js";
+import { RowIcon } from "./rows.js";
+import { Strategy } from "./strategy.js";
+import { Tactics } from "./tactics.js";
 /**
  * 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
@@ -60,185 +60,7 @@ function Judged({ ply, text }) {
     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 ?? ""}`, 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
- * its pieces, each with its squares (Stefano).
- */
-function Tactics({ helps, opened, onOpen, onPoint, text }) {
-    const words = text.helpsCard;
-    const point = pointing(onPoint);
-    const calm = !helps.lines.some((line) => line.kind === "risk" || line.kind === "pin" || line.kind === "skewer");
-    return (_jsxs("ul", { class: "help-rows", children: [calm
-                ? (_jsxs("li", { class: "safe", children: [_jsxs(RowIcon, { children: [_jsx("circle", { cx: "8", cy: "8", r: "6.5" }), _jsx("path", { d: "M5.2 8.2l2 2 3.8-4" })] }), words.nothingAtRisk] }))
-                : null, helps.lines.map((line) => {
-                const key = line.kind === "loose" ? "loose" : `${line.kind} ${line.side}`;
-                const open = opened.has(key);
-                return (_jsxs("li", { class: `help-line ${line.kind} ${line.tone}${open ? " open" : ""}`, children: [_jsxs("button", { type: "button", class: "line-head", "aria-expanded": open, onClick: () => onOpen(key, !open), ...point(squaresOf(line)), children: [_jsx(LineIcon, { kind: line.kind }), _jsx("span", { class: "line-name", children: line.kind === "loose" ? words.loose : words.line(line.kind, line.side, helps.you, line.kind !== "check" || line.toMove) }), _jsx(LineCount, { line: line, helps: helps, words: words })] }), open ? _jsx(LineDetails, { line: line, helps: helps, point: point, text: text }) : null] }, key));
-            })] }));
-}
-/** What the pointer on a line or a cell does: it lights the line's squares; a touch keeps them lit until the position changes, as a square in the AI's words. */
-function pointing(onPoint) {
-    return (squares) => ({
-        onPointerEnter: () => onPoint(squares),
-        onPointerLeave: (event) => event.pointerType === "mouse" && onPoint([]),
-    });
-}
-/** A line's sign, as the board draws it: the corner of a piece at risk, the pushpin, the skewer; a check's plus, the loose pieces' i; its colour is the line's. */
-function LineIcon({ kind }) {
-    switch (kind) {
-        case "risk":
-            return _jsx(Notch, {});
-        case "pin":
-            return _jsx(Pushpin, {});
-        case "skewer":
-            return _jsx(Skewer, {});
-        case "loose":
-            return _jsx(InfoIcon, {});
-        case "check":
-            return (_jsxs(RowIcon, { children: [_jsx("circle", { cx: "8", cy: "8", r: "6.5" }), _jsx("path", { d: "M8 5v6M5 8h6" })] }));
-    }
-}
-/** How many: the loose pieces by side, each after its pawn, the player's first (Zoe); the others in one number. */
-function LineCount({ line, helps, words }) {
-    if (line.kind !== "loose") {
-        return _jsx("b", { class: "count", children: line.items.length });
-    }
-    const name = (side) => helps.you === undefined ? words[side] : side === helps.you ? words.yours : words.theirs;
-    const counts = helps.sides.map((side) => ({ side, count: line.items.filter((piece) => piece.side === side).length })).filter(({ count }) => count > 0);
-    return (_jsx("span", { class: "counts", children: counts.map(({ side, count }) => (_jsxs("span", { title: name(side), "aria-label": `${name(side)} ${count}`, children: [_jsx(Figurine, { letter: "P", side: side }), _jsx("b", { class: "count", children: count })] }, side))) }));
-}
-/** A line opened: its pieces, each lighting its own squares; the checks in figures; the loose pieces by side. */
-function LineDetails({ line, helps, point, text }) {
-    const words = text.helpsCard;
-    switch (line.kind) {
-        case "risk":
-            return (_jsx("ul", { class: "line-details", children: line.items.map((risk) => (_jsxs("li", { ...point(riskSquares(risk)), children: [text.piece(risk.piece.piece, risk.piece.side), " ", _jsx(Squares, { squares: [risk.piece.square] }), " \u00B7 ", words.attackers, ": ", _jsx(Squares, { squares: risk.piece.attackers }), risk.why === "undefended" ? null : (_jsxs(_Fragment, { children: [" ", "\u00B7 ", words.defenders, ": ", _jsx(Squares, { squares: risk.piece.defenders })] })), " \u00B7 ", words[risk.why]] }, risk.piece.square))) }));
-        case "pin":
-            return (_jsx("ul", { class: "line-details", children: line.items.map((pin) => (_jsxs("li", { ...point(pinSquares(pin)), children: [text.piece(pin.piece.piece, pin.piece.side), " ", _jsx(Squares, { squares: [pin.piece.square] }), " ", words.pinnedTo(pin.to.piece), " ", _jsx(Squares, { squares: [pin.to.square] }), ", ", words.pinnedBy(pin.by.piece), " ", _jsx(Squares, { squares: [pin.by.square] })] }, pin.piece.square))) }));
-        case "skewer":
-            return (_jsx("ul", { class: "line-details", children: line.items.map((skewer) => (_jsxs("li", { ...point(pinSquares(skewer)), children: [text.piece(skewer.piece.piece, skewer.piece.side), " ", _jsx(Squares, { squares: [skewer.piece.square] }), " ", words.skeweredBefore(skewer.to.piece), " ", _jsx(Squares, { squares: [skewer.to.square] }), ", ", words.pinnedBy(skewer.by.piece), " ", _jsx(Squares, { squares: [skewer.by.square] })] }, skewer.piece.square))) }));
-        case "check":
-            return (_jsx("p", { class: "line-details", children: line.items.map((check) => (_jsx("span", { class: "help-move", children: _jsx(Figurines, { san: check, side: line.side }) }, check))) }));
-        case "loose":
-            return (_jsx("p", { class: "line-details", children: helps.sides.map((side) => _jsx(Pieces, { pieces: line.items.filter((piece) => piece.side === side) }, side)) }));
-    }
-}
 /** The helps' sign before the card's title: a lifebuoy (Stefano). */
 function HelpsIcon() {
     return (_jsxs("svg", { class: "icon", viewBox: "0 0 24 24", "aria-hidden": "true", children: [_jsx("circle", { cx: "12", cy: "12", r: "8.5" }), _jsx("circle", { cx: "12", cy: "12", r: "3.5" }), _jsx("path", { d: "M6 6L9.5 9.5M18 6L14.5 9.5M6 18L9.5 14.5M18 18L14.5 14.5" })] }));
 }
-/** The icon before a line of facts, in its kind's colour (Stefano): a pin's link, nothing at risk's tick, a check's plus, the loose pieces' i. */
-function RowIcon({ children }) {
-    return (_jsx("span", { class: "row-icon", "aria-hidden": "true", children: _jsx("svg", { viewBox: "0 0 16 16", children: children }) }));
-}
-/** An i in a ring, before the loose pieces and the strategy's notes. */
-function InfoIcon() {
-    return (_jsxs(RowIcon, { children: [_jsx("circle", { cx: "8", cy: "8", r: "6.5" }), _jsx("path", { d: "M8 7.3V11M8 4.9v.1" })] }));
-}
-/** Pieces of one side, each its figure and its square. */
-function Pieces({ pieces }) {
-    return pieces.length === 0 ? null : (_jsx("span", { class: "help-pieces", children: pieces.map((piece) => (_jsxs("span", { class: "help-move", children: [_jsx(Figurine, { letter: piece.piece, side: piece.side }), _jsx("b", { class: "square-name", children: piece.square })] }, piece.square))) }));
-}
-function Squares({ squares }) {
-    return _jsx("b", { class: "square-name", children: squares.join(", ") });
-}
-/**
- * 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;
-    const profile = helps.strategy;
-    const { draw, pawnEnding } = profile;
-    const point = pointing(onPoint);
-    // A line opens under it at a click or a tap, on its name's meaning and each side's squares or files, since a phone has no pointer for a title (Rosa).
-    const [explained, setExplained] = useState(undefined);
-    const lines = strategyOf(profile);
-    const sideName = (side) => side === helps.you ? `${words[side]} ${words.you}` : words[side];
-    const notes = [
-        profile.oppositeBishops ? words.oppositeBishops : undefined,
-        draw.repetitions > 1 ? words.repetitions(draw.repetitions) : undefined,
-        draw.fiftyMovesLeft <= fiftyMovesShown ? words.fiftyMoves(draw.fiftyMovesLeft) : undefined,
-        draw.insufficient ? words.insufficient : undefined,
-        ...(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: [_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 game's three phases in a row of arrows: the current one full, those gone by lit, those to come not. */
-function Phases({ current, words }) {
-    return (_jsx("ol", { class: "phases", children: phases.map((phase, at) => (_jsx("li", { class: at < phases.indexOf(current) ? "done" : undefined, "aria-current": phase === current ? "step" : undefined, 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 = [{ 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 }) {
-    return items.length === 0 ? _jsx("span", { class: "none", children: "\u2013" }) : _jsx(_Fragment, { children: items.map((item) => _jsx("b", { class: "chip", children: item }, item)) });
-}
-/** A cell of the strategy (Stefano): a count in bold, a yes as a tick, nothing or not yet as a faint dash, no more as a faint cross: marks, not words. */
-function Cell({ cell, words }) {
-    const none = _jsx("span", { class: "none", children: "\u2013" });
-    if (typeof cell === "object") {
-        return cell.length === 0 ? none : _jsx("b", { class: "count", children: cell.length });
-    }
-    if (typeof cell === "number") {
-        return cell === 0 ? none : _jsx("b", { class: "count", children: cell });
-    }
-    if (typeof cell === "boolean") {
-        return cell
-            ? (_jsx("span", { class: "yes", role: "img", "aria-label": words.yes, title: words.yes, children: _jsx("svg", { viewBox: "0 0 16 16", children: _jsx("path", { d: "M3.5 8.5l3 3 6-7" }) }) }))
-            : none;
-    }
-    if (cell === "unknown") {
-        return none;
-    }
-    if (cell === "not-yet") {
-        return _jsx("span", { class: "none", role: "img", "aria-label": words.notYet, title: words.notYet, children: "\u2013" });
-    }
-    return cell === "no-more"
-        ? (_jsx("span", { class: "no", role: "img", "aria-label": words.noMore, title: words.noMore, children: _jsx("svg", { viewBox: "0 0 16 16", children: _jsx("path", { d: "M4.5 4.5l7 7M11.5 4.5l-7 7" }) }) }))
-        : _jsx("b", { class: "chip", children: cell });
-}

package/dist/page/helps/rows.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "preact/jsx-runtime";
+/** What the pointer on a line or a cell does: it lights the line's squares; a touch keeps them lit until the position changes, as a square in the AI's words. */
+export function pointing(onPoint) {
+    return (squares) => ({
+        onPointerEnter: () => onPoint(squares),
+        onPointerLeave: (event) => event.pointerType === "mouse" && onPoint([]),
+    });
+}
+/** The icon before a line of facts, in its kind's colour (Stefano): a pin's link, nothing at risk's tick, a check's plus, the loose pieces' i. */
+export function RowIcon({ children }) {
+    return (_jsx("span", { class: "row-icon", "aria-hidden": "true", children: _jsx("svg", { viewBox: "0 0 16 16", children: children }) }));
+}
+/** An i in a ring, before the loose pieces and the strategy's notes. */
+export function InfoIcon() {
+    return (_jsxs(RowIcon, { children: [_jsx("circle", { cx: "8", cy: "8", r: "6.5" }), _jsx("path", { d: "M8 7.3V11M8 4.9v.1" })] }));
+}

package/dist/page/helps/strategy.js

@@ -0,0 +1,105 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "preact/jsx-runtime";
+// The helps' strategy: the game's phase, the squares each side controls, and the positional facts in lines of a tile each, the player's side first.
+import { useState } from "preact/hooks";
+import { InfoIcon, pointing } from "./rows.js";
+import { groupOf, strategyOf } from "./view.js";
+/**
+ * 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).
+ */
+export function Strategy({ helps, onPoint, text }) {
+    const words = text.helpsCard;
+    const profile = helps.strategy;
+    const { draw, pawnEnding } = profile;
+    const point = pointing(onPoint);
+    // A line opens under it at a click or a tap, on its name's meaning and each side's squares or files, since a phone has no pointer for a title (Rosa).
+    const [explained, setExplained] = useState(undefined);
+    const lines = strategyOf(profile);
+    const sideName = (side) => side === helps.you ? `${words[side]} ${words.you}` : words[side];
+    const notes = [
+        profile.oppositeBishops ? words.oppositeBishops : undefined,
+        draw.repetitions > 1 ? words.repetitions(draw.repetitions) : undefined,
+        draw.fiftyMovesLeft <= fiftyMovesShown ? words.fiftyMoves(draw.fiftyMovesLeft) : undefined,
+        draw.insufficient ? words.insufficient : undefined,
+        ...(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: [_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 game's three phases in a row of arrows: the current one full, those gone by lit, those to come not. */
+function Phases({ current, words }) {
+    return (_jsx("ol", { class: "phases", children: phases.map((phase, at) => (_jsx("li", { class: at < phases.indexOf(current) ? "done" : undefined, "aria-current": phase === current ? "step" : undefined, 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 = [{ 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 }) {
+    return items.length === 0 ? _jsx("span", { class: "none", children: "\u2013" }) : _jsx(_Fragment, { children: items.map((item) => _jsx("b", { class: "chip", children: item }, item)) });
+}
+/** A cell of the strategy (Stefano): a count in bold, a yes as a tick, nothing or not yet as a faint dash, no more as a faint cross: marks, not words. */
+function Cell({ cell, words }) {
+    const none = _jsx("span", { class: "none", children: "\u2013" });
+    if (typeof cell === "object") {
+        return cell.length === 0 ? none : _jsx("b", { class: "count", children: cell.length });
+    }
+    if (typeof cell === "number") {
+        return cell === 0 ? none : _jsx("b", { class: "count", children: cell });
+    }
+    if (typeof cell === "boolean") {
+        return cell
+            ? (_jsx("span", { class: "yes", role: "img", "aria-label": words.yes, title: words.yes, children: _jsx("svg", { viewBox: "0 0 16 16", children: _jsx("path", { d: "M3.5 8.5l3 3 6-7" }) }) }))
+            : none;
+    }
+    if (cell === "unknown") {
+        return none;
+    }
+    if (cell === "not-yet") {
+        return _jsx("span", { class: "none", role: "img", "aria-label": words.notYet, title: words.notYet, children: "\u2013" });
+    }
+    return cell === "no-more"
+        ? (_jsx("span", { class: "no", role: "img", "aria-label": words.noMore, title: words.noMore, children: _jsx("svg", { viewBox: "0 0 16 16", children: _jsx("path", { d: "M4.5 4.5l7 7M11.5 4.5l-7 7" }) }) }))
+        : _jsx("b", { class: "chip", children: cell });
+}

package/dist/page/helps/tactics.js

@@ -0,0 +1,69 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "preact/jsx-runtime";
+import { Notch, Pushpin, Skewer } from "../board/marks.js";
+import { Figurines } from "../game/move-list.js";
+import { Figurine } from "../pieces/pieces.js";
+import { InfoIcon, pointing, RowIcon } from "./rows.js";
+import { pinSquares, riskSquares, squaresOf } from "./view.js";
+/**
+ * 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
+ * its pieces, each with its squares (Stefano).
+ */
+export function Tactics({ helps, opened, onOpen, onPoint, text }) {
+    const words = text.helpsCard;
+    const point = pointing(onPoint);
+    const calm = !helps.lines.some((line) => line.kind === "risk" || line.kind === "pin" || line.kind === "skewer");
+    return (_jsxs("ul", { class: "help-rows", children: [calm
+                ? (_jsxs("li", { class: "safe", children: [_jsxs(RowIcon, { children: [_jsx("circle", { cx: "8", cy: "8", r: "6.5" }), _jsx("path", { d: "M5.2 8.2l2 2 3.8-4" })] }), words.nothingAtRisk] }))
+                : null, helps.lines.map((line) => {
+                const key = line.kind === "loose" ? "loose" : `${line.kind} ${line.side}`;
+                const open = opened.has(key);
+                return (_jsxs("li", { class: `help-line ${line.kind} ${line.tone}${open ? " open" : ""}`, children: [_jsxs("button", { type: "button", class: "line-head", "aria-expanded": open, onClick: () => onOpen(key, !open), ...point(squaresOf(line)), children: [_jsx(LineIcon, { kind: line.kind }), _jsx("span", { class: "line-name", children: line.kind === "loose" ? words.loose : words.line(line.kind, line.side, helps.you, line.kind !== "check" || line.toMove) }), _jsx(LineCount, { line: line, helps: helps, words: words })] }), open ? _jsx(LineDetails, { line: line, helps: helps, point: point, text: text }) : null] }, key));
+            })] }));
+}
+/** A line's sign, as the board draws it: the corner of a piece at risk, the pushpin, the skewer; a check's plus, the loose pieces' i; its colour is the line's. */
+function LineIcon({ kind }) {
+    switch (kind) {
+        case "risk":
+            return _jsx(Notch, {});
+        case "pin":
+            return _jsx(Pushpin, {});
+        case "skewer":
+            return _jsx(Skewer, {});
+        case "loose":
+            return _jsx(InfoIcon, {});
+        case "check":
+            return (_jsxs(RowIcon, { children: [_jsx("circle", { cx: "8", cy: "8", r: "6.5" }), _jsx("path", { d: "M8 5v6M5 8h6" })] }));
+    }
+}
+/** How many: the loose pieces by side, each after its pawn, the player's first (Zoe); the others in one number. */
+function LineCount({ line, helps, words }) {
+    if (line.kind !== "loose") {
+        return _jsx("b", { class: "count", children: line.items.length });
+    }
+    const name = (side) => helps.you === undefined ? words[side] : side === helps.you ? words.yours : words.theirs;
+    const counts = helps.sides.map((side) => ({ side, count: line.items.filter((piece) => piece.side === side).length })).filter(({ count }) => count > 0);
+    return (_jsx("span", { class: "counts", children: counts.map(({ side, count }) => (_jsxs("span", { title: name(side), "aria-label": `${name(side)} ${count}`, children: [_jsx(Figurine, { letter: "P", side: side }), _jsx("b", { class: "count", children: count })] }, side))) }));
+}
+/** A line opened: its pieces, each lighting its own squares; the checks in figures; the loose pieces by side. */
+function LineDetails({ line, helps, point, text }) {
+    const words = text.helpsCard;
+    switch (line.kind) {
+        case "risk":
+            return (_jsx("ul", { class: "line-details", children: line.items.map((risk) => (_jsxs("li", { ...point(riskSquares(risk)), children: [text.piece(risk.piece.piece, risk.piece.side), " ", _jsx(Squares, { squares: [risk.piece.square] }), " \u00B7 ", words.attackers, ": ", _jsx(Squares, { squares: risk.piece.attackers }), risk.why === "undefended" ? null : (_jsxs(_Fragment, { children: [" ", "\u00B7 ", words.defenders, ": ", _jsx(Squares, { squares: risk.piece.defenders })] })), " \u00B7 ", words[risk.why]] }, risk.piece.square))) }));
+        case "pin":
+            return (_jsx("ul", { class: "line-details", children: line.items.map((pin) => (_jsxs("li", { ...point(pinSquares(pin)), children: [text.piece(pin.piece.piece, pin.piece.side), " ", _jsx(Squares, { squares: [pin.piece.square] }), " ", words.pinnedTo(pin.to.piece), " ", _jsx(Squares, { squares: [pin.to.square] }), ", ", words.pinnedBy(pin.by.piece), " ", _jsx(Squares, { squares: [pin.by.square] })] }, pin.piece.square))) }));
+        case "skewer":
+            return (_jsx("ul", { class: "line-details", children: line.items.map((skewer) => (_jsxs("li", { ...point(pinSquares(skewer)), children: [text.piece(skewer.piece.piece, skewer.piece.side), " ", _jsx(Squares, { squares: [skewer.piece.square] }), " ", words.skeweredBefore(skewer.to.piece), " ", _jsx(Squares, { squares: [skewer.to.square] }), ", ", words.pinnedBy(skewer.by.piece), " ", _jsx(Squares, { squares: [skewer.by.square] })] }, skewer.piece.square))) }));
+        case "check":
+            return (_jsx("p", { class: "line-details", children: line.items.map((check) => (_jsx("span", { class: "help-move", children: _jsx(Figurines, { san: check, side: line.side }) }, check))) }));
+        case "loose":
+            return (_jsx("p", { class: "line-details", children: helps.sides.map((side) => _jsx(Pieces, { pieces: line.items.filter((piece) => piece.side === side) }, side)) }));
+    }
+}
+/** Pieces of one side, each its figure and its square. */
+function Pieces({ pieces }) {
+    return pieces.length === 0 ? null : (_jsx("span", { class: "help-pieces", children: pieces.map((piece) => (_jsxs("span", { class: "help-move", children: [_jsx(Figurine, { letter: piece.piece, side: piece.side }), _jsx("b", { class: "square-name", children: piece.square })] }, piece.square))) }));
+}
+function Squares({ squares }) {
+    return _jsx("b", { class: "square-name", children: squares.join(", ") });
+}

package/dist/page/layout/header.js

@@ -1,22 +1,65 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "preact/jsx-runtime";
+import { useEffect, useRef, useState } from "preact/hooks";
 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
+ * and resignation in a game going on (D-65), which the header asks to confirm in the place of the word and the commands, a new game once the page has the folder's, the command that turns the board round and says whether it is
  * 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, 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 flag pressed asks the player in the header, as the AI's draw offer does; a game that ends meanwhile drops the question.
+    const [resigning, setResigning] = useState(false);
+    const asking = resigning && actions !== undefined;
+    // After "play on" the flag takes the focus back.
+    const backToFlag = useRef(false);
+    useEffect(() => {
+        if (actions === undefined) {
+            setResigning(false);
+        }
+    }, [actions === undefined]);
+    const answer = (resign) => {
+        setResigning(false);
+        backToFlag.current = !resign;
+        if (resign) {
+            actions?.onResign();
+        }
+    };
+    const shownKind = asking ? "over" : kind;
+    const shownVerdict = asking ? text.resignGame : verdict;
+    const shownWho = asking ? undefined : who;
+    return (_jsxs("header", { class: "top", children: [_jsx(Torretta, { size: 34 }), _jsx("b", { class: "title", children: "Chesspal" }), _jsxs("p", { class: `verdict${shownKind === undefined ? "" : ` ${shownKind}`}`, role: "status", children: [shownVerdict === undefined || shownKind === undefined ? null : _jsx(Icon, { class: "kind", children: kindIcons[shownKind] }), shownWho === undefined || shownVerdict === undefined ? shownVerdict : (_jsxs(_Fragment, { children: [_jsx("span", { class: "ai-name", children: shownWho }), _jsx("span", { children: shownVerdict })] }))] }), actions === undefined ? null : asking ? _jsx(ResignQuestion, { onAnswer: answer, text: text }) : _jsx(Actions, { actions: actions, onResign: () => setResigning(true), backToFlag: backToFlag, 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 }) {
-    const { offer, canOffer, onOffer, onAnswer, onResign } = actions;
+/** The answer to the AI's draw offer while it stands, else the player's own offer; then the flag, which asks before the player resigns. */
+function Actions({ actions, onResign, backToFlag, text }) {
+    const { offer, canOffer, onOffer, onAnswer } = actions;
+    const flag = useRef(null);
+    useEffect(() => {
+        if (backToFlag.current) {
+            backToFlag.current = false;
+            flag.current?.focus();
+        }
+    }, []);
     return (_jsxs(_Fragment, { children: [offer === "ai"
                 ? (_jsxs(_Fragment, { children: [_jsxs("button", { class: "command answer", type: "button", title: text.acceptDraw, onClick: () => onAnswer(true), children: [_jsx(Icon, { class: "accept", children: _jsx("path", { d: "M5 12.5L10 17L19 7" }) }), _jsx("span", { children: text.acceptDraw })] }), _jsxs("button", { class: "command answer", type: "button", title: text.declineDrawTitle, onClick: () => onAnswer(false), children: [_jsx(Icon, { class: "decline", children: _jsx("path", { d: "M7 7L17 17M17 7L7 17" }) }), _jsx("span", { children: text.declineDraw })] })] }))
-                : (_jsxs("button", { class: "command", type: "button", title: offer === "player" ? text.drawOffered : canOffer ? text.offerDraw : text.offerDrawWhen, "aria-pressed": offer === "player", "aria-disabled": !canOffer, onClick: offer === "player" ? undefined : onOffer, children: [_jsx(Icon, { class: "half", children: _jsx("path", { d: "M5 7L7.5 5V11M16 5L8 19M13.5 14.5C13.5 13 17.5 12.5 17.5 15C17.5 16.5 13.5 18 13.5 19H18" }) }), _jsx("span", { children: text.offerDraw })] })), _jsxs("button", { class: "command", type: "button", title: text.resign, onClick: onResign, children: [_jsx(Icon, { class: "resign", children: _jsx("path", { d: "M6 21V4M6 4H18L15.5 8.5L18 13H6" }) }), _jsx("span", { children: text.resign })] })] }));
+                : (_jsxs("button", { class: "command", type: "button", title: offer === "player" ? text.drawOffered : canOffer ? text.offerDraw : text.offerDrawWhen, "aria-pressed": offer === "player", "aria-disabled": !canOffer, onClick: offer === "player" ? undefined : onOffer, children: [_jsx(Icon, { class: "half", children: _jsx("path", { d: "M5 7L7.5 5V11M16 5L8 19M13.5 14.5C13.5 13 17.5 12.5 17.5 15C17.5 16.5 13.5 18 13.5 19H18" }) }), _jsx("span", { children: text.offerDraw })] })), _jsxs("button", { ref: flag, class: "command", type: "button", title: text.resign, onClick: onResign, children: [_jsx(Icon, { class: "resign", children: _jsx("path", { d: "M6 21V4M6 4H18L15.5 8.5L18 13H6" }) }), _jsx("span", { children: text.resign })] })] }));
+}
+/** The question the flag asks, as the answer to a draw offer: resign, or play on, which has the focus and Esc too. */
+function ResignQuestion({ onAnswer, text }) {
+    const playOn = useRef(null);
+    useEffect(() => {
+        playOn.current?.focus();
+        const escape = (event) => {
+            if (event.key === "Escape") {
+                onAnswer(false);
+            }
+        };
+        window.addEventListener("keydown", escape);
+        return () => window.removeEventListener("keydown", escape);
+    }, []);
+    return (_jsxs(_Fragment, { children: [_jsxs("button", { class: "command answer", type: "button", title: text.resign, onClick: () => onAnswer(true), children: [_jsx(Icon, { class: "accept", children: _jsx("path", { d: "M5 12.5L10 17L19 7" }) }), _jsx("span", { children: text.resign })] }), _jsxs("button", { ref: playOn, class: "command answer", type: "button", title: text.keepPlaying, onClick: () => onAnswer(false), children: [_jsx(Icon, { class: "decline", children: _jsx("path", { d: "M7 7L17 17M17 7L7 17" }) }), _jsx("span", { children: text.keepPlaying })] })] }));
 }
 // A pair of scales, a flag, two hands, a pause.
 const kindIcons = {

package/dist/page/layout/layout.css

@@ -975,12 +975,14 @@
         margin: 0;
     }
 
+    /* The steps, and under them the chart of the game */
     .board-steps {
-        display: block;
+        display: grid;
+        gap: var(--between);
         grid-area: steps;
     }
 
-    .app:has(.talk.studied) .side .steps {
+    .app:has(.talk.studied) .side :is(.steps, .lead-card) {
         display: none;
     }
 }
@@ -1041,3 +1043,16 @@
         justify-content: center;
     }
 }
+
+/* On the narrowest phones a table's header holds one more button, the newer Chesspal's: the buttons draw a little closer and smaller, the picture stays on the line */
+@media (max-width: 359px) {
+    .top {
+        column-gap: 2px;
+    }
+
+    .top .command,
+    .top .icon-button {
+        width: 30px;
+        height: 30px;
+    }
+}

package/dist/page/layout/window.js

@@ -5,15 +5,15 @@ const mark = "opened";
 const wanted = { width: 1600, height: 900 };
 /** 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);
+    const address = new URL(window.location.href);
     if (!address.searchParams.has(mark)) {
         return;
     }
     address.searchParams.delete(mark);
-    history.replaceState(history.state, "", address.pathname + address.search + address.hash);
-    const place = windowPlace(screen.availWidth, screen.availHeight);
+    window.history.replaceState(window.history.state, "", address.pathname + address.search + address.hash);
+    const place = windowPlace(window.screen.availWidth, window.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;
+    const { availLeft = 0, availTop = 0 } = window.screen;
     window.resizeTo(place.width, place.height);
     window.moveTo(availLeft + place.left, availTop + place.top);
 }