chesspal 0.2.2 → 0.2.4

package/dist/page/board/marks.js

@@ -1,12 +1,24 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "preact/jsx-runtime";
-// What the board draws over its squares and pieces: the kings' badges at the end, the arrows, the helps' corners and pins, the control map's counts, the
-// bubble of a refused move, the choice of a promotion and the piece lifted off the board.
 import { useEffect, useRef, useState } from "preact/hooks";
 import { Piece } from "../pieces/pieces.js";
 /** The corner folded on a piece at risk, red on the player's and green on the other side's, in ink when no side is theirs (D-91); before its line in the card. */
 export function Notch({ tone }) {
     return (_jsx("span", { class: tone === undefined ? "help-notch" : `help-notch ${tone}`, "aria-hidden": "true", children: _jsxs("svg", { viewBox: "0 0 10 10", children: [_jsx("path", { d: "M0.5 0.5V9.5H9.5Z" }), tone === undefined ? null : _jsx("path", { class: "edge", d: "M0.5 0.5V9.5H9.5Z" }), _jsx("circle", { cx: "2.9", cy: "7.1", r: "1.1" })] }) }));
 }
+/**
+ * The pushpin stuck in a pinned piece from the top left corner, its needle toward the piece, in the tone of its corner at risk (D-91); in ink in no side's;
+ * in the card's line, in its colour.
+ */
+export function Pushpin({ tone }) {
+    return _jsx(Stuck, { kind: "help-pin", shape: pushpin, tone: tone });
+}
+/**
+ * The skewer stuck in the skewered piece, the one in front, as the pushpin in a pinned one (D-91): a stick in ink with a big bead and a small one in the tone,
+ * as the piece in front and the cheaper one behind it, so that it reads apart from the pushpin, all in the tone (Stefano); in the card's line, in its colour.
+ */
+export function Skewer({ tone }) {
+    return (_jsx(Stuck, { kind: "help-skewer", shape: skewer, tone: tone, children: tone === undefined || tone === "neutral" ? null : skewerBeads.map(({ y, radius }) => _jsx("circle", { cx: "12", cy: y, r: radius }, y)) }));
+}
 /** A king's badge in the corner of its square. */
 export function Badge({ kind }) {
     return (_jsx("span", { class: `badge ${kind}`, "aria-hidden": "true", children: kind === "mate" ? "#" : kind === "half" ? "½" : (_jsx("svg", { viewBox: "0 0 24 24", children: kind === "crown" ? _jsx("path", { d: "M4 18L3 7L8.5 11L12 5L15.5 11L21 7L20 18Z" }) : _jsx("path", { d: "M6 21V4M6 4.5C10 2.5 13 6.5 18 4.5V13.5C13 15.5 10 11.5 6 13.5" }) })) }));
@@ -46,13 +58,20 @@ export function Arrows({ arrows, at, explain, occupied }) {
     const starts = [...new Set(shapes.map(({ from }) => from))];
     return (_jsx("svg", { class: explain !== undefined ? "arrows explain" : occupied !== undefined ? "arrows drawn" : "arrows", viewBox: "0 0 8 8", "aria-hidden": "true", children: starts.map((start) => _jsx(ArrowGroup, { shapes: shapes.filter(({ from }) => from === start), edged: occupied !== undefined }, start)) }));
 }
-/** Each pin as a dashed line from the pinning piece through the pinned one to what stands behind it (D-78), over a halo that reads on every board. */
-export function Pins({ pins, at }) {
-    return (_jsx("svg", { class: "helps-layer", viewBox: "0 0 8 8", "aria-hidden": "true", children: pins.map((pin) => {
+/**
+ * Each pin as a dashed line from the pinning piece through the pinned one to what stands behind it (D-78), and each skewer as a dash-dot one, beads on its stick, over
+ * a halo that reads on every board. A pin and a skewer on the same stretch of a line stand apart on its two sides, so that both read.
+ */
+export function PinsAndSkewers({ pins, skewers, at }) {
+    const lines = [...pins.map((line) => ({ kind: "pin", line, other: skewers })), ...skewers.map((line) => ({ kind: "skewer", line, other: pins }))];
+    return (_jsx("svg", { class: "helps-layer", viewBox: "0 0 8 8", "aria-hidden": "true", children: lines.map(({ kind, line, other }) => {
             // The line stops short of both ends, as an explaining arrow does: it hides neither piece, nor the corner of a pinner at risk.
-            const [x0, y0] = towards(at(pin.by.square), at(pin.to.square), pinTrim);
-            const [x1, y1] = towards(at(pin.to.square), at(pin.by.square), pinTrim);
-            return (_jsxs("g", { class: "pin", children: [_jsx("line", { class: "halo", x1: x0, y1: y0, x2: x1, y2: y1 }), _jsx("line", { x1: x0, y1: y0, x2: x1, y2: y1 })] }, `${pin.by.square}${pin.piece.square}`));
+            const [startX, startY] = towards(at(line.by.square), at(line.to.square), pinTrim);
+            const [endX, endY] = towards(at(line.to.square), at(line.by.square), pinTrim);
+            const shift = other.some((each) => sharedSquares(each, line) > 1) ? (kind === "pin" ? 1 : -1) * sharedLineShift : 0;
+            const [dx, dy] = across([startX, startY], [endX, endY], shift);
+            const ends = { x1: startX + dx, y1: startY + dy, x2: endX + dx, y2: endY + dy };
+            return (_jsxs("g", { class: kind, children: [_jsx("line", { class: "halo", ...ends }), _jsx("line", { ...ends })] }, `${kind} ${line.by.square}${line.piece.square}`));
         }) }));
 }
 /** A square's counts on the control map, as a domino in its middle: how many of White's pieces reach it, and of Black's; none when no piece does. */
@@ -106,35 +125,30 @@ export function Lifted({ drag, letter }) {
     const classes = ["lifted", up && !drag.back ? "up" : "", drag.touch ? "touch" : "", drag.back ? "back" : ""].filter((name) => name !== "").join(" ");
     return (_jsx("div", { class: classes, style: { "--x": `${drag.at[0]}px`, "--y": `${drag.at[1]}px` }, children: _jsx(Piece, { letter: letter }) }));
 }
-/** The kings' signs at the end, by their squares: the loser's king lies down when mated or resigning; both kings of a draw stand, the stalemated one stuck. */
-export function kingSigns(pieces, toMove, end) {
-    const kingOf = (side) => [...pieces].find(([, letter]) => letter === (side === "white" ? "K" : "k"))?.[0];
-    const signs = new Map();
-    const sign = (side, badge, classes) => {
-        const square = kingOf(side);
-        if (square !== undefined) {
-            signs.set(square, { badge, classes });
-        }
-    };
-    if (end.winner === undefined) {
-        sign("white", "half", end.how === "stalemate" && toMove === "white" ? "drawn stalled" : "drawn");
-        sign("black", "half", end.how === "stalemate" && toMove === "black" ? "drawn stalled" : "drawn");
-        return signs;
-    }
-    const loser = end.winner === "white" ? "black" : "white";
-    sign(end.winner, "crown", "winner");
-    if (end.how === "checkmate" || end.how === "resignation") {
-        sign(loser, end.how === "checkmate" ? "mate" : "flag", "fallen");
-    }
-    return signs;
-}
-export const noSigns = new Map();
 /** Arrows off one square, the AI's on a white edge (D-78): every edge under every arrow, so one edge goes round them all where they meet. */
 function ArrowGroup({ shapes, edged }) {
     return (_jsxs("g", { children: [edged
                 ? shapes.map(({ key, shaft, head }) => (_jsxs("g", { children: [_jsx("path", { class: "edge", d: shaft }), _jsx("polygon", { class: "edge", points: head })] }, `edge${key}`)))
                 : null, shapes.map(({ key, colour, shaft, head }) => (_jsxs("g", { class: colour, children: [_jsx("path", { d: shaft }), _jsx("polygon", { points: head })] }, key)))] }));
 }
+/**
+ * A sign stuck in a piece from its square's top left corner, tilted toward the piece; edged in ink when coloured (Zoe). Its box holds the tilted sign and
+ * its halo only, so that it sits in the corner (Stefano).
+ */
+function Stuck({ kind, shape, tone, children }) {
+    return (_jsx("span", { class: tone === undefined ? kind : `${kind} ${tone}`, "aria-hidden": "true", children: _jsx("svg", { viewBox: "2 0.5 18.5 22.5", children: _jsxs("g", { transform: "rotate(-32 12 12)", children: [_jsx("path", { d: shape }), tone === undefined || tone === "neutral" ? null : _jsx("path", { class: "edge", d: shape }), children] }) }) }));
+}
+/** How many of their three squares a pin and a skewer share: two when they lie on the same stretch of a line. */
+function sharedSquares(one, other) {
+    const squares = [one.by.square, one.piece.square, one.to.square];
+    return [other.by.square, other.piece.square, other.to.square].filter((square) => squares.includes(square)).length;
+}
+/** A step of the given length across a line, always to the same side of it whichever way the line runs. */
+function across(start, end, distance) {
+    const length = Math.hypot(end[0] - start[0], end[1] - start[1]);
+    const way = end[0] < start[0] || (end[0] === start[0] && end[1] < start[1]) ? -1 : 1;
+    return [-(end[1] - start[1]) / length * distance * way, (end[0] - start[0]) / length * distance * way];
+}
 /** A point `distance` squares from `point` toward `target`. */
 function towards(point, target, distance) {
     const length = Math.hypot(target[0] - point[0], target[1] - point[1]);
@@ -150,10 +164,18 @@ function ExplainIcon({ kind, piece }) {
                     : _jsx("path", { d: "M4 8h15M15 4l4 4-4 4M20 16H5M9 12l-4 4 4 4" }) })) }));
 }
 const promotionPieces = ["q", "n", "r", "b"];
+// A pushpin standing up, as the bubble's pin: its cap, its body widening into the collar, and its needle. Tilted less than a diagonal, so it never lies along a pin's line.
+const pushpin = "M8.6 2.2H15.4Q16.6 2.2 16.6 3.4V4.6Q16.6 5.8 15.4 5.8H14.8V9.4L18.4 13.1V14.9H13V20L12 22.6L11 20V14.9H5.6V13.1L9.2 9.4V5.8H8.6Q7.4 5.8 7.4 4.6V3.4Q7.4 2.2 8.6 2.2Z";
+// A skewer standing up, in the pushpin's box: a round end, a big bead, a small one, a stretch of stick between them, and its point.
+const skewer = "M10.9 2.6A1.1 1.1 0 0 1 13.1 2.6V3.75A4.2 4.2 0 0 1 13.1 11.85V13A3.1 3.1 0 0 1 13.1 18.8V20.2L12 23.4L10.9 20.2V18.8A3.1 3.1 0 0 1 10.9 13V11.85A4.2 4.2 0 0 1 10.9 3.75Z";
+// The skewer's beads, on its stick: the big one and the small one, as its shape draws them.
+const skewerBeads = [{ y: 7.8, radius: 4.2 }, { y: 15.9, radius: 3.1 }];
 // How much an arrow that explains is cut, in squares: off the culprit at its start, and before an occupied square at its point.
 const explainTrim = { start: 0.36, end: 0.4 };
 // How much a pin's line is cut at each end, in squares.
 const pinTrim = 0.35;
+// How far a pin and a skewer on the same stretch of a line stand off it, each on its side, in squares: a little more than a line with its halo.
+const sharedLineShift = 0.08;
 // An arrow's head, in squares: how long, and how far each side of its line.
 const arrowHead = { length: 0.42, width: 0.3 };
 // The helps' point, smaller in step with their thinner shaft (Stefano).

package/dist/page/board/signs.js

@@ -0,0 +1,23 @@
+/** The kings' signs at the end, by their squares: the loser's king lies down when mated or resigning; both kings of a draw stand, the stalemated one stuck. */
+export function kingSigns(pieces, toMove, end) {
+    const kingOf = (side) => [...pieces].find(([, letter]) => letter === (side === "white" ? "K" : "k"))?.[0];
+    const signs = new Map();
+    const sign = (side, badge, classes) => {
+        const square = kingOf(side);
+        if (square !== undefined) {
+            signs.set(square, { badge, classes });
+        }
+    };
+    if (end.winner === undefined) {
+        sign("white", "half", end.how === "stalemate" && toMove === "white" ? "drawn stalled" : "drawn");
+        sign("black", "half", end.how === "stalemate" && toMove === "black" ? "drawn stalled" : "drawn");
+        return signs;
+    }
+    const loser = end.winner === "white" ? "black" : "white";
+    sign(end.winner, "crown", "winner");
+    if (end.how === "checkmate" || end.how === "resignation") {
+        sign(loser, end.how === "checkmate" ? "mate" : "flag", "fallen");
+    }
+    return signs;
+}
+export const noSigns = new Map();

package/dist/page/game/column.js

@@ -10,11 +10,11 @@ import { ResultTile } from "./result-tile.js";
  * The column, which the player folds with its tab; under the board, where three columns would leave the board small, always open. A game in analysis
  * (D-69) says above the moves that the AI is going over it, until its word on the whole game comes, which the talk shows.
  */
-export function GameColumn({ plies, result, how, lit, started, move, toMove, opening, helps, standings, analysis, shownPlies, onShow, onStep, onDownload, onSaveMoves, onAnalyse, text }) {
+export function GameColumn({ plies, result, how, lit, started, move, toMove, opening, helps, legend, standings, analysis, shownPlies, onShow, onStep, onDownload, onSaveMoves, onAnalyse, text }) {
     const bar = standings === undefined ? undefined : _jsx(LeadBar, { standing: standingAt(standings, shownPlies), shown: shownPlies, text: text });
     return (_jsx("aside", { class: "side", id: "game", "aria-label": text.game, children: started === undefined && analysis === undefined
             ? (_jsxs(_Fragment, { children: [_jsx("p", { class: "card empty", children: text.noGame }), onAnalyse === undefined ? null : _jsx(AnalyseButton, { label: text.study.analyseLast, onAnalyse: onAnalyse })] }))
-            : (_jsxs(_Fragment, { children: [_jsx(GameCard, { plies: plies, result: result, how: how, lit: lit, started: started, move: move, toMove: toMove, bar: bar, text: text }), analysis === undefined || standings === undefined ? null : _jsx(LeadChart, { plies: plies, standings: standings, shown: shownPlies, onShow: onShow, text: text }), opening === undefined ? null : _jsx(OpeningCard, { opening: opening, text: text }), helps, analysis === undefined || analysis.summary !== undefined ? null : (_jsxs("p", { class: "card review waiting", role: "status", children: [_jsx("span", { class: "spinner", "aria-hidden": "true" }), text.reviewing(analysis.by)] })), _jsx(MoveList, { plies: plies, result: result, shown: shownPlies, onShow: onShow, text: text }), onDownload === undefined && onSaveMoves === undefined ? null : (_jsxs("div", { class: "card analysis-actions", children: [onDownload === undefined ? null : _jsx(SaveButton, { label: text.study.download, hint: text.study.downloadHint, onSave: onDownload }), onSaveMoves === undefined ? null : _jsx(SaveButton, { label: text.saveMoves, hint: text.saveMovesHint, onSave: onSaveMoves })] })), onAnalyse === undefined ? null : _jsx(AnalyseButton, { label: text.study.analyseIt, onAnalyse: onAnalyse }), _jsx(Steps, { shown: shownPlies, total: plies.length, onStep: onStep, text: text })] })) }));
+            : (_jsxs(_Fragment, { children: [_jsx(GameCard, { plies: plies, result: result, how: how, lit: lit, started: started, move: move, toMove: toMove, bar: bar, text: text }), analysis === undefined || standings === undefined ? null : _jsx(LeadChart, { plies: plies, standings: standings, shown: shownPlies, onShow: onShow, text: text }), opening === undefined ? null : _jsx(OpeningCard, { opening: opening, text: text }), helps, analysis === undefined || analysis.summary !== undefined ? null : (_jsxs("p", { class: "card review waiting", role: "status", children: [_jsx("span", { class: "spinner", "aria-hidden": "true" }), text.reviewing(analysis.by)] })), _jsx(MoveList, { plies: plies, result: result, shown: shownPlies, onShow: onShow, tools: legend, text: text }), onDownload === undefined && onSaveMoves === undefined ? null : (_jsxs("div", { class: "card analysis-actions", children: [onDownload === undefined ? null : _jsx(SaveButton, { label: text.study.download, hint: text.study.downloadHint, onSave: onDownload }), onSaveMoves === undefined ? null : _jsx(SaveButton, { label: text.saveMoves, hint: text.saveMovesHint, onSave: onSaveMoves })] })), onAnalyse === undefined ? null : _jsx(AnalyseButton, { label: text.study.analyseIt, onAnalyse: onAnalyse }), _jsx(Steps, { shown: shownPlies, total: plies.length, onStep: onStep, text: text })] })) }));
 }
 /** A button that saves the game as a file in the player's downloads, its tooltip saying what the file holds. */
 function SaveButton({ label, hint, onSave }) {

package/dist/page/game/game.css

@@ -352,6 +352,18 @@
     padding: 2px 4px 0;
 }
 
+/* The title, and on its right the legend of the marks when no helps' card holds it (D-99) */
+.moves-head {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 8px;
+}
+
+.moves-head .hold-button {
+    padding: 3px 6px;
+}
+
 /* Positioned, so that the moves' hidden names scroll with the list instead of stretching the page */
 .moves {
     position: relative;

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

@@ -7,7 +7,7 @@ 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 }) {
+export function MoveList({ plies, result, shown, onShow, tools, text }) {
     const list = useRef(null);
     const [folded, toggleFold] = useCardFold("moves");
     const rows = rowsOf(plies);
@@ -30,7 +30,7 @@ export function MoveList({ plies, result, shown, onShow, text }) {
     const move = (ply) => _jsx(Move, { ply: ply, current: ply !== undefined && ply === current, onShow: () => onShow(plies.indexOf(ply) + 1), text: text });
     // 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 })] })] }));
+    return (_jsxs("section", { class: `card moves-card${folded ? " folded" : ""}`, "aria-label": text.moves, children: [_jsxs("div", { class: "moves-head", 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] }) }), tools] }), _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 }) {

package/dist/page/game/plies.js

@@ -58,6 +58,14 @@ export function judgmentsOf(plies, player, { judgments }) {
 }
 /** 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 };
+/**
+ * The talk over a game in analysis (D-101): from the player's first line on it, the lines said since, but for the player's on another game; the last ten,
+ * which is all half the column holds (Zoe).
+ */
+export function analysisTalk(talk, game) {
+    const first = talk.findIndex((line) => line.shown?.game === game);
+    return first === -1 ? [] : talk.slice(first).filter((line) => line.shown === undefined || line.shown.game === game).slice(-10);
+}
 /** 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;

package/dist/page/helps/helps.css

@@ -49,6 +49,74 @@
     stroke-width: 0.5;
 }
 
+/* A pinned piece: a pushpin stuck in it from the top left corner, in the notch's colours and on its halo; it takes the place of the rank's number there.
+   A skewered piece, the one in front: a skewer stuck in it the same way, beside the pushpin when the piece is pinned too */
+.help-pin,
+.help-skewer {
+    position: absolute;
+    left: 1px;
+    top: 1px;
+    z-index: 2;
+    display: block;
+    height: clamp(15px, 3.6cqw, 26px);
+    aspect-ratio: 18.5 / 22.5;
+    pointer-events: none;
+}
+
+.help-pin svg,
+.help-skewer svg {
+    display: block;
+    width: 100%;
+    height: 100%;
+    overflow: visible;
+}
+
+.help-pin path,
+.help-skewer path {
+    fill: var(--help-ink);
+    stroke: var(--help-halo);
+    stroke-width: 2.6;
+    stroke-linejoin: round;
+    paint-order: stroke;
+}
+
+.help-pin.threat path {
+    fill: var(--badge-blunder);
+}
+
+.help-pin.chance path {
+    fill: var(--badge-best);
+}
+
+/* The skewer's stick stays in ink and its beads take the tone, so that it reads apart from the pushpin (Stefano) */
+.help-skewer circle {
+    stroke: var(--help-ink);
+    stroke-width: 0.9;
+}
+
+.help-skewer.threat circle {
+    fill: var(--badge-blunder);
+}
+
+.help-skewer.chance circle {
+    fill: var(--badge-best);
+}
+
+.help-pin path.edge,
+.help-skewer path.edge {
+    fill: none;
+    stroke: var(--help-ink);
+    stroke-width: 1;
+}
+
+.square:has(> .help-pin) > .help-skewer {
+    left: clamp(9px, 3cqw, 22px);
+}
+
+.square:has(> .help-pin, > .help-skewer) > .coordinate.rank {
+    visibility: hidden;
+}
+
 /* A pin: a thin dashed ink line from the pinner to what stands behind, under the arrows; without a head, never an arrow */
 .helps-layer {
     position: absolute;
@@ -73,6 +141,11 @@
     stroke-linecap: round;
 }
 
+/* A skewer's line: a dash and a dot, beads on its stick, so that it reads apart from a pin's even dashes */
+.helps-layer .skewer line:not(.halo) {
+    stroke-dasharray: 0.22 0.11 0 0.11;
+}
+
 /* The map (Zoe, after the round): every square on one neutral ground, then light where only White reaches, dark where only Black does, half and half
    when both do; the two counts together in the middle, as a domino. The drawings and the pieces step back */
 .board.mapping ~ .arrows,
@@ -383,6 +456,20 @@
     fill: var(--card);
 }
 
+/* The pushpin and the skewer of the board, in the line's colour and without their halo */
+.help-rows .help-pin,
+.help-rows .help-skewer {
+    left: 7px;
+    top: 4px;
+    height: 17px;
+}
+
+.help-rows .help-pin path,
+.help-rows .help-skewer path {
+    fill: var(--row);
+    stroke: none;
+}
+
 .help-rows .row-icon {
     position: absolute;
     left: 6px;

package/dist/page/helps/helps.js

@@ -3,7 +3,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "preact/jsx-ru
 // the coach's words (D-88).
 import { Fragment } from "preact";
 import { useState } from "preact/hooks";
-import { Notch } from "../board/marks.js";
+import { Notch, Pushpin, Skewer } from "../board/marks.js";
 import { BadgeIcon, NoteIcon } from "../game/badges.js";
 import { FoldButton, useCardFold } from "../game/card-fold.js";
 import { Figurines } from "../game/move-list.js";
@@ -15,7 +15,7 @@ import { groupOf, pinSquares, riskSquares, squaresOf, strategyOf } from "./view.
  * its button or M is held, and the board without its drawings while their button is. A line under the pointer lights its squares on the board. Its title
  * folds it to the title and opens it again (Stefano).
  */
-export function HelpsCard({ helps, judged, hint, hintOpen, onHint, onPoint, onMap, mapping, onBare, bare, text }) {
+export function HelpsCard({ helps, judged, hint, hintOpen, onHint, onPoint, onMap, mapping, onBare, bare, legend, text }) {
     const [tab, setTab] = useState("tactics");
     // The tactics' lines the player opened stay open from move to move, so that a pin is followed as the game goes on.
     const [opened, setOpened] = useState(new Set());
@@ -29,7 +29,7 @@ export function HelpsCard({ helps, judged, hint, hintOpen, onHint, onPoint, onMa
         }
         toggleFold();
     };
-    return (_jsxs("section", { class: `card helps-card${folded ? " folded" : ""}`, "aria-label": words.title, children: [_jsxs("div", { class: "helps-head", children: [_jsx("h3", { class: "card-title", children: _jsxs(FoldButton, { folded: folded, onFold: fold, text: text, children: [_jsx(HelpsIcon, {}), words.title] }) }), _jsxs("span", { class: "helps-tools", children: [_jsx(MapButton, { mapping: mapping, onMap: onMap, text: text }), _jsx(BareButton, { bare: bare, onBare: onBare, text: text })] })] }), folded ? null : (_jsxs(_Fragment, { children: [judged.length === 0 && hint === undefined ? null : (_jsxs("section", { class: `coach${judged.length === 0 ? " hint-only" : ""}`, "aria-label": words.coach, children: [judged.map((ply) => _jsx(Judged, { ply: ply, text: text }, `${ply.number} ${ply.side}`)), hint === undefined ? null : _jsx(HintLine, { hint: hint, open: hintOpen, onOpen: onHint, text: text })] })), _jsxs("div", { class: "tabs", role: "tablist", children: [_jsx("button", { type: "button", role: "tab", "aria-selected": tab === "tactics", onClick: () => setTab("tactics"), children: words.tactics }), _jsx("button", { type: "button", role: "tab", "aria-selected": tab === "strategy", onClick: () => setTab("strategy"), children: words.strategy })] }), tab === "tactics"
+    return (_jsxs("section", { class: `card helps-card${folded ? " folded" : ""}`, "aria-label": words.title, children: [_jsxs("div", { class: "helps-head", children: [_jsx("h3", { class: "card-title", children: _jsxs(FoldButton, { folded: folded, onFold: fold, text: text, children: [_jsx(HelpsIcon, {}), words.title] }) }), _jsxs("span", { class: "helps-tools", children: [_jsx(MapButton, { mapping: mapping, onMap: onMap, text: text }), _jsx(BareButton, { bare: bare, onBare: onBare, text: text }), legend] })] }), folded ? null : (_jsxs(_Fragment, { children: [judged.length === 0 && hint === undefined ? null : (_jsxs("section", { class: `coach${judged.length === 0 ? " hint-only" : ""}`, "aria-label": words.coach, children: [judged.map((ply) => _jsx(Judged, { ply: ply, text: text }, `${ply.number} ${ply.side}`)), hint === undefined ? null : _jsx(HintLine, { hint: hint, open: hintOpen, onOpen: onHint, text: text })] })), _jsxs("div", { class: "tabs", role: "tablist", children: [_jsx("button", { type: "button", role: "tab", "aria-selected": tab === "tactics", onClick: () => setTab("tactics"), children: words.tactics }), _jsx("button", { type: "button", role: "tab", "aria-selected": tab === "strategy", onClick: () => setTab("strategy"), children: words.strategy })] }), tab === "tactics"
                         ? _jsx(Tactics, { helps: helps, opened: opened, onOpen: openLine, onPoint: onPoint, text: text })
                         : _jsx(Strategy, { helps: helps, onPoint: onPoint, text: text })] }))] }));
 }
@@ -70,7 +70,7 @@ function Judged({ ply, text }) {
 function Tactics({ helps, opened, onOpen, onPoint, text }) {
     const words = text.helpsCard;
     const point = pointing(onPoint);
-    const calm = !helps.lines.some((line) => line.kind === "risk" || line.kind === "pin");
+    const calm = !helps.lines.some((line) => line.kind === "risk" || line.kind === "pin" || line.kind === "skewer");
     return (_jsxs("ul", { class: "help-rows", children: [calm
                 ? (_jsxs("li", { class: "safe", children: [_jsxs(RowIcon, { children: [_jsx("circle", { cx: "8", cy: "8", r: "6.5" }), _jsx("path", { d: "M5.2 8.2l2 2 3.8-4" })] }), words.nothingAtRisk] }))
                 : null, helps.lines.map((line) => {
@@ -86,17 +86,20 @@ function pointing(onPoint) {
         onPointerLeave: (event) => event.pointerType === "mouse" && onPoint([]),
     });
 }
-/** A line's sign: the corner of a piece at risk, a pin's link, a check's plus, the loose pieces' i; its colour is the line's. */
+/** A line's sign, as the board draws it: the corner of a piece at risk, the pushpin, the skewer; a check's plus, the loose pieces' i; its colour is the line's. */
 function LineIcon({ kind }) {
-    if (kind === "risk") {
-        return _jsx(Notch, {});
-    }
-    if (kind === "loose") {
-        return _jsx(InfoIcon, {});
+    switch (kind) {
+        case "risk":
+            return _jsx(Notch, {});
+        case "pin":
+            return _jsx(Pushpin, {});
+        case "skewer":
+            return _jsx(Skewer, {});
+        case "loose":
+            return _jsx(InfoIcon, {});
+        case "check":
+            return (_jsxs(RowIcon, { children: [_jsx("circle", { cx: "8", cy: "8", r: "6.5" }), _jsx("path", { d: "M8 5v6M5 8h6" })] }));
     }
-    return (_jsx(RowIcon, { children: kind === "pin"
-            ? _jsx("path", { d: "M6.5 9.5l3-3M7.5 4.5l1-1a2.5 2.5 0 0 1 3.5 3.5l-1 1M8.5 11.5l-1 1a2.5 2.5 0 0 1-3.5-3.5l1-1" })
-            : (_jsxs(_Fragment, { children: [_jsx("circle", { cx: "8", cy: "8", r: "6.5" }), _jsx("path", { d: "M8 5v6M5 8h6" })] })) }));
 }
 /** How many: the loose pieces by side, each after its pawn, the player's first (Zoe); the others in one number. */
 function LineCount({ line, helps, words }) {
@@ -115,6 +118,8 @@ function LineDetails({ line, helps, point, text }) {
             return (_jsx("ul", { class: "line-details", children: line.items.map((risk) => (_jsxs("li", { ...point(riskSquares(risk)), children: [text.piece(risk.piece.piece, risk.piece.side), " ", _jsx(Squares, { squares: [risk.piece.square] }), " \u00B7 ", words.attackers, ": ", _jsx(Squares, { squares: risk.piece.attackers }), risk.why === "undefended" ? null : (_jsxs(_Fragment, { children: [" ", "\u00B7 ", words.defenders, ": ", _jsx(Squares, { squares: risk.piece.defenders })] })), " \u00B7 ", words[risk.why]] }, risk.piece.square))) }));
         case "pin":
             return (_jsx("ul", { class: "line-details", children: line.items.map((pin) => (_jsxs("li", { ...point(pinSquares(pin)), children: [text.piece(pin.piece.piece, pin.piece.side), " ", _jsx(Squares, { squares: [pin.piece.square] }), " ", words.pinnedTo(pin.to.piece), " ", _jsx(Squares, { squares: [pin.to.square] }), ", ", words.pinnedBy(pin.by.piece), " ", _jsx(Squares, { squares: [pin.by.square] })] }, pin.piece.square))) }));
+        case "skewer":
+            return (_jsx("ul", { class: "line-details", children: line.items.map((skewer) => (_jsxs("li", { ...point(pinSquares(skewer)), children: [text.piece(skewer.piece.piece, skewer.piece.side), " ", _jsx(Squares, { squares: [skewer.piece.square] }), " ", words.skeweredBefore(skewer.to.piece), " ", _jsx(Squares, { squares: [skewer.to.square] }), ", ", words.pinnedBy(skewer.by.piece), " ", _jsx(Squares, { squares: [skewer.by.square] })] }, skewer.piece.square))) }));
         case "check":
             return (_jsx("p", { class: "line-details", children: line.items.map((check) => (_jsx("span", { class: "help-move", children: _jsx(Figurines, { san: check, side: line.side }) }, check))) }));
         case "loose":

package/dist/page/helps/view.js

@@ -7,6 +7,7 @@ export function helpsOf(game, you) {
     const toMove = game.position.turn;
     const atRisk = [...risks(facts.undefended, "undefended"), ...risks(facts.attackedByCheaper, "cheaper"), ...risks(facts.outnumbered, "outnumbered")];
     const pins = facts.pins.map((pin) => ({ piece: on(pin.square), by: on(pin.by), to: on(pin.to) }));
+    const skewers = facts.skewers.map((skewer) => ({ piece: on(skewer.square), by: on(skewer.by), to: on(skewer.to) }));
     const checks = facts.checks;
     const otherChecks = facts.otherChecks ?? [];
     const loose = facts.loose.map(on);
@@ -15,10 +16,11 @@ export function helpsOf(game, you) {
         you,
         atRisk,
         pins,
+        skewers,
         checks,
         otherChecks,
         loose,
-        lines: tacticLines({ toMove, atRisk, pins, checks, otherChecks, loose }, you),
+        lines: tacticLines({ toMove, atRisk, pins, skewers, checks, otherChecks, loose }, you),
         strategy: game.profile,
         sides: you === "black" ? ["black", "white"] : ["white", "black"],
     };
@@ -28,12 +30,23 @@ export function riskOn(helps, square) {
     const risk = helps.atRisk.find((risk) => risk.piece.square === square);
     return risk === undefined ? undefined : toneOf(risk.piece.side, helps.you);
 }
-/** The squares a line of the tactics lights on the board: its pieces, and those that attack or pin them; none for the checks. */
+/** How the helps mark a square's pinned piece: in the tone of a piece at risk, red when it is the player's, green when it is the other side's (D-91). */
+export function pinOn(helps, square) {
+    const pin = helps.pins.find((pin) => pin.piece.square === square);
+    return pin === undefined ? undefined : toneOf(pin.piece.side, helps.you);
+}
+/** How the helps mark a square's skewered piece, the one in front: in the tone of a piece at risk, as a pinned one (D-91). */
+export function skewerOn(helps, square) {
+    const skewer = helps.skewers.find((skewer) => skewer.piece.square === square);
+    return skewer === undefined ? undefined : toneOf(skewer.piece.side, helps.you);
+}
+/** The squares a line of the tactics lights on the board: its pieces, and those that attack, pin or skewer them; none for the checks. */
 export function squaresOf(line) {
     switch (line.kind) {
         case "risk":
             return line.items.flatMap(riskSquares);
         case "pin":
+        case "skewer":
             return line.items.flatMap(pinSquares);
         case "check":
             return [];
@@ -45,7 +58,7 @@ export function squaresOf(line) {
 export function riskSquares(risk) {
     return [risk.piece.square, ...risk.piece.attackers];
 }
-/** A pinned piece, the one that pins it and the one behind it. */
+/** A pinned or skewered piece, the one that pins or skewers it and the one behind it. */
 export function pinSquares(pin) {
     return [pin.piece.square, pin.by.square, pin.to.square];
 }
@@ -88,12 +101,13 @@ const cells = {
     castled: castlingOf,
     kingAttacks: (side) => side.king?.attacksNear ?? 0,
 };
-// The tactics' lines that have something: with the player's side, their pieces at risk and pinned and the other side's checks, then the same the other way
-// round; without it, White's then Black's; the loose pieces last.
+// The tactics' lines that have something: with the player's side, their pieces at risk, pinned and skewered and the other side's checks, then the same the
+// other way round; without it, White's then Black's; the loose pieces last.
 function tacticLines(facts, you) {
     const sideLines = (side) => [
         { kind: "risk", side, tone: toneOf(side, you), items: facts.atRisk.filter((risk) => risk.piece.side === side) },
         { kind: "pin", side, tone: toneOf(side, you), items: facts.pins.filter((pin) => pin.piece.side === side) },
+        { kind: "skewer", side, tone: toneOf(side, you), items: facts.skewers.filter((skewer) => skewer.piece.side === side) },
     ];
     const checkLine = (side) => ({
         kind: "check",

package/dist/page/layout/layout.css

@@ -751,10 +751,31 @@
         display: none;
     }
 
-    /* A game in analysis, turned round or not: the card on top, the board, its steps under the thumb, the Torretta's note, the card below, the moves (Zoe) */
-    .app:has(.talk.studied),
+    /* A game in analysis: the card on top, the board, its steps under the thumb, the Torretta's note, the talk, the card below, the moves; turned round,
+       the player's card on top (Zoe) */
+    .app:has(.talk.studied) {
+        grid-template-areas: "head" "ai" "board" "steps" "note" "chat" "you" "side";
+    }
+
     .app.flipped:has(.talk.studied) {
-        grid-template-areas: "head" "ai" "board" "steps" "note" "you" "side";
+        grid-template-areas: "head" "you" "board" "steps" "note" "chat" "ai" "side";
+    }
+
+    .talk.studied > .you-block {
+        display: contents;
+    }
+
+    .talk.studied > .you-block > :not(.chat) {
+        grid-area: you;
+    }
+
+    /* The talk, under the note: half the screen of it at most */
+    .talk.studied .chat {
+        grid-area: chat;
+    }
+
+    .talk.studied .sent {
+        max-height: 50vh;
     }
 
     .talk.studied > .ai-block {
@@ -771,9 +792,12 @@
     }
 
     /* With no chat listening, its note comes before the Torretta's (Zoe) */
-    .app:has(.talk.studied > .ai-block > .asleep),
+    .app:has(.talk.studied > .ai-block > .asleep) {
+        grid-template-areas: "head" "ai" "board" "steps" "asleep" "note" "chat" "you" "side";
+    }
+
     .app.flipped:has(.talk.studied > .ai-block > .asleep) {
-        grid-template-areas: "head" "ai" "board" "steps" "asleep" "note" "you" "side";
+        grid-template-areas: "head" "you" "board" "steps" "asleep" "note" "chat" "ai" "side";
     }
 
     .talk.studied > .ai-block > .asleep {