Tap any piece and a panel tells what it is, what it can do from where it stands, how it moves, why Gygax put it in, and how to play it

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

src/lib/components/BoardArtwork.svelte

@@ -17,7 +17,7 @@
 	// 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';
 	let {
-		g, tokens, levels = [3, 2, 1], showCoords = false, flipped = false, selected = null, targets = [], shownSquares = [], shownCaptured = [], checkSquare = -1,
+		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 = () => {}
 	}: {
 		g: State;
@@ -29,6 +29,8 @@
 		flipped?: boolean;
 		selected?: number | null;
 		targets?: number[];
+		/** Where a piece being read about could go: shown faintly, since it is not the viewer's to move. */
+		reach?: number[];
 		shownSquares?: number[];
 		shownCaptured?: number[];
 		checkSquare?: number;
@@ -135,6 +137,12 @@
 				</g>
 			{/if}
 		{/each}
+		{#each reach as i (i)}
+			{@const p = place(i)}
+			{#if p}
+				<rect class="reach" x={p.x + 4} y={p.y + 4} width={CELL - 8} height={CELL - 8} rx="3" pointer-events="none" />
+			{/if}
+		{/each}
 		{#each targets as i (i)}
 			{@const p = place(i)}
 			{#if p}
@@ -259,6 +267,14 @@
 		opacity: 0.9;
 	}
 
+	.reach {
+		fill: none;
+		stroke: #1b1410;
+		stroke-width: 1.2;
+		stroke-dasharray: 3 2;
+		opacity: 0.55;
+	}
+
 	.hint-ring {
 		fill: none;
 		stroke: var(--frost);