chesspal 0.2.3 → 0.2.4

package/dist/page/helps/helps.css

@@ -456,13 +456,15 @@
     fill: var(--card);
 }
 
-/* The skewer of the board, in the line's colour and without its halo */
+/* The pushpin and the skewer of the board, in the line's colour and without their halo */
+.help-rows .help-pin,
 .help-rows .help-skewer {
     left: 7px;
     top: 4px;
     height: 17px;
 }
 
+.help-rows .help-pin path,
 .help-rows .help-skewer path {
     fill: var(--row);
     stroke: none;

package/dist/page/helps/helps.js

@@ -3,7 +3,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "preact/jsx-ru
 // the coach's words (D-88).
 import { Fragment } from "preact";
 import { useState } from "preact/hooks";
-import { Notch, Skewer } from "../board/marks.js";
+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";
@@ -15,7 +15,7 @@ import { groupOf, pinSquares, riskSquares, squaresOf, strategyOf } from "./view.
  * 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).
  */
-export function HelpsCard({ helps, judged, hint, hintOpen, onHint, onPoint, onMap, mapping, onBare, bare, text }) {
+export function HelpsCard({ helps, judged, hint, hintOpen, onHint, onPoint, onMap, mapping, onBare, bare, legend, text }) {
     const [tab, setTab] = useState("tactics");
     // The tactics' lines the player opened stay open from move to move, so that a pin is followed as the game goes on.
     const [opened, setOpened] = useState(new Set());
@@ -29,7 +29,7 @@ export function HelpsCard({ helps, judged, hint, hintOpen, onHint, onPoint, onMa
         }
         toggleFold();
     };
-    return (_jsxs("section", { class: `card helps-card${folded ? " folded" : ""}`, "aria-label": words.title, children: [_jsxs("div", { class: "helps-head", children: [_jsx("h3", { class: "card-title", children: _jsxs(FoldButton, { folded: folded, onFold: fold, text: text, children: [_jsx(HelpsIcon, {}), words.title] }) }), _jsxs("span", { class: "helps-tools", children: [_jsx(MapButton, { mapping: mapping, onMap: onMap, text: text }), _jsx(BareButton, { bare: bare, onBare: onBare, text: text })] })] }), folded ? null : (_jsxs(_Fragment, { children: [judged.length === 0 && hint === undefined ? null : (_jsxs("section", { class: `coach${judged.length === 0 ? " hint-only" : ""}`, "aria-label": words.coach, children: [judged.map((ply) => _jsx(Judged, { ply: ply, text: text }, `${ply.number} ${ply.side}`)), hint === undefined ? null : _jsx(HintLine, { hint: hint, open: hintOpen, onOpen: onHint, text: text })] })), _jsxs("div", { class: "tabs", role: "tablist", children: [_jsx("button", { type: "button", role: "tab", "aria-selected": tab === "tactics", onClick: () => setTab("tactics"), children: words.tactics }), _jsx("button", { type: "button", role: "tab", "aria-selected": tab === "strategy", onClick: () => setTab("strategy"), children: words.strategy })] }), tab === "tactics"
+    return (_jsxs("section", { class: `card helps-card${folded ? " folded" : ""}`, "aria-label": words.title, children: [_jsxs("div", { class: "helps-head", children: [_jsx("h3", { class: "card-title", children: _jsxs(FoldButton, { folded: folded, onFold: fold, text: text, children: [_jsx(HelpsIcon, {}), words.title] }) }), _jsxs("span", { class: "helps-tools", children: [_jsx(MapButton, { mapping: mapping, onMap: onMap, text: text }), _jsx(BareButton, { bare: bare, onBare: onBare, text: text }), legend] })] }), folded ? null : (_jsxs(_Fragment, { children: [judged.length === 0 && hint === undefined ? null : (_jsxs("section", { class: `coach${judged.length === 0 ? " hint-only" : ""}`, "aria-label": words.coach, children: [judged.map((ply) => _jsx(Judged, { ply: ply, text: text }, `${ply.number} ${ply.side}`)), hint === undefined ? null : _jsx(HintLine, { hint: hint, open: hintOpen, onOpen: onHint, text: text })] })), _jsxs("div", { class: "tabs", role: "tablist", children: [_jsx("button", { type: "button", role: "tab", "aria-selected": tab === "tactics", onClick: () => setTab("tactics"), children: words.tactics }), _jsx("button", { type: "button", role: "tab", "aria-selected": tab === "strategy", onClick: () => setTab("strategy"), children: words.strategy })] }), tab === "tactics"
                         ? _jsx(Tactics, { helps: helps, opened: opened, onOpen: openLine, onPoint: onPoint, text: text })
                         : _jsx(Strategy, { helps: helps, onPoint: onPoint, text: text })] }))] }));
 }
@@ -86,20 +86,20 @@ function pointing(onPoint) {
         onPointerLeave: (event) => event.pointerType === "mouse" && onPoint([]),
     });
 }
-/** A line's sign: the corner of a piece at risk, a pin's link, the skewer of the board, a check's plus, the loose pieces' i; its colour is the line's. */
+/** 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 }) {
-    if (kind === "risk") {
-        return _jsx(Notch, {});
-    }
-    if (kind === "skewer") {
-        return _jsx(Skewer, {});
-    }
-    if (kind === "loose") {
-        return _jsx(InfoIcon, {});
+    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" })] }));
     }
-    return (_jsx(RowIcon, { children: kind === "pin"
-            ? _jsx("path", { d: "M6.5 9.5l3-3M7.5 4.5l1-1a2.5 2.5 0 0 1 3.5 3.5l-1 1M8.5 11.5l-1 1a2.5 2.5 0 0 1-3.5-3.5l1-1" })
-            : (_jsxs(_Fragment, { 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 }) {

package/dist/page/layout/layout.css

@@ -751,10 +751,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 +792,12 @@
     }
 
     /* 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";
     }
 
     .talk.studied > .ai-block > .asleep {

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/style.css

@@ -4,6 +4,8 @@
 @import "layout/layout.css";
 @import "board/board.css";
 @import "talk/talk.css";
+@import "talk/chat.css";
 @import "game/game.css";
 @import "helps/helps.css";
+@import "legend/legend.css";
 @import "dialogs/dialogs.css";

package/dist/page/talk/chat.css

@@ -0,0 +1,90 @@
+/* The talk over a game in analysis (D-101): the player's words and the AI's answers in one thread over the box, by the player's card; the AI's note stays
+   with the other side's card, and the thread gives way before the cards do (Zoe) */
+.talk.studied > .you-block {
+    flex: 1 1 auto;
+    max-height: none;
+}
+
+/* A line apart from the AI's note, which another voice signed (Zoe) */
+.talk.studied > section > .chat {
+    display: flex;
+    flex-direction: column;
+    flex: 1 1 auto;
+    min-height: 0;
+    margin-top: 12px;
+    padding-top: 10px;
+    border-top: 1px solid var(--line);
+}
+
+.chat > .compose {
+    flex: none;
+}
+
+/* The thread reads in time's order whichever way the board is turned: the newest words just over the box (Zoe) */
+.flipped .talk.studied .sent {
+    justify-content: flex-end;
+    margin: 0 0 8px;
+}
+
+.flipped .talk.studied .compose {
+    margin: 0;
+}
+
+/* Beside the board the talk takes the room the AI's notes leave, not half the column as in a game; turned round, the player's card goes on top and the
+   AI's note below the box; on a phone the talk has an area of its own (layout.css) */
+@media (min-width: 841px) {
+    .chat > .sent {
+        flex: 1 1 0;
+    }
+
+    .flipped .talk.studied,
+    .flipped .talk.studied > section {
+        flex-direction: column-reverse;
+    }
+
+    .flipped .talk.studied > section > .chat {
+        margin: 0 0 12px;
+        padding: 0 0 10px;
+        border-top: 0;
+        border-bottom: 1px solid var(--line);
+    }
+}
+
+/* The AI's answers on the left, in its bubbles, without the tail that points at the Torretta: it is not by them */
+.sent li.from-ai {
+    align-self: flex-start;
+    align-items: flex-start;
+}
+
+.talk.studied .sent .say::before,
+.talk.studied .sent .say::after {
+    content: none;
+}
+
+/* The box has no tail either: the card it would point at may be someone else's */
+.compose.asking::after {
+    content: none;
+}
+
+/* The move a line was written on, small at its head: a press shows it again */
+.shown-move {
+    display: flex;
+    align-items: center;
+    gap: 1px;
+    margin: 0 0 2px;
+    padding: 0;
+    border: 0;
+    background: none;
+    color: inherit;
+    font: inherit;
+    font-size: 12px;
+    font-weight: 600;
+    opacity: 0.85;
+    cursor: pointer;
+}
+
+.shown-move:hover,
+.shown-move:focus-visible {
+    opacity: 1;
+    text-decoration: underline;
+}