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

The masthead, the scrim, the quiet button and the colophon are styled once in app.css instead of pasted into each page and slip with drifting paddings; the style blocks of the play page and the board are indented like the rest of the files; and comments in script and CSS say what the code does or guards, in plain words, where they had been written in the game's own voice

Browse Source 
Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_0141G6xqLeNRYEtviLWSB5Up
This commit is contained in:
Eric WagonerandClaude Fable 5.1 committed 2026-10-29 11:10:19 -04:00
1 parent 22979afd35
commit 42144c1cc9
19 files changed
+360 -477
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/app.css
+94
View File
@@ -108,6 +108,100 @@ button:disabled {
background: #fff;
}
/* The smaller reveal used in forms and slips. Qualified with the element so it
outranks a component's scoped `.small` text rule on the same button. */
button.reveal.small {
padding: 0.4rem 0.9rem;
font-size: 1rem;
}
/* A secondary action: an outlined button or link. */
.quiet {
background: none;
border: 1px solid var(--rule-strong);
border-radius: 4px;
padding: 0.4rem 0.9rem;
white-space: nowrap;
color: var(--bone);
text-decoration: none;
line-height: 1.55;
}
.quiet:hover:not(:disabled) {
border-color: var(--bone);
}
/* The page head on the play and join pages: title and standfirst on the left, actions on the right. */
.masthead {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 1rem;
padding: 1rem var(--gutter) 0.6rem;
max-width: 1280px;
margin: 0 auto;
}
.masthead h1 {
font-size: clamp(2rem, 4vw, 2.7rem);
font-weight: 300;
font-variation-settings: 'opsz' 144;
letter-spacing: -0.01em;
}
.standfirst {
max-width: 38em;
color: var(--bone-dim);
margin-top: 0.4rem;
}
.standfirst em {
color: var(--bone);
}
.masthead .actions {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
flex-shrink: 0;
min-width: 0;
max-width: 100%;
}
.colophon {
max-width: 1280px;
margin: 0 auto;
padding: 2rem var(--gutter) 3rem;
color: var(--bone-faint);
font-size: 0.85rem;
}
.colophon a {
color: var(--frost);
}
/* Must match COMPACT_QUERY in duel.svelte.ts. The extra foot padding clears MobileBar. */
@media (max-width: 860px) {
.masthead {
flex-direction: column;
}
.colophon {
padding-bottom: 6rem;
}
}
/* A modal backdrop that centres its dialog. */
.scrim {
position: fixed;
inset: 0;
z-index: 20;
background: rgba(0, 0, 0, 0.55);
display: grid;
place-items: center;
padding: 16px;
}
/* An italic prompt beside a control, e.g. "at" before a target list. */
.field {
display: inline-flex;
src/lib/components/About.svelte
+5 -15
View File
@@ -10,10 +10,10 @@
</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.
// A tabbed modal for the about content. Opened from the landing page's
// "about this game" link or the #about hash; closes on its button, a click
// on the backdrop, or Escape. Keeps the last-read tab while mounted, so
// reopening shows it.
import { tick } from 'svelte';
let { open = $bindable(false), tabs, title }: { open?: boolean; tabs: AboutTab[]; title: string } = $props();
@@ -41,7 +41,7 @@
<svelte:window onkeydown={onKey} />
{#if open}
<div class="about-scrim" role="presentation" onclick={(ev) => ev.target === ev.currentTarget && (open = false)}>
<div class="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>
@@ -71,16 +71,6 @@
{/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%;
src/lib/components/Announcement.svelte
+6 -6
View File
@@ -1,9 +1,9 @@
<script lang="ts">
// The host's announcement, shown by every game of Kestrel's Hall: the keeper
// writes /var/lib/hall/announcement.json on the host (hall-announce), and each
// game's site serves it at /hall/announcement.json. It is checked when the page
// loads, every few minutes, and whenever the page is looked at again. A reader
// may dismiss one announcement; the next one still shows.
// The site-family announcement, shown by every game: the maintainer writes
// /var/lib/hall/announcement.json on the host (hall-announce), and each game's
// site serves it at /hall/announcement.json. It is fetched on load, every few
// minutes, and whenever the tab becomes visible again. Dismissal is per
// announcement id, so the next one still shows.
import { onMount } from 'svelte';
interface Announcement {
@@ -88,7 +88,7 @@
{/if}
<style>
/* Its own colors, not the game's: the same notice reads the same in every game of the hall. */
/* Fixed colours rather than the game's tokens, so the notice looks the same on every site that shows it. */
.hall-announcement {
position: sticky;
top: 0;
src/lib/components/Board.svelte
+170 -170
View File
@@ -18,9 +18,9 @@
const foeMonsters = $derived(duel.state.monsters.filter((m) => m.owner !== duel.me));
const outcome = $derived(duel.state.over);
const won = $derived(outcome?.winner === duel.me);
/** Past three wizards the rail lists the others on a line each. */
/** With three or more opponents the rail shows a one-line roster instead of a status card each. */
const crowded = $derived(duel.others.length >= 3);
/** The button's word for what the player is about to do. */
/** The seal button's label for the current state. */
const sealLabel = $derived(
duel.moved ? 'Waiting' : duel.sending ? 'Sending' : duel.surrendering ? 'Surrender' : duel.timeStopped ? 'Act in the stopped moment' : 'Seal the turn'
);
@@ -275,260 +275,260 @@
<style>
details.next summary {
cursor: pointer;
list-style: none;
}
cursor: pointer;
list-style: none;
}
details.next summary::before {
content: '\25B8 ';
color: var(--bone-faint);
}
content: '\25B8 ';
color: var(--bone-faint);
}
details.next[open] summary::before {
content: '\25BE ';
}
content: '\25BE ';
}
.board {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
gap: 0 clamp(1.5rem, 4vw, 3.5rem);
padding: 0 var(--gutter);
max-width: 1280px;
margin: 0 auto;
}
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
gap: 0 clamp(1.5rem, 4vw, 3.5rem);
padding: 0 var(--gutter);
max-width: 1280px;
margin: 0 auto;
}
.play {
min-width: 0;
}
min-width: 0;
}
.rail {
min-width: 0;
}
min-width: 0;
}
.dot {
display: inline-block;
width: 0.5rem;
height: 0.5rem;
border-radius: 50%;
margin-right: 0.3rem;
vertical-align: baseline;
}
display: inline-block;
width: 0.5rem;
height: 0.5rem;
border-radius: 50%;
margin-right: 0.3rem;
vertical-align: baseline;
}
.intent {
margin: 0.6rem 0 0.2rem;
font-style: italic;
color: var(--bone);
}
margin: 0.6rem 0 0.2rem;
font-style: italic;
color: var(--bone);
}
.move {
padding: 0.6rem 0 1.5rem;
}
padding: 0.6rem 0 1.5rem;
}
.move h2 {
font-size: 1.3rem;
margin-bottom: 0.3rem;
}
font-size: 1.3rem;
margin-bottom: 0.3rem;
}
.threats {
font-size: 0.9rem;
margin-bottom: 0.7rem;
}
font-size: 0.9rem;
margin-bottom: 0.7rem;
}
.threats ul {
list-style: none;
margin: 0.15rem 0 0.4rem;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 0.3rem 0.5rem;
}
list-style: none;
margin: 0.15rem 0 0.4rem;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 0.3rem 0.5rem;
}
.threat {
background: var(--slate);
border: 1px solid transparent;
border-radius: 3px;
padding: 0.15rem 0.5rem;
display: inline-flex;
gap: 0.5rem;
align-items: baseline;
color: var(--bone-dim);
}
background: var(--slate);
border: 1px solid transparent;
border-radius: 3px;
padding: 0.15rem 0.5rem;
display: inline-flex;
gap: 0.5rem;
align-items: baseline;
color: var(--bone-dim);
}
.threat.soon {
color: var(--bone);
}
color: var(--bone);
}
.threat:hover,
.threat.active {
border-color: var(--frost);
}
.threat.active {
border-color: var(--frost);
}
.threat.active {
background: rgba(140, 200, 224, 0.12);
}
background: rgba(140, 200, 224, 0.12);
}
.thand {
font-style: italic;
font-size: 0.8rem;
}
font-style: italic;
font-size: 0.8rem;
}
.tseq {
letter-spacing: 0.04em;
}
letter-spacing: 0.04em;
}
.tseq strong {
font-weight: 600;
color: var(--ember);
}
font-weight: 600;
color: var(--ember);
}
.prefs {
display: flex;
flex-wrap: wrap;
gap: 0.3rem 1.5rem;
margin-top: 0.7rem;
}
display: flex;
flex-wrap: wrap;
gap: 0.3rem 1.5rem;
margin-top: 0.7rem;
}
.pref {
display: flex;
gap: 0.4rem;
align-items: center;
font-size: 0.85rem;
color: var(--bone-dim);
}
display: flex;
gap: 0.4rem;
align-items: center;
font-size: 0.85rem;
color: var(--bone-dim);
}
.hands {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.25rem 2rem;
}
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.25rem 2rem;
}
.orders {
display: flex;
flex-wrap: wrap;
gap: 0.5rem 1.5rem;
margin-top: 0.9rem;
}
display: flex;
flex-wrap: wrap;
gap: 0.5rem 1.5rem;
margin-top: 0.9rem;
}
.warning {
color: var(--blood);
margin-top: 0.8rem;
}
color: var(--blood);
margin-top: 0.8rem;
}
.haste-note {
color: var(--frost);
font-size: 0.95rem;
margin: 1rem 0 0.6rem;
}
color: var(--frost);
font-size: 0.95rem;
margin: 1rem 0 0.6rem;
}
/* Your hands, framed apart from the ledger's columns above them. */
/* Box the hand pickers so they read apart from the ledger table above. */
.hands {
background: var(--slate);
border: 1px solid var(--rule-strong);
border-radius: 6px;
padding: 0.7rem 0.9rem 0.9rem;
}
background: var(--slate);
border: 1px solid var(--rule-strong);
border-radius: 6px;
padding: 0.7rem 0.9rem 0.9rem;
}
/* The turn about to be sealed, kept in view while the hands and orders scroll. */
/* Sticky at the foot so the chosen pair and the seal button stay in view while the pickers scroll. */
.commit {
position: sticky;
bottom: 0;
z-index: 4;
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center;
gap: 0.4rem 1rem;
margin-top: 0.9rem;
padding: 0.6rem 0.2rem;
background: var(--slate-deep);
border-top: 1px solid var(--rule-strong);
}
position: sticky;
bottom: 0;
z-index: 4;
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center;
gap: 0.4rem 1rem;
margin-top: 0.9rem;
padding: 0.6rem 0.2rem;
background: var(--slate-deep);
border-top: 1px solid var(--rule-strong);
}
.pair {
display: flex;
flex-direction: column;
gap: 0.1rem;
}
display: flex;
flex-direction: column;
gap: 0.1rem;
}
.hand-pair {
display: flex;
align-items: baseline;
gap: 0.35rem;
}
display: flex;
align-items: baseline;
gap: 0.35rem;
}
.which {
font-size: 0.75rem;
font-style: italic;
color: var(--bone-faint);
}
font-size: 0.75rem;
font-style: italic;
color: var(--bone-faint);
}
.pair .letter {
font-size: 1.5rem;
min-width: 1ch;
}
font-size: 1.5rem;
min-width: 1ch;
}
.pair .letter.empty {
color: var(--bone-faint);
}
color: var(--bone-faint);
}
.notes p {
margin: 0;
}
margin: 0;
}
.notes p + p {
margin-top: 0.2rem;
}
margin-top: 0.2rem;
}
.keys {
font-size: 0.8rem;
}
font-size: 0.8rem;
}
.verdict {
padding: 1.5rem 0;
}
padding: 1.5rem 0;
}
.verdict h2 {
font-size: 2rem;
font-style: italic;
color: var(--blood);
}
font-size: 2rem;
font-style: italic;
color: var(--blood);
}
.verdict.won h2 {
color: var(--ember);
}
color: var(--ember);
}
.verdict p {
margin: 0.3rem 0 0.8rem;
color: var(--bone-dim);
}
margin: 0.3rem 0 0.8rem;
color: var(--bone-dim);
}
/* Must match COMPACT_QUERY in duel.svelte.ts. */
@media (max-width: 860px) {
.board {
grid-template-columns: minmax(0, 1fr);
}
grid-template-columns: minmax(0, 1fr);
}
/* On phones the bar at the foot of the screen carries the pair and the button. */
.commit {
position: static;
grid-template-columns: minmax(0, 1fr);
border-top: 0;
}
/* Narrow screens: MobileBar carries the pair and the button instead. */
.commit {
position: static;
grid-template-columns: minmax(0, 1fr);
border-top: 0;
}
.commit .pair,
.commit .reveal,
.keys {
display: none;
}
.commit .pair,
.commit .reveal,
.keys {
display: none;
}
.rail {
order: 2;
border-top: 1px solid var(--rule-strong);
margin-top: 1rem;
}
order: 2;
border-top: 1px solid var(--rule-strong);
margin-top: 1rem;
}
.hands {
grid-template-columns: 1fr;
}
grid-template-columns: 1fr;
}
}
.waiting {
src/lib/components/Hall.svelte
+17 -30
View File
@@ -18,14 +18,14 @@
$effect(() => {
if (location.hash === '#about') aboutOpen = true;
});
/** The ledgers' tally, fetched when the about panel opens. */
/** Site-wide statistics, fetched the first time the about panel opens. */
let tally = $state<Tally | null>(null);
$effect(() => {
if (aboutOpen && !tally) api.tally().then((t) => (tally = t)).catch(() => (tally = null));
});
const hours = (minutes: number) => (minutes < 90 ? `${minutes} minutes` : `${Math.round(minutes / 60)} hours`);
/** The tally as the about panel tells it: this game's own story on cards, the rest in detail. */
/** The tally split for the about panel: headline figures for the cards, every other count as a detail line. */
const told = $derived.by(() => {
const t = tally;
if (!t) return null;
@@ -36,19 +36,19 @@
{ n: t.byGame["duels won by a rival's surrender"] ?? 0, label: "won by a rival's surrender" },
{ n: hours(t.minutesAtTable), label: 'at the table' }
];
const told = new Set<string>(['duels won with every rival slain', "duels won by a rival's surrender"]);
const onCards = new Set<string>(['duels won with every rival slain', "duels won by a rival's surrender"]);
const details = [
{ n: t.gamesBegun, label: `duels begun, at ${t.tablesOpened} ${t.tablesOpened === 1 ? 'table' : 'tables'}` },
{ n: t.namesSeated, label: t.namesSeated === 1 ? 'name has taken a seat' : 'names have taken a seat' },
{ n: t.turnsPlayed, label: `turns of gestures written; ${t.longestGameTurns} in the longest duel` },
{ n: t.gamesWithBot, label: `duels with the bot seated` },
...(t.talkLines ? [{ n: t.talkLines, label: t.talkLines === 1 ? 'line of table talk' : 'lines of table talk' }] : []),
...Object.entries(t.byGame).filter(([label]) => !told.has(label)).map(([label, n]) => ({ n, label }))
...Object.entries(t.byGame).filter(([label]) => !onCards.has(label)).map(([label, n]) => ({ n, label }))
];
const first = t.firstGameAt ? `The first duel began ${new Date(t.firstGameAt).toLocaleDateString(undefined, { year: 'numeric', month: 'long', day: 'numeric' })}. ` : '';
return { headline, details, note: `${first}The count is of names, so one player 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.` };
});
/** The other games of Kestrel's Hall, for the about panel. */
/** The sibling games listed in the about panel, and the family's landing page. */
let family = $state<FamilyGame[]>([]);
let hall = $state('');
$effect(() => {
@@ -57,12 +57,12 @@
hall = f.hall;
});
});
/** Reports this browser's seats have filed, with the keeper's replies. */
/** Bug reports filed from this browser's seats, with the maintainer's replies. */
let reports = $state<Report[]>([]);
let answers = $state<Record<string, string>>({});
let answerError = $state('');
// The desk is asked once per visit for every seat this browser holds.
// Fetch the reports for every held seat; re-runs when the held seats change.
$effect(() => {
const held = seats;
if (!held.length) return;
@@ -85,13 +85,12 @@
}
}
/** The single-player duel saved in this browser, if one is under way. */
/** The offline game saved in this browser, if one is unfinished. */
const local = $derived(duel.inProgress ? duel : null);
const ready = $derived(name.trim().length > 0);
// Each held seat is looked up once, so the ledger can say whose move it
// is. A seat the server refuses outright is doubted; a second refusal in
// a row forgets it. Silence (a restart, a stale answer) forgets nothing.
// Each held seat is fetched once so the list can say whose move it is. A 403 or 404 marks
// the seat doubtful, and a second refusal in a row drops it; a network failure changes nothing.
$effect(() => {
for (const held of seats) {
if (held.roomId in games) continue;
@@ -111,7 +110,7 @@
let phrase = $state('');
let claiming = $state(false);
/** Bring a seat from another device by the phrase it minted. */
/** Claim a seat transferred from another device, by its transfer phrase. */
async function claim(e: SubmitEvent) {
e.preventDefault();
claiming = true;
@@ -167,7 +166,7 @@
if (c) void goto(`/join/${c}`);
}
/** A duel in play asks before it is forgotten: this browser may be the only thing that holds the seat. */
/** Forgetting an unfinished game asks first: this browser's token may be the only copy of the seat. */
let forgetting = $state<string | null>(null);
function forget(roomId: string) {
if (!games[roomId]?.state?.over && forgetting !== roomId) {
@@ -195,7 +194,7 @@
return `waiting on ${g.waitingOn.map((id) => g.state!.wizards[id].name).join(', ')} · ${turn}`;
}
/** Lines of table talk said since this browser last looked in. */
/** Chat lines posted since this browser last opened the room. */
function unread(held: { roomId: string }): number {
const g = games[held.roomId];
return g ? unreadTalk(held.roomId, g.chat.length) : 0;
@@ -206,7 +205,7 @@
return !!g?.state && !g.state.over && g.waitingOn.includes(held.seat);
}
/* A few turns of a duel, as the ledger writes them. */
/** Fixed sample rows for the illustration table. */
const sample = [
{ turn: 1, a: ['W', 'S'], b: ['P', 'W'], notes: { b0: 'Shield' } },
{ turn: 2, a: ['W', 'D'], b: ['P', 'D'], notes: { a1: 'Missile', b0: 'Shield' } },
@@ -332,7 +331,7 @@
</div>
{/if}
<!-- The about panel, a tab at a time: its sections are written here, in the game's own words. -->
<!-- The about panel's tabs. Their copy is this game's own, in its in-world voice by design. -->
{#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>
@@ -500,18 +499,6 @@
font-weight: 600;
}
.quiet {
background: none;
border: 1px solid var(--rule-strong);
border-radius: 4px;
padding: 0.45rem 0.9rem;
color: var(--bone);
}
.quiet:hover:not(:disabled) {
border-color: var(--bone);
}
.warning {
color: var(--blood);
}
@@ -576,7 +563,7 @@
text-align: center;
}
/* the games ledger */
/* The list of held seats, and the reports under it. */
.ledger {
grid-area: ledger;
border-top: 1px solid var(--rule-strong);
@@ -686,7 +673,7 @@
color: var(--ember);
}
/* The question takes a line of its own under the duel on a narrow screen. */
/* The confirmation wraps onto its own line when the row is narrow. */
.ledger-row.asking {
flex-wrap: wrap;
}
src/lib/components/ReportSlip.svelte
-15
View File
@@ -88,16 +88,6 @@
{/if}
<style>
.scrim {
position: fixed;
inset: 0;
z-index: 20;
background: rgba(0, 0, 0, 0.55);
display: grid;
place-items: center;
padding: 16px;
}
.slip {
width: min(100%, 30rem);
max-height: 100%;
@@ -168,11 +158,6 @@
margin-top: 0.9rem;
}
.reveal.small {
padding: 0.4rem 0.9rem;
font-size: 1rem;
}
.link {
background: none;
border: 0;
src/lib/components/Roster.svelte
+2 -2
View File
@@ -1,6 +1,6 @@
<script lang="ts">
// A crowded table's rail: every other wizard on one line, with the one
// you are looking at opened out. Your own panel stays in full above.
// The rail for three or more opponents: each on one line, with the focused
// one expanded. The player's own status card stays above in full.
import WizardStatus from './WizardStatus.svelte';
import type { Duel } from '$lib/game/duel.svelte';
import { seatColor } from '$lib/game/colors';
src/lib/components/SeatsSlip.svelte
+4 -10
View File
@@ -1,7 +1,7 @@
<script lang="ts">
// The host's hand on the other seats during a duel: a transfer phrase for a
// wizard whose browser lost their seat, and a bot to duel in the seat of one
// who cannot go on, until a phrase gives it back.
// Host-only controls over the other seats during a game: a transfer phrase
// for a player whose browser lost its seat, and handing a seat to a bot until
// a phrase claims it back.
import type { Duel } from '$lib/game/duel.svelte';
import type { WizardId } from '$lib/game/state';
@@ -80,15 +80,9 @@
{/if}
<style>
/* A definite row, so the slip's max-height resolves and it scrolls instead of overflowing the viewport. */
.scrim {
position: fixed;
inset: 0;
z-index: 20;
background: rgba(0, 0, 0, 0.55);
display: grid;
grid-template-rows: minmax(0, 1fr);
place-items: center;
padding: 16px;
}
.slip {
src/lib/components/TableTalk.svelte
+2 -10
View File
@@ -7,12 +7,12 @@
const remote = $derived(duel.remote);
const lines = $derived(remote?.chat ?? []);
let draft = $state('');
/** The gallery signs its lines; the name is the one the hall remembers. */
/** Spectators sign their lines; the default is the name saved in local storage. */
let galleryName = $state(playerName());
let sending = $state(false);
let list = $state<HTMLElement | null>(null);
// New talk scrolls into view, as at any table.
// Keep the list scrolled to the newest line.
$effect(() => {
void lines.length;
void tick().then(() => {
@@ -128,14 +128,6 @@
flex: 0 1 8rem;
}
.quiet {
background: none;
border: 1px solid var(--rule-strong);
border-radius: 4px;
padding: 0.3rem 0.8rem;
color: var(--bone);
}
.quiet:disabled {
opacity: 0.5;
}
src/lib/components/Tally.svelte
+4 -4
View File
@@ -1,5 +1,5 @@
<script lang="ts" module>
/** One count told: the number, and what it counts. */
/** One statistic: the figure and its label. */
export interface TallyLine {
n: number | string;
label: string;
@@ -7,9 +7,9 @@
</script>
<script lang="ts">
// What the ledgers add up to: a few counts that are the game's own story,
// large, on cards; then the rest in a column of figures; then the fine
// print. Each game chooses its counts and words.
// A statistics panel: a few headline counts on large cards, the rest in a
// two-column list, then an optional note. The caller supplies the counts
// and their labels.
let { headline, details, note, title = 'What the ledgers add up to' }: { headline: TallyLine[]; details: TallyLine[]; note?: string; title?: string } =
$props();
src/lib/family.ts
+4 -5
View File
@@ -1,7 +1,6 @@
// The other games of Kestrel's Hall, from the family list the kit keeps
// (family.json, one copy shipped with every game), so a player who liked one
// table can find the next, and the hall's front door. This game is left out
// of its own list.
// The sibling games, from the family list the kit ships (family.json, one copy
// per game), so a player can find the next game and the family's landing page.
// This game is left out of its own list.
export interface FamilyGame {
slug: string;
@@ -12,7 +11,7 @@ export interface FamilyGame {
origin: string;
}
/** The family list: the hall's front door and every game but this one. */
/** The family list: the landing page's URL and every game but this one. */
export interface Family {
hall: string;
games: FamilyGame[];
src/lib/game/client.ts
+4 -4
View File
@@ -19,7 +19,7 @@ function heldSeats(): Record<string, HeldSeat> {
}
}
/** A seat the keeper sent in a link, `#seat=<seat>.<token>`: a fragment stays in the browser, out of every log. */
/** A seat carried in a link, `#seat=<seat>.<token>`: a fragment stays in the browser, out of server logs. */
export function seatInLink(hash: string): HeldSeat | null {
const m = /^#seat=([^.]+)\.([A-Za-z0-9_-]+)$/.exec(hash);
return m ? { seat: m[1], token: m[2] } : null;
@@ -122,8 +122,7 @@ async function call<T>(method: string, path: string, body?: unknown): Promise<T>
type Seated = { seat: WizardId; token: string; view: RoomView };
/** A report to the keeper, with the exchange under it. */
/** What the ledgers add up to. */
/** Site-wide statistics. */
export interface Tally {
tablesOpened: number;
gamesBegun: number;
@@ -138,6 +137,7 @@ export interface Tally {
byGame: Record<string, number>;
}
/** A bug report, with the exchange of replies under it. */
export interface Report {
id: string;
at: string;
@@ -184,7 +184,7 @@ export const api = {
answerReport: (id: string, roomId: string, token: string, text: string) => call<{ ok: true }>('POST', `/api/reports/${id}/answer`, { roomId, token, text })
};
/** A socket that only ever says "fetch the view again"; reconnects on its own. An empty token sits in the gallery. */
/** A socket that only ever signals "fetch the view again"; reconnects on its own. An empty token spectates. */
export function watchRoom(roomId: string, token: string, onUpdate: () => void, onStatus: (open: boolean) => void): () => void {
let socket: WebSocket | null = null;
let closed = false;
src/lib/game/duel.svelte.ts
+7 -7
View File
@@ -219,7 +219,7 @@ export interface Remote extends HeldSeat {
started: boolean;
connected: boolean;
error: string;
/** The server stopped taking this seat's token while the page was open, and why; the page goes to the gallery. */
/** Set when the server stopped accepting this seat's token while the page was open, with the reason; the page then spectates. */
lost: string;
chat: ChatLine[];
/** How many watch from the Peanut Gallery. */
@@ -340,7 +340,7 @@ export class Duel {
/** Watching from the gallery, with no seat at the table. */
spectating = $derived(this.remote?.spectating ?? false);
/** The gallery has no wizard of its own; it borrows the first seat for the fields that need one, and shows none of them. */
/** A spectator has no wizard of their own; borrow the first seat for the fields that need one (none of them are shown). */
you = $derived(this.state.wizards[this.me] ?? this.state.wizards[this.state.seats[0]]);
/** The opponent spells go at by default: the first still standing. */
foeId = $derived(enemyOf(this.state, this.me));
@@ -850,12 +850,12 @@ export class Duel {
return this.remoteAct((r) => api.setGalleryTalk(r.roomId, r.token, on), 'The gallery could not be told.');
}
/** Call the keeper of the site to a held seat; their phone rings. */
/** Invite the site maintainer to the seat held for them; the server notifies them. */
callKeeper(): Promise<boolean> {
return this.remoteAct((r) => api.challenge(r.roomId, r.token), 'The keeper could not be called.');
}
/** A finished table opens another with the same company; the caller is seated as its host. */
/** Open a rematch room for the same players; the caller becomes its host. */
async rematch(): Promise<string> {
const r = this.remote!;
const next = await api.rematch(r.roomId, r.token);
@@ -943,7 +943,7 @@ export class Duel {
return watchRoom(r.roomId, r.token, refresh, (open) => (r.connected = open));
}
/** You opened this table, so the duel begins when you say. */
/** The viewer holds the host seat, so may begin the game. */
isHost = $derived(!!this.remote && this.remote.host === this.remote.seat);
/** Begin the duel with whoever is seated. */
@@ -1026,7 +1026,7 @@ export class Duel {
this.resetDrafts();
}
/** Open a table on the server, seated as its host; it takes up to a dozen and begins when the host says. */
/** Create a room on the server with the caller as host; it takes up to `size` seats and starts when the host says. */
static async createRoom(name: string, size = 12): Promise<Remote> {
const seated = await api.create(name, size);
rememberSeat(seated.view.roomId, { seat: seated.seat, token: seated.token });
@@ -1052,7 +1052,7 @@ export class Duel {
return remoteFrom(await api.view(roomId, held.token), held.token);
}
/** Take a place in the Peanut Gallery: watch a table with no seat and no voice. */
/** Open a room as a spectator: no seat and no token. */
static async watchRoom(roomId: string): Promise<Remote> {
return remoteFrom(await api.watch(roomId), '');
}
src/lib/game/state.ts
+1 -1
View File
@@ -306,7 +306,7 @@ export function visibleHistory(state: GameState, viewer: WizardId, subject: Wiza
return state.wizards[subject].history.map((h) => (hiddenFromViewer(h.hiddenFrom, viewer) ? { ...h, left: '-', right: '-' } : h));
}
/** The gallery holds no seat: it is shown only what every wizard at the table could see. */
/** A spectator holds no seat and is shown only what every seated player could see. */
export const SPECTATOR: WizardId = '';
export function hiddenFromViewer(hiddenFrom: WizardId[] | undefined, viewer: WizardId): boolean {
src/lib/game/talk.ts
+1 -1
View File
@@ -1,4 +1,4 @@
// How much of each table's talk this browser has read, so the hall can say what is new.
// How many chat lines of each room this browser has read, so the landing page can count what is new.
const SEEN_KEY = 'wh:talk-seen';
src/lib/game/tally.ts
+3 -3
View File
@@ -1,6 +1,6 @@
// The game's own lines for the hall's tally, read off a finished duel. Only
// what the final state records for certain: who is dead, who yielded, and
// how the duel was decided.
// This game's lines for the site-wide tally, read off a finished game: only
// what the final state records for certain (who is dead, who yielded, and
// how the game was decided).
import type { GameState } from './state';
src/lib/game/view.ts
+4 -4
View File
@@ -15,7 +15,7 @@ export function viewFor(state: GameState, viewer: WizardId): GameState {
return view;
}
/** One line of table talk: from a seat, or from the Peanut Gallery when the host allows it (id SPECTATOR, signed with `name`), or from the keeper of the site. */
/** One chat line: from a seat, from a spectator when the host allows it (id SPECTATOR, signed with `name`), or from the site maintainer (`keeper`). */
export interface ChatLine {
id: WizardId;
text: string;
@@ -46,15 +46,15 @@ export interface RoomView {
audience: number;
/** The host lets the gallery talk. */
galleryTalk: boolean;
/** The keeper of the site was called to a seat, and by whom. */
/** The site maintainer was invited to a held seat, and by whom. */
challenge: { by: WizardId; at: number } | null;
/** Names with a seat held who have not yet sat: the last table's wizards, or the keeper. */
/** Names with a seat held who have not yet sat: the previous room's players, or the site maintainer. */
expected: string[];
/** A finished table's rematch: where it went, and who called. */
rematch: { to: string; by: WizardId } | null;
/** The table this one is the rematch of. */
rematchOf: string | null;
/** The keeper of the site, and where they live, for a table that calls them. */
/** The site maintainer's name and time zone, for rooms that invite them. */
keeper: string;
keeperZone: string;
}
src/routes/join/[code]/+page.svelte
+13 -92
View File
@@ -13,22 +13,22 @@
let room = $state<Duel | null>(null);
let name = $state('');
let joining = $state(false);
/** The host asked to begin while a seat is still held for someone on their way. */
/** The host pressed Begin while a seat is still held for someone expected; confirm before going on. */
let beginAsked = $state(false);
let busy = $state(false);
let error = $state('');
let copied = $state(false);
let reporting = $state(false);
/** A phrase minted to carry this seat to another device, while it lasts. */
/** This seat's transfer phrase, until it expires. */
let phrase = $state<{ phrase: string; expiresAt: number } | null>(null);
let rematching = $state(false);
let seatsOpen = $state(false);
/** Why this browser's seat no longer opens, when the server said so; shown while watching. */
/** The server's reason for refusing this browser's seat; shown while spectating. */
let seatLost = $state('');
let claimPhrase = $state('');
let claiming = $state(false);
/** The hour where the keeper lives, in words, so a caller knows whether to wait. */
/** The current hour in the site maintainer's time zone, in words, shown beside the challenge button. */
let minute = $state(0);
$effect(() => {
const id = setInterval(() => (minute += 1), 60_000);
@@ -76,18 +76,18 @@
const link = $derived(typeof location === 'undefined' ? '' : `${location.origin}/join/${roomId}`);
const lobby = $derived(room !== null && !room.remote?.started);
const watching = $derived(room?.spectating ?? false);
/** A watcher may still sit while the table is laid and a seat is free. */
/** A spectator may still take a seat before the game starts, while one is free. */
const seatFree = $derived(!!room?.remote && !room.remote.started && room.remote.seats.length < room.remote.size);
// Return to a held seat, or take a place in the gallery and offer one. A link from the keeper carries a seat:
// it leaves the address bar at once, is kept only once the server takes it, and never replaces a seat that
// still opens, so a link someone else sends cannot take a working seat away.
// Resume a held seat, else spectate. A link may carry a seat (#seat=...): it is stripped from the address
// bar at once, saved only once the server accepts it, and never replaces a held seat the server still
// accepts, so a forwarded link cannot take a working seat.
$effect(() => {
const id = roomId;
room = null;
error = '';
const sent = seatInLink(location.hash);
// The browser's own call: this runs as the page first loads, before the router could take one.
// The History API directly, not SvelteKit's replaceState: this runs on first load, before the router is ready.
if (sent) history.replaceState(history.state, '', location.pathname + location.search);
const held = seatFor(id);
const take = (s: HeldSeat) =>
@@ -96,9 +96,9 @@
trustSeat(id);
return remote;
});
// Only the server's refusal of the held token lets a link in: a dropped connection is not a lost seat.
// Only a 403 on the held token lets the link's seat in; a dropped connection is not a lost seat.
const refused = (e: unknown) => e instanceof ServerError && e.status === 403;
// A held seat the server refuses, with no link to replace it, is watched from the gallery, with the reason.
// A refused seat with no link to replace it falls back to spectating, keeping the server's reason.
const watchRefused = (e: Error) => {
seatLost = e.message;
return Duel.watchRoom(id);
@@ -127,7 +127,7 @@
return stop;
});
// The seat stopped opening while the page was open (the host gave it to a bot): watch on from the gallery.
// The seat was revoked while the page was open (the host gave it to a bot): switch to spectating.
$effect(() => {
const r = room;
const lost = r?.remote?.lost;
@@ -138,7 +138,7 @@
.catch((e: Error) => (error = e.message));
});
/** Sit back down by a phrase: the host's, or one this seat minted on another device. */
/** Claim a seat by transfer phrase: the host's, or one this seat made on another device. */
async function claim(e: SubmitEvent) {
e.preventDefault();
claiming = true;
@@ -380,57 +380,6 @@
</footer>
<style>
.masthead {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 1rem;
padding: 1rem var(--gutter) 0.6rem;
max-width: 1280px;
margin: 0 auto;
}
h1 {
font-size: clamp(2rem, 4vw, 2.7rem);
font-weight: 300;
font-variation-settings: 'opsz' 144;
letter-spacing: -0.01em;
}
.standfirst {
max-width: 38em;
color: var(--bone-dim);
margin-top: 0.4rem;
}
.standfirst em {
color: var(--bone);
}
.actions {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
flex-shrink: 0;
min-width: 0;
max-width: 100%;
}
.quiet {
background: none;
border: 1px solid var(--rule-strong);
border-radius: 4px;
padding: 0.4rem 0.9rem;
white-space: nowrap;
color: var(--bone);
text-decoration: none;
line-height: 1.55;
}
.quiet:hover {
border-color: var(--bone);
}
.quiet.room b {
letter-spacing: 0.12em;
font-weight: 600;
@@ -517,11 +466,6 @@
width: 14em;
}
.reveal.small {
padding: 0.4rem 0.9rem;
font-size: 1rem;
}
.roster {
list-style: none;
margin: 0.9rem 0 0.6rem;
@@ -583,27 +527,4 @@
border-radius: 4px;
word-break: break-all;
}
.colophon {
max-width: 1280px;
margin: 0 auto;
padding: 2rem var(--gutter) 3rem;
color: var(--bone-faint);
font-size: 0.85rem;
}
.colophon a {
color: var(--frost);
}
/* Must match COMPACT_QUERY in duel.svelte.ts. */
@media (max-width: 860px) {
.masthead {
flex-direction: column;
}
.colophon {
padding-bottom: 6rem;
}
}
</style>
src/routes/play/+page.svelte
+19 -98
View File
@@ -90,116 +90,37 @@
</footer>
<style>
.masthead {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 1rem;
padding: 1rem var(--gutter) 0.6rem;
max-width: 1280px;
margin: 0 auto;
}
h1 {
font-size: clamp(2rem, 4vw, 2.7rem);
font-weight: 300;
font-variation-settings: 'opsz' 144;
letter-spacing: -0.01em;
}
.standfirst {
max-width: 38em;
color: var(--bone-dim);
margin-top: 0.4rem;
}
.standfirst em {
color: var(--bone);
}
.standfirst .link {
margin-left: 0.5em;
font-size: 0.8rem;
}
margin-left: 0.5em;
font-size: 0.8rem;
}
.rename {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.5rem 0.75rem;
margin-top: 0.4rem;
}
.rename input {
width: 14em;
}
.actions {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
flex-shrink: 0;
min-width: 0;
max-width: 100%;
align-items: center;
gap: 0.5rem 0.75rem;
margin-top: 0.4rem;
}
.quiet {
background: none;
border: 1px solid var(--rule-strong);
border-radius: 4px;
padding: 0.4rem 0.9rem;
white-space: nowrap;
color: var(--bone);
text-decoration: none;
line-height: 1.55;
}
.quiet:hover {
border-color: var(--bone);
}
.rename input {
width: 14em;
}
.confirm {
max-width: 1280px;
margin: 0 auto 0.75rem;
padding: 0.75rem var(--gutter);
}
max-width: 1280px;
margin: 0 auto 0.75rem;
padding: 0.75rem var(--gutter);
}
.confirm p {
color: var(--blood);
margin-bottom: 0.5rem;
}
color: var(--blood);
margin-bottom: 0.5rem;
}
.choices {
display: flex;
gap: 0.6rem;
flex-wrap: wrap;
}
.reveal.small {
padding: 0.4rem 0.9rem;
font-size: 1rem;
}
.colophon {
max-width: 1280px;
margin: 0 auto;
padding: 2rem var(--gutter) 3rem;
color: var(--bone-faint);
font-size: 0.85rem;
}
.colophon a {
color: var(--frost);
}
/* Must match COMPACT_QUERY in duel.svelte.ts. */
@media (max-width: 860px) {
.colophon {
padding-bottom: 6rem;
}
.masthead {
flex-direction: column;
}
display: flex;
gap: 0.6rem;
flex-wrap: wrap;
}
</style>