The glass board's figures are cached for a week: fifteen files that seldom change no longer go back to the server on every opening of the view

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

deploy/Caddyfile.tmpl

@@ -36,12 +36,15 @@ __HOST__ {
 	# Everything else is the static site. SvelteKit writes each route as
 	# <route>.html, so /rules is tried as /rules.html before falling back to the
 	# app shell, which serves the rooms. Hashed assets under _app/immutable are
-	# cached for a year; every other response is revalidated so a deploy shows
+	# cached for a year, and the glass board's figures, which weigh a few
-	# up on the next load.
+	# megabytes and seldom change, for a week; every other response is
+	# revalidated so a deploy shows up on the next load.
 	handle {
 		@immutable path /_app/immutable/*
 		header @immutable Cache-Control "public, max-age=31536000, immutable"
-		@mutable not path /_app/immutable/*
+		@figures path /figures/*
+		header @figures Cache-Control "public, max-age=604800"
+		@mutable not path /_app/immutable/* /figures/*
 		header @mutable Cache-Control "no-cache"
 		try_files {path} {path}.html /index.html
 		file_server

src/lib/components/Board.svelte

@@ -89,7 +89,7 @@
 				if (mine !== epoch) return;
 				if (victim) tokens = tokens.filter((t) => !t.dying);
 				shown += 1;
-				announce(storyOf(shown));
+				if (reviewing === null) announce(storyOf(shown));
 				if (shown < v.moves.length) await wait(260);
 				if (mine !== epoch) return;
 			}
@@ -124,26 +124,41 @@
 	const shownSquares = $derived(shownLast ? (shownLast.afar ? [shownLast.from] : [shownLast.from, shownLast.to]) : []);
 	const shownCaptured = $derived(shownLast?.captured ? [shownLast.to] : []);
 
-	/** A move picked from the record puts the boards back as they stood after it, and brings its board into view. */
+	/** A move picked from the record puts the boards back as they stood after it, brings its board into view, and says so. */
 	function review(ply: number | null) {
 		if (ply !== null && (ply < 1 || ply > g.moves.length)) return;
 		const step = (ply ?? g.moves.length) - shown;
+		const had = document.activeElement;
 		reviewing = ply;
 		selected = null;
 		inspected = null;
 		// One move on plays itself; any other leap sets the pieces out where they stood.
 		if (step !== 1) resetTokens();
-		if (ply === null) return;
+		announce(ply === null ? `Back to the game as it stands, after move ${g.moves.length}. ${liveLine}` : `The boards after move ${ply} of ${g.moves.length}. ${storyOf(ply)}`);
-		const m = g.moves[ply - 1];
+		const m = ply === null ? null : g.moves[ply - 1];
-		if (oneBoard && !onGlass) {
+		if (m && oneBoard && !onGlass) level = levelOf(m.to);
-			level = levelOf(m.to);
+		void tick().then(() => {
-			return;
+			// A button that went with the mode, or went grey under the keyboard, leaves it nowhere: it goes back to the boards, or stays with the review.
+			const lost = document.activeElement === document.body || (document.activeElement === had && had instanceof HTMLButtonElement && had.disabled);
+			if (lost) {
+				if (ply === null) focusBoards();
+				else backToNow?.focus();
 			}
-		requestAnimationFrame(() => {
+			if (!m) return;
 			const target = onGlass ? document.querySelector('.play canvas') : document.querySelector(`.play g.world[data-level="${levelOf(m.to)}"]`);
-			target?.scrollIntoView({ block: phone ? 'center' : 'nearest', behavior: calm ? 'auto' : 'smooth' });
+			if (!target) return;
+			if (phone) scrollUnderStrip(target);
+			else target.scrollIntoView({ block: 'nearest', behavior: calm ? 'auto' : 'smooth' });
 		});
 	}
+	let backToNow = $state<HTMLButtonElement | null>(null);
+	let artwork = $state<ReturnType<typeof BoardArtwork>>();
+	let glassWay = $state<HTMLButtonElement | null>(null);
+	/** The keyboard goes to the boards: the grid's own square, or, on the glass, the way back to the flat boards. */
+	function focusBoards() {
+		if (artwork) artwork.focusGrid();
+		else glassWay?.focus();
+	}
 
 	// --- Phones: the status strip carries a jump to each board, and a phone on its side shows one board at a time ---
 	let phone = $state(false);
@@ -175,9 +190,12 @@
 			return;
 		}
 		const world = document.querySelector(`.play g.world[data-level="${lv}"]`);
+		if (world) scrollUnderStrip(world);
+	}
+	/** Scrolls a board to sit just under the status strip, which stays in view above it. */
+	function scrollUnderStrip(el: Element) {
 		const strip = document.querySelector('.play .status');
-		if (!world) return;
+		const top = el.getBoundingClientRect().top + scrollY - ((strip?.getBoundingClientRect().height ?? 0) + 14);
-		const top = world.getBoundingClientRect().top + scrollY - ((strip?.getBoundingClientRect().height ?? 0) + 14);
 		scrollTo({ top, behavior: calm ? 'auto' : 'smooth' });
 	}
 
@@ -212,6 +230,14 @@
 		} else if (levelOf(m.to) === 2 && frozen(g.cells, m.to)) line += ' There it is frozen by the Basilisk beneath.';
 		return line;
 	});
+	/** The game as it stands, in a few words: shown beside a position under review, and said when the review ends. */
+	const liveLine = $derived.by(() => {
+		if (g.over) return `${verdict} ${g.over.reason}`;
+		if (room.spectating) return `${nameOfSide(g.toMove)} to move.`;
+		if (yourMove) return `Your move${inCheckNow ? ', and your King is in check' : ''}.`;
+		if (room.view.playingOn) return 'The drakes play on.';
+		return `${nameOfSide(g.toMove)} is thinking.`;
+	});
 
 	// --- Choosing and moving ---
 	let selected = $state<number | null>(null);
@@ -272,7 +298,6 @@
 		if (reviewing !== null) {
 			// The boards are showing an earlier position: a tap brings them back to now, and nothing more.
 			review(null);
-			announce('Back to the game as it stands.');
 			return;
 		}
 		if (!yourMove) {
@@ -347,7 +372,7 @@
 		}
 	}
 
-	const pieceCount = (side: Side) => g.cells.filter((p) => p !== '' && sideOf(p) === side).length;
+	const pieceCount = (side: Side) => v.cells.filter((p) => p !== '' && sideOf(p) === side).length;
 </script>
 
 <main class="board">
@@ -357,6 +382,11 @@
 				<strong>Move {squareName(pending.from)} to {squareName(pending.to)}?</strong>
 				<button type="button" class="commit small" bind:this={confirmButton} onclick={() => pending && send(pending.from, pending.to)} onkeydown={cancelOnEscape}>Confirm</button>
 				<button type="button" class="quiet small" onclick={cancel} onkeydown={cancelOnEscape}>Cancel</button>
+			{:else if reviewing !== null}
+				<strong>After move {reviewing} of {g.moves.length}</strong> · {SIDE_NAMES[v.toMove]} to move{#if checkSquare >= 0}&nbsp;· <span class="check">in check</span>{/if} ·
+				<span class="marked"><button type="button" class="link" disabled={reviewing <= 1} onclick={() => review(reviewing! - 1)}>Earlier</button> ·
+					<button type="button" class="link" disabled={reviewing >= g.moves.length} onclick={() => review(reviewing! + 1)}>Later</button> ·
+					<button type="button" class="link" bind:this={backToNow} onclick={() => review(null)}>Back to now</button></span>
 			{:else if g.over}
 				<strong>{verdict}</strong> <span class="muted">{g.over.reason}</span>
 			{:else if room.spectating}
@@ -371,11 +401,8 @@
 			{#if phone && !onGlass && !pending}
 				<span class="jump">{#each [[3, 'Air'], [2, 'Land'], [1, 'Underworld']] as [lv, label] (lv)}<button type="button" class="link plain" class:current={oneBoard && level === lv} class:lit={targets.some((t) => levelOf(t) === lv)} onclick={() => goLevel(lv as number)}>{label}</button>{/each}</span>
 			{/if}
-			{#if reviewing !== null && !pending}
+			{#if reviewing !== null}
-				<span class="marked">The boards as they stood after move {reviewing} of {g.moves.length}.
+				<span class="now muted">The game now, after move {g.moves.length}: {liveLine}</span>
-					<button type="button" class="link" disabled={reviewing <= 1} onclick={() => review(reviewing! - 1)}>Earlier</button> ·
-					<button type="button" class="link" disabled={reviewing >= g.moves.length} onclick={() => review(reviewing! + 1)}>Later</button> ·
-					<button type="button" class="link" onclick={() => review(null)}>Back to now</button></span>
 			{/if}
 		</div>
 		{#if shownStory && (shownCaptured.length || reviewing !== null || shownLast?.check || shownLast?.promoted || shownFreeze)}
@@ -401,13 +428,13 @@
 			</div>
 		{/if}
 
-		<p class="muted small glass-way"><button type="button" class="link plain" disabled={fetching} aria-busy={fetching} onclick={() => seeGlass(!onGlass)}>{fetching ? 'Fetching the glass board…' : onGlass ? 'Back to the flat boards' : 'See the glass board'}</button>{#if drake && !g.over}&nbsp;· <button type="button" class="link plain" disabled={starting} onclick={again}>Start over against a fresh drake</button>{/if}</p>
+		<p class="muted small glass-way"><button type="button" class="link plain" bind:this={glassWay} disabled={fetching} aria-busy={fetching} onclick={() => seeGlass(!onGlass)}>{fetching ? 'Fetching the glass board…' : onGlass ? 'Back to the flat boards' : 'See the glass board'}</button>{#if drake && !g.over}&nbsp;· <button type="button" class="link plain" disabled={starting} onclick={again}>Start over against a fresh drake</button>{/if}</p>
 		{#if fault}<p class="warning">{fault}</p>{/if}
 		{#if onGlass && Glass}
-			<Glass g={v} {mySide} {selected} {targets} {reach} {shownSquares} {shownCaptured} {checkSquare} {calm} {tap} />
+			<Glass g={v} {mySide} {showCoords} {selected} {targets} {reach} {shownSquares} {shownCaptured} {checkSquare} {calm} {tap} />
 		{:else}
 			<div class="frame">
-				<BoardArtwork g={v} {tokens} levels={oneBoard ? [level] : [3, 2, 1]} climb={(lv) => (level = lv)} {showCoords} {flipped} {selected} {targets} {reach} {shownSquares} {shownCaptured} {checkSquare} {calm} {tap} {escape} />
+				<BoardArtwork bind:this={artwork} g={v} {tokens} levels={oneBoard ? [level] : [3, 2, 1]} climb={(lv) => (level = lv)} {showCoords} {flipped} {selected} {targets} {reach} {shownSquares} {shownCaptured} {checkSquare} {calm} {tap} {escape} />
 			</div>
 		{/if}
 		<p class="visually-hidden" aria-live="polite">{liveText}</p>
@@ -427,14 +454,14 @@
 			<h2>At the table</h2>
 			<ul>
 				{#each g.seats as id (id)}
-					<li class:to-move={g.players[id].side === g.toMove && !g.over}>
+					<li class:to-move={g.players[id].side === v.toMove && !(g.over && reviewing === null)}>
 						<span class="dot {g.players[id].side}"></span>
 						<span>{g.players[id].name}{id === room.me ? ' (you)' : ''}</span>
 						<span class="muted">{SIDE_NAMES[g.players[id].side]}, {pieceCount(g.players[id].side)} pieces</span>
 					</li>
 				{/each}
 			</ul>
-			<p class="muted small">Move {g.moves.length + 1}.</p>
+			<p class="muted small">{reviewing !== null ? `After move ${reviewing} of ${g.moves.length}.` : `Move ${g.moves.length + 1}.`}</p>
 		</section>
 		<Chronicle {tellings} {mySide} {reviewing} onReview={review} />
 		<TableTalk {room} />
@@ -494,9 +521,14 @@
 	}
 
 	.marked {
+		display: inline-block;
+		margin-left: 0.2rem;
+		color: var(--frost);
+	}
+
+	.now {
 		display: block;
 		margin-top: 0.2rem;
-		color: var(--frost);
 	}
 
 	/* The jumps: one a board, and a mark on any board the chosen piece can reach. */

src/lib/components/BoardArtwork.svelte

@@ -102,6 +102,10 @@
 		for (const c of [visited, selected]) if (c !== null && drawn.includes(c)) return c;
 		return levels.includes(2) ? idx(2, flipped ? FILES - 1 : 0, flipped ? RANKS - 1 : 0) : drawn[0];
 	});
+	/** Puts the keyboard on the grid, at the square Tab would reach. */
+	export function focusGrid() {
+		focusSquare(entry);
+	}
 	const fileLetter = (n: number) => 'abcdefghijkl'[flipped ? FILES - 1 - n : n];
 	const rankNumber = (n: number) => (flipped ? n + 1 : RANKS - n);
 	const describe = (i: number) => {

src/lib/components/Glass.svelte

@@ -17,7 +17,7 @@
 	import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
 	import { FILES, RANKS, fileOf, rankOf, levelOf, idx, isLight, kindOf, sideOf, frozen, type Kind, type Side, type State } from '$lib/game';
 
-	let { g, mySide = null, selected = null, targets = [], reach = [], shownSquares = [], shownCaptured = [], checkSquare = -1, calm = true, tap = () => {} }: {
+	let { g, mySide = null, selected = null, targets = [], reach = [], shownSquares = [], shownCaptured = [], checkSquare = -1, calm = true, showCoords = true, tap = () => {} }: {
 		g: State;
 		mySide?: Side | null;
 		selected?: number | null;
@@ -27,6 +27,8 @@
 		shownCaptured?: number[];
 		checkSquare?: number;
 		calm?: boolean;
+		/** Whether the sheets' rims carry the files' letters and the ranks' numbers, as the flat boards do. */
+		showCoords?: boolean;
 		tap?: (i: number) => void | Promise<void>;
 	} = $props();
 
@@ -41,8 +43,16 @@
 	/** Air between the sheets, in squares: enough for a Dragon's wings. */
 	const GAP = 4.2;
 	const CELL = 1;
-	/** The sheet's rim beyond the outer squares, in squares. */
+	/** The sheet's rim beyond the outer squares, in squares: room for the square names. */
-	const RIM = 0.3;
+	const RIM = 0.45;
+	/** The ink the rim's letters are written in, dark on the pale sheets and pale on the red one. */
+	const INK: Record<number, string> = { 3: '#2a3b48', 2: '#33391f', 1: '#f3dfd0' };
+	/** Repaints the sheets when the preference for square names changes; set once the sheets exist. */
+	let repaint: (() => void) | null = null;
+	$effect(() => {
+		void showCoords;
+		repaint?.();
+	});
 
 	const levelY = (level: number) => (level - 1) * GAP;
 	/** Where a square's centre sits: Gold's side towards +z, file a at -x. */
@@ -106,12 +116,11 @@
 
 		// The sheets, tinted by level, and the posts that hold them.
 		const slabs: THREE.Mesh[] = [];
-		for (const level of [1, 2, 3]) {
+		const sheets: { level: number; c: HTMLCanvasElement; map: THREE.CanvasTexture }[] = [];
 		// The texture covers the whole sheet, rim included, so that the squares sit exactly under the figures.
-			const PX = 40;
+		// The canvas's bottom edge is Gold's, rank 1; its left edge is file a.
-			const c = document.createElement('canvas');
+		const PX = 64;
-			c.width = (FILES + 2 * RIM) * PX;
+		function paint(level: number, c: HTMLCanvasElement) {
-			c.height = (RANKS + 2 * RIM) * PX;
 			const ctx = c.getContext('2d')!;
 			ctx.fillStyle = SQUARES[level][1];
 			ctx.fillRect(0, 0, c.width, c.height);
@@ -119,8 +128,47 @@
 				ctx.fillStyle = SQUARES[level][isLight(idx(level, f, r)) ? 0 : 1];
 				ctx.fillRect((RIM + f) * PX, (RIM + RANKS - 1 - r) * PX, PX, PX);
 			}
+			if (!showCoords) return;
+			// The names run along every edge, the far ones turned about, so that each seat reads its own.
+			ctx.fillStyle = INK[level];
+			ctx.font = `600 ${Math.round(PX * 0.34)}px 'Iowan Old Style', Georgia, serif`;
+			ctx.textAlign = 'center';
+			ctx.textBaseline = 'middle';
+			const inset = (RIM * PX) / 2;
+			const write = (text: string, x: number, y: number, turned: boolean) => {
+				ctx.save();
+				ctx.translate(x, y);
+				if (turned) ctx.rotate(Math.PI);
+				ctx.fillText(text, 0, 1);
+				ctx.restore();
+			};
+			for (let f = 0; f < FILES; f++) {
+				const letter = 'abcdefghijkl'[f];
+				const x = (RIM + f + 0.5) * PX;
+				write(letter, x, c.height - inset, false);
+				write(letter, x, inset, true);
+			}
+			for (let r = 0; r < RANKS; r++) {
+				const y = (RIM + RANKS - 1 - r + 0.5) * PX;
+				write(String(r + 1), inset, y, false);
+				write(String(r + 1), c.width - inset, y, true);
+			}
+		}
+		repaint = () => {
+			for (const sh of sheets) {
+				paint(sh.level, sh.c);
+				sh.map.needsUpdate = true;
+			}
+		};
+		for (const level of [1, 2, 3]) {
+			const c = document.createElement('canvas');
+			c.width = (FILES + 2 * RIM) * PX;
+			c.height = (RANKS + 2 * RIM) * PX;
+			paint(level, c);
 			const map = new THREE.CanvasTexture(c);
 			map.colorSpace = THREE.SRGBColorSpace;
+			map.anisotropy = 8;
+			sheets.push({ level, c, map });
 			const slab = new THREE.Mesh(
 				new THREE.BoxGeometry((FILES + 2 * RIM) * CELL, 0.12, (RANKS + 2 * RIM) * CELL),
 				new THREE.MeshPhysicalMaterial({ map, transparent: true, opacity: 0.62, roughness: 0.15, metalness: 0, clearcoat: 1 })
@@ -142,7 +190,7 @@
 			const tip = new THREE.Mesh(new THREE.ConeGeometry(0.19, 1.0, 12), stone);
 			tip.position.y = GAP * 2 + 1.9;
 			group.add(post, tip);
-			group.position.set(x * (FILES / 2 + 0.6), 0, z * (RANKS / 2 + 0.6));
+			group.position.set(x * (FILES / 2 + 0.75), 0, z * (RANKS / 2 + 0.75));
 			scene.add(group);
 			posts.push({ group, stone });
 		}
@@ -471,6 +519,7 @@
 
 		return () => {
 			kept = { view, sheet, side: mySide, position: camera.position.toArray(), target: controls.target.toArray(), zoom: above.zoom };
+			repaint = null;
 			removeEventListener('resize', resize);
 			watcher.disconnect();
 			controls.dispose();