From 7dd113b1ff1b4b00034a8690bb3c567f8444719e Mon Sep 17 00:00:00 2001
From: Eric Wagoner <ewagoner@gmail.com>
Date: Tue, 27 Oct 2026 20:49:37 -0400
Subject: [PATCH] Six things a first-time tester found: the rules counted five
 kinds that cross boards and named nine; a lesson's screen-reader line kept
 describing a piece after the move, and the outcome was never read; the
 chronicle's move links were too faint and small to look live; the hall's Play
 button sat disabled with no word about the name it waits for, and nothing
 said the drake is the computer; the lessons forgot which scenes were done

Scenes played right are remembered in this browser, ticked on their tabs, and the page opens on the first one left.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01CCLa2PaEeCj8njQZSWGqHx
---
 src/lib/components/Chronicle.svelte   |  4 +--
 src/lib/components/Hall.svelte        |  1 +
 src/lib/components/LessonBoard.svelte |  4 ++-
 src/routes/learn/+page.svelte         | 44 +++++++++++++++++++++++++--
 src/routes/rules/+page.svelte         |  2 +-
 5 files changed, 48 insertions(+), 7 deletions(-)

diff --git a/src/lib/components/Chronicle.svelte b/src/lib/components/Chronicle.svelte
index 19ce3df..4960deb 100644
--- a/src/lib/components/Chronicle.svelte
+++ b/src/lib/components/Chronicle.svelte
@@ -52,8 +52,8 @@
 	}
 
 	h3 {
-		font-size: 0.8rem;
-		color: var(--bone-faint);
+		font-size: 0.85rem;
+		color: var(--bone-dim);
 		margin: 0.6rem 0 0.2rem;
 		font-weight: 500;
 	}
diff --git a/src/lib/components/Hall.svelte b/src/lib/components/Hall.svelte
index 5cf2802..a0fc31d 100644
--- a/src/lib/components/Hall.svelte
+++ b/src/lib/components/Hall.svelte
@@ -216,6 +216,7 @@
 			<span>Your name</span>
 			<input type="text" bind:value={name} maxlength={NAME_MAX} placeholder="e.g. Morwenna" autocomplete="nickname" />
 		</label>
+		{#if !ready}<p class="option-note muted small">A name first, and the buttons wake. The drake is the computer, playing for the house.</p>{/if}
 		{#if game.options?.length}
 			<div class="options">
 				{#each game.options as o (o.key)}
diff --git a/src/lib/components/LessonBoard.svelte b/src/lib/components/LessonBoard.svelte
index 4f86933..77f599c 100644
--- a/src/lib/components/LessonBoard.svelte
+++ b/src/lib/components/LessonBoard.svelte
@@ -23,12 +23,14 @@
 	const checkSquare = $derived(inCheck(g.cells, g.toMove) ? kingSquare(g.cells, g.toMove) : -1);
 	const calm = $derived(reducedMotion());
 	const showCoords = $derived(prefs.coordinates !== false);
+	let liveText = $state('');
 	$effect(() => {
+		// A move or a new scene leaves nothing selected, and nothing to say about one.
 		void g.cells;
 		selected = null;
 		inspected = null;
+		liveText = '';
 	});
-	let liveText = $state('');
 
 	function tap(i: number) {
 		if (selected !== null && targets.includes(i)) {
diff --git a/src/routes/learn/+page.svelte b/src/routes/learn/+page.svelte
index ef6784b..46385ac 100644
--- a/src/routes/learn/+page.svelte
+++ b/src/routes/learn/+page.svelte
@@ -1,6 +1,7 @@
 <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 { onMount } from 'svelte';
 	import { page } from '$app/state';
 	import LessonBoard from '$lib/components/LessonBoard.svelte';
 	import PiecePanel from '$lib/components/PiecePanel.svelte';
@@ -12,6 +13,27 @@
 	const withRoom = (path: string) => (room ? `${path}?room=${room}` : path);
 
 	let n = $state(0);
+	/** The scenes this browser has already played right, so a reader can come back to the next one. */
+	const DONE = 'wyrm:learn:done';
+	let done = $state<string[]>([]);
+	onMount(() => {
+		try {
+			done = JSON.parse(localStorage.getItem(DONE) ?? '[]');
+		} catch {
+			done = [];
+		}
+		const next = SCENES.findIndex((s) => !done.includes(s.id));
+		if (next > 0) setScene(next);
+	});
+	function finished(id: string) {
+		if (done.includes(id)) return;
+		done = [...done, id];
+		try {
+			localStorage.setItem(DONE, JSON.stringify(done));
+		} catch {
+			// Remembered for this visit only.
+		}
+	}
 	const scene = $derived(SCENES[n]);
 	/** The scene's position, moved on by the reader or set again. */
 	let cells = $state<Cell[]>(sceneCells(SCENES[0]));
@@ -36,6 +58,7 @@
 		if (mated) told += ' Checkmate.';
 		outcome = { told, text: right ? scene.after : (scene.aside ?? scene.after), right };
 		cells = played.cells;
+		if (right) finished(scene.id);
 	}
 
 	/** The board and the panel read a game; this one is the scene's, with the reader on the scene's side. */
@@ -60,7 +83,7 @@
 
 	<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>
+			<button type="button" class="scene-tab" class:current={i === n} class:done={done.includes(s.id)} aria-current={i === n ? 'true' : undefined} onclick={() => setScene(i)}>{#if done.includes(s.id)}<span class="tick" aria-label="done">✓</span>{/if}{s.title}</button>
 		{/each}
 	</nav>
 
@@ -73,8 +96,10 @@
 			<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 aria-live="polite">
+					<p class="told" class:right={outcome.right}>{outcome.told}</p>
+					<p>{outcome.text}</p>
+				</div>
 				<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}
@@ -117,6 +142,19 @@
 		color: var(--ember);
 	}
 
+	.scene-tab.done {
+		color: var(--bone);
+	}
+
+	.scene-tab.done.current {
+		color: var(--ember);
+	}
+
+	.tick {
+		color: var(--frost);
+		margin-right: 0.3em;
+	}
+
 	.stage {
 		display: grid;
 		grid-template-columns: minmax(0, 1fr) minmax(300px, 420px);
diff --git a/src/routes/rules/+page.svelte b/src/routes/rules/+page.svelte
index d6aabaf..e230a03 100644
--- a/src/routes/rules/+page.svelte
+++ b/src/routes/rules/+page.svelte
@@ -110,7 +110,7 @@
 	<section id="between">
 		<h2>Between the boards</h2>
 		<p>
-			Five kinds of piece pass between boards. The Griffon, the Hero and the Paladin leap, and nothing in the way stops them. The Mage and the Elemental do not leap. A Mage going from the underworld to the air needs the square on the land between to be empty, and an Elemental needs the square beside it empty on the way up and the square beneath it empty on the way down. The Sylph, the Dwarf, the Cleric and the King move straight up or down, one board at a time, onto the square itself.
+			Nine kinds of piece pass between boards. The Griffon, the Hero and the Paladin leap, and nothing in the way stops them. The Mage and the Elemental do not leap. A Mage going from the underworld to the air needs the square on the land between to be empty, and an Elemental needs the square beside it empty on the way up and the square beneath it empty on the way down. The Sylph, the Dwarf, the Cleric and the King move straight up or down, one board at a time, onto the square itself.
 		</p>
 	</section>