chesspal 0.1.0 → 0.2.1

package/dist/page/game/game.css

@@ -0,0 +1,577 @@
+/* The game's column: the moves, the lead, the game's card and its commands */
+
+/* The game's card, as tall as a player's across the board: a little board where the player's card has their face, round people, a square game */
+.game-card {
+    margin: 0;
+    min-height: 74px;
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    font-size: 13px;
+}
+
+.tile {
+    position: relative;
+    flex: none;
+    display: grid;
+    place-items: center;
+    width: 48px;
+    height: 48px;
+    border-radius: var(--radius);
+    /* A board of four squares in the skin's colours, the dark one at the bottom left as on a board */
+    background: conic-gradient(var(--dark-square) 0 25%, var(--light-square) 0 50%, var(--dark-square) 0 75%, var(--light-square) 0);
+    overflow: hidden;
+}
+
+.tile .piece {
+    --piece-edge-width: 7px;
+    width: 40px;
+    height: 40px;
+}
+
+/* The king to move, edged in the accent like the coin of whoever moves */
+.tile.moving {
+    box-shadow: 0 0 0 2px var(--card), 0 0 0 4px var(--accent);
+}
+
+/* At the end both kings: side by side in a draw, the loser laid at the winner's feet */
+.tile.over {
+    display: flex;
+    justify-content: center;
+    align-items: flex-end;
+    padding-bottom: 4px;
+}
+
+.tile.over .piece {
+    --piece-edge-width: 8px;
+    width: 30px;
+    height: 30px;
+}
+
+.tile.draw .piece + .piece {
+    margin-left: -12px;
+}
+
+.tile.win > span {
+    position: absolute;
+    display: grid;
+}
+
+.tile.win .piece {
+    width: 100%;
+    height: 100%;
+}
+
+.tile.win .up {
+    right: 5px;
+    bottom: 4px;
+    width: 28px;
+    height: 28px;
+}
+
+/* Laid down, the king is as wide as it was tall: it drops 5px to rest where the other stands */
+.tile.win .down {
+    left: 4px;
+    bottom: -1px;
+    width: 24px;
+    height: 24px;
+    rotate: -90deg;
+}
+
+.game-card .what {
+    flex: 1;
+    min-width: 0;
+    line-height: 1.25;
+}
+
+.game-card p {
+    margin: 0;
+}
+
+.game-card .head,
+.game-card .when {
+    color: var(--soft);
+}
+
+.game-card .big {
+    color: var(--ink);
+    font-size: 20px;
+    font-weight: 600;
+    font-variant-numeric: tabular-nums;
+    letter-spacing: -0.01em;
+}
+
+.game-card .when {
+    margin-top: 2px;
+}
+
+/* The game ended under the player's eyes: once the board has shown it, with the kings' badges, the card lights up in the accent and fades back */
+.game-card.lit {
+    animation: lit 1200ms ease-out 1350ms;
+}
+
+@keyframes lit {
+    20% {
+        box-shadow: 0 0 0 2px var(--accent), 0 0 18px color-mix(in srgb, var(--accent) 55%, transparent);
+    }
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .game-card.lit {
+        animation: none;
+    }
+}
+
+/* Who is ahead, as the AI estimates it (D-90): White's share from the left, Black's from the right, the figure on the side ahead, as chess.com's bar; an edge
+   and a mark of the even game in the middle keep it a bar of two sides in both themes, never one of progress (Zoe) */
+.lead-bar {
+    position: relative;
+    height: 14px;
+    margin-top: 6px;
+    border-radius: 7px;
+    background: #3b4048;
+    box-shadow: 0 0 0 1px rgb(138 144 153 / 0.6);
+    overflow: hidden;
+}
+
+.lead-bar::after {
+    content: "";
+    position: absolute;
+    inset: 3px auto 3px calc(50% - 0.5px);
+    width: 1px;
+    background: #8a9099;
+}
+
+/* On a position after the one the AI estimated: the player's move, until the coach speaks again */
+.lead-bar.earlier {
+    opacity: 0.55;
+}
+
+.lead-bar .white {
+    position: absolute;
+    inset: 0 auto 0 0;
+    background: #f5f5f2;
+    transition: width 400ms ease;
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .lead-bar .white {
+        transition: none;
+    }
+}
+
+.lead-bar .figure {
+    position: absolute;
+    top: 0;
+    font-size: 10px;
+    font-weight: 700;
+    line-height: 14px;
+    font-variant-numeric: tabular-nums;
+}
+
+.lead-bar .figure.white,
+.lead-bar .figure.even {
+    left: 6px;
+    color: #2a2f36;
+}
+
+.lead-bar .figure.black {
+    right: 6px;
+    color: #f5f5f2;
+}
+
+/* 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
+   shown, gold as on the board and in the moves (Zoe) */
+.lead-card {
+    display: grid;
+    gap: 8px;
+}
+
+.lead-chart {
+    position: relative;
+    height: 72px;
+    border-radius: 6px;
+    background: #3b4048;
+    box-shadow: 0 0 0 1px rgb(138 144 153 / 0.6);
+    overflow: hidden;
+    cursor: pointer;
+}
+
+.lead-chart svg {
+    display: block;
+    width: 100%;
+    height: 100%;
+}
+
+.lead-chart .white-area {
+    fill: #f5f5f2;
+}
+
+.lead-chart .pending {
+    fill: #5a606a;
+}
+
+.lead-chart .even {
+    stroke: #8a9099;
+    stroke-width: 1;
+    stroke-dasharray: 3 3;
+    fill: none;
+}
+
+.lead-chart .shown {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    width: 2px;
+    margin-left: -1px;
+    background: #ffc450;
+    box-shadow: 0 0 0 1px rgb(20 23 27 / 0.6);
+    pointer-events: none;
+}
+
+.lead-chart .dot {
+    position: absolute;
+    width: 8px;
+    height: 8px;
+    margin: -4px 0 0 -4px;
+    border-radius: 50%;
+    box-shadow: 0 0 0 1.5px #ffffff;
+    pointer-events: none;
+}
+
+.lead-chart .dot.brilliant {
+    background: var(--badge-brilliant);
+}
+
+.lead-chart .dot.great {
+    background: var(--badge-great);
+}
+
+.lead-chart .dot.miss {
+    background: var(--badge-miss);
+}
+
+.lead-chart .dot.mistake {
+    background: var(--badge-mistake);
+}
+
+.lead-chart .dot.blunder {
+    background: var(--badge-blunder);
+}
+
+.opening {
+    display: grid;
+    gap: 2px;
+    font-size: 13px;
+}
+
+.opening p {
+    margin: 0;
+}
+
+.opening .family {
+    display: flex;
+    align-items: center;
+    gap: 7px;
+    margin: 0;
+    font-size: inherit;
+    font-weight: inherit;
+}
+
+.opening .book {
+    display: grid;
+    align-self: center;
+    color: var(--accent);
+}
+
+.opening .book .icon {
+    width: 21px;
+    height: 21px;
+    stroke-width: 2.3;
+}
+
+.opening .book.out {
+    color: var(--ink);
+}
+
+.opening .variation {
+    color: var(--ink);
+}
+
+.opening .out {
+    color: var(--soft);
+    font-size: 12px;
+}
+
+/* A game in analysis (D-69): the AI's word on the whole game above the moves, and its note on the move shown in the talk, under the Torretta */
+.review {
+    display: grid;
+    gap: 4px;
+    font-size: 13.5px;
+    line-height: 1.45;
+}
+
+.review.waiting,
+.say.reviewing {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    margin: 0;
+    color: var(--soft);
+}
+
+.review ul {
+    margin: 0;
+    padding-left: 18px;
+}
+
+.review p,
+.ai-note p {
+    margin: 0;
+}
+
+.review .head {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    color: var(--soft);
+    font-size: 12px;
+}
+
+/* The moves' card takes the column's room left: its title, then the list */
+.moves-card {
+    flex: 1;
+    min-height: 120px;
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+    padding: 8px 10px;
+}
+
+.moves-card .card-title {
+    padding: 2px 4px 0;
+}
+
+/* Positioned, so that the moves' hidden names scroll with the list instead of stretching the page */
+.moves {
+    position: relative;
+    flex: 1;
+    min-height: 0;
+    /* It scrolls with no scrollbar, kept on the move shown */
+    overflow: hidden auto;
+    scrollbar-width: none;
+    font-size: 14px;
+}
+
+.moves ol {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+}
+
+.moves li {
+    display: grid;
+    grid-template-columns: 30px 1fr 1fr;
+    padding: 3px 6px;
+    border-radius: 5px;
+}
+
+.moves .result {
+    margin: 6px;
+    font-weight: 600;
+}
+
+.moves li:nth-child(even) {
+    background: var(--page);
+}
+
+.moves .number {
+    color: var(--soft);
+}
+
+/* A move is a button that shows it on the board; shown or not it keeps the same room, so stepping with the arrows never shifts the line (Stefano) */
+.moves .ply {
+    justify-self: start;
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    padding: 1px 6px;
+    margin-left: -6px;
+    background: none;
+    border: 0;
+    border-radius: 5px;
+    color: inherit;
+    font: inherit;
+    cursor: pointer;
+}
+
+/* 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);
+}
+
+/* The move shown in the board's gold of the last move, laid on the light square as there, with dark ink in both themes: the yellow move in the list is the yellow
+   move on the board, and it follows the skin (Stefano) */
+.moves .ply.current {
+    background: var(--light-square) linear-gradient(var(--last-move), var(--last-move));
+    color: var(--fixed-ink);
+}
+
+.moves .current .takes {
+    color: #4d5866;
+}
+
+/* A ring in the card's colour keeps a badge's disc whole on the gold */
+.moves .current .move-badge {
+    border-radius: 50%;
+    box-shadow: 0 0 0 1.5px var(--card);
+}
+
+/* The buttons that step through the moves, under them as on Lichess and chess.com */
+.steps {
+    display: flex;
+    gap: 4px;
+    padding: 4px;
+}
+
+.steps button {
+    flex: 1;
+    display: grid;
+    place-items: center;
+    padding: 6px 0;
+    background: none;
+    border: 1px solid transparent;
+    border-radius: 6px;
+    color: var(--ink);
+    cursor: pointer;
+}
+
+.steps button:hover:not(:disabled) {
+    background: var(--page);
+    border-color: var(--line);
+}
+
+.steps button:disabled {
+    color: var(--soft);
+    opacity: 0.5;
+    cursor: default;
+}
+
+.steps .icon {
+    width: 20px;
+    height: 20px;
+    stroke-width: 2;
+}
+
+/* A piece in a move: the set's small one, White's white and Black's black, edged so either shows on either theme */
+.figurine {
+    display: inline-block;
+    width: 1.15em;
+    height: 1.15em;
+    margin-right: 0.05em;
+    vertical-align: -0.22em;
+}
+
+/* A capture's x is grey, so the squares of a move read first */
+.takes {
+    color: var(--soft);
+    font-weight: 400;
+}
+
+/* In analysis, the game's own commands in the right column: save its PGN with the review, open the other analyses */
+.analysis-actions {
+    display: flex;
+    gap: 8px;
+    padding: 8px;
+}
+
+.analysis-actions button {
+    flex: 1;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 6px;
+    padding: 7px 10px;
+    border: 1px solid var(--line);
+    border-radius: 8px;
+    background: transparent;
+    color: var(--ink);
+    font: inherit;
+    font-size: 13px;
+    cursor: pointer;
+}
+
+.analysis-actions button:hover {
+    border-color: var(--accent);
+}
+
+/* Where the game's column runs under the board, the moves in two columns */
+@media (max-width: 1099px) {
+    .moves ol {
+        columns: 2;
+        column-gap: 12px;
+    }
+
+    .moves li {
+        break-inside: avoid;
+    }
+}
+
+/* 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;
+    align-items: center;
+    gap: 7px;
+    margin: 0;
+    font-size: 13px;
+    font-weight: 700;
+    color: var(--ink);
+}
+
+.card-title .icon {
+    width: 19px;
+    height: 19px;
+    stroke-width: 2.1;
+    color: var(--accent);
+}
+
+/* A card's title is the button that folds the card to it and opens it again, a chevron after the name (Stefano) */
+.card-fold {
+    display: inline-flex;
+    align-items: center;
+    gap: 7px;
+    padding: 0;
+    border: 0;
+    background: none;
+    color: inherit;
+    font: inherit;
+    text-align: left;
+    cursor: pointer;
+}
+
+.card-fold .chevron {
+    flex: none;
+    width: 14px;
+    height: 14px;
+    fill: none;
+    stroke: var(--soft);
+    stroke-width: 1.8;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+}
+
+.card-fold:hover .chevron,
+.card-fold:focus-visible .chevron {
+    stroke: var(--accent);
+}
+
+/* A folded card is its title alone: the moves' gives the column's room back to the cards above */
+.moves-card.folded {
+    flex: none;
+    min-height: 0;
+}
+
+/* The saves and the steps stay at the foot of the column, with the moves folded too (Stefano) */
+.side > .moves-card + * {
+    margin-top: auto;
+}

package/dist/page/{move-list.js → game/move-list.js}

@@ -1,13 +1,15 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "preact/jsx-runtime";
 import { useEffect, useRef } from "preact/hooks";
+import { Figurine } from "../pieces/pieces.js";
 import { BadgeIcon, NoteIcon } from "./badges.js";
-import { Figurine } from "./pieces.js";
+import { FoldButton, useCardFold } from "./card-fold.js";
 /**
  * The moves numbered in pairs, the one the board shows marked (`shown`, how many moves it shows), and the result once the game is over; a click on a move
  * shows it. The list keeps its last move in sight, and the one shown while the player looks back.
  */
 export function MoveList({ plies, result, shown, onShow, text }) {
     const list = useRef(null);
+    const [folded, toggleFold] = useCardFold("moves");
     const rows = rowsOf(plies);
     const current = plies[shown - 1];
     useEffect(() => {
@@ -26,13 +28,19 @@ export function MoveList({ plies, result, shown, onShow, text }) {
         return () => observer.disconnect();
     }, []);
     const move = (ply) => _jsx(Move, { ply: ply, current: ply !== undefined && ply === current, onShow: () => onShow(plies.indexOf(ply) + 1), text: text });
-    return (_jsxs("div", { ref: list, class: "moves card", role: "region", "aria-label": text.moves, children: [_jsx("ol", { children: rows.map(({ number, white, black }) => (_jsxs("li", { children: [_jsxs("span", { class: "number", children: [number, "."] }), move(white), move(black)] }, number))) }), result === undefined ? null : _jsx("p", { class: "result", children: result })] }));
+    // The card's title with its icon, a score sheet, as the other cards of the column, which folds the card to it (Stefano); only the list under it
+    // scrolls, and it stays in the page while folded, so that it keeps its move in sight.
+    return (_jsxs("section", { class: `card moves-card${folded ? " folded" : ""}`, "aria-label": text.moves, children: [_jsx("h3", { class: "card-title", children: _jsxs(FoldButton, { folded: folded, onFold: toggleFold, text: text, children: [_jsx("svg", { class: "icon", viewBox: "0 0 24 24", "aria-hidden": "true", children: _jsx("path", { d: "M6 3H15L19 7V21H6ZM15 3V7H19M9 11H16M9 14.5H16M9 18H13" }) }), text.moves] }) }), _jsxs("div", { ref: list, class: "moves", hidden: folded, children: [_jsx("ol", { children: rows.map(({ number, white, black }) => (_jsxs("li", { children: [_jsxs("span", { class: "number", children: [number, "."] }), move(white), move(black)] }, number))) }), result === undefined ? null : _jsx("p", { class: "result", children: result })] })] }));
 }
 /** The buttons that step through the moves: to the start, back, forward, and to the game as it is; each one off where it could not go. */
 export function Steps({ shown, total, onStep, text }) {
     const button = (step, path, off) => (_jsx("button", { type: "button", title: text.steps[step], "aria-label": text.steps[step], disabled: off, onClick: () => onStep(step), children: _jsx("svg", { class: "icon", viewBox: "0 0 24 24", "aria-hidden": "true", children: _jsx("path", { d: path }) }) }));
     return (_jsxs("nav", { class: "steps card", "aria-label": text.moves, children: [button("first", "M7 6V18M17 6L11 12L17 18", shown === 0), button("back", "M14.5 6L8.5 12L14.5 18", shown === 0), button("forward", "M9.5 6L15.5 12L9.5 18", shown === total), button("last", "M17 6V18M7 6L13 12L7 18", shown === total)] }));
 }
+/** A move in SAN with each piece's letter drawn as its figure, the same in every language (D-50), and a capture's x in grey, so the squares stand out. */
+export function Figurines({ san, side }) {
+    return (_jsx(_Fragment, { children: san.split(/([KQRBNx])/).map((part, index) => index % 2 === 0 ? part : part === "x" ? _jsx("span", { class: "takes", children: "x" }, index) : _jsx(Figurine, { letter: part, side: side }, index)) }));
+}
 function Move({ ply, current, onShow, text }) {
     if (ply === undefined) {
         return _jsx("span", { children: "\u2026" });
@@ -40,10 +48,6 @@ 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] }));
 }
-/** A move in SAN with each piece's letter drawn as its figure, the same in every language (D-50), and a capture's x in grey, so the squares stand out. */
-export function Figurines({ san, side }) {
-    return (_jsx(_Fragment, { children: san.split(/([KQRBNx])/).map((part, index) => index % 2 === 0 ? part : part === "x" ? _jsx("span", { class: "takes", children: "x" }, index) : _jsx(Figurine, { letter: part, side: side }, index)) }));
-}
 /** Scrolls the list, and only the list, as little as it takes to show its current move. */
 function keepInSight(list) {
     const box = list?.getBoundingClientRect();

package/dist/page/{plies.js → game/plies.js}

@@ -1,6 +1,6 @@
 // The moves of a game as the page shows them: each with its side and number, the comment the player may read and the AI's review; and the words said on
 // the page.
-import { drawingsIn, reviewOf } from "../core/index.js";
+import { drawingsIn, leadOf, reviewOf } from "../../core/index.js";
 /**
  * The moves of a record, each with its side and number: a game may start from a position where Black moves first. A comment keeps only its words: the
  * commands in it, such as the AI's plan that an ended game shows, and the (=) of a draw offer (D-65), are not for the page.
@@ -14,34 +14,51 @@ export function pliesOf(record) {
         // The AI's drawings with its own move, with the helps on, come without a badge or a note (D-78).
         const drawings = drawingsIn(move.comment);
         const review = reviewOf(move.comment) ?? (Object.keys(drawings).length === 0 ? undefined : drawings);
+        const lead = leadOf(move.comment);
         const ply = {
             san: move.san,
             side: (index + offset) % 2 === 0 ? "white" : "black",
             number: first + Math.floor((index + offset) / 2),
             ...(review === undefined ? {} : { review }),
+            ...(lead === undefined ? {} : { lead }),
         };
         return comment === undefined || comment === "" ? ply : { ...ply, comment };
     });
 }
+/** The moves with the coach's judgments on the player's, as the analyst's review shows on them (D-88), and who it saw ahead after the moves it was given (D-90). */
+export function withJudgments(plies, { judgments, leads = [] }) {
+    return plies.map((ply, index) => {
+        const judgment = judgments.find((one) => one.ply === index + 1);
+        const lead = leads.find((one) => one.position === index + 1)?.lead;
+        const judged = judgment === undefined
+            ? ply
+            : { ...ply, review: { ...(judgment.badge === undefined ? {} : { badge: judgment.badge }), ...(judgment.note === undefined ? {} : { note: judgment.note }) } };
+        return lead === undefined ? judged : { ...judged, lead };
+    });
+}
 /** The moves with the book's badge on the first `book` of them that have no review of the AI's. */
 export function withBook(plies, book) {
     // A move the AI only drew on keeps its drawings beside the book's badge (D-78).
     return book === 0 ? plies : plies.map((ply, index) => index < book && ply.review?.badge === undefined && ply.review?.note === undefined ? { ...ply, review: { ...ply.review, badge: "book" } } : ply);
 }
-/** The moves without the AI's review: during a game with the helps off the player sees neither its judgments nor its drawings (D-78). */
+/** The moves without the AI's review: during a game with the helps off the player sees neither its judgments nor its drawings (D-78), nor who is ahead (D-90). */
 export function withoutReviews(plies) {
-    return plies.map(({ review, ...ply }) => ply);
+    return plies.map(({ review, lead, ...ply }) => ply);
 }
-/** The player's last move when the AI judged it, with a badge of its own or a note, and has moved since (D-78); none else. */
-export function judgmentOf(plies, player) {
-    const judged = plies.at(-2);
-    const review = judged?.review;
-    const answered = plies.at(-1)?.side !== player && judged?.side === player;
-    return answered && review !== undefined && (review.note !== undefined || (review.badge !== undefined && review.badge !== "book")) ? judged : undefined;
+/**
+ * The coach's judgments the card shows (D-78, D-88): first one whose note was held until the player's last move let it go, however far back its move (Zoe); then the latest, of the player's last move the AI has answered, else of the one before (Zoe and Federico). Only
+ * those with a badge of their own or a note.
+ */
+export function judgmentsOf(plies, player, { judgments }) {
+    const answered = plies.at(-1)?.side === player ? plies.slice(0, -1) : plies;
+    const latest = answered.filter((ply) => ply.side === player).slice(-2).reverse().find(judged);
+    const released = judgments.filter((judgment) => judgment.released === true).map(({ ply }) => answered[ply - 1])
+        .filter((ply) => ply !== undefined && ply !== latest && judged(ply));
+    return [...released, ...(latest === undefined ? [] : [latest])];
 }
 /** How long a line of the player's may be: the server's limit (D-54), which a test keeps equal. */
 export const talkLimits = { line: 200 };
-/** How many times the AI has spoken in the game, its comments on its moves and its lines on the page: the page sees it speak when the count grows (T-84). */
+/** How many times the AI has spoken in the game, its comments on its moves and its lines on the page: the page sees it speak when the count grows. */
 export function aiSpoke(plies, ai, talk) {
     return plies.filter((ply) => ply.side === ai && ply.comment !== undefined).length + talk.filter((line) => line.who === "ai").length;
 }
@@ -60,3 +77,6 @@ export function playerSpent(plies, ai, talk) {
     const moved = plies.findLastIndex((ply) => ply.side === ai);
     return talk.filter((line) => line.who === "player" && line.ply > moved).reduce((sum, line) => sum + line.text.length, 0);
 }
+function judged({ review }) {
+    return review?.note !== undefined || (review?.badge !== undefined && review.badge !== "book");
+}