eric/waving-hands
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

The about panel is a dialog of tabs, as Wiz-War's is, not a wall of text

Browse Source 
"About this game — a labor of love" opens a dialog with the game, the
tally, more games and a way to send word each on a tab of its own
(About.svelte, shared through the kit), instead of one long fold at the
foot of the hall. Arrow keys walk the tabs; Escape or a click outside
closes it; a link to #about opens it.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Jm2auWk6RP71CjaAb4FMoG
This commit is contained in:
Eric Wagoner
2026-09-27 20:40:42 -04:00
co-authored by Claude Opus 5.5
parent 151d82e747
commit b300c0852b
2 changed files with 174 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/lib/components/About.svelte
+148
View File
@@ -0,0 +1,148 @@
<script lang="ts" module>
import type { Snippet } from 'svelte';
/** One section of the about panel: a tab and what it shows. */
export interface AboutTab {
id: string;
label: string;
body: Snippet;
}
</script>
<script lang="ts">
// The about panel: the game's story, its keeping and its company, a tab
// at a time rather than one long page. Opened from the hall's "about this
// game" link (and #about); closes with its button, a click outside it, or
// Escape. The tab last read is the one it reopens on.
import { tick } from 'svelte';
let { open = $bindable(false), tabs, title }: { open?: boolean; tabs: AboutTab[]; title: string } = $props();
let current = $state('');
const shown = $derived(tabs.find((t) => t.id === current) ?? tabs[0]);
let tabButtons: HTMLButtonElement[] = $state([]);
function onKey(e: KeyboardEvent) {
if (open && e.key === 'Escape') open = false;
}
/** Arrow keys walk the tabs, as a tab list should; Home and End go to the ends. */
async function onTabKey(e: KeyboardEvent, i: number) {
const to = e.key === 'ArrowRight' ? i + 1 : e.key === 'ArrowLeft' ? i - 1 : e.key === 'Home' ? 0 : e.key === 'End' ? tabs.length - 1 : null;
if (to === null) return;
e.preventDefault();
const next = (to + tabs.length) % tabs.length;
current = tabs[next].id;
await tick();
tabButtons[next]?.focus();
}
</script>
<svelte:window onkeydown={onKey} />
{#if open}
<div class="about-scrim" role="presentation" onclick={(ev) => ev.target === ev.currentTarget && (open = false)}>
<div class="panel" role="dialog" aria-modal="true" aria-labelledby="about-title">
<header>
<h2 id="about-title">{title}</h2>
<button type="button" class="close" aria-label="Close" onclick={() => (open = false)}>×</button>
</header>
<div class="tabs" role="tablist" aria-label="About this game">
{#each tabs as t, i (t.id)}
<button
type="button"
role="tab"
id="about-tab-{t.id}"
aria-controls="about-panel"
aria-selected={shown.id === t.id}
tabindex={shown.id === t.id ? 0 : -1}
class:on={shown.id === t.id}
bind:this={tabButtons[i]}
onclick={() => (current = t.id)}
onkeydown={(e) => onTabKey(e, i)}>{t.label}</button
>
{/each}
</div>
<div class="body" id="about-panel" role="tabpanel" aria-labelledby="about-tab-{shown.id}" tabindex="0">
{@render shown.body()}
</div>
</div>
</div>
{/if}
<style>
/* Its own backdrop: not every game has another dialog to share one with. */
.about-scrim {
position: fixed;
inset: 0;
z-index: 20;
background: rgba(0, 0, 0, 0.55);
display: grid;
place-items: center;
padding: 16px;
}
.panel {
width: min(100%, 44rem);
max-height: 100%;
display: flex;
flex-direction: column;
background: var(--slate);
border: 1px solid var(--rule-strong);
border-radius: 6px;
padding: 1rem 1.4rem 1.2rem;
}
header {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 1rem;
}
h2 {
font-size: 1.3rem;
margin: 0 0 0.6rem;
}
.close {
background: none;
border: none;
color: inherit;
font-size: 1.5rem;
line-height: 1;
cursor: pointer;
padding: 0.2rem 0.4rem;
}
.tabs {
display: flex;
flex-wrap: wrap;
gap: 0.2rem 0.4rem;
border-bottom: 1px solid var(--rule-strong);
margin-bottom: 0.8rem;
}
.tabs button {
background: none;
border: none;
border-bottom: 3px solid transparent;
color: inherit;
opacity: 0.75;
font: inherit;
padding: 0.35rem 0.5rem 0.4rem;
cursor: pointer;
}
.tabs button.on {
opacity: 1;
border-bottom-color: currentColor;
}
.body {
overflow: auto;
min-height: 12rem;
}
.body :global(p + p) {
margin-top: 0.7rem;
}
.body :global(h3) {
font-size: 1.05rem;
margin: 1rem 0 0.4rem;
}
.body :global(h3:first-child) {
margin-top: 0;
}
</style>
src/lib/components/Hall.svelte
+26 -21
View File
@@ -1,4 +1,5 @@
<script lang="ts">
import About from './About.svelte';
import { goto } from '$app/navigation';
import { loadFamily, type FamilyGame } from '$lib/family';
import { allSeats, api, doubtSeat, forgetSeat, rememberSeat, ServerError, trustSeat, type Report, type Tally } from '$lib/game/client';
@@ -13,6 +14,9 @@
let seats = $state(allSeats());
let games = $state<Record<string, RoomView | null>>({});
let aboutOpen = $state(false);
$effect(() => {
if (location.hash === '#about') aboutOpen = true;
});
/** The ledgers' tally, fetched when the about panel opens. */
let tally = $state<Tally | null>(null);
$effect(() => {
@@ -292,16 +296,18 @@
</div>
{/if}
<details class="about" id="about" bind:open={aboutOpen}>
<summary>about this game</summary>
<!-- The about panel, a tab at a time: its sections are written here, in the game's own words. -->
{#snippet aboutGame()}
<div class="about-body">
<p>Waving Hands is Richard Bartle's game from 1977, played with pencil, paper and two hands. It was later known as Spellbinder and Spellcaster, and Andrew Plotkin's <em>Spellcast</em> brought it to university X terminals in 1993, which is where the maker of this page first met it.</p>
<p>This version keeps the game as written: all forty spells, the same simultaneous resolution, the same ledger of letters. The rules text it follows is the fanzine transcription, kept in full on the <a href="/rules">rules page</a>. The bot reads your gestures as you would read its; the hand silhouettes on the buttons are adapted from Plotkin's bitmaps, with his notice retained.</p>
<p>It is free and keeps no accounts. A duel against the bot lives in your own browser. A duel between people lives on a small server as an append-only ledger of moves, so it can be replayed from its first gesture, and each wizard is shown only what the rules let them see.</p>
<h3>Send word</h3>
<p>A rule read wrong, a bug, a duel you would like to tell of: write to <a href="mailto:eric@ericwagoner.com">eric@ericwagoner.com</a>, <a href="https://bsky.app/profile/kestrelsnest.social" target="_blank" rel="noreferrer">@kestrelsnest.social</a> on Bluesky, or <a href="https://toots.kestrelsnest.social/@eric" target="_blank" rel="noreferrer">@eric@toots.kestrelsnest.social</a> on Mastodon. The keeper of this hall roosts at <a href="https://kestrelsnest.social" target="_blank" rel="noreferrer">kestrelsnest.social</a>.</p>
</div>
{/snippet}
{#snippet aboutTally()}
<div class="about-body">
{#if tally}
<h3>The tally</h3>
<dl class="tally">
<dt>{tally.gamesFinished}</dt><dd>{tally.gamesFinished === 1 ? 'duel' : 'duels'} fought to a finish, of {tally.gamesBegun} begun at {tally.tablesOpened} {tally.tablesOpened === 1 ? 'table' : 'tables'}</dd>
<dt>{tally.namesSeated}</dt><dd>{tally.namesSeated === 1 ? 'name has' : 'names have'} taken a seat</dd>
@@ -316,8 +322,13 @@
{#if tally.firstGameAt}The first duel began {new Date(tally.firstGameAt).toLocaleDateString(undefined, { year: 'numeric', month: 'long', day: 'numeric' })}.{/if}
Names are counted, not people: one wizard under two names is two here. Table time counts only the minutes between reveals, so a duel left open overnight adds nothing for the night.
</p>
{:else}
<p class="muted">Counting…</p>
{/if}
{#if family.length}
</div>
{/snippet}
{#snippet aboutFamily()}
<div class="about-body">{#if family.length}
<h3>More games in {#if hall}<a href={hall}>Kestrel's Hall</a>{:else}Kestrel's Hall{/if}</h3>
<ul class="family">
{#each family as g (g.slug)}
@@ -331,7 +342,13 @@
</p>
<p class="made">Waving Hands is Richard Bartle's, 1977. This page was made by Eric and a very enthusiastic AI, 2026.</p>
</div>
</details>
{/snippet}
{#snippet aboutWord()}
<div class="about-body">
<p>A rule read wrong, a bug, a duel you would like to tell of: write to <a href="mailto:eric@ericwagoner.com">eric@ericwagoner.com</a>, <a href="https://bsky.app/profile/kestrelsnest.social" target="_blank" rel="noreferrer">@kestrelsnest.social</a> on Bluesky, or <a href="https://toots.kestrelsnest.social/@eric" target="_blank" rel="noreferrer">@eric@toots.kestrelsnest.social</a> on Mastodon. The keeper of this hall roosts at <a href="https://kestrelsnest.social" target="_blank" rel="noreferrer">kestrelsnest.social</a>.</p>
</div>
{/snippet}
<About bind:open={aboutOpen} title="About Waving Hands" tabs={[{ id: 'game', label: 'The game', body: aboutGame }, { id: 'tally', label: 'The tally', body: aboutTally }, { id: 'family', label: 'More games', body: aboutFamily }, { id: 'word', label: 'Send word', body: aboutWord }]} />
</section>
<style>
@@ -344,14 +361,14 @@
padding: clamp(1.4rem, 3vw, 2.2rem) clamp(1.2rem, 3vw, 2.6rem) 1.8rem;
display: grid;
grid-template-columns: minmax(0, 1fr);
grid-template-areas: 'head' 'play' 'look' 'ledger' 'about';
grid-template-areas: 'head' 'play' 'look' 'ledger';
gap: 1.2rem 2.2rem;
}
@media (min-width: 901px) {
.lid {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
grid-template-areas: 'head head' 'play look' 'ledger ledger' 'about about';
grid-template-areas: 'head head' 'play look' 'ledger ledger';
}
}
@@ -661,18 +678,6 @@
color: var(--blood);
}
.about {
grid-area: about;
border-top: 1px solid var(--rule);
padding-top: 0.6rem;
}
.about summary {
cursor: pointer;
font-style: italic;
color: var(--frost);
}
.about-body h3 {
font-size: 1rem;
font-style: italic;