eric/hnefatafl
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Coordinates on the board, moves in the record shown on the board, a status strip above it with the capture in words, notes under the variant selector and a still that follows it, keyboard play, and a way back to the game from the rules

Browse Source 
From a tester's review.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Jm2auWk6RP71CjaAb4FMoG
This commit is contained in:
Eric Wagoner
2026-09-23 18:48:53 -04:00
co-authored by Claude Fable 5.1
parent bac7182915
commit 5db89edbc1
7 changed files with 329 additions and 107 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/routes/guide/+page.svelte
+35 -3
View File
@@ -12,7 +12,7 @@
<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="/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="#gallery">The Peanut Gallery and table talk</a> ·
<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>
@@ -37,12 +37,27 @@
<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, and a square a piece was just taken from shows red for a
moment. 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:
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>
@@ -99,6 +114,23 @@
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);