The guide and the rules page keep the room they were opened from, and carry it to each other and back

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

template/src/routes/guide/+page.svelte

@@ -3,6 +3,11 @@
 	// screenshot per section, from the hall to a first game. Capture the
 	// figures from the running game into static/guide/ and describe what a
 	// new player is looking at, not what the code does.
+	import { page } from '$app/state';
+
+	/** Opened from a table, the page offers the way back to it and carries it to its cross-links. */
+	const room = $derived((page.url.searchParams.get('room') ?? '').toUpperCase());
+	const withRoom = $derived((path: string) => (room ? `${path}?room=${room}` : path));
 </script>
 
 <svelte:head>
@@ -11,7 +16,7 @@
 
 <main class="guide">
 	<header>
-		<a class="back" href="/">Back to the hall</a>
+		{#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('/rules')}>The rules</a>
 		<h1>How to play</h1>
 		<p class="lede">Two sentences that set the scene and say what this page walks through.</p>
 		<nav aria-label="Sections">

template/src/routes/join/[code]/+page.svelte

@@ -123,7 +123,7 @@
 			{/if}
 		{/if}
 		<button type="button" class="quiet" onclick={() => (prefsOpen = true)}>Preferences</button>
-		<a class="quiet" href="/guide">How to play</a>
+		<a class="quiet" href={room ? `/guide?room=${roomId}` : '/guide'}>How to play</a>
 		<a class="quiet" href={room ? `/rules?room=${roomId}` : '/rules'}>Rules</a>
 		{#if room}
 			<button type="button" class="quiet" title="Something behaved unexpectedly? Tell the keeper." onclick={() => (reporting = true)}>Report</button>
@@ -182,7 +182,7 @@
 {/if}
 
 <footer class="colophon">
-	<p>__NAME__. <a href="/rules">Read the full rules</a>. A rule read wrong or a bug found: <a href="mailto:eric@ericwagoner.com">send word</a>.</p>
+	<p>__NAME__. <a href={room ? `/rules?room=${roomId}` : '/rules'}>Read the full rules</a>. A rule read wrong or a bug found: <a href="mailto:eric@ericwagoner.com">send word</a>.</p>
 </footer>
 
 <style>

template/src/routes/rules/+page.svelte

@@ -6,6 +6,7 @@
 
 	/** Opened from a table, the page offers the way back to it. */
 	const room = $derived((page.url.searchParams.get('room') ?? '').toUpperCase());
+	const withRoom = $derived((path: string) => (room ? `${path}?room=${room}` : path));
 </script>
 
 <svelte:head>
@@ -14,7 +15,7 @@
 
 <main class="rules">
 	<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="/guide">How to play</a>
+		{#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>
 		<h1>The rules</h1>
 		<p class="lede">One paragraph on where these rules come from and which edition or text this page follows.</p>
 	</header>