chesspal 0.3.0 → 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;
@@ -602,32 +657,6 @@
         min-height: 0;
         overflow-y: auto;
     }
-
-    /* On a short column the table's note keeps its buttons and drops the commands to type, then the box and the words go: they wait for a chat anyway.
-       In analysis the cards are taller and the AI's note needs room too */
-    @container talk (max-height: 560px) {
-        .opener-command {
-            display: none;
-        }
-    }
-
-    @container talk (max-height: 500px) {
-        .ai-block:has(> .opener) + .you-block > :is(.sent, .compose) {
-            display: none;
-        }
-    }
-
-    @container talk (max-height: 640px) {
-        .talk.studied .opener-command {
-            display: none;
-        }
-    }
-
-    @container talk (max-height: 580px) {
-        .talk.studied > .ai-block:has(> .opener) + .you-block > .chat {
-            display: none;
-        }
-    }
 }
 
 /* The game's column, which folds from its tab */
@@ -640,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;
@@ -690,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 */
@@ -935,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

@@ -5,9 +5,10 @@
 @import "board/board.css";
 @import "talk/talk.css";
 @import "talk/chat.css";
-@import "table/opener.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";
+@import "guide/drawings/drawings.css";

package/dist/page/table/table.css

@@ -0,0 +1,192 @@
+/* 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;
+}
+
+/* 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;
+}
+
+.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/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 };
+    }
+}