chesspal 0.2.4 → 0.3.1

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/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"));

package/dist/page/players/card.js

@@ -8,7 +8,7 @@ export function PlayerCard({ place, picture, name, signed, side, level, taken, a
     const opponent = side === "white" ? "black" : "white";
     return (_jsx("section", { class: `card player ${place}`, children: _jsxs("div", { class: "player-line", children: [picture, _jsxs("div", { class: "who", children: [_jsx("div", { class: "name", title: typeof name === "string" ? name : undefined, children: name }), signed === undefined ? null : _jsx("div", { class: "signed", title: signed, children: signed }), side === undefined ? null : (_jsxs("div", { class: "note", children: [text.sides[side], level === undefined ? null : (_jsxs(_Fragment, { children: [" ", "\u00B7 ", _jsx(LevelTip, { level: level })] })), turn
                                     ? (_jsxs(_Fragment, { children: [" ", "\u00B7 ", _jsx("b", { class: "turn", children: text.yourTurn })] }))
-                                    : null] })), _jsxs("div", { class: "taken", role: "img", "aria-label": text.taken(taken.map((piece) => text.piece(piece, opponent)), ahead), children: [groupsOf(taken).map((group) => (_jsx("span", { class: group[0]?.toUpperCase() === "P" ? "group pawns" : "group", children: group.map((piece, index) => _jsx(Piece, { letter: opponent === "white" ? piece : piece.toLowerCase(), small: true }, index)) }, group[0]))), ahead > 0 ? _jsxs("span", { class: "balance", children: ["+", ahead] }) : null] }), badges] }), clock] }) }));
+                                    : null] }))] }), clock, side === undefined && taken.length === 0 && badges === undefined ? null : (_jsxs("div", { class: "haul", children: [_jsxs("div", { class: "taken", role: "img", "aria-label": text.taken(taken.map((piece) => text.piece(piece, opponent)), ahead), children: [groupsOf(taken).map((group) => (_jsx("span", { class: group[0]?.toUpperCase() === "P" ? "group pawns" : "group", children: group.map((piece, index) => _jsx(Piece, { letter: opponent === "white" ? piece : piece.toLowerCase(), small: true }, index)) }, group[0]))), ahead > 0 ? _jsxs("span", { class: "balance", children: ["+", ahead] }) : null] }), badges] }))] }) }));
 }
 /**
  * A side's time on the game's clock, as the server keeps it: it runs while the side is to move and the game goes on, unless `held` (a move on its way);

package/dist/page/profile/profile.js

@@ -1,12 +1,15 @@
 // The player's profile on the page (D-23, D-45): as the server sends it, the choices the wizard offers, and the requests that change it.
 /** How the player says they play, as the server keeps it. */
 export const levels = ["learning", "casual", "regular", "tournament"];
-/** Where a rating comes from. */
-export const ratingSites = ["lichess", "chess.com", "fide"];
-/** The lowest and highest rating the server takes. */
-export const ratingLimits = { lowest: 100, highest: 3500 };
+/** The sites a rating is read from, by the player's names there (D-105). */
+export const ratingSites = ["lichess", "chess.com"];
+/** The speeds whose rating counts, in the order they count (D-106). */
+export const speeds = ["rapid", "classical", "blitz"];
 /** The longest name the server keeps. */
 export const nameLimit = 40;
+/** The FIDE ratings the server takes, as whole numbers (D-106). */
+export const fideLowest = 1400;
+export const fideHighest = 3000;
 /** The drawn avatars, by the ids the server keeps (D-45). */
 export const avatarIds = ["short-hair", "bun", "glasses", "beanie", "beard", "curls", "moustache", "silver-bob", "cat", "owl"];
 /** The address of a profile's own image: it changes with the image. */
@@ -14,12 +17,14 @@ export function imageAddress(profile) {
     return profile.image === undefined ? undefined : `/api/profile/image?profile=${encodeURIComponent(profile.id)}&v=${encodeURIComponent(profile.image)}`;
 }
 /** Makes a profile, in use unless `use` is false, with the photo after it, made small first so that a photo that cannot be read makes no profile: the refusal, or undefined. */
-export async function makeProfile({ name, level, rating, site, avatar, photo, use }) {
+export async function makeProfile({ name, level, lichess, chesscom, fide, avatar, photo, use }) {
     const image = photo === undefined ? undefined : await shrunk(photo).catch(() => undefined);
     if (photo !== undefined && image === undefined) {
         return badImage;
     }
-    const answer = await post("/api/profile/new", jsonOf({ name: name.trim(), level, ...(rating === undefined ? {} : { rating, site }), ...(avatar === undefined ? {} : { avatar }), ...(use === false ? { use } : {}) }));
+    const names = { ...(lichess?.trim() ? { lichess: lichess.trim() } : {}), ...(chesscom?.trim() ? { chesscom: chesscom.trim() } : {}) };
+    const chosen = { ...(fide === undefined ? {} : { fide }), ...(avatar === undefined ? {} : { avatar }), ...(use === false ? { use } : {}) };
+    const answer = await post("/api/profile/new", jsonOf({ name: name.trim(), level, ...names, ...chosen }));
     if ("refused" in answer) {
         return answer.refused;
     }
@@ -33,9 +38,9 @@ export async function useProfile(id) {
 export async function chooseAvatar(profile, avatar) {
     return refusalOf(await post(forProfile("/api/profile/avatar", profile), jsonOf({ avatar })));
 }
-/** The player's names on Lichess and chess.com for the profile the page shows, an empty one removed: the server's refusal, or undefined. */
-export async function saveAccounts(profile, accounts) {
-    return refusalOf(await post(forProfile("/api/profile/accounts", profile), jsonOf({ lichess: accounts.lichess.trim(), chesscom: accounts.chesscom.trim() })));
+/** What the player changes in the profile the page shows: an empty level or site name removed. The server's refusal, or undefined. */
+export async function editProfile(profile, changes) {
+    return refusalOf(await post(forProfile("/api/profile/edit", profile), jsonOf(changes)));
 }
 /** Opens the data folder in the system's file manager, where the page runs: the server's refusal, or undefined. */
 export async function openDataFolder() {

package/dist/page/profile/settings.js

@@ -30,6 +30,11 @@ export function settingsFrom(value, defaults = { theme: "system", sound: true })
         sound: typeof stored.sound === "boolean" ? stored.sound : defaults.sound,
         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.
+        claudeModel: word(stored.claudeModel),
+        claudeEffort: word(stored.claudeEffort),
+        codexModel: word(stored.codexModel),
+        codexEffort: word(stored.codexEffort),
     };
 }
 /** Remembers the settings in this browser. */
@@ -75,3 +80,7 @@ function parsed(saved) {
 function oneOf(value, choices, fallback) {
     return choices.find((choice) => choice === value) ?? fallback;
 }
+// A host's model or effort, a short word; empty when it is none.
+function word(value) {
+    return typeof value === "string" && /^[\w.-]{1,40}$/.test(value) ? value : "";
+}

package/dist/page/style.css

@@ -5,7 +5,9 @@
 @import "board/board.css";
 @import "talk/talk.css";
 @import "talk/chat.css";
+@import "table/table.css";
 @import "game/game.css";
 @import "helps/helps.css";
 @import "legend/legend.css";
 @import "dialogs/dialogs.css";
+@import "guide/guide.css";

package/dist/page/table/table.css

@@ -0,0 +1,123 @@
+/* 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) {
+    width: min(460px, calc(100vw - 32px));
+}
+
+.chat-hosts {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) auto auto;
+    gap: 6px;
+    margin: 8px 0 12px;
+}
+
+.chat-head,
+.chat-host {
+    display: grid;
+    grid-column: 1 / -1;
+    grid-template-columns: subgrid;
+}
+
+.chat-head {
+    color: var(--soft);
+    font-size: 12px;
+}
+
+.chat-host .choice {
+    min-width: 0;
+    font-size: 15px;
+    text-align: left;
+}
+
+.chat-host .choice span {
+    flex: 1;
+    min-width: 0;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+}
+
+.chat-host .in-use {
+    flex: none;
+    width: 18px;
+    height: 18px;
+    color: var(--accent);
+}
+
+.chat-host .choice[aria-disabled="true"] {
+    border-color: var(--line);
+    opacity: 0.6;
+    cursor: default;
+}
+
+.chat-host select {
+    padding: 4px;
+    border: 1px solid var(--line);
+    border-radius: 6px;
+    background: var(--card);
+    color: var(--ink);
+    font: inherit;
+    font-size: 13px;
+}
+
+/* Empty, the state takes no room */
+.chat-state:empty {
+    display: none;
+}
+
+.chat-command {
+    color: var(--soft);
+    font-size: 12.5px;
+}
+
+/* Each command whole on its line; two families, so the browser does not shrink the monospace */
+.chat-command code {
+    font-family: ui-monospace, monospace;
+    white-space: nowrap;
+    user-select: all;
+}
+
+/* The note on a start again that waits, with its ↻ and ×; in a game with no chat at the table, a line that opens the chat's window */
+.table-note {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+}
+
+.table-note > span {
+    flex: 1;
+}
+
+.table-note .icon-button {
+    flex: none;
+    width: 30px;
+    height: 30px;
+}
+
+.over-board > .table-note button {
+    pointer-events: auto;
+}
+
+.no-chat-line {
+    display: inline-flex;
+    align-items: center;
+    padding: 0;
+    border: 0;
+    background: none;
+    color: inherit;
+    font: inherit;
+    text-align: left;
+    text-decoration: underline;
+    text-underline-offset: 3px;
+    cursor: pointer;
+}
+
+/* No chat at the table: a hollow ring before the AI's name, and before the line that says so */
+.no-chat {
+    flex: none;
+    width: 8px;
+    height: 8px;
+    margin-right: 5px;
+    border: 1.5px solid var(--soft);
+    border-radius: 50%;
+}

package/dist/page/table/window.js

@@ -0,0 +1,130 @@
+import { jsx as _jsx, jsxs as _jsxs } from "preact/jsx-runtime";
+import { useEffect, useState } from "preact/hooks";
+import { Dialog } from "../dialogs/dialog.js";
+import { checkIcon } from "../dialogs/profiles.js";
+/** The chat's window: closed once a chat opens or starts again, the page then saying where it stands. */
+export function ChatDialog({ open, table, settings, onChange, name, onClose, text }) {
+    const [sending, setSending] = useState(false);
+    const [failed, setFailed] = useState(false);
+    useEffect(() => setFailed(false), [open]);
+    const words = text.table;
+    const installed = table.hosts.filter((host) => host.installed && host.name in choiceKeys);
+    // A chat opened by hand is the player's: Chesspal cannot start it again. Its rows stay readable, as the ones waiting.
+    const byHand = table.chat && !table.held;
+    const busy = sending || table.opening !== undefined || table.waiting === true;
+    const choose = async (host) => {
+        setSending(true);
+        setFailed(false);
+        const done = table.chat ? await restartChat(host) : await openChat(host);
+        setSending(false);
+        if (done) {
+            onClose();
+        }
+        else {
+            setFailed(true);
+        }
+    };
+    // While a chat opens or waits to start again, the rows wait too, and the note says why.
+    const note = installed.length === 0
+        ? words.install(name)
+        : busy
+            ? chatState(table, name, text) ?? words.choose
+            : byHand
+                ? words.byHand(name)
+                : table.chat
+                    ? words.restartHint
+                    : words.choose;
+    const offersChoices = installed.some((host) => host.models.length > 0 || host.efforts.length > 0);
+    // The chat at the table started with other choices than the ones kept now: its row starts it again with these, else it only closes the window.
+    const started = table.held ? table.started : undefined;
+    const changed = (host) => started !== undefined && (chosen(host, "model", settings) !== (started.model ?? "") || chosen(host, "effort", settings) !== (started.effort ?? ""));
+    return (_jsxs(Dialog, { open: open, title: words.title, onClose: onClose, text: text, children: [_jsx("p", { class: "note", children: note }), _jsxs("div", { class: "chat-hosts", role: "group", "aria-label": words.title, children: [offersChoices
+                        ? (_jsxs("div", { class: "chat-head", "aria-hidden": "true", children: [_jsx("span", {}), _jsx("span", { children: words.model }), _jsx("span", { children: words.effort })] }))
+                        : null, installed.map((host) => {
+                        const atTable = table.chat && table.host === host.name;
+                        const off = busy || byHand;
+                        const again = !atTable || changed(host);
+                        return (_jsxs("div", { class: "chat-host", children: [_jsxs("button", { class: "choice", type: "button", title: atTable && again ? words.restartChanged : undefined, "aria-current": atTable ? "true" : undefined, "aria-disabled": off, onClick: off ? undefined : again ? () => void choose(host.name) : onClose, children: [_jsx("span", { children: hostTitles[host.name] ?? host.name }), atTable ? (again ? restartIcon : checkIcon) : null] }), _jsx(Choice, { host: host, kind: "model", settings: settings, onChange: onChange, text: text }), _jsx(Choice, { host: host, kind: "effort", settings: settings, onChange: onChange, text: text })] }, host.name));
+                    })] }), _jsx("p", { class: "chat-state", role: "status", children: failed ? (table.chat ? words.notRestarted : words.failed) : null }), table.chat || installed.length === 0 ? null : (_jsxs("p", { class: "chat-command", children: [words.typeIt, " ", installed.map((host, index) => (_jsxs("span", { children: [index === 0 ? "" : " · ", _jsx("code", { children: host.command })] }, host.name)))] }))] }));
+}
+/** The AI's name on its card, which opens the chat's window: with no chat at the table, a hollow ring before it says so. */
+export function AiNameButton({ name, table, onOpen, text }) {
+    const title = table.chat ? text.table.change : text.table.noChat;
+    return (_jsxs("button", { class: "profile-name ai-name", type: "button", title: title, "aria-label": `${name}: ${title}`, "aria-haspopup": "dialog", onClick: onOpen, children: [table.chat ? null : _jsx("span", { class: "no-chat", "aria-hidden": "true" }), _jsx("span", { children: name }), _jsx("svg", { class: "icon", viewBox: "0 0 24 24", "aria-hidden": "true", children: _jsx("path", { d: "M7 10L12 15L17 10" }) })] }));
+}
+/**
+ * The note on the chat at the table where the asleep note stands: one opening or starting again; one waiting to, with a ↻ that starts it at once and a ×
+ * that lets the request go; in a game with no chat at the table, a line that opens the chat's window. None otherwise.
+ */
+export function tableNote({ table, name, inGame, onOpen, text }) {
+    const words = text.table;
+    const state = chatState(table, name, text);
+    if (table.waiting === true) {
+        return (_jsxs("p", { class: "asleep table-note", role: "status", children: [_jsx("span", { children: state }), _jsx("button", { class: "icon-button", type: "button", title: words.restartNow, "aria-label": words.restartNow, onClick: () => void endWaiting(true), children: restartIcon }), _jsx("button", { class: "icon-button", type: "button", title: words.cancel, "aria-label": words.cancel, onClick: () => void endWaiting(false), children: _jsx("svg", { class: "icon", viewBox: "0 0 24 24", "aria-hidden": "true", children: _jsx("path", { d: "M6 6L18 18M18 6L6 18" }) }) })] }));
+    }
+    if (state !== undefined) {
+        return _jsx("p", { class: "asleep", role: "status", children: state });
+    }
+    if (!table.chat && inGame) {
+        return (_jsx("p", { class: "asleep table-note", role: "status", children: _jsxs("button", { class: "no-chat-line", type: "button", "aria-haspopup": "dialog", onClick: onOpen, children: [_jsx("span", { class: "no-chat", "aria-hidden": "true" }), words.noChat] }) }));
+    }
+    return null;
+}
+/** What the page says of the chat at the table: one opening, starting again, or waiting to; nothing else. */
+export function chatState(table, name, text) {
+    const words = text.table;
+    if (table.waiting === true) {
+        return words.waiting(name);
+    }
+    return table.opening === "chat" ? words.opening : table.opening === "again" ? words.again(name) : table.opening === "restart" ? words.restart : undefined;
+}
+const hostTitles = { claude: "Claude Code", codex: "Codex" };
+// The settings that keep each host's choice.
+const choiceKeys = {
+    claude: { model: "claudeModel", effort: "claudeEffort" },
+    codex: { model: "codexModel", effort: "codexEffort" },
+};
+/** The ↻ of a chat that starts again. */
+const restartIcon = (_jsx("svg", { class: "icon in-use", viewBox: "0 0 24 24", "aria-hidden": "true", children: _jsx("path", { d: "M19.5 12a7.5 7.5 0 1 1-2.2-5.3M19.5 4.5v4h-4" }) }));
+/** A host's model or effort as the settings keep it: "" for the host's own, and for a choice it no longer offers. */
+function chosen(host, kind, settings) {
+    const key = choiceKeys[host.name][kind];
+    const offered = kind === "model" ? host.models : host.efforts;
+    return offered.includes(settings[key]) ? settings[key] : "";
+}
+/** A host's model or effort: a dash keeps the host's own; a choice it no longer offers shows as the dash. Its title says what it stands at, the dash too. */
+function Choice({ host, kind, settings, onChange, text }) {
+    const key = choiceKeys[host.name][kind];
+    const offered = kind === "model" ? host.models : host.efforts;
+    const value = chosen(host, kind, settings);
+    const title = hostTitles[host.name] ?? host.name;
+    if (offered.length === 0) {
+        return _jsx("span", {});
+    }
+    return (_jsxs("select", { "aria-label": `${text.table[kind]}, ${title}`, title: `${text.table[kind]}: ${value === "" ? text.table.asHost(title) : value}`, value: value, onChange: (event) => onChange({ ...settings, [key]: event.currentTarget.value }), children: [_jsx("option", { value: "", children: "\u2014" }), offered.map((one) => _jsx("option", { value: one, children: shortName(one) }, one))] }));
+}
+// Codex's models without the "gpt-" they all start with, so the choice stays narrow; the title keeps the whole name.
+function shortName(value) {
+    return value.replace(/^gpt-/, "");
+}
+/** Asks the table to open a terminal with a chat in the host: whether it did. */
+function openChat(host) {
+    return asked("/api/table/chat", { host }, (answer) => answer.opened === true);
+}
+/** Asks the table to start at once the chat that waits to start again, cutting its answer, or to let the request go. */
+function endWaiting(now) {
+    return asked("/api/table/waiting", { now }, () => true);
+}
+/** Asks the table to start its chat again with the host, at once or once it has ended its answer: whether it took the request. */
+function restartChat(host) {
+    return asked("/api/table/restart", { host }, (answer) => answer.restarting === true || answer.waiting === true);
+}
+async function asked(path, body, done) {
+    try {
+        const response = await fetch(path, { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify(body) });
+        return response.ok && done((await response.json()));
+    }
+    catch {
+        return false;
+    }
+}

package/dist/page/talk/chat.css

@@ -21,6 +21,11 @@
 }
 
 /* The thread reads in time's order whichever way the board is turned: the newest words just over the box (Zoe) */
+.flipped .talk.studied,
+.flipped .talk.studied > section {
+    flex-direction: column;
+}
+
 .flipped .talk.studied .sent {
     justify-content: flex-end;
     margin: 0 0 8px;
@@ -50,10 +55,21 @@
     }
 }
 
-/* The AI's answers on the left, in its bubbles, without the tail that points at the Torretta: it is not by them */
+/* The AI's answers on the left, in its bubbles, each with a small Torretta at its foot instead of the tail that points at the big one: it is not by them (Stefano) */
 .sent li.from-ai {
     align-self: flex-start;
-    align-items: flex-start;
+    flex-direction: row;
+    align-items: flex-end;
+    gap: 6px;
+}
+
+.sent li.from-ai > .torretta {
+    flex: none;
+}
+
+/* The bubble's foot level with the Torretta's, spaced as the player's lines are */
+.sent li.from-ai > .say {
+    margin: 0;
 }
 
 .talk.studied .sent .say::before,
@@ -71,9 +87,11 @@
     display: flex;
     align-items: center;
     gap: 1px;
-    margin: 0 0 2px;
-    padding: 0;
+    min-height: 24px;
+    margin: -2px 0 2px -6px;
+    padding: 2px 6px;
     border: 0;
+    border-radius: 6px;
     background: none;
     color: inherit;
     font: inherit;
@@ -86,5 +104,5 @@
 .shown-move:hover,
 .shown-move:focus-visible {
     opacity: 1;
-    text-decoration: underline;
+    background: color-mix(in oklab, currentColor 15%, transparent);
 }

package/dist/page/talk/talk.css

@@ -1,23 +1,42 @@
 /* The talk's column: the players' cards with their pictures and names, the faces, the words said and the box to write in, the card of a page offline,
    and the notes laid over the board between games */
 
-/* The picture stays at the card's top left, however many lines the card has; the clock in the middle */
+/* The picture at the card's top left, the clock at its top right (Stefano); the pieces taken and the badges under the name, run to the card's edge, under
+   the clock too; the button that starts the clocks, or the next game, takes the card's width below */
 .player-line {
-    display: flex;
-    align-items: flex-start;
-    gap: 12px;
+    display: grid;
+    grid-template-columns: auto minmax(0, 1fr) auto;
+    grid-template-rows: auto 1fr;
+    column-gap: 12px;
+    align-items: start;
+}
+
+.player-line > :first-child {
+    grid-column: 1;
+    grid-row: 1;
+}
+
+.player-line:has(> .haul) > :first-child {
+    grid-row: 1 / span 2;
+}
+
+.player-line > .who {
+    grid-column: 2;
+    grid-row: 1;
 }
 
 .player-line > .clock {
-    align-self: center;
+    grid-column: 3;
+    grid-row: 1;
 }
 
-.player-line > svg {
-    flex: none;
+.player-line > .haul {
+    grid-column: 2 / -1;
+    grid-row: 2;
+    min-width: 0;
 }
 
 .who {
-    flex: 1;
     min-width: 0;
     line-height: 1.25;
 }
@@ -76,14 +95,11 @@
 
 /* The clocks wait for the player (Zoe): the button that starts them takes a line of the player's card, under the clock it starts, off the board's squares;
    between games the new game takes the same line, in the clock's place (D-77) */
-.player-line:has(> .start-clocks, > .next-game) {
-    flex-wrap: wrap;
-    row-gap: 10px;
-}
-
 .start-clocks,
 .next-game {
-    flex: 1 0 100%;
+    grid-column: 1 / -1;
+    grid-row: 3;
+    margin-top: 10px;
     justify-content: center;
     padding: 8px 14px;
     font-size: 15px;
@@ -107,7 +123,8 @@
     align-self: center;
 }
 
-.player-line > .who:not(:has(.note)) .taken:empty {
+/* In analysis, a side that took nothing has its badges right under its name */
+.haul:has(> .badge-counts) > .taken:empty {
     display: none;
 }
 
@@ -430,6 +447,12 @@
     display: none;
 }
 
+/* A bubble keeps its height: one that does not fit is hidden whole, the newest scrolls in itself (talk.tsx) */
+.says > li,
+.sent > li {
+    flex: none;
+}
+
 .say {
     position: relative;
     background: var(--say);
@@ -646,11 +669,6 @@
     margin: 8px 0 0;
 }
 
-/* In analysis nothing in the talk gives way: on a short screen the talk scrolls whole */
-.talk.studied {
-    overflow-y: auto;
-}
-
 .talk.studied > section,
 .talk.studied > section > * {
     flex: none;
@@ -703,12 +721,6 @@
     margin-top: 4px;
 }
 
-/* In analysis the board turned round changes which side's card is on top, never the order of the talk */
-.flipped .talk.studied,
-.flipped .talk.studied > section {
-    flex-direction: column;
-}
-
 .move-note .head {
     display: flex;
     align-items: center;

package/dist/page/talk/talk.js

@@ -60,7 +60,7 @@ export function Legend({ review, words }) {
 /**
  * The player's words of the game, the newest by the box they write in with how far it got, and the box: Enter or the button sends the words alone, the next
  * move takes them with it. 200 characters from one move of the AI's to the next: once they are written, the box goes until its move (D-54). In analysis the
- * AI's answers are in the same thread, and each line of the player's names the move it was written on (D-101).
+ * AI's answers are in the same thread, each by a small Torretta, and each line of the player's names the move it was written on (D-101).
  */
 export function Compose({ lines, newestFirst, spent, draft, onDraft, onSend, canMove, name, problem, about, text }) {
     const list = useRef(null);
@@ -76,7 +76,7 @@ export function Compose({ lines, newestFirst, spent, draft, onDraft, onSend, can
         }
     };
     return (_jsxs(_Fragment, { children: [_jsx("ol", { ref: list, class: "sent", "aria-live": "polite", children: inOrder(lines.map((line, index) => (_jsxs("li", { class: line.who === "ai" ? "from-ai" : undefined, style: about === undefined ? aged(lines.length - 1 - index) : reread(index, lastAnswer), children: [line.who === "ai"
-                            ? (_jsx("p", { class: "say", children: _jsx(Marked, { text: line.text }) }))
+                            ? (_jsxs(_Fragment, { children: [_jsx(Torretta, { size: 24 }), _jsx("p", { class: "say", children: _jsx(Marked, { text: line.text }) })] }))
                             : (_jsxs("p", { class: "said", children: [about === undefined || line.shown?.move === undefined ? null : _jsx(ShownMove, { move: line.shown.move, onShow: () => about.onShow(line.shown.at), text: text }), line.text] })), index === lastWritten ? _jsx(Status, { heard: line.heard, name: name, text: text }) : null] }, index))), newestFirst) }), left <= 0 ? null : (_jsxs("form", { class: about === undefined ? "compose" : "compose asking", onSubmit: (event) => {
                     event.preventDefault();
                     submit();
@@ -164,13 +164,15 @@ function useOnlyWhole(list, lines, newestFirst = false) {
         }
         const fit = () => {
             const box = element.getBoundingClientRect();
+            const padding = getComputedStyle(element);
+            const room = element.clientHeight - parseFloat(padding.paddingTop) - parseFloat(padding.paddingBottom);
             const newest = newestFirst ? element.firstElementChild : element.lastElementChild;
             for (const item of element.children) {
                 const place = item.getBoundingClientRect();
                 const style = item.style;
                 // The newest never hides: one longer than the column, as a note with the helps on (D-78), scrolls in itself.
-                style.maxHeight = item === newest ? box.height + "px" : "";
-                style.overflowY = item === newest && item.scrollHeight > box.height ? "auto" : "";
+                style.maxHeight = item === newest ? room + "px" : "";
+                style.overflowY = item === newest && item.scrollHeight > room ? "auto" : "";
                 style.visibility = item === newest || (place.top >= box.top - 1 && place.bottom <= box.bottom + 1) ? "" : "hidden";
             }
         };