chesspal 0.2.4 → 0.3.1

package/dist/page/guide/guide.css

@@ -0,0 +1,200 @@
+/* The guide: a tall dialog, an index of chips, each part folding under its title, and the foot with who made Chesspal and the credits (Zoe) */
+
+.dialog:has(> .guide) {
+    height: calc(100vh - 48px);
+    max-height: 90vh;
+}
+
+.guide {
+    font-size: 14px;
+    line-height: 1.55;
+}
+
+.guide p,
+.guide ul,
+.guide ol {
+    margin: 0 0 10px;
+}
+
+.guide ul,
+.guide ol {
+    padding-inline-start: 22px;
+}
+
+.guide li + li {
+    margin-top: 4px;
+}
+
+.guide a {
+    color: var(--accent);
+}
+
+.guide code {
+    padding: 1px 5px;
+    border-radius: 4px;
+    background: var(--quote);
+    font-size: 13px;
+}
+
+/* A heading a chip or a link brings into sight stays under the dialog's own title */
+.guide [id] {
+    scroll-margin-top: 64px;
+}
+
+.guide-index {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+    margin: 4px 0 14px;
+}
+
+.guide-chip {
+    min-height: 32px;
+    padding: 5px 12px;
+    border: 1px solid var(--line);
+    border-radius: 999px;
+    background: var(--card);
+    color: var(--ink);
+    font: inherit;
+    font-size: 13px;
+}
+
+.guide-chip:hover {
+    border-color: var(--accent);
+    color: var(--accent);
+}
+
+/* A part: its title, a chevron that turns when it opens */
+.guide-part {
+    border-top: 1px solid var(--line);
+}
+
+.guide-part summary {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 10px 0;
+    cursor: pointer;
+    list-style: none;
+}
+
+.guide-part summary::-webkit-details-marker {
+    display: none;
+}
+
+.guide-part summary::before,
+.credits summary::before {
+    content: "";
+    width: 7px;
+    height: 7px;
+    border-right: 1.7px solid var(--soft);
+    border-bottom: 1.7px solid var(--soft);
+    transform: rotate(-45deg);
+    transition: transform 0.15s;
+}
+
+.guide-part[open] summary::before,
+.credits[open] summary::before {
+    transform: rotate(45deg);
+}
+
+.guide-part h3 {
+    margin: 0;
+    font-size: 16px;
+    font-weight: 600;
+}
+
+.guide-part[open] {
+    padding-bottom: 6px;
+}
+
+.guide-table {
+    overflow-x: auto;
+    margin: 0 0 10px;
+}
+
+.guide-table table {
+    border-collapse: collapse;
+}
+
+.guide-table th,
+.guide-table td {
+    padding: 6px 10px;
+    border-bottom: 1px solid var(--line);
+    text-align: start;
+    vertical-align: top;
+}
+
+/* The foot: who made Chesspal, where it lives, the heart that supports it; the credits folded under it */
+.guide-foot {
+    display: grid;
+    gap: 6px;
+    margin-top: 18px;
+    padding-top: 14px;
+    border-top: 1px solid var(--line);
+    color: var(--soft);
+    font-size: 12.5px;
+    text-align: center;
+}
+
+.guide-foot p {
+    margin: 0;
+}
+
+.foot-own {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: center;
+    gap: 6px 14px;
+}
+
+.guide .foot-own a {
+    display: inline-flex;
+    align-items: center;
+    gap: 5px;
+    color: inherit;
+    text-decoration: none;
+}
+
+.guide .foot-own a:hover,
+.guide .foot-own a:focus-visible {
+    color: var(--ink);
+}
+
+.foot-own .icon {
+    width: 16px;
+    height: 16px;
+}
+
+.foot-support .icon {
+    color: var(--low-time);
+}
+
+.credits summary {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    cursor: pointer;
+    list-style: none;
+}
+
+.credits summary::-webkit-details-marker {
+    display: none;
+}
+
+.credits ul {
+    margin: 8px auto 0;
+    max-width: 60ch;
+    text-align: start;
+}
+
+@media (max-width: 600px) {
+    .dialog:has(> .guide) {
+        width: 100vw;
+        max-width: 100vw;
+        height: 100vh;
+        max-height: 100vh;
+        border-radius: 0;
+    }
+}

package/dist/page/guide/guide.js

@@ -0,0 +1,89 @@
+import { jsx as _jsx, jsxs as _jsxs } from "preact/jsx-runtime";
+// The guide, from the book in the header: how to play, in the page's language (guide/<code>.md), an index of chips, its parts folding, the first two
+// open, and its foot; its anchors are the English guide's, so that a link finds its heading in both languages.
+import { useEffect, useMemo, useState } from "preact/hooks";
+import { Dialog } from "../dialogs/dialog.js";
+import { anchorOf, markdownBlocks } from "./blocks.js";
+import { GuideFoot } from "./foot.js";
+import { Blocks, Inline } from "./markdown.js";
+/** The guide in its dialog. */
+export function GuideDialog({ open, onClose, text }) {
+    return (_jsx(Dialog, { open: open, title: text.guide.title, onClose: onClose, text: text, children: _jsx(Guide, { text: text }) }));
+}
+function Guide({ text }) {
+    const guide = useGuide(text.language);
+    const [open, setOpen] = useState(() => new Set([0, 1]));
+    const [sought, setSought] = useState();
+    const { lead, parts, anchors } = useMemo(() => guideParts(guide.own, guide.english), [guide]);
+    const toggle = (index, event) => {
+        event.preventDefault();
+        setOpen((before) => new Set(before.has(index) ? [...before].filter((one) => one !== index) : [...before, index]));
+    };
+    // A chip of the index, or a link to a heading, opens its part and brings the heading into sight.
+    const go = (id) => {
+        const index = parts.findIndex((part) => [part.heading, ...part.blocks].some((block) => anchors.get(block) === id));
+        if (index >= 0) {
+            setOpen((before) => new Set([...before, index]));
+            setSought(id);
+        }
+    };
+    const goToAnchor = (anchor) => go(idOf(anchor));
+    useEffect(() => {
+        if (sought === undefined) {
+            return;
+        }
+        setSought(undefined);
+        document.getElementById(sought)?.scrollIntoView({ block: "start", behavior: matchMedia("(prefers-reduced-motion: reduce)").matches ? "auto" : "smooth" });
+    }, [sought]);
+    return (_jsxs("div", { class: "guide", children: [_jsx(Blocks, { blocks: lead, anchors: anchors, go: goToAnchor }), _jsx("nav", { class: "guide-index", "aria-label": text.guide.contents, children: parts.map((part) => (_jsx("button", { type: "button", class: "guide-chip", onClick: () => go(anchors.get(part.heading) ?? ""), children: _jsx(Inline, { text: part.heading.text, go: goToAnchor }) }, part.heading.text))) }), parts.map((part, index) => (_jsxs("details", { id: anchors.get(part.heading), class: "guide-part", open: open.has(index), children: [_jsx("summary", { onClick: (event) => toggle(index, event), children: _jsx("h3", { children: part.heading.text }) }), _jsx(Blocks, { blocks: part.blocks, anchors: anchors, go: goToAnchor })] }, part.heading.text))), _jsx(GuideFoot, { text: text })] }));
+}
+/** The guide in a language, and in English for its anchors; empty until they are read. */
+function useGuide(language) {
+    const [guide, setGuide] = useState({ own: "", english: "" });
+    useEffect(() => {
+        let current = true;
+        void Promise.all([guideIn("en"), language === "en" ? Promise.resolve("") : guideIn(language)]).then(([english, own]) => {
+            if (current) {
+                setGuide({ own: own === "" ? english : own, english });
+            }
+        });
+        return () => {
+            current = false;
+        };
+    }, [language]);
+    return guide;
+}
+// Each language's guide is read once while the page lives; one the server did not give is asked again the next time.
+const read = new Map();
+function guideIn(language) {
+    const known = read.get(language) ?? fetch(`/page/guide/${language}.md`).then((response) => (response.ok ? response.text() : Promise.reject(new Error(response.statusText))));
+    read.set(language, known);
+    return known.catch(() => {
+        read.delete(language);
+        return "";
+    });
+}
+/** The guide's lead, the lines before its first part, its title aside; its parts; and each heading's anchor, the English one at its place. */
+function guideParts(own, english) {
+    const blocks = markdownBlocks(own);
+    const headings = blocks.filter((block) => block.kind === "heading");
+    const englishHeadings = markdownBlocks(english).filter((block) => block.kind === "heading");
+    const sameShape = headings.length === englishHeadings.length && headings.every((heading, index) => heading.level === englishHeadings[index]?.level);
+    const anchors = new Map(headings.map((heading, index) => [heading, idOf(anchorOf((sameShape ? englishHeadings[index] : heading)?.text ?? heading.text))]));
+    const first = blocks.findIndex((block) => block.kind === "heading" && block.level === 2);
+    const lead = (first < 0 ? blocks : blocks.slice(0, first)).filter((block) => !(block.kind === "heading" && block.level === 1));
+    const parts = [];
+    for (const block of first < 0 ? [] : blocks.slice(first)) {
+        if (block.kind === "heading" && block.level === 2) {
+            parts.push({ heading: block, blocks: [] });
+        }
+        else {
+            parts.at(-1)?.blocks.push(block);
+        }
+    }
+    return { lead, parts, anchors };
+}
+// A heading's id on the page, apart from the page's own.
+function idOf(anchor) {
+    return `guide-${anchor}`;
+}

package/dist/page/guide/it.md

@@ -0,0 +1,66 @@
+# Chesspal: la guida
+
+Con **Chesspal** giochi a scacchi contro un'**AI**, su una scacchiera vera nel browser, e impari con lei. Questa guida è per chi gioca: non serve saper programmare.
+
+## Come funziona
+
+| Chi | Cosa fa |
+|---|---|
+| **Tu** | Muovi sulla scacchiera e parli con l'AI. |
+| **L'AI** | Gioca, ragiona, giudica le mosse e ti risponde, nella sua chat. |
+| **Chesspal** | Tiene le regole, la scacchiera, l'orologio e le tue partite, e passa all'AI i fatti della posizione. |
+
+Le finestre sono due: questa **pagina**, con la scacchiera, e la **chat** dell'AI, in una finestra a parte. L'AI gioca da lì, e Chesspal la collega alla pagina.
+
+Nessun motore di scacchi gioca al posto dell'AI: ogni mossa e ogni giudizio sono suoi. Chesspal controlla che ogni mossa sia legale e dice all'AI cosa c'è sulla scacchiera: i pezzi attaccati e difesi, le inchiodature, il nome dell'apertura.
+
+## Avvio rapido
+
+1. Installa **Node.js** da [nodejs.org](https://nodejs.org), la versione consigliata (LTS), e un'AI col tuo abbonamento: **Claude Code** o **Codex**.
+2. Apri un terminale, la finestra dove si scrivono i comandi (su Windows il Prompt dei comandi: tasto Start, scrivi `cmd`, Invio; su macOS il Terminale), e scrivi `npm install -g chesspal`, poi `chesspal`: si apre questa pagina. La prima volta ti propone un'icona sul desktop, per aprirla con un doppio clic.
+3. Premi **Claude Code** o **Codex**: la chat dell'AI si apre in una finestra sua. Tienila aperta mentre giochi.
+4. Premi **Nuova partita**, scegli il colore, l'orologio e il livello dell'AI, e premi **Inizia**.
+
+## Se ti sei perso
+
+- **L'AI non risponde**: guarda la sua finestra. Se ti sta chiedendo qualcosa, rispondi lì; se l'hai chiusa, premi di nuovo **Claude Code** o **Codex**.
+- **La pagina non si apre**: fai doppio clic sull'icona di Chesspal, o aprila come nell'[Avvio rapido](#quick-start).
+- **Le tue partite** stanno in una cartella sul tuo computer: **Chi gioca?**, dalla tua immagine in alto a destra, dice dove, e **Apri la cartella** la apre.
+
+## La chat dell'AI
+
+- La pagina apre la **chat** dell'AI coi suoi pulsanti, in una finestra a parte: lì l'AI pensa e scrive. Accanto ai pulsanti scegli il modello (la versione dell'AI) e quanto ragiona: più ragiona, più gioca lenta.
+- Parli con l'AI nella casella sotto il suo nome, qualche parola a ogni mossa: le legge con la tua mossa. Puoi scriverle anche nella sua finestra.
+- Anche una **mossa scritta** nella chat vale: `e4`, `Nf3`, con le lettere inglesi dei pezzi (K Q R B N), o a parole.
+- A ogni **nuova partita** la chat aperta dalla pagina riparte pulita da sola, se l'AI ha finito di pensare: una chat lunga rende l'AI più lenta.
+
+## La partita
+
+- **Muovi** trascinando un pezzo, o cliccando il pezzo e poi la sua casa. I pallini segnano le mosse legali; quando una mossa è vietata, la pagina dice perché.
+- **L'orologio**, se ne hai scelto uno, parte con **Inizia**. Anche l'AI ha il suo, e sa quanto tempo le resta.
+- **Proponi patta** nel tuo turno, dopo una mossa a testa; **Abbandona** chiude la partita.
+- **Gli aiuti**: con «L'AI ti insegna mentre giochi», nelle impostazioni, la scheda **Aiuti** mostra i pezzi in pericolo, le inchiodature e i pedoni, e l'AI, da allenatore, ti dà un'idea. L'AI disegna frecce colorate sulla scacchiera: il **?** accanto alle mosse spiega ogni segno.
+- **Gira** volta la scacchiera; **PGN** salva le mosse nel file che leggono tutti i siti di scacchi, da aprire su Lichess o Chess.com.
+
+## Il ripasso e l'analisi
+
+- A partita finita premi **Analizza la partita**: l'AI la ripassa e mette sulle mosse i suoi giudizi e le sue note. Le leggi scorrendo le mosse con le frecce.
+- **Analisi**, nell'intestazione, apre le tue analisi e carica una partita giocata altrove: incolla il suo PGN, o scegli un file .pgn.
+- Chiedi all'AI della partita nella casella sotto il suo nome.
+- **PGN annotato** salva la partita coi commenti.
+
+## I giocatori e il profilo
+
+- **Chi gioca?**: la tua immagine in alto a destra sceglie un giocatore o ne aggiunge uno. Ognuno ha le sue partite e le sue impostazioni.
+- **Il tuo profilo**: un clic sulla tua immagine accanto alla scacchiera, o la matita in **Chi gioca?**, cambia la tua immagine, il nome, come giochi, i tuoi nomi su Lichess e Chess.com e il tuo punteggio FIDE.
+- **Il tuo punteggio**: dai tuoi nomi lì, Chesspal legge il tuo punteggio pubblico, quello delle partite rapide se le giochi, e lo dice all'AI. Niente password: quel punteggio lo vede chiunque sul sito. Senza un nome lì, l'AI sa come giochi da **Come giochi?**
+- **Il punteggio FIDE**, se giochi tornei, lo scrivi tu: nessun sito lo dà a Chesspal. L'AI lo legge accanto a quello del sito, ognuno per sé.
+- Se carichi una partita giocata su Lichess o Chess.com, Chesspal sa da che colore giocavi tu.
+
+## Domande e problemi
+
+- **L'AI è lenta**: ogni mossa la pensa davvero. Scegli un modello più veloce, o meno ragionamento, accanto ai pulsanti della chat.
+- **Quanto costa**: Chesspal è gratis; l'AI usa il tuo abbonamento, e non paghi niente in più.
+- **L'AI può fare una mossa illegale?** No: Chesspal controlla ogni mossa. I suoi giudizi però sono suoi, e un'AI può sbagliare, come una persona.
+- **Un backup**: copia la cartella delle tue partite, con la chat e la pagina chiuse.
+- **Qualcosa non va?** Raccontacelo su [GitHub](https://github.com/stefanocaronia/chesspal/issues): cosa hai fatto, cosa ti aspettavi, cosa è successo. GitHub è il sito dove si fa Chesspal: ci scrivi con un account gratuito, e chiunque può leggere.

package/dist/page/guide/markdown.js

@@ -0,0 +1,67 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "preact/jsx-runtime";
+/** Blocks drawn as the page's elements: headings one level under the part's, each with the anchor given by its place among them; a link to an anchor calls go. */
+export function Blocks({ blocks, anchors, go }) {
+    return _jsx(_Fragment, { children: blocks.map((block, index) => _jsx(BlockView, { block: block, anchors: anchors, go: go }, index)) });
+}
+/** A line's text with its bold, italic, code and links. */
+export function Inline({ text, go }) {
+    const parts = [];
+    const marks = /\*\*(.+?)\*\*|\*(.+?)\*|`([^`]+)`|\[([^\]]+)\]\(([^)\s]+)\)/g;
+    let from = 0;
+    for (const match of text.matchAll(marks)) {
+        parts.push(text.slice(from, match.index));
+        const [, bold, italic, code, label, target] = match;
+        const key = match.index;
+        if (bold !== undefined) {
+            parts.push(_jsx("strong", { children: _jsx(Inline, { text: bold, go: go }) }, key));
+        }
+        else if (italic !== undefined) {
+            parts.push(_jsx("em", { children: _jsx(Inline, { text: italic, go: go }) }, key));
+        }
+        else if (code !== undefined) {
+            parts.push(_jsx("code", { children: code }, key));
+        }
+        else {
+            parts.push(_jsx(LinkView, { label: label ?? "", target: target ?? "", go: go }, key));
+        }
+        from = match.index + match[0].length;
+    }
+    parts.push(text.slice(from));
+    return _jsx(_Fragment, { children: parts });
+}
+function BlockView({ block, anchors, go }) {
+    switch (block.kind) {
+        case "heading": {
+            const Tag = `h${Math.min(block.level + 1, 6)}`;
+            return (_jsx(Tag, { id: anchors.get(block), children: _jsx(Inline, { text: block.text, go: go }) }));
+        }
+        case "paragraph":
+            return (_jsx("p", { children: _jsx(Inline, { text: block.text, go: go }) }));
+        case "list": {
+            const items = block.items.map((item, index) => (_jsx("li", { children: _jsx(Inline, { text: item, go: go }) }, index)));
+            return block.ordered ? _jsx("ol", { children: items }) : _jsx("ul", { children: items });
+        }
+        case "table":
+            return (_jsx("div", { class: "guide-table", children: _jsxs("table", { children: [_jsx("thead", { children: _jsx("tr", { children: block.head.map((cell, index) => (_jsx("th", { scope: "col", children: _jsx(Inline, { text: cell, go: go }) }, index))) }) }), _jsx("tbody", { children: block.rows.map((row, index) => (_jsx("tr", { children: row.map((cell, column) => (_jsx("td", { children: _jsx(Inline, { text: cell, go: go }) }, column))) }, index))) })] }) }));
+        case "quote":
+            return (_jsx("blockquote", { children: _jsx(Blocks, { blocks: block.blocks, anchors: anchors, go: go }) }));
+        case "code":
+            return _jsx("pre", { children: _jsx("code", { children: block.text }) });
+        case "rule":
+            return null;
+    }
+}
+/** A link: to a heading of the guide, which go brings into sight, leaving the address as it is (it names the game); to a page of the web, in a new tab. */
+function LinkView({ label, target, go }) {
+    if (target.startsWith("#")) {
+        return (_jsx("a", { href: target, onClick: (event) => {
+                event.preventDefault();
+                go(target.slice(1));
+            }, children: _jsx(Inline, { text: label, go: go }) }));
+    }
+    // Only a web address is a link, never a script.
+    if (!/^https?:\/\//i.test(target)) {
+        return _jsx(Inline, { text: label, go: go });
+    }
+    return (_jsx("a", { href: target, target: "_blank", rel: "noreferrer", children: _jsx(Inline, { text: label, go: go }) }));
+}

package/dist/page/helps/helps.css

@@ -146,8 +146,9 @@
     stroke-dasharray: 0.22 0.11 0 0.11;
 }
 
-/* The map (Zoe, after the round): every square on one neutral ground, then light where only White reaches, dark where only Black does, half and half
-   when both do; the two counts together in the middle, as a domino. The drawings and the pieces step back */
+/* The map (Zoe's veil, Stefano's choice): a grey veil flattens the board, sand where only White reaches, slate where only Black does; the squares both reach
+   and those none does stay grey, and their counts speak, together in the middle as a domino. Never an opaque ground: the square shows through. The drawings
+   and the pieces step back */
 .board.mapping ~ .arrows,
 .board.mapping .move-badge {
     opacity: 0.12;
@@ -158,26 +159,22 @@
 }
 
 .board.mapping .piece {
-    opacity: 0.45;
+    opacity: 0.5;
 }
 
 .control-ground {
     position: absolute;
     inset: 0;
     pointer-events: none;
-    background: #8d96a1;
+    background: var(--map-veil);
 }
 
 .control-ground.white {
-    background: #eef1f4;
+    background: var(--map-white);
 }
 
 .control-ground.black {
-    background: #2b323c;
-}
-
-.control-ground.both {
-    background: linear-gradient(135deg, #eef1f4 50%, #2b323c 50%);
+    background: var(--map-black);
 }
 
 .control-count {

package/dist/page/layout/favicon.svg

@@ -0,0 +1,13 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
+<!-- Chesspal, the favicon: the Torretta with its neutral face, on a grid of 16 pixels. © 2026 Stefano Caronia, Chesspal (https://github.com/stefanocaronia/chesspal), under the licence CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/), crediting "Stefano Caronia, Chesspal". -->
+<rect x="15" y="4" width="2" height="4" fill="#4b7cb0"/>
+<rect x="14" y="0" width="4" height="4" rx="2" fill="#f4c84c"/>
+<rect x="2" y="18" width="4" height="8" rx="1" fill="#4b7cb0"/>
+<rect x="26" y="18" width="4" height="8" rx="1" fill="#4b7cb0"/>
+<path d="M4 8H10V12H14V8H18V12H22V8H28V16L26 18V28H6V18L4 16Z" fill="#6d9fd1"/>
+<rect x="2" y="28" width="28" height="4" rx="1" fill="#4b7cb0"/>
+<rect x="8" y="14" width="16" height="12" rx="1.5" fill="#16263a"/>
+<rect x="10" y="16" width="4" height="4" rx="1" fill="#f2f7fc"/>
+<rect x="18" y="16" width="4" height="4" rx="1" fill="#f2f7fc"/>
+<rect x="14" y="22" width="4" height="2" rx="1" fill="#f2f7fc"/>
+</svg>

package/dist/page/layout/header.js

@@ -4,10 +4,10 @@ import { Torretta } from "../avatars/torretta.js";
 /**
  * The header, with how a game over ended, or that none goes on (D-77), or the AI's draw offer with the player's answer, the player's draw
  * and resignation in a game going on (D-65), a new game once the page has the folder's, the command that turns the board round and says whether it is
- * turned, the switches of the sounds and the theme, and the gear of the settings (D-56).
+ * turned, the switches of the sounds and the theme, the gear of the settings (D-56) and the book of the guide.
  */
-export function Header({ text, verdict, kind, who, actions, onNewGame, standOut = false, onStudy, flipped, onFlip, sound, onSound, onTheme, onSettings, profile, onProfile }) {
-    return (_jsxs("header", { class: "top", children: [_jsx(Torretta, { size: 34 }), _jsx("b", { class: "title", children: "Chesspal" }), _jsxs("p", { class: `verdict${kind === undefined ? "" : ` ${kind}`}`, role: "status", children: [verdict === undefined || kind === undefined ? null : _jsx(Icon, { class: "kind", children: kindIcons[kind] }), who === undefined || verdict === undefined ? verdict : (_jsxs(_Fragment, { children: [_jsx("span", { class: "ai-name", children: who }), _jsx("span", { children: verdict })] }))] }), actions === undefined ? null : _jsx(Actions, { actions: actions, text: text }), onNewGame === undefined ? null : (_jsxs("button", { class: standOut ? "command primary" : "command", type: "button", title: text.newGame, onClick: onNewGame, children: [_jsx(Icon, { class: "new", children: _jsx("path", { d: "M12 5V19M5 12H19" }) }), _jsx("span", { children: text.newGame })] })), onStudy === undefined ? null : (_jsxs("button", { class: "command", type: "button", title: text.study.title, onClick: onStudy, children: [_jsxs(Icon, { class: "study", children: [_jsx("circle", { cx: "10.5", cy: "10.5", r: "5.5" }), _jsx("path", { d: "M14.5 14.5L20 20" })] }), _jsx("span", { children: text.study.title })] })), _jsxs("button", { class: "command", type: "button", title: text.flip, "aria-pressed": flipped, onClick: onFlip, children: [_jsx(Icon, { class: "flip", children: _jsx("path", { d: "M7 4V17M7 17L4 14M7 17L10 14M17 20V7M17 7L14 10M17 7L20 10" }) }), _jsx("span", { children: text.flip })] }), _jsx("button", { class: "icon-button", type: "button", title: text.sounds, "aria-label": text.sounds, "aria-pressed": sound, onClick: onSound, children: _jsxs(Icon, { class: "speaker", children: [_jsx("path", { d: "M5 9.5H8.5L13 5.5V18.5L8.5 14.5H5Z" }), sound ? _jsx("path", { d: "M16.5 9A4 4 0 0 1 16.5 15M19 6.5A7.5 7.5 0 0 1 19 17.5" }) : _jsx("path", { d: "M15.5 9L21.5 15M21.5 9L15.5 15" })] }) }), _jsxs("button", { class: "icon-button", type: "button", title: text.theme, "aria-label": text.theme, onClick: onTheme, children: [_jsxs(Icon, { class: "sun", children: [_jsx("circle", { cx: "12", cy: "12", r: "4" }), _jsx("path", { d: "M12 2V4M12 20V22M2 12H4M20 12H22M4.9 4.9L6.3 6.3M17.7 17.7L19.1 19.1M4.9 19.1L6.3 17.7M17.7 6.3L19.1 4.9" })] }), _jsx(Icon, { class: "moon", children: _jsx("path", { d: "M20 14.5A8 8 0 1 1 9.5 4A6.5 6.5 0 0 0 20 14.5Z" }) })] }), _jsx("button", { class: "icon-button", type: "button", title: text.settings, "aria-label": text.settings, onClick: onSettings, children: _jsxs(Icon, { class: "gear", children: [_jsx("circle", { cx: "12", cy: "12", r: "3" }), _jsx("path", { d: "M9.72 5.38L10.19 2.67L13.81 2.67L14.28 5.38L15.07 5.71L17.31 4.12L19.88 6.69L18.29 8.93L18.62 9.72L21.33 10.19L21.33 13.81L18.62 14.28L18.29 15.07L19.88 17.31L17.31 19.88L15.07 18.29L14.28 18.62L13.81 21.33L10.19 21.33L9.72 18.62L8.93 18.29L6.69 19.88L4.12 17.31L5.71 15.07L5.38 14.28L2.67 13.81L2.67 10.19L5.38 9.72L5.71 8.93L4.12 6.69L6.69 4.12L8.93 5.71Z" })] }) }), profile === undefined || onProfile === undefined ? null : (_jsx("button", { class: "icon-button player", type: "button", title: `${profile.name}: ${text.profile.profiles}`, "aria-label": `${profile.name}: ${text.profile.profiles}`, "aria-haspopup": "dialog", onClick: onProfile, children: _jsx(PlayerPicture, { profile: profile, size: 28 }) }))] }));
+export function Header({ text, verdict, kind, who, actions, onNewGame, standOut = false, onStudy, flipped, onFlip, sound, onSound, onTheme, onSettings, onGuide, profile, onProfile }) {
+    return (_jsxs("header", { class: "top", children: [_jsx(Torretta, { size: 34 }), _jsx("b", { class: "title", children: "Chesspal" }), _jsxs("p", { class: `verdict${kind === undefined ? "" : ` ${kind}`}`, role: "status", children: [verdict === undefined || kind === undefined ? null : _jsx(Icon, { class: "kind", children: kindIcons[kind] }), who === undefined || verdict === undefined ? verdict : (_jsxs(_Fragment, { children: [_jsx("span", { class: "ai-name", children: who }), _jsx("span", { children: verdict })] }))] }), actions === undefined ? null : _jsx(Actions, { actions: actions, text: text }), onNewGame === undefined ? null : (_jsxs("button", { class: standOut ? "command primary" : "command", type: "button", title: text.newGame, onClick: onNewGame, children: [_jsx(Icon, { class: "new", children: _jsx("path", { d: "M12 5V19M5 12H19" }) }), _jsx("span", { children: text.newGame })] })), onStudy === undefined ? null : (_jsxs("button", { class: "command", type: "button", title: text.study.title, onClick: onStudy, children: [_jsxs(Icon, { class: "study", children: [_jsx("circle", { cx: "10.5", cy: "10.5", r: "5.5" }), _jsx("path", { d: "M14.5 14.5L20 20" })] }), _jsx("span", { children: text.study.title })] })), _jsxs("button", { class: "command", type: "button", title: text.flip, "aria-pressed": flipped, onClick: onFlip, children: [_jsx(Icon, { class: "flip", children: _jsx("path", { d: "M7 4V17M7 17L4 14M7 17L10 14M17 20V7M17 7L14 10M17 7L20 10" }) }), _jsx("span", { children: text.flip })] }), _jsx("button", { class: "icon-button sound-button", type: "button", title: text.sounds, "aria-label": text.sounds, "aria-pressed": sound, onClick: onSound, children: _jsxs(Icon, { class: "speaker", children: [_jsx("path", { d: "M5 9.5H8.5L13 5.5V18.5L8.5 14.5H5Z" }), sound ? _jsx("path", { d: "M16.5 9A4 4 0 0 1 16.5 15M19 6.5A7.5 7.5 0 0 1 19 17.5" }) : _jsx("path", { d: "M15.5 9L21.5 15M21.5 9L15.5 15" })] }) }), _jsxs("button", { class: "icon-button theme-button", type: "button", title: text.theme, "aria-label": text.theme, onClick: onTheme, children: [_jsxs(Icon, { class: "sun", children: [_jsx("circle", { cx: "12", cy: "12", r: "4" }), _jsx("path", { d: "M12 2V4M12 20V22M2 12H4M20 12H22M4.9 4.9L6.3 6.3M17.7 17.7L19.1 19.1M4.9 19.1L6.3 17.7M17.7 6.3L19.1 4.9" })] }), _jsx(Icon, { class: "moon", children: _jsx("path", { d: "M20 14.5A8 8 0 1 1 9.5 4A6.5 6.5 0 0 0 20 14.5Z" }) })] }), _jsx("button", { class: "icon-button", type: "button", title: text.settings, "aria-label": text.settings, onClick: onSettings, children: _jsxs(Icon, { class: "gear", children: [_jsx("circle", { cx: "12", cy: "12", r: "3" }), _jsx("path", { d: "M9.72 5.38L10.19 2.67L13.81 2.67L14.28 5.38L15.07 5.71L17.31 4.12L19.88 6.69L18.29 8.93L18.62 9.72L21.33 10.19L21.33 13.81L18.62 14.28L18.29 15.07L19.88 17.31L17.31 19.88L15.07 18.29L14.28 18.62L13.81 21.33L10.19 21.33L9.72 18.62L8.93 18.29L6.69 19.88L4.12 17.31L5.71 15.07L5.38 14.28L2.67 13.81L2.67 10.19L5.38 9.72L5.71 8.93L4.12 6.69L6.69 4.12L8.93 5.71Z" })] }) }), _jsx("button", { class: "icon-button guide-button", type: "button", title: text.guide.title, "aria-label": text.guide.title, "aria-haspopup": "dialog", onClick: onGuide, children: _jsx(Icon, { class: "book", children: _jsx("path", { d: "M12 6.5C10 5 7 4.5 3.5 5V18.5C7 18 10 18.5 12 20C14 18.5 17 18 20.5 18.5V5C17 4.5 14 5 12 6.5ZM12 6.5V20" }) }) }), profile === undefined || onProfile === undefined ? null : (_jsx("button", { class: "icon-button player", type: "button", title: `${profile.name}: ${text.profile.profiles}`, "aria-label": `${profile.name}: ${text.profile.profiles}`, "aria-haspopup": "dialog", onClick: onProfile, children: _jsx(PlayerPicture, { profile: profile, size: 28 }) }))] }));
 }
 /** The answer to the AI's draw offer while it stands, else the player's own offer; then the resignation. */
 function Actions({ actions, text }) {

package/dist/page/layout/layout.css

@@ -553,6 +553,57 @@
     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;
+    }
+}
+
 /* The game's column, which folds from its tab */
 .side {
     grid-area: side;
@@ -580,15 +631,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 */
@@ -800,6 +858,23 @@
         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 {
         grid-area: asleep;
         margin: 0;
@@ -834,12 +909,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;
     }