Begin Hnefatafl from the game kit
This commit is contained in:
Eric Wagoner
+162
@@ -0,0 +1,162 @@
|
||||
/* Design tokens. Every game picks its own palette and typeface here; the
|
||||
components only ever name these tokens, so a new look is this block. */
|
||||
:root {
|
||||
--slate: #1c2830;
|
||||
--slate-deep: #121a20;
|
||||
--slate-raised: #24333d;
|
||||
--bone: #e9e2d2;
|
||||
--bone-dim: #98a4ab;
|
||||
--bone-faint: #5d6b73;
|
||||
--ember: #f0a53a;
|
||||
--frost: #8cc8e0;
|
||||
--blood: #e0655c;
|
||||
--rule: rgba(233, 226, 210, 0.14);
|
||||
--rule-strong: rgba(233, 226, 210, 0.32);
|
||||
--font: 'Iowan Old Style', Georgia, serif;
|
||||
--gutter: clamp(16px, 3vw, 40px);
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html {
|
||||
background: var(--slate-deep);
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
background: var(--slate-deep);
|
||||
color: var(--bone);
|
||||
font-family: var(--font);
|
||||
font-size: 17px;
|
||||
line-height: 1.55;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3 {
|
||||
font-weight: 500;
|
||||
line-height: 1.15;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
button,
|
||||
select,
|
||||
input,
|
||||
textarea {
|
||||
font: inherit;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
button {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
button:focus-visible,
|
||||
select:focus-visible,
|
||||
input:focus-visible,
|
||||
textarea:focus-visible,
|
||||
summary:focus-visible {
|
||||
outline: 2px solid var(--frost);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
select,
|
||||
input[type='text'],
|
||||
textarea {
|
||||
background: var(--slate-deep);
|
||||
border: 1px solid var(--rule-strong);
|
||||
border-radius: 4px;
|
||||
padding: 0.3rem 0.6rem;
|
||||
max-width: 100%;
|
||||
color: var(--bone);
|
||||
}
|
||||
|
||||
button:disabled {
|
||||
opacity: 0.35;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
/* An action written as a word in running text. */
|
||||
.link {
|
||||
background: none;
|
||||
border: 0;
|
||||
padding: 0;
|
||||
font-size: inherit;
|
||||
color: var(--frost);
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* The one button that commits a move. */
|
||||
.commit {
|
||||
background: var(--bone);
|
||||
color: var(--slate-deep);
|
||||
border: 0;
|
||||
border-radius: 4px;
|
||||
padding: 0.6rem 1.4rem;
|
||||
font-size: 1.05rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.commit:hover:not(:disabled) {
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.commit.small {
|
||||
padding: 0.4rem 0.9rem;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
/* A bordered, unemphatic button: navigation, secondary actions. */
|
||||
.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);
|
||||
}
|
||||
|
||||
.muted {
|
||||
color: var(--bone-dim);
|
||||
}
|
||||
|
||||
.warning {
|
||||
color: var(--blood);
|
||||
}
|
||||
|
||||
.eyebrow {
|
||||
font-size: 0.85rem;
|
||||
letter-spacing: 0.12em;
|
||||
color: var(--bone-faint);
|
||||
margin-bottom: 0.2rem;
|
||||
}
|
||||
|
||||
.visually-hidden {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
overflow: hidden;
|
||||
clip: rect(0 0 0 0);
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
animation: none !important;
|
||||
transition: none !important;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,30 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<meta name="color-scheme" content="dark" />
|
||||
<meta name="theme-color" content="#121a20" />
|
||||
<title>Hnefatafl</title>
|
||||
<meta name="description" content="Hnefatafl: a game between friends, free in the browser." />
|
||||
<link rel="canonical" href="https://hnefatafl.kestrelsnest.social/" />
|
||||
<link rel="icon" href="/favicon.ico" sizes="32x32" />
|
||||
<link rel="icon" href="/favicon.svg" type="image/svg+xml" />
|
||||
<meta property="og:type" content="website" />
|
||||
<meta property="og:site_name" content="Hnefatafl" />
|
||||
<meta property="og:title" content="Hnefatafl" />
|
||||
<meta property="og:description" content="Hnefatafl: a game between friends, free in the browser." />
|
||||
<meta property="og:url" content="https://hnefatafl.kestrelsnest.social/" />
|
||||
<meta property="og:image" content="https://hnefatafl.kestrelsnest.social/og.png" />
|
||||
<meta property="og:image:width" content="1200" />
|
||||
<meta property="og:image:height" content="630" />
|
||||
<meta name="twitter:card" content="summary_large_image" />
|
||||
<meta name="twitter:title" content="Hnefatafl" />
|
||||
<meta name="twitter:description" content="Hnefatafl: a game between friends, free in the browser." />
|
||||
<meta name="twitter:image" content="https://hnefatafl.kestrelsnest.social/og.png" />
|
||||
%sveltekit.head%
|
||||
</head>
|
||||
<body data-sveltekit-preload-data="hover">
|
||||
<div style="display: contents">%sveltekit.body%</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,202 @@
|
||||
<script lang="ts">
|
||||
// The demo game's board. A real game replaces this file entirely; the
|
||||
// masthead, lobby, talk, gallery and reports around it stay.
|
||||
import TableTalk from './TableTalk.svelte';
|
||||
import { HIGHEST, TARGET } from '$lib/game';
|
||||
import type { Room } from '$lib/net/room.svelte';
|
||||
|
||||
let { room }: { room: Room } = $props();
|
||||
|
||||
const g = $derived(room.state!);
|
||||
let pick = $state(0);
|
||||
|
||||
async function play() {
|
||||
if (!pick) return;
|
||||
if (await room.submit({ pick })) pick = 0;
|
||||
}
|
||||
</script>
|
||||
|
||||
<main class="board">
|
||||
<section class="play">
|
||||
<table class="rounds">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="turn"><span class="visually-hidden">Round</span></th>
|
||||
{#each g.seats as id (id)}
|
||||
<th class:you={id === room.me}>{g.players[id].name}{#if id === room.me} (you){/if}</th>
|
||||
{/each}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{#each g.rounds as round, i (i)}
|
||||
<tr>
|
||||
<td class="turn">{i + 1}</td>
|
||||
{#each g.seats as id (id)}
|
||||
<td class:scored={round.scorer === id}>{round.picks[id]}</td>
|
||||
{/each}
|
||||
</tr>
|
||||
{/each}
|
||||
{#if !g.over}
|
||||
<tr class="draft">
|
||||
<td class="turn">{g.rounds.length + 1}</td>
|
||||
{#each g.seats as id (id)}
|
||||
<td class="muted">{id === room.me && pick ? pick : '?'}</td>
|
||||
{/each}
|
||||
</tr>
|
||||
{/if}
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
{#if g.over}
|
||||
<div class="verdict">
|
||||
<h2>{g.over.winner === room.me ? 'You win.' : g.over.winner ? `${g.players[g.over.winner].name} wins.` : 'A draw.'}</h2>
|
||||
<p>{g.over.reason}</p>
|
||||
<a class="commit" href="/">Back to the hall</a>
|
||||
</div>
|
||||
{:else if room.spectating}
|
||||
<section class="move">
|
||||
<h2>You watch from the Peanut Gallery</h2>
|
||||
<p class="muted">{room.awaitingText ? `${room.awaitingText} ${room.awaiting.length === 1 ? 'is' : 'are'} still choosing.` : 'The round is being written.'}</p>
|
||||
</section>
|
||||
{:else}
|
||||
<section class="move">
|
||||
<h2>Round {g.rounds.length + 1}: name a number</h2>
|
||||
<p class="muted">The highest number named by exactly one player scores. First to {TARGET}.</p>
|
||||
<div class="picks">
|
||||
{#each Array.from({ length: HIGHEST }, (_, i) => i + 1) as n (n)}
|
||||
<button type="button" class="pick" class:chosen={pick === n} disabled={room.moved} onclick={() => (pick = n)}>{n}</button>
|
||||
{/each}
|
||||
</div>
|
||||
<button type="button" class="commit" disabled={!pick || room.moved || room.sending} onclick={play}>
|
||||
{room.moved ? `Waiting on ${room.awaitingText}` : room.sending ? 'Sending' : 'Commit'}
|
||||
</button>
|
||||
{#if room.error}<p class="warning">{room.error}</p>{/if}
|
||||
</section>
|
||||
{/if}
|
||||
</section>
|
||||
|
||||
<aside class="rail">
|
||||
<section class="standings">
|
||||
<h2>Standings</h2>
|
||||
<ul>
|
||||
{#each g.seats as id (id)}
|
||||
<li><span>{g.players[id].name}</span><span>{g.players[id].points} / {TARGET}</span></li>
|
||||
{/each}
|
||||
</ul>
|
||||
</section>
|
||||
<TableTalk {room} />
|
||||
</aside>
|
||||
</main>
|
||||
|
||||
<style>
|
||||
.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;
|
||||
}
|
||||
|
||||
@media (max-width: 860px) {
|
||||
.board {
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
.rounds {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
font-size: 1.3rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.rounds th {
|
||||
font-weight: 500;
|
||||
font-style: italic;
|
||||
font-size: 1rem;
|
||||
padding: 0.3rem 0;
|
||||
border-bottom: 1px solid var(--rule-strong);
|
||||
}
|
||||
|
||||
.rounds th.you {
|
||||
color: var(--frost);
|
||||
}
|
||||
|
||||
.rounds td {
|
||||
padding: 0.35rem 0;
|
||||
border-bottom: 1px solid var(--rule);
|
||||
}
|
||||
|
||||
.rounds .turn {
|
||||
width: 2.5rem;
|
||||
font-size: 0.8rem;
|
||||
color: var(--bone-faint);
|
||||
}
|
||||
|
||||
.rounds td.scored {
|
||||
color: var(--ember);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.rounds tr.draft td {
|
||||
background: var(--slate);
|
||||
}
|
||||
|
||||
.move,
|
||||
.verdict {
|
||||
margin-top: 1.2rem;
|
||||
}
|
||||
|
||||
.move h2,
|
||||
.verdict h2 {
|
||||
font-size: 1.3rem;
|
||||
margin-bottom: 0.4rem;
|
||||
}
|
||||
|
||||
.picks {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
margin: 0.8rem 0;
|
||||
}
|
||||
|
||||
.pick {
|
||||
width: 3rem;
|
||||
height: 3rem;
|
||||
font-size: 1.3rem;
|
||||
background: var(--slate);
|
||||
border: 1px solid var(--rule-strong);
|
||||
border-radius: 6px;
|
||||
color: var(--bone);
|
||||
}
|
||||
|
||||
.pick.chosen {
|
||||
border-color: var(--ember);
|
||||
color: var(--ember);
|
||||
}
|
||||
|
||||
.verdict .commit {
|
||||
display: inline-block;
|
||||
margin-top: 0.6rem;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.standings h2 {
|
||||
font-size: 1.1rem;
|
||||
font-style: italic;
|
||||
margin: 0.75rem 0 0.4rem;
|
||||
}
|
||||
|
||||
.standings ul {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.standings li {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 0.3rem 0;
|
||||
border-bottom: 1px solid var(--rule);
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,581 @@
|
||||
<script lang="ts">
|
||||
// The hall: the landing page every game in the kit shares. Name, play the
|
||||
// bot, open a table, join by code, the ledger of your tables, and the
|
||||
// about panel with the rules, the guide and a way to reach the keeper.
|
||||
import { goto } from '$app/navigation';
|
||||
import { otherGames, type FamilyGame } from '$lib/family';
|
||||
import { allSeats, doubtSeat, forgetSeat, rememberSeat, ServerError, trustSeat, type Report } from '$lib/net/client';
|
||||
import { api, NAME_MAX, playerName, rememberName, Room } from '$lib/net/room.svelte';
|
||||
import { unreadTalk } from '$lib/net/talk';
|
||||
import type { RoomView } from '$lib/net/view';
|
||||
import type { State } from '$lib/game';
|
||||
import { game } from '$lib/game';
|
||||
|
||||
let name = $state(playerName());
|
||||
let code = $state('');
|
||||
/** The host's choices for the next table, from the game's declared options. */
|
||||
let options = $state<Record<string, string>>(Object.fromEntries((game.options ?? []).map((o) => [o.key, o.default])));
|
||||
let busy = $state(false);
|
||||
let error = $state('');
|
||||
let seats = $state(allSeats());
|
||||
let games = $state<Record<string, RoomView<State> | null>>({});
|
||||
let aboutOpen = $state(false);
|
||||
/** The other games of the Kestrel's Nest, for the about panel. */
|
||||
let family = $state<FamilyGame[]>([]);
|
||||
$effect(() => {
|
||||
void otherGames('hnefatafl').then((g) => (family = g));
|
||||
});
|
||||
/** Reports this browser's seats have filed, with the keeper's replies. */
|
||||
let reports = $state<Report[]>([]);
|
||||
let answers = $state<Record<string, string>>({});
|
||||
let answerError = $state('');
|
||||
|
||||
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.
|
||||
$effect(() => {
|
||||
for (const held of seats) {
|
||||
if (held.roomId in games) continue;
|
||||
games[held.roomId] = null;
|
||||
api.view(held.roomId, held.token)
|
||||
.then((v) => {
|
||||
trustSeat(held.roomId);
|
||||
games[held.roomId] = v;
|
||||
})
|
||||
.catch((e: unknown) => {
|
||||
games[held.roomId] = null;
|
||||
if (e instanceof ServerError && (e.status === 403 || e.status === 404) && doubtSeat(held.roomId)) seats = allSeats();
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
let phrase = $state('');
|
||||
let claiming = $state(false);
|
||||
|
||||
/** Bring a seat from another device by the phrase it minted. */
|
||||
async function claim(e: SubmitEvent) {
|
||||
e.preventDefault();
|
||||
claiming = true;
|
||||
error = '';
|
||||
try {
|
||||
const got = await api.claim(phrase.trim());
|
||||
rememberSeat(got.roomId, { seat: got.seat, token: got.token });
|
||||
await goto(`/join/${got.roomId}`);
|
||||
} catch (err) {
|
||||
error = err instanceof Error ? err.message : 'The phrase opened no seat.';
|
||||
} finally {
|
||||
claiming = false;
|
||||
}
|
||||
}
|
||||
|
||||
// The desk is asked once per visit for every seat this browser holds.
|
||||
$effect(() => {
|
||||
const held = seats;
|
||||
if (!held.length) return;
|
||||
api.myReports(held.map((h) => ({ roomId: h.roomId, token: h.token })))
|
||||
.then((r) => (reports = r.reports.sort((a, b) => (a.at < b.at ? 1 : -1))))
|
||||
.catch(() => (reports = []));
|
||||
});
|
||||
|
||||
async function open(make: () => Promise<Room>) {
|
||||
busy = true;
|
||||
error = '';
|
||||
try {
|
||||
rememberName(name);
|
||||
const room = await make();
|
||||
await goto(`/join/${room.roomId}`);
|
||||
} catch (e) {
|
||||
error = e instanceof Error ? e.message : 'The table could not be opened.';
|
||||
} finally {
|
||||
busy = false;
|
||||
}
|
||||
}
|
||||
|
||||
function join(e: SubmitEvent) {
|
||||
e.preventDefault();
|
||||
rememberName(name);
|
||||
const c = code.trim().toUpperCase();
|
||||
if (c) void goto(`/join/${c}`);
|
||||
}
|
||||
|
||||
function forget(roomId: string) {
|
||||
forgetSeat(roomId);
|
||||
seats = allSeats();
|
||||
}
|
||||
|
||||
function status(held: { roomId: string; seat: string }): string {
|
||||
const g = games[held.roomId];
|
||||
if (g === undefined) return 'looking';
|
||||
if (g === null) return 'unreachable';
|
||||
const others = g.seats.filter((s) => s.id !== held.seat).map((s) => (s.bot ? `${s.name} (the bot)` : s.name));
|
||||
if (!g.state) return `waiting to start${g.seats.length ? ` · ${g.seats.map((s) => s.name).join(', ')}` : ''}`;
|
||||
if (g.over) {
|
||||
if (g.over.winner === held.seat) return 'you won';
|
||||
if (g.over.winner === null) return 'a draw';
|
||||
return `${game.nameOf(g.state, g.over.winner)} won`;
|
||||
}
|
||||
const round = `round ${g.turn}`;
|
||||
if (g.waitingOn.includes(held.seat)) return `your move · ${round} · against ${others.join(', ')}`;
|
||||
return `waiting on ${g.waitingOn.map((id) => game.nameOf(g.state!, id)).join(', ')} · ${round}`;
|
||||
}
|
||||
|
||||
function unread(held: { roomId: string }): number {
|
||||
const g = games[held.roomId];
|
||||
return g ? unreadTalk(held.roomId, g.chat.length) : 0;
|
||||
}
|
||||
|
||||
function yourMove(held: { roomId: string; seat: string }): boolean {
|
||||
const g = games[held.roomId];
|
||||
return !!g?.state && !g.over && g.waitingOn.includes(held.seat);
|
||||
}
|
||||
|
||||
async function answer(r: Report) {
|
||||
const text = (answers[r.id] ?? '').trim();
|
||||
const held = seats.find((h) => h.roomId === r.roomId);
|
||||
if (!text || !held) return;
|
||||
answerError = '';
|
||||
try {
|
||||
await api.answerReport(r.id, r.roomId, held.token, text);
|
||||
r.thread.push({ at: new Date().toISOString(), text, from: 'player' });
|
||||
answers[r.id] = '';
|
||||
} catch (e) {
|
||||
answerError = e instanceof Error ? e.message : 'The answer did not reach the keeper.';
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<section class="lid">
|
||||
<div class="lid-head">
|
||||
<h1>Hnefatafl</h1>
|
||||
<p class="pitch">One line that says what the game is.</p>
|
||||
<p class="tag">Two or three sentences for someone who has never heard of it: what you do on a turn, what makes it fun, and that it is free to play here against the bot or with friends.</p>
|
||||
<p class="links"><a href="/guide">how to play</a> · <a href="/rules">the rules</a> · <a class="about-link" href="#about" onclick={() => (aboutOpen = true)}>about this game — a labor of love</a></p>
|
||||
</div>
|
||||
|
||||
<div class="lid-play">
|
||||
<label class="name">
|
||||
<span>Your name</span>
|
||||
<input type="text" bind:value={name} maxlength={NAME_MAX} placeholder="e.g. Morwenna" autocomplete="nickname" />
|
||||
</label>
|
||||
{#if game.options?.length}
|
||||
<div class="options">
|
||||
{#each game.options as o (o.key)}
|
||||
<label class="option">
|
||||
<span>{o.label}</span>
|
||||
<select bind:value={options[o.key]}>
|
||||
{#each o.choices as c (c.value)}<option value={c.value}>{c.label}</option>{/each}
|
||||
</select>
|
||||
</label>
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
<button type="button" class="commit primary" disabled={!ready || busy} onclick={() => open(() => Room.createWithBot(name.trim(), options))}>Play now against the bot</button>
|
||||
<div class="ways">
|
||||
<button type="button" class="quiet" disabled={!ready || busy} onclick={() => open(() => Room.create(name.trim(), game.seatIds.length, options))}>Open a table</button>
|
||||
<form class="joinform" onsubmit={join}>
|
||||
<span class="or">or join one</span>
|
||||
<input type="text" class="code" bind:value={code} maxlength="4" placeholder="CODE" autocapitalize="characters" autocomplete="off" aria-label="room code" />
|
||||
<button type="submit" class="quiet" disabled={!ready || code.trim().length < 4}>Join</button>
|
||||
</form>
|
||||
</div>
|
||||
<p class="muted small">A code opens the door either way: take a seat if one is free, or watch from the Peanut Gallery.</p>
|
||||
<form class="joinform claimform" onsubmit={claim}>
|
||||
<span class="or">or bring a seat from another device</span>
|
||||
<input type="text" bind:value={phrase} placeholder="the four-word phrase" autocomplete="off" aria-label="transfer phrase" />
|
||||
<button type="submit" class="quiet" disabled={claiming || phrase.trim().split(/[\s-]+/).length < 4}>Claim</button>
|
||||
</form>
|
||||
{#if error}<p class="warning">{error}</p>{/if}
|
||||
</div>
|
||||
|
||||
<div class="lid-look" aria-hidden="true">
|
||||
<!-- A still of the game at its most characteristic: a few rounds of the ledger, a board mid-play. -->
|
||||
<p class="caption">A picture of the game goes here.</p>
|
||||
</div>
|
||||
|
||||
{#if seats.length}
|
||||
<div class="ledger">
|
||||
<div class="ledger-head">your games</div>
|
||||
{#each seats as held (held.roomId)}
|
||||
<div class="ledger-row" class:your-move={yourMove(held)}>
|
||||
<a class="ledger-resume" href={`/join/${held.roomId}`}>
|
||||
<span class="ledger-code">{held.roomId}</span>
|
||||
<span class="ledger-info">{status(held)}{#if unread(held) > 0} · <span class="talk-new">{unread(held)} new {unread(held) === 1 ? 'line' : 'lines'} of talk</span>{/if}</span>
|
||||
</a>
|
||||
<button type="button" class="ledger-forget" title="forget this game" onclick={() => forget(held.roomId)}>×</button>
|
||||
</div>
|
||||
{/each}
|
||||
{#if reports.length}
|
||||
<div class="ledger-head reports-head">your reports to the keeper</div>
|
||||
{#each reports as r (r.id)}
|
||||
{@const last = r.thread[r.thread.length - 1]}
|
||||
<div class="report-row">
|
||||
<span class="ledger-code">{r.roomId}</span>
|
||||
<div class="report-body">
|
||||
<p class="report-text">“{r.happened}”{#if r.image}<span class="muted" title="with your screenshot"> (with a picture)</span>{/if}</p>
|
||||
{#each r.thread as line, j (j)}
|
||||
{#if line.from === 'player'}
|
||||
<p class="report-reply yours">you: {line.text}</p>
|
||||
{:else}
|
||||
<p class="report-reply"><span class="report-status">{line.status}</span> {line.text}</p>
|
||||
{/if}
|
||||
{/each}
|
||||
{#if !last}
|
||||
<p class="report-reply pending">the keeper is studying the moment</p>
|
||||
{:else if last.from === 'player'}
|
||||
<p class="report-reply pending">your word is with the keeper</p>
|
||||
{/if}
|
||||
{#if r.thread.some((l) => l.from === 'desk')}
|
||||
<form class="report-answer" onsubmit={(e) => { e.preventDefault(); void answer(r); }}>
|
||||
<input type="text" bind:value={answers[r.id]} maxlength="2000" placeholder="answer the keeper" aria-label="answer the keeper" />
|
||||
<button type="submit" class="quiet" disabled={!(answers[r.id] ?? '').trim()}>Send</button>
|
||||
</form>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
{/each}
|
||||
{#if answerError}<p class="warning">{answerError}</p>{/if}
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<details class="about" id="about" bind:open={aboutOpen}>
|
||||
<summary>about this game</summary>
|
||||
<div class="about-body">
|
||||
<p>Where the game comes from, who made the original and when, and how the keeper of this page first met it.</p>
|
||||
<p>What this version keeps and what it changes. Where the rules text it follows lives (the <a href="/rules">rules page</a>), and any borrowed art or text with its notice.</p>
|
||||
<p>It is free and keeps no accounts. A game between people lives on a small server as an append-only ledger of moves, so it can be replayed from its first move, and each player is shown only what the rules let them see.</p>
|
||||
<h3>Send word</h3>
|
||||
<p>A rule read wrong, a bug, a game 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>
|
||||
{#if family.length}
|
||||
<h3>More games at the Kestrel's Nest</h3>
|
||||
<ul class="family">
|
||||
{#each family as g (g.slug)}
|
||||
<li><a href={g.url}>{g.name}</a>: {g.pitch} <span class="muted">{g.players} players; {g.origin}.</span></li>
|
||||
{/each}
|
||||
</ul>
|
||||
{/if}
|
||||
<p class="made">Hnefatafl is its designer's. This page was made by Eric and a very enthusiastic AI, 2026.</p>
|
||||
</div>
|
||||
</details>
|
||||
</section>
|
||||
|
||||
<style>
|
||||
.lid {
|
||||
width: 100%;
|
||||
max-width: 54rem;
|
||||
background: var(--slate);
|
||||
border: 1px solid var(--rule-strong);
|
||||
border-radius: 8px;
|
||||
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';
|
||||
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';
|
||||
}
|
||||
}
|
||||
|
||||
.lid-head {
|
||||
grid-area: head;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: clamp(2.6rem, 6vw, 3.6rem);
|
||||
font-weight: 300;
|
||||
letter-spacing: -0.01em;
|
||||
}
|
||||
|
||||
.pitch {
|
||||
font-style: italic;
|
||||
font-size: 1.2rem;
|
||||
margin-top: 0.3rem;
|
||||
}
|
||||
|
||||
.tag {
|
||||
color: var(--bone-dim);
|
||||
max-width: 40em;
|
||||
margin: 0.6rem auto 0.4rem;
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
.links {
|
||||
font-size: 0.95rem;
|
||||
color: var(--bone-faint);
|
||||
}
|
||||
|
||||
.links a {
|
||||
color: var(--frost);
|
||||
}
|
||||
|
||||
.about-link {
|
||||
font-style: italic;
|
||||
text-decoration: underline dotted;
|
||||
}
|
||||
|
||||
.lid-play {
|
||||
grid-area: play;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.8rem;
|
||||
}
|
||||
|
||||
.name {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.name span {
|
||||
display: block;
|
||||
font-size: 0.8rem;
|
||||
letter-spacing: 0.12em;
|
||||
color: var(--bone-dim);
|
||||
margin-bottom: 0.3rem;
|
||||
}
|
||||
|
||||
.name input {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.commit.primary {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.small {
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.ways {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
gap: 0.6rem 1rem;
|
||||
}
|
||||
|
||||
.joinform {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.or {
|
||||
color: var(--bone-dim);
|
||||
font-style: italic;
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
.code {
|
||||
width: 6.5em;
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.15em;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.lid-look {
|
||||
grid-area: look;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
min-height: 8rem;
|
||||
background: var(--slate-deep);
|
||||
border: 1px solid var(--rule-strong);
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.caption {
|
||||
font-size: 0.85rem;
|
||||
color: var(--bone-dim);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* the games ledger */
|
||||
.ledger {
|
||||
grid-area: ledger;
|
||||
border-top: 1px solid var(--rule-strong);
|
||||
padding-top: 0.5rem;
|
||||
}
|
||||
|
||||
.ledger-head {
|
||||
font-style: italic;
|
||||
color: var(--bone-dim);
|
||||
margin-bottom: 0.3rem;
|
||||
}
|
||||
|
||||
.ledger-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.4rem;
|
||||
border-radius: 4px;
|
||||
padding: 0.15rem 0.3rem;
|
||||
}
|
||||
|
||||
.ledger-row.your-move {
|
||||
background: rgba(240, 165, 58, 0.08);
|
||||
}
|
||||
|
||||
.ledger-row.your-move .ledger-info {
|
||||
color: var(--ember);
|
||||
}
|
||||
|
||||
.ledger-resume {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: 0.9rem;
|
||||
min-width: 0;
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
padding: 0.25rem 0;
|
||||
}
|
||||
|
||||
.ledger-resume:hover .ledger-code {
|
||||
color: var(--frost);
|
||||
}
|
||||
|
||||
.ledger-code {
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.12em;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.ledger-info {
|
||||
color: var(--bone-dim);
|
||||
font-size: 0.95rem;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
.talk-new {
|
||||
color: var(--frost);
|
||||
}
|
||||
|
||||
.ledger-forget {
|
||||
background: none;
|
||||
border: 0;
|
||||
color: var(--bone-faint);
|
||||
font-size: 1.1rem;
|
||||
padding: 0 0.4rem;
|
||||
}
|
||||
|
||||
.ledger-forget:hover {
|
||||
color: var(--blood);
|
||||
}
|
||||
|
||||
.reports-head {
|
||||
margin-top: 0.9rem;
|
||||
}
|
||||
|
||||
.report-row {
|
||||
display: flex;
|
||||
gap: 0.75rem;
|
||||
align-items: flex-start;
|
||||
padding: 0.45rem 0;
|
||||
border-top: 1px solid var(--rule);
|
||||
}
|
||||
|
||||
.report-body {
|
||||
min-width: 0;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.report-text {
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
.report-reply {
|
||||
font-size: 0.85rem;
|
||||
color: var(--bone-dim);
|
||||
margin-top: 0.2rem;
|
||||
}
|
||||
|
||||
.report-reply.yours {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.report-reply.pending {
|
||||
font-style: italic;
|
||||
color: var(--bone-faint);
|
||||
}
|
||||
|
||||
.report-status {
|
||||
color: var(--ember);
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.report-answer {
|
||||
display: flex;
|
||||
gap: 0.4rem;
|
||||
margin-top: 0.4rem;
|
||||
}
|
||||
|
||||
.report-answer input {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
/* about */
|
||||
.about {
|
||||
grid-area: about;
|
||||
border-top: 1px solid var(--rule-strong);
|
||||
padding-top: 0.5rem;
|
||||
}
|
||||
|
||||
.about summary {
|
||||
cursor: pointer;
|
||||
font-style: italic;
|
||||
color: var(--bone-dim);
|
||||
}
|
||||
|
||||
.about-body {
|
||||
max-width: 44em;
|
||||
color: var(--bone-dim);
|
||||
padding: 0.6rem 0 0.2rem;
|
||||
}
|
||||
|
||||
.about-body p + p {
|
||||
margin-top: 0.6rem;
|
||||
}
|
||||
|
||||
.about-body a {
|
||||
color: var(--frost);
|
||||
}
|
||||
|
||||
.about-body h3 {
|
||||
font-size: 1rem;
|
||||
font-style: italic;
|
||||
margin: 0.9rem 0 0.2rem;
|
||||
color: var(--bone);
|
||||
}
|
||||
|
||||
.about-body .made {
|
||||
font-size: 0.85rem;
|
||||
color: var(--bone-faint);
|
||||
}
|
||||
.family {
|
||||
margin: 0.4rem 0 0.8rem 1.2rem;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.family li + li {
|
||||
margin-top: 0.3rem;
|
||||
}
|
||||
.options {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5rem 1.2rem;
|
||||
margin: 0.2rem 0 0.6rem;
|
||||
}
|
||||
|
||||
.option {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,210 @@
|
||||
<script lang="ts">
|
||||
import TableTalk from './TableTalk.svelte';
|
||||
import type { Room } from '$lib/net/room.svelte';
|
||||
|
||||
let { room, link }: { room: Room; link: string } = $props();
|
||||
|
||||
const v = $derived(room.view);
|
||||
const hostName = $derived(v.seats.find((s) => s.id === v.host)?.name ?? 'the host');
|
||||
const seatFree = $derived(v.seats.length < v.size);
|
||||
/** A seat is free for a newcomer once the held ones are counted. */
|
||||
const seatOpen = $derived(v.seats.length + v.expected.length < v.size);
|
||||
const keeperSeated = $derived(v.seats.some((s) => s.name.toLowerCase() === v.keeper.toLowerCase()));
|
||||
let copied = $state(false);
|
||||
|
||||
/** The hour where the keeper lives, in words, so a caller knows whether to wait. */
|
||||
let minute = $state(0);
|
||||
$effect(() => {
|
||||
const id = setInterval(() => (minute += 1), 60_000);
|
||||
return () => clearInterval(id);
|
||||
});
|
||||
const keeperHour = $derived.by(() => {
|
||||
void minute;
|
||||
try {
|
||||
const hour = Number(new Intl.DateTimeFormat('en-US', { hour: 'numeric', hour12: false, timeZone: v.keeperZone }).format(new Date())) % 24;
|
||||
if (hour === 0) return 'midnight';
|
||||
if (hour === 12) return 'noon';
|
||||
const word = ['twelve', 'one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight', 'nine', 'ten', 'eleven'][hour % 12];
|
||||
const part = hour < 5 ? 'in the small hours' : hour < 12 ? 'in the morning' : hour < 18 ? 'in the afternoon' : 'in the evening';
|
||||
return `${word} ${part}`;
|
||||
} catch {
|
||||
return '';
|
||||
}
|
||||
});
|
||||
|
||||
async function copyLink() {
|
||||
try {
|
||||
await navigator.clipboard.writeText(link);
|
||||
copied = true;
|
||||
setTimeout(() => (copied = false), 1600);
|
||||
} catch {
|
||||
// The link is on screen to copy by hand.
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<section class="lobby">
|
||||
{#if room.spectating}
|
||||
<h2>At the table</h2>
|
||||
{#if seatFree}
|
||||
<p>{hostName} is gathering players. Sit down above, or watch from the gallery until the game begins.</p>
|
||||
{:else}
|
||||
<p>The table is full. You watch from the Peanut Gallery; the game begins when {hostName} says.</p>
|
||||
{/if}
|
||||
{:else}
|
||||
<p class="eyebrow">room {v.roomId}</p>
|
||||
<h2>The table is laid</h2>
|
||||
<p>Send this link, or the code. Whoever opens it takes a seat, and the game begins when you say. Anyone who arrives once it has begun watches from the Peanut Gallery.</p>
|
||||
<p class="link-row"><code>{link}</code><button type="button" class="quiet" onclick={copyLink}>{copied ? 'Copied' : 'Copy link'}</button></p>
|
||||
{/if}
|
||||
<ul class="roster">
|
||||
{#each v.seats as s (s.id)}
|
||||
<li>
|
||||
<span class="seat-name">{s.name}</span>
|
||||
<span class="muted">{s.id === v.host ? 'opened the table' : s.bot ? 'the bot' : 'seated'}{s.id === v.me ? ', you' : ''}{#if s.bot && room.isHost}
|
||||
<button type="button" class="unseat" title="Send this bot away" aria-label="Send {s.name} away" onclick={() => room.unseat(s.id)}>×</button>{/if}</span>
|
||||
</li>
|
||||
{/each}
|
||||
{#each v.expected as name (name)}
|
||||
<li>
|
||||
<span class="seat-name">{name}</span>
|
||||
<span class="muted">{v.challenge && name.toLowerCase() === v.keeper.toLowerCase() ? 'called to the table; a seat is held' : 'from the last table; a seat is held'}</span>
|
||||
</li>
|
||||
{/each}
|
||||
<li class="empty muted">{v.size - v.seats.length - v.expected.length} of {v.size} seats empty{#if v.audience > 0}; {v.audience} in the gallery{v.galleryTalk ? ', allowed to talk' : ''}{/if}</li>
|
||||
</ul>
|
||||
{#if v.rematchOf}
|
||||
<p class="muted">A rematch of table {v.rematchOf}: the same company, seats held for those not yet back.</p>
|
||||
{/if}
|
||||
{#if !room.spectating}
|
||||
<div class="ways">
|
||||
{#if seatFree && room.isHost}
|
||||
<button type="button" class="quiet" onclick={() => room.addBot()}>Seat a bot</button>
|
||||
{/if}
|
||||
{#if room.isHost}
|
||||
<button type="button" class="commit small" disabled={v.seats.length < 2} onclick={() => room.begin()}>Begin</button>
|
||||
<span class="muted">{v.seats.length < 2 ? 'once a second player is seated' : `with ${v.seats.length} players`}</span>
|
||||
{:else}
|
||||
<span class="muted">{hostName} will begin when the table is ready.</span>
|
||||
{/if}
|
||||
</div>
|
||||
{#if room.isHost}
|
||||
<label class="switch muted">
|
||||
<input type="checkbox" checked={v.galleryTalk} onchange={(e) => room.setGalleryTalk(e.currentTarget.checked)} />
|
||||
Let the Peanut Gallery talk at the table
|
||||
</label>
|
||||
{/if}
|
||||
{#if v.keeper && !v.challenge && !keeperSeated && seatOpen}
|
||||
<div class="keeper">
|
||||
<button type="button" class="quiet" title="A seat is held for {v.keeper}, who keeps this site, and their phone rings" onclick={() => room.callKeeper()}>Challenge {v.keeper}, the keeper</button>
|
||||
<p class="muted small">{v.keeper} keeps this site and answers every call, sometimes within the minute, sometimes after a night's sleep.{#if keeperHour} It is {keeperHour} where {v.keeper} lives.{/if} The seat is held either way.</p>
|
||||
</div>
|
||||
{:else if v.challenge}
|
||||
<p class="muted small">{v.keeper} has been called to the table by {room.nameOf(v.challenge.by)}.{#if keeperHour} It is {keeperHour} there.{/if} A seat is held: if they can come now they will take it; if they are asleep or away they will leave a word below when they can. Meanwhile the table is yours: seat a bot, invite a friend, or open another game in a new tab and play on. This table keeps its place in your hall until you come back.</p>
|
||||
{/if}
|
||||
{/if}
|
||||
{#if room.error}<p class="warning">{room.error}</p>{/if}
|
||||
<div class="lobby-talk"><TableTalk {room} /></div>
|
||||
</section>
|
||||
|
||||
<style>
|
||||
.lobby {
|
||||
max-width: 1280px;
|
||||
margin: 0 auto;
|
||||
padding: 1rem var(--gutter) 2rem;
|
||||
}
|
||||
|
||||
.lobby h2 {
|
||||
font-size: 1.4rem;
|
||||
margin-bottom: 0.4rem;
|
||||
}
|
||||
|
||||
.lobby p + p {
|
||||
margin-top: 0.6rem;
|
||||
}
|
||||
|
||||
.roster {
|
||||
list-style: none;
|
||||
margin: 0.9rem 0 0.6rem;
|
||||
padding: 0;
|
||||
max-width: 28em;
|
||||
}
|
||||
|
||||
.roster li {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 1rem;
|
||||
padding: 0.3rem 0;
|
||||
border-bottom: 1px solid var(--rule);
|
||||
}
|
||||
|
||||
.roster li.empty {
|
||||
border-bottom: 0;
|
||||
justify-content: flex-start;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.seat-name {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.unseat {
|
||||
background: none;
|
||||
border: 0;
|
||||
color: var(--bone-faint);
|
||||
font-size: 1.1rem;
|
||||
padding: 0 0.3rem;
|
||||
margin-left: 0.3rem;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.unseat:hover {
|
||||
color: var(--blood);
|
||||
}
|
||||
|
||||
.ways {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
gap: 0.5rem 0.9rem;
|
||||
margin-top: 0.4rem;
|
||||
}
|
||||
|
||||
.link-row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
gap: 0.5rem 0.75rem;
|
||||
}
|
||||
|
||||
code {
|
||||
font-family: var(--font);
|
||||
background: var(--slate);
|
||||
padding: 0.3rem 0.6rem;
|
||||
border-radius: 4px;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.lobby-talk {
|
||||
max-width: 28em;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.switch {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
margin-top: 0.6rem;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.keeper {
|
||||
margin-top: 0.8rem;
|
||||
max-width: 38em;
|
||||
}
|
||||
|
||||
.small {
|
||||
font-size: 0.85rem;
|
||||
margin-top: 0.4rem;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,165 @@
|
||||
<script lang="ts">
|
||||
import { api, type Room } from '$lib/net/room.svelte';
|
||||
|
||||
let { room, open = $bindable(false) }: { room: Room; open?: boolean } = $props();
|
||||
|
||||
let happened = $state('');
|
||||
let expected = $state('');
|
||||
let image = $state<File | null>(null);
|
||||
let preview = $state<string | null>(null);
|
||||
let busy = $state(false);
|
||||
let sent = $state(false);
|
||||
let error = $state('');
|
||||
|
||||
function pickImage(e: Event) {
|
||||
const file = (e.currentTarget as HTMLInputElement).files?.[0] ?? null;
|
||||
if (preview) URL.revokeObjectURL(preview);
|
||||
if (file && file.size > 2_500_000) {
|
||||
error = 'That picture is over 2.5 MB; a smaller one, please.';
|
||||
image = null;
|
||||
preview = null;
|
||||
return;
|
||||
}
|
||||
error = '';
|
||||
image = file;
|
||||
preview = file ? URL.createObjectURL(file) : null;
|
||||
}
|
||||
|
||||
function close() {
|
||||
open = false;
|
||||
if (preview) URL.revokeObjectURL(preview);
|
||||
happened = '';
|
||||
expected = '';
|
||||
image = null;
|
||||
preview = null;
|
||||
sent = false;
|
||||
error = '';
|
||||
}
|
||||
|
||||
async function send(e: SubmitEvent) {
|
||||
e.preventDefault();
|
||||
const r = room;
|
||||
if (!happened.trim() || busy) return;
|
||||
busy = true;
|
||||
error = '';
|
||||
try {
|
||||
const { id } = await api.report(r.roomId, r.token, happened.trim(), expected.trim());
|
||||
if (image) await api.reportImage(id, image).catch(() => (error = 'The report went; the picture did not.'));
|
||||
sent = true;
|
||||
setTimeout(close, 2200);
|
||||
} catch (err) {
|
||||
error = err instanceof Error ? err.message : 'The report did not reach the keeper.';
|
||||
} finally {
|
||||
busy = false;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
{#if open}
|
||||
<div class="scrim" role="presentation" onclick={(ev) => ev.target === ev.currentTarget && close()}>
|
||||
<form class="slip" aria-labelledby="report-heading" onsubmit={send}>
|
||||
<h2 id="report-heading">Something amiss?</h2>
|
||||
{#if sent}
|
||||
<p class="thanks">Recorded beside the room's ledger, with the round. Thank you; the keeper will study the moment.{#if error} {error}{/if}</p>
|
||||
{:else}
|
||||
<label class="field">
|
||||
<span>What happened?</span>
|
||||
<textarea bind:value={happened} rows="3" maxlength="2000" placeholder="e.g. my move went in but nothing changed"></textarea>
|
||||
</label>
|
||||
<label class="field">
|
||||
<span>What did you expect?</span>
|
||||
<textarea bind:value={expected} rows="2" maxlength="2000" placeholder="e.g. a point for me"></textarea>
|
||||
</label>
|
||||
<label class="field picture">
|
||||
<span>A screenshot, if you have one</span>
|
||||
<input type="file" accept="image/png,image/jpeg,image/webp" onchange={pickImage} />
|
||||
{#if preview}<img class="preview" src={preview} alt="The screenshot you chose" />{/if}
|
||||
</label>
|
||||
<p class="muted small">The room code and the round ride along; the keeper can replay the game to this moment.</p>
|
||||
{#if error}<p class="warning">{error}</p>{/if}
|
||||
<div class="actions">
|
||||
<button type="submit" class="commit small" disabled={!happened.trim() || busy}>{busy ? 'Sending' : 'Send it'}</button>
|
||||
<button type="button" class="link" onclick={close}>never mind</button>
|
||||
</div>
|
||||
{/if}
|
||||
</form>
|
||||
</div>
|
||||
{/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%;
|
||||
overflow-y: auto;
|
||||
background: var(--slate);
|
||||
border: 1px solid var(--rule-strong);
|
||||
border-radius: 6px;
|
||||
padding: 1rem 1.2rem 1.2rem;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.3rem;
|
||||
margin-bottom: 0.6rem;
|
||||
}
|
||||
|
||||
.field {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.25rem;
|
||||
margin-top: 0.7rem;
|
||||
}
|
||||
|
||||
|
||||
.picture input {
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.preview {
|
||||
max-height: 8rem;
|
||||
max-width: 100%;
|
||||
border: 1px solid var(--rule);
|
||||
border-radius: 3px;
|
||||
margin-top: 0.3rem;
|
||||
}
|
||||
|
||||
.small {
|
||||
font-size: 0.85rem;
|
||||
margin-top: 0.6rem;
|
||||
}
|
||||
|
||||
.warning {
|
||||
color: var(--blood);
|
||||
margin-top: 0.4rem;
|
||||
}
|
||||
|
||||
.thanks {
|
||||
color: var(--bone);
|
||||
}
|
||||
|
||||
.actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
margin-top: 0.9rem;
|
||||
}
|
||||
|
||||
|
||||
.link {
|
||||
background: none;
|
||||
border: 0;
|
||||
color: var(--bone-dim);
|
||||
text-decoration: underline dotted;
|
||||
padding: 0;
|
||||
font: inherit;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,132 @@
|
||||
<script lang="ts">
|
||||
import { tick } from 'svelte';
|
||||
import { NAME_MAX, playerName, rememberName, type Room } from '$lib/net/room.svelte';
|
||||
|
||||
let { room }: { room: Room } = $props();
|
||||
|
||||
const lines = $derived(room.view.chat);
|
||||
let draft = $state('');
|
||||
/** The gallery signs its lines; the name is the one the hall remembers. */
|
||||
let galleryName = $state(playerName());
|
||||
let sending = $state(false);
|
||||
let list = $state<HTMLElement | null>(null);
|
||||
|
||||
// New talk scrolls into view, as at any table.
|
||||
$effect(() => {
|
||||
void lines.length;
|
||||
void tick().then(() => {
|
||||
if (list) list.scrollTop = list.scrollHeight;
|
||||
});
|
||||
});
|
||||
|
||||
async function say(e: SubmitEvent) {
|
||||
e.preventDefault();
|
||||
const text = draft.trim();
|
||||
if (!text || sending) return;
|
||||
sending = true;
|
||||
if (await room.say(text)) draft = '';
|
||||
sending = false;
|
||||
}
|
||||
|
||||
async function sayFromGallery(e: SubmitEvent) {
|
||||
e.preventDefault();
|
||||
const text = draft.trim();
|
||||
const name = galleryName.trim();
|
||||
if (!text || !name || sending) return;
|
||||
sending = true;
|
||||
rememberName(name);
|
||||
if (await room.sayFromGallery(name, text)) draft = '';
|
||||
sending = false;
|
||||
}
|
||||
</script>
|
||||
|
||||
<section class="talk" aria-label="Table talk">
|
||||
<h2>Table talk{#if room.view.audience > 0}<span class="audience">{room.view.audience} in the gallery</span>{/if}</h2>
|
||||
<ul bind:this={list}>
|
||||
{#if lines.length === 0}
|
||||
<li class="muted">Nobody has said a word.</li>
|
||||
{/if}
|
||||
{#each lines as line, i (line.at + ':' + i)}
|
||||
<li class:you={!line.name && line.id === room.me}><em>{line.name ? `${line.name} (gallery)` : line.id === room.me ? 'You' : room.nameOf(line.id)}</em> {line.text}</li>
|
||||
{/each}
|
||||
</ul>
|
||||
{#if room.spectating && room.view.galleryTalk}
|
||||
<form onsubmit={sayFromGallery}>
|
||||
<input type="text" class="name" bind:value={galleryName} maxlength={NAME_MAX} placeholder="Your name" aria-label="Your name in the gallery" autocomplete="nickname" />
|
||||
<input type="text" bind:value={draft} maxlength="300" placeholder="Say something from the gallery" aria-label="Say something from the gallery" autocomplete="off" />
|
||||
<button type="submit" class="quiet" disabled={!draft.trim() || !galleryName.trim() || sending}>Say</button>
|
||||
</form>
|
||||
{:else if room.spectating}
|
||||
<p class="muted small">The gallery listens; the host has not let it talk.</p>
|
||||
{:else}
|
||||
<form onsubmit={say}>
|
||||
<input type="text" bind:value={draft} maxlength="300" placeholder="Say something to the table" aria-label="Say something to the table" autocomplete="off" />
|
||||
<button type="submit" class="quiet" disabled={!draft.trim() || sending}>Say</button>
|
||||
</form>
|
||||
{/if}
|
||||
</section>
|
||||
|
||||
<style>
|
||||
.talk {
|
||||
padding: 0.75rem 0;
|
||||
border-top: 1px solid var(--rule);
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.1rem;
|
||||
font-style: italic;
|
||||
margin-bottom: 0.4rem;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: baseline;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.audience {
|
||||
font-size: 0.8rem;
|
||||
font-style: normal;
|
||||
color: var(--bone-faint);
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
max-height: 12rem;
|
||||
overflow-y: auto;
|
||||
font-size: 0.9rem;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
li + li {
|
||||
margin-top: 0.2rem;
|
||||
}
|
||||
|
||||
li em {
|
||||
color: var(--bone-dim);
|
||||
}
|
||||
|
||||
li.you em {
|
||||
color: var(--frost);
|
||||
}
|
||||
|
||||
form {
|
||||
display: flex;
|
||||
gap: 0.4rem;
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
input {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
input.name {
|
||||
flex: 0 1 8rem;
|
||||
}
|
||||
|
||||
.small {
|
||||
font-size: 0.85rem;
|
||||
margin-top: 0.4rem;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,23 @@
|
||||
// The other games of the Kestrel's Nest, 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. This game is left out of its own list.
|
||||
|
||||
export interface FamilyGame {
|
||||
slug: string;
|
||||
name: string;
|
||||
url: string;
|
||||
pitch: string;
|
||||
players: string;
|
||||
origin: string;
|
||||
}
|
||||
|
||||
export async function otherGames(self: string): Promise<FamilyGame[]> {
|
||||
try {
|
||||
const res = await fetch('/family.json', { cache: 'no-cache' });
|
||||
if (!res.ok) return [];
|
||||
const data = (await res.json()) as { games?: FamilyGame[] };
|
||||
return (data.games ?? []).filter((g) => g.slug !== self);
|
||||
} catch {
|
||||
return [];
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,36 @@
|
||||
import { describe, expect, it } from 'vitest';
|
||||
import { CURRENT_RULES, createGame, game, resolveRound } from './index';
|
||||
|
||||
describe('High Card', () => {
|
||||
it('scores the highest number named by exactly one seat', () => {
|
||||
let s = createGame({ A: 'Ann', B: 'Bo', C: 'Cy' }, 1);
|
||||
s = resolveRound(s, { A: { pick: 5 }, B: { pick: 5 }, C: { pick: 2 } });
|
||||
expect(s.rounds[0].scorer).toBe('C');
|
||||
expect(s.players.C.points).toBe(1);
|
||||
});
|
||||
|
||||
it('ends when a seat reaches the target', () => {
|
||||
let s = createGame({ A: 'Ann', B: 'Bo' }, 1);
|
||||
for (let i = 0; i < 3; i++) s = resolveRound(s, { A: { pick: 3 }, B: { pick: 1 } });
|
||||
expect(s.over?.winner).toBe('A');
|
||||
expect(game.needsInput(s, 'A')).toBe(false);
|
||||
});
|
||||
|
||||
it('draws the same bot picks from the same seed, and different ones as rounds pass', () => {
|
||||
const a = createGame({ A: 'Ann', B: 'Bo' }, 42);
|
||||
const b = createGame({ A: 'Ann', B: 'Bo' }, 42);
|
||||
expect(game.botInput(a, 'B')).toEqual(game.botInput(b, 'B'));
|
||||
const picks = new Set<number>();
|
||||
let s = a;
|
||||
for (let i = 0; i < 12; i++) {
|
||||
picks.add(game.botInput(s, 'B').pick);
|
||||
s = resolveRound(s, { A: { pick: 1 }, B: game.botInput(s, 'B') });
|
||||
}
|
||||
expect(picks.size).toBeGreaterThan(1);
|
||||
});
|
||||
|
||||
it('stamps the rules revision', () => {
|
||||
expect(createGame({ A: 'Ann', B: 'Bo' }).rules).toBe(CURRENT_RULES);
|
||||
expect(createGame({ A: 'Ann', B: 'Bo' }, 1, 1).rules).toBe(1);
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,94 @@
|
||||
// The demo game, "High Card": every round each seat names a number from one
|
||||
// to five; the highest number named by exactly one seat scores it a point,
|
||||
// and the first to three points wins. It exists to show the shape of a game
|
||||
// this kit can run: simultaneous hidden moves, a seeded bot, a view that
|
||||
// withholds the round in progress, and a rules revision. Replace this file
|
||||
// with your own game and keep the GameSpec shape.
|
||||
|
||||
import { SPECTATOR, type GameSpec, type Outcome, type SeatId, type TableOptions } from './spec';
|
||||
|
||||
export const CURRENT_RULES = 1;
|
||||
export const TARGET = 3;
|
||||
export const HIGHEST = 5;
|
||||
|
||||
export interface Player {
|
||||
id: SeatId;
|
||||
name: string;
|
||||
points: number;
|
||||
}
|
||||
|
||||
export interface Round {
|
||||
picks: Record<SeatId, number>;
|
||||
scorer: SeatId | null;
|
||||
}
|
||||
|
||||
export interface State {
|
||||
rules: number;
|
||||
seats: SeatId[];
|
||||
players: Record<SeatId, Player>;
|
||||
rounds: Round[];
|
||||
over: Outcome | null;
|
||||
rng: number;
|
||||
}
|
||||
|
||||
export type Input = { pick: number };
|
||||
|
||||
/** Mulberry32 on a seed: a small generator, so a game replays to the same bot picks. */
|
||||
function random(seed: number): number {
|
||||
let t = (seed + 0x6d2b79f5) >>> 0;
|
||||
t = Math.imul(t ^ (t >>> 15), t | 1);
|
||||
t ^= t + Math.imul(t ^ (t >>> 7), t | 61);
|
||||
return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
|
||||
}
|
||||
|
||||
export function createGame(names: Record<SeatId, string>, seed = Date.now(), rules = CURRENT_RULES, _options?: TableOptions): State {
|
||||
const seats = Object.keys(names);
|
||||
return {
|
||||
rules,
|
||||
seats,
|
||||
players: Object.fromEntries(seats.map((id) => [id, { id, name: names[id], points: 0 }])),
|
||||
rounds: [],
|
||||
over: null,
|
||||
rng: seed >>> 0 || 1
|
||||
};
|
||||
}
|
||||
|
||||
export function resolveRound(previous: State, inputs: Record<SeatId, Input>): State {
|
||||
const state = structuredClone(previous);
|
||||
if (state.over) return state;
|
||||
const picks: Record<SeatId, number> = {};
|
||||
for (const id of state.seats) picks[id] = inputs[id]?.pick ?? 1;
|
||||
const counts = new Map<number, SeatId[]>();
|
||||
for (const id of state.seats) counts.set(picks[id], [...(counts.get(picks[id]) ?? []), id]);
|
||||
let scorer: SeatId | null = null;
|
||||
for (let n = HIGHEST; n >= 1 && !scorer; n--) {
|
||||
const who = counts.get(n);
|
||||
if (who?.length === 1) scorer = who[0];
|
||||
}
|
||||
if (scorer) state.players[scorer].points += 1;
|
||||
state.rounds.push({ picks, scorer });
|
||||
if (scorer && state.players[scorer].points >= TARGET) {
|
||||
state.over = { winner: scorer, reason: `${state.players[scorer].name} reached ${TARGET} points.` };
|
||||
}
|
||||
return state;
|
||||
}
|
||||
|
||||
export const game: GameSpec<State, Input> = {
|
||||
seatIds: 'ABCDEFGH'.split(''),
|
||||
minSeats: 2,
|
||||
botNames: ['Aldric', 'Morwenna', 'Thessaly', 'Gandric', 'Ysolde', 'Ormund', 'Corwin', 'Isaura'],
|
||||
currentRules: CURRENT_RULES,
|
||||
create: createGame,
|
||||
resolve: resolveRound,
|
||||
needsInput: (state) => !state.over,
|
||||
over: (state) => state.over,
|
||||
turn: (state) => state.rounds.length + 1,
|
||||
// Every finished round is public; nothing is hidden, so the gallery sees what a seat sees.
|
||||
view: (state, viewer) => (viewer === SPECTATOR ? structuredClone(state) : structuredClone(state)),
|
||||
// A function of the state alone: the seed, the round and the seat, so a replay draws the same pick.
|
||||
botInput: (state, seat) => ({ pick: 1 + Math.floor(random(state.rng + state.rounds.length * 7919 + state.seats.indexOf(seat)) * HIGHEST) }),
|
||||
cleanInput: (raw) => ({ pick: Number((raw as { pick?: unknown })?.pick) }),
|
||||
validate: (_state, _seat, input) =>
|
||||
Number.isInteger(input.pick) && input.pick >= 1 && input.pick <= HIGHEST ? null : `Name a number from 1 to ${HIGHEST}.`,
|
||||
nameOf: (state, seat) => state.players[seat]?.name ?? seat
|
||||
};
|
||||
@@ -0,0 +1,69 @@
|
||||
// The contract between a game and everything else in this kit. The server,
|
||||
// the client store and the hall know nothing about the game beyond this
|
||||
// file: they create a state from names and a seed, feed it one round of
|
||||
// inputs at a time, ask who still has to move, and hand each viewer the
|
||||
// view they are allowed to see. A new game implements GameSpec once, in
|
||||
// src/lib/game/index.ts, and the rest of the kit works unchanged.
|
||||
//
|
||||
// The shape is simultaneous rounds: every seat that needs input submits, then
|
||||
// the round resolves. Turn-at-a-time games fit too (only one seat needs input
|
||||
// at once). A game of single commands with out-of-turn interruptions, like
|
||||
// Wiz-War, does not fit this contract and needs its own server.
|
||||
|
||||
/** A seat at the table: a single letter from GameSpec.seatIds. */
|
||||
export type SeatId = string;
|
||||
|
||||
/** The viewer with no seat: the Peanut Gallery. Views built for it show only what every seat could see. */
|
||||
export const SPECTATOR: SeatId = '';
|
||||
|
||||
export interface Outcome {
|
||||
winner: SeatId | null;
|
||||
reason: string;
|
||||
}
|
||||
|
||||
/** A choice the host makes when opening a table: a variant, a side, a length. */
|
||||
export interface TableOption {
|
||||
key: string;
|
||||
label: string;
|
||||
choices: { value: string; label: string }[];
|
||||
/** The value a table gets when the host chooses nothing. */
|
||||
default: string;
|
||||
}
|
||||
|
||||
/** The host's choices for a table, by option key; only keys the game declares get through. */
|
||||
export type TableOptions = Record<string, string>;
|
||||
|
||||
export interface GameSpec<State, Input> {
|
||||
/** Seats in table order; the table takes at most this many. */
|
||||
seatIds: SeatId[];
|
||||
/** What the host may choose when opening a table; empty for a game with one way to play. */
|
||||
options?: TableOption[];
|
||||
minSeats: number;
|
||||
/** Names the server draws for bots, in preference order. */
|
||||
botNames: string[];
|
||||
/**
|
||||
* The rules revision new games begin under. A game keeps the revision it
|
||||
* started with, recorded on its ledger, so a later fix can keep the old
|
||||
* path for old ledgers behind `state.rules < N`. Bump only when the deploy
|
||||
* gate shows a fix changes how an already-played turn resolves.
|
||||
*/
|
||||
currentRules: number;
|
||||
|
||||
create(names: Record<SeatId, string>, seed: number, rules: number, options?: TableOptions): State;
|
||||
/** Resolve one round. Must be a pure function of its arguments: the ledger is replayed through it. */
|
||||
resolve(state: State, inputs: Record<SeatId, Input>): State;
|
||||
/** Whether this seat's input is needed before the next resolution. */
|
||||
needsInput(state: State, seat: SeatId): boolean;
|
||||
over(state: State): Outcome | null;
|
||||
/** The round being written, counted from one, for the ledger and the report pin. */
|
||||
turn(state: State): number;
|
||||
/** What one viewer may see. The server sends nothing else. */
|
||||
view(state: State, viewer: SeatId): State;
|
||||
botInput(state: State, seat: SeatId): Input;
|
||||
/** Only the shapes the engine understands get through; the engine validates the rest. */
|
||||
cleanInput(raw: unknown): Input;
|
||||
/** Why this seat may not make this move now, or null when it may. The server answers with the reason. */
|
||||
validate?(state: State, seat: SeatId, input: Input): string | null;
|
||||
/** A seat's name from the state, for the hall and the chronicle. */
|
||||
nameOf(state: State, seat: SeatId): string;
|
||||
}
|
||||
@@ -0,0 +1,197 @@
|
||||
// The browser's side of the game server: a few JSON calls, and the seats this
|
||||
// browser holds, remembered so a shared link never has to carry a token.
|
||||
|
||||
import type { SeatId, TableOptions } from '$lib/game/spec';
|
||||
import type { RoomView } from './view';
|
||||
|
||||
export interface HeldSeat {
|
||||
seat: SeatId;
|
||||
token: string;
|
||||
}
|
||||
|
||||
const SEATS_KEY = 'hnefatafl:seats';
|
||||
|
||||
function heldSeats(): Record<string, HeldSeat> {
|
||||
try {
|
||||
return JSON.parse(localStorage.getItem(SEATS_KEY) ?? '{}') as Record<string, HeldSeat>;
|
||||
} catch {
|
||||
return {};
|
||||
}
|
||||
}
|
||||
|
||||
export function seatFor(roomId: string): HeldSeat | null {
|
||||
return heldSeats()[roomId] ?? null;
|
||||
}
|
||||
|
||||
/** Every seat this browser holds, newest last. */
|
||||
export function allSeats(): { roomId: string; seat: SeatId; token: string }[] {
|
||||
return Object.entries(heldSeats()).map(([roomId, h]) => ({ roomId, ...h }));
|
||||
}
|
||||
|
||||
export function forgetSeat(roomId: string): void {
|
||||
try {
|
||||
const seats = heldSeats();
|
||||
delete seats[roomId];
|
||||
localStorage.setItem(SEATS_KEY, JSON.stringify(seats));
|
||||
} catch {
|
||||
// Nothing to forget without storage.
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* A seat the server refused is doubted, not dropped: a restarting server, a
|
||||
* stale answer or the wrong backend all answer with ignorance, and ignorance
|
||||
* is not deletion. Only the SECOND refusal in a row costs the seat.
|
||||
*/
|
||||
const DOUBT_KEY = 'hnefatafl:doubted';
|
||||
|
||||
function doubted(): Record<string, true> {
|
||||
try {
|
||||
return JSON.parse(localStorage.getItem(DOUBT_KEY) ?? '{}') as Record<string, true>;
|
||||
} catch {
|
||||
return {};
|
||||
}
|
||||
}
|
||||
|
||||
/** Note a refusal; true when it is the second in a row and the seat is forgotten. */
|
||||
export function doubtSeat(roomId: string): boolean {
|
||||
const all = doubted();
|
||||
if (all[roomId]) {
|
||||
forgetSeat(roomId);
|
||||
delete all[roomId];
|
||||
try {
|
||||
localStorage.setItem(DOUBT_KEY, JSON.stringify(all));
|
||||
} catch {
|
||||
// Nothing to note without storage.
|
||||
}
|
||||
return true;
|
||||
}
|
||||
try {
|
||||
localStorage.setItem(DOUBT_KEY, JSON.stringify({ ...all, [roomId]: true }));
|
||||
} catch {
|
||||
// Nothing to note without storage.
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
/** The server answered for this seat: any doubt is cleared. */
|
||||
export function trustSeat(roomId: string): void {
|
||||
const all = doubted();
|
||||
if (!all[roomId]) return;
|
||||
delete all[roomId];
|
||||
try {
|
||||
localStorage.setItem(DOUBT_KEY, JSON.stringify(all));
|
||||
} catch {
|
||||
// Nothing to clear without storage.
|
||||
}
|
||||
}
|
||||
|
||||
export function rememberSeat(roomId: string, held: HeldSeat): void {
|
||||
try {
|
||||
localStorage.setItem(SEATS_KEY, JSON.stringify({ ...heldSeats(), [roomId]: held }));
|
||||
} catch {
|
||||
// Without storage the seat lasts for this page only.
|
||||
}
|
||||
}
|
||||
|
||||
export class ServerError extends Error {
|
||||
constructor(
|
||||
message: string,
|
||||
public status: number
|
||||
) {
|
||||
super(message);
|
||||
}
|
||||
}
|
||||
|
||||
async function call<T>(method: string, path: string, body?: unknown): Promise<T> {
|
||||
const res = await fetch(path, {
|
||||
method,
|
||||
headers: body ? { 'content-type': 'application/json' } : undefined,
|
||||
body: body ? JSON.stringify(body) : undefined
|
||||
});
|
||||
const data = (await res.json().catch(() => ({}))) as { error?: string };
|
||||
if (!res.ok) throw new ServerError(data.error ?? `The server answered ${res.status}.`, res.status);
|
||||
return data as T;
|
||||
}
|
||||
|
||||
/** A report to the keeper, with the exchange under it. */
|
||||
export interface Report {
|
||||
id: string;
|
||||
at: string;
|
||||
roomId: string;
|
||||
player: string;
|
||||
seat: SeatId | null;
|
||||
turn: number | null;
|
||||
happened: string;
|
||||
expected: string;
|
||||
thread: { at: string; text: string; from: 'desk' | 'player'; status?: string }[];
|
||||
image?: string;
|
||||
}
|
||||
|
||||
export function makeApi<State, Input>() {
|
||||
type Seated = { seat: SeatId; token: string; view: RoomView<State> };
|
||||
type View = RoomView<State>;
|
||||
return {
|
||||
create: (name: string, size: number, options?: TableOptions) => call<Seated>('POST', '/api/rooms', { name, size, options }),
|
||||
join: (roomId: string, name: string) => call<Seated>('POST', `/api/rooms/${roomId}/join`, { name }),
|
||||
addBot: (roomId: string, token: string) => call<View>('POST', `/api/rooms/${roomId}/bot`, { token }),
|
||||
begin: (roomId: string, token: string) => call<View>('POST', `/api/rooms/${roomId}/begin`, { token }),
|
||||
unseat: (roomId: string, token: string, seat: SeatId) => call<View>('POST', `/api/rooms/${roomId}/unseat`, { token, seat }),
|
||||
view: (roomId: string, token: string) => call<View>('GET', `/api/rooms/${roomId}?token=${encodeURIComponent(token)}`),
|
||||
/** The gallery's view: no token, no seat, nothing any player could not see. */
|
||||
watch: (roomId: string) => call<View>('GET', `/api/rooms/${roomId}`),
|
||||
turn: (roomId: string, token: string, input: Input) => call<View>('POST', `/api/rooms/${roomId}/turn`, { token, input }),
|
||||
say: (roomId: string, token: string, text: string) => call<View>('POST', `/api/rooms/${roomId}/say`, { token, text }),
|
||||
/** A word from the gallery, signed with a name, when the host allows it. */
|
||||
sayFromGallery: (roomId: string, name: string, text: string) => call<View>('POST', `/api/rooms/${roomId}/say`, { name, text }),
|
||||
setGalleryTalk: (roomId: string, token: string, on: boolean) => call<View>('POST', `/api/rooms/${roomId}/gallery`, { token, on }),
|
||||
challenge: (roomId: string, token: string) => call<View>('POST', `/api/rooms/${roomId}/challenge`, { token }),
|
||||
rematch: (roomId: string, token: string) =>
|
||||
call<{ roomId: string; seat: SeatId | null; token: string | null; created: boolean }>('POST', `/api/rooms/${roomId}/rematch`, { token }),
|
||||
transfer: (roomId: string, token: string) => call<{ phrase: string; expiresAt: number }>('POST', `/api/rooms/${roomId}/transfer`, { token }),
|
||||
claim: (phrase: string) => call<{ roomId: string; seat: SeatId; token: string }>('POST', '/api/transfer', { phrase }),
|
||||
report: (roomId: string, token: string, happened: string, expected: string) =>
|
||||
call<{ id: string }>('POST', `/api/rooms/${roomId}/report`, { token, happened, expected }),
|
||||
reportImage: async (id: string, file: File) => {
|
||||
const res = await fetch(`/api/reports/${id}/image`, { method: 'POST', headers: { 'content-type': file.type || 'application/octet-stream' }, body: file });
|
||||
if (!res.ok) throw new ServerError(((await res.json().catch(() => ({}))) as { error?: string }).error ?? `The server answered ${res.status}.`, res.status);
|
||||
},
|
||||
myReports: (seats: { roomId: string; token: string }[]) => call<{ reports: Report[] }>('POST', '/api/reports/mine', { seats }),
|
||||
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. */
|
||||
export function watchRoom(roomId: string, token: string, onUpdate: () => void, onStatus: (open: boolean) => void): () => void {
|
||||
let socket: WebSocket | null = null;
|
||||
let closed = false;
|
||||
let delay = 1000;
|
||||
const open = () => {
|
||||
if (closed) return;
|
||||
const protocol = location.protocol === 'https:' ? 'wss' : 'ws';
|
||||
const seat = token ? `&token=${encodeURIComponent(token)}` : '';
|
||||
socket = new WebSocket(`${protocol}://${location.host}/ws?room=${encodeURIComponent(roomId)}${seat}`);
|
||||
socket.onopen = () => {
|
||||
delay = 1000;
|
||||
onStatus(true);
|
||||
onUpdate();
|
||||
};
|
||||
socket.onmessage = (e) => {
|
||||
try {
|
||||
if (JSON.parse(String(e.data)).type === 'update') onUpdate();
|
||||
} catch {
|
||||
// Not a message this client understands.
|
||||
}
|
||||
};
|
||||
socket.onclose = () => {
|
||||
onStatus(false);
|
||||
if (!closed) setTimeout(open, delay);
|
||||
delay = Math.min(delay * 2, 30000);
|
||||
};
|
||||
};
|
||||
open();
|
||||
return () => {
|
||||
closed = true;
|
||||
socket?.close();
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,184 @@
|
||||
// The reactive room a page shows: the seat this browser holds (or the
|
||||
// gallery), the table, the talk, and the game's view. It knows the game only
|
||||
// through GameSpec; a game's own store wraps or extends this one.
|
||||
|
||||
import { game } from '$lib/game';
|
||||
import { SPECTATOR, type SeatId, type TableOptions } from '$lib/game/spec';
|
||||
import type { Input, State } from '$lib/game';
|
||||
import { makeApi, rememberSeat, watchRoom, type HeldSeat } from './client';
|
||||
import { markTalkSeen } from './talk';
|
||||
import type { RoomView } from './view';
|
||||
|
||||
export const api = makeApi<State, Input>();
|
||||
export const NAME_MAX = 24;
|
||||
const NAME_KEY = 'hnefatafl:name';
|
||||
|
||||
export function playerName(): string {
|
||||
try {
|
||||
return localStorage.getItem(NAME_KEY) ?? '';
|
||||
} catch {
|
||||
return '';
|
||||
}
|
||||
}
|
||||
|
||||
export function rememberName(raw: string): void {
|
||||
const name = raw.trim().slice(0, NAME_MAX);
|
||||
try {
|
||||
if (name) localStorage.setItem(NAME_KEY, name);
|
||||
else localStorage.removeItem(NAME_KEY);
|
||||
} catch {
|
||||
// The name still applies to this visit.
|
||||
}
|
||||
}
|
||||
|
||||
/** "Ysolde", "Ysolde and Grey", "Ysolde, Grey and Ormund". */
|
||||
export function listText(names: string[]): string {
|
||||
if (names.length <= 1) return names[0] ?? '';
|
||||
return `${names.slice(0, -1).join(', ')} and ${names[names.length - 1]}`;
|
||||
}
|
||||
|
||||
export class Room {
|
||||
view = $state<RoomView<State>>(null!);
|
||||
token: string;
|
||||
connected = $state(false);
|
||||
error = $state('');
|
||||
/** A move is on its way to the server. */
|
||||
sending = $state(false);
|
||||
|
||||
constructor(view: RoomView<State>, token: string) {
|
||||
this.view = view;
|
||||
this.token = token;
|
||||
}
|
||||
|
||||
me = $derived(this.view.me);
|
||||
roomId = $derived(this.view.roomId);
|
||||
/** Watching from the gallery, with no seat at the table. */
|
||||
spectating = $derived(this.view.me === SPECTATOR);
|
||||
started = $derived(this.view.state !== null);
|
||||
state = $derived(this.view.state);
|
||||
isHost = $derived(!this.spectating && this.view.host === this.view.me);
|
||||
/** Your move is in and the round waits on someone else. */
|
||||
moved = $derived(this.started && !this.view.over && !this.spectating && !this.view.waitingOn.includes(this.me));
|
||||
yourMove = $derived(this.started && !this.view.over && this.view.waitingOn.includes(this.me));
|
||||
/** Names of the seats the round is waiting on, yours aside. */
|
||||
awaiting = $derived(this.view.waitingOn.filter((id) => id !== this.me).map((id) => this.nameOf(id)));
|
||||
awaitingText = $derived(listText(this.awaiting));
|
||||
others = $derived(this.view.seats.filter((s) => s.id !== this.me));
|
||||
|
||||
nameOf(id: SeatId): string {
|
||||
return this.view.seats.find((s) => s.id === id)?.name ?? (this.view.state ? game.nameOf(this.view.state, id) : id);
|
||||
}
|
||||
|
||||
apply(view: RoomView<State>): void {
|
||||
this.view = view;
|
||||
markTalkSeen(view.roomId, view.chat.length);
|
||||
}
|
||||
|
||||
/** Fetch the view now, and keep fetching whenever the server says something changed. */
|
||||
connect(): () => void {
|
||||
const fetchView = () => (this.spectating ? api.watch(this.roomId) : api.view(this.roomId, this.token));
|
||||
const refresh = () => {
|
||||
fetchView()
|
||||
.then((v) => this.apply(v))
|
||||
.catch((e: Error) => (this.error = e.message));
|
||||
};
|
||||
return watchRoom(this.roomId, this.token, refresh, (open) => (this.connected = open));
|
||||
}
|
||||
|
||||
private async act(fn: () => Promise<RoomView<State>>, failure: string): Promise<boolean> {
|
||||
this.error = '';
|
||||
try {
|
||||
this.apply(await fn());
|
||||
return true;
|
||||
} catch (e) {
|
||||
this.error = e instanceof Error ? e.message : failure;
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
begin(): Promise<boolean> {
|
||||
return this.act(() => api.begin(this.roomId, this.token), 'The game could not begin.');
|
||||
}
|
||||
|
||||
addBot(): Promise<boolean> {
|
||||
return this.act(() => api.addBot(this.roomId, this.token), 'The bot could not be seated.');
|
||||
}
|
||||
|
||||
/** Send a bot away before the game begins; only the host may. */
|
||||
unseat(seat: SeatId): Promise<boolean> {
|
||||
return this.act(() => api.unseat(this.roomId, this.token, seat), 'The bot could not be sent away.');
|
||||
}
|
||||
|
||||
say(text: string): Promise<boolean> {
|
||||
if (this.spectating) return Promise.resolve(false);
|
||||
return this.act(() => api.say(this.roomId, this.token, text), 'The table did not hear you.');
|
||||
}
|
||||
|
||||
/** A word from the gallery, signed; only when the host has let the gallery talk. */
|
||||
sayFromGallery(name: string, text: string): Promise<boolean> {
|
||||
if (!this.spectating) return Promise.resolve(false);
|
||||
return this.act(() => api.sayFromGallery(this.roomId, name, text), 'The table did not hear you.');
|
||||
}
|
||||
|
||||
/** Host only: let the Peanut Gallery talk at this table, or hush it. */
|
||||
setGalleryTalk(on: boolean): Promise<boolean> {
|
||||
return this.act(() => api.setGalleryTalk(this.roomId, this.token, on), 'The gallery could not be told.');
|
||||
}
|
||||
|
||||
/** Call the keeper of the site to a held seat; their phone rings. */
|
||||
callKeeper(): Promise<boolean> {
|
||||
return this.act(() => api.challenge(this.roomId, this.token), 'The keeper could not be called.');
|
||||
}
|
||||
|
||||
/** A finished table opens another with the same company; the caller is seated as its host. */
|
||||
async rematch(): Promise<string> {
|
||||
const next = await api.rematch(this.roomId, this.token);
|
||||
if (next.created && next.seat && next.token) rememberSeat(next.roomId, { seat: next.seat, token: next.token });
|
||||
return next.roomId;
|
||||
}
|
||||
|
||||
/** A phrase that brings this seat to another device, good for ten minutes. */
|
||||
transfer(): Promise<{ phrase: string; expiresAt: number }> {
|
||||
return api.transfer(this.roomId, this.token);
|
||||
}
|
||||
|
||||
async submit(input: Input): Promise<boolean> {
|
||||
this.sending = true;
|
||||
try {
|
||||
return await this.act(() => api.turn(this.roomId, this.token, input), 'The move did not reach the server.');
|
||||
} finally {
|
||||
this.sending = false;
|
||||
}
|
||||
}
|
||||
|
||||
/** Open a table on the server, seated as its host; it begins when the host says. */
|
||||
static async create(name: string, size: number, options?: TableOptions): Promise<Room> {
|
||||
const seated = await api.create(name, size, options);
|
||||
rememberSeat(seated.view.roomId, { seat: seated.seat, token: seated.token });
|
||||
return new Room(seated.view, seated.token);
|
||||
}
|
||||
|
||||
/** A room with a bot seated and the game begun, so a solo game is a ledger like any other. */
|
||||
static async createWithBot(name: string, options?: TableOptions): Promise<Room> {
|
||||
const seated = await api.create(name, 2, options);
|
||||
rememberSeat(seated.view.roomId, { seat: seated.seat, token: seated.token });
|
||||
await api.addBot(seated.view.roomId, seated.token);
|
||||
return new Room(await api.begin(seated.view.roomId, seated.token), seated.token);
|
||||
}
|
||||
|
||||
static async join(roomId: string, name: string): Promise<Room> {
|
||||
const seated = await api.join(roomId, name);
|
||||
rememberSeat(roomId, { seat: seated.seat, token: seated.token });
|
||||
return new Room(seated.view, seated.token);
|
||||
}
|
||||
|
||||
/** Return to a seat this browser already holds. */
|
||||
static async resume(roomId: string, held: HeldSeat): Promise<Room> {
|
||||
return new Room(await api.view(roomId, held.token), held.token);
|
||||
}
|
||||
|
||||
/** Take a place in the Peanut Gallery: watch a table with no seat and no voice. */
|
||||
static async watch(roomId: string): Promise<Room> {
|
||||
return new Room(await api.watch(roomId), '');
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,25 @@
|
||||
// How much of each table's talk this browser has read, so the hall can say what is new.
|
||||
|
||||
const SEEN_KEY = 'hnefatafl:talk-seen';
|
||||
|
||||
function seen(): Record<string, number> {
|
||||
try {
|
||||
return JSON.parse(localStorage.getItem(SEEN_KEY) ?? '{}') as Record<string, number>;
|
||||
} catch {
|
||||
return {};
|
||||
}
|
||||
}
|
||||
|
||||
export function markTalkSeen(roomId: string, count: number): void {
|
||||
try {
|
||||
const all = seen();
|
||||
if ((all[roomId] ?? 0) >= count) return;
|
||||
localStorage.setItem(SEEN_KEY, JSON.stringify({ ...all, [roomId]: count }));
|
||||
} catch {
|
||||
// Without storage every line reads as new, which is the safe side.
|
||||
}
|
||||
}
|
||||
|
||||
export function unreadTalk(roomId: string, count: number): number {
|
||||
return Math.max(0, count - (seen()[roomId] ?? 0));
|
||||
}
|
||||
@@ -0,0 +1,48 @@
|
||||
// What the server tells a viewer about a room. The game's own state is
|
||||
// whatever GameSpec.view returned for that viewer; nothing else leaves.
|
||||
|
||||
import type { Outcome, SeatId, TableOptions } from '../game/spec';
|
||||
|
||||
/** One line of table talk: from a seat, or from the Peanut Gallery when the host allows it (id SPECTATOR, signed with `name`). */
|
||||
export interface ChatLine {
|
||||
id: SeatId;
|
||||
text: string;
|
||||
at: number;
|
||||
name?: string;
|
||||
}
|
||||
|
||||
export interface RoomView<State> {
|
||||
roomId: string;
|
||||
seq: number;
|
||||
/** The most seats the table will take. */
|
||||
size: number;
|
||||
/** The viewer's seat, or SPECTATOR for the gallery. */
|
||||
me: SeatId;
|
||||
/** The player who opened the table and may begin the game. */
|
||||
host: SeatId;
|
||||
seats: { id: SeatId; name: string; bot: boolean }[];
|
||||
/** Seats that still have to move before the round resolves. */
|
||||
waitingOn: SeatId[];
|
||||
/** The round being written, from one; null before the game begins. */
|
||||
turn: number | null;
|
||||
over: Outcome | null;
|
||||
state: State | null;
|
||||
chat: ChatLine[];
|
||||
/** How many watch from the Peanut Gallery. */
|
||||
audience: number;
|
||||
/** The host lets the gallery talk. */
|
||||
galleryTalk: boolean;
|
||||
/** The keeper of the site was called to a seat, and by whom. */
|
||||
challenge: { by: SeatId; at: number } | null;
|
||||
/** Names with a seat held who have not yet sat: the last table's players, or the keeper. */
|
||||
expected: string[];
|
||||
/** A finished table's rematch: where it went, and who called. */
|
||||
rematch: { to: string; by: SeatId } | null;
|
||||
/** The table this one is the rematch of. */
|
||||
rematchOf: string | null;
|
||||
/** The host's choices for this table, every declared option filled. */
|
||||
options: TableOptions;
|
||||
/** The keeper of the site, and where they live, for a table that calls them. */
|
||||
keeper: string;
|
||||
keeperZone: string;
|
||||
}
|
||||
@@ -0,0 +1,7 @@
|
||||
<script lang="ts">
|
||||
import '../app.css';
|
||||
|
||||
let { children } = $props();
|
||||
</script>
|
||||
|
||||
{@render children()}
|
||||
@@ -0,0 +1,4 @@
|
||||
// Everything happens in the browser against the game server, so nothing is rendered on the
|
||||
// server. Each route is prerendered as an empty shell that the client fills in.
|
||||
export const ssr = false;
|
||||
export const prerender = true;
|
||||
@@ -0,0 +1,20 @@
|
||||
<script lang="ts">
|
||||
import Hall from '$lib/components/Hall.svelte';
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>Hnefatafl</title>
|
||||
</svelte:head>
|
||||
|
||||
<div class="hall">
|
||||
<Hall />
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.hall {
|
||||
min-height: 100vh;
|
||||
display: grid;
|
||||
place-items: start center;
|
||||
padding: clamp(1rem, 4vw, 3rem) var(--gutter) 3rem;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,102 @@
|
||||
<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.
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>Hnefatafl: how to play</title>
|
||||
</svelte:head>
|
||||
|
||||
<main class="guide">
|
||||
<header>
|
||||
<a class="back" href="/">Back to the hall</a>
|
||||
<h1>How to play</h1>
|
||||
<p class="lede">Two sentences that set the scene and say what this page walks through.</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 house's construct. <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: they 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 signs 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. When a game ends, anyone at the table may call for a rematch: a new table with the same company, seats held until everyone is back. And while a table is laid, you may challenge the keeper of this site to a seat; the note beside the button says what hour it is 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 the page misbehaves, <a href="mailto:eric@ericwagoner.com">send word</a>; the hall's <em>about this game</em> has the other ways to reach the keeper.</p>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<style>
|
||||
.guide {
|
||||
max-width: 46rem;
|
||||
margin: 0 auto;
|
||||
padding: 1.5rem var(--gutter) 4rem;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--frost);
|
||||
}
|
||||
|
||||
.back {
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2.4rem;
|
||||
font-weight: 300;
|
||||
margin: 0.5rem 0 0.3rem;
|
||||
}
|
||||
|
||||
.lede {
|
||||
color: var(--bone-dim);
|
||||
max-width: 40em;
|
||||
}
|
||||
|
||||
nav {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.3rem 1rem;
|
||||
margin: 1rem 0 0.5rem;
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
section {
|
||||
padding: 1.25rem 0 0.5rem;
|
||||
border-top: 1px solid var(--rule);
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.5rem;
|
||||
margin-bottom: 0.7rem;
|
||||
}
|
||||
|
||||
p + p {
|
||||
margin-top: 0.7rem;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,298 @@
|
||||
<script lang="ts">
|
||||
import { goto } from '$app/navigation';
|
||||
import { page } from '$app/state';
|
||||
import Board from '$lib/components/Board.svelte';
|
||||
import Lobby from '$lib/components/Lobby.svelte';
|
||||
import ReportSlip from '$lib/components/ReportSlip.svelte';
|
||||
import { seatFor } from '$lib/net/client';
|
||||
import { NAME_MAX, playerName, rememberName, Room } from '$lib/net/room.svelte';
|
||||
|
||||
const roomId = $derived((page.params.code ?? '').toUpperCase());
|
||||
|
||||
let room = $state<Room | null>(null);
|
||||
let name = $state('');
|
||||
let joining = $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. */
|
||||
let phrase = $state<{ phrase: string; expiresAt: number } | null>(null);
|
||||
let rematching = $state(false);
|
||||
|
||||
const link = $derived(typeof location === 'undefined' ? '' : `${location.origin}/join/${roomId}`);
|
||||
const watching = $derived(room?.spectating ?? false);
|
||||
/** A watcher may still sit while the table is laid and a seat is free. */
|
||||
const seatFree = $derived(!!room && !room.started && room.view.seats.length < room.view.size);
|
||||
|
||||
// Return to a held seat, or take a place in the gallery and offer one.
|
||||
$effect(() => {
|
||||
const id = roomId;
|
||||
room = null;
|
||||
error = '';
|
||||
const held = seatFor(id);
|
||||
const arrive = held ? Room.resume(id, held) : Room.watch(id);
|
||||
joining = !held;
|
||||
if (!held) name = playerName();
|
||||
arrive.then((r) => (room = r)).catch((e: Error) => (error = e.message));
|
||||
});
|
||||
|
||||
// Keep the view fresh for as long as the room is on screen.
|
||||
$effect(() => {
|
||||
const r = room;
|
||||
if (!r) return;
|
||||
return r.connect();
|
||||
});
|
||||
|
||||
async function takeSeat(e: SubmitEvent) {
|
||||
e.preventDefault();
|
||||
busy = true;
|
||||
error = '';
|
||||
try {
|
||||
rememberName(name);
|
||||
room = await Room.join(roomId, name.trim());
|
||||
joining = false;
|
||||
} catch (err) {
|
||||
error = err instanceof Error ? err.message : 'The seat could not be taken.';
|
||||
} finally {
|
||||
busy = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function copyLink() {
|
||||
try {
|
||||
await navigator.clipboard.writeText(link);
|
||||
copied = true;
|
||||
setTimeout(() => (copied = false), 1600);
|
||||
} catch {
|
||||
// The link is on screen to copy by hand.
|
||||
}
|
||||
}
|
||||
|
||||
async function transfer() {
|
||||
if (!room) return;
|
||||
try {
|
||||
phrase = await room.transfer();
|
||||
setTimeout(() => (phrase = null), Math.max(0, phrase.expiresAt - Date.now()));
|
||||
} catch (e) {
|
||||
error = e instanceof Error ? e.message : 'The seat could not be offered.';
|
||||
}
|
||||
}
|
||||
|
||||
/** Call for a rematch, or take the seat held at one already called. */
|
||||
async function rematch() {
|
||||
if (!room) return;
|
||||
rematching = true;
|
||||
try {
|
||||
await goto(`/join/${await room.rematch()}`);
|
||||
} catch (e) {
|
||||
error = e instanceof Error ? e.message : 'The rematch could not be called.';
|
||||
} finally {
|
||||
rematching = false;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>Hnefatafl: a game</title>
|
||||
</svelte:head>
|
||||
|
||||
<header class="masthead">
|
||||
<div>
|
||||
<h1>Hnefatafl</h1>
|
||||
{#if room?.started && watching}
|
||||
<p class="standfirst">From the Peanut Gallery you watch {room.others.map((s) => s.name).join(', ')} play.{#if !room.connected} <span class="muted">Reconnecting.</span>{/if}</p>
|
||||
{:else if room?.started}
|
||||
<p class="standfirst">You are <em>{room.nameOf(room.me)}</em>, playing {room.others.map((s) => s.name).join(', ')}.{#if !room.connected} <span class="muted">Reconnecting.</span>{/if}</p>
|
||||
{:else}
|
||||
<p class="standfirst">A game between people, played by turns whenever each of you has a moment.</p>
|
||||
{/if}
|
||||
</div>
|
||||
<nav class="actions">
|
||||
{#if room}
|
||||
<button type="button" class="quiet room" title="Copy the invite link" onclick={copyLink}>
|
||||
<span class="muted">{watching ? 'watching · room' : 'invite friends · room'}</span> <b>{roomId}</b>{copied ? ' · link copied' : ''}
|
||||
</button>
|
||||
{#if room.view.audience > 0}
|
||||
<span class="audience" title="the Peanut Gallery">{room.view.audience} in the gallery{room.view.galleryTalk ? ', talking' : ''}</span>
|
||||
{/if}
|
||||
{#if !watching}
|
||||
<button type="button" class="quiet" title="A phrase that brings this seat to another device" onclick={transfer}>Transfer seat</button>
|
||||
{/if}
|
||||
{/if}
|
||||
<a class="quiet" href="/guide">How to play</a>
|
||||
<a class="quiet" href="/rules">Rules</a>
|
||||
{#if room}
|
||||
<button type="button" class="quiet" title="Something behaved unexpectedly? Tell the keeper." onclick={() => (reporting = true)}>Report</button>
|
||||
{/if}
|
||||
<a class="quiet" href="/">The hall</a>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
{#if room}
|
||||
<ReportSlip {room} bind:open={reporting} />
|
||||
{/if}
|
||||
|
||||
{#if error}
|
||||
<p class="notice">{error}</p>
|
||||
{/if}
|
||||
|
||||
{#if phrase}
|
||||
<p class="notice muted">On the other device, open the hall and claim this phrase within ten minutes: <b class="phrase">{phrase.phrase}</b></p>
|
||||
{/if}
|
||||
|
||||
{#if room?.view.over && !watching}
|
||||
<p class="notice muted">
|
||||
{#if room.view.rematch}
|
||||
{room.nameOf(room.view.rematch.by)} called for a rematch at table {room.view.rematch.to}.
|
||||
<a href={`/join/${room.view.rematch.to}`}>Take your seat</a>
|
||||
{:else}
|
||||
<button type="button" class="quiet" disabled={rematching} onclick={rematch}>Rematch with this table</button>
|
||||
<span>the same company, at a new table; seats are held for everyone here.</span>
|
||||
{/if}
|
||||
</p>
|
||||
{/if}
|
||||
|
||||
{#if joining && seatFree}
|
||||
<section class="seat">
|
||||
<p class="eyebrow">room {roomId}</p>
|
||||
<h2>Take a seat</h2>
|
||||
<p>A player has opened this table and is gathering company. Choose a name and sit; the game begins when the host says.</p>
|
||||
<form class="rename" onsubmit={takeSeat}>
|
||||
<label class="field">
|
||||
<span>Your name</span>
|
||||
<input type="text" bind:value={name} maxlength={NAME_MAX} autocomplete="nickname" required />
|
||||
</label>
|
||||
<button type="submit" class="commit small" disabled={busy}>Sit down</button>
|
||||
</form>
|
||||
<p class="muted">Just watching? You are in the Peanut Gallery until you sit.</p>
|
||||
</section>
|
||||
{/if}
|
||||
|
||||
{#if room && !room.started}
|
||||
<Lobby {room} {link} />
|
||||
{:else if room}
|
||||
<Board {room} />
|
||||
{:else if !error}
|
||||
<p class="notice muted">{joining ? 'Finding the table.' : 'Finding your seat.'}</p>
|
||||
{/if}
|
||||
|
||||
<footer class="colophon">
|
||||
<p>Hnefatafl. <a href="/rules">Read the full rules</a>. A rule read wrong or a bug found: <a href="mailto:eric@ericwagoner.com">send word</a>.</p>
|
||||
</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;
|
||||
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;
|
||||
}
|
||||
|
||||
.quiet.room b {
|
||||
letter-spacing: 0.12em;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.audience {
|
||||
align-self: center;
|
||||
font-size: 0.85rem;
|
||||
font-style: italic;
|
||||
color: var(--bone-faint);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.notice {
|
||||
max-width: 1280px;
|
||||
margin: 0 auto;
|
||||
padding: 0 var(--gutter) 0.5rem;
|
||||
color: var(--blood);
|
||||
}
|
||||
|
||||
.notice.muted {
|
||||
color: var(--bone-dim);
|
||||
}
|
||||
|
||||
.phrase {
|
||||
letter-spacing: 0.06em;
|
||||
user-select: all;
|
||||
}
|
||||
|
||||
.seat {
|
||||
max-width: 1280px;
|
||||
margin: 0 auto;
|
||||
padding: 1rem var(--gutter) 0.5rem;
|
||||
}
|
||||
|
||||
.seat h2 {
|
||||
font-size: 1.4rem;
|
||||
margin-bottom: 0.4rem;
|
||||
}
|
||||
|
||||
.rename {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
gap: 0.5rem 0.75rem;
|
||||
margin: 0.8rem 0;
|
||||
}
|
||||
|
||||
.field {
|
||||
display: inline-flex;
|
||||
gap: 0.4rem;
|
||||
align-items: baseline;
|
||||
}
|
||||
|
||||
.field > span {
|
||||
color: var(--bone-dim);
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.rename input {
|
||||
width: 14em;
|
||||
}
|
||||
|
||||
.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);
|
||||
}
|
||||
|
||||
@media (max-width: 860px) {
|
||||
.masthead {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,2 @@
|
||||
// Room codes are not known at build time; the app shell serves this route.
|
||||
export const prerender = false;
|
||||
@@ -0,0 +1,78 @@
|
||||
<script lang="ts">
|
||||
// The rules page: the game's own text, structured for reading mid-game.
|
||||
// Keep the original rules text verbatim in docs/ and render from it
|
||||
// where you can, so the page and the engine follow one source.
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>Hnefatafl: the rules</title>
|
||||
</svelte:head>
|
||||
|
||||
<main class="rules">
|
||||
<header>
|
||||
<a class="back" href="/">Back to the hall</a> · <a class="back" href="/guide">How to play</a>
|
||||
<h1>The rules</h1>
|
||||
<p class="lede">One paragraph on where these rules come from and which edition or text this page follows.</p>
|
||||
</header>
|
||||
|
||||
<section id="turn">
|
||||
<h2>A turn</h2>
|
||||
<p>What each player does on a turn, in order, in short paragraphs. Put the thing a player checks mid-game first.</p>
|
||||
</section>
|
||||
|
||||
<section id="winning">
|
||||
<h2>Winning</h2>
|
||||
<p>How the game ends and who wins, including draws.</p>
|
||||
</section>
|
||||
|
||||
<section id="source">
|
||||
<h2>The original text</h2>
|
||||
<p>The full source text, in collapsible sections, so a rules question can be settled by the words the engine follows.</p>
|
||||
</section>
|
||||
|
||||
<p class="word">If this page reads a rule differently from the original text, that is a bug: <a href="mailto:eric@ericwagoner.com">send word</a>.</p>
|
||||
</main>
|
||||
|
||||
<style>
|
||||
.rules {
|
||||
max-width: 46rem;
|
||||
margin: 0 auto;
|
||||
padding: 1.5rem var(--gutter) 4rem;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--frost);
|
||||
}
|
||||
|
||||
.back {
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2.4rem;
|
||||
font-weight: 300;
|
||||
margin: 0.5rem 0 0.3rem;
|
||||
}
|
||||
|
||||
.lede {
|
||||
color: var(--bone-dim);
|
||||
max-width: 40em;
|
||||
}
|
||||
|
||||
section {
|
||||
padding: 1.25rem 0 0.5rem;
|
||||
border-top: 1px solid var(--rule);
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.5rem;
|
||||
margin-bottom: 0.7rem;
|
||||
}
|
||||
|
||||
.word {
|
||||
margin-top: 2rem;
|
||||
color: var(--bone-faint);
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user