hnefatafl/src/routes/guide/+page.svelte

<script lang="ts">
	// How to play: a walk through the page, from the hall to a first game.
	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 = $derived((path: string) => (room ? `${path}?room=${room}` : path));
</script>

<svelte:head>
	<title>Hnefatafl: how to play</title>
</svelte:head>

<main class="guide">
	<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">A walk through the page, from the hall to a first game. The game's own rules are on <a href={withRoom('/rules')}>the rules page</a>.</p>
		<nav>
			<a href="#hall">The hall</a> · <a href="#table">The table</a> · <a href="#board">The board</a> · <a href="#capture">A capture</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>
			Give your name and choose the rules: <em>Copenhagen</em>, the balanced modern game on the big board, or <em>Tablut</em>, the smaller and older one. Choose which side you play.
			<em>Play now against a housecarl</em> seats a housecarl opposite you and begins. <em>Open a table</em> gives you a four-letter code and a link for a friend. The tables this browser
			holds a seat at are listed below, with whose move it is.
		</p>
	</section>

	<section id="table">
		<h2>The table</h2>
		<p>
			Whoever opened the table is its host, and begins the game once a second player has sat or a housecarl has been seated. A friend who opens the link takes the other seat. The
			masthead's <em>Transfer seat</em> gives four words that bring your seat to another device, and when a game is over anyone at the table may call for a rematch.
		</p>
	</section>

	<section id="board">
		<h2>The board</h2>
		<p>
			Tap one of your pieces and its reachable squares light up; tap a square to move there. The last move is shaded, a square a piece was just taken from shows red until the next
			move, and the strip above the board says whose move it is and what your side is for. The record beside the board lists the moves; click one to see it on the board. The attackers are the dark pieces and move first; the defenders are the pale pieces around the crowned king on the throne. In Copenhagen the four corners are marked:
			only the king may enter them, and reaching one wins. In Tablut the board is older and plainer, and the king needs only the edge.
		</p>
	</section>

	<section id="capture">
		<h2>How a capture works</h2>
		<figure class="capture">
			<svg viewBox="0 0 90 30" aria-label="An attacker moves beside a defender that already has an attacker on its other side; the defender is taken.">
				<rect width="90" height="30" rx="2" fill="#8a5a2b" />
				{#each [0, 1, 2] as c (c)}<rect x={c * 30} y="0" width="30" height="30" fill="rgba(255,240,210,0.08)" stroke="rgba(30,16,6,0.5)" stroke-width="0.6" />{/each}
				<circle cx="15" cy="15" r="9" fill="#2a2320" stroke="#0d0a08" stroke-width="1.2" />
				<circle cx="45" cy="15" r="9" fill="#ece4d0" stroke="#b9ab8b" stroke-width="1.2" opacity="0.5" />
				<circle cx="75" cy="15" r="9" fill="#2a2320" stroke="#0d0a08" stroke-width="1.2" />
				<path d="M62 4 h11 l-3 -3 m3 3 l-3 3" fill="none" stroke="#9cd0dc" stroke-width="1.4" />
			</svg>
			<figcaption>The right-hand attacker arrives; the pale defender is caught between two enemies and is taken. Only the mover captures: a piece may step into that gap safely on its own turn.</figcaption>
		</figure>
	</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.
			<em>Table talk</em> is for the players seated, unless the host lets the gallery talk; then a watcher signs a name and their lines are marked as the gallery's. Nothing in
			hnefatafl is hidden, so the gallery sees the whole board.
		</p>
	</section>

	<section id="first">
		<h2>A first game</h2>
		<p>
			Play the defenders first. The king wants an open row or column to a corner; the attackers want to close every road while they close in. Pieces are taken by being sandwiched,
			never by moving between two enemies yourself, so a piece can step into a gap safely. Keep the king off the edge in Copenhagen until a corner is in reach, and remember that the
			attackers cannot take him against the edge: a king on the edge with his pieces around him is a fort.
		</p>
	</section>

	<p class="word">Something on this page behave unexpectedly? The <em>Report</em> button in a room's masthead tells the keeper, pinned to the moment.</p>
</main>

<style>
	.guide {
		max-width: 46rem;
		margin: 0 auto;
		padding: 1.5rem var(--gutter) 4rem;
	}

	.back {
		color: var(--bone-dim);
	}

	h1 {
		font-size: 2.2rem;
		font-weight: 300;
		margin: 0.6rem 0 0.4rem;
	}

	.lede {
		color: var(--bone-dim);
	}

	nav {
		margin-top: 0.8rem;
		font-size: 0.95rem;
	}

	section {
		margin-top: 1.6rem;
	}

	h2 {
		font-size: 1.3rem;
		margin-bottom: 0.4rem;
	}

	.capture {
		margin: 0.6rem 0 0;
	}

	.capture svg {
		width: 12rem;
		display: block;
		border-radius: 3px;
	}

	.capture figcaption {
		margin-top: 0.5rem;
		font-size: 0.9rem;
		color: var(--bone-dim);
		max-width: 38em;
	}

	.word {
		margin-top: 2rem;
		color: var(--bone-dim);
	}
</style>