How to play: a guide to the page, with screenshots

A walk through the hall, the table, the ledger, the hands, the warnings,
the reveal, the rail and the phone layout, in the game's voice, with a
figure for each. Linked from the hall, both board pages and the rules.

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

README.md

@@ -22,7 +22,7 @@ people has a four-letter room code; `/join/CODE` is both the invite link and the
 played. Turns are taken whenever each player has a moment, and the page refreshes itself when
 the other wizard moves. An empty seat can be given to the bot. Each turn, choose a gesture per
 hand, pick which completed spell (if any) each hand casts and at whom, and reveal. The rules
-are at `/rules`.
+are at `/rules`, and a walk through the page with screenshots at `/guide`.
 
 Around the two hands:
 
@@ -62,6 +62,7 @@ two to four wizards; the interface is built for two.
 - `server/` the duel server: rooms, ledgers, the HTTP and WebSocket front door
 - `src/lib/components/` the ledger, hand pickers, status panels, result strip, chronicle, spell sheet, and the sticky bar for phones
 - `src/routes/rules/` the rules page, rendered from the spell book and the transcription in `docs/`
+- `src/routes/guide/` how to play, with the figures in `static/guide/`
 
 ## Simplifications
 

src/lib/components/Hall.svelte

@@ -111,7 +111,7 @@
 		<h1>Waving Hands</h1>
 		<p class="pitch">Two wizards. Two hands each. The right run of gestures is a spell.</p>
 		<p class="tag">Richard Bartle's 1977 pencil-and-paper duel, free in your browser. Each turn every wizard chooses a gesture per hand and all reveal together; a Fireball is F-S-S-D-D on one hand, a Shield is a single palm. Play the bot, or open a table for up to a dozen wizards and play by turns.</p>
-		<a class="about-link" href="#about" onclick={() => (aboutOpen = true)}>about this game — a labor of love</a>
+		<p class="links"><a href="/guide">how to play</a> · <a href="/rules">the rules</a> · <a class="about-link" href="#about" onclick={() => (aboutOpen = true)}>about this game — a labor of love</a></p>
 	</div>
 
 	<div class="lid-play">
@@ -238,12 +238,18 @@
 		font-size: 0.95rem;
 	}
 
-	.about-link {
-		display: inline-block;
+	.links {
+		font-size: 0.95rem;
+		color: var(--bone-faint);
+	}
+
+	.links a {
 		color: var(--frost);
+	}
+
+	.about-link {
 		font-style: italic;
 		text-decoration: underline dotted;
-		font-size: 0.95rem;
 	}
 
 	.lid-play {

src/routes/guide/+page.svelte

@@ -0,0 +1,189 @@
+<svelte:head>
+	<title>Waving Hands: how to play</title>
+</svelte:head>
+
+<main class="guide">
+	<header>
+		<a class="back" href="/">Back to the hall</a>
+		<h1>How to play</h1>
+		<p class="lede">You are a wizard with two hands and a rival across the table. Every turn each of you writes down a gesture for each hand, and all are revealed at once. The right run of gestures on one hand is a spell. This page walks the room.</p>
+		<nav aria-label="Sections">
+			<a href="#hall">The hall</a>
+			<a href="#table">The table</a>
+			<a href="#ledger">The ledger</a>
+			<a href="#hands">Your hands</a>
+			<a href="#threats">What they may do</a>
+			<a href="#reveal">The reveal</a>
+			<a href="#rail">Health, creatures and the sheet</a>
+			<a href="#phone">On a phone</a>
+			<a href="#first">A first duel</a>
+		</nav>
+	</header>
+
+	<section id="hall">
+		<h2>The hall</h2>
+		<figure>
+			<img src="/guide/hall.png" alt="The hall: the title, a field for your name, a button to play the bot, and buttons to open a table or join one by code." />
+		</figure>
+		<p>Write your name and choose your company. <strong>Play now against the bot</strong> seats you across from a construct that reads your gestures as you read its. <strong>Open a table</strong> lays a table for up to a dozen wizards and hands you a link and a four-letter code to send. <strong>Join one</strong> takes a code someone sent you.</p>
+		<p>Beneath, <em>your duels</em> lists every table this browser holds a seat at, and whose move it is. A duel waits for you as long as you like; nothing is lost by closing the page.</p>
+	</section>
+
+	<section id="table">
+		<h2>The table</h2>
+		<figure>
+			<img src="/guide/table.png" alt="A table being laid: the invite link, a roster of seated wizards, an empty-seat count, and the host's button to begin." />
+		</figure>
+		<p>A table fills as wizards open the link. Whoever laid it is the host: they may seat a bot in any empty chair and they begin the duel when the company suits them, from two wizards to twelve. Once begun, the seats are closed and the ledger opens.</p>
+		<p>A duel between people is played by turns, whenever each of you has a moment. The page keeps watch and fills itself in when the others have moved; the masthead's <em>room</em> button copies the invite for latecomers who wish to watch.</p>
+	</section>
+
+	<section id="ledger">
+		<h2>The ledger</h2>
+		<figure>
+			<img src="/guide/ledger.png" alt="The ledger: a table with a turn number down the left, two letter columns for each wizard, and spells named in ember beneath the gesture that finished them." />
+		</figure>
+		<p>This is the game, as Bartle drew it: one row a turn, two columns a wizard, one letter a hand. <strong>F</strong> wriggled fingers, <strong>P</strong> proffered palm, <strong>S</strong> snap, <strong>W</strong> wave, <strong>D</strong> pointed digit, <strong>C</strong> clap. A dagger is a stab; a dash, a hand that rested. A gesture written in ember finished a spell, and the spell is named beneath it.</p>
+		<p>The bottom row is the turn being written. Your letters appear as you choose them; your rivals' show as <strong>?</strong> until the reveal. A question mark in an older row means a gesture you were not allowed to see: you were blind, or they were invisible. With many wizards the ledger runs sideways; the turn and your own two columns stay pinned while you slide across to the rest.</p>
+	</section>
+
+	<section id="hands">
+		<h2>Your hands</h2>
+		<figure>
+			<img src="/guide/hands.png" alt="Two panels of gesture buttons, left hand and right, each with a list beneath of spells under way and the gesture that continues them." />
+		</figure>
+		<p>Press a gesture for each hand. Beneath each hand is what that hand is part-way through: <em>D → F-W, Cure light wounds</em> means the digit you made last turn is the first gesture of that spell, and F then W would finish it. Press a line to make its next gesture; the diamond pins a spell so it stays at the top while you work toward it.</p>
+		<p>When a gesture finishes a spell, <em>Finishes</em> appears with the spell chosen and <em>at</em> naming the likeliest subject. Change either. A gesture can belong to more than one spell so long as each run is unbroken, which is how F-F-F followed by S-S-D-D casts a Paralysis and then a Fireball; but one gesture may finish only one spell, and the page will tell you when two of your choices would share one.</p>
+		<p>Some hands are not yours to move. A hand paralysed or charmed by a rival, or a turn under amnesia, shows its forced gesture locked. Both palms at once is surrender, and the page warns before you do it.</p>
+	</section>
+
+	<section id="threats">
+		<h2>What they may do</h2>
+		<figure>
+			<img src="/guide/threats.png" alt="Warnings above the hands: a rival's hand, the gestures already made, an arrow, and the gesture that would finish a hostile spell." />
+		</figure>
+		<p>Above the hands the page reads your rivals' ledgers for you. <em>Lucan, left: S → D, Missile</em> means Lucan's left hand snapped last turn, and one pointed digit would send a missile this turn. <em>Two gestures away</em> lists what could land the turn after. Press a warning to light those gestures in the ledger.</p>
+		<p>This is the whole art. A shield, a single palm, stops missiles, creatures and knives this turn. A counter-spell on yourself, W-W-S or W-P-P, stops every other spell aimed at you this turn and shields you besides. Neither stops a wound spell or a lightning bolt, and nothing but dispel magic stops the finger of death; against those, break their run with an anti-spell before it ends.</p>
+	</section>
+
+	<section id="reveal">
+		<h2>The reveal</h2>
+		<figure>
+			<img src="/guide/result.png" alt="The result strip: each wizard's health before and after the turn, then the events of the turn in a line each." />
+		</figure>
+		<p><strong>Reveal gestures</strong> commits your turn. Against the bot the turn resolves at once; at a table it resolves when the last wizard has moved, and until then the button reads <em>Waiting</em>. Everything happens together: a shield made this turn stops a missile made this turn, a creature summoned this turn strikes this turn, and a cure lands in the same breath as the wound.</p>
+		<p>The strip above the hands says what changed: each wizard's health, then the events worth knowing, and the first time a rule surprises you, a line explaining it. The chronicle in the rail keeps the whole story.</p>
+	</section>
+
+	<section id="rail">
+		<h2>Health, creatures and the sheet</h2>
+		<div class="pair">
+			<figure>
+				<img src="/guide/rail.png" alt="The rail: each wizard's name, fifteen health marks, their enchantments and creatures; then the spell sheet and the chronicle." />
+			</figure>
+			<figure>
+				<img src="/guide/sheet.png" alt="The spell sheet, open at Fireball: its gestures, what it does, and buttons to plan it with the left or right hand." />
+			</figure>
+		</div>
+		<p>The rail shows every wizard: fifteen marks of health, the enchantments on them and for how long, and the creatures that serve them with hits left and damage dealt. Your own creatures take orders beneath your hands each turn and keep attacking what they last attacked until told otherwise.</p>
+		<p>The spell sheet lists all forty spells. Gestures you have already made light up along each sequence. Open a spell to read it, then <strong>Plan with left hand</strong> or <strong>right hand</strong> to pin it and make its next gesture, which is how a duel begins when nothing is yet under way.</p>
+	</section>
+
+	<section id="phone">
+		<h2>On a phone</h2>
+		<figure class="narrow">
+			<img src="/guide/phone.png" alt="The duel on a phone: the ledger, the result, the hands, and a bar fixed at the foot with every wizard's health, the chosen gestures and the reveal button." />
+		</figure>
+		<p>Everything is here, in one column. The bar at the foot keeps every wizard's health, your two chosen gestures and the reveal button in reach; after a reveal the page brings the ledger's last rows and the result into view. Lists are shorter, and <em>More spells</em> opens the rest.</p>
+	</section>
+
+	<section id="first">
+		<h2>A first duel</h2>
+		<p>Open with a wave on each hand. From W-W you may turn either hand into a counter-spell (W-W-S), a protection from evil (W-W-P) or resist heat (W-W-F-P), and nobody can hurt you on the first turn. Watch the warnings: when a missile is one gesture away, a palm costs you one hand for one turn; when a fireball is one gesture away, only a counter-spell, a resistance, or a counter of your own will do.</p>
+		<p>Then choose a spell from the sheet and pin it to a hand, and keep the other hand for answering. Cause light wounds is three gestures, a fireball five, and summoning a goblin three; a goblin that lives for four turns has done a fireball's work. Read the rival's ledger every turn as they read yours. Both of you are bluffing, and the whole page is the paper.</p>
+		<p>The full rules are on the <a href="/rules">rules page</a>, with Bartle's text.</p>
+	</section>
+</main>
+
+<style>
+	.guide {
+		max-width: 46rem;
+		margin: 0 auto;
+		padding: 1.5rem var(--gutter) 4rem;
+	}
+
+	a {
+		color: var(--frost);
+	}
+
+	.back {
+		font-size: 0.95rem;
+	}
+
+	h1 {
+		font-size: 2.4rem;
+		font-weight: 300;
+		font-variation-settings: 'opsz' 144;
+		margin: 0.5rem 0 0.3rem;
+	}
+
+	.lede {
+		color: var(--bone-dim);
+		max-width: 40em;
+	}
+
+	nav {
+		display: flex;
+		flex-wrap: wrap;
+		gap: 0.3rem 1rem;
+		margin: 1rem 0 0.5rem;
+		font-size: 0.95rem;
+	}
+
+	section {
+		padding: 1.25rem 0 0.5rem;
+		border-top: 1px solid var(--rule);
+		margin-top: 1rem;
+	}
+
+	h2 {
+		font-size: 1.5rem;
+		margin-bottom: 0.7rem;
+	}
+
+	p + p {
+		margin-top: 0.7rem;
+	}
+
+	figure {
+		margin: 0 0 0.9rem;
+		background: var(--slate);
+		border: 1px solid var(--rule-strong);
+		border-radius: 6px;
+		padding: 0.5rem;
+	}
+
+	figure img {
+		display: block;
+		width: 100%;
+		height: auto;
+		border-radius: 3px;
+	}
+
+	figure.narrow {
+		max-width: 22rem;
+	}
+
+	.pair {
+		display: grid;
+		grid-template-columns: 1fr 1fr;
+		gap: 0.9rem;
+		align-items: start;
+	}
+
+	@media (max-width: 640px) {
+		.pair {
+			grid-template-columns: 1fr;
+		}
+	}
+</style>

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

@@ -100,6 +100,7 @@
 				<span class="muted">invite friends · room</span> <b>{roomId}</b>{copied ? ' · link copied' : ''}
 			</button>
 		{/if}
+		<a class="quiet" href="/guide">How to play</a>
 		<a class="quiet" href="/rules">Rules</a>
 		<a class="quiet" href="/">The hall</a>
 	</nav>

src/routes/play/+page.svelte

@@ -66,6 +66,7 @@
 		{/if}
 	</div>
 	<nav class="actions">
+		<a class="quiet" href="/guide">How to play</a>
 		<a class="quiet" href="/rules">Rules</a>
 		<button type="button" class="quiet" onclick={startNew}>New duel</button>
 		<a class="quiet" href="/">The hall</a>

src/routes/rules/+page.svelte

@@ -53,7 +53,7 @@
 
 <main class="rules">
 	<header>
-		<a class="back" href="/">Back to the duel</a>
+		<a class="back" href="/">Back to the hall</a> · <a class="back" href="/guide">How to play</a>
 		<h1>How to duel</h1>
 		<p class="lede">Waving Hands is Richard Bartle's 1977 game of two wizards trading spells made of hand gestures. This page is a working reference; the original transcription is at the end.</p>
 		<nav aria-label="Sections">