chesspal 0.3.5 → 0.4.0

package/dist/page/layout/layout.css

@@ -272,7 +272,7 @@
 .app.talk-folded .talk {
     visibility: hidden;
     opacity: 0;
-    transition: opacity 120ms 80ms, visibility 0s 200ms;
+    transition: opacity 120ms 80ms, visibility 0ms 200ms;
 }
 
 /* A column's tab, a drawer's handle at the top: open, on the outer edge of the column's first card; folded, the column slides under the board and the
@@ -381,7 +381,7 @@
 .app.talk-folded .faces {
     display: flex;
     visibility: hidden;
-    transition: visibility 0s 200ms;
+    transition: visibility 0ms 200ms;
 }
 
 .app.flipped .faces {
@@ -536,16 +536,16 @@
 
 .thought.move .dot {
     fill: var(--on-accent);
-    animation: thought-dot 1.2s ease-in-out infinite;
+    animation: thought-dot 1200ms ease-in-out infinite;
 }
 
 /* In order from the left: nth-of-type would count the trail, a circle too */
 .thought.move .dot + .dot {
-    animation-delay: 0.2s;
+    animation-delay: 200ms;
 }
 
 .thought.move .dot + .dot + .dot {
-    animation-delay: 0.4s;
+    animation-delay: 400ms;
 }
 
 .thought.ponder .cloud {
@@ -556,7 +556,7 @@
 
 .thought.ponder .dot {
     fill: var(--soft);
-    animation: thought-breath 3s ease-in-out infinite;
+    animation: thought-breath 3000ms ease-in-out infinite;
 }
 
 @keyframes thought-in {
@@ -610,7 +610,7 @@
 
 /* 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 */
+   gives way, and never scrolls by itself */
 @media (min-width: 841px) {
     .talk {
         display: grid;
@@ -643,19 +643,36 @@
         contain: size;
     }
 
+    /* The note is always whole: when the column cannot hold it with the box and the cards, the column scrolls under the wheel or the finger, with no
+       scrollbar, fading at its edges as the game's column does; a halo keeps the cards' shadows. Positioned, so the words hidden for screen readers
+       scroll with it instead of stretching the page */
     .talk.studied {
-        grid-template-rows: minmax(0, max-content) minmax(min-content, 1fr);
-        overflow: hidden;
+        --halo: 16px;
+        position: relative;
+        grid-template-rows: max-content minmax(min-content, 1fr);
+        margin: calc(-1 * var(--halo));
+        padding: var(--halo);
+        overflow: hidden auto;
+        scrollbar-width: none;
+        mask-image: linear-gradient(transparent, #000 var(--halo), #000 calc(100% - var(--halo)), transparent);
     }
 
+    /* Turned round the note is at the foot: a column laid from its foot opens scrolled to it */
     .flipped .talk.studied {
-        grid-template-rows: minmax(min-content, 1fr) minmax(0, max-content);
+        display: flex;
+    }
+
+    .flipped .talk.studied > .you-block {
+        flex: 1 1 0;
+        min-height: auto;
+    }
+
+    .flipped .talk.studied > .ai-block {
+        flex: none;
     }
 
     .talk.studied > .ai-block > .ai-note {
-        flex: 0 1 auto;
-        min-height: 0;
-        overflow-y: auto;
+        flex: none;
     }
 }
 
@@ -684,7 +701,7 @@
 
 .app.folded .side {
     visibility: hidden;
-    transition: visibility 0s 200ms;
+    transition: visibility 0ms 200ms;
 }
 
 /* With no game, the game's column opens with this note, as tall as the game's card, so the column's tab sits in its middle */
@@ -975,12 +992,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;
     }
 }
@@ -1001,7 +1020,7 @@
     color: var(--ink);
     font-size: 14px;
     line-height: 1.45;
-    box-shadow: 0 8px 24px rgb(0 0 0 / 16%);
+    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16);
 }
 
 /* On a phone it would cover the chat's line at the foot: it stands at the top of the column instead (Zoe) */
@@ -1041,3 +1060,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

@@ -1,19 +1,22 @@
 // The table's window as it opens (D-104): 16:9, 1600×900 or what the screen has, centred, every time the table opens it. Chrome and Edge keep one size for
 // every application window on 127.0.0.1, whatever its port, so the size they would give is any page's, often half a screen (Stefano).
-// The mark the table puts on the address of the window it opens (server/table/browser.ts).
+// One window of the table alone: the newest it opened stays, the older ones close themselves (server/page/windows.ts).
+// The mark the table puts on the address of the window it opens, with its opening (server/table/browser.ts), kept by the window for its reloads.
 const mark = "opened";
+const kept = "chesspal-opening";
 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. */
+/** Sizes the window the table opened and takes the mark off the address, so that a reload keeps the size the player gave it; the window keeps its opening. */
 export function fitOpenedWindow() {
-    const address = new URL(location.href);
+    const address = new URL(window.location.href);
     if (!address.searchParams.has(mark)) {
         return;
     }
+    keepOpening(Number(address.searchParams.get(mark)));
     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);
 }
@@ -23,3 +26,39 @@ export function windowPlace(roomWidth, roomHeight) {
     const height = Math.min(wanted.height, roomHeight);
     return { width, height, left: Math.round((roomWidth - width) / 2), top: Math.round((roomHeight - height) / 2) };
 }
+/** The events of the server, for this window: with its opening when the table opened it, so that the table tells the older windows to close. */
+export function eventsAddress() {
+    const opening = openingOf();
+    return opening === undefined ? "/api/events" : `/api/events?window=${opening}`;
+}
+/** Whether an event of the server says the table opened a newer window than this one, which then closes; an event of anything else is false. */
+export function closesForNewer(data) {
+    const newest = /^window (\d+)$/.exec(data);
+    if (newest === null) {
+        return false;
+    }
+    const opening = openingOf();
+    if (opening !== undefined && Number(newest[1]) > opening) {
+        window.close();
+    }
+    return true;
+}
+function keepOpening(opening) {
+    try {
+        if (Number.isSafeInteger(opening) && opening > 0) {
+            window.sessionStorage.setItem(kept, String(opening));
+        }
+    }
+    catch {
+        // A browser that keeps nothing for the window: it never closes for a newer one.
+    }
+}
+function openingOf() {
+    try {
+        const opening = Number(window.sessionStorage.getItem(kept));
+        return Number.isSafeInteger(opening) && opening > 0 ? opening : undefined;
+    }
+    catch {
+        return undefined;
+    }
+}

package/dist/page/lead/lead.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "preact/jsx-runtime";
 // Who is ahead as the AI estimates it (D-90): a two-colour bar in the game's card, with the helps on and in analysis, and in analysis a chart of the game,
 // as chess.com draws them, that goes to the move clicked. The page draws the AI's figures, never computes them (D-6, D-19).
+import { useRef, useState } from "preact/hooks";
 import { FoldButton, useCardFold } from "../game/card-fold.js";
 import { chartBadges, sideAhead } from "./view.js";
 /**
@@ -15,10 +16,14 @@ export function LeadBar({ standing, shown, text }) {
 }
 /**
  * The chart of the game in analysis, in a card that folds: White's share as the white area, the moves marked by a badge as dots, kept whole inside its
- * edges, the move shown as a line.
+ * edges, the move shown as a line, and under the mouse a fainter line on the move a click would show. A finger or the mouse drawn along it runs through the
+ * game.
  */
 export function LeadChart({ plies, standings, shown, onShow, text }) {
     const [folded, fold] = useCardFold("chart");
+    const [pointed, setPointed] = useState(undefined);
+    // A finger or the pressed mouse on the chart: where it went down, whether it runs through the game yet, and the move it showed last.
+    const pressed = useRef(undefined);
     const width = Math.max(plies.length, 1);
     const heightOf = (share) => 1 - share;
     const first = standings[0];
@@ -34,11 +39,43 @@ export function LeadChart({ plies, standings, shown, onShow, text }) {
         const at = standings.find((standing) => standing.plies === index + 1);
         return badge === undefined || at === undefined || !chartBadges.has(badge) ? [] : [{ badge, at }];
     });
-    const go = (event) => {
+    // The move at the pointer: how many moves the board would show.
+    const plyAt = (event) => {
         const box = event.currentTarget.getBoundingClientRect();
-        onShow(Math.round(((event.clientX - box.left) / box.width) * width));
+        return Math.min(width, Math.max(0, Math.round(((event.clientX - box.left) / box.width) * width)));
     };
-    return (_jsxs("section", { class: `card lead-card${folded ? " folded" : ""}`, children: [_jsx("h3", { class: "card-title", children: _jsxs(FoldButton, { folded: folded, onFold: fold, text: text, children: [_jsx(ChartIcon, {}), text.lead.chart] }) }), folded ? null : (_jsxs("div", { class: "lead-chart", role: "img", "aria-label": text.lead.chartHint, title: text.lead.chartHint, onClick: go, children: [_jsxs("svg", { viewBox: `0 0 ${width} 2`, preserveAspectRatio: "none", "aria-hidden": "true", children: [_jsx("path", { class: "white-area", d: area }), last.plies < width ? _jsx("rect", { class: "pending", x: last.plies, y: "0", width: width - last.plies, height: "2" }) : null, _jsx("path", { class: "even", d: `M0 1 L${width} 1`, "vector-effect": "non-scaling-stroke" })] }), _jsx("span", { class: "shown", style: { left: inside((shown / width) * 100, 2) }, "aria-hidden": "true" }), dots.map(({ badge, at }) => (_jsx("span", { class: `dot ${badge}`, style: { left: inside((at.plies / width) * 100, 6), top: inside((heightOf(at.share) / 2) * 100, 6) }, "aria-hidden": "true" }, at.plies)))] }))] }));
+    const showAt = (at) => {
+        if (pressed.current !== undefined && pressed.current.showed !== at) {
+            pressed.current.showed = at;
+            onShow(at);
+        }
+    };
+    // The mouse shows its move as it goes down; a finger once it runs across, as one that runs up or down scrolls the page, or as it lifts, a tap.
+    const press = (event) => {
+        event.currentTarget.setPointerCapture(event.pointerId);
+        pressed.current = { x: event.clientX, y: event.clientY, along: event.pointerType === "mouse" };
+        setPointed(undefined);
+        if (pressed.current.along) {
+            showAt(plyAt(event));
+        }
+    };
+    const point = (event) => {
+        const press = pressed.current;
+        if (press === undefined) {
+            setPointed(event.pointerType === "mouse" ? plyAt(event) : undefined);
+            return;
+        }
+        const across = Math.abs(event.clientX - press.x);
+        press.along ||= across > 8 && across > Math.abs(event.clientY - press.y);
+        if (press.along) {
+            showAt(plyAt(event));
+        }
+    };
+    const lift = (event) => {
+        showAt(plyAt(event));
+        pressed.current = undefined;
+    };
+    return (_jsxs("section", { class: `card lead-card${folded ? " folded" : ""}`, children: [_jsx("h3", { class: "card-title", children: _jsxs(FoldButton, { folded: folded, onFold: fold, text: text, children: [_jsx(ChartIcon, {}), text.lead.chart] }) }), folded ? null : (_jsxs("div", { class: "lead-chart", role: "img", "aria-label": text.lead.chartHint, title: text.lead.chartHint, onPointerDown: press, onPointerMove: point, onPointerUp: lift, onPointerCancel: () => void (pressed.current = undefined), onPointerLeave: () => setPointed(undefined), children: [_jsxs("svg", { viewBox: `0 0 ${width} 2`, preserveAspectRatio: "none", "aria-hidden": "true", children: [_jsx("path", { class: "white-area", d: area }), last.plies < width ? _jsx("rect", { class: "pending", x: last.plies, y: "0", width: width - last.plies, height: "2" }) : null, _jsx("path", { class: "even", d: `M0 1 L${width} 1`, "vector-effect": "non-scaling-stroke" })] }), pointed === undefined || pointed === shown ? null : _jsx("span", { class: "shown ghost", style: { left: inside((pointed / width) * 100, 2) }, "aria-hidden": "true" }), _jsx("span", { class: "shown", style: { left: inside((shown / width) * 100, 2) }, "aria-hidden": "true" }), dots.map(({ badge, at }) => (_jsx("span", { class: `dot ${badge}`, style: { left: inside((at.plies / width) * 100, 6), top: inside((heightOf(at.share) / 2) * 100, 6) }, "aria-hidden": "true" }, at.plies)))] }))] }));
 }
 /** A place along the chart, in percent, kept whole inside its edges by so many pixels. */
 function inside(percent, pixels) {

package/dist/page/legend/legend.css

@@ -21,10 +21,11 @@
     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 */
+/* Over the whole page, in the browser's top layer as a popover, the board in sight beside it; placed by its button by the page */
 .legend-panel {
     position: fixed;
-    z-index: 20;
+    inset: auto;
+    margin: 0;
     width: 300px;
     max-width: calc(100vw - 32px);
     overflow-y: auto;
@@ -171,7 +172,7 @@
     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 */
+/* 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 (legend.tsx) */
 .board-map .marks-legend {
     position: static;
     float: right;
@@ -183,20 +184,7 @@
     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

@@ -4,19 +4,25 @@ 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.
+ * 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. It stands over the whole page, in
+ * the browser's top layer, so that no card clips it; 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 section = useRef(null);
     const panel = useId();
     useClosing(open, () => onOpen(false));
     usePutOut(open, onPoint);
-    const place = usePlace(button, open && !under);
+    const place = usePlace(button, open, under);
     const words = text.legend;
-    const shown = open && (under || place !== undefined);
+    const shown = open && place !== undefined;
+    useLayoutEffect(() => {
+        if (shown) {
+            section.current?.showPopover();
+        }
+    }, [shown]);
     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)))) }))] }))
+                ? (_jsxs("section", { ref: section, id: panel, class: "legend-panel", popover: "manual", "aria-label": words.title, style: 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. */
@@ -110,10 +116,10 @@ function useClosing(open, close) {
 }
 /**
  * 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.
+ * sits in, so that it leaves the board in sight, inside the window; `under`, below the row under the board and as wide as it. None while the button is not
+ * shown, as the one of the layout the window does not use. It follows the button as the window changes or scrolls, kept inside the window.
  */
-function usePlace(button, open) {
+function usePlace(button, open, under) {
     const [place, setPlace] = useState(undefined);
     useLayoutEffect(() => {
         if (!open) {
@@ -121,16 +127,21 @@ function usePlace(button, open) {
             return;
         }
         const follow = () => {
-            const box = button.current?.getBoundingClientRect();
+            const shown = button.current !== null && button.current.getClientRects().length > 0;
+            const box = (under ? button.current?.closest(".board-map") ?? button.current : button.current)?.getBoundingClientRect();
             const card = button.current?.closest(".card")?.getBoundingClientRect();
-            if (box !== undefined) {
+            if (!shown || box === undefined) {
+                setPlace(undefined);
+            }
+            else {
                 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` });
+                const across = under ? box.width : Math.min(panelWidth, box.right - (card?.left ?? box.right - panelWidth));
+                const side = { right: `${Math.max(edge, width - box.right)}px`, width: `${Math.min(across, width - 2 * edge)}px` };
+                setPlace(under || below >= roomEnough || below >= above
+                    ? { top: `${Math.max(edge, box.bottom + panelGap)}px`, ...side, maxHeight: `${under ? Math.max(roomLeast, below) : below}px` }
+                    : { bottom: `${Math.max(edge, height - box.top + panelGap)}px`, ...side, maxHeight: `${above}px` });
             }
         };
         follow();
@@ -140,7 +151,7 @@ function usePlace(button, open) {
             window.removeEventListener("resize", follow);
             window.removeEventListener("scroll", follow, true);
         };
-    }, [open]);
+    }, [open, under]);
     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.
@@ -148,6 +159,8 @@ const panelGap = 6;
 const edge = 16;
 const panelWidth = 300;
 const roomEnough = 320;
+// The least room the legend takes under the board's row on a phone, never over the board: the page scrolls to the rest, and the legend follows.
+const roomLeast = 120;
 function keyOf(row) {
     switch (row.kind) {
         case "badge":

package/dist/page/profile/settings.js

@@ -31,6 +31,7 @@ export function settingsFrom(value, defaults = { theme: "system", sound: true })
         voice: typeof stored.voice === "boolean" ? stored.voice : false,
         language: oneOf(stored.language, ["auto", "it", "en"], "auto"),
         // Checked against what the host offers when the chat opens, which this page does not know.
+        chatHost: word(stored.chatHost),
         claudeModel: word(stored.claudeModel),
         claudeEffort: word(stored.claudeEffort),
         codexModel: word(stored.codexModel),

package/dist/page/sounds/sounds.js

@@ -18,7 +18,7 @@ export function endSoundOf(how) {
 /** Lets the page play sounds: loads the recordings, and since a browser plays none before the player has touched the page, the first touch wakes them. */
 export function wakeSounds() {
     loadRecordings();
-    addEventListener("pointerdown", () => void audio()?.resume(), { once: true });
+    window.addEventListener("pointerdown", () => void audio()?.resume(), { once: true });
 }
 /** Plays a sound: its recordings together, else its tone; a browser without Web Audio plays none. */
 export function playSound(sound) {

package/dist/page/style.css

@@ -3,6 +3,7 @@
 @import "base.css";
 @import "layout/layout.css";
 @import "board/board.css";
+@import "avatars/torretta.css";
 @import "talk/talk.css";
 @import "talk/chat.css";
 @import "table/table.css";

package/dist/page/table/action.js

@@ -0,0 +1,42 @@
+/** The settings that keep each host's choice. */
+export const choiceKeys = {
+    claude: { model: "claudeModel", effort: "claudeEffort" },
+    codex: { model: "codexModel", effort: "codexEffort" },
+};
+/** The hosts the window offers: those installed whose choices the settings keep. */
+export function offeredHosts(table) {
+    return table.hosts.filter((host) => host.installed && host.name in choiceKeys);
+}
+/** The host selected when the window opens: the one at the table, else the last the button used, else the first offered. */
+export function firstHost(table, settings) {
+    const offered = offeredHosts(table);
+    const atTable = offered.find((host) => table.chat && host.name === table.host);
+    return (atTable ?? offered.find((host) => host.name === settings.chatHost) ?? offered[0])?.name;
+}
+/** A host's model or effort as the settings keep it: the host's middle one for none, and for a choice it no longer offers. */
+export function chosen(host, kind, settings) {
+    const key = choiceKeys[host.name][kind];
+    return offeredOr(host, kind, settings[key]);
+}
+/** What the chat held started with: the host's middle one where the table does not say, or says one it no longer offers. */
+export function startedWith(table, host, kind) {
+    return offeredOr(host, kind, table.started?.[kind]);
+}
+/** What the button does with the host selected, none without one: with no chat, open one, to review the game in `review`; else start the chat again, in another host when it is not the one at the table. */
+export function chatAction(table, host, review) {
+    if (host === undefined) {
+        return undefined;
+    }
+    if (!table.chat) {
+        return review ? "review" : "open";
+    }
+    return table.host === host.name ? "restart" : "switch";
+}
+/** Whether the button can do its action now: not while a chat opens or waits, nor on a chat opened by hand, which is the player's. */
+export function canAct(table) {
+    return table.opening === undefined && table.waiting === undefined && (!table.chat || table.held);
+}
+function offeredOr(host, kind, value) {
+    const offered = kind === "model" ? host.models : host.efforts;
+    return value !== undefined && offered.includes(value) ? value : host[kind];
+}

package/dist/page/table/table.css

@@ -1,63 +1,80 @@
-/* The chat's window (D-107): narrow, a row for each host, its button with the tick of the one at the table and its model and effort under their titles,
-   their columns shared through the subgrid; the command to type instead */
-.dialog:has(> .chat-hosts) {
+/* The chat's window (D-107), as the new game's: narrow, a card for each host with the tick of the one at the table, the selected one's model and effort
+   as rows of small choices, then the one button and the command to type instead */
+.dialog:has(> .chat-window) {
     width: min(460px, calc(100vw - 32px));
 }
 
-.chat-hosts {
-    display: grid;
-    grid-template-columns: minmax(0, 1fr) auto auto;
-    gap: 6px;
-    margin: 8px 0 12px;
+.profile-form.chat-window fieldset {
+    margin-bottom: 16px;
 }
 
-.chat-head,
-.chat-host {
+.chat-hosts {
     display: grid;
-    grid-column: 1 / -1;
-    grid-template-columns: subgrid;
+    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
+    gap: 8px;
 }
 
-.chat-head {
-    color: var(--soft);
-    font-size: 12px;
+.chat-hosts .level > span {
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    gap: 8px;
+    min-height: 48px;
+    padding: 10px 14px;
+    font-size: 16px;
 }
 
-.chat-host .choice {
+/* A host's whole name, on two lines rather than cut on a phone */
+.chat-hosts b {
     min-width: 0;
-    font-size: 15px;
-    text-align: left;
+    line-height: 1.2;
 }
 
-.chat-host .choice span {
-    flex: 1;
-    min-width: 0;
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
+@media (max-width: 420px) {
+    .chat-hosts .level > span {
+        padding: 8px 12px;
+    }
 }
 
-.chat-host .in-use {
+.chat-hosts .at-table {
+    display: flex;
     flex: none;
-    width: 18px;
-    height: 18px;
+}
+
+.chat-hosts .in-use {
+    width: 20px;
+    height: 20px;
     color: var(--accent);
 }
 
-.chat-host .choice[aria-disabled="true"] {
-    border-color: var(--line);
-    opacity: 0.6;
-    cursor: default;
+.chat-choices {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 6px;
 }
 
-.chat-host select {
-    padding: 4px;
-    border: 1px solid var(--line);
-    border-radius: 6px;
-    background: var(--card);
-    color: var(--ink);
-    font: inherit;
-    font-size: 13px;
+.chat-choices .level > span {
+    flex-direction: row;
+    min-width: 40px;
+    justify-content: center;
+    padding: 6px 10px;
+    font-size: 14px;
+}
+
+/* The choice the chat at the table started with: a dot in the corner, so that one changed shows beside the one kept */
+.chat-choices .started::after {
+    position: absolute;
+    top: 4px;
+    right: 4px;
+    width: 5px;
+    height: 5px;
+    border-radius: 50%;
+    background: var(--accent);
+    content: "";
+}
+
+.chat-window .problem.chat-state {
+    margin-top: -4px;
 }
 
 /* The header's mark of a newer Chesspal (D-108): its border as the other buttons', not the accent, which reads as focus; inside, a full accent disc with a
@@ -135,6 +152,7 @@
 }
 
 .chat-command {
+    margin: 12px 0 0;
     color: var(--soft);
     font-size: 12.5px;
 }