72 lines
3.9 KiB
Svelte
72 lines
3.9 KiB
Svelte
<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.
|
|
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 = (path: string) => (room ? `${path}?room=${room}` : path);
|
|
</script>
|
|
|
|
<svelte:head>
|
|
<title>Wyrm: how to play</title>
|
|
</svelte:head>
|
|
|
|
<main class="reading">
|
|
<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>
|
|
<nav aria-label="Sections">
|
|
<a href="#hall">The hall</a>
|
|
<a href="#table">The table</a>
|
|
<a href="#board">The board</a>
|
|
<a href="#gallery">The Peanut Gallery and table talk</a>
|
|
<a href="#first">A first game</a>
|
|
</nav>
|
|
</header>
|
|
|
|
<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>
|
|
</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>
|
|
</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>
|
|
|
|
<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>
|
|
</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>
|
|
</section>
|
|
</main>
|
|
|
|
<style>
|
|
nav {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 0.3rem 1rem;
|
|
margin: 1rem 0 0.5rem;
|
|
font-size: 0.95rem;
|
|
}
|
|
|
|
p + p {
|
|
margin-top: 0.7rem;
|
|
}
|
|
</style>
|