chesspal 0.3.1 → 0.3.2

package/dist/page/layout/layout.css

@@ -81,8 +81,9 @@
         display: none;
     }
 
-    /* Beside a narrow board the offer and its answer take the room of the other commands, which come back once it is answered */
-    .top:has(.answer) .command:not(.answer) {
+    /* Beside a narrow board the offer and its answer take the room of the other commands and the flip, which come back once it is answered */
+    .top:has(.answer) .command:not(.answer),
+    .top:has(.answer) .flip-button {
         display: none;
     }
 }
@@ -114,6 +115,13 @@
     white-space: nowrap;
 }
 
+/* The board turned round: the flip stands pressed, its edge in the soft ink that reads on both themes (Zoe) */
+.top .flip-button[aria-pressed="true"] {
+    color: var(--ink);
+    border-color: var(--soft);
+    background: var(--card);
+}
+
 /* The player's picture, round and borderless, at the end of the header: it opens the menu of the players */
 .top .player {
     border-color: transparent;
@@ -152,10 +160,6 @@
     }
 }
 
-.top:has(.verdict.idle, .verdict.over) .command:has(.icon.flip) span {
-    display: none;
-}
-
 /* On a phone the player's card is under the board, below the fold: between games the header's new game stands out too, on the first screen */
 @media (max-width: 840px) {
     .top:has(.verdict.idle, .verdict.over) .command:has(.icon.new) {
@@ -205,10 +209,54 @@
     position: relative;
     /* 12.5cqw is a square, for the lifted piece too */
     container-type: inline-size;
-    width: min(calc(100vw - var(--left-now) - var(--right-now) - 2 * var(--gap) - 2 * var(--between)), max(var(--least), calc(100vh - var(--bar) - 3 * var(--between))));
+    width: min(calc(100vw - var(--left-now) - var(--right-now) - 2 * var(--gap) - 2 * var(--between)), max(var(--least), calc(100vh - var(--bar) - var(--foot) - 4 * var(--between))));
     transition: width 200ms cubic-bezier(0.2, 0, 0, 1);
 }
 
+/* The page's foot, a thin line under the board and as wide as it, in a row of its own under the others at every width (Stefano); it never widens the board's
+   column */
+.page-foot {
+    grid-column: board;
+    grid-row: -1 / span 1;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: space-between;
+    gap: 4px 14px;
+    min-height: var(--foot);
+    contain: inline-size;
+    color: var(--soft);
+    font-size: 12px;
+}
+
+.page-foot a {
+    display: inline-flex;
+    align-items: center;
+    gap: 5px;
+    color: inherit;
+    text-decoration: none;
+}
+
+.page-foot a:hover,
+.page-foot a:focus-visible {
+    color: var(--ink);
+}
+
+.foot-links {
+    display: inline-flex;
+    align-items: center;
+    gap: 14px;
+}
+
+.page-foot .icon {
+    width: 15px;
+    height: 15px;
+}
+
+.foot-support .icon {
+    color: var(--low-time);
+}
+
 .talk {
     grid-area: talk;
     display: flex;
@@ -422,6 +470,13 @@
     box-shadow: 0 0 0 2px var(--page);
 }
 
+/* On the Torretta's disc, clear of its battlement, ringed in the card's colour */
+.face.unread::after {
+    top: -2px;
+    right: -2px;
+    box-shadow: 0 0 0 2px var(--card);
+}
+
 .fold-tab button.unread::after {
     top: -4px;
     right: auto;
@@ -436,11 +491,11 @@
     flex: none;
 }
 
-/* Its trail clear of the battlements' corner, which the halo would bite */
+/* The trail's dot on the disc's edge, clear of the battlement */
 .thought {
     position: absolute;
-    top: -8px;
-    left: -10px;
+    top: -9px;
+    left: -12px;
     width: 24px;
     height: 20px;
     overflow: visible;
@@ -614,6 +669,14 @@
     min-height: 0;
 }
 
+/* The cards, then the foot: the moves, the saves and the steps */
+.side-cards,
+.side-foot {
+    display: flex;
+    flex-direction: column;
+    gap: var(--between);
+}
+
 .board-steps,
 .board-map {
     display: none;
@@ -664,6 +727,38 @@
     .side > * {
         width: var(--right);
     }
+
+    /* Beside the board the moves, the saves and the steps take the room the cards leave, by the board's lower edge, and the moves keep four rows at least; a
+       column too short for both scrolls the cards under the wheel, with no scrollbar, and the cards never give way themselves (Stefano, Zoe). A halo round
+       them keeps their shadows, which the scroll would cut, and they fade at the board's top edge and over the moves */
+    .side > .side-cards {
+        --halo: 16px;
+        flex: 0 1 auto;
+        min-height: 0;
+        width: calc(var(--right) + 2 * var(--halo));
+        margin: calc(-1 * var(--halo)) calc(-1 * var(--halo)) calc(-1 * var(--between));
+        padding: var(--halo) var(--halo) var(--between);
+        overflow: hidden auto;
+        scrollbar-width: none;
+        mask-image: linear-gradient(transparent, #000 var(--halo), #000 calc(100% - var(--between)), transparent);
+    }
+
+    .side > .side-cards > * {
+        flex-shrink: 0;
+    }
+
+    .side > .side-foot {
+        flex: 1 1 auto;
+    }
+
+    .side-foot > .moves-card:not(.folded) {
+        min-height: 150px;
+    }
+
+    /* A long game asks no room of its own: its moves scroll in what the cards leave */
+    .side-foot .moves {
+        contain: size;
+    }
 }
 
 /* Where three columns would leave the board small, the game's column goes under the board, always open */
@@ -909,6 +1004,15 @@
     box-shadow: 0 8px 24px rgb(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) */
+@media (max-width: 840px) {
+    .outdated {
+        position: static;
+        margin: var(--between) var(--gap) 0;
+        box-shadow: none;
+    }
+}
+
 /* 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) {

package/dist/page/layout/window.js

@@ -1,10 +1,9 @@
-// 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 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).
 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. */
+/** Sizes the window the table opened and takes the mark off the address, so that a reload keeps the size the player gave it. */
 export function fitOpenedWindow() {
     const address = new URL(location.href);
     if (!address.searchParams.has(mark)) {
@@ -12,13 +11,11 @@ export function fitOpenedWindow() {
     }
     address.searchParams.delete(mark);
     history.replaceState(history.state, "", address.pathname + address.search + address.hash);
-    if (sizedBefore()) {
-        return;
-    }
     const place = windowPlace(screen.availWidth, 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;
     window.resizeTo(place.width, place.height);
-    window.moveTo(place.left, place.top);
-    noteSized();
+    window.moveTo(availLeft + place.left, availTop + place.top);
 }
 /** 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) {
@@ -26,20 +23,3 @@ 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) };
 }
-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,5 +1,5 @@
 import { jsx as _jsx } from "preact/jsx-runtime";
-// 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
+// The page's start: the window the table opened sized as it opens, 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";

package/dist/page/pieces/pieces.js

@@ -12,8 +12,11 @@ const folder = "/page/pieces/";
  */
 export function Piece({ letter, set, small = false }) {
     const chosen = useContext(ChosenSet);
-    const white = letter === letter.toUpperCase();
-    return _jsx(Drawing, { href: `${folder}${set ?? chosen}${small ? "-small" : ""}.svg#${white ? "w" : "b"}${letter.toUpperCase()}`, class: `piece ${white ? "white" : "black"}` });
+    return _jsx(Drawing, { href: pieceSymbol(letter, set ?? chosen, small), class: `piece ${letter === letter.toUpperCase() ? "white" : "black"}` });
+}
+/** Where a piece is drawn, by its FEN letter: its symbol in the set's map, or in the map of the set's small pieces. */
+export function pieceSymbol(letter, set, small = false) {
+    return `${folder}${set}${small ? "-small" : ""}.svg#${letter === letter.toUpperCase() ? "w" : "b"}${letter.toUpperCase()}`;
 }
 /** A piece as the notation shows it (D-50): the chosen set's small piece, White's white and Black's black. */
 export function Figurine({ letter, side }) {

package/dist/page/style.css

@@ -11,3 +11,4 @@
 @import "legend/legend.css";
 @import "dialogs/dialogs.css";
 @import "guide/guide.css";
+@import "guide/drawings/drawings.css";

package/dist/page/table/table.css

@@ -60,6 +60,75 @@
     font-size: 13px;
 }
 
+/* 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
+   white arrow (Zoe) */
+.top .update-button .icon circle {
+    fill: var(--accent);
+    stroke: none;
+}
+
+.top .update-button .icon path {
+    stroke: var(--on-accent);
+}
+
+/* One button more: under 360px the header's buttons come a little closer, or the last one goes past the edge */
+@media (max-width: 359px) {
+    .top {
+        column-gap: 2px;
+    }
+}
+
+/* Its window, as narrow as the chat's; the spinner beside what npm does; npm's failure with a cross, and each command on its line */
+.dialog:has(> .update-offer) {
+    width: min(460px, calc(100vw - 32px));
+}
+
+.update-state {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+
+.update-failed p {
+    margin: 0 0 6px;
+    color: var(--ink);
+    font-size: 14px;
+}
+
+.update-cross {
+    color: var(--low-time);
+    font-weight: 700;
+}
+
+.update-failed code,
+.update-notice code {
+    display: block;
+    margin-top: 4px;
+    font-family: ui-monospace, monospace;
+    white-space: nowrap;
+    user-select: all;
+}
+
+/* On a chat's own page, news and no warning: the card's ground and an accent border, the words beside the × that hides it */
+.outdated.update-notice {
+    display: flex;
+    align-items: flex-start;
+    gap: 8px;
+    border-color: var(--accent);
+    background: var(--card);
+}
+
+.update-notice > span {
+    flex: 1;
+    min-width: 0;
+}
+
+.update-notice .icon-button {
+    flex: none;
+    width: 30px;
+    height: 30px;
+}
+
 /* Empty, the state takes no room */
 .chat-state:empty {
     display: none;

package/dist/page/table/update.js

@@ -0,0 +1,82 @@
+import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "preact/jsx-runtime";
+// A newer Chesspal (D-108): on the table's page the header's mark opens this window, which installs it between games; the table and its chat then start
+// again from it, and the page loads again by itself.
+import { useEffect, useState } from "preact/hooks";
+import { Dialog } from "../dialogs/dialog.js";
+/**
+ * The window that installs the newer Chesspal: its button waits while a game goes on and while npm installs; installed, the table waits for the game to
+ * end; when npm fails, a cross and the commands to type.
+ */
+export function UpdateDialog({ open, version, current, installing, installed, going, chat, name, onClose, text }) {
+    const [sent, setSent] = useState(false);
+    const [answer, setAnswer] = useState(undefined);
+    useEffect(() => setAnswer(undefined), [open]);
+    const words = text.update;
+    // Once npm has installed it the table closes to start again: the page waits for it, and loads again.
+    const waiting = installing || (sent && answer === undefined) || (answer?.installed === true && !installed);
+    const failed = answer?.installed === false;
+    const install = async () => {
+        setSent(true);
+        setAnswer(undefined);
+        setAnswer(await askToInstall(text, name));
+        setSent(false);
+    };
+    const stopped = waiting || installed || going;
+    return (_jsxs(Dialog, { open: open, title: words.title, onClose: onClose, text: text, children: [_jsxs("p", { class: "note update-offer", children: [words.offer(version, current), chat === "held" ? ` ${words.chatAgain(name)}` : chat === "byHand" ? ` ${words.byHand(name)}` : ""] }), _jsx("button", { class: `command${failed ? "" : " primary"}`, type: "button", "aria-disabled": stopped, onClick: stopped ? undefined : () => void install(), children: words.install }), _jsx("p", { class: "chat-state update-state", role: "status", children: waiting
+                    ? (_jsxs(_Fragment, { children: [_jsx("span", { class: "spinner", "aria-hidden": "true" }), words.installing(version)] }))
+                    : installed
+                        ? words.installed
+                        : answer?.refused ?? (going ? words.whilePlaying : null) }), failed
+                ? (_jsxs("div", { class: "update-failed", role: "alert", children: [_jsxs("p", { children: [_jsx("span", { class: "update-cross", "aria-hidden": "true", children: "\u2715" }), " ", words.failed] }), _jsx("code", { children: "npm install -g chesspal" }), _jsx("code", { children: "chesspal" })] }))
+                : null] }));
+}
+/** The header's mark of a newer Chesspal, on the table's page: it opens the window that installs it; while npm installs, or the table waits, it spins. */
+export function UpdateMark({ version, installing, onOpen, text }) {
+    const title = installing ? text.update.installing(version) : text.update.mark(version);
+    return (_jsx("button", { class: "icon-button update-button", type: "button", title: title, "aria-label": title, "aria-haspopup": "dialog", onClick: onOpen, children: installing ? _jsx("span", { class: "spinner", "aria-hidden": "true" }) : (_jsxs("svg", { class: "icon", viewBox: "0 0 24 24", "aria-hidden": "true", children: [_jsx("circle", { cx: "12", cy: "12", r: "10" }), _jsx("path", { d: "M12 16.5V7.5M8 11.5L12 7.5L16 11.5" })] })) }));
+}
+/** On a chat's own page, the strip with the command that installs the newer Chesspal; its × hides it until a newer one still is out. */
+export function UpdateNotice({ version, name, text }) {
+    const [hidden, setHidden] = useState(hiddenVersion);
+    if (hidden === version) {
+        return null;
+    }
+    const hide = () => {
+        rememberHidden(version);
+        setHidden(version);
+    };
+    return (_jsxs("p", { class: "outdated update-notice", role: "status", children: [_jsxs("span", { children: [text.update.notice(version, name), _jsx("code", { children: "npm install -g chesspal" })] }), _jsx("button", { class: "icon-button", type: "button", title: text.update.hide, "aria-label": text.update.hide, onClick: hide, children: _jsx("svg", { class: "icon", viewBox: "0 0 24 24", "aria-hidden": "true", children: _jsx("path", { d: "M6 6L18 18M18 6L6 18" }) }) })] }));
+}
+const hiddenKey = "chesspal-update-hidden";
+function hiddenVersion() {
+    try {
+        return localStorage.getItem(hiddenKey) ?? undefined;
+    }
+    catch {
+        // A browser that keeps nothing for the page: the strip shows.
+        return undefined;
+    }
+}
+function rememberHidden(version) {
+    try {
+        localStorage.setItem(hiddenKey, version);
+    }
+    catch {
+        // Hidden as long as the page.
+    }
+}
+async function askToInstall(text, name) {
+    try {
+        const response = await fetch("/api/table/update", { method: "POST", headers: { "Content-Type": "application/json" }, body: "{}" });
+        const body = (await response.json());
+        if (response.ok) {
+            return { installed: body.installed === true };
+        }
+        const known = body.refusal === undefined ? undefined : text.refused[body.refusal];
+        return { refused: known?.(0, name) ?? body.error ?? response.statusText };
+    }
+    catch {
+        // The table closed to start again before its answer came.
+        return { installed: true };
+    }
+}

package/dist/page/talk/chat.css

@@ -5,15 +5,13 @@
     max-height: none;
 }
 
-/* A line apart from the AI's note, which another voice signed (Zoe) */
+/* Under the AI's note, with no line between them (Stefano) */
 .talk.studied > section > .chat {
     display: flex;
     flex-direction: column;
     flex: 1 1 auto;
     min-height: 0;
     margin-top: 12px;
-    padding-top: 10px;
-    border-top: 1px solid var(--line);
 }
 
 .chat > .compose {
@@ -49,9 +47,11 @@
 
     .flipped .talk.studied > section > .chat {
         margin: 0 0 12px;
-        padding: 0 0 10px;
-        border-top: 0;
-        border-bottom: 1px solid var(--line);
+    }
+
+    /* Turned round, the note's room goes under its bubbles, which would touch the AI's card or the note that no chat listens (Zoe) */
+    .flipped .talk.studied .ai-note {
+        margin: 0 0 12px;
     }
 }
 

package/dist/page/talk/talk.css

@@ -233,65 +233,6 @@
     background: var(--say);
 }
 
-.me {
-    position: relative;
-    flex: none;
-    padding: 0;
-    border: 0;
-    border-radius: 50%;
-    background: none;
-    line-height: 0;
-    cursor: pointer;
-}
-
-.me-cover {
-    position: absolute;
-    inset: 0;
-    display: grid;
-    place-items: center;
-    border-radius: 50%;
-    background: rgba(0, 0, 0, 0.45);
-    color: #fff;
-    opacity: 0;
-    transition: opacity 0.12s;
-}
-
-.me-cover .icon {
-    width: 45%;
-    height: 45%;
-}
-
-.me:hover .me-cover,
-.me:focus-visible .me-cover {
-    opacity: 1;
-}
-
-/* Where nothing hovers, a camera in the corner says the picture changes */
-.me-badge {
-    position: absolute;
-    right: -2px;
-    bottom: -2px;
-    display: none;
-    place-items: center;
-    width: 18px;
-    height: 18px;
-    border-radius: 50%;
-    background: var(--accent);
-    color: var(--on-accent);
-    box-shadow: 0 0 0 2px var(--card);
-}
-
-.me-badge .icon {
-    width: 12px;
-    height: 12px;
-}
-
-@media (hover: none) {
-    .me-badge {
-        display: grid;
-    }
-}
-
 .profile-name {
     display: inline-flex;
     align-items: center;
@@ -369,6 +310,15 @@
     }
 }
 
+/* Its bust on a player's card: a disc of the player's picture's colour, which cuts what falls out of it */
+.torretta.bust {
+    clip-path: circle(50%);
+}
+
+.torretta .back {
+    fill: var(--say);
+}
+
 .torretta .shade {
     fill: var(--torretta-shade);
 }
@@ -701,23 +651,23 @@
     overflow-wrap: anywhere;
 }
 
-/* Only the note's last bubble has a tail, pointing down at the Torretta beside the AI's name, the board turned round or not */
+/* Only the note's first bubble has a tail, pointing up at the Torretta beside the AI's name, the board turned round or not (Stefano) */
 .ai-note > .say::before,
 .ai-note > .say::after {
     content: none;
 }
 
-.ai-note > .say:has(+ .who)::after {
+.ai-note > .who + .say::before {
     content: "";
     position: absolute;
     left: 8px;
-    bottom: -9px;
+    top: -9px;
     border: 10px solid transparent;
-    border-bottom: 0;
-    border-top-color: var(--say);
+    border-top: 0;
+    border-bottom-color: var(--say);
 }
 
-.ai-note > .say + .who {
+.ai-note > .who + .say {
     margin-top: 4px;
 }
 
@@ -866,8 +816,8 @@
     margin: 0 0 var(--between);
 }
 
-.ai-block:has(> .asleep) .say::before,
-.ai-block:has(> .asleep) .say::after {
+.ai-block:has(> .asleep) .says .say::before,
+.ai-block:has(> .asleep) .says .say::after {
     content: none;
 }
 

package/dist/page/talk/talk.js

@@ -16,7 +16,7 @@ export function AiWords({ words, newestFirst, voice }) {
     return (_jsx("ol", { ref: list, class: "says", "aria-live": "polite", children: inOrder(words.map((word, index) => (_jsx("li", { class: "say", style: aged(words.length - 1 - index), children: _jsx(Marked, { text: word }) }, index))), newestFirst) }));
 }
 /**
- * The AI's word on the move shown of a game in analysis (D-69), in a bubble that points down at the Torretta beside the AI's name: the move, its badge by name,
+ * The AI's word on the move shown of a game in analysis (D-69), in a bubble under the Torretta beside the AI's name, pointing up at it: the move, its badge by name,
  * and its note when it wrote one; read out as the player steps through the game. The Torretta and the name stay when the move has no word.
  */
 export function AiNote({ ply, opening, closing, summary, reviewing, name, by, mood, voice, text }) {
@@ -32,10 +32,10 @@ export function AiNote({ ply, opening, closing, summary, reviewing, name, by, mo
         }
         return hush;
     }, [spoken, voice]);
-    // The Torretta stays in sight through the whole analysis, under its bubbles, which show only where it wrote something.
-    return (_jsxs("div", { class: "ai-note", "aria-live": "polite", children: [ply === undefined || shown === undefined ? null : (_jsxs("p", { class: `say move-note ${shown.badge ?? ""}`, children: [_jsxs("span", { class: "head", children: [shown.badge === undefined ? _jsx(NoteIcon, {}) : _jsx(BadgeIcon, { badge: shown.badge }), _jsxs("b", { children: [_jsxs("span", { class: "visually-hidden", children: [ply.number, ply.side === "white" ? "." : "...", ply.san] }), _jsxs("span", { "aria-hidden": "true", children: [_jsxs("span", { class: "move-number", children: [ply.number, ply.side === "white" ? "." : "..."] }), _jsx(Figurines, { san: ply.san, side: ply.side })] })] }), " ", title] }), note === undefined ? null : (_jsx("span", { class: "note", children: _jsx(Marked, { text: note }) })), shown.arrows === undefined && shown.squares === undefined ? null : _jsx(Legend, { review: shown, words: text.drawn })] })), summary === undefined ? null : _jsx(GameReview, { by: name, summary: summary, text: text }), closing === undefined ? null : (_jsx("p", { class: "say closing", children: _jsx(Marked, { text: closing }) })), reviewing === true
+    // The Torretta stays in sight through the whole analysis, over its bubbles, which show only where it wrote something.
+    return (_jsxs("div", { class: "ai-note", "aria-live": "polite", children: [_jsxs("p", { class: "who", children: [_jsx(Torretta, { size: 36, mood: mood }), _jsxs("span", { class: "signed", children: [name, by === undefined ? null : _jsx("small", { children: signature(by.annotator, by.effort) })] })] }), ply === undefined || shown === undefined ? null : (_jsxs("p", { class: `say move-note ${shown.badge ?? ""}`, children: [_jsxs("span", { class: "head", children: [shown.badge === undefined ? _jsx(NoteIcon, {}) : _jsx(BadgeIcon, { badge: shown.badge }), _jsxs("b", { children: [_jsxs("span", { class: "visually-hidden", children: [ply.number, ply.side === "white" ? "." : "...", ply.san] }), _jsxs("span", { "aria-hidden": "true", children: [_jsxs("span", { class: "move-number", children: [ply.number, ply.side === "white" ? "." : "..."] }), _jsx(Figurines, { san: ply.san, side: ply.side })] })] }), " ", title] }), note === undefined ? null : (_jsx("span", { class: "note", children: _jsx(Marked, { text: note }) })), shown.arrows === undefined && shown.squares === undefined ? null : _jsx(Legend, { review: shown, words: text.drawn })] })), summary === undefined ? null : _jsx(GameReview, { by: name, summary: summary, text: text }), closing === undefined ? null : (_jsx("p", { class: "say closing", children: _jsx(Marked, { text: closing }) })), reviewing === true
                 ? (_jsxs("p", { class: "say reviewing", children: [_jsx("span", { class: "spinner", "aria-hidden": "true" }), text.reviewing(name)] }))
-                : null, _jsxs("p", { class: "who", children: [_jsx(Torretta, { size: 36, mood: mood }), _jsxs("span", { class: "signed", children: [name, by === undefined ? null : _jsx("small", { children: signature(by.annotator, by.effort) })] })] })] }));
+                : null] }));
 }
 /** The squares and moves in the AI's words, such as e3, Cxe4, 7.Nd4 or O-O: in bold, as the player looks for them on the board. */
 export function Marked({ text }) {
@@ -94,7 +94,7 @@ export function Compose({ lines, newestFirst, spent, draft, onDraft, onSend, can
  * whoever moves and a dot on the Torretta when the AI spoke meanwhile.
  */
 export function TalkFaces({ name, aiPicture, you, picture, ai, player, aiMoves, playerMoves, unread, text }) {
-    return (_jsxs("div", { class: "faces", children: [_jsx(RailPlayer, { place: "ai", picture: aiPicture ?? _jsx(Torretta, { size: 40 }), name: name, ...(ai === undefined ? {} : { side: text.sides[ai] }), moves: aiMoves, unread: unread }), _jsx(RailPlayer, { place: "you", picture: picture, name: you, ...(player === undefined ? {} : { side: text.sides[player] }), moves: playerMoves })] }));
+    return (_jsxs("div", { class: "faces", children: [_jsx(RailPlayer, { place: "ai", picture: aiPicture ?? _jsx(Torretta, { size: 40, bust: true }), name: name, ...(ai === undefined ? {} : { side: text.sides[ai] }), moves: aiMoves, unread: unread }), _jsx(RailPlayer, { place: "you", picture: picture, name: you, ...(player === undefined ? {} : { side: text.sides[player] }), moves: playerMoves })] }));
 }
 /** The move a line of the player's was written on, 14.♘f3, small at the line's head: a press shows it on the board again (Zoe). */
 function ShownMove({ move, onShow, text }) {

package/dist/page/talk/voice.js

@@ -28,6 +28,18 @@ export function hush() {
         speechSynthesis.cancel();
     }
 }
+/** Whether the browser has a voice for the language: without one the words cannot be read. */
+export function hasVoice(language) {
+    return typeof speechSynthesis !== "undefined" && readerFor(language) !== undefined;
+}
+/** Calls the listener whenever the browser's voices change, since Chrome lists them late: what it returns stops it. */
+export function onVoices(listener) {
+    if (typeof speechSynthesis === "undefined") {
+        return () => undefined;
+    }
+    speechSynthesis.addEventListener("voiceschanged", listener);
+    return () => speechSynthesis.removeEventListener("voiceschanged", listener);
+}
 /**
  * The words with each move the AI wrote said in words, since a voice reads ♟g4 as "chess pawn g4": ♞xf6+, Nxf6+, exd5, O-O, e8=♛. A square alone, e4,
  * stays as it is; a pawn's move becomes words only with its figurine, a capture, a promotion or a check, and without the file it takes from.