chesspal 0.2.3 → 0.3.0

package/dist/page/layout/layout.css

@@ -553,6 +553,83 @@
     flex: none;
 }
 
+/* Beside the board the talk is a row a side, each half the column, or what its card, note and box need when that is more: only the words give way, and
+   never spill over the other side (Stefano, Zoe). Turned round, the player's row comes first. In analysis the AI's note keeps its height while the thread
+   gives way, and scrolls by itself only when nothing else is left to give */
+@media (min-width: 841px) {
+    .talk {
+        display: grid;
+        grid-template-rows: minmax(min-content, 1fr) minmax(min-content, 1fr);
+        container: talk / size;
+    }
+
+    .ai-block,
+    .you-block {
+        max-height: none;
+    }
+
+    /* The player's card stays by the board's edge when the words above it go */
+    .you-block {
+        justify-content: flex-end;
+    }
+
+    .flipped .ai-block {
+        grid-row: 2;
+    }
+
+    .flipped .you-block {
+        grid-row: 1;
+    }
+
+    /* The words take the room left, and ask none of their own */
+    .says,
+    .sent {
+        flex: 1 1 0;
+        contain: size;
+    }
+
+    .talk.studied {
+        grid-template-rows: minmax(0, max-content) minmax(min-content, 1fr);
+        overflow: hidden;
+    }
+
+    .flipped .talk.studied {
+        grid-template-rows: minmax(min-content, 1fr) minmax(0, max-content);
+    }
+
+    .talk.studied > .ai-block > .ai-note {
+        flex: 0 1 auto;
+        min-height: 0;
+        overflow-y: auto;
+    }
+
+    /* On a short column the table's note keeps its buttons and drops the commands to type, then the box and the words go: they wait for a chat anyway.
+       In analysis the cards are taller and the AI's note needs room too */
+    @container talk (max-height: 560px) {
+        .opener-command {
+            display: none;
+        }
+    }
+
+    @container talk (max-height: 500px) {
+        .ai-block:has(> .opener) + .you-block > :is(.sent, .compose) {
+            display: none;
+        }
+    }
+
+    @container talk (max-height: 640px) {
+        .talk.studied .opener-command {
+            display: none;
+        }
+    }
+
+    @container talk (max-height: 580px) {
+        .talk.studied > .ai-block:has(> .opener) + .you-block > .chat {
+            display: none;
+        }
+    }
+}
+
 /* The game's column, which folds from its tab */
 .side {
     grid-area: side;
@@ -580,15 +657,22 @@
     align-items: center;
 }
 
-/* Between games the chip is never cut: beside it the Torretta stands for the name at every width, and the flip keeps only its icon */
+/* Between games and in analysis the Torretta alone stands for the name, at every width, to leave the chip its room */
 @media (min-width: 841px) {
-    .top:has(.verdict.idle, .verdict.over) .title {
+    .top:has(.verdict.idle, .verdict.over, .verdict.analysis) .title {
         display: none;
     }
 
-    .top:has(.verdict.idle, .verdict.over) .verdict {
+    .top:has(.verdict.idle, .verdict.over, .verdict.analysis) .verdict {
         margin-right: auto;
     }
+
+    /* Over a board of 760 px or less the sound and the theme leave their room to the chip, and stay in the settings; in a game they come back */
+    @container (max-width: 760px) {
+        .top:has(.verdict.idle, .verdict.over, .verdict.analysis) :is(.sound-button, .theme-button) {
+            display: none;
+        }
+    }
 }
 
 /* Beside the board, a column's content keeps its width and its outer edge while the column folds: it slides under the board, the text never flows again */
@@ -751,10 +835,31 @@
         display: none;
     }
 
-    /* A game in analysis, turned round or not: the card on top, the board, its steps under the thumb, the Torretta's note, the card below, the moves (Zoe) */
-    .app:has(.talk.studied),
+    /* A game in analysis: the card on top, the board, its steps under the thumb, the Torretta's note, the talk, the card below, the moves; turned round,
+       the player's card on top (Zoe) */
+    .app:has(.talk.studied) {
+        grid-template-areas: "head" "ai" "board" "steps" "note" "chat" "you" "side";
+    }
+
     .app.flipped:has(.talk.studied) {
-        grid-template-areas: "head" "ai" "board" "steps" "note" "you" "side";
+        grid-template-areas: "head" "you" "board" "steps" "note" "chat" "ai" "side";
+    }
+
+    .talk.studied > .you-block {
+        display: contents;
+    }
+
+    .talk.studied > .you-block > :not(.chat) {
+        grid-area: you;
+    }
+
+    /* The talk, under the note: half the screen of it at most */
+    .talk.studied .chat {
+        grid-area: chat;
+    }
+
+    .talk.studied .sent {
+        max-height: 50vh;
     }
 
     .talk.studied > .ai-block {
@@ -771,9 +876,29 @@
     }
 
     /* With no chat listening, its note comes before the Torretta's (Zoe) */
-    .app:has(.talk.studied > .ai-block > .asleep),
+    .app:has(.talk.studied > .ai-block > .asleep) {
+        grid-template-areas: "head" "ai" "board" "steps" "asleep" "note" "chat" "you" "side";
+    }
+
     .app.flipped:has(.talk.studied > .ai-block > .asleep) {
-        grid-template-areas: "head" "ai" "board" "steps" "asleep" "note" "you" "side";
+        grid-template-areas: "head" "you" "board" "steps" "asleep" "note" "chat" "ai" "side";
+    }
+
+    /* With the helps on, their map under the steps: an area the grid lacks would put it in a column of its own, off the screen */
+    .app:has(.talk.studied):has(.board-map) {
+        grid-template-areas: "head" "ai" "board" "steps" "map" "note" "chat" "you" "side";
+    }
+
+    .app.flipped:has(.talk.studied):has(.board-map) {
+        grid-template-areas: "head" "you" "board" "steps" "map" "note" "chat" "ai" "side";
+    }
+
+    .app:has(.talk.studied > .ai-block > .asleep):has(.board-map) {
+        grid-template-areas: "head" "ai" "board" "steps" "map" "asleep" "note" "chat" "you" "side";
+    }
+
+    .app.flipped:has(.talk.studied > .ai-block > .asleep):has(.board-map) {
+        grid-template-areas: "head" "you" "board" "steps" "map" "asleep" "note" "chat" "ai" "side";
     }
 
     .talk.studied > .ai-block > .asleep {
@@ -810,12 +935,18 @@
     box-shadow: 0 8px 24px rgb(0 0 0 / 16%);
 }
 
-/* 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 */
+/* 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) {
     .top {
         column-gap: 4px;
     }
 
+    .top .sound-button,
+    .top .theme-button {
+        display: none;
+    }
+
     .top .title {
         display: none;
     }

package/dist/page/layout/window.js

@@ -0,0 +1,45 @@
+// 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 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. */
+export function fitOpenedWindow() {
+    const address = new URL(location.href);
+    if (!address.searchParams.has(mark)) {
+        return;
+    }
+    address.searchParams.delete(mark);
+    history.replaceState(history.state, "", address.pathname + address.search + address.hash);
+    if (sizedBefore()) {
+        return;
+    }
+    const place = windowPlace(screen.availWidth, screen.availHeight);
+    window.resizeTo(place.width, place.height);
+    window.moveTo(place.left, place.top);
+    noteSized();
+}
+/** 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) {
+    const width = Math.min(wanted.width, roomWidth);
+    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/legend/legend.css

@@ -0,0 +1,203 @@
+/* The legend of the marks on the board (D-99): a ? beside the map's button, and under it the marks the board shows now, each as the board draws it */
+.marks-legend {
+    position: relative;
+    display: flex;
+}
+
+/* The ? in a ring, drawn in lines as the eye shut; lit while the legend is open */
+.legend-button svg {
+    width: 15px;
+    height: 15px;
+    fill: none;
+    stroke: currentColor;
+    stroke-width: 1.4;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+}
+
+.legend-button[aria-expanded="true"] {
+    background: var(--accent);
+    color: var(--on-accent);
+    border-color: var(--accent);
+}
+
+/* Over the cards under it, the board in sight beside it; placed under its button by the page, since the cards clip what overflows them */
+.legend-panel {
+    position: fixed;
+    z-index: 20;
+    width: 300px;
+    max-width: calc(100vw - 32px);
+    overflow-y: auto;
+    padding: 10px 10px 8px;
+    border: 1px solid var(--line);
+    border-radius: 10px;
+    background: var(--card);
+    box-shadow: 0 8px 28px rgba(16, 28, 44, 0.22);
+    color: var(--ink);
+    font-size: 13.5px;
+    font-weight: normal;
+    text-align: left;
+}
+
+.legend-title {
+    margin: 0 0 6px 6px;
+    color: var(--soft);
+    font-size: 12px;
+    font-weight: 600;
+}
+
+.legend-none {
+    margin: 0 6px 4px;
+    color: var(--soft);
+}
+
+.legend-panel ul {
+    display: grid;
+    gap: 2px;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+}
+
+.legend-panel li {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    min-height: 30px;
+    padding: 2px 6px;
+    border-radius: 6px;
+}
+
+.legend-panel li:hover {
+    background: color-mix(in srgb, var(--accent) 10%, transparent);
+}
+
+/* The marks in a column of their own, so that the names line up */
+.legend-mark {
+    flex: none;
+    display: flex;
+    justify-content: center;
+    width: 48px;
+}
+
+/* Names start with a capital, whoever's words they are */
+.legend-name::first-letter {
+    text-transform: uppercase;
+}
+
+.legend-name small {
+    margin-left: 6px;
+    color: var(--soft);
+    font-size: 12px;
+}
+
+/* A square of the board's dark colour, or two, under the marks the board draws on its squares */
+.legend-tile {
+    position: relative;
+    display: block;
+    width: 24px;
+    height: 24px;
+    border-radius: 3px;
+    background: var(--dark-square);
+}
+
+.legend-tile.wide {
+    width: 48px;
+}
+
+/* A square rung as the AI rings one: the arrival square when an arrow goes with it */
+.legend-ring {
+    position: absolute;
+    top: 0;
+    right: 0;
+    width: 24px;
+    height: 24px;
+    border-radius: 3px;
+    box-shadow: inset 0 0 0 3px var(--ring), inset 0 0 0 4.5px rgba(255, 255, 255, 0.8);
+}
+
+.legend-ring.green {
+    --ring: var(--drawn-green);
+}
+
+.legend-ring.red {
+    --ring: var(--drawn-red);
+}
+
+.legend-ring.yellow {
+    --ring: var(--drawn-yellow);
+}
+
+.legend-ring.blue {
+    --ring: var(--drawn-blue);
+}
+
+/* The board's own marks, sized for a square of 24 pixels */
+.legend-tile .helps-layer,
+.legend-tile .arrows {
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+    aspect-ratio: auto;
+}
+
+.legend-tile .help-notch {
+    width: 14px;
+    height: 14px;
+}
+
+.legend-tile .help-pin,
+.legend-tile .help-skewer {
+    height: 17px;
+}
+
+.legend-mark .move-badge {
+    width: 20px;
+    height: 20px;
+}
+
+.legend-mark .badge {
+    position: static;
+    width: 20px;
+    height: 20px;
+    font-size: 13px;
+    box-shadow: 0 0 0 1.5px #fff, 0 1px 3px rgba(0, 0, 0, 0.4);
+}
+
+.legend-mark .control-count {
+    position: static;
+    translate: none;
+    font-size: 12px;
+}
+
+/* On a phone the ? is the last on the right under the board, and the legend opens below the board's row, as wide as it, never over the board */
+.board-map .marks-legend {
+    position: static;
+    float: right;
+    margin-left: 8px;
+}
+
+.board-map .marks-legend .hold-button {
+    float: none;
+    margin-left: 0;
+}
+
+.legend-panel.under {
+    position: absolute;
+    top: calc(100% + 6px);
+    right: 0;
+    left: 0;
+    width: auto;
+    max-width: none;
+}
+
+@media (max-width: 840px) {
+    .board-map {
+        position: relative;
+    }
+
+    .helps-card .marks-legend {
+        display: none;
+    }
+}

package/dist/page/legend/legend.js

@@ -0,0 +1,169 @@
+import { jsx as _jsx, jsxs as _jsxs } from "preact/jsx-runtime";
+import { useEffect, useId, useLayoutEffect, useRef, useState } from "preact/hooks";
+import { Badge, Notch, Pushpin, Skewer } from "../board/marks.js";
+import { BadgeIcon } from "../game/badges.js";
+/**
+ * The ? beside the map's button, and the legend it opens: a click, the ? key, Esc or a click elsewhere closes it, and puts out the squares it lit; while
+ * open it follows the board. The pointer on a line lights the squares that bear its mark, as a square in the AI's words. Under the board on a phone,
+ * `under` opens it below the board's row, never over the board.
+ */
+export function MarksLegend({ rows, open, onOpen, drawn, onPoint, under = false, text }) {
+    const button = useRef(null);
+    const panel = useId();
+    useClosing(open, () => onOpen(false));
+    usePutOut(open, onPoint);
+    const place = usePlace(button, open && !under);
+    const words = text.legend;
+    const shown = open && (under || place !== undefined);
+    return (_jsxs("span", { class: "marks-legend", children: [_jsx("button", { ref: button, type: "button", class: "hold-button legend-button", "aria-expanded": open, "aria-controls": shown ? panel : undefined, "aria-label": words.title, title: words.hint, onClick: () => onOpen(!open), children: _jsxs("svg", { viewBox: "0 0 16 16", "aria-hidden": "true", children: [_jsx("circle", { cx: "8", cy: "8", r: "6.5" }), _jsx("path", { d: "M6.1 6.3a1.95 1.95 0 1 1 2.7 1.8c-.5.2-.8.6-.8 1.1v.5M8 11.4v.1" })] }) }), shown
+                ? (_jsxs("section", { id: panel, class: `legend-panel${under ? " under" : ""}`, "aria-label": words.title, style: under ? undefined : place, children: [_jsx("p", { class: "legend-title", children: words.title }), rows.length === 0 ? _jsx("p", { class: "legend-none", children: words.none }) : (_jsx("ul", { children: rows.map((row) => (_jsxs("li", { onPointerEnter: () => onPoint(row.squares), onPointerLeave: (event) => event.pointerType === "mouse" && onPoint([]), children: [_jsx("span", { class: "legend-mark", children: _jsx(Mark, { row: row }) }), _jsx(Name, { row: row, drawn: drawn, text: text })] }, keyOf(row)))) }))] }))
+                : null] }));
+}
+/** A mark as the board draws it, on a square of the board's colour where the board draws it on one. */
+function Mark({ row }) {
+    switch (row.kind) {
+        case "badge":
+            return _jsx(BadgeIcon, { badge: row.badge });
+        case "risk":
+            return (_jsx(Tile, { children: _jsx(Notch, { tone: row.tone }) }));
+        case "pin":
+            return (_jsx(Tile, { children: _jsx(Pushpin, { tone: row.tone }) }));
+        case "skewer":
+            return (_jsx(Tile, { children: _jsx(Skewer, { tone: row.tone }) }));
+        case "pinLine":
+        case "skewerLine":
+            return (_jsx(Tile, { wide: true, children: _jsx("svg", { class: "helps-layer", viewBox: "0 0 2 1", children: _jsxs("g", { class: row.kind === "pinLine" ? "pin" : "skewer", children: [_jsx("line", { class: "halo", x1: "0.2", y1: "0.5", x2: "1.8", y2: "0.5" }), _jsx("line", { x1: "0.2", y1: "0.5", x2: "1.8", y2: "0.5" })] }) }) }));
+        case "drawn":
+            return (_jsxs(Tile, { wide: row.arrow, children: [row.ring ? _jsx("span", { class: `legend-ring ${row.colour}` }) : null, row.arrow
+                        ? (_jsxs("svg", { class: "arrows drawn", viewBox: "0 0 2 1", children: [_jsx("path", { class: "edge", d: arrowShaft }), _jsx("polygon", { class: "edge", points: arrowHead }), _jsxs("g", { class: row.colour, children: [_jsx("path", { d: arrowShaft }), _jsx("polygon", { points: arrowHead })] })] }))
+                        : null] }));
+        case "control":
+            return (_jsxs("span", { class: "control-count", "aria-hidden": "true", children: [_jsx("b", { class: "white", children: "2" }), _jsx("b", { class: "black", children: "1" })] }));
+        case "end":
+            return _jsx(Badge, { kind: row.sign });
+    }
+}
+function Name({ row, drawn, text }) {
+    const words = text.legend;
+    switch (row.kind) {
+        case "badge":
+            return _jsx(Named, { name: text.badges[row.badge], detail: words.badge });
+        case "risk":
+        case "pin":
+        case "skewer":
+            return _jsx(Named, { name: words.sign(row.kind, row.tone) });
+        case "pinLine":
+            return _jsx(Named, { name: words.pinLine });
+        case "skewerLine":
+            return _jsx(Named, { name: words.skewerLine });
+        case "drawn":
+            return _jsx(Named, { name: drawn.words[row.colour], detail: drawn.by });
+        case "control":
+            return _jsx(Named, { name: words.control });
+        case "end":
+            return _jsx(Named, { name: words.ends[row.sign] });
+    }
+}
+function Named({ name, detail }) {
+    return (_jsxs("span", { class: "legend-name", children: [name, detail === undefined ? null : _jsx("small", { children: detail })] }));
+}
+/** A square, or two side by side, of the board's dark colour, for the marks the board draws on its squares. */
+function Tile({ wide = false, children }) {
+    return _jsx("span", { class: `legend-tile${wide ? " wide" : ""}`, "aria-hidden": "true", children: children });
+}
+/** Puts out the squares the legend lit when it closes, however it closes. */
+function usePutOut(open, onPoint) {
+    const wasOpen = useRef(open);
+    useEffect(() => {
+        if (wasOpen.current && !open) {
+            onPoint([]);
+        }
+        wasOpen.current = open;
+    }, [open]);
+}
+/**
+ * Closes the legend at Esc and at a press outside it. The page has a legend in the card and one under the board for a phone, one of them hidden: a press on
+ * either is no press outside.
+ */
+function useClosing(open, close) {
+    useEffect(() => {
+        if (!open) {
+            return;
+        }
+        const key = (event) => {
+            if (event.key === "Escape") {
+                close();
+            }
+        };
+        const press = (event) => {
+            if (!(event.target instanceof Element && event.target.closest(".marks-legend") !== null)) {
+                close();
+            }
+        };
+        window.addEventListener("keydown", key);
+        window.addEventListener("pointerdown", press);
+        return () => {
+            window.removeEventListener("keydown", key);
+            window.removeEventListener("pointerdown", press);
+        };
+    }, [open]);
+}
+/**
+ * Where the legend opens: under its button, or over it when the window has more room there, its right edge on the button's and no wider than the card it
+ * sits in, so that it leaves the board in sight; over the page, since the cards clip what overflows them. It follows the button as the window changes or
+ * scrolls.
+ */
+function usePlace(button, open) {
+    const [place, setPlace] = useState(undefined);
+    useLayoutEffect(() => {
+        if (!open) {
+            setPlace(undefined);
+            return;
+        }
+        const follow = () => {
+            const box = button.current?.getBoundingClientRect();
+            const card = button.current?.closest(".card")?.getBoundingClientRect();
+            if (box !== undefined) {
+                const { clientWidth: width, clientHeight: height } = document.documentElement;
+                const below = height - box.bottom - panelGap - edge;
+                const above = box.top - panelGap - edge;
+                const side = { right: `${Math.max(edge, width - box.right)}px`, width: `${Math.min(panelWidth, box.right - (card?.left ?? box.right - panelWidth))}px` };
+                setPlace(below >= roomEnough || below >= above
+                    ? { top: `${box.bottom + panelGap}px`, ...side, maxHeight: `${below}px` }
+                    : { bottom: `${height - box.top + panelGap}px`, ...side, maxHeight: `${above}px` });
+            }
+        };
+        follow();
+        window.addEventListener("resize", follow);
+        window.addEventListener("scroll", follow, true);
+        return () => {
+            window.removeEventListener("resize", follow);
+            window.removeEventListener("scroll", follow, true);
+        };
+    }, [open]);
+    return place;
+}
+// How far the legend stands from its button, and from the window's edges; its width at most; the room under the button that is enough for it.
+const panelGap = 6;
+const edge = 16;
+const panelWidth = 300;
+const roomEnough = 320;
+function keyOf(row) {
+    switch (row.kind) {
+        case "badge":
+            return row.kind;
+        case "risk":
+        case "pin":
+        case "skewer":
+            return `${row.kind} ${row.tone}`;
+        case "drawn":
+            return `${row.kind} ${row.colour}`;
+        case "end":
+            return `${row.kind} ${row.sign}`;
+        default:
+            return row.kind;
+    }
+}
+// An arrow across two squares, as the AI's: its shaft into its point, the point as long and wide as the board's.
+const arrowShaft = "M0.3 0.5 L1.475 0.5";
+const arrowHead = "1.4,0.71 1.7,0.5 1.4,0.29";

package/dist/page/legend/view.js

@@ -0,0 +1,54 @@
+import { pinSquares } from "../helps/view.js";
+/** The legend's lines, in the order the eye meets the marks: the move's judgment, the helps' signs, the drawings, the map, the end. */
+export function legendOf({ badge, helps, drawn, control = false, ends }) {
+    const rows = badge === undefined ? [] : [{ kind: "badge", badge: badge.badge, squares: [badge.square] }];
+    return [...rows, ...helpsRows(helps, control), ...drawnRows(drawn), ...(control ? [{ kind: "control", squares: [] }] : []), ...endRows(ends)];
+}
+// The helps' signs by kind, then by tone, the player's threats first, each lighting the pieces that bear it; the pins' and skewers' lines after them,
+// lighting the whole line. Over the control map the board shows the corners alone.
+function helpsRows(helps, control) {
+    if (helps === undefined) {
+        return [];
+    }
+    const kinds = control ? ["risk"] : ["risk", "pin", "skewer"];
+    const signs = kinds.flatMap((kind) => tones.flatMap((tone) => {
+        const squares = helps.lines.filter((line) => line.kind === kind && line.tone === tone).flatMap(markedSquares);
+        return squares.length === 0 ? [] : [{ kind, tone, squares }];
+    }));
+    const lines = control ? [] : [
+        ...(helps.pins.length === 0 ? [] : [{ kind: "pinLine", squares: helps.pins.flatMap(pinSquares) }]),
+        ...(helps.skewers.length === 0 ? [] : [{ kind: "skewerLine", squares: helps.skewers.flatMap(pinSquares) }]),
+    ];
+    return [...signs, ...lines];
+}
+// The pieces a line of the tactics marks on the board.
+function markedSquares(line) {
+    switch (line.kind) {
+        case "risk":
+            return line.items.map((risk) => risk.piece.square);
+        case "pin":
+        case "skewer":
+            return line.items.map((pin) => pin.piece.square);
+        default:
+            return [];
+    }
+}
+// One line a colour, with an arrow, a ring or both as the board has them.
+function drawnRows(drawn) {
+    return colours.flatMap((colour) => {
+        const arrows = (drawn?.arrows ?? []).filter((arrow) => arrow.colour === colour);
+        const rings = (drawn?.squares ?? []).filter((square) => square.colour === colour);
+        const squares = [...arrows.flatMap((arrow) => [arrow.from, arrow.to]), ...rings.map((ring) => ring.square)];
+        return squares.length === 0 ? [] : [{ kind: "drawn", colour, arrow: arrows.length > 0, ring: rings.length > 0, squares }];
+    });
+}
+function endRows(ends) {
+    const signs = [...(ends ?? [])];
+    return endSigns.flatMap((sign) => {
+        const squares = signs.filter(([, each]) => each.badge === sign).map(([square]) => square);
+        return squares.length === 0 ? [] : [{ kind: "end", sign, squares }];
+    });
+}
+const tones = ["threat", "chance", "neutral"];
+const colours = ["green", "red", "yellow", "blue"];
+const endSigns = ["crown", "mate", "flag", "half"];

package/dist/page/main.js

@@ -1,8 +1,11 @@
 import { jsx as _jsx } from "preact/jsx-runtime";
-// The page's start: the settings this browser remembers, shown before the first frame, then the app drawn into its place.
+// 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
+// drawn into its place.
 import { render } from "preact";
 import { App } from "./app/app.js";
+import { fitOpenedWindow } from "./layout/window.js";
 import { loadSettings, showSettings } from "./profile/settings.js";
+fitOpenedWindow();
 const settings = loadSettings();
 showSettings(settings);
 render(_jsx(App, { start: settings }), document.getElementById("app"));