Credibility pass: the code reads as one hand's work. Dead plumbing and copies removed, four claims the source does not support corrected, and inherited kit text re-read for this game

Engine: the facade re-exports the board in one block; describe() and the
dead letters preference, void ply, the King-taken line, the identity maps
and the unused imports are gone; SIDE_NAMES is the one spelling of a side;
the drake's hunter comment no longer claims only four kinds reach the air.
Prose: no shatranj and no sitting duck, which Gygax never wrote; the Thief
statistic and the Basilisk's "one trick" are gone; lessons say what the
board shows instead of repeating the panel; a Thief's leap counts four.
Browser: one keyboard walk, in BoardArtwork; the lesson board and page share
one game and one inspected piece; the chronicle's possessive is told, not
patched by a regex; the chronicle colours and the reading layout are global
rules instead of three copies; the guide and the about panel say what the
code and the article actually do.
Server and docs: the room server states that it is the kit's, kept whole;
the skills, the deploy README and the share card name files that exist.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01CCLa2PaEeCj8njQZSWGqHx

.claude/skills/wyrm-pulse/SKILL.md

@@ -1,6 +1,6 @@
 ---
 name: wyrm-pulse
-description: The weekly Wyrm operations pulse — game server health, errors, the last week of traffic and rooms from the rollup, backup status, and the box's vitals. Use when Eric asks how the server is doing, wants an ops check, or says "run the pulse".
+description: The weekly Wyrm operations pulse: game server health, errors, the last week of traffic and rooms from the rollup, backup status, and the box's vitals. Use when Eric asks how the server is doing, wants an ops check, or says "run the pulse".
 ---
 
 # Wyrm pulse

.claude/skills/wyrm-reports/SKILL.md

@@ -1,6 +1,6 @@
 ---
 name: wyrm-reports
-description: Work the Wyrm reports desk — fetch players' bug reports, show the last week's reports and replies, and process the unanswered ones end to end (replay the ledger to the pinned round, check the rules text, fix, reply). Use when Eric asks about bug reports, player feedback, or says "work the reports desk".
+description: Work the Wyrm reports desk: fetch players' bug reports, show the last week's reports and replies, and process the unanswered ones end to end (replay the ledger to the pinned round, check the rules text, fix, reply). Use when Eric asks about bug reports, player feedback, or says "work the reports desk".
 ---
 
 # The Wyrm reports desk
@@ -54,9 +54,10 @@ to hear his players' voices; never compress their words into a table.
    `game.resolve(state, line.inputs)` per turn line, printing the state
    around the pinned round. The `chat` lines show what the players said
    to each other at the time.
-2. **Check the rules before the code.** The rules are data in
-   `src/lib/game/rules.ts` and prose at /rules, which names the texts it
-   follows; read them before deciding the engine is wrong. Many reports
+2. **Check the rules before the code.** The rules are the article in
+   `docs/source.md`, with the engine's readings of its open points under
+   Decisions; the moves are in `src/lib/game/board.ts` and the ends of a
+   game in `index.ts`. Read them before deciding the engine is wrong. Many reports
    are the rules working as written.
 3. **Verdict.** `by-design` (the engine matches the text; no change),
    `resolved` (a defect, fixed before replying), or `open` (needs Eric's

.claude/skills/wyrm-visitors/SKILL.md

@@ -1,6 +1,6 @@
 ---
 name: wyrm-visitors
-description: The Wyrm visitors report — who is at the table right now, who came today and how far each game got, and today's traffic. Use when Eric asks who has been playing, about new players or visitors, "anyone playing?", or wants a traffic report.
+description: The Wyrm visitors report: who is at the table right now, who came today and how far each game got, and today's traffic. Use when Eric asks who has been playing, about new players or visitors, "anyone playing?", or wants a traffic report.
 ---
 
 # Wyrm visitors
@@ -23,7 +23,7 @@ spills into the next UTC day. Run yesterday too when the hour is early.
 - **players today / NEW today**: names seated in rooms created today;
   NEW means the name's first room ever is today.
 - **rooms today**: one line each: time, code, humans vs bots, empty
-  seats, state (lobby only / started, no turns / in play), turn count,
+  seats, state (lobby only / started, no turns / in play / abandoned after twelve idle hours / who won, or a draw), turn count,
   span, the last turn's time, and how many lines of table talk were said.
   Talk is a sign people came together; a bot game has none.
 

deploy/README.md

@@ -18,7 +18,7 @@ service user, /opt/<slug> and /var/lib/<slug> trees, access log
 small Node process capped at 300 MB by its unit file, and a room is a few
 kilobytes of ledger, so the host carries several. Each game needs a port
 of its own on the host: wizwar 8787, waving-hands 8788, hnefatafl 8789,
-dip 8790.
+dip 8790, wyrm 8791.
 
 ## Current production
 
@@ -65,8 +65,9 @@ runs every game's rollup and backup from /etc/cron.d/gamehall.
 - `wyrm-backup.sh`: nightly at 07:23 UTC, mirrors /var/lib/wyrm
   to the `kestrel-wizwar-backups` Space under `wyrm/` (a current copy
   less the rollup, and dated snapshots kept 90 days). It needs rclone with the Spaces
-  credentials in /root/.config/rclone/rclone.conf, copied by hand from the
-  wizwar droplet; until then it logs "skipped".
+  credentials in /root/.config/rclone/rclone.conf, which the shared host has;
+  a game on a box of its own copies them over first, and until then the
+  script logs "skipped".
 
 Errors from the game server go to Sentry, project `wyrm` in the
 locallygrownnet organisation; the DSN is in the unit file. On the shared host

deploy/sentry-slack-alert.sh

@@ -22,7 +22,7 @@ AUTH="Authorization: Bearer $SENTRY_TOKEN"
 SLACK_ID="${SENTRY_SLACK_INTEGRATION:-345334}"
 : "${SLACK_CHANNEL_ID:?SLACK_CHANNEL_ID=C... is required (the Slack ID of the channel)}"
 CHANNEL_ID="$SLACK_CHANNEL_ID"
-PROJECT_ID="${SENTRY_PROJECT_ID:-__SENTRY_PROJECT_ID__}"
+PROJECT_ID="${SENTRY_PROJECT_ID:-4512325594578944}"
 echo "Slack integration $SLACK_ID; project $PROJECT_ID; channel $CHANNEL ($CHANNEL_ID)"
 
 DETECTOR_ID=$(curl -s "$API/detectors/?project=$PROJECT_ID" -H "$AUTH" | python3 -c '

deploy/wyrm.service

@@ -13,7 +13,7 @@ Environment=KEEPER_TZ=America/New_York
 Environment=HOST=127.0.0.1
 Environment=DATA_DIR=/var/lib/wyrm/rooms
 # Empty means no error reporting.
-Environment=SENTRY_DSN=
+Environment=SENTRY_DSN=https://a5e245adb21413c0b22dfa6b7a10f08a@o4509525984149504.ingest.us.sentry.io/4512325594578944
 ExecStart=/opt/wyrm/app/server/node_modules/.bin/tsx src/index.ts
 Restart=always
 RestartSec=3

docs/compose-game.ts

@@ -0,0 +1,36 @@
+// Composes the told game (src/lib/game/told.ts): its moves are played at
+// their plies and the drake plays any ply beyond them, so a longer game can
+// be sketched and steered. Prints the chronicle, and with a ply and a
+// square, the legal moves of the piece there at that ply.
+//   npx tsx docs/compose-game.ts [plies] [ply square]
+import { createGame, applyMove, validateMove } from '../src/lib/game/index.ts';
+import { chooseMove } from '../src/lib/game/bot.ts';
+import { narrate } from '../src/lib/game/chronicle.ts';
+import { square, squareName, legalMovesFrom } from '../src/lib/game/board.ts';
+import { TOLD_MOVES } from '../src/lib/game/told.ts';
+const FORCED: Record<number, [string, string]> = Object.fromEntries(TOLD_MOVES.map((m, n) => [n + 1, m]));
+
+const plies = Number(process.argv[2] ?? 40);
+const askPly = process.argv[3] ? Number(process.argv[3]) : 0;
+const askSquare = process.argv[4];
+let s = createGame({ A: 'Gold', B: 'Scarlet' });
+for (let ply = 1; ply <= plies && !s.over; ply++) {
+	const seat = s.toMove === 'gold' ? 'A' : 'B';
+	if (ply === askPly && askSquare) {
+		console.log(`ply ${ply}, ${s.toMove} to move, ${askSquare} may go to: ${legalMovesFrom(s.cells, square(askSquare), s.setup).map(squareName).join(' ')}`);
+		process.exit(0);
+	}
+	const forced = FORCED[ply];
+	let move: { from: number; to: number };
+	if (forced) {
+		move = { from: square(forced[0]), to: square(forced[1]) };
+		const why = validateMove(s, seat, move);
+		if (why) {
+			console.log(`ply ${ply}: forced ${forced[0]}-${forced[1]} refused: ${why}`);
+			process.exit(1);
+		}
+	} else move = chooseMove(s.cells, s.toMove, s.setup, 40000)!;
+	s = applyMove(s, move.from, move.to);
+}
+for (const t of narrate(s)) console.log(`${t.ply}${FORCED[t.ply] ? '*' : ' '} ${t.lines.map((l) => l.text).join(' ')}`);
+console.log(s.over ? `over: ${s.over.reason}` : `${s.toMove} to move`);

docs/og-card.html

@@ -1,5 +1,5 @@
 <!doctype html>
-<!-- The share card, 1200 by 630. Open it with the site running at localhost:5173 and screenshot the body: docs/artwork.md. -->
+<!-- The share card, 1200 by 630. Open it with the site running at localhost:5173 and screenshot the body at 1200 by 630 into static/. -->
 <html>
 <head>
 <meta charset="utf-8" />

docs/source.md

@@ -635,9 +635,9 @@ Good luck, and may all your moves be ones that Rexfelis would envy. . . .
 ## Decisions
 
 Where the text contradicts itself, leaves a case open, or needs a rule
-chess players take for granted, the engine does the following. Each is a
-reading of the text above, not a change to it, except the two marked as
-options the host may choose.
+chess players take for granted, the engine does the following. Each reads the
+text above as it stands, except the two marked as options the host may
+choose.
 
 1. **Board numbers.** The notation paragraph makes the upper board 1 and
    the lower 3, but every piece description, every example and the
@@ -652,8 +652,8 @@ options the host may choose.
    are in.
 3. **Light and dark.** With a light square in Gold's near right corner,
    square l1 is light and a1 dark. Gold's Sylphs therefore start on a2,
-   c2, e2, g2, i2 and k2 and Scarlet's on a7, c7, e7, g7, i7 and k7 (the
-   same files, as the diagram shows); the Dwarves start on b, d, f, h, j
+   c2, e2, g2, i2 and k2 and Scarlet's on a7, c7, e7, g7, i7 and k7, the
+   same files, as the diagram shows. The Dwarves start on b, d, f, h, j
    and l of their second rank.
 4. **Captures on board-changing moves.** The text says "move" for the
    Mage's step on the upper or lower board, for the Paladin's knight-like
@@ -668,7 +668,7 @@ options the host may choose.
    the square on the middle board vacant. The Elemental's two-square
    orthogonal step needs the square between vacant, as the general rule
    says. The Elemental's move up needs its first, sideways square vacant
-   and the square above that to hold an enemy; its move down needs the
+   and the square above that to hold an enemy. Its move down needs the
    square beneath vacant and lands by a further orthogonal step, with or
    without a capture.
 6. **The Dragon's capture from afar** is a whole move. The Dragon stays
@@ -679,12 +679,12 @@ options the host may choose.
    except that it still occupies its square. A frozen King attacked by
    another piece is in check and may be rescued only by capturing the
    attacker or interposing.
-8. **Check, checkmate, stalemate, repetition.** As in chess: a move may
+8. **Check, checkmate, stalemate, repetition.** As in chess. A move may
    not leave one's own King attacked, a King attacked with no escape is
    mated and the game is lost, a player with no legal move and not in
    check is stalemated and the game is drawn, and a position seen three
    times with the same side to move is a draw. The text names only
-   checkmate; the other endings follow "as in standard chess".
+   checkmate, and the other endings follow "as in standard chess".
 9. **Promotion** happens the moment a Warrior arrives on the far rank, to
    a Hero, with no choice. A Sylph on the far rank keeps its downward
    capture and comes back to life by moving up into a vacant home square.

server/src/index.ts

@@ -29,7 +29,7 @@
 //
 // Caddy serves the static site and proxies /api and /ws here. The keeper's
 // door answers only on the host itself, and only to the key in KEEPER_KEY_FILE
-// (deploy/wyrm-reseat.sh sends it):
+// (the deploy/wyrm-*.sh scripts send it):
 //
 //   GET  /keeper/rooms/:id          who sits at the table, and when each person last moved or spoke
 //   POST /keeper/rooms/:id/reseat   {seat}             a new token for a player locked out, as a link to send them
@@ -389,7 +389,7 @@ server.on('upgrade', (req, socket, head) => {
 /**
  * A browser that died without closing (a crashed tab, a sleeping laptop, a dropped network) leaves its socket
  * open until TCP gives up, counted in the gallery all the while. The protocol's own ping, which every browser
- * answers by itself, finds it within two rounds.
+ * answers by itself, finds it: one silent through a whole round is closed.
  */
 const answered = new WeakMap<WebSocket, boolean>();
 setInterval(() => {

server/src/rooms.test.ts

@@ -22,7 +22,7 @@ const GOLD_OPENS: Input = { from: square('2c2'), to: square('2c3') };
 const SCARLET_ANSWERS: Input = { from: square('2c7'), to: square('2c6') };
 
 /** The bots move once the request that made their move due has been answered: after this tick. */
-const settled = () => new Promise<void>((r) => setImmediate(r));
+const answered = () => new Promise<void>((r) => setImmediate(r));
 
 /** A table of two: Ann, who opened it and plays Gold, and Bo, the game begun. */
 function table(spec: GameSpec<State, Input> = game) {
@@ -138,7 +138,7 @@ describe('rooms', () => {
 		expect(host.room.state!.setup).toBe('shifted');
 		// Gold moves first, and Gold is the drake: it moves once the host's request has been answered, not inside it.
 		expect(host.room.state!.moves).toHaveLength(0);
-		await settled();
+		await answered();
 		expect(host.room.state!.moves).toHaveLength(1);
 		expect(rooms.waitingOn(host.room)).toEqual(['A']);
 	});
@@ -205,13 +205,13 @@ describe('the host and the other seats', () => {
 		rooms.submit(room, ann, GOLD_OPENS, 0);
 		rooms.standIn(room, ann, 'B');
 		// The move was Bo's; the drake makes it as soon as the host has been answered.
-		await settled();
+		await answered();
 		expect(room.resolved).toBe(2);
 		expect(rooms.waitingOn(room)).toEqual(['A']);
 		expect(() => rooms.seatOf(room, bo)).toThrow(/gave your seat to a drake/);
 		expect(rooms.view(room, 'A').seats[1]).toEqual({ id: 'B', name: 'Bo', bot: true, standIn: true });
 		rooms.submit(room, ann, { from: square('2d2'), to: square('2d3') }, 2);
-		await settled();
+		await answered();
 		expect(room.resolved).toBe(4);
 	});
 

server/src/rooms.ts

@@ -3,6 +3,12 @@
 // same place. Inputs wait in memory until every seat that must move has moved;
 // then the round resolves at once, bots included. Nothing here knows the
 // game beyond the GameSpec it is given.
+//
+// This is the kit's room server, kept whole so the kit's fixes land by copy.
+// Wyrm seats two and moves one side at a time, so only one seat ever owes a
+// move and the paced play of bots left alone at a table never arises here.
+// The strings a player reads say drake, the game's word for its house
+// player; the code and its comments keep the kit's word, bot.
 
 import { createHash, randomBytes, timingSafeEqual } from 'node:crypto';
 import { cleanOptions, SPECTATOR, tableSize, type GameSpec, type SeatId, type TableOptions } from '../../src/lib/game/spec';
@@ -361,10 +367,14 @@ export class Rooms<State, Input> {
 	 * to hang and the bot's to come at once. The table is told as each move
 	 * lands, the same as any other.
 	 */
+	/** A room forgotten and loaded again drives itself; a timer or tick that wakes with the old one must do nothing. */
+	private isTable(room: Room<State>): boolean {
+		return this.rooms.get(room.id) === room;
+	}
+
 	private botsAfterAnswering(room: Room<State>): void {
 		setImmediate(() => {
-			// A room forgotten and loaded again drives itself; this one is no longer the table.
-			if (this.rooms.get(room.id) !== room) return;
+			if (!this.isTable(room)) return;
 			try {
 				this.driveBots(room);
 				this.botsSpeak(room, 'phase');
@@ -403,8 +413,7 @@ export class Rooms<State, Input> {
 		const hurried = this.hurried.has(room.id);
 		const next = setTimeout(() => {
 			this.pacing.delete(room.id);
-			// A room forgotten and loaded again drives itself; this one is no longer the table.
-			if (this.rooms.get(room.id) !== room) return;
+			if (!this.isTable(room)) return;
 			this.driveBots(room, hurried ? HURRIED_STEP : 1);
 			// Played out: the bots have their say once, as after any round, which ends a game with parting words.
 			if (!this.pacing.has(room.id)) this.botsSpeak(room, 'phase');

src/app.css

@@ -196,6 +196,31 @@ button:disabled {
 	max-width: 40em;
 }
 
+/* A lesson: the boards beside the words. */
+.reading.wide {
+	max-width: 1280px;
+}
+
+/* The chronicle's lines, coloured by what they tell, at the table and in a lesson. */
+.telling li.capture {
+	color: var(--ember);
+}
+
+.telling li.check,
+.telling li.freeze,
+.telling li.promotion {
+	color: var(--frost);
+}
+
+.telling li.note {
+	color: var(--bone-dim);
+	font-style: italic;
+}
+
+.telling li.end {
+	color: var(--blood);
+}
+
 .reading section {
 	padding: 1.25rem 0 0.5rem;
 	border-top: 1px solid var(--rule);

src/app.html

@@ -7,21 +7,21 @@
 		<meta name="theme-color" content="#121a20" />
 		<title>Wyrm</title>
 		<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
-		<meta name="description" content="Gary Gygax&#39;s Dragonchess, free in the browser: chess on three boards, with Dragons in the air and Basilisks below. Play a drake or a friend." />
+		<meta name="description" content="Gary Gygax&#39;s Dragonchess, free in the browser. Chess on three boards, with Dragons in the air and Basilisks below. Play a drake or a friend." />
 		<link rel="canonical" href="https://wyrm.kestrelsnest.social/" />
 		<link rel="icon" href="/favicon.ico" sizes="32x32" />
 		<link rel="icon" href="/favicon.svg" type="image/svg+xml" />
 		<meta property="og:type" content="website" />
 		<meta property="og:site_name" content="Wyrm" />
 		<meta property="og:title" content="Wyrm" />
-		<meta property="og:description" content="Gary Gygax&#39;s Dragonchess, free in the browser: chess on three boards, with Dragons in the air and Basilisks below. Play a drake or a friend." />
+		<meta property="og:description" content="Gary Gygax&#39;s Dragonchess, free in the browser. Chess on three boards, with Dragons in the air and Basilisks below. Play a drake or a friend." />
 		<meta property="og:url" content="https://wyrm.kestrelsnest.social/" />
 		<meta property="og:image" content="https://wyrm.kestrelsnest.social/og.png" />
 		<meta property="og:image:width" content="1200" />
 		<meta property="og:image:height" content="630" />
 		<meta name="twitter:card" content="summary_large_image" />
 		<meta name="twitter:title" content="Wyrm" />
-		<meta name="twitter:description" content="Gary Gygax&#39;s Dragonchess, free in the browser: chess on three boards, with Dragons in the air and Basilisks below. Play a drake or a friend." />
+		<meta name="twitter:description" content="Gary Gygax&#39;s Dragonchess, free in the browser. Chess on three boards, with Dragons in the air and Basilisks below. Play a drake or a friend." />
 		<meta name="twitter:image" content="https://wyrm.kestrelsnest.social/og.png" />
 		%sveltekit.head%
 	</head>

src/lib/components/Board.svelte

@@ -9,7 +9,7 @@
 	import { narrate } from '$lib/game/chronicle';
 	import BoardArtwork, { type Token } from './BoardArtwork.svelte';
 	import {
-		legalMovesFrom, movesFrom, squareName, sideOf, kindOf, kingSquare, inCheck, levelOf, fileOf, rankOf, idx, frozen, NAMES, FILES, RANKS, LEVELS,
+		legalMovesFrom, movesFrom, squareName, sideOf, kindOf, kingSquare, inCheck, levelOf, frozen, NAMES, SIDE_NAMES,
 		type Move, type Side
 	} from '$lib/game';
 	import type { Room } from '$lib/net/room.svelte';
@@ -24,11 +24,9 @@
 		const seat = g.seats.find((id) => g.players[id].side === side);
 		return seat ? g.players[seat].name : side;
 	};
-	const sideName = (side: Side) => (side === 'gold' ? 'Gold' : 'Scarlet');
 	const flipped = $derived(mySide === 'scarlet');
 	const inCheckNow = $derived(!g.over && inCheck(g.cells, g.toMove));
 	const checkSquare = $derived(inCheckNow ? kingSquare(g.cells, g.toMove) : -1);
-	const label = squareName;
 
 	// --- Tokens: pieces with a life of their own, so a move slides, a capture fades and a Warrior stands up a Hero ---
 	let tokens = $state<Token[]>([]);
@@ -102,7 +100,7 @@
 	}
 	const shownStory = $derived(shownPly > 0 ? storyOf(shownPly) : '');
 
-	// --- Choosing and moving ---------------------------------------------------
+	// --- Choosing and moving ---
 	let selected = $state<number | null>(null);
 	const targets = $derived(selected === null ? [] : legalMovesFrom(g.cells, selected, g.setup));
 	/** Any piece, tapped to read about it; the panel beside the boards tells what it is and what it can do from there. */
@@ -128,7 +126,7 @@
 		await room.submit({ from, to });
 	}
 
-	const wordFor = (i: number) => `${sideOf(g.cells[i]) === 'gold' ? 'Gold' : 'Scarlet'} ${NAMES[kindOf(g.cells[i])]}`;
+	const wordFor = (i: number) => `${SIDE_NAMES[sideOf(g.cells[i])!]} ${NAMES[kindOf(g.cells[i])]}`;
 
 	async function tap(i: number) {
 		if (room.sending || animating) return;
@@ -136,13 +134,13 @@
 		if (!yourMove) {
 			// Not your move, or no seat: a tap on a piece still opens its panel.
 			inspected = g.cells[i] !== '' ? (inspected === i ? null : i) : null;
-			if (inspected !== null) announce(`${wordFor(i)} on ${label(i)}. About this piece is shown beside the boards.`);
+			if (inspected !== null) announce(`${wordFor(i)} on ${squareName(i)}. About this piece is shown beside the boards.`);
 			return;
 		}
 		if (selected !== null && targets.includes(i)) {
 			if (prefs.confirmMoves === true) {
 				pending = { from: selected, to: i };
-				announce(`Move ${label(selected)} to ${label(i)}? Confirm or cancel below.`);
+				announce(`Move ${squareName(selected)} to ${squareName(i)}? Confirm or cancel below.`);
 				return;
 			}
 			await send(selected, i);
@@ -156,44 +154,18 @@
 			if (selected !== null) {
 				const to = legalMovesFrom(g.cells, i, g.setup);
 				const why = frozen(g.cells, i) ? ' It is frozen by the Basilisk beneath it.' : '';
-				announce(`Selected ${wordFor(i)} on ${label(i)}. ${to.length} ${to.length === 1 ? 'square' : 'squares'} to move to${to.length ? ': ' + to.map(label).join(', ') : ''}.${why}`);
+				announce(`Selected ${wordFor(i)} on ${squareName(i)}. ${to.length} ${to.length === 1 ? 'square' : 'squares'} to move to${to.length ? ': ' + to.map(squareName).join(', ') : ''}.${why}`);
 			} else announce('Selection cleared.');
 		} else selected = null;
 	}
 
-	function focusSquare(i: number) {
-		document.querySelector<SVGRectElement>(`rect.square[data-i="${i}"]`)?.focus();
-	}
-
-	/** Arrows walk a board, Page Up and Page Down climb and descend, Enter picks up and sets down. */
-	function key(e: KeyboardEvent, i: number) {
-		const f = fileOf(i);
-		const r = rankOf(i);
-		const lv = levelOf(i);
-		const step: Record<string, [number, number, number]> = {
-			ArrowLeft: [flipped ? 1 : -1, 0, 0], ArrowRight: [flipped ? -1 : 1, 0, 0], ArrowUp: [0, flipped ? -1 : 1, 0], ArrowDown: [0, flipped ? 1 : -1, 0],
-			PageUp: [0, 0, 1], PageDown: [0, 0, -1]
-		};
-		if (e.key in step) {
-			e.preventDefault();
-			const [df, dr, dl] = step[e.key];
-			const nf = f + df;
-			const nr = r + dr;
-			const nl = lv + dl;
-			if (nf >= 0 && nf < FILES && nr >= 0 && nr < RANKS && nl >= 1 && nl <= LEVELS) focusSquare(idx(nl, nf, nr));
-			return;
-		}
-		if (e.key === 'Enter' || e.key === ' ') {
-			e.preventDefault();
-			void tap(i);
-		} else if (e.key === 'Escape') {
+	function escape() {
 		selected = null;
 		inspected = null;
 		reviewing = null;
 		pending = null;
 		announce('Selection cleared.');
 	}
-	}
 
 	const verdict = $derived.by(() => {
 		if (!g.over) return '';
@@ -210,27 +182,27 @@
 			{#if g.over}
 				<strong>{verdict}</strong> <span class="muted">{g.over.reason}</span>
 			{:else if room.spectating}
-				<strong>{nameOfSide(g.toMove)} to move</strong> · {sideName(g.toMove)}{#if inCheckNow}&nbsp;· <span class="check">in check</span>{/if} · <span class="muted">move {g.moves.length + 1}</span>
+				<strong>{nameOfSide(g.toMove)} to move</strong> · {SIDE_NAMES[g.toMove]}{#if inCheckNow}&nbsp;· <span class="check">in check</span>{/if} · <span class="muted">move {g.moves.length + 1}</span>
 			{:else if yourMove}
-				<strong>Your move</strong> · {sideName(mySide!)}{#if inCheckNow}&nbsp;· <span class="check">your King is in check</span>{/if} · <span class="goal">Checkmate {nameOfSide(g.toMove === 'gold' ? 'scarlet' : 'gold')}’s King.</span>
+				<strong>Your move</strong> · {SIDE_NAMES[mySide!]}{#if inCheckNow}&nbsp;· <span class="check">your King is in check</span>{/if} · <span class="goal">Checkmate {nameOfSide(g.toMove === 'gold' ? 'scarlet' : 'gold')}’s King.</span>
 			{:else if room.view.playingOn}
-				<strong>The drakes play on</strong> · <span class="muted">a move every few seconds</span>{#if !room.spectating}&nbsp;<button type="button" class="link" onclick={() => room.hurry()}>play the rest at once</button>{/if}
+				<strong>The drakes play on</strong> · <span class="muted">a move every few seconds</span>&nbsp;<button type="button" class="link" onclick={() => room.hurry()}>play the rest at once</button>
 			{:else}
-				<strong>{nameOfSide(g.toMove)} is thinking</strong> · you are {sideName(mySide!)}{#if inCheckNow}&nbsp;· <span class="check">{nameOfSide(g.toMove)} is in check</span>{/if}
+				<strong>{nameOfSide(g.toMove)} is thinking</strong> · you are {SIDE_NAMES[mySide!]}{#if inCheckNow}&nbsp;· <span class="check">{nameOfSide(g.toMove)} is in check</span>{/if}
 			{/if}
 		</div>
 		{#if shownStory && (shownCaptured.length || reviewing !== null || shownLast?.check || shownLast?.promoted)}
 			<p class="story" class:capture={shownCaptured.length > 0}>{shownStory}{#if reviewing !== null}&nbsp;<button type="button" class="link" onclick={() => (reviewing = null)}>back to now</button>{/if}</p>
 		{/if}
 		{#if pending}
-			<p class="confirm">Move {label(pending.from)} to {label(pending.to)}?
+			<p class="confirm">Move {squareName(pending.from)} to {squareName(pending.to)}?
 				<button type="button" class="commit small" onclick={() => pending && send(pending.from, pending.to)}>Confirm</button>
 				<button type="button" class="quiet" onclick={() => (pending = null)}>Cancel</button></p>
 		{/if}
 		{#if room.error}<p class="warning">{room.error}</p>{/if}
 
 		<div class="frame">
-			<BoardArtwork {g} {tokens} {showCoords} {flipped} {selected} {targets} {reach} {shownSquares} {shownCaptured} {checkSquare} yourMove={true} {calm} {tap} {key} />
+			<BoardArtwork {g} {tokens} {showCoords} {flipped} {selected} {targets} {reach} {shownSquares} {shownCaptured} {checkSquare} {calm} {tap} {escape} />
 		</div>
 		<p class="visually-hidden" aria-live="polite">{liveText}</p>
 
@@ -239,7 +211,7 @@
 				<a class="commit" href="/">Back to the hall</a>
 			</div>
 		{:else if yourMove}
-			<p class="muted small how">Tap a piece, then a square on any board. Tap any piece, yours or not, to read what it is and what it can do. With a keyboard: arrows to move about a board, Page Up and Page Down to change boards, Enter to pick up and to set down, Escape to cancel.</p>
+			<p class="muted small how">Tap a piece, then a square on any board. Tap any piece, yours or not, to read what it is and what it can do. With a keyboard, the arrows move about a board, Page Up and Page Down change boards, Enter picks up and sets down, and Escape cancels.</p>
 		{/if}
 	</section>
 
@@ -256,7 +228,7 @@
 					<li class:to-move={g.players[id].side === g.toMove && !g.over}>
 						<span class="dot {g.players[id].side}"></span>
 						<span>{g.players[id].name}{id === room.me ? ' (you)' : ''}</span>
-						<span class="muted">{sideName(g.players[id].side)}, {pieceCount(g.players[id].side)} pieces</span>
+						<span class="muted">{SIDE_NAMES[g.players[id].side]}, {pieceCount(g.players[id].side)} pieces</span>
 					</li>
 				{/each}
 			</ul>

src/lib/components/BoardArtwork.svelte

@@ -13,12 +13,12 @@
 <script lang="ts">
 	// The three boards, drawn one above the other: the air, the land and the
 	// underworld, each twelve by eight in the colours Gygax suggested, with
-	// the pieces as discs bearing his letters. Shared by the table, the hall's
-	// still of the opening and the share artwork.
-	import { FILES, RANKS, PER_LEVEL, fileOf, rankOf, levelOf, isLight, kindOf, sideOf, frozen, squareName, LETTERS, NAMES, type State } from '$lib/game';
+	// the pieces as discs bearing his letters. Shared by the table, the
+	// lessons and the hall's still of the opening.
+	import { FILES, RANKS, PER_LEVEL, fileOf, rankOf, levelOf, idx, isLight, kindOf, sideOf, frozen, squareName, LETTERS, NAMES, SIDE_NAMES, type State } from '$lib/game';
 	let {
 		g, tokens, levels = [3, 2, 1], showCoords = false, flipped = false, selected = null, targets = [], reach = [], shownSquares = [], shownCaptured = [], checkSquare = -1,
-		yourMove = false, calm = true, decorative = false, tap = () => {}, key = () => {}
+		calm = true, decorative = false, tap = () => {}, escape = () => {}
 	}: {
 		g: State;
 		tokens?: Token[];
@@ -34,13 +34,34 @@
 		shownSquares?: number[];
 		shownCaptured?: number[];
 		checkSquare?: number;
-		yourMove?: boolean;
 		calm?: boolean;
+		/** An illustration: no roles, no tab stops, nothing to tap. */
 		decorative?: boolean;
 		tap?: (i: number) => void | Promise<void>;
-		key?: (e: KeyboardEvent, i: number) => void;
+		/** Escape pressed on a square: the caller lets go of whatever it was doing. */
+		escape?: () => void;
 	} = $props();
 
+	let svg: SVGSVGElement | undefined = $state();
+	/** Arrows walk a board the way it is drawn, Page Up and Page Down climb and descend, Enter picks up and sets down. */
+	function key(e: KeyboardEvent, i: number) {
+		const step: Record<string, [number, number, number]> = {
+			ArrowLeft: [flipped ? 1 : -1, 0, 0], ArrowRight: [flipped ? -1 : 1, 0, 0], ArrowUp: [0, flipped ? -1 : 1, 0], ArrowDown: [0, flipped ? 1 : -1, 0],
+			PageUp: [0, 0, 1], PageDown: [0, 0, -1]
+		};
+		if (e.key in step) {
+			e.preventDefault();
+			const [df, dr, dl] = step[e.key];
+			const f = fileOf(i) + df;
+			const r = rankOf(i) + dr;
+			const lv = levelOf(i) + dl;
+			if (f >= 0 && f < FILES && r >= 0 && r < RANKS && levels.includes(lv)) svg?.querySelector<SVGRectElement>(`rect.square[data-i="${idx(lv, f, r)}"]`)?.focus();
+		} else if (e.key === 'Enter' || e.key === ' ') {
+			e.preventDefault();
+			void tap(i);
+		} else if (e.key === 'Escape') escape();
+	}
+
 	const artworkTokens = $derived(tokens ?? g.cells.flatMap((piece, at) => (piece === '' ? [] : [{ id: at, piece, at, dying: false }])));
 	const CELL = 40;
 	const PAD_L = $derived(showCoords ? 18 : 6);
@@ -70,14 +91,14 @@
 	const describe = (i: number) => {
 		const piece = g.cells[i];
 		let text = squareName(i);
-		if (piece !== '') text += `, ${sideOf(piece) === 'gold' ? 'Gold' : 'Scarlet'} ${NAMES[kindOf(piece)]}${frozen(g.cells, i) ? ', frozen' : ''}`;
+		if (piece !== '') text += `, ${SIDE_NAMES[sideOf(piece)!]} ${NAMES[kindOf(piece)]}${frozen(g.cells, i) ? ', frozen' : ''}`;
 		if (targets.includes(i)) text += ', a legal move';
 		if (i === checkSquare) text += ', in check';
 		return text;
 	};
 </script>
 
-<svg xmlns="http://www.w3.org/2000/svg" class="artwork" class:calm viewBox="0 0 {width} {height}" role={decorative ? 'img' : 'grid'} aria-label={decorative ? 'The three boards in their opening position' : 'The three boards'}>
+<svg xmlns="http://www.w3.org/2000/svg" bind:this={svg} class="artwork" class:calm viewBox="0 0 {width} {height}" role={decorative ? 'img' : 'grid'} aria-label={decorative ? 'The three boards in their opening position' : 'The three boards'}>
 	{#each levels as lv, slot (lv)}
 		{@const top = slot * (boardHeight + GAP)}
 		<g class="world" data-level={lv}>
@@ -114,7 +135,7 @@
 				role={decorative ? undefined : 'gridcell'}
 				aria-label={decorative ? undefined : describe(i)}
 				aria-selected={decorative ? undefined : selected === i}
-				tabindex={decorative ? undefined : yourMove ? 0 : -1}
+				tabindex={decorative ? undefined : 0}
 				onclick={decorative ? undefined : () => tap(i)}
 				onkeydown={decorative ? undefined : (e) => key(e, i)}
 			/>

src/lib/components/Chronicle.svelte

@@ -29,7 +29,7 @@
 					Move {t.ply} <span class="notation">{notation(t.move)}</span>
 				</button>
 			</h3>
-			<ul>
+			<ul class="telling">
 				{#each t.lines as l, i (i)}
 					<li class={l.kind}>{l.text}</li>
 				{/each}
@@ -97,22 +97,4 @@
 		color: var(--bone);
 	}
 
-	li.capture {
-		color: var(--ember);
-	}
-
-	li.check,
-	li.freeze,
-	li.promotion {
-		color: var(--frost);
-	}
-
-	li.note {
-		color: var(--bone-dim);
-		font-style: italic;
-	}
-
-	li.end {
-		color: var(--blood);
-	}
 </style>

src/lib/components/Hall.svelte

@@ -48,14 +48,13 @@
 			{ n: t.turnsPlayed, label: 'turns recorded' },
 			{ n: hours(t.minutesAtTable), label: 'at the table' }
 		];
-		const onCards = new Set<string>([]);
 		const details = [
 			{ n: t.gamesBegun, label: `games begun, at ${t.tablesOpened} ${t.tablesOpened === 1 ? 'table' : 'tables'}` },
 			{ n: t.namesSeated, label: t.namesSeated === 1 ? 'name has taken a seat' : 'names have taken a seat' },
 			{ n: t.turnsPlayed, label: `turns recorded; ${t.longestGameTurns} in the longest game` },
 			{ n: t.gamesWithBot, label: t.gamesWithBot === 1 ? 'game with a bot seated' : 'games with a bot seated' },
 			...(t.talkLines ? [{ n: t.talkLines, label: t.talkLines === 1 ? 'line of table talk' : 'lines of table talk' }] : []),
-			...Object.entries(t.byGame).filter(([label]) => !onCards.has(label)).map(([label, n]) => ({ n, label }))
+			...Object.entries(t.byGame).map(([label, n]) => ({ n, label }))
 		];
 		const first = t.firstGameAt ? `The first game began ${new Date(t.firstGameAt).toLocaleDateString(undefined, { year: 'numeric', month: 'long', day: 'numeric' })}. ` : '';
 		return { headline, details, note: `${first}Names are counted, not people: one player under two names is two here. Table time counts only the minutes between moves, so a game left open overnight adds nothing for the night.` };
@@ -208,7 +207,7 @@
 		<h1>Wyrm</h1>
 		<p class="pitch">Chess on three boards, with a Dragon in the air above your King and a Basilisk in the earth below.</p>
 		<p class="tag">Gary Gygax's Dragonchess, from Dragon Magazine in 1985. Gold and Scarlet each lead 42 pieces across the air, the land and the underworld, and the game ends the way chess does, with a King that cannot escape. Play a drake here, free, or open a table and send a friend the link.</p>
-		<p class="links"><a href="/guide">how to play</a> · <a href="/rules">the rules</a> · <a class="about-link" href="#about">about this game</a> · <button type="button" class="link" onclick={() => (prefsOpen = true)}>preferences</button></p>
+		<p class="links"><a href="/guide">how to play</a> · <a href="/learn">learn the pieces</a> · <a href="/rules">the rules</a> · <a class="about-link" href="#about">about this game</a> · <button type="button" class="link" onclick={() => (prefsOpen = true)}>preferences</button></p>
 		<Preferences bind:open={prefsOpen} />
 	</div>
 
@@ -321,7 +320,7 @@
 	<!-- The about panel, a tab at a time: its sections are written here, in the game's own words. -->
 	{#snippet aboutGame()}
 		<div class="about-body">
-			<p>Gary Gygax, who made Dungeons &amp; Dragons, published Dragonchess in the hundredth issue of Dragon Magazine, in August 1985, as seven pages of rules and no board. He played it against himself on three sheets of plexiglass with metal miniatures for pieces, and told readers that three rectangles laid in a row on a table would do. The keeper has that issue on the shelf and built the boards it never came with.</p>
+			<p>Gary Gygax, who made Dungeons &amp; Dragons, published Dragonchess in the hundredth issue of Dragon Magazine, in August 1985, as seven pages of rules and no board. It was playtested on three sheets of plexiglass with metal miniatures for pieces, and he told readers that three rectangles laid in a row on a table would do. The keeper has that issue on the shelf and built the boards it never came with.</p>
 			<p>Wyrm plays the game as the article gives it, every piece as written, with the few open readings settled on the <a href="/rules">rules page</a>, where the article is transcribed in full. The house player is a drake, a search that reads a few moves ahead and values the pieces roughly as Gygax did, so it is fair company for a first game and beatable by a careful one. The name is this site's own. Dragonchess was Gygax's and TSR's, and another company sells a game called Dragon Chess that has nothing to do with this one.</p>
 			<p>It is free and keeps no accounts. A game lives on a small server as an append-only ledger of moves, so it can be replayed from its first move, and nothing in it is hidden from either player or from the gallery.</p>
 		</div>

src/lib/components/LessonBoard.svelte

@@ -0,0 +1,67 @@
+<script lang="ts">
+	// A board for a lesson: the scene's position, the reader's side to move,
+	// two taps or a keyboard to move, and the move handed back to the page.
+	// No room, no server; the engine judges the move here.
+	import BoardArtwork from './BoardArtwork.svelte';
+	import { legalMovesFrom, movesFrom, squareName, sideOf, kindOf, kingSquare, inCheck, NAMES, SIDE_NAMES, type State } from '$lib/game';
+	import { prefs, reducedMotion } from '$lib/prefs.svelte';
+
+	let { g, levels, locked = false, onMove, inspected = $bindable(null) }: {
+		/** The scene as a game: its cells, and the reader's side to move. */
+		g: State;
+		levels: number[];
+		/** The move has been made and told: no more moving until the scene is set again. */
+		locked?: boolean;
+		onMove: (from: number, to: number) => void;
+		/** A piece tapped to read about, which the page shows in its panel. */
+		inspected?: number | null;
+	} = $props();
+
+	let selected = $state<number | null>(null);
+	const targets = $derived(selected === null || locked ? [] : legalMovesFrom(g.cells, selected, 'printed'));
+	const reach = $derived(inspected !== null && inspected !== selected && g.cells[inspected] !== '' ? movesFrom(g.cells, inspected, 'printed') : []);
+	const checkSquare = $derived(inCheck(g.cells, g.toMove) ? kingSquare(g.cells, g.toMove) : -1);
+	const calm = $derived(reducedMotion());
+	const showCoords = $derived(prefs.coordinates !== false);
+	$effect(() => {
+		void g.cells;
+		selected = null;
+		inspected = null;
+	});
+	let liveText = $state('');
+
+	function tap(i: number) {
+		if (selected !== null && targets.includes(i)) {
+			const from = selected;
+			selected = null;
+			inspected = null;
+			onMove(from, i);
+			return;
+		}
+		inspected = g.cells[i] !== '' ? (inspected === i && selected === i ? null : i) : null;
+		if (!locked && sideOf(g.cells[i]) === g.toMove) {
+			selected = selected === i ? null : i;
+			if (selected === null) inspected = null;
+			if (selected !== null) {
+				const to = legalMovesFrom(g.cells, i, 'printed');
+				liveText = `Selected ${SIDE_NAMES[g.toMove]} ${NAMES[kindOf(g.cells[i])]} on ${squareName(i)}. ${to.length} ${to.length === 1 ? 'square' : 'squares'} to move to${to.length ? ': ' + to.map(squareName).join(', ') : ''}.`;
+			}
+		} else selected = null;
+	}
+
+	function escape() {
+		selected = null;
+		inspected = null;
+	}
+</script>
+
+<div class="frame">
+	<BoardArtwork {g} {levels} {showCoords} {selected} {targets} {reach} {checkSquare} {calm} {tap} {escape} />
+</div>
+<p class="visually-hidden" aria-live="polite">{liveText}</p>
+
+<style>
+	.frame {
+		max-width: 640px;
+	}
+</style>

src/lib/components/PiecePanel.svelte

@@ -4,8 +4,7 @@
 	// how to play it. The lore is src/lib/game/lore.ts; the rest is read off
 	// the board.
 	import { LORE } from '$lib/game/lore';
-	import { NAMES, LETTERS, kindOf, sideOf, levelOf, rankOf, frozen, movesFrom, legalMovesFrom, squareName, inCheck, type State, type Side } from '$lib/game';
-	import { VALUES, PER_LEVEL } from '$lib/game/board';
+	import { NAMES, LETTERS, SIDE_NAMES, VALUES, PER_LEVEL, kindOf, sideOf, levelOf, rankOf, frozen, movesFrom, legalMovesFrom, squareName, inCheck, type State, type Side } from '$lib/game';
 
 	let { g, at, mySide, close }: { g: State; at: number; mySide: Side | null; close: () => void } = $props();
 
@@ -13,15 +12,14 @@
 	const kind = $derived(kindOf(cell));
 	const side = $derived(sideOf(cell)!);
 	const lore = $derived(LORE[kind]);
-	const sideWord = $derived(side === 'gold' ? 'Gold' : 'Scarlet');
-	const owner = $derived(mySide === null ? `${sideWord}’s` : side === mySide ? 'Your' : `${sideWord}’s`);
+	const owner = $derived(side === mySide ? 'Your' : `${SIDE_NAMES[side]}’s`);
 	const world = (i: number) => (levelOf(i) === 3 ? 'in the air' : levelOf(i) === 1 ? 'in the underworld' : 'on the land');
 	const value = $derived(kind === 'K' ? 'beyond price' : String(VALUES[kind]).replace('.5', '½'));
 
 	/** Whose piece a victim is, from the viewer's side of the table. */
 	const whose = (i: number) => {
 		const s = sideOf(g.cells[i])!;
-		return mySide === null ? `${s === 'gold' ? 'Gold' : 'Scarlet'}’s` : s === mySide ? 'your' : 'the';
+		return mySide === null ? `${SIDE_NAMES[s]}’s` : s === mySide ? 'your' : 'the';
 	};
 	const list = (items: string[]) => (items.length <= 1 ? items[0] ?? '' : `${items.slice(0, -1).join(', ')} and ${items[items.length - 1]}`);
 

src/lib/components/SeatsSlip.svelte

@@ -63,7 +63,7 @@
 									<button type="button" class="commit small" onclick={() => standIn(s.id)}>Yes, a drake plays for {s.name}</button>
 									<button type="button" class="link" onclick={() => (asked = null)}>no</button>
 								{:else}
-									<button type="button" class="quiet" title="A drake plays {s.name}'s seat from their next move, and their browser stops opening it. A transfer phrase gives it back." onclick={() => (asked = s.id)}>Give to a bot</button>
+									<button type="button" class="quiet" title="A drake plays {s.name}'s seat from their next move, and their browser stops opening it. A transfer phrase gives it back." onclick={() => (asked = s.id)}>Give to a drake</button>
 								{/if}
 							{/if}
 						</span>

src/lib/game/board.ts

@@ -31,12 +31,13 @@ export const LETTERS: Record<Kind, string> = {
 	S: 'S', G: 'G', R: 'Dr', W: 'W', O: 'O', U: 'U', H: 'H', T: 'T', C: 'C', M: 'M', K: 'K', P: 'P', D: 'D', B: 'B', E: 'E'
 };
 
-/** Gygax's values, with the King beyond price. */
+/** Gygax's values. He gives the King none: 0 here, and the panel says "beyond price". */
 export const VALUES: Record<Kind, number> = {
 	K: 0, M: 11, P: 10, C: 9, R: 8, G: 5, O: 5, H: 4.5, T: 4, E: 4, B: 3, U: 2.5, D: 2, S: 1, W: 1
 };
 
 export const SIDES: Side[] = ['gold', 'scarlet'];
+export const SIDE_NAMES: Record<Side, string> = { gold: 'Gold', scarlet: 'Scarlet' };
 export const other = (side: Side): Side => (side === 'gold' ? 'scarlet' : 'gold');
 
 /** A cell index from level 1 to 3, file 0 to 11 and rank 0 to 7. */
@@ -128,11 +129,10 @@ export function movesFrom(cells: Cell[], from: number, setup: Setup = 'printed')
 	const enemy = (i: number) => cells[i] !== '' && sideOf(cells[i]) !== side;
 	const open = (i: number) => cells[i] === '' || sideOf(cells[i]) !== side;
 	/** Add the square if it is on the board and passes the test. */
-	const add = (lv: number, file: number, rank: number, ok: (i: number) => boolean) => {
-		if (lv < 1 || lv > LEVELS || !inBounds(file, rank)) return false;
+	const add = (lv: number, file: number, rank: number, ok: (i: number) => boolean): void => {
+		if (lv < 1 || lv > LEVELS || !inBounds(file, rank)) return;
 		const i = idx(lv, file, rank);
 		if (ok(i)) out.push(i);
-		return true;
 	};
 	/** Slide until something is in the way; a piece of the other side may be taken. */
 	const slide = (dirs: number[][]) => {

src/lib/game/bot.ts

@@ -5,8 +5,8 @@
 // replays to the same choice.
 
 import {
-	CELLS, PER_LEVEL, VALUES, type Cell, type Kind, type Side, type Setup,
-	frozen, kindOf, levelOf, rankOf, fileOf, movesFrom, other, playOn, sideOf, inCheck, legalMoves
+	CELLS, type Cell, type Kind, type Side, type Setup,
+	frozen, idx, kindOf, levelOf, rankOf, fileOf, movesFrom, other, playOn, sideOf, inCheck, legalMoves
 } from './board';
 
 /** Nodes a move may cost: under two seconds on the one-core host, a fifth of that on a laptop. The server waits on it. */
@@ -15,14 +15,46 @@ const MAX_DEPTH = 8;
 const QUIESCE_DEPTH = 4;
 const MATE = 100_000;
 
-/** Centipawn-ish weights: Gygax's values times twenty, the Dragon raised as Jackman advises. */
+/**
+ * Centipawn-ish weights: Gygax's values times twenty, except the Dragon,
+ * raised to a Paladin's weight. Edward Jackman's write-up on the Chess
+ * Variant Pages argues Gygax's 8 is too low, and the search bears it out.
+ */
 const WEIGHT: Record<Kind, number> = {
 	K: 0, M: 220, P: 200, C: 180, R: 200, G: 100, O: 100, H: 90, T: 80, E: 80, B: 60, U: 50, D: 40, S: 20, W: 20
 };
 
-/** How the position looks to `side`: material, a little shape, and the cost of being frozen or off the land. */
+/** The land pieces fast enough to hunt a Dragon in the air. The Cleric and the King can rise too, but a step at a time. */
+const HUNTERS: ReadonlySet<Kind> = new Set<Kind>(['G', 'H', 'P', 'M']);
+
+/** Chebyshev distance between two squares of the air, the Dragon's measure. */
+const apart = (a: number, b: number): number => Math.max(Math.abs(fileOf(a) - fileOf(b)), Math.abs(rankOf(a) - rankOf(b)));
+
+/**
+ * What a Dragon means to a King: the cost of a King whose own Dragon has
+ * wandered from the air above it, and the greater cost of an enemy Dragon
+ * near enough to strike the King's square or its neighbours. Gygax's
+ * advice is to keep the Dragon home, and the drake takes it, since a race
+ * of raiding Dragons is won by whoever moved first.
+ */
+function roof(cells: Cell[], king: number, own: number, enemy: number): number {
+	if (king < 0) return 0;
+	const above = idx(3, fileOf(king), rankOf(king));
+	let v = 0;
+	if (own >= 0) v -= 25 * Math.max(0, apart(own, above) - 1);
+	if (enemy >= 0) {
+		const near = apart(enemy, above);
+		v -= near <= 1 ? 90 : near === 2 ? 45 : near === 3 ? 15 : 0;
+	}
+	return v;
+}
+
+/** How the position looks to `side`: material, a little shape, the cost of being frozen or off the land, and the Dragons' bearing on the Kings. */
 export function evaluate(cells: Cell[], side: Side): number {
 	let score = 0;
+	const king = { gold: -1, scarlet: -1 };
+	const dragon = { gold: -1, scarlet: -1 };
+	const hunters: Record<Side, number[]> = { gold: [], scarlet: [] };
 	for (let i = 0; i < CELLS; i++) {
 		const cell = cells[i];
 		if (cell === '') continue;
@@ -36,15 +68,37 @@ export function evaluate(cells: Cell[], side: Side): number {
 			const advance = sideOf(cell) === 'gold' ? rank - 1 : 6 - rank;
 			v += advance * 4;
 		} else if (kind === 'K') {
+			king[sideOf(cell)!] = i;
 			if (level !== 2) v -= 40;
-		} else if (level === 2 && kind !== 'D' && kind !== 'S' && kind !== 'E') {
+		} else if (kind === 'R') {
+			dragon[sideOf(cell)!] = i;
+		} else if (HUNTERS.has(kind)) {
+			hunters[sideOf(cell)!].push(i);
+		}
+		if (level === 2 && kind !== 'W' && kind !== 'K' && kind !== 'D' && kind !== 'S' && kind !== 'E') {
 			// Pieces of the land like the middle of it.
 			v += 6 - Math.abs(file - 5.5) - Math.abs(rank - 3.5);
 		}
 		if (frozen(cells, i)) v = Math.floor(v / 3);
 		score += own ? v : -v;
 	}
-	return score;
+	const foe = other(side);
+	return score + roof(cells, king[side], dragon[side], dragon[foe]) - roof(cells, king[foe], dragon[foe], dragon[side])
+		+ hunt(side, hunters[side], dragon[foe]) - hunt(foe, hunters[foe], dragon[side]);
+}
+
+/**
+ * A Dragon raiding in `side`'s half of the air can be caught only by the
+ * pieces that can rise to meet it, so they are drawn towards it; a Dragon
+ * at home among its own pieces draws nothing.
+ */
+function hunt(side: Side, hunters: number[], dragon: number): number {
+	if (dragon < 0) return 0;
+	const rank = rankOf(dragon);
+	if (side === 'gold' ? rank > 3 : rank < 4) return 0;
+	let v = 0;
+	for (const i of hunters) v += 6 * Math.max(0, 3 - apart(i, dragon));
+	return v;
 }
 
 interface Search {

src/lib/game/chronicle.ts

@@ -5,10 +5,8 @@
 // replay of the moves, so the chronicle is a function of the game and
 // never part of the ledger: rewording it changes no rules.
 
-import {
-	type Cell, type Kind, type Side, CELLS, PER_LEVEL, NAMES, frozen, kindOf, levelOf, opening, other, playOn, rankOf, sideOf, squareName
-} from './board';
-import type { Move, State } from './index';
+import { type Cell, type Kind, type Side, PER_LEVEL, NAMES, frozen, kindOf, levelOf, opening, other, playOn, rankOf, sideOf, squareName } from './board';
+import { playerName, type Move, type State } from './index';
 
 export type LineKind = 'move' | 'capture' | 'check' | 'freeze' | 'promotion' | 'end' | 'note';
 
@@ -48,7 +46,6 @@ function crossing(kind: Kind, from: number, to: number): string {
 /** How a victim is told. */
 function falls(victim: Kind, owner: string, where: string): string {
 	switch (victim) {
-		case 'K': return `${owner} King is taken`;
 		case 'R': return `${owner} Dragon falls from the sky at ${where}`;
 		case 'B': return `${owner} Basilisk is crushed at ${where}, and its gaze is broken`;
 		case 'S': return `${owner} Sylph is scattered at ${where}`;
@@ -57,8 +54,6 @@ function falls(victim: Kind, owner: string, where: string): string {
 	}
 }
 
-const possessive = (name: string) => `${name}’s`;
-
 /** The pieces on the land held frozen, by square. */
 function frozenSquares(cells: Cell[]): Set<number> {
 	const held = new Set<number>();
@@ -66,10 +61,13 @@ function frozenSquares(cells: Cell[]): Set<number> {
 	return held;
 }
 
+/** Whose a piece is, as a possessive: "Aud’s", "Scarlet’s", or "Your" at a lesson. */
+export type Owner = (side: Side) => string;
+
 /** Tell one move from the position it was made in. */
-function tellOne(before: Cell[], move: Move, ply: number, name: (side: Side) => string): { lines: Line[]; after: Cell[] } {
-	const who = possessive(name(move.by));
-	const foe = possessive(name(other(move.by)));
+function tellOne(before: Cell[], move: Move, owner: Owner): { lines: Line[]; after: Cell[] } {
+	const who = owner(move.by);
+	const foe = owner(other(move.by));
 	const piece = NAMES[move.kind];
 	const from = squareName(move.from);
 	const to = squareName(move.to);
@@ -95,12 +93,13 @@ function tellOne(before: Cell[], move: Move, ply: number, name: (side: Side) =>
 	const heldBefore = frozenSquares(before);
 	const heldAfter = frozenSquares(after);
 	for (const i of heldAfter) {
-		if (heldBefore.has(i) && !(move.afar === false && i === move.to)) continue;
+		if (heldBefore.has(i) && (move.afar || i !== move.to)) continue;
 		const owner = sideOf(after[i]) === move.by ? who : foe;
 		lines.push({ kind: 'freeze', text: `The Basilisk’s gaze falls on ${owner} ${NAMES[kindOf(after[i])]} at ${squareName(i)}, which cannot stir.` });
 	}
 	for (const i of heldBefore) {
-		if (heldAfter.has(i) || after[i] === '' || i === move.from) continue;
+		// The same piece, still there and no longer held; a piece that has just arrived is another story.
+		if (heldAfter.has(i) || after[i] === '' || after[i] !== before[i] || i === move.from || i === move.to) continue;
 		const owner = sideOf(after[i]) === move.by ? who : foe;
 		lines.push({ kind: 'note', text: `${owner} ${NAMES[kindOf(after[i])]} at ${squareName(i)} is free to move again.` });
 	}
@@ -117,20 +116,16 @@ function tellOne(before: Cell[], move: Move, ply: number, name: (side: Side) =>
 	}
 
 	if (move.check) lines.push({ kind: 'check', text: `${foe} King is in check.` });
-	void ply;
 	return { lines, after };
 }
 
 /** The whole game told, one entry a move, from a replay of the moves. A game begun from the opening needs no `start`. */
 export function narrate(state: State, start?: Cell[]): Telling[] {
-	const name = (side: Side) => {
-		const seat = state.seats.find((id) => state.players[id].side === side);
-		return seat ? state.players[seat].name : side === 'gold' ? 'Gold' : 'Scarlet';
-	};
+	const owner: Owner = (side) => `${playerName(state, side)}’s`;
 	let cells = start ?? opening(state.setup);
 	const out: Telling[] = [];
 	state.moves.forEach((move, n) => {
-		const { lines, after } = tellOne(cells, move, n + 1, name);
+		const { lines, after } = tellOne(cells, move, owner);
 		cells = after;
 		out.push({ ply: n + 1, move, lines });
 	});
@@ -139,8 +134,6 @@ export function narrate(state: State, start?: Cell[]): Telling[] {
 }
 
 /** One move told on its own, from the position it was made in. */
-export function tell(before: Cell[], move: Move, name: (side: Side) => string): string {
-	return tellOne(before, move, 0, name).lines.map((l) => l.text).join(' ');
+export function tell(before: Cell[], move: Move, owner: Owner): string {
+	return tellOne(before, move, owner).lines.map((l) => l.text).join(' ');
 }
-
-export { CELLS };

src/lib/game/index.test.ts

@@ -1,15 +1,19 @@
 import { describe, expect, it } from 'vitest';
-import { CURRENT_RULES, applyMove, createGame, game, describe as tell, notation, positionKey, resolveRound, validateMove, type State } from './index';
-import { CELLS, census, frozen, inCheck, legalMoves, legalMovesFrom, movesFrom, opening, playOn, square, squareName, type Cell, type Side } from './board';
-import { chooseMove } from './bot';
+import { CURRENT_RULES, applyMove, createGame, game, notation, positionKey, resolveRound, validateMove, type State } from './index';
+import { CELLS, census, frozen, inCheck, kindOf, legalMoves, legalMovesFrom, movesFrom, opening, playOn, square, squareName, type Cell, type Side } from './board';
+import { chooseMove, evaluate } from './bot';
+import { narrate, tell } from './chronicle';
+
+/** The players' names as the chronicle writes them. */
+const owner = (side: Side) => (side === 'gold' ? 'Aud’s' : 'Bjorn’s');
 
 /** A position from a few named pieces: 'gK' on '2g1' and so on. Kings are added where none is given. */
 function position(pieces: Record<string, string>, toMove: Side = 'gold'): State {
 	const s = createGame({ A: 'Aud', B: 'Bjorn' });
 	s.cells = new Array(CELLS).fill('');
 	for (const [name, cell] of Object.entries(pieces)) s.cells[square(name)] = cell;
-	if (!s.cells.includes('gK')) s.cells[square('2l1')] = s.cells[square('2l1')] || 'gK';
-	if (!s.cells.includes('sK')) s.cells[square('2a8')] = s.cells[square('2a8')] || 'sK';
+	if (!s.cells.includes('gK')) s.cells[square('2l1')] = 'gK';
+	if (!s.cells.includes('sK')) s.cells[square('2a8')] = 'sK';
 	s.toMove = toMove;
 	s.seen = { [positionKey(s.cells, toMove)]: 1 };
 	return s;
@@ -209,7 +213,7 @@ describe('the lower board', () => {
 		const s = position({ '1d4': 'gB', '2d4': 'sO', '2d3': 'gW' });
 		expect(frozen(s.cells, square('2d4'))).toBe(true);
 		expect(names(s.cells, '2d4')).toEqual([]);
-		// The frozen Oliphant looks along the rank at Gold's King on l... put the King in its line.
+		// Gold's King on the frozen Oliphant's rank is not in check: a held piece threatens nothing.
 		const line = position({ '1d4': 'gB', '2d4': 'sO', '2l4': 'gK' });
 		expect(inCheck(line.cells, 'gold')).toBe(false);
 		line.cells[square('1d4')] = '';
@@ -301,17 +305,17 @@ describe('check and the ends', () => {
 		const after = resolveRound(s, { A: { from: square('2c2'), to: square('2c3') } });
 		expect(after.toMove).toBe('scarlet');
 		expect(after.moves).toHaveLength(1);
-		expect(tell(after, after.moves[0])).toBe('Aud’s Warrior steps from 2c2 to 2c3.');
+		expect(tell(s.cells, after.moves[0], owner)).toBe('Aud’s Warrior steps from 2c2 to 2c3.');
 		expect(notation(after.moves[0])).toBe('W/2c2-2c3');
 	});
 
 	it('tells a capture, a climb and a strike from afar', () => {
 		const s = position({ '3c4': 'gR', '2c4': 'sW', '2e4': 'gH' });
 		const afar = applyMove(s, square('3c4'), square('2c4'));
-		expect(tell(afar, afar.moves[0], s.cells)).toBe('Aud’s Dragon strikes down from 3c4 without leaving the air, and Bjorn\u2019s Warrior falls at 2c4.');
+		expect(tell(s.cells, afar.moves[0], owner)).toBe('Aud’s Dragon strikes down from 3c4 without leaving the air, and Bjorn\u2019s Warrior falls at 2c4.');
 		expect(notation(afar.moves[0])).toBe('Drx2c4');
 		const climb = applyMove(s, square('2e4'), square('3d5'));
-		expect(tell(climb, climb.moves[0], s.cells)).toBe('Aud’s Hero springs up from 2e4 to 3d5, into the air.');
+		expect(tell(s.cells, climb.moves[0], owner)).toBe('Aud’s Hero springs up from 2e4 to 3d5, into the air.');
 	});
 });
 
@@ -336,6 +340,27 @@ describe('the drake', () => {
 		expect(move).toEqual({ from: square('2h8'), to: square('2h1') });
 	});
 
+	it('keeps its Dragon home and sees a raiding Dragon as the danger it is', () => {
+		const s = createGame({ A: 'Aud', B: 'Bjorn' });
+		// The Dragon can take a Sylph on the first move, without recourse. The drake declines.
+		expect(legalMoves(s.cells, 'gold').some(([from, to]) => from === square('3g1') && to === square('3a7'))).toBe(true);
+		const first = chooseMove(s.cells, 'gold', 'printed', 20000)!;
+		expect(kindOf(s.cells[first.from])).not.toBe('R');
+		// A Dragon that has flown to the far corner is worth less to its side than one at home, Sylph and all.
+		const raided = s.cells.slice();
+		raided[square('3a7')] = raided[square('3g1')];
+		raided[square('3g1')] = '';
+		expect(evaluate(raided, 'gold')).toBeLessThan(evaluate(s.cells, 'gold'));
+		// An enemy Dragon near the air above the King is worse than the same Dragon as far from its own home but off in a corner.
+		const near = s.cells.slice();
+		near[square('3f3')] = near[square('3g8')];
+		near[square('3g8')] = '';
+		const far = s.cells.slice();
+		far[square('3b3')] = far[square('3g8')];
+		far[square('3g8')] = '';
+		expect(evaluate(near, 'gold')).toBeLessThan(evaluate(far, 'gold'));
+	});
+
 	it('plays a whole game against itself on a small budget and the game ends', { timeout: 120_000 }, () => {
 		let s = createGame({ A: 'Aud', B: 'Bjorn' });
 		let plies = 0;
@@ -351,8 +376,7 @@ describe('the drake', () => {
 });
 
 describe('the chronicle', () => {
-	it('tells a Basilisk’s gaze falling and lifting, a Warrior standing up a Hero, and a King leaving the land', async () => {
-		const { narrate } = await import('./chronicle');
+	it('tells a Basilisk’s gaze falling and lifting, a Warrior standing up a Hero, and a King leaving the land', () => {
 		const s = position({ '1c3': 'gB', '2d4': 'sT', '2a7': 'gW', '2g1': 'gK' });
 		s.cells[square('2l1')] = '';
 		const frozen = applyMove(s, square('1c3'), square('1d4'));
@@ -365,9 +389,9 @@ describe('the chronicle', () => {
 			'Aud’s Basilisk slithers from 1d4 to 1d5.',
 			'Bjorn’s Thief at 2d4 is free to move again.'
 		]);
-		const hero = applyMove(applyMove(freed, square('2b7'), square('2a8')), square('2a7'), square('2a8'));
+		const hero = applyMove(applyMove(freed, square('2b7'), square('2c7')), square('2a7'), square('2a8'));
 		const told = narrate(hero, s.cells)[4].lines;
-		expect(told[0].text).toBe('Aud’s Warrior steps from 2a7 to 2a8, and Bjorn’s King is taken.');
+		expect(told[0].text).toBe('Aud’s Warrior steps from 2a7 to 2a8.');
 		expect(told.some((l) => l.kind === 'promotion')).toBe(true);
 		const up = applyMove(s, square('2g1'), square('3g1'));
 		expect(narrate(up, s.cells)[0].lines.map((l) => l.text)).toEqual([

src/lib/game/index.ts

@@ -5,22 +5,21 @@
 // around them: seats, turns, the ends, and the GameSpec the kit runs.
 
 import { type GameSpec, type Outcome, type SeatId, type TableOptions } from './spec';
-import {
-	type Cell, type Kind, type Side, type Setup, NAMES, LETTERS, cellOf, hasLegalMove, inCheck, kindOf, legalMovesFrom,
-	levelOf, movesFrom, opening, other, playOn, sideOf, squareName
-} from './board';
-export { FILES, RANKS, LEVELS, PER_LEVEL, fileOf, rankOf, levelOf, idx, isLight, kindOf, sideOf, frozen, kingSquare, inCheck, other, square } from './board';
+import { type Cell, type Kind, type Side, type Setup, LETTERS, NAMES, SIDE_NAMES, hasLegalMove, inCheck, kindOf, legalMovesFrom, levelOf, movesFrom, opening, other, playOn, sideOf, squareName } from './board';
 import { chooseMove } from './bot';
-import { narrate } from './chronicle';
+
+// The board's geometry and move generation, re-exported so the browser imports one module.
+export type { Cell, Kind, Side, Setup };
+export {
+	CELLS, FILES, LEVELS, PER_LEVEL, RANKS, NAMES, LETTERS, SIDE_NAMES, VALUES, cellOf, fileOf, frozen, hasLegalMove, idx, inCheck, isLight, kindOf, kingSquare,
+	legalMovesFrom, levelOf, movesFrom, other, playOn, rankOf, sideOf, square, squareName
+} from './board';
 
 export const CURRENT_RULES = 1;
 
 /** Plies without a capture before the game is drawn: fifty moves by each side. */
 export const QUIET_LIMIT = 100;
 
-export type { Cell, Kind, Side, Setup };
-export { NAMES, LETTERS, squareName, legalMovesFrom, movesFrom };
-
 export interface Player {
 	id: SeatId;
 	name: string;
@@ -62,18 +61,16 @@ export interface State {
 
 export type Input = { from: number; to: number };
 
-export const SIDES: { value: Side; label: string; note: string }[] = [
+export const SIDE_CHOICES: { value: Side; label: string; note: string }[] = [
 	{ value: 'gold', label: 'Gold, and move first', note: 'Gold opens the game.' },
 	{ value: 'scarlet', label: 'Scarlet', note: 'Scarlet answers.' }
 ];
 
-export const SETUPS: { value: Setup; label: string; note: string }[] = [
+export const SETUP_CHOICES: { value: Setup; label: string; note: string }[] = [
 	{ value: 'printed', label: 'As printed in 1985', note: 'The Sylphs stand on a, c, e, g, i and k. Gold’s Dragon can take one on the first move.' },
 	{ value: 'shifted', label: 'Sylphs shifted one file', note: 'The Sylphs stand over the Dwarves, on b, d, f, h, j and l, out of the Dragons’ reach.' }
 ];
 
-export const sideName = (side: Side): string => (side === 'gold' ? 'Gold' : 'Scarlet');
-
 export function createGame(names: Record<SeatId, string>, _seed = 0, rules = CURRENT_RULES, options?: TableOptions): State {
 	const seats = Object.keys(names);
 	const hostSide: Side = options?.side === 'scarlet' ? 'scarlet' : 'gold';
@@ -94,7 +91,7 @@ export function seatOf(state: State, side: Side): SeatId | null {
 
 export function playerName(state: State, side: Side): string {
 	const seat = seatOf(state, side);
-	return seat ? state.players[seat].name : sideName(side);
+	return seat ? state.players[seat].name : SIDE_NAMES[side];
 }
 
 /** The end of the game in words a player reads, and the key the tally counts. */
@@ -155,13 +152,6 @@ export function resolveRound(previous: State, inputs: Record<SeatId, Input>): St
 	return applyMove(previous, input.from, input.to);
 }
 
-/** The move told as the chronicle tells it, with what came of it. */
-export function describe(state: State, move: Move, start?: Cell[]): string {
-	const n = state.moves.indexOf(move);
-	const telling = narrate(state, start)[n];
-	return telling ? telling.lines.map((l) => l.text).join(' ') : '';
-}
-
 /** The move in Gygax's notation: piece, from, x, to, with (H), "afar" and ch as he wrote them. */
 export function notation(move: Move): string {
 	const piece = LETTERS[move.kind];
@@ -177,12 +167,11 @@ export const game: GameSpec<State, Input> = {
 	botNames: ['Fafnir', 'Nidhogg', 'Ladon', 'Vritra', 'Apep', 'Jormungand'],
 	currentRules: CURRENT_RULES,
 	options: [
-		{ key: 'side', label: 'You play', choices: SIDES, default: 'gold' },
-		{ key: 'setup', label: 'The Sylphs', choices: SETUPS, default: 'printed' }
+		{ key: 'side', label: 'You play', choices: SIDE_CHOICES, default: 'gold' },
+		{ key: 'setup', label: 'The Sylphs', choices: SETUP_CHOICES, default: 'printed' }
 	],
 	preferences: [
-		{ key: 'coordinates', label: 'Square names on the boards', kind: 'toggle', default: true },
-		{ key: 'letters', label: 'Pieces as letters', kind: 'toggle', default: false, note: 'Gygax’s initials instead of the drawn pieces.' }
+		{ key: 'coordinates', label: 'Square names on the boards', kind: 'toggle', default: true }
 	],
 	create: createGame,
 	resolve: resolveRound,
@@ -191,10 +180,8 @@ export const game: GameSpec<State, Input> = {
 	turn: (state) => state.moves.length + 1,
 	// Nothing is hidden on any board, so every viewer sees the whole state.
 	view: (state) => state,
-	botInput: (state, seat) => {
-		const side = state.players[seat]?.side ?? state.toMove;
-		return chooseMove(state.cells, side, state.setup) ?? { from: -1, to: -1 };
-	},
+	// A side with no legal move has already ended the game, so the drake is never asked for one.
+	botInput: (state, seat) => chooseMove(state.cells, state.players[seat]?.side ?? state.toMove, state.setup)!,
 	cleanInput: (raw) => {
 		const r = raw as { from?: unknown; to?: unknown };
 		const n = (v: unknown) => (Number.isInteger(v) ? (v as number) : -1);
@@ -208,11 +195,10 @@ export const game: GameSpec<State, Input> = {
 		else if (state.end === 'stalemate') lines['ended in stalemate'] = 1;
 		else if (state.end === 'repetition') lines['drawn by repetition'] = 1;
 		else if (state.end === 'quiet') lines['drawn after fifty quiet moves'] = 1;
-		if (state.over?.winner) lines[`won by ${sideName(state.players[state.over.winner].side)}`] = 1;
+		if (state.over?.winner) lines[`won by ${SIDE_NAMES[state.players[state.over.winner].side]}`] = 1;
 		lines['moves played'] = state.moves.length;
 		return lines;
 	},
 	tallyBegun: (options) => ({ [options.setup === 'shifted' ? 'begun with the Sylphs shifted' : 'begun as printed']: 1 })
 };
 
-export { cellOf };

src/lib/game/lessons.test.ts

@@ -0,0 +1,90 @@
+import { describe, expect, it } from 'vitest';
+import { SCENES, sceneCells } from './lessons';
+import { frozen, hasLegalMove, inCheck, kindOf, legalMovesFrom, movesFrom, playOn, square } from './board';
+import { CALLOUTS, TOLD_MOVES, toldStates } from './told';
+
+describe('the lessons', () => {
+	it('every scene’s move is legal for the side to move, and only the asked-for moves count', () => {
+		for (const scene of SCENES) {
+			const cells = sceneCells(scene);
+			for (const [from, to] of scene.moves) {
+				const legal = legalMovesFrom(cells, square(from), 'printed');
+				expect(legal, `${scene.id}: ${from} to ${to}`).toContain(square(to));
+			}
+			// The piece asked for is the player's.
+			for (const [from] of scene.moves) expect(cells[square(from)][0], scene.id).toBe(scene.side === 'gold' ? 'g' : 's');
+			// The scene draws every board its move touches.
+			for (const [from, to] of scene.moves) {
+				expect(scene.levels, scene.id).toContain(Number(from[0]));
+				expect(scene.levels, scene.id).toContain(Number(to[0]));
+			}
+		}
+	});
+
+	it('the scenes do what their words say', () => {
+		const at = (id: string) => SCENES.find((s) => s.id === id)!;
+		const play = (id: string) => {
+			const s = at(id);
+			const cells = sceneCells(s);
+			const [from, to] = s.moves[0];
+			return { cells, after: playOn(cells, square(from), square(to)), s };
+		};
+		// The Warrior's step is blocked and its capture is not.
+		expect(movesFrom(sceneCells(at('warrior')), square('2c2'))).toEqual([square('2d3')]);
+		// The Hero leaps the Warrior and takes the Mage.
+		expect(play('hero').after.captured).toBe('M');
+		// The Mage comes down two boards onto the Basilisk.
+		expect(play('mage').after.captured).toBe('B');
+		// The Paladin vaults over the Dwarf at 1c5.
+		expect(play('paladin').after.captured).toBe('D');
+		// The Sylph's dive and the Dragon's strike take what they say.
+		expect(play('sylph').after.captured).toBe('O');
+		const dragon = play('dragon');
+		expect(dragon.after.afar).toBe(true);
+		expect(dragon.after.captured).toBe('M');
+		expect(dragon.after.cells[square('3c4')]).toBe('gR');
+		// The Basilisk's arrival freezes the Mage above.
+		const basilisk = play('basilisk');
+		expect(frozen(basilisk.after.cells, square('2e4'))).toBe(true);
+		expect(movesFrom(basilisk.after.cells, square('2e4'))).toEqual([]);
+		// The Elemental climbs onto the Thief.
+		expect(play('elemental').after.captured).toBe('T');
+		// The King is in check before it moves, and out of it after either move; up or down leaves it off the land.
+		const king = sceneCells(at('king'));
+		expect(inCheck(king, 'gold')).toBe(true);
+		expect(legalMovesFrom(king, square('2g1'), 'printed').sort()).toEqual([square('1g1'), square('2f1'), square('2h1'), square('3g1')].sort());
+		// The last scene is mate in one by either listed move, and by no other.
+		const mate = play('mate');
+		for (const [from, to] of mate.s.moves) {
+			const after = playOn(mate.cells, square(from), square(to)).cells;
+			expect(inCheck(after, 'scarlet'), `${from} to ${to}`).toBe(true);
+			expect(hasLegalMove(after, 'scarlet', 'printed'), `${from} to ${to}`).toBe(false);
+		}
+		const listed = new Set(mate.s.moves.map(([a, b]) => `${square(a)}-${square(b)}`));
+		for (const to of legalMovesFrom(mate.cells, square('2a1'), 'printed')) {
+			if (listed.has(`${square('2a1')}-${to}`)) continue;
+			const after = playOn(mate.cells, square('2a1'), to).cells;
+			expect(inCheck(after, 'scarlet') && !hasLegalMove(after, 'scarlet', 'printed'), `unlisted mate by the Oliphant to ${to}`).toBe(false);
+		}
+		expect(kindOf(mate.cells[square('2d4')])).toBe('K');
+		expect(frozen(mate.cells, square('2d4'))).toBe(true);
+	});
+});
+
+describe('the game told', () => {
+	it('plays through the engine from the opening to a checkmate, and every callout sits on a move', () => {
+		const states = toldStates();
+		expect(states).toHaveLength(TOLD_MOVES.length + 1);
+		const last = states[states.length - 1];
+		expect(last.end).toBe('mate');
+		expect(last.over?.winner).toBe('A');
+		for (const n of Object.keys(CALLOUTS).map(Number)) expect(n).toBeLessThanOrEqual(TOLD_MOVES.length);
+		// The things the callouts say happened.
+		expect(last.moves[8].captured).toBe('R');
+		expect(last.moves[16].kind).toBe('B');
+		expect(last.moves[20].captured).toBe('H');
+		expect(last.moves[23].captured).toBe('H');
+		expect(last.moves[26].captured).toBe('S');
+		expect(last.moves[26].check).toBe(true);
+	});
+});

src/lib/game/lessons.ts

@@ -0,0 +1,232 @@
+// The lessons: one scene a piece, each a small position with something to
+// see and a move to make. The page shows the boards the scene needs, says
+// what to look at, takes the move from the player, and tells what came of
+// it. A test plays every scene's move through the engine and checks the
+// captures, the freeze and the mate the words promise.
+
+import { type Cell, type Side, CELLS, square } from './board';
+
+export interface Scene {
+	id: string;
+	title: string;
+	/** The pieces, by square name. Kings are added at 2l1 and 2a8 where the scene gives none. */
+	pieces: Record<string, Cell>;
+	/** Whose move it is: the player's side. */
+	side: Side;
+	/** The boards to draw, top first. */
+	levels: number[];
+	/** What to look at before moving. */
+	before: string;
+	/** The move to make, in the player's words. */
+	task: string;
+	/** The move itself, from and to; any of these counts. */
+	moves: [string, string][];
+	/** What came of it. */
+	after: string;
+	/** Said when a legal move is made that is not the one to look at. */
+	aside?: string;
+}
+
+export const SCENES: Scene[] = [
+	{
+		id: 'warrior',
+		title: 'The Warrior',
+		pieces: { '2c2': 'gW', '2d3': 'sW', '2c3': 'sU' },
+		side: 'gold',
+		levels: [2],
+		before: 'Twelve of these stand in a wall at the start. A Warrior steps one square straight ahead, never two, and takes one square diagonally ahead, as a pawn does. The Unicorn at 2c3 blocks this one’s step, but the Warrior at 2d3 is on its diagonal.',
+		task: 'Take the Scarlet Warrior. Tap your Warrior at 2c2, then 2d3.',
+		moves: [['2c2', '2d3']],
+		after: 'The Warrior falls, and yours stands on the d file now. A Warrior that reaches the far rank stands up a Hero, with no choice about it, which is a real gain but not a queen. There is no double step and no capture in passing, so every advance is a commitment.',
+		aside: 'That is a legal move, but the Warrior at 2d3 is the one to take. Set the scene again and look for it.'
+	},
+	{
+		id: 'oliphant',
+		title: 'The Oliphant',
+		pieces: { '2a1': 'gO', '2a6': 'sT', '2d1': 'gT' },
+		side: 'gold',
+		levels: [2],
+		before: 'The war elephant is a rook by another name. It runs any distance along a rank or a file while the way is clear, and never leaves the land. The a file is open from your corner to the Thief at 2a6.',
+		task: 'Take the Thief. Tap the Oliphant at 2a1, then 2a6.',
+		moves: [['2a1', '2a6']],
+		after: 'On a board twelve squares wide an open file runs a long way, and the Oliphant is the piece that owns it. Look up before you settle on a file, though. The Oliphant cannot strike at the air, so an enemy Dragon over the squares ahead of it takes it at leisure.',
+		aside: 'A legal move, but the Thief at 2a6 is the one to take. Set the scene again and look for it.'
+	},
+	{
+		id: 'unicorn',
+		title: 'The Unicorn',
+		pieces: { '2b1': 'gU', '2a2': 'gW', '2b2': 'gW', '2c2': 'gW', '2c3': 'sT' },
+		side: 'gold',
+		levels: [2],
+		before: 'A knight, and one of the three pieces of the land that leap, with the Hero and the Paladin. Your Warriors wall it in, and the Unicorn does not care. It goes one square along a rank or file and one diagonally outward, over whatever is between.',
+		task: 'Leap the wall and take the Thief at 2c3. Tap the Unicorn, then 2c3.',
+		moves: [['2b1', '2c3']],
+		after: 'The Thief is gone and the wall never moved. Early in a game the Unicorns are the pieces to bring out first, for just this reason. Gygax rates them low, below a Basilisk, because a knight is slow on so wide a board, so trade one gladly for a Hero or a Thief.',
+		aside: 'A legal move, but the leap to 2c3 is the one to see. Set the scene again and look for it.'
+	},
+	{
+		id: 'thief',
+		title: 'The Thief',
+		pieces: { '2d1': 'gT', '2h5': 'sO' },
+		side: 'gold',
+		levels: [2],
+		before: 'The bishop of the land, quick along the diagonals. From 2d1 the diagonal runs e2, f3, g4 and on to the Oliphant at 2h5, with nothing in the way.',
+		task: 'Take the Oliphant. Tap the Thief, then 2h5.',
+		moves: [['2d1', '2h5']],
+		after: 'Four squares in one move, and a five-point piece for a four-point one. A Thief’s work is in the middle ranks, which is where the Dragon hunts from the air, so look up before you leave it there. Two Thieves cover both colours of square.',
+		aside: 'A legal move, but the Oliphant at 2h5 is the one to take. Set the scene again and look for it.'
+	},
+	{
+		id: 'hero',
+		title: 'The Hero',
+		pieces: { '2c1': 'gH', '2d2': 'gW', '2e3': 'sM' },
+		side: 'gold',
+		levels: [2],
+		before: 'A champion who goes one or two squares along a diagonal and leaps the square between. Your own Warrior stands at 2d2, and beyond it the Scarlet Mage.',
+		task: 'Leap over the Warrior and take the Mage at 2e3. Tap the Hero, then 2e3.',
+		moves: [['2c1', '2e3']],
+		after: 'The Mage, worth eleven, to a Hero worth four and a half. The Hero can also rise to the air or drop to the underworld, onto any of the four squares diagonally beside the square above or below it, and take a piece as it goes. Off the land its only move is back, so it goes up to kill and comes straight home.',
+		aside: 'A legal move, but the leap to 2e3 is the one to see. Set the scene again and look for it.'
+	},
+	{
+		id: 'cleric',
+		title: 'The Cleric',
+		pieces: { '2e4': 'gC', '3e4': 'sS' },
+		side: 'gold',
+		levels: [3, 2],
+		before: 'The one piece at home on every board. It moves one square in any direction wherever it stands, and it can step straight up or down to the board above or below. A Scarlet Sylph hovers directly over it.',
+		task: 'Step up into the air and take the Sylph. Tap the Cleric, then 3e4 on the upper board.',
+		moves: [['2e4', '3e4']],
+		after: 'The Cleric is in the air now and moves there exactly as it did on the land. Nothing else that visits all three boards keeps its moves on each, which is why Gygax values it at nine, above the Dragon.',
+		aside: 'A legal move, but the step up to 3e4 is the one to see. Set the scene again and look for it.'
+	},
+	{
+		id: 'mage',
+		title: 'The Mage',
+		pieces: { '3c4': 'gM', '1c4': 'sB' },
+		side: 'gold',
+		levels: [3, 2, 1],
+		before: 'On the land the Mage is a queen. Here it is in the air, where it can only step one square along a rank or file, or move straight up or down. Straight down two boards is the underworld, and a Scarlet Basilisk sits there at 1c4. The land square between, 2c4, is empty, and it has to be, because the Mage does not vault.',
+		task: 'Descend two boards and take the Basilisk. Tap the Mage, then 1c4 on the lowest board.',
+		moves: [['3c4', '1c4']],
+		after: 'The Basilisk is crushed and the Mage stands in the underworld, where it is a shadow of itself, one step at a time. Gygax warns against bringing the Mage out early, since lesser pieces develop by chasing it.',
+		aside: 'A legal move, but the drop to 1c4 is the one to see. Set the scene again and look for it.'
+	},
+	{
+		id: 'paladin',
+		title: 'The Paladin',
+		pieces: { '2c4': 'gP', '1c6': 'sD', '1c5': 'sD' },
+		side: 'gold',
+		levels: [2, 1],
+		before: 'On the land the Paladin has the king’s step and the knight’s leap together. Between boards it leaps the way a knight does, one board up or down and two squares along a rank or file, or two boards and one square, over anything in the way. Two Dwarves wait below.',
+		task: 'Vault down to the underworld and take the Dwarf at 1c6. Tap the Paladin, then 1c6.',
+		moves: [['2c4', '1c6']],
+		after: 'One board down and two squares forward, over the Dwarf at 1c5, which never had a say. In the underworld the Paladin keeps only the king’s step. Worth ten by Gygax’s count, it is the piece that can be on any board from any other in one move, and he counsels keeping it back until the lesser pieces are out.',
+		aside: 'A legal move, but the vault to 1c6 is the one to see. Set the scene again and look for it.'
+	},
+	{
+		id: 'sylph',
+		title: 'The Sylph',
+		pieces: { '3e4': 'gS', '2e4': 'sO', '3e5': 'sW' },
+		side: 'gold',
+		levels: [3, 2],
+		before: 'A pawn turned inside out. In the air the Sylph drifts one square diagonally forward and captures by stepping straight ahead, so the Warrior at 3e5 is in its sights. But look down. A Scarlet Oliphant stands on the land directly beneath it, and a Sylph can strike straight down.',
+		task: 'Dive and take the Oliphant on the land. Tap the Sylph, then 2e4 on the middle board.',
+		moves: [['3e4', '2e4']],
+		after: 'A one-point piece has taken a five-point one. Now the Sylph is grounded. On the land it cannot move at all except to rise again, to the square above it or to any empty square the Sylphs began on, and it takes nothing on the way up. Spend them this way and climb them home.',
+		aside: 'A legal move, but the dive onto the Oliphant at 2e4 is the one to see. Set the scene again and look for it.'
+	},
+	{
+		id: 'griffon',
+		title: 'The Griffon',
+		pieces: { '3d4': 'gG', '2e5': 'sT', '3f7': 'sW' },
+		side: 'gold',
+		levels: [3, 2],
+		before: 'Half eagle and half lion. In the air the Griffon leaps two squares one way and three the other, so the Warrior at 3f7 is one leap away. It can also swoop to the land, onto any of the four squares diagonally beside the square beneath it. The Thief at 2e5 is one of those four.',
+		task: 'Swoop down and take the Thief. Tap the Griffon, then 2e5 on the middle board.',
+		moves: [['3d4', '2e5']],
+		after: 'The Thief is gone, and the Griffon is on the land, where it has lost its wings and creeps one square diagonally until it climbs back. A Griffon that drops is a Griffon that must climb again, so drop for something worth two moves. Nothing on the land sees its leap coming.',
+		aside: 'A legal move, but the swoop onto the Thief at 2e5 is the one to see. Set the scene again and look for it.'
+	},
+	{
+		id: 'dragon',
+		title: 'The Dragon',
+		pieces: { '3c4': 'gR', '2d4': 'sM', '2c4': 'sW' },
+		side: 'gold',
+		levels: [3, 2],
+		before: 'The wyrm never leaves the air. It slides the diagonals and steps one square in any direction, and it strikes from afar. Without moving, it can take an enemy on the land directly beneath it or on any of the four squares beside that one. Beneath it at 2c4 stands a Warrior, and beside that, at 2d4, the Scarlet Mage.',
+		task: 'Strike the Mage from afar. Tap the Dragon, then 2d4 on the middle board.',
+		moves: [['3c4', '2d4']],
+		after: 'The Mage is lifted from the land and the Dragon has not moved. That strike was its whole move. Gygax set each Dragon directly over its King for this reason. A Dragon at home is a roof over the five squares beneath it, and a Dragon that flies off to hunt leaves its King under the other Dragon’s shadow.',
+		aside: 'A legal move, but the strike at the Mage on 2d4 is the one to see. Set the scene again and look for it.'
+	},
+	{
+		id: 'dwarf',
+		title: 'The Dwarf',
+		pieces: { '1d4': 'gD', '2d4': 'sH', '1e5': 'sW' },
+		side: 'gold',
+		levels: [2, 1],
+		before: 'A miner of the underworld. It walks one square forward or sideways without taking, and takes one square diagonally ahead, so the Warrior at 1e5 is in reach. It can also strike straight up at the land. A Scarlet Hero has stopped at 2d4, directly over it.',
+		task: 'Burst up and take the Hero. Tap the Dwarf, then 2d4 on the middle board.',
+		moves: [['1d4', '2d4']],
+		after: 'The square above a Dwarf is a trap for anything that settles there. On the land the Dwarf keeps the same moves, and it comes back down only onto an empty square beneath it. Gygax says the Dwarves play little part early, and make the best outposts late, if you have not hurried them forward.',
+		aside: 'A legal move, but the strike up at the Hero on 2d4 is the one to see. Set the scene again and look for it.'
+	},
+	{
+		id: 'basilisk',
+		title: 'The Basilisk',
+		pieces: { '1e3': 'gB', '2e4': 'sM', '2h7': 'sK' },
+		side: 'gold',
+		levels: [2, 1],
+		before: 'The serpent whose gaze turns to stone. A Basilisk moves one square forward or diagonally forward, taking what is there, or one square straight back, and never leaves the underworld. Whatever enemy stands on the land directly above it cannot move, take or threaten anything. The Scarlet Mage stands at 2e4. The square beneath it, 1e4, is one step ahead of your Basilisk.',
+		task: 'Slither under the Mage. Tap the Basilisk, then 1e4.',
+		moves: [['1e3', '1e4']],
+		after: 'The Mage is frozen where it stands, and will be until the Basilisk moves or is taken. Gygax says an immobilised piece can be treated as if it did not exist, except that it still blocks its square. Stand a piece of yours over your own Basilisk and the trick runs the other way.',
+		aside: 'A legal move, but 1e4, beneath the Mage, is the one to see. Set the scene again and look for it.'
+	},
+	{
+		id: 'elemental',
+		title: 'The Elemental',
+		pieces: { '1d4': 'gE', '2e4': 'sT', '1d6': 'sD' },
+		side: 'gold',
+		levels: [2, 1],
+		before: 'The one heavy thing in the underworld. It moves one or two squares along a rank or file and takes the same way, so the Dwarf at 1d6 is in reach. It climbs to the land only to capture, one square along a rank or file onto an empty square and then straight up onto an enemy. The square beside it at 1e4 is empty, and above that stands a Thief.',
+		task: 'Heave up and take the Thief. Tap the Elemental, then 2e4 on the middle board.',
+		moves: [['1d4', '2e4']],
+		after: 'The Thief is shattered and the Elemental stands on the land, where it is a rock. Its only move there is back down, straight through an empty square and then one square along a rank or file. Its climb needs an empty square beside it and an enemy above that square, and nothing else will do.',
+		aside: 'A legal move, but the climb onto the Thief at 2e4 is the one to see. Set the scene again and look for it.'
+	},
+	{
+		id: 'king',
+		title: 'The King',
+		pieces: { '2g1': 'gK', '2g8': 'sO', '2f2': 'gW', '2h2': 'gW' },
+		side: 'gold',
+		levels: [3, 2, 1],
+		before: 'The King is the whole game. It moves one square in any direction on the land, and one step straight up or down between boards. Here it is in check, because the Scarlet Oliphant looks down the open g file. Nothing of yours can take the Oliphant or step into the file, so the King must move. Two squares on the land are safe, and it could also climb into the air or dig into the underworld.',
+		task: 'Step out of check along the rank. Tap the King, then 2f1 or 2h1.',
+		moves: [['2g1', '2f1'], ['2g1', '2h1']],
+		after: 'Safe, and still on the land. The King could have climbed or dug instead, but off the land a King can do nothing except come straight back, and Gygax says it is easily trapped there. At the table, keep two more things in mind. The square beneath your King is where an enemy Basilisk would freeze it, and your Dragon above it is its roof.',
+		aside: 'That is out of check, but off the land the King can only come back. Set the scene again and stay on the land.'
+	},
+	{
+		id: 'mate',
+		title: 'Checkmate',
+		pieces: { '2d4': 'sK', '1d4': 'gB', '2a1': 'gO', '2g1': 'gK', '2f3': 'sT' },
+		side: 'gold',
+		levels: [2, 1],
+		before: 'Your Basilisk sits beneath the Scarlet King at 2d4, so the King is frozen and cannot step out of anything. Gygax wrote that a frozen King is checkmated by any attack it cannot capture or block. Your Oliphant stands in the corner, and two open lines lead to the King, along the fourth rank and up the d file. But a Scarlet Thief at 2f3 watches 2d1, and an attacker that can be taken gives no mate.',
+		task: 'Give checkmate. Tap the Oliphant, then 2a4.',
+		moves: [['2a1', '2a4']],
+		after: 'Checkmate. The King is attacked along the rank, it cannot move, the Thief can neither take the Oliphant on a4 nor step between, and nothing else of Scarlet’s can either. On d1 the Oliphant would have given check and died for it. That is the Basilisk’s other gift. A well-timed move beneath a King, or beneath the piece that guards it, ends a game.',
+		aside: 'A legal move, but not the mate. The Thief at 2f3 covers 2d1, so set the scene again and look for the line it does not cover.'
+	}
+];
+
+/** The scene's position as cells, Kings supplied where the scene gives none. */
+export function sceneCells(scene: Scene): Cell[] {
+	const cells: Cell[] = new Array(CELLS).fill('');
+	for (const [name, cell] of Object.entries(scene.pieces)) cells[square(name)] = cell;
+	if (!cells.includes('gK')) cells[square('2l1')] = 'gK';
+	if (!cells.includes('sK')) cells[square('2a8')] = 'sK';
+	return cells;
+}

src/lib/game/lore.ts

@@ -1,7 +1,7 @@
 // What each piece is, in the game's own voice: the panel a player opens by
 // tapping a piece. The moves are Gygax's, restated for a reader at the
 // table. The rest is ours, written from his strategic notes and from the
-// shape of the rules, and every claim in it is checked against board.ts.
+// shape of the rules, checked against board.ts before either changes.
 
 import type { Kind } from './board';
 
@@ -28,7 +28,7 @@ export const LORE: Record<Kind, Lore> = {
 	},
 	G: {
 		count: 'two a side',
-		is: 'Half eagle and half lion, and the only piece that leaps through the air. Two of them flank each Dragon, on the c and k files.',
+		is: 'Half eagle and half lion, and the one piece whose leap is across the air itself. Two of them flank each Dragon, on the c and k files.',
 		moves: 'In the air a Griffon leaps two squares one way and three the other, over anything in between, to as many as eight squares. It can drop to the land onto any of the four squares diagonally beside the square beneath it, taking whatever is there. On the land it loses its wings and creeps one square diagonally, until it climbs back onto one of the four squares diagonally above it.',
 		why: 'The Griffon is the sky’s raider. Its leap crosses three ranks at once, so nothing on the land sees it coming, and its drop lands beside the square beneath it rather than on it, so a piece that guards the sky over its own head is not safe.',
 		play: 'Keep it in the air, where it is worth a little more than a Hero. On the land it is a lame Thief. Drop to pick off a defender and climb before the land can gather. A Griffon and a Dragon hunting together can take anything that strays onto the ranks beneath them.'
@@ -38,13 +38,13 @@ export const LORE: Record<Kind, Lore> = {
 		is: 'The great wyrm of the sky, roosting above its own King on the g file. The game takes its name from this one.',
 		moves: 'It never leaves the air. It slides any distance along a diagonal, or steps one square in any direction. And it strikes from afar. Without moving, it can take an enemy on the land directly beneath it or on any of the four squares beside that one. The victim is lifted away and the Dragon stays where it is.',
 		why: 'Gygax set the Dragon directly over the King on purpose. Its strike covers the five land squares beneath it, so a Dragon at home is a roof over the King, and a Dragon that flies off to hunt leaves the King under the other Dragon’s shadow.',
-		play: 'Gygax rated it at eight, and players since have called that too low. The drake values it as a Paladin. Early, keep it home and let it threaten. Later, a Dragon over the enemy’s back rank is a terror, since only five kinds of land piece can reach the air at all. Mind the Sylphs, which capture straight ahead on its board and cost a point to lose.'
+		play: 'Gygax rated it at eight, and Edward Jackman, who wrote the game up for the Chess Variant Pages, called that too low. The drake values it as a Paladin, and keeps it home until the other Dragon is dead or far away. Early, keep yours home and let it threaten. Later, a Dragon over the enemy’s back rank is a terror, since only five kinds of land piece can reach the air at all. Mind the Sylphs, which capture straight ahead on its board and cost a point to lose.'
 	},
 	W: {
 		count: 'twelve a side',
 		is: 'The levy of the land, twelve spears in a wall across the second rank.',
 		moves: 'One square straight ahead, never two, and it captures one square diagonally ahead. On reaching the far rank it stands up as a Hero, with no say in the matter. It never leaves the land.',
-		why: 'A chess pawn with the double step and the capture in passing taken away. Gygax said he limited it to the single step of shatranj, the old game chess came from, which slows the opening and makes every advance a commitment.',
+		why: 'A chess pawn with the double step and the capture in passing taken away, which slows the opening and makes every advance a commitment.',
 		play: 'Twelve files is a wide front. Push in the middle and leave the wings to the Oliphants. Chains guard one another as in chess. A Warrior that gets through becomes a Hero, worth four and a half, a real gain but not a queen, so do not spend three pieces to get one there.'
 	},
 	O: {
@@ -73,34 +73,34 @@ export const LORE: Record<Kind, Lore> = {
 		is: 'The bishop of the land, quick along the diagonals and quick to be elsewhere.',
 		moves: 'Any distance along a diagonal, as far as the way is clear. It never leaves the land.',
 		why: 'Two Thieves cover both colours of square, and on a board this wide the diagonals run far.',
-		play: 'A Thief is the piece most often lost to a Dragon’s strike, because its work is in the middle ranks where the Dragon hunts. Keep it on a diagonal the Dragon does not cover, and remember that a Basilisk beneath a Thief freezes it mid-flight.'
+		play: 'A Thief works in the middle ranks, where the Dragon hunts, so keep it on a diagonal the Dragon does not cover, and remember that a Basilisk beneath a Thief freezes it mid-flight.'
 	},
 	C: {
 		count: 'one a side',
 		is: 'The one piece at home on every board.',
 		moves: 'One square in any direction wherever it stands, and one step straight up or down to the board above or below, taking what is there.',
 		why: 'Gygax says not to underestimate it. Of the five kinds of piece that can visit all three boards, the Cleric is the only one that moves and captures the same way on each.',
-		play: 'Gygax values it at nine, above the Dragon, because it can go anywhere and threaten everything when it arrives. A Cleric in the underworld hunts Basilisks that few others can reach, and a Cleric in the air harries Sylphs. Walk it rather than hurrying it. It is slow, and every square it passes is one it controls.'
+		play: 'Gygax values it at nine, above the Dragon, because it can go anywhere and threaten everything when it arrives. A Cleric in the underworld hunts Basilisks that few others can reach, and a Cleric in the air harries Sylphs. It is slow, so start it toward the middle early.'
 	},
 	M: {
 		count: 'one a side',
 		is: 'The queen of the land, and a traveller between worlds with little to do once it has arrived.',
 		moves: 'On the land a Mage slides any distance along a rank, file or diagonal. It can also move straight up or down, one board or two, though to pass through the land the square there must be empty. In the air or the underworld it is reduced to one square sideways, forward or back.',
 		why: 'The most valuable piece on the board, worth eleven, and Gygax warns against the queen hunt. A Mage brought out early is chased by lesser pieces that develop as they chase it.',
-		play: 'Keep it back until the Unicorns and Heroes are out. Its step between boards is a way to flee a Dragon’s gaze, or to drop into the underworld and take a Basilisk from beside it, but a Mage down there is a shadow of itself and takes three moves to go and come back. Use the vertical move to escape, not to visit.'
+		play: 'Keep it back until the Unicorns and Heroes are out. Its step between boards is a way to flee a Dragon’s gaze, or to drop into the underworld and take a Basilisk from beside it, but a Mage down there is a shadow of itself and takes three moves to go and come back.'
 	},
 	K: {
 		count: 'one a side',
-		is: 'The King of the land, and the whole game. Lose it and nothing else counts.',
+		is: 'The King of the land. The game is won by trapping the other one and lost by losing this one.',
 		moves: 'One square in any direction on the land, and one step straight up to the air or down to the underworld, taking what is there. Off the land it can do nothing but come straight back.',
 		why: 'As in chess, the object is to checkmate it. A King attacked with no escape loses the game, and a King frozen by a Basilisk beneath it is mated by any attack that cannot be blocked or captured.',
-		play: 'Keep the square beneath it in mind. An enemy Basilisk that reaches the underworld under your King freezes it where it stands. Never step off the land unless the land is death, since off it the King can only return, a sitting duck. The Dragon above it is its roof, and the Paladin beside it its shield.'
+		play: 'Keep the square beneath it in mind. An enemy Basilisk that reaches the underworld under your King freezes it where it stands. Keep it on the land unless staying is worse, since off the land it can only return, and Gygax says it is easily trapped there. The Dragon above it is its roof.'
 	},
 	P: {
 		count: 'one a side',
 		is: 'The holy knight, the piece that can be on any board from any other in a single leap.',
 		moves: 'On the land the Paladin has the king’s step and the knight’s leap together. Between boards it leaps the way a knight does on one, one board up or down and two squares along a rank or file, or two boards and one square, over anything in between. In the air or the underworld it keeps only the king’s step.',
-		why: 'After the Mage it is the game’s most powerful piece, worth ten, and the only one whose move between boards vaults what is in the way.',
+		why: 'After the Mage it is the game’s most powerful piece, worth ten, and one of the three, with the Griffon and the Hero, whose moves between boards vault what is in the way.',
 		play: 'Gygax counsels keeping it back until the minor pieces are developed. Then its leaps let it threaten the enemy’s sky and underworld where few can follow, and come back in one move. A Paladin can land beside a Basilisk and take it next turn, or rise beneath a Dragon’s roost and strike it from the air.'
 	},
 	D: {
@@ -114,7 +114,7 @@ export const LORE: Record<Kind, Lore> = {
 		count: 'two a side',
 		is: 'The serpent whose gaze turns to stone. Whatever enemy stands on the land directly above a Basilisk cannot move, cannot take, and threatens nothing, until the Basilisk moves or dies.',
 		moves: 'It moves one square straight or diagonally forward, taking what is there, or one square straight back onto an empty square. It never leaves the underworld. The freeze is not a move. It simply holds for as long as the Basilisk stays beneath its victim.',
-		why: 'The Basilisk is the game’s one trick that chess does not have. It is how the underworld reaches the land without ever rising.',
+		why: 'The Basilisk is how the underworld reaches the land without ever rising.',
 		play: 'Gygax’s own advice is to stand a piece of yours over your own Basilisk. Whatever captures it is frozen on the spot, and you take it at your leisure. A Basilisk arriving under a piece that guards the enemy King can be a checkmate on its own, and a Basilisk under the King itself leaves it unable to step out of any check. Walk it forward early. It is slow, and the squares that matter are far away.'
 	},
 	E: {

src/lib/game/told.ts

@@ -0,0 +1,53 @@
+// A game told: twenty-seven moves written to show what a first game should
+// see, with a callout where there is something to look at. The moves are
+// replayed through the engine, so the game can never drift from the rules,
+// and a test says so.
+
+import { applyMove, createGame, validateMove, type State } from './index';
+import { square } from './board';
+
+/** The moves, from and to, in order. */
+export const TOLD_MOVES: [string, string][] = [
+	['2f2', '2f3'], ['2g7', '2g6'], ['2b1', '2c3'], ['2k8', '2j6'], ['2c1', '2e3'], ['3g8', '3c4'], ['2c3', '2e4'], ['3c4', '3d4'], ['2e3', '3d4'],
+	['2c8', '2e6'], ['3d4', '2e5'], ['2h7', '2h6'], ['1c1', '1c2'], ['2e6', '2c4'], ['1c2', '1c3'], ['2i8', '2h7'], ['1c3', '1c4'], ['2d7', '2d6'],
+	['2b2', '2b3'], ['2j6', '2h5'], ['2b3', '2c4'], ['3c8', '3f6'], ['2e2', '2e3'], ['3f6', '2e5'], ['3g1', '3d4'], ['2a7', '2a6'], ['3d4', '3g7']
+];
+
+/** What to look at, by the ply just played; 0 is before the first move. */
+export const CALLOUTS: Record<number, string> = {
+	0: 'Both armies stand as Gygax drew them, and Gold moves first.',
+	1: 'A Warrior steps one square, never two, so the opening is slower than chess. This one clears the f file for the Mage behind it.',
+	3: 'The Unicorn is the first piece out, because it leaps the wall of Warriors. The Hero and the Paladin can leap it too, and nothing else on the land can.',
+	5: 'The Hero leaps two squares along a diagonal, over its own Warrior at 2d2. That leap is how a Hero gets out early.',
+	6: 'Scarlet’s Dragon leaves its roost, which Gygax warned against. It now threatens the five land squares beneath 3c4, and Gold’s Unicorn at 2c3 stands on one of them. It has also left Scarlet’s King without a roof.',
+	7: 'Gold steps the Unicorn out of the Dragon’s shadow.',
+	8: 'The Dragon follows, hungry, to 3d4, where it threatens the Unicorn again. But it has stepped onto a square a Hero can reach. From 2e3 a Hero rises onto any square diagonally beside 3e3, and 3d4 is one of them.',
+	9: 'The Hero rises and the Dragon falls. Only five kinds of land piece can touch the air at all, and this is how one of them does it. The Hero is in the air now, where it can do nothing but come down.',
+	10: 'Scarlet brings a Hero out in answer, leaping its own Warrior at 2d7.',
+	11: 'Gold’s Hero comes home to the land, onto a square diagonally beside the one beneath it. Off the land, that was its only kind of move.',
+	13: 'Gold’s Basilisk sets out from the underworld on a slow walk, one square a move. A Basilisk never leaves the underworld, but whatever enemy piece stands on the land directly above it is frozen, unable to move, take or threaten anything, for as long as the Basilisk stays beneath. This one wants to be beneath whatever Scarlet sends deep into Gold’s side. Watch where Scarlet’s Hero goes.',
+	14: 'The Hero digs into Gold’s side at 2c4, two leaps from home. A piece that comes this deep should look beneath its feet.',
+	17: 'The Basilisk arrives at 1c4, directly beneath the Hero at 2c4, and the Hero is frozen. It cannot move, take or threaten anything until the Basilisk moves away or is taken. Gold is in no hurry.',
+	19: 'A Warrior comes to stand diagonally behind the frozen Hero.',
+	21: 'Taken, in Gygax’s words, more or less at your leisure. The Warrior is safe above Gold’s own Basilisk, since a Basilisk freezes only enemies.',
+	22: 'Scarlet’s Griffon leaps to 3f6, two squares one way and three the other, over everything. Now look at the four land squares diagonally beside 2f6. One of them is 2e5, where Gold’s Hero stands.',
+	23: 'Gold does not look up.',
+	24: 'The Griffon swoops onto the Hero and takes it. On the land it has lost its wings, and creeps one square at a time until it climbs back.',
+	25: 'Gold’s Dragon leaves its roost, and this time it is safe to do so, since Scarlet’s Dragon is dead and nothing threatens Gold’s King from the air. Look along the diagonal from 3d4 through e5 and f6 to 3g7, where a Scarlet Sylph hovers. That square is not above the King, which stands at 2g8, but one rank in front of it, and a Dragon on 3g7 strikes down at 2g7 beneath it and at the four squares beside that, 2g8 among them.',
+	26: 'Scarlet does not look up either.',
+	27: 'The Dragon takes the Sylph at 3g7 and strikes down at 2g7 beneath it and at 2g8, 2f7 and 2h7 beside that, every square the King could use. The King cannot step up, because the Dragon stands beside 3g8. It cannot step down, because its own Elemental is at 1g8. Its neighbours on the land are its own pieces or struck squares, and nothing of Scarlet’s can reach 3g7. Checkmate.'
+};
+
+/** The game at every ply, from the opening to the end. The engine refuses a move that is not legal. */
+export function toldStates(): State[] {
+	let s = createGame({ A: 'Gold', B: 'Scarlet' });
+	const out = [s];
+	TOLD_MOVES.forEach(([from, to], n) => {
+		const seat = s.toMove === 'gold' ? 'A' : 'B';
+		const why = validateMove(s, seat, { from: square(from), to: square(to) });
+		if (why) throw new Error(`told game, ply ${n + 1}, ${from} to ${to}: ${why}`);
+		s = applyMove(s, square(from), square(to));
+		out.push(s);
+	});
+	return out;
+}

src/routes/guide/+page.svelte

@@ -31,7 +31,7 @@
 		<h2>The hall</h2>
 		<figure><img src="/guide/hall.png" alt="The hall, with a name field, the two table choices, the button to play the drake, and the opening position drawn beside them" loading="lazy" /></figure>
 		<p>Write your name and choose your company. <strong>Play now against a drake</strong> seats you across from the house player and begins at once. <strong>Open a table</strong> lays a table and hands you a link and a four-letter code to send to a friend. <strong>Join one</strong> takes a code someone sent you.</p>
-		<p>Two choices sit above the buttons. <em>You play</em> picks your side, and Gold moves first. <em>The Sylphs</em> picks where the six Sylphs start. As Gygax printed it, Gold's Dragon can take an undefended Sylph on the very first move, which a reader of the Chess Variant Pages took for a misprint. The shifted setup moves the Sylphs one file over, out of reach. Beneath the buttons, <em>your games</em> lists every table this browser holds a seat at and whose move it is.</p>
+		<p>Two choices sit above the buttons. <em>You play</em> picks your side, and Gold moves first. <em>The Sylphs</em> picks where the six Sylphs start. As Gygax printed it, Gold's Dragon can take an undefended Sylph on the very first move, which a reader of the Chess Variant Pages took for a misprint. The shifted setup moves the Sylphs one file over, out of reach. <em>Your games</em>, which comes first once you have one, lists every table this browser holds a seat at and whose move it is.</p>
 	</section>
 
 	<section id="table">
@@ -44,7 +44,7 @@
 		<h2>The boards</h2>
 		<figure><img src="/guide/boards.png" alt="The three boards one above the other in the opening position, the air in blue and white, the land in green and amber, the underworld in red and brown" loading="lazy" /></figure>
 		<p>The three boards stand one above the other, the air at the top, the land in the middle and the underworld at the bottom, in the colours Gygax suggested. Your side is nearest you on every board. Each piece is a disc bearing the initial Gygax gave it, with Dr for the Dragon so it is not mistaken for a Dwarf. The square names along the edges are his too, and you can hide them under <em>preferences</em>. A square is named by its board, its file and its rank, so 3b4 is the air, file b, rank 4, and 1g1 is the underworld beneath Gold's King. Each board's title carries its number.</p>
-		<figure><img src="/guide/panel.png" alt="The panel for Scarlet's Dragon: where it stands and what it can take, what it is, how it moves, why it is in the game, and how to play it" loading="lazy" /></figure>
+		<figure><img src="/guide/panel.png" alt="The panel for Scarlet's Dragon, with where it stands and what it can take, what it is, how it moves, why it is in the game, and how to play it" loading="lazy" /></figure>
 		<p>Tap any piece, yours or the other side's, and a panel opens beside the boards, or rises from the foot of the screen on a phone, saying what the piece is, where it stands and what it can reach from there, how it moves, why Gygax put it in the game, and how to play it. Dotted squares show where a piece that is not yours to move could go. Tap the piece again, or the cross, to close it.</p>
 		<p>The strip above the boards says whose move it is and warns when a King is in check. The chronicle beside the boards tells each move and what came of it, who took what, whose gaze fell on whom, and when a King is in check, with Gygax's notation beside each move. Click a move to see it on the boards, and click again, or make your move, to come back to now.</p>
 	</section>
@@ -65,6 +65,7 @@
 
 	<section id="first">
 		<h2>A first game</h2>
+		<p>Before that, <a href="/learn">learn the pieces</a>, fifteen short scenes, one a piece, each a small position with a move for you to make and a word on what came of it, and then <a href="/learn/game">a game told</a>, twenty-seven moves stepped through with a callout wherever there is something to see.</p>
 		<p>Play a drake first. It plays a fair game and never minds how long you take. Begin as you would at chess, with Warriors stepping forward and the knights of the land, the Unicorns and Heroes, coming out behind them. Gygax's own advice is to hold the Mage and the Paladin back until the lesser pieces are developed, and to keep your Dragon home. It starts directly above your King for a reason. A Dragon that flies off to raid leaves the King open to the other Dragon, which strikes the land from the air without ever coming down.</p>
 		<p>Watch the Basilisks. Anything you leave on the land directly above an enemy Basilisk is frozen on the spot, and a frozen piece may as well be off the board. The Cleric is stronger than it looks, since it is the only piece that plays the same on all three boards, and the Dwarves, if you do not hurry them forward, make good guards late in the game.</p>
 		<p>The full rules, piece by piece, are on the <a href={withRoom('/rules')}>rules page</a>, with Gygax's article beneath them. If a rule here reads wrong to you, or something misbehaves, <a href="mailto:eric@ericwagoner.com">send word</a>, or use <em>Report</em> in the masthead at the table, which pins what you saw to the move it happened on. The hall's <em>about this game</em> lists the other ways to reach the keeper.</p>

src/routes/learn/+page.svelte

@@ -0,0 +1,179 @@
+<script lang="ts">
+	// Learn the pieces: one scene a piece. The boards the scene needs, what to
+	// look at, the move made by the reader, and what came of it.
+	import { page } from '$app/state';
+	import LessonBoard from '$lib/components/LessonBoard.svelte';
+	import PiecePanel from '$lib/components/PiecePanel.svelte';
+	import { SCENES, sceneCells } from '$lib/game/lessons';
+	import { tell } from '$lib/game/chronicle';
+	import { createGame, playOn, square, kindOf, inCheck, hasLegalMove, other, SIDE_NAMES, type Cell, type Move, type Side } from '$lib/game';
+
+	const room = $derived((page.url.searchParams.get('room') ?? '').toUpperCase());
+	const withRoom = (path: string) => (room ? `${path}?room=${room}` : path);
+
+	let n = $state(0);
+	const scene = $derived(SCENES[n]);
+	/** The scene's position, moved on by the reader or set again. */
+	let cells = $state<Cell[]>(sceneCells(SCENES[0]));
+	/** What the reader's move came to: the move told, and the scene's word on it. */
+	let outcome = $state<{ told: string; text: string; right: boolean } | null>(null);
+	let inspected = $state<number | null>(null);
+
+	function setScene(i: number) {
+		n = Math.max(0, Math.min(SCENES.length - 1, i));
+		cells = sceneCells(SCENES[n]);
+		outcome = null;
+		inspected = null;
+	}
+
+	function moved(from: number, to: number) {
+		const right = scene.moves.some(([a, b]) => square(a) === from && square(b) === to);
+		const played = playOn(cells, from, to);
+		const move: Move = { by: scene.side, from, to, kind: kindOf(cells[from]), captured: played.captured, afar: played.afar, promoted: played.promoted, check: inCheck(played.cells, other(scene.side)) };
+		const owner = (s: Side) => (s === scene.side ? 'Your' : `${SIDE_NAMES[s]}’s`);
+		let told = tell(cells, move, owner);
+		const mated = move.check && !hasLegalMove(played.cells, other(scene.side), 'printed');
+		if (mated) told += ' Checkmate.';
+		outcome = { told, text: right ? scene.after : (scene.aside ?? scene.after), right };
+		cells = played.cells;
+	}
+
+	/** The board and the panel read a game; this one is the scene's, with the reader on the scene's side. */
+	const g = $derived.by(() => {
+		const s = createGame({ A: scene.side === 'gold' ? 'You' : SIDE_NAMES.gold, B: scene.side === 'scarlet' ? 'You' : SIDE_NAMES.scarlet });
+		s.cells = cells;
+		s.toMove = scene.side;
+		return s;
+	});
+</script>
+
+<svelte:head>
+	<title>Wyrm: learn the pieces</title>
+</svelte:head>
+
+<main class="reading wide">
+	<header>
+		{#if room}<a class="back" href={`/join/${room}`}>Back to your game</a>{' · '}{/if}<a class="back" href="/">Back to the hall</a> · <a class="back" href={withRoom('/guide')}>How to play</a> · <a class="back" href={withRoom('/rules')}>The rules</a>
+		<h1>Learn the pieces</h1>
+		<p class="lede">Fifteen pieces, one scene each, and a checkmate to finish. Every scene is a small position with something to see and one move to make. Tap any piece to read about it, as at the table. When the scenes are done, <a href="/learn/game">a game told</a> shows the pieces working together.</p>
+	</header>
+
+	<nav class="scenes" aria-label="Scenes">
+		{#each SCENES as s, i (s.id)}
+			<button type="button" class="scene-tab" class:current={i === n} onclick={() => setScene(i)}>{s.title}</button>
+		{/each}
+	</nav>
+
+	<section class="stage">
+		<div class="boards">
+			<LessonBoard {g} levels={scene.levels} locked={outcome !== null} onMove={moved} bind:inspected />
+		</div>
+		<div class="words">
+			<p class="eyebrow">Scene {n + 1} of {SCENES.length}</p>
+			<h2>{scene.title}</h2>
+			<p>{scene.before}</p>
+			{#if outcome}
+				<p class="told" class:right={outcome.right}>{outcome.told}</p>
+				<p>{outcome.text}</p>
+				<div class="ways">
+					<button type="button" class="quiet" onclick={() => setScene(n)}>Set the scene again</button>
+					{#if n < SCENES.length - 1}<button type="button" class="commit small" onclick={() => setScene(n + 1)}>Next: {SCENES[n + 1].title}</button>{:else}<a class="commit small" href="/learn/game">Next: a game told</a>{/if}
+				</div>
+			{:else}
+				<p class="task">{scene.task}</p>
+				<div class="ways">
+					{#if n > 0}<button type="button" class="quiet" onclick={() => setScene(n - 1)}>Back</button>{/if}
+					{#if n < SCENES.length - 1}<button type="button" class="quiet" onclick={() => setScene(n + 1)}>Skip</button>{/if}
+				</div>
+			{/if}
+			{#if inspected !== null && cells[inspected] !== ''}
+				<div class="panel">
+					<PiecePanel {g} at={inspected} mySide={scene.side} close={() => (inspected = null)} />
+				</div>
+			{/if}
+		</div>
+	</section>
+</main>
+
+<style>
+	.scenes {
+		display: flex;
+		flex-wrap: wrap;
+		gap: 0.3rem;
+		margin: 1rem 0 1.2rem;
+	}
+
+	.scene-tab {
+		background: none;
+		border: 1px solid var(--rule);
+		border-radius: 999px;
+		padding: 0.2rem 0.7rem;
+		font-size: 0.85rem;
+		color: var(--bone-dim);
+	}
+
+	.scene-tab.current {
+		border-color: var(--ember);
+		color: var(--ember);
+	}
+
+	.stage {
+		display: grid;
+		grid-template-columns: minmax(0, 1fr) minmax(300px, 420px);
+		gap: 1.5rem clamp(1.5rem, 4vw, 3.5rem);
+		align-items: start;
+	}
+
+	@media (max-width: 900px) {
+		.stage {
+			grid-template-columns: minmax(0, 1fr);
+		}
+
+		/* On a phone the words come first, so the reader knows what to look for before the boards. */
+		.words {
+			order: -1;
+		}
+	}
+
+	.words h2 {
+		font-size: 1.5rem;
+		margin-bottom: 0.5rem;
+	}
+
+	.words p + p {
+		margin-top: 0.7rem;
+	}
+
+	.task {
+		color: var(--bone);
+		border-left: 2px solid var(--ember);
+		padding-left: 0.6rem;
+		font-weight: 500;
+	}
+
+	.told {
+		color: var(--bone);
+		border-left: 2px solid var(--frost);
+		padding-left: 0.6rem;
+	}
+
+	.told.right {
+		border-color: var(--ember);
+	}
+
+	.ways {
+		display: flex;
+		flex-wrap: wrap;
+		gap: 0.5rem 0.8rem;
+		margin-top: 0.9rem;
+		align-items: center;
+	}
+
+	.ways .commit {
+		text-decoration: none;
+	}
+
+	.panel {
+		margin-top: 1rem;
+	}
+</style>

src/routes/learn/game/+page.svelte

@@ -0,0 +1,172 @@
+<script lang="ts">
+	// A game told: the boards, one move at a time, each move as the chronicle
+	// tells it, and a callout where there is something to see.
+	import BoardArtwork from '$lib/components/BoardArtwork.svelte';
+	import PiecePanel from '$lib/components/PiecePanel.svelte';
+	import { CALLOUTS, TOLD_MOVES, toldStates } from '$lib/game/told';
+	import { narrate } from '$lib/game/chronicle';
+	import { notation, kingSquare, inCheck, movesFrom, legalMovesFrom, sideOf } from '$lib/game';
+	import { prefs, reducedMotion } from '$lib/prefs.svelte';
+
+	const states = toldStates();
+	const last = states[states.length - 1];
+	const tellings = narrate(last);
+	let ply = $state(0);
+	const g = $derived(states[ply]);
+	const move = $derived(ply > 0 ? last.moves[ply - 1] : null);
+	const telling = $derived(ply > 0 ? tellings[ply - 1] : null);
+	const callout = $derived(CALLOUTS[ply] ?? '');
+	const shownSquares = $derived(move ? (move.afar ? [move.from] : [move.from, move.to]) : []);
+	const shownCaptured = $derived(move?.captured ? [move.to] : []);
+	const checkSquare = $derived(!g.over && ply > 0 && inCheck(g.cells, g.toMove) ? kingSquare(g.cells, g.toMove) : move?.check ? kingSquare(g.cells, g.toMove) : -1);
+	const calm = $derived(reducedMotion());
+	const showCoords = $derived(prefs.coordinates !== false);
+	const marks = Object.keys(CALLOUTS).map(Number).filter((n) => n > 0);
+
+	/** A piece tapped to read about it and to see where it could go from here, before the game shows what it did. */
+	let inspected = $state<number | null>(null);
+	const reach = $derived.by(() => {
+		if (inspected === null || g.cells[inspected] === '' || g.over) return [];
+		return sideOf(g.cells[inspected]) === g.toMove ? legalMovesFrom(g.cells, inspected, g.setup) : movesFrom(g.cells, inspected, g.setup);
+	});
+
+	function go(n: number) {
+		ply = Math.max(0, Math.min(TOLD_MOVES.length, n));
+		inspected = null;
+	}
+	function tap(i: number) {
+		inspected = g.cells[i] !== '' && inspected !== i ? i : null;
+	}
+	/** Left and right step the game, unless the keyboard is on a square, where the arrows walk the board. */
+	function key(e: KeyboardEvent) {
+		if ((e.target as HTMLElement | null)?.tagName === 'rect') return;
+		if (e.key === 'ArrowRight') go(ply + 1);
+		else if (e.key === 'ArrowLeft') go(ply - 1);
+		else return;
+		e.preventDefault();
+	}
+</script>
+
+<svelte:head>
+	<title>Wyrm: a game told</title>
+</svelte:head>
+
+<svelte:window onkeydown={key} />
+
+<main class="reading wide">
+	<header>
+		<a class="back" href="/">Back to the hall</a> · <a class="back" href="/learn">Learn the pieces</a> · <a class="back" href="/guide">How to play</a> · <a class="back" href="/rules">The rules</a>
+		<h1>A game told</h1>
+		<p class="lede">Twenty-seven moves, written to show what a first game should see. A Dragon leaves its roost too soon and a Hero kills it, a Basilisk walks slowly under a piece that came too deep and freezes it, a Griffon swoops, and a Dragon gives checkmate from the air. Step through it with the buttons or the arrow keys, and tap any piece to see where it could go next and to read about it.</p>
+	</header>
+
+	<section class="stage">
+		<div class="boards">
+			<BoardArtwork {g} {showCoords} {shownSquares} {shownCaptured} {checkSquare} selected={inspected} {reach} {calm} {tap} escape={() => (inspected = null)} />
+		</div>
+		<div class="words">
+			<p class="eyebrow">{ply === 0 ? 'Before the first move' : `Move ${ply} of ${TOLD_MOVES.length}`}{#if move}&nbsp;· {notation(move)}{/if}</p>
+			{#if telling}
+				<ul class="told telling">
+					{#each telling.lines as l, i (i)}<li class={l.kind}>{l.text}</li>{/each}
+				</ul>
+			{/if}
+			{#if callout}<p class="callout">{callout}</p>{/if}
+			<div class="ways">
+				<button type="button" class="quiet" disabled={ply === 0} onclick={() => go(ply - 1)}>Back</button>
+				<button type="button" class="commit small" disabled={ply === TOLD_MOVES.length} onclick={() => go(ply + 1)}>Next move</button>
+				{#if ply === TOLD_MOVES.length}<a class="quiet" href="/">Play a drake</a>{/if}
+			</div>
+			<p class="muted small marks">
+				Jump to a callout:
+				{#each marks as n (n)}<button type="button" class="link plain mark" class:current={ply === n} onclick={() => go(n)}>{n}</button>{/each}
+			</p>
+			{#if inspected !== null && g.cells[inspected] !== ''}
+				<div class="panel">
+					<PiecePanel {g} at={inspected} mySide={null} close={() => (inspected = null)} />
+				</div>
+			{/if}
+		</div>
+	</section>
+</main>
+
+<style>
+	.lede {
+		margin-bottom: 1.2rem;
+	}
+
+	.stage {
+		display: grid;
+		grid-template-columns: minmax(0, 1fr) minmax(300px, 420px);
+		gap: 1.5rem clamp(1.5rem, 4vw, 3.5rem);
+		align-items: start;
+	}
+
+	@media (max-width: 900px) {
+		.stage {
+			grid-template-columns: minmax(0, 1fr);
+		}
+
+		.words {
+			order: -1;
+		}
+	}
+
+	.boards {
+		max-width: 640px;
+	}
+
+	.words {
+		position: sticky;
+		top: 0.5rem;
+		max-height: calc(100vh - 1rem);
+		overflow-y: auto;
+	}
+
+	.told {
+		list-style: none;
+		margin: 0.3rem 0 0;
+		padding: 0;
+		border-left: 2px solid var(--frost);
+		padding-left: 0.6rem;
+		font-size: 0.95rem;
+	}
+
+	.callout {
+		margin-top: 0.8rem;
+		color: var(--bone);
+		border-left: 2px solid var(--ember);
+		padding-left: 0.6rem;
+	}
+
+	.ways {
+		display: flex;
+		flex-wrap: wrap;
+		gap: 0.5rem 0.8rem;
+		margin-top: 0.9rem;
+		align-items: center;
+	}
+
+	.ways .quiet {
+		text-decoration: none;
+	}
+
+	.marks {
+		margin-top: 0.8rem;
+	}
+
+	.mark {
+		color: var(--bone-dim);
+		text-decoration: none;
+		margin-left: 0.45rem;
+		font-variant-numeric: tabular-nums;
+	}
+
+	.mark.current {
+		color: var(--ember);
+	}
+
+	.panel {
+		margin-top: 1rem;
+	}
+</style>