The table, the hall, the rules and the guide: three boards drawn in Gygax's colours, a drake to play, the article in full, and the pages that walk a player in

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

src/routes/guide/+page.svelte

@@ -1,8 +1,6 @@
 <script lang="ts">
-	// How to play: a walk through the page in the game's own voice, one
-	// 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.
+	// How to play: a walk from the hall to a first game, in the game's own
+	// voice, with a figure for each part of the page.
 	import { page } from '$app/state';
 
 	/** Opened from a table, the page offers the way back to it and carries it to its cross-links. */
@@ -18,11 +16,12 @@
 	<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={withRoom('/rules')}>The rules</a>
 		<h1>How to play</h1>
-		<p class="lede">Two sentences that set the scene: who the player is, and what they are trying to do.</p>
+		<p class="lede">You command Gold or Scarlet, 42 pieces spread across the air, the land and the underworld, and you are after the other King. If you know chess you know most of it already. The rest is learning which pieces can climb and which can dig.</p>
 		<nav aria-label="Sections">
 			<a href="#hall">The hall</a>
 			<a href="#table">The table</a>
-			<a href="#board">The board</a>
+			<a href="#boards">The boards</a>
+			<a href="#moving">Making a move</a>
 			<a href="#gallery">The Peanut Gallery and table talk</a>
 			<a href="#first">A first game</a>
 		</nav>
@@ -30,29 +29,43 @@
 
 	<section id="hall">
 		<h2>The hall</h2>
-		<p>Write your name and choose your company. <strong>Play now against the bot</strong> seats you across from the bot and begins. <strong>Open a table</strong> lays a table and hands you a link and a four-letter code to send. <strong>Join one</strong> takes a code someone sent you. Beneath, <em>your games</em> lists every table this browser holds a seat at, and whose move it is.</p>
+		<figure><img src="/guide/hall.png" alt="The hall: a name field, the two table choices, the button to play the drake, and the opening position drawn beside them" loading="lazy" /></figure>
+		<p>Write your name and choose your company. <strong>Play now against a drake</strong> seats you across from the house player and begins at once. <strong>Open a table</strong> lays a table and hands you a link and a four-letter code to send to a friend. <strong>Join one</strong> takes a code someone sent you.</p>
+		<p>Two choices sit above the buttons. <em>You play</em> picks your side, and Gold moves first. <em>The Sylphs</em> picks where the six Sylphs start. As Gygax printed it, Gold's Dragon can take an undefended Sylph on the very first move, which a reader of the Chess Variant Pages took for a misprint. The shifted setup moves the Sylphs one file over, out of reach. Beneath the buttons, <em>your games</em> lists every table this browser holds a seat at and whose move it is.</p>
 	</section>
 
 	<section id="table">
 		<h2>The table</h2>
-		<p>A table fills as players open the link. Whoever laid it is the host. The host may seat a bot in any empty chair or send one away, and they begin the game when the company suits them, however full the table. Once begun, the seats are closed.</p>
+		<figure><img src="/guide/table.png" alt="A table laid: the room code, the link to send, two seats, and the Begin button" loading="lazy" /></figure>
+		<p>A table seats two. Whoever laid it is the host. The host may seat a drake in the empty chair or send one away, and begins the game when the company is right. Once begun, the seats are closed, and anyone else who opens the link watches from the Peanut Gallery.</p>
 	</section>
 
-	<section id="board">
-		<h2>The board</h2>
-		<p>What the player sees during play, section by section, with a figure for each.</p>
+	<section id="boards">
+		<h2>The boards</h2>
+		<figure><img src="/guide/boards.png" alt="The three boards one above the other in the opening position, the air in blue and white, the land in green and amber, the underworld in red and brown" loading="lazy" /></figure>
+		<p>The three boards stand one above the other, the air at the top, the land in the middle and the underworld at the bottom, in the colours Gygax suggested. Your side is nearest you on every board. Each piece is a disc bearing the initial Gygax gave it, with Dr for the Dragon so it is not mistaken for a Dwarf. The square names along the edges are his too, and you can hide them under <em>preferences</em>.</p>
+		<p>The strip above the boards says whose move it is and warns when a King is in check. The record beside the boards lists the moves played in Gygax's notation. Click one to see it on the boards, and click again, or make your move, to come back to now.</p>
+	</section>
+
+	<section id="moving">
+		<h2>Making a move</h2>
+		<figure><img src="/guide/move.png" alt="A Gold Dragon selected in the air, with dots on every square it can reach and a ring around the Scarlet Sylph it can take" loading="lazy" /></figure>
+		<p>Tap one of your pieces and every square it can reach lights up, on its own board and on any board it can climb or drop to. A dot marks an empty square and a ring marks a piece it can take. Tap the square and the move is made. Tap the piece again, or anywhere else, to put it down. With a keyboard, the arrows walk a board, Page Up and Page Down change boards, Enter picks up and sets down, and Escape cancels.</p>
+		<p>A move that would leave your own King in check is never offered. If you would rather be asked before a move goes, turn on <em>confirm a move before it is sent</em> in preferences.</p>
+		<p>A piece under a Basilisk's gaze is drawn pale with a frost ring around it. It is frozen and can do nothing until the Basilisk moves or is taken.</p>
 	</section>
 
 	<section id="gallery">
 		<h2>The Peanut Gallery and table talk</h2>
-		<p>A room's link is an invitation to sit while the table is laid and to watch once the game has begun. Anyone who opens it without a seat takes a place in the Peanut Gallery, shown only what every player at the table could see. <em>Table talk</em> is for the players seated, unless the host lets the gallery talk. Then a watcher gives a name, and their lines are marked as the gallery's. A line goes to everyone at the table and everyone in the gallery, and is kept with the game.</p>
-		<p>A seat can follow you to another device. <em>Transfer seat</em> in the masthead gives four words, good for ten minutes, and the hall on the other device claims them. If your browser loses the seat, the host's <em>Seats</em> makes those words for you. If a player cannot go on, the host can give their seat to a bot there, and the same words bring them back to it. When a game ends, anyone at the table may call for a rematch, which opens a new table for the same company and holds their seats until they are back. While a table is laid, you may challenge the keeper of this site to a seat; the note beside the button gives the hour where they live.</p>
+		<p>A room's link is an invitation to sit while the table is laid and to watch once the game has begun. Anyone who opens it without a seat takes a place in the Peanut Gallery and sees the whole game, since nothing in Wyrm is hidden. <em>Table talk</em> is for the two players, unless the host lets the gallery talk. Then a watcher gives a name, and their lines are marked as the gallery's. Every line is kept with the game.</p>
+		<p>A seat can follow you to another device. <em>Transfer seat</em> in the masthead gives four words, good for ten minutes, and the hall on the other device claims them. If your browser loses the seat, the host's <em>Seats</em> makes those words for you. If a player cannot go on, the host can give their seat to a drake there, and the same words bring them back to it. When a game ends, either player may call for a rematch, which opens a new table for the same company and holds the seats until both are back. While a table is laid, you may challenge the keeper of this site to a seat, and the note beside the button gives the hour where they live.</p>
 	</section>
 
 	<section id="first">
 		<h2>A first game</h2>
-		<p>The advice you would give a friend across the table for their first few turns.</p>
-		<p>The full rules are on the <a href="/rules">rules page</a>. If a rule here reads wrong to you, or something misbehaves, <a href="mailto:eric@ericwagoner.com">send word</a>. The hall's <em>about this game</em> lists the other ways to reach the keeper.</p>
+		<p>Play a drake first. It plays a fair game and never minds how long you take. Begin as you would at chess, with Warriors stepping forward and the knights of the land, the Unicorns and Heroes, coming out behind them. Gygax's own advice is to hold the Mage and the Paladin back until the lesser pieces are developed, and to keep your Dragon home. It starts directly above your King for a reason. A Dragon that flies off to raid leaves the King open to the other Dragon, which strikes the land from the air without ever coming down.</p>
+		<p>Watch the Basilisks. Anything you leave on the land directly above an enemy Basilisk is frozen on the spot, and a frozen piece may as well be off the board. The Cleric is stronger than it looks, since it is the only piece that plays the same on all three boards, and the Dwarves, if you do not hurry them forward, make good guards late in the game.</p>
+		<p>The full rules, piece by piece, are on the <a href={withRoom('/rules')}>rules page</a>, with Gygax's article beneath them. If a rule here reads wrong to you, or something misbehaves, <a href="mailto:eric@ericwagoner.com">send word</a>, or use <em>Report</em> in the masthead at the table, which pins what you saw to the move it happened on. The hall's <em>about this game</em> lists the other ways to reach the keeper.</p>
 	</section>
 </main>
 
@@ -68,4 +81,16 @@
 	p + p {
 		margin-top: 0.7rem;
 	}
+
+	figure {
+		margin: 0 0 0.9rem;
+	}
+
+	figure img {
+		display: block;
+		width: 100%;
+		height: auto;
+		border: 1px solid var(--rule-strong);
+		border-radius: 6px;
+	}
 </style>