chesspal 0.3.5 → 0.3.6

package/dist/page/avatars/torretta.css

@@ -0,0 +1,108 @@
+/* The Torretta, whose eyes blink now and then, and its moods (D-70): a new face that pops in, never fading out, a red light when worried, out when sad, a light that breathes when
+   thoughtful */
+.torretta .antenna {
+    fill: none;
+    stroke: var(--torretta-shade);
+    stroke-width: 4;
+    stroke-linecap: round;
+}
+
+.torretta .light {
+    fill: var(--torretta-light);
+    transition: fill 0.2s;
+}
+
+.torretta.mood-worried .light {
+    fill: var(--torretta-alarm);
+}
+
+.torretta.mood-thoughtful .light {
+    animation: ponder 2.4s ease-in-out infinite;
+}
+
+.torretta.mood-sad .light {
+    fill: var(--torretta-shade);
+}
+
+@keyframes ponder {
+    50% {
+        fill: var(--torretta-ponder);
+    }
+}
+
+.torretta .expression.changed {
+    transform-box: fill-box;
+    transform-origin: center;
+    animation: face-in 0.16s ease-out;
+}
+
+@keyframes face-in {
+    from {
+        transform: scale(0.8);
+    }
+}
+
+/* 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);
+}
+
+.torretta .body {
+    fill: var(--torretta-body);
+}
+
+.torretta .screen {
+    fill: var(--torretta-screen);
+}
+
+.torretta .eyes,
+.torretta .mouth {
+    fill: var(--torretta-face);
+}
+
+.torretta .expression .line,
+.torretta .brows {
+    fill: none;
+    stroke: var(--torretta-face);
+    stroke-width: 3.4;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+}
+
+.torretta .eyes {
+    transform-box: fill-box;
+    transform-origin: center;
+    animation: blink 6s infinite;
+}
+
+@keyframes blink {
+    0%,
+    95%,
+    100% {
+        transform: scaleY(1);
+    }
+
+    97% {
+        transform: scaleY(0.1);
+    }
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .torretta .eyes,
+    .torretta .expression.changed,
+    .torretta.mood-thoughtful .light {
+        animation: none;
+    }
+
+    .torretta .light {
+        transition: none;
+    }
+}

package/dist/page/board/board.css

@@ -375,23 +375,23 @@
 }
 
 .badge.crown {
-    background: #e0a526;
-    color: #3b2a00;
+    background: var(--king-crown);
+    color: var(--king-crown-ink);
 }
 
 /* The mate white on the red square, edged in red */
 .badge.mate {
     background: #fff;
-    color: #c81e1e;
-    box-shadow: 0 0 0 max(1.5px, 0.25cqw) #c81e1e, 0 0.2cqw 0.6cqw rgba(0, 0, 0, 0.4);
+    color: var(--king-mate);
+    box-shadow: 0 0 0 max(1.5px, 0.25cqw) var(--king-mate), 0 0.2cqw 0.6cqw rgba(0, 0, 0, 0.4);
 }
 
 .badge.flag {
-    background: #4a4f57;
+    background: var(--king-flag);
 }
 
 .badge.half {
-    background: #69727d;
+    background: var(--king-draw);
 }
 
 /* A move's badge (D-69): 16px beside a move, a third of a square in the corner of its arrival, edged in white as the kings' badges */
@@ -842,6 +842,7 @@
     left: 50%;
     top: 50%;
     transform: translate(-50%, -50%);
+    text-wrap: balance;
 }
 
 .notice.centre::after {

package/dist/page/board/marks.js

@@ -110,8 +110,8 @@ export function PromotionChoice({ side, column, down, onPick, text }) {
                 onPick(undefined);
             }
         };
-        addEventListener("keydown", escape);
-        return () => removeEventListener("keydown", escape);
+        window.addEventListener("keydown", escape);
+        return () => window.removeEventListener("keydown", escape);
     }, []);
     return (_jsxs("div", { class: "promotion", role: "group", "aria-label": text.promoteTo, children: [_jsx("div", { class: "promotion-shade", onPointerDown: () => onPick(undefined) }), promotionPieces.map((piece, index) => (_jsx("button", { ref: index === 0 ? first : undefined, type: "button", class: "promotion-piece", style: { "--column": column, "--row": down ? index : 7 - index }, "aria-label": text.piece(piece.toUpperCase(), side), onClick: () => onPick(piece), children: _jsx(Piece, { letter: side === "white" ? piece.toUpperCase() : piece }) }, piece)))] }));
 }

package/dist/page/board/pointer.js

@@ -96,10 +96,10 @@ export function useBoardPointer({ columns, ranks, pieces, player, selected, targ
             }
         };
         const landed = drag.back ? setTimeout(() => setDrag(undefined), reducedMotion() ? 0 : 260) : undefined;
-        addEventListener("keydown", escape);
+        window.addEventListener("keydown", escape);
         document.documentElement.classList.add("dragging");
         return () => {
-            removeEventListener("keydown", escape);
+            window.removeEventListener("keydown", escape);
             document.documentElement.classList.remove("dragging");
             clearTimeout(landed);
         };

package/dist/page/dialogs/analyses.js

@@ -6,6 +6,7 @@ import { accountSide } from "../../core/index.js";
 import { ResultTile } from "../game/result-tile.js";
 import { signature } from "../players/model-name.js";
 import { OutcomeBadge, outcomeOf } from "./outcome.js";
+import { useRowKeys } from "./rows.js";
 import { searched } from "./search.js";
 import { playerIn, studiedSides } from "./studied.js";
 /** The list, read anew at each opening: the search, the row that loads a game, then a row for each game found, with its menu or its question. */
@@ -17,13 +18,14 @@ export function Analyses({ onStudy, onLoad, you, accounts, others, ai, text }) {
     const [asking, setAsking] = useState(undefined);
     const [busy, setBusy] = useState(false);
     const [problem, setProblem] = useState(undefined);
+    const rowKeys = useRowKeys();
     useClosing(menu !== undefined, () => setMenu(undefined));
     useClosing(asking !== undefined, () => setAsking(undefined));
     const act = async (name, asked) => {
         setBusy(true);
         const refused = asked === "remove" ? await deletion("/api/delete-game", name) : await deletion("/api/delete-review", name);
-        // Analysing again opens the game without its review: the chat's analyst goes over it (D-89).
-        const after = refused === undefined && asked === "redo" ? await onStudy({ game: name }) : refused;
+        // Analysing again opens the game without its review: the chat's analyst goes over it (D-89), asked for by the player.
+        const after = refused === undefined && asked === "redo" ? await onStudy({ game: name, redo: true }) : refused;
         setBusy(false);
         setAsking(undefined);
         setProblem(after);
@@ -44,7 +46,7 @@ export function Analyses({ onStudy, onLoad, you, accounts, others, ai, text }) {
         return { item, named, outcome };
     });
     const found = searched(rows, query, ({ item, named, outcome }) => searchText(item, named.sides, outcome, text));
-    return (_jsxs("div", { class: "analyses", children: [_jsxs("label", { class: "search", children: [_jsx("svg", { class: "icon", viewBox: "0 0 24 24", "aria-hidden": "true", children: _jsx("path", { d: "M10.5 17A6.5 6.5 0 1 0 10.5 4A6.5 6.5 0 0 0 10.5 17ZM15.5 15.5L20 20" }) }), _jsx("input", { type: "search", value: query, placeholder: words.search, "aria-label": words.search, spellcheck: false, onInput: (event) => setQuery(event.currentTarget.value) })] }), _jsxs("button", { class: "load-row", type: "button", onClick: onLoad, children: [_jsx("span", { class: "plus", "aria-hidden": "true", children: _jsx("svg", { class: "icon", viewBox: "0 0 24 24", children: _jsx("path", { d: "M12 5V19M5 12H19" }) }) }), _jsxs("span", { children: [_jsx("b", { children: words.bring }), _jsx("small", { children: words.bringNote })] })] }), problem === undefined ? null : _jsx("p", { class: "problem", role: "alert", children: problem }), analyses.length > 0 && found.length === 0 ? _jsx("p", { class: "none", children: words.noMatch }) : null, found.length === 0 ? null : (_jsx("ul", { class: "games", "aria-label": words.yours, children: found.map(({ item, named, outcome }) => asking?.name === item.name
+    return (_jsxs("div", { class: "analyses", children: [_jsxs("label", { class: "search", children: [_jsx("svg", { class: "icon", viewBox: "0 0 24 24", "aria-hidden": "true", children: _jsx("path", { d: "M10.5 17A6.5 6.5 0 1 0 10.5 4A6.5 6.5 0 0 0 10.5 17ZM15.5 15.5L20 20" }) }), _jsx("input", { type: "search", value: query, placeholder: words.search, "aria-label": words.search, spellcheck: false, onInput: (event) => setQuery(event.currentTarget.value) })] }), _jsxs("button", { class: "load-row", type: "button", onClick: onLoad, children: [_jsx("span", { class: "plus", "aria-hidden": "true", children: _jsx("svg", { class: "icon", viewBox: "0 0 24 24", children: _jsx("path", { d: "M12 5V19M5 12H19" }) }) }), _jsxs("span", { children: [_jsx("b", { children: words.bring }), _jsx("small", { children: words.bringNote })] })] }), problem === undefined ? null : _jsx("p", { class: "problem", role: "alert", children: problem }), analyses.length > 0 && found.length === 0 ? _jsx("p", { class: "none", children: words.noMatch }) : null, found.length === 0 ? null : (_jsx("ul", { class: "games", "aria-label": words.yours, ...rowKeys, children: found.map(({ item, named, outcome }) => asking?.name === item.name
                     ? (_jsx(Question, { asked: asking.asked, game: named.sides, when: dayOf(item.date, text.language), by: by(item), busy: busy, onYes: () => void act(item.name, asking.asked), onNo: () => setAsking(undefined), words: words }, item.name))
                     : (_jsxs("li", { class: "game", children: [_jsxs("button", { class: "reopen", type: "button", disabled: busy, onClick: () => open(item.name), children: [_jsx(ResultTile, { result: item.result }), _jsxs("span", { class: "what", children: [_jsx("b", { class: "who", children: named.sides }), _jsx("span", { class: "meta", children: [dayOf(item.date, text.language), words.moves(item.moves), item.opening].filter((part) => part !== undefined).join(" · ") }), item.reviewed ? _jsx(Reviewed, { by: by(item), words: words }) : null] }), _jsxs("span", { class: "score", children: [_jsx("b", { children: scoreOf(item.result) }), outcome === undefined ? _jsx("span", {}) : _jsx(OutcomeBadge, { outcome: outcome, words: words })] })] }), _jsx("span", { class: "row-actions", children: _jsx("button", { class: `icon-button${menu?.name === item.name ? " on" : ""}`, type: "button", title: words.more, "aria-label": words.more, "aria-expanded": menu?.name === item.name, disabled: busy, onClick: (event) => setMenu(menu?.name === item.name ? undefined : { name: item.name, anchor: event.currentTarget }), children: _jsx("svg", { class: "icon", viewBox: "0 0 24 24", "aria-hidden": "true", children: _jsx("path", { d: "M5 12H5.01M12 12H12.01M19 12H19.01" }) }) }) }), menu?.name === item.name
                                 ? (_jsx(RowMenu, { anchor: menu.anchor, withReview: item.reviewed || item.begun === true, onPick: (asked) => {

package/dist/page/dialogs/rows.js

@@ -0,0 +1,72 @@
+import { useLayoutEffect, useRef } from "preact/hooks";
+/**
+ * Makes the list's rows one stop of the Tab: the row's button focused last, or the first row's, takes the Tab, the others only the arrows. Up and down go
+ * to the row above and below, Home and End to the first and the last, left and right between a row's own buttons. A row that asks a question in its place
+ * keeps its buttons in the Tab's order.
+ */
+export function useRowKeys() {
+    const ref = useRef(null);
+    const current = useRef(undefined);
+    // After each render the rows may have changed, by a search or a game deleted: the one stop is the button focused last, if still there, or the first.
+    useLayoutEffect(() => {
+        if (ref.current !== null) {
+            setStop(rowsOf(ref.current).flat(), current.current);
+        }
+    });
+    const onFocusIn = (event) => {
+        const buttons = ref.current === null ? [] : rowsOf(ref.current).flat();
+        if (buttons.includes(event.target)) {
+            current.current = event.target;
+            setStop(buttons, current.current);
+        }
+    };
+    const onKeyDown = (event) => {
+        const rows = ref.current === null ? [] : rowsOf(ref.current);
+        const row = rows.findIndex((buttons) => buttons.includes(event.target));
+        if (row === -1) {
+            return;
+        }
+        const next = target(event.key, rows, row, rows[row].indexOf(event.target));
+        if (next !== undefined) {
+            event.preventDefault();
+            next.focus();
+        }
+    };
+    return { ref, onKeyDown, onFocusIn };
+}
+/** Gives the Tab to the button wanted, if it is still in the list, else to the first. */
+function setStop(buttons, wanted) {
+    const stop = wanted !== undefined && buttons.includes(wanted) ? wanted : buttons[0];
+    for (const button of buttons) {
+        button.tabIndex = button === stop ? 0 : -1;
+    }
+}
+/** The button a key goes to from the row and column focused, or none for a key the list leaves to the page. */
+function target(key, rows, row, column) {
+    const at = (index) => {
+        const buttons = rows[Math.max(0, Math.min(rows.length - 1, index))];
+        return buttons[Math.min(column, buttons.length - 1)];
+    };
+    switch (key) {
+        case "ArrowDown":
+            return at(row + 1);
+        case "ArrowUp":
+            return at(row - 1);
+        case "Home":
+            return at(0);
+        case "End":
+            return at(rows.length - 1);
+        case "ArrowRight":
+            return rows[row][Math.min(column + 1, rows[row].length - 1)];
+        case "ArrowLeft":
+            return rows[row][Math.max(column - 1, 0)];
+        default:
+            return undefined;
+    }
+}
+/** The rows' own buttons, row by row, those that can take the focus: the row's, and its menu's button, never a menu's or a question's. */
+function rowsOf(list) {
+    return [...list.querySelectorAll(":scope > li:not([role])")]
+        .map((row) => [...row.querySelectorAll(":scope > button, :scope > .row-actions > button")].filter((button) => !button.disabled))
+        .filter((buttons) => buttons.length > 0);
+}

package/dist/page/dialogs/site-games.js

@@ -3,6 +3,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "preact/jsx-ru
 import { useEffect, useState } from "preact/hooks";
 import { Piece } from "../pieces/pieces.js";
 import { OutcomeBadge, outcomeOf } from "./outcome.js";
+import { useRowKeys } from "./rows.js";
 /**
  * The list, asked of the server when the step opens and the profile has a name on a site. `picked` is the game being sent, whose row keeps the accent and
  * a spinner while the others wait; `problem`, why the server refused it, shown under the list; `onProfile` opens the profile, where the names go.
@@ -11,6 +12,7 @@ export function SiteGameList({ accounts, picked, problem, onPick, onProfile, tex
     const words = text.study;
     const named = accounts?.lichess !== undefined || accounts?.chesscom !== undefined;
     const answer = useSiteGames(named, words.siteGamesRefused);
+    const rowKeys = useRowKeys();
     if (!named) {
         return (_jsxs("div", { class: "field analyses site-games", children: [_jsx("span", { children: words.siteGames }), _jsxs("p", { class: "none", children: [`${words.siteGamesNoAccount} `, _jsx("button", { class: "add-names", type: "button", onClick: onProfile, children: words.siteGamesProfile })] })] }));
     }
@@ -20,7 +22,7 @@ export function SiteGameList({ accounts, picked, problem, onPick, onProfile, tex
                     ? _jsx("p", { class: "site-problem", children: answer.refusal })
                     : (_jsxs(_Fragment, { children: [_jsx(SiteProblems, { answer: answer, text: text }), answer.games.length === 0
                                 ? (answer.answered.length === 0 ? null : _jsx("p", { class: "none", children: words.siteGamesNone }))
-                                : (_jsx("ul", { class: `games${picked === undefined ? "" : " picking"}`, "aria-label": words.siteGames, children: answer.games.map((game) => _jsx(GameRow, { game: game, picked: picked, onPick: onPick, text: text }, game.name)) })), problem === undefined ? null : _jsx("p", { class: "problem", role: "alert", children: problem })] }))] }));
+                                : (_jsx("ul", { class: `games${picked === undefined ? "" : " picking"}`, "aria-label": words.siteGames, ...rowKeys, children: answer.games.map((game) => _jsx(GameRow, { game: game, picked: picked, onPick: onPick, text: text }, game.name)) })), problem === undefined ? null : _jsx("p", { class: "problem", role: "alert", children: problem })] }))] }));
 }
 const siteNames = { "lichess": "Lichess", "chess.com": "Chess.com" };
 /** The sites that did not answer, both in one line, and those without a player by the profile's name, in the profile window's words. */

package/dist/page/game/game.css

@@ -129,8 +129,8 @@
     height: 14px;
     margin-top: 6px;
     border-radius: 7px;
-    background: #3b4048;
-    box-shadow: 0 0 0 1px rgb(138 144 153 / 0.6);
+    background: var(--side-black);
+    box-shadow: 0 0 0 1px var(--side-edge);
     overflow: hidden;
 }
 
@@ -139,7 +139,7 @@
     position: absolute;
     inset: 3px auto 3px calc(50% - 0.5px);
     width: 1px;
-    background: #8a9099;
+    background: var(--side-both);
 }
 
 /* On a position after the one the AI estimated: the player's move, until the coach speaks again */
@@ -150,7 +150,7 @@
 .lead-bar .white {
     position: absolute;
     inset: 0 auto 0 0;
-    background: #f5f5f2;
+    background: var(--side-white);
     transition: width 400ms ease;
 }
 
@@ -172,12 +172,12 @@
 .lead-bar .figure.white,
 .lead-bar .figure.even {
     left: 6px;
-    color: #2a2f36;
+    color: var(--fixed-ink);
 }
 
 .lead-bar .figure.black {
     right: 6px;
-    color: #f5f5f2;
+    color: var(--side-white);
 }
 
 /* The chart of the game in analysis: the white area is White's share, the line in the middle an even game; a dot on a move a badge marks, a line on the move
@@ -191,10 +191,13 @@
     position: relative;
     height: 72px;
     border-radius: 6px;
-    background: #3b4048;
-    box-shadow: 0 0 0 1px rgb(138 144 153 / 0.6);
+    background: var(--side-black);
+    box-shadow: 0 0 0 1px var(--side-edge);
     overflow: hidden;
     cursor: pointer;
+    /* A finger drawn across it runs through the game; up and down it scrolls the page */
+    touch-action: pan-y;
+    user-select: none;
 }
 
 .lead-chart svg {
@@ -204,7 +207,7 @@
 }
 
 .lead-chart .white-area {
-    fill: #f5f5f2;
+    fill: var(--side-white);
 }
 
 .lead-chart .pending {
@@ -212,7 +215,7 @@
 }
 
 .lead-chart .even {
-    stroke: #8a9099;
+    stroke: var(--side-both);
     stroke-width: 1;
     stroke-dasharray: 3 3;
     fill: none;
@@ -229,6 +232,11 @@
     pointer-events: none;
 }
 
+/* The move a click would show, under the mouse: the same line, fainter (Zoe) */
+.lead-chart .ghost {
+    opacity: 0.5;
+}
+
 .lead-chart .dot {
     position: absolute;
     width: 8px;
@@ -394,6 +402,8 @@
     overflow: hidden auto;
     scrollbar-width: none;
     font-size: 14px;
+    /* A row too long for a phone never makes the page wider */
+    contain: inline-size;
 }
 
 .moves ol {
@@ -438,6 +448,11 @@
     cursor: pointer;
 }
 
+/* A move never breaks, its piece always beside its square: a long one takes room from its neighbour in the row */
+.moves .ply {
+    white-space: nowrap;
+}
+
 /* The move under the pointer in a neutral grey, never the accent, so it never reads as the move shown (Stefano) */
 .moves .ply:hover {
     background: color-mix(in oklab, var(--ink) 9%, transparent);
@@ -552,6 +567,32 @@
     }
 }
 
+/* On a phone the rows give the moves all the room they can, so that two columns hold a move with its badge on one line (Zoe) */
+@media (max-width: 479px) {
+    .moves ol {
+        column-gap: 8px;
+    }
+
+    .moves li {
+        grid-template-columns: 22px 1fr 1fr;
+        column-gap: 4px;
+        padding: 3px 4px;
+    }
+
+    .moves .ply {
+        gap: 3px;
+        padding: 1px 4px;
+        margin-left: -4px;
+    }
+}
+
+/* On the narrowest phones two columns would leave a move no room: one column */
+@media (max-width: 359px) {
+    .moves ol {
+        columns: 1;
+    }
+}
+
 /* A card's title in the game's column, its icon in the accent as the opening's book: the helps' lifebuoy, the moves' score sheet (Stefano) */
 .card-title {
     display: flex;

package/dist/page/game/move-list.js

@@ -48,14 +48,16 @@ function Move({ ply, current, onShow, text }) {
     // A screen reader reads the move in SAN and the AI's badge by its name; the eye sees each piece's letter as its figure, and the badge's disc (D-69).
     return (_jsxs("button", { type: "button", class: current ? "ply current" : "ply", "aria-current": current ? "step" : undefined, onClick: onShow, children: [_jsx("span", { class: "visually-hidden", children: ply.review?.badge === undefined ? ply.san : `${ply.san}, ${text.badges[ply.review.badge]}` }), _jsx("span", { "aria-hidden": "true", children: _jsx(Figurines, { san: ply.san, side: ply.side }) }), ply.review?.badge !== undefined ? _jsx(BadgeIcon, { badge: ply.review.badge }) : ply.review?.note !== undefined ? _jsx(NoteIcon, {}) : null] }));
 }
-/** Scrolls the list, and only the list, as little as it takes to show its current move. */
+/** Scrolls the list, and only the list, as little as it takes to show the whole row of its current move, and the result under the last one. */
 function keepInSight(list) {
-    const box = list?.getBoundingClientRect();
-    const move = list?.querySelector(".current")?.getBoundingClientRect();
-    if (box === undefined || move === undefined) {
+    const row = list?.querySelector(".current")?.closest("li");
+    if (list === null || !row) {
         return;
     }
-    list.scrollTop += Math.min(0, move.top - box.top) + Math.max(0, move.bottom - box.bottom);
+    const box = list.getBoundingClientRect();
+    const top = row.getBoundingClientRect().top;
+    const bottom = (row.nextElementSibling === null ? list.lastElementChild ?? row : row).getBoundingClientRect().bottom;
+    list.scrollTop += Math.min(0, top - box.top) + Math.max(0, bottom - box.bottom);
 }
 /** The plies in rows of one number: White's move and Black's. */
 function rowsOf(plies) {

package/dist/page/guide/en.md

@@ -18,7 +18,7 @@ No chess engine plays for the AI: every move and every judgment is its own. Ches
 
 ### Getting started
 
-1. Click the **AI's name**, at the top left, and choose its chat among those on your computer: **Claude Code** or **Codex**. It opens in a window of its own: keep it open while you play.
+1. Click the **AI's name**, at the top left, and choose its chat among those on your computer: **Claude Code** or **Codex**. It opens in a window of its own: keep it open while you play. The first time it asks some questions. Whether you trust the folder: **Yes**. With Codex, about the hooks, Chesspal's two helpers: **Trust all and continue**. On Windows Codex also asks whether to set up its sandbox, the protected space it works in: choose the first option, and yes when Windows asks for permission.
 2. Press **New game**, choose your colour, the clock and the AI's level, and press **Start**.
 3. Move: the AI answers on the board, and with a few words under its name.
 

package/dist/page/guide/it.md

@@ -18,7 +18,7 @@ Nessun motore di scacchi gioca al posto dell'AI: ogni mossa e ogni giudizio sono
 
 ### Per cominciare
 
-1. Clicca il **nome dell'AI**, in alto a sinistra, e scegli la chat fra quelle che hai sul computer: **Claude Code** o **Codex**. Si apre in una finestra sua: tienila aperta mentre giochi.
+1. Clicca il **nome dell'AI**, in alto a sinistra, e scegli la chat fra quelle che hai sul computer: **Claude Code** o **Codex**. Si apre in una finestra sua: tienila aperta mentre giochi. La prima volta fa qualche domanda. Se ti fidi della cartella: **Sì**. Con Codex, sugli hook, i due aiutanti di Chesspal: **Trust all and continue**. Su Windows Codex chiede anche se preparare la sua sandbox, lo spazio protetto dove lavora: scegli la prima opzione, e sì quando Windows chiede il permesso.
 2. Premi **Nuova partita**, scegli il colore, l'orologio e il livello dell'AI, e premi **Inizia**.
 3. Muovi: l'AI risponde sulla scacchiera, e con qualche parola sotto il suo nome.
 

package/dist/page/helps/helps.css

@@ -801,26 +801,26 @@
 /* The thread that keeps the black half in sight on the dark theme, as the lead bar's */
 .control-bar,
 .row-tile {
-    border: 1px solid rgb(138 144 153 / 0.6);
+    border: 1px solid var(--side-edge);
 }
 
 /* The bar's colours, which the lines' tiles share */
 .control-bar .white,
 .row-tile .white {
-    background: #f4f6f8;
+    background: var(--side-white);
     color: var(--fixed-ink);
 }
 
 .control-bar .both,
 .row-tile .both {
-    background: #8d98a7;
+    background: var(--side-both);
     color: var(--fixed-ink);
 }
 
 .control-bar .black,
 .row-tile .black {
-    background: var(--fixed-ink);
-    color: #f4f6f8;
+    background: var(--side-black);
+    color: var(--side-white);
 }
 
 /* A line's tile: a half for each side, the player's first; the open files in one half as wide as the two */