From b300c0852b4394fc25fcf9efdb40d1dab68b9554 Mon Sep 17 00:00:00 2001
From: Eric Wagoner <ewagoner@gmail.com>
Date: Sun, 27 Sep 2026 20:40:42 -0400
Subject: [PATCH] The about panel is a dialog of tabs, as Wiz-War's is, not a
 wall of text
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

"About this game — a labor of love" opens a dialog with the game, the
tally, more games and a way to send word each on a tab of its own
(About.svelte, shared through the kit), instead of one long fold at the
foot of the hall. Arrow keys walk the tabs; Escape or a click outside
closes it; a link to #about opens it.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Jm2auWk6RP71CjaAb4FMoG
---
 src/lib/components/About.svelte | 148 ++++++++++++++++++++++++++++++++
 src/lib/components/Hall.svelte  |  47 +++++-----
 2 files changed, 174 insertions(+), 21 deletions(-)
 create mode 100644 src/lib/components/About.svelte

diff --git a/src/lib/components/About.svelte b/src/lib/components/About.svelte
new file mode 100644
index 0000000..505b7ab
--- /dev/null
+++ b/src/lib/components/About.svelte
@@ -0,0 +1,148 @@
+<script lang="ts" module>
+	import type { Snippet } from 'svelte';
+
+	/** One section of the about panel: a tab and what it shows. */
+	export interface AboutTab {
+		id: string;
+		label: string;
+		body: Snippet;
+	}
+</script>
+
+<script lang="ts">
+	// The about panel: the game's story, its keeping and its company, a tab
+	// at a time rather than one long page. Opened from the hall's "about this
+	// game" link (and #about); closes with its button, a click outside it, or
+	// Escape. The tab last read is the one it reopens on.
+	import { tick } from 'svelte';
+
+	let { open = $bindable(false), tabs, title }: { open?: boolean; tabs: AboutTab[]; title: string } = $props();
+
+	let current = $state('');
+	const shown = $derived(tabs.find((t) => t.id === current) ?? tabs[0]);
+	let tabButtons: HTMLButtonElement[] = $state([]);
+
+	function onKey(e: KeyboardEvent) {
+		if (open && e.key === 'Escape') open = false;
+	}
+
+	/** Arrow keys walk the tabs, as a tab list should; Home and End go to the ends. */
+	async function onTabKey(e: KeyboardEvent, i: number) {
+		const to = e.key === 'ArrowRight' ? i + 1 : e.key === 'ArrowLeft' ? i - 1 : e.key === 'Home' ? 0 : e.key === 'End' ? tabs.length - 1 : null;
+		if (to === null) return;
+		e.preventDefault();
+		const next = (to + tabs.length) % tabs.length;
+		current = tabs[next].id;
+		await tick();
+		tabButtons[next]?.focus();
+	}
+</script>
+
+<svelte:window onkeydown={onKey} />
+
+{#if open}
+	<div class="about-scrim" role="presentation" onclick={(ev) => ev.target === ev.currentTarget && (open = false)}>
+		<div class="panel" role="dialog" aria-modal="true" aria-labelledby="about-title">
+			<header>
+				<h2 id="about-title">{title}</h2>
+				<button type="button" class="close" aria-label="Close" onclick={() => (open = false)}>×</button>
+			</header>
+			<div class="tabs" role="tablist" aria-label="About this game">
+				{#each tabs as t, i (t.id)}
+					<button
+						type="button"
+						role="tab"
+						id="about-tab-{t.id}"
+						aria-controls="about-panel"
+						aria-selected={shown.id === t.id}
+						tabindex={shown.id === t.id ? 0 : -1}
+						class:on={shown.id === t.id}
+						bind:this={tabButtons[i]}
+						onclick={() => (current = t.id)}
+						onkeydown={(e) => onTabKey(e, i)}>{t.label}</button
+					>
+				{/each}
+			</div>
+			<div class="body" id="about-panel" role="tabpanel" aria-labelledby="about-tab-{shown.id}" tabindex="0">
+				{@render shown.body()}
+			</div>
+		</div>
+	</div>
+{/if}
+
+<style>
+	/* Its own backdrop: not every game has another dialog to share one with. */
+	.about-scrim {
+		position: fixed;
+		inset: 0;
+		z-index: 20;
+		background: rgba(0, 0, 0, 0.55);
+		display: grid;
+		place-items: center;
+		padding: 16px;
+	}
+	.panel {
+		width: min(100%, 44rem);
+		max-height: 100%;
+		display: flex;
+		flex-direction: column;
+		background: var(--slate);
+		border: 1px solid var(--rule-strong);
+		border-radius: 6px;
+		padding: 1rem 1.4rem 1.2rem;
+	}
+	header {
+		display: flex;
+		align-items: baseline;
+		justify-content: space-between;
+		gap: 1rem;
+	}
+	h2 {
+		font-size: 1.3rem;
+		margin: 0 0 0.6rem;
+	}
+	.close {
+		background: none;
+		border: none;
+		color: inherit;
+		font-size: 1.5rem;
+		line-height: 1;
+		cursor: pointer;
+		padding: 0.2rem 0.4rem;
+	}
+	.tabs {
+		display: flex;
+		flex-wrap: wrap;
+		gap: 0.2rem 0.4rem;
+		border-bottom: 1px solid var(--rule-strong);
+		margin-bottom: 0.8rem;
+	}
+	.tabs button {
+		background: none;
+		border: none;
+		border-bottom: 3px solid transparent;
+		color: inherit;
+		opacity: 0.75;
+		font: inherit;
+		padding: 0.35rem 0.5rem 0.4rem;
+		cursor: pointer;
+	}
+	.tabs button.on {
+		opacity: 1;
+		border-bottom-color: currentColor;
+	}
+	.body {
+		overflow: auto;
+		min-height: 12rem;
+	}
+	.body :global(p + p) {
+		margin-top: 0.7rem;
+	}
+	.body :global(h3) {
+		font-size: 1.05rem;
+		margin: 1rem 0 0.4rem;
+	}
+	.body :global(h3:first-child) {
+		margin-top: 0;
+	}
+</style>
diff --git a/src/lib/components/Hall.svelte b/src/lib/components/Hall.svelte
index 53452bd..d9fa88c 100644
--- a/src/lib/components/Hall.svelte
+++ b/src/lib/components/Hall.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import About from './About.svelte';
 	import { goto } from '$app/navigation';
 	import { loadFamily, type FamilyGame } from '$lib/family';
 	import { allSeats, api, doubtSeat, forgetSeat, rememberSeat, ServerError, trustSeat, type Report, type Tally } from '$lib/game/client';
@@ -13,6 +14,9 @@
 	let seats = $state(allSeats());
 	let games = $state<Record<string, RoomView | null>>({});
 	let aboutOpen = $state(false);
+	$effect(() => {
+		if (location.hash === '#about') aboutOpen = true;
+	});
 	/** The ledgers' tally, fetched when the about panel opens. */
 	let tally = $state<Tally | null>(null);
 	$effect(() => {
@@ -292,16 +296,18 @@
 		</div>
 	{/if}
 
-	<details class="about" id="about" bind:open={aboutOpen}>
-		<summary>about this game</summary>
+	<!-- 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>Waving Hands is Richard Bartle's game from 1977, played with pencil, paper and two hands. It was later known as Spellbinder and Spellcaster, and Andrew Plotkin's <em>Spellcast</em> brought it to university X terminals in 1993, which is where the maker of this page first met it.</p>
 			<p>This version keeps the game as written: all forty spells, the same simultaneous resolution, the same ledger of letters. The rules text it follows is the fanzine transcription, kept in full on the <a href="/rules">rules page</a>. The bot reads your gestures as you would read its; the hand silhouettes on the buttons are adapted from Plotkin's bitmaps, with his notice retained.</p>
 			<p>It is free and keeps no accounts. A duel against the bot lives in your own browser. A duel between people lives on a small server as an append-only ledger of moves, so it can be replayed from its first gesture, and each wizard is shown only what the rules let them see.</p>
-			<h3>Send word</h3>
-			<p>A rule read wrong, a bug, a duel you would like to tell of: write to <a href="mailto:eric@ericwagoner.com">eric@ericwagoner.com</a>, <a href="https://bsky.app/profile/kestrelsnest.social" target="_blank" rel="noreferrer">@kestrelsnest.social</a> on Bluesky, or <a href="https://toots.kestrelsnest.social/@eric" target="_blank" rel="noreferrer">@eric@toots.kestrelsnest.social</a> on Mastodon. The keeper of this hall roosts at <a href="https://kestrelsnest.social" target="_blank" rel="noreferrer">kestrelsnest.social</a>.</p>
+		</div>
+	{/snippet}
+	{#snippet aboutTally()}
+		<div class="about-body">
 			{#if tally}
-				<h3>The tally</h3>
+				
 				<dl class="tally">
 					<dt>{tally.gamesFinished}</dt><dd>{tally.gamesFinished === 1 ? 'duel' : 'duels'} fought to a finish, of {tally.gamesBegun} begun at {tally.tablesOpened} {tally.tablesOpened === 1 ? 'table' : 'tables'}</dd>
 					<dt>{tally.namesSeated}</dt><dd>{tally.namesSeated === 1 ? 'name has' : 'names have'} taken a seat</dd>
@@ -316,8 +322,13 @@
 					{#if tally.firstGameAt}The first duel began {new Date(tally.firstGameAt).toLocaleDateString(undefined, { year: 'numeric', month: 'long', day: 'numeric' })}.{/if}
 					Names are counted, not people: one wizard under two names is two here. Table time counts only the minutes between reveals, so a duel left open overnight adds nothing for the night.
 				</p>
+			{:else}
+				<p class="muted">Counting…</p>
 			{/if}
-			{#if family.length}
+		</div>
+	{/snippet}
+	{#snippet aboutFamily()}
+		<div class="about-body">{#if family.length}
 				<h3>More games in {#if hall}<a href={hall}>Kestrel's Hall</a>{:else}Kestrel's Hall{/if}</h3>
 				<ul class="family">
 					{#each family as g (g.slug)}
@@ -331,7 +342,13 @@
 			</p>
 			<p class="made">Waving Hands is Richard Bartle's, 1977. This page was made by Eric and a very enthusiastic AI, 2026.</p>
 		</div>
-	</details>
+	{/snippet}
+	{#snippet aboutWord()}
+		<div class="about-body">
+			<p>A rule read wrong, a bug, a duel you would like to tell of: write to <a href="mailto:eric@ericwagoner.com">eric@ericwagoner.com</a>, <a href="https://bsky.app/profile/kestrelsnest.social" target="_blank" rel="noreferrer">@kestrelsnest.social</a> on Bluesky, or <a href="https://toots.kestrelsnest.social/@eric" target="_blank" rel="noreferrer">@eric@toots.kestrelsnest.social</a> on Mastodon. The keeper of this hall roosts at <a href="https://kestrelsnest.social" target="_blank" rel="noreferrer">kestrelsnest.social</a>.</p>
+		</div>
+	{/snippet}
+	<About bind:open={aboutOpen} title="About Waving Hands" tabs={[{ id: 'game', label: 'The game', body: aboutGame }, { id: 'tally', label: 'The tally', body: aboutTally }, { id: 'family', label: 'More games', body: aboutFamily }, { id: 'word', label: 'Send word', body: aboutWord }]} />
 </section>
 
 <style>
@@ -344,14 +361,14 @@
 		padding: clamp(1.4rem, 3vw, 2.2rem) clamp(1.2rem, 3vw, 2.6rem) 1.8rem;
 		display: grid;
 		grid-template-columns: minmax(0, 1fr);
-		grid-template-areas: 'head' 'play' 'look' 'ledger' 'about';
+		grid-template-areas: 'head' 'play' 'look' 'ledger';
 		gap: 1.2rem 2.2rem;
 	}
 
 	@media (min-width: 901px) {
 		.lid {
 			grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
-			grid-template-areas: 'head head' 'play look' 'ledger ledger' 'about about';
+			grid-template-areas: 'head head' 'play look' 'ledger ledger';
 		}
 	}
 
@@ -661,18 +678,6 @@
 		color: var(--blood);
 	}
 
-	.about {
-		grid-area: about;
-		border-top: 1px solid var(--rule);
-		padding-top: 0.6rem;
-	}
-
-	.about summary {
-		cursor: pointer;
-		font-style: italic;
-		color: var(--frost);
-	}
-
 	.about-body h3 {
 		font-size: 1rem;
 		font-style: italic;