chesspal 0.2.2 → 0.2.3

package/dist/core/facts.d.ts

@@ -23,6 +23,18 @@ export interface Pin {
     readonly by: Square;
     readonly to: Square;
 }
+/**
+ * A king, queen or rook attacked by a bishop, rook or queen with a piece of its side worth less behind it on the line, when the front piece must move (it
+ * is the king, the attacker is worth less, or it is undefended) and the attacker is worth less than the piece behind or that piece is undefended without
+ * counting the front piece (Anatolij).
+ */
+export interface Skewer {
+    /** The piece in front, attacked. */
+    readonly square: Square;
+    readonly by: Square;
+    /** The piece behind it. */
+    readonly to: Square;
+}
 /** The facts of a position: data for the AI and the page, never a judgment (D-19). */
 export interface Facts {
     /** Every piece, White's first, each side's from the king down: K Q R B N P. */
@@ -38,6 +50,7 @@ export interface Facts {
     /** Pieces neither attacked nor defended, kings left out: the first targets of a tactic. */
     readonly loose: readonly Square[];
     readonly pins: readonly Pin[];
+    readonly skewers: readonly Skewer[];
     /** The checks of the side to move, in SAN. */
     readonly checks: readonly string[];
     /** The checks the other side would have if it were to move; left out when the side to move is in check, since it could not be. */

package/dist/core/facts.js

@@ -1,4 +1,4 @@
-// What a position shows, computed without judging it (D-19, D-26): who attacks and defends each piece, what is at risk, the pins, the checks, the moves of each piece.
+// What a position shows, computed without judging it (D-19, D-26): who attacks and defends each piece, what is at risk, the pins and skewers, the checks, the moves of each piece.
 import { Chess } from "chess.js";
 /** The facts of a chess.js board, whose legal moves are given: computed once for each position, by its key, and frozen. */
 export function factsOf(chess, legal) {
@@ -51,6 +51,7 @@ function computed(chess, legal) {
     const defended = atRisk.filter((piece) => piece.defenders.length > 0);
     const byCheaper = defended.filter((piece) => Math.min(...piece.attackers.map(valueAt)) < valueAt(piece.square));
     const relativePins = placed.filter((piece) => piece.type === "q" || piece.type === "r").flatMap((target) => pinsTo(chess, target).filter((pin) => valueAt(pin.by) < values[target.type] || factsAt.get(target.square)?.defenders.length === 0));
+    const skewers = placed.filter((piece) => piece.type === "k" || piece.type === "q" || piece.type === "r").flatMap((front) => skewersOf(chess, front, factsAt));
     const king = pieces.find((piece) => piece.piece === "K" && piece.side === sideOf(turn));
     const facts = {
         pieces,
@@ -60,6 +61,7 @@ function computed(chess, legal) {
         outnumbered: defended.filter((piece) => !byCheaper.includes(piece) && piece.attackers.length > piece.defenders.length).map((piece) => piece.square),
         loose: officers.filter((piece) => piece.attackers.length === 0 && piece.defenders.length === 0).map((piece) => piece.square),
         pins: [...kingPins, ...relativePins].sort((left, right) => compare(left.square, right.square)),
+        skewers: skewers.sort((left, right) => compare(left.square, right.square)),
         checks: legal.filter((move) => /[+#]$/.test(move.san)).map((move) => move.san),
     };
     return chess.inCheck() ? facts : { ...facts, otherChecks: otherChecks(chess) };
@@ -128,6 +130,30 @@ function pinsTo(chess, target) {
     }
     return pins;
 }
+/**
+ * The skewers of a king, queen or rook: a rook, bishop or queen that attacks it as the facts count, and a piece of its side worth less right behind it.
+ * The piece behind is counted without the front one among its defenders: the front piece leaves the line when it moves (Anatolij).
+ */
+function skewersOf(chess, front, factsAt) {
+    const skewers = [];
+    const facts = factsAt.get(front.square);
+    for (const [fileStep, rankStep, slider] of lines) {
+        const by = rayFrom(front.square, fileStep, rankStep).find((square) => chess.get(square) !== undefined);
+        const to = rayFrom(front.square, -fileStep, -rankStep).find((square) => chess.get(square) !== undefined);
+        const attacker = by === undefined ? undefined : chess.get(by);
+        const behind = to === undefined ? undefined : chess.get(to);
+        if (attacker === undefined || behind === undefined || attacker.color === front.color || behind.color !== front.color
+            || (attacker.type !== slider && attacker.type !== "q") || values[behind.type] >= values[front.type] || !facts.attackers.includes(by)) {
+            continue;
+        }
+        const mustMove = front.type === "k" || values[attacker.type] < values[front.type] || facts.defenders.length === 0;
+        const behindDefended = factsAt.get(to).defenders.some((square) => square !== front.square);
+        if (mustMove && (values[attacker.type] < values[behind.type] || !behindDefended)) {
+            skewers.push({ square: front.square, by: by, to: to });
+        }
+    }
+    return skewers;
+}
 /** The pawn that can be taken en passant, and the square a pawn takes it on; none without an en passant square. */
 function enPassantVictim(chess) {
     const to = chess.fen().split(" ")[3];

package/dist/core/index.d.ts

@@ -1,7 +1,7 @@
 export { boardText, figurinesOf } from "./board-text.ts";
 export { canMate, clockAfterMove, clockOfComment, clockStarted, clockTag, clockText, startClock, timeControlOf, timeControlOfTag, timeControlTag, timeControlText, timeLeft } from "./clock.ts";
 export type { Clock, TimeControl } from "./clock.ts";
-export type { Facts, PieceFacts, PieceLetter, Pin } from "./facts.ts";
+export type { Facts, PieceFacts, PieceLetter, Pin, Skewer } from "./facts.ts";
 export { Game, withSanLetters } from "./game.ts";
 export type { Ending, Move, Outcome, Played, Position, Promotion, Refusal, Side, Square } from "./game.ts";
 export type { Illegal, IllegalReason } from "./illegal.ts";

package/dist/page/board/board.js

@@ -3,10 +3,10 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "preact/jsx-ru
 // with two clicks or by dragging a piece, which lifts off the board, in Zoe's design.
 import { useMemo, useRef } from "preact/hooks";
 import { BadgeIcon } from "../game/badges.js";
-import { riskOn } from "../helps/view.js";
+import { pinOn, riskOn, skewerOn } from "../helps/view.js";
 import { Piece } from "../pieces/pieces.js";
 import { bubblePlace, keptSquares } from "./explain.js";
-import { Arrows, Badge, Bubble, ControlCount, controlOf, kingSigns, Lifted, noSigns, Notch, Pins, PromotionChoice } from "./marks.js";
+import { Arrows, Badge, Bubble, ControlCount, controlOf, kingSigns, Lifted, noSigns, Notch, PinsAndSkewers, PromotionChoice, Pushpin, Skewer } from "./marks.js";
 import { backOf, motionOf, noMotion, playedOn, rearranged } from "./motion.js";
 import { useBoardPointer } from "./pointer.js";
 import { files, kingToMove, piecesOf } from "./squares.js";
@@ -104,12 +104,17 @@ export function Board({ fen, bottom, lastMove, pointed, helps, control, bare, ba
                             "--dy": ranks.indexOf(Number(from[1])) - row,
                         };
                         const risk = signsOfHelps === undefined ? undefined : riskOn(signsOfHelps, square);
+                        // A pinned piece's pushpin and a skewered one's skewer go with their lines, so not over the control map.
+                        const pin = signsOfHelps === undefined || control !== undefined ? undefined : pinOn(signsOfHelps, square);
+                        const skewer = signsOfHelps === undefined || control !== undefined ? undefined : skewerOn(signsOfHelps, square);
                         return (_jsxs("div", { class: classes, role: "button", "aria-label": label, "aria-pressed": own(square) ? selected === square : undefined, tabIndex: square === focused ? 0 : -1, "data-square": square, onKeyDown: (event) => key(event, square), onFocus: () => setCursor(square), 
                             // A click with no pointer behind it, as a screen reader's in browse mode, presses the square as Enter does.
                             onClick: (event) => event.detail === 0 && pressKey(square), style: away, children: [column === 0 ? _jsx("span", { class: "coordinate rank", children: rank }) : null, row === 7 ? _jsx("span", { class: "coordinate file", children: file }) : null, _jsx("span", { class: "square-name", "aria-hidden": "true", children: square }), motion.taken?.square === square
                                     ? (_jsx("span", { class: "taken-piece", children: _jsx(Piece, { letter: motion.taken.letter }) }, `taken ${fen}`))
-                                    : null, motion.gone?.filter((gone) => gone.square === square).map((gone) => (_jsx("span", { class: "gone-piece", children: _jsx(Piece, { letter: gone.letter }) }, `gone ${fen}`))), control === undefined ? null : _jsx("span", { class: `control-ground ${controlOf(control[square])}`, "aria-hidden": "true" }), piece === undefined ? null : _jsx(Piece, { letter: piece }, moving ? fen : "still"), sign === undefined ? null : _jsx(Badge, { kind: sign.badge }), risk === undefined ? null : _jsx(Notch, { tone: risk }), control === undefined ? null : _jsx(ControlCount, { counts: control[square] }), badge === undefined || lastMove?.to !== square ? null : _jsx(BadgeIcon, { badge: badge.badge, title: badge.name })] }, square));
-                    })), signsOfHelps === undefined || signsOfHelps.pins.length === 0 || control !== undefined ? null : _jsx(Pins, { pins: signsOfHelps.pins, at: centreOf })] }), _jsx(Arrows, { arrows: aiArrows, at: centreOf, occupied: (square) => pieces.has(square) }), _jsx(Arrows, { arrows: ownArrows, at: centreOf }), notice?.explanation?.arrow === undefined ? null : _jsx(Arrows, { arrows: [notice.explanation.arrow], at: centreOf, explain: { occupied: pieces.has(notice.explanation.arrow.to) } }), drag === undefined || !pieces.has(drag.from) ? null : _jsx(Lifted, { drag: drag, letter: pieces.get(drag.from) }), promotion === undefined
+                                    : null, motion.gone?.filter((gone) => gone.square === square).map((gone) => (_jsx("span", { class: "gone-piece", children: _jsx(Piece, { letter: gone.letter }) }, `gone ${fen}`))), control === undefined ? null : _jsx("span", { class: `control-ground ${controlOf(control[square])}`, "aria-hidden": "true" }), piece === undefined ? null : _jsx(Piece, { letter: piece }, moving ? fen : "still"), sign === undefined ? null : _jsx(Badge, { kind: sign.badge }), risk === undefined ? null : _jsx(Notch, { tone: risk }), pin === undefined ? null : _jsx(Pushpin, { tone: pin }), skewer === undefined ? null : _jsx(Skewer, { tone: skewer }), control === undefined ? null : _jsx(ControlCount, { counts: control[square] }), badge === undefined || lastMove?.to !== square ? null : _jsx(BadgeIcon, { badge: badge.badge, title: badge.name })] }, square));
+                    })), signsOfHelps === undefined || signsOfHelps.pins.length + signsOfHelps.skewers.length === 0 || control !== undefined
+                        ? null
+                        : _jsx(PinsAndSkewers, { pins: signsOfHelps.pins, skewers: signsOfHelps.skewers, at: centreOf })] }), _jsx(Arrows, { arrows: aiArrows, at: centreOf, occupied: (square) => pieces.has(square) }), _jsx(Arrows, { arrows: ownArrows, at: centreOf }), notice?.explanation?.arrow === undefined ? null : _jsx(Arrows, { arrows: [notice.explanation.arrow], at: centreOf, explain: { occupied: pieces.has(notice.explanation.arrow.to) } }), drag === undefined || !pieces.has(drag.from) ? null : _jsx(Lifted, { drag: drag, letter: pieces.get(drag.from) }), promotion === undefined
                 ? null
                 : _jsx(PromotionChoice, { side: promotion.side, column: columns.indexOf(promotion.to[0]), down: ranks[0] === Number(promotion.to[1]), onPick: promote, text: text }), notice === undefined ? null : (_jsx(Bubble, { notice: notice, place: notice.square === undefined ? undefined : seen(notice.square), where: notice.square === undefined
                     ? "above"

package/dist/page/board/marks.js

@@ -1,12 +1,21 @@
 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. */
+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 +55,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. */
@@ -135,6 +151,24 @@ function ArrowGroup({ shapes, 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 +184,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/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,18 @@
     fill: var(--card);
 }
 
+/* The skewer of the board, in the line's colour and without its halo */
+.help-rows .help-skewer {
+    left: 7px;
+    top: 4px;
+    height: 17px;
+}
+
+.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, 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";
@@ -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,11 +86,14 @@ 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: the corner of a piece at risk, a pin's link, the skewer of the board, 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 === "skewer") {
+        return _jsx(Skewer, {});
+    }
     if (kind === "loose") {
         return _jsx(InfoIcon, {});
     }
@@ -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/text.js

@@ -274,16 +274,18 @@ const english = {
         outnumbered: "more attackers than defenders",
         pinnedTo: (letter) => `pinned to the ${englishNames[letter]}`,
         pinnedBy: (letter) => `by the ${englishNames[letter]}`,
+        skeweredBefore: (letter) => `ahead of the ${englishNames[letter]}`,
         nothingAtRisk: "No piece at risk, no pins.",
         line: (kind, side, you, toMove) => {
             const name = side === "white" ? "White" : "Black";
+            const pieces = { risk: "pieces at risk", pin: "pinned pieces", skewer: "skewered pieces" };
             if (you === undefined) {
-                return kind === "risk" ? `${name}'s pieces at risk` : kind === "pin" ? `${name}'s pinned pieces` : `${name}'s checks${toMove ? "" : `, if it were ${name}'s move`}`;
+                return kind === "check" ? `${name}'s checks${toMove ? "" : `, if it were ${name}'s move`}` : `${name}'s ${pieces[kind]}`;
             }
             if (kind === "check") {
                 return side === you ? `Checks you ${toMove ? "can" : "could"} give` : `Checks the opponent ${toMove ? "can" : "could"} give you`;
             }
-            return `${side === you ? "Your" : "The opponent's"} ${kind === "risk" ? "pieces at risk" : "pinned pieces"}`;
+            return `${side === you ? "Your" : "The opponent's"} ${pieces[kind]}`;
         },
         loose: "Pieces neither attacked nor defended",
         yours: "yours",
@@ -594,16 +596,18 @@ const italian = {
         outnumbered: "più attaccanti che difensori",
         pinnedTo: (letter) => `davanti ${italianWith("a", letter)}`,
         pinnedBy: (letter) => italianWith("da", letter),
+        skeweredBefore: (letter) => `con dietro ${italianThe[letter]}`,
         nothingAtRisk: "Nessun pezzo in pericolo, nessuna inchiodatura.",
         line: (kind, side, you, toMove) => {
             const name = side === "white" ? "Bianco" : "Nero";
+            const what = { risk: "in pericolo", pin: "inchiodati", skewer: "infilati" };
             if (you === undefined) {
-                return kind === "risk" ? `Pezzi del ${name} in pericolo` : kind === "pin" ? `Pezzi del ${name} inchiodati` : `Scacchi del ${name}${toMove ? "" : ", se toccasse a lui"}`;
+                return kind === "check" ? `Scacchi del ${name}${toMove ? "" : ", se toccasse a lui"}` : `Pezzi del ${name} ${what[kind]}`;
             }
             if (kind === "check") {
                 return side === you ? `Scacchi che ${toMove ? "puoi" : "potresti"} dare` : `Scacchi che l'avversario ${toMove ? "può" : "potrebbe"} darti`;
             }
-            return `${side === you ? "I tuoi pezzi" : "I pezzi avversari"} ${kind === "risk" ? "in pericolo" : "inchiodati"}`;
+            return `${side === you ? "I tuoi pezzi" : "I pezzi avversari"} ${what[kind]}`;
         },
         loose: "Pezzi né attaccati né difesi",
         yours: "tuoi",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "chesspal",
-  "version": "0.2.2",
+  "version": "0.2.3",
   "description": "Play chess against an AI with a character, and learn with an AI coach: Chesspal keeps the rules, the board, the games and the memory; the AI plays, reasons and talks.",
   "type": "module",
   "bin": {