waving-hands/src/routes/guide/+page.svelte

<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 chooses a gesture for each hand, and all of them are shown at once. The right run of gestures on one hand is a spell. This guide goes through the screen from the hall to your first duel.</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">Sealing the turn</a>
			<a href="#rail">Health, creatures and the sheet</a>
			<a href="#phone">On a phone</a>
			<a href="#gallery">The Peanut Gallery and table talk</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, and 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. The host may seat a bot in any empty chair or send one away, and begins the duel when the company suits them, with anywhere from two wizards to twelve. Even a full table waits for the host. Once the duel begins, 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. When the others move, their turns appear without a reload. The <em>room</em> button at the top copies the invite link for anyone who arrives late and wants 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>The ledger is the game as Bartle drew it on paper. Each row is a turn, each wizard has two columns, and each letter is one hand's gesture. <strong>F</strong> is wriggled fingers, <strong>P</strong> a proffered palm, <strong>S</strong> a snap, <strong>W</strong> a wave, <strong>D</strong> a pointed digit and <strong>C</strong> a clap. A dagger is a stab, and a dash is 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, and your rivals' show as <strong>?</strong> until every hand is shown. A question mark in an older row is a gesture you were not allowed to see, because you were blind or they were invisible. With many wizards the ledger runs sideways. The turn number and your own two columns stay put while you slide across to the rest, and the row of names above the ledger jumps to any wizard. Pressing a warning or choosing a target jumps there too. Each wizard has one colour, used in the ledger, the warnings and the list of wizards alike.</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, or type them. The first letter you type goes to your left hand and the second to your right. K is a stab and a dash rests the hand. Backspace takes the last letter back, and Enter seals the turn. Your two letters wait beside the button in a row that stays in view however far you scroll.</p>
		<p>Under each hand is a list of the spells that hand is part of the way through. <em>D → F-W, Cure light wounds</em> means the digit you made last turn starts that spell, and F then W would finish it. Press a line to make its next gesture. The diamond pins a spell to the top of the list while you work toward it.</p>
		<p>When a gesture finishes a spell, <em>Finishes</em> shows which spell, and <em>at</em> shows the likeliest target. You can change either. A gesture can belong to more than one spell as 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 can finish only one spell, and you will be warned if 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 you are warned before you commit to 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 your hands is a list of what your rivals could cast soon, read from their gestures so far. <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>Answering these warnings is most of the skill. A shield, a single palm, stops missiles, creatures and knives this turn, but not wound spells, lightning or fire. A counter-spell on yourself, W-W-S or W-P-P, stops every other spell cast at you this turn and shields you as well. Only finger of death and dispel magic get past it. Finger of death is stopped only by dispel magic, so the better answer is to break its run with an anti-spell before it ends.</p>
	</section>

	<section id="reveal">
		<h2>Sealing the turn</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>Seal the turn</strong> commits your two gestures. Nobody sees them until every wizard has sealed theirs, and then all the hands are shown at once. Against the bot this happens straight away. At a table it happens when the last wizard moves, and until then your button reads <em>Waiting</em>. Everything in a turn 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 your hands sums up the turn. It gives each wizard's health and the events worth knowing, and the first time a rule comes up it adds a line explaining it. The chronicle at the side keeps the whole story, turn by turn.</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 column at the side shows every wizard's fifteen marks of health, the enchantments on them and for how long, and the creatures that serve them. At a table of more than three, the other wizards get one line each, showing their health, anything important about their condition, and whether they have moved yet. Press a line to see the rest. 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 button that seals the turn." />
		</figure>
		<p>On a phone everything sits in one column. A bar at the bottom of the screen keeps the wizards' health, your two gestures and the button that seals the turn within reach. After each turn the screen scrolls back to the ledger's last rows and the result. Lists are shorter, and <em>More spells</em> opens the rest.</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 duel has begun. Anyone who opens it without a seat takes a place in the Peanut Gallery. They see the ledger, the result of each turn and the chronicle, and the table can see how many are watching. The gallery is shown only what every wizard at the table could see. A gesture hidden from any one wizard is a question mark to the whole gallery, and the turn being written shows nothing at all.</p>
		<p><em>Table talk</em>, in the rail, is for the wizards seated. A line goes to everyone at the table and in the gallery, and it is kept with the duel. When you come back, the hall says how many lines were said while you were away. The gallery only listens unless the host lets it talk. Then a watcher signs a name, and their lines read <em>Name (gallery)</em>.</p>
		<p>Before a duel begins, any seated wizard may <strong>challenge the keeper</strong>, who looks after this site. A seat is held under the keeper's name and the keeper's phone rings. The note beside the button gives the hour where the keeper lives, so you know whether to wait or come back later.</p>
		<p>When a duel is over, anyone at the table may call for <strong>a rematch</strong>. That opens a new table of the same size with the same bots, and holds a seat for everyone who played. <strong>Transfer seat</strong> at the top of the page gives you four words that move your seat to another device. They work for ten minutes, and you enter them in the hall on the other device.</p>
	</section>

	<section id="first">
		<h2>A first duel</h2>
		<p>Open with a wave on each hand. From W-W either hand can go on to a counter-spell (W-W-S), protection from evil (W-W-P) or resist heat (W-W-F-P). On the first turn only a knife can hurt you. Then watch the warnings. When a missile is one gesture away, a palm on one hand stops it. When a fireball is one gesture away, a palm will not help, but a counter-spell on yourself or resist heat will.</p>
		<p>Next, choose a spell from the sheet and pin it to one hand, and keep the other hand free for answering. Cause light wounds takes three gestures, a fireball five, and summoning a goblin three. A goblin left alone strikes every turn, so in five turns it does a fireball's damage. Read your rival's ledger every turn, because they are reading yours, and both of you can feint.</p>
		<p>The full rules are on the <a href="/rules">rules page</a>, with Bartle's text. 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>
	</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>