Eric WagonerandClaude Fable 5.1
e5c240d970
Brought over from the game kit, where they were ported from Wiz-War. The host may let the Peanut Gallery talk; a watcher signs a name no seat holds. A seated wizard may challenge Kestrel, the keeper: a seat is held, the call rings Sentry once per table, and the lobby says what hour it is where the keeper lives. A finished table may call for a rematch with the same company and bots, seats held. Transfer seat mints four words good for ten minutes and one use; the hall claims them. The hall forgets a held seat only on the second refusal in a row. Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_0141G6xqLeNRYEtviLWSB5Up
527 lines
15 KiB
Svelte
527 lines
15 KiB
Svelte
<script lang="ts">
|
||
import { goto } from '$app/navigation';
|
||
import { page } from '$app/state';
|
||
import Board from '$lib/components/Board.svelte';
|
||
import ReportSlip from '$lib/components/ReportSlip.svelte';
|
||
import TableTalk from '$lib/components/TableTalk.svelte';
|
||
import { seatFor } from '$lib/game/client';
|
||
import { COMPACT_QUERY, Duel, NAME_MAX, playerName } from '$lib/game/duel.svelte';
|
||
|
||
const roomId = $derived((page.params.code ?? '').toUpperCase());
|
||
|
||
let room = $state<Duel | 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);
|
||
|
||
/** 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;
|
||
const zone = room?.remote?.keeperZone;
|
||
if (!zone) return '';
|
||
try {
|
||
const hour = Number(new Intl.DateTimeFormat('en-US', { hour: 'numeric', hour12: false, timeZone: zone }).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 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;
|
||
}
|
||
}
|
||
|
||
const link = $derived(typeof location === 'undefined' ? '' : `${location.origin}/join/${roomId}`);
|
||
const lobby = $derived(room !== null && !room.remote?.started);
|
||
const watching = $derived(room?.spectating ?? false);
|
||
/** A watcher may still sit while the table is laid and a seat is free. */
|
||
const seatFree = $derived(!!room?.remote && !room.remote.started && room.remote.seats.length < room.remote.size);
|
||
|
||
// Return to a held seat, or take a place in the gallery and offer one.
|
||
$effect(() => {
|
||
const id = roomId;
|
||
room = null;
|
||
error = '';
|
||
const held = seatFor(id);
|
||
if (!held) {
|
||
name = playerName();
|
||
joining = true;
|
||
Duel.watchRoom(id)
|
||
.then((remote) => (room = new Duel(remote)))
|
||
.catch((e: Error) => (error = e.message));
|
||
return;
|
||
}
|
||
joining = false;
|
||
Duel.resumeRoom(id, held)
|
||
.then((remote) => (room = new Duel(remote)))
|
||
.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;
|
||
const stop = r.connect();
|
||
return stop;
|
||
});
|
||
|
||
// The store's idea of a narrow screen must agree with the stylesheets' breakpoint.
|
||
$effect(() => {
|
||
const r = room;
|
||
if (!r) return;
|
||
const query = window.matchMedia(COMPACT_QUERY);
|
||
const apply = () => (r.compact = query.matches);
|
||
apply();
|
||
query.addEventListener('change', apply);
|
||
return () => query.removeEventListener('change', apply);
|
||
});
|
||
|
||
async function takeSeat(e: SubmitEvent) {
|
||
e.preventDefault();
|
||
busy = true;
|
||
error = '';
|
||
try {
|
||
room = new Duel(await Duel.joinRoom(roomId, name));
|
||
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.
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<svelte:head>
|
||
<title>Waving Hands: a duel</title>
|
||
</svelte:head>
|
||
|
||
<header class="masthead">
|
||
<div>
|
||
<h1>Waving Hands</h1>
|
||
{#if room?.remote?.started && watching}
|
||
<p class="standfirst">
|
||
From the Peanut Gallery you watch
|
||
{#each room.others as id, i (id)}{#if i > 0}{i === room.others.length - 1 ? ' and ' : ', '}{/if}<em>{room.state.wizards[id].name}</em>{/each} duel.
|
||
{#if !room.remote.connected}<span class="muted">Reconnecting to the duel.</span>{/if}
|
||
</p>
|
||
{:else if room?.remote?.started}
|
||
<p class="standfirst">
|
||
You are <em>{room.you.name}</em>, duelling
|
||
{#each room.others as id, i (id)}{#if i > 0}{i === room.others.length - 1 ? ' and ' : ', '}{/if}<em>{room.state.wizards[id].name}</em>{/each}.
|
||
{#if !room.remote.connected}<span class="muted">Reconnecting to the duel.</span>{/if}
|
||
</p>
|
||
{:else}
|
||
<p class="standfirst">A duel 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.remote && room.remote.audience > 0}
|
||
<span class="audience" title="the Peanut Gallery">{room.remote.audience} in the gallery{room.remote.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 duel={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?.remote?.started && room.state.over && !watching}
|
||
{@const r = room.remote}
|
||
<p class="notice muted">
|
||
{#if r.rematch}
|
||
{room.speaker(r.rematch.by)} called for a rematch at table {r.rematch.to}.
|
||
<a href={`/join/${r.rematch.to}`}>Take your seat</a>
|
||
{:else}
|
||
<button type="button" class="quiet" disabled={rematching} onclick={rematch}>Duel again 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="lobby">
|
||
<p class="eyebrow">room {roomId}</p>
|
||
<h2>Take a seat</h2>
|
||
<p>A wizard has opened this table and is gathering opponents. Choose a name and sit; the duel 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="reveal 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 && lobby}
|
||
{@const r = room.remote!}
|
||
{@const hostName = r.seats.find((s) => s.id === r.host)?.name ?? 'the host'}
|
||
<section class="lobby">
|
||
{#if watching}
|
||
<h2>At the table</h2>
|
||
{#if seatFree}
|
||
<p>{hostName} is gathering wizards. Sit down above, or watch from the gallery until the duel begins.</p>
|
||
{:else}
|
||
<p>The table is full. You watch from the Peanut Gallery; the duel begins when {hostName} says.</p>
|
||
{/if}
|
||
{:else}
|
||
<p class="eyebrow">room {roomId}</p>
|
||
<h2>The table is laid</h2>
|
||
<p>Send this link, or the code. Whoever opens it takes a seat; the table holds a dozen, and the duel 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 r.seats as s (s.id)}
|
||
<li>
|
||
<span class="seat-name">{s.name}</span>
|
||
<span class="muted">{s.id === r.host ? 'opened the table' : s.bot ? 'the bot' : 'seated'}{s.id === r.seat ? ', 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 r.expected as name (name)}
|
||
<li>
|
||
<span class="seat-name">{name}</span>
|
||
<span class="muted">{r.challenge && name.toLowerCase() === r.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">{r.size - r.seats.length - r.expected.length} of {r.size} seats empty{#if r.audience > 0}; {r.audience} in the gallery{r.galleryTalk ? ', allowed to talk' : ''}{/if}</li>
|
||
</ul>
|
||
{#if r.rematchOf}
|
||
<p class="muted">A rematch of table {r.rematchOf}: the same company, seats held for those not yet back.</p>
|
||
{/if}
|
||
{#if !watching}
|
||
<div class="ways">
|
||
{#if r.seats.length < r.size && room.isHost}
|
||
<button type="button" class="quiet" onclick={() => room?.addBot()}>Seat a bot</button>
|
||
{/if}
|
||
{#if room.isHost}
|
||
<button type="button" class="reveal small" disabled={r.seats.length < 2} onclick={() => room?.begin()}>Begin the duel</button>
|
||
<span class="muted">{r.seats.length < 2 ? 'once a second wizard is seated' : `with ${r.seats.length} wizards`}</span>
|
||
{:else}
|
||
<span class="muted">{hostName} will begin the duel when the table is ready.</span>
|
||
{/if}
|
||
</div>
|
||
{#if room.isHost}
|
||
<label class="switch muted">
|
||
<input type="checkbox" checked={r.galleryTalk} onchange={(e) => room?.setGalleryTalk(e.currentTarget.checked)} />
|
||
Let the Peanut Gallery talk at the table
|
||
</label>
|
||
{/if}
|
||
{#if r.keeper && !r.challenge && !r.seats.some((s) => s.name.toLowerCase() === r.keeper.toLowerCase()) && r.seats.length + r.expected.length < r.size}
|
||
<div class="keeper">
|
||
<button type="button" class="quiet" title="A seat is held for {r.keeper}, who keeps this site, and their phone rings" onclick={() => room?.callKeeper()}>Challenge {r.keeper}, the keeper</button>
|
||
<p class="muted small">{r.keeper} keeps this site and answers every call, sometimes within the minute, sometimes after a night's sleep.{#if keeperHour} It is {keeperHour} where {r.keeper} lives.{/if} The seat is held either way.</p>
|
||
</div>
|
||
{:else if r.challenge}
|
||
<p class="muted small">{r.keeper} has been called to the table by {room.speaker(r.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 duel in a new tab and play on. This table keeps its place in your hall until you come back.</p>
|
||
{/if}
|
||
{/if}
|
||
{#if r.error}<p class="notice">{r.error}</p>{/if}
|
||
<div class="lobby-talk"><TableTalk duel={room} /></div>
|
||
</section>
|
||
{:else if room}
|
||
<Board duel={room} />
|
||
{:else if !error}
|
||
<p class="notice muted">{joining ? 'Finding the table.' : 'Finding your seat.'}</p>
|
||
{/if}
|
||
|
||
<footer class="colophon">
|
||
<p>After Richard Bartle's <em>Waving Hands</em> (1977), also known as Spellbinder and Spellcaster. <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;
|
||
font-variation-settings: 'opsz' 144;
|
||
letter-spacing: -0.01em;
|
||
}
|
||
|
||
.standfirst {
|
||
max-width: 38em;
|
||
color: var(--bone-dim);
|
||
margin-top: 0.4rem;
|
||
}
|
||
|
||
.standfirst em {
|
||
color: var(--bone);
|
||
}
|
||
|
||
.actions {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 0.5rem;
|
||
flex-shrink: 0;
|
||
min-width: 0;
|
||
max-width: 100%;
|
||
}
|
||
|
||
.quiet {
|
||
background: none;
|
||
border: 1px solid var(--rule-strong);
|
||
border-radius: 4px;
|
||
padding: 0.4rem 0.9rem;
|
||
white-space: nowrap;
|
||
color: var(--bone);
|
||
text-decoration: none;
|
||
line-height: 1.55;
|
||
}
|
||
|
||
.quiet:hover {
|
||
border-color: var(--bone);
|
||
}
|
||
|
||
.quiet.room b {
|
||
letter-spacing: 0.12em;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.audience {
|
||
align-self: center;
|
||
font-size: 0.85rem;
|
||
font-style: italic;
|
||
color: var(--bone-faint);
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.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;
|
||
}
|
||
|
||
.phrase {
|
||
letter-spacing: 0.06em;
|
||
user-select: all;
|
||
}
|
||
|
||
.eyebrow {
|
||
font-size: 0.85rem;
|
||
letter-spacing: 0.12em;
|
||
color: var(--bone-faint);
|
||
margin-bottom: 0.2rem;
|
||
}
|
||
|
||
.notice {
|
||
max-width: 1280px;
|
||
margin: 0 auto;
|
||
padding: 0 var(--gutter) 0.5rem;
|
||
color: var(--blood);
|
||
}
|
||
|
||
.notice.muted {
|
||
color: var(--bone-dim);
|
||
}
|
||
|
||
.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;
|
||
}
|
||
|
||
.rename {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
align-items: center;
|
||
gap: 0.5rem 0.75rem;
|
||
margin-top: 0.8rem;
|
||
}
|
||
|
||
.rename input {
|
||
width: 14em;
|
||
}
|
||
|
||
.reveal.small {
|
||
padding: 0.4rem 0.9rem;
|
||
font-size: 1rem;
|
||
}
|
||
|
||
.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;
|
||
}
|
||
|
||
.colophon {
|
||
max-width: 1280px;
|
||
margin: 0 auto;
|
||
padding: 2rem var(--gutter) 3rem;
|
||
color: var(--bone-faint);
|
||
font-size: 0.85rem;
|
||
}
|
||
|
||
.colophon a {
|
||
color: var(--frost);
|
||
}
|
||
|
||
/* Must match COMPACT_QUERY in duel.svelte.ts. */
|
||
@media (max-width: 860px) {
|
||
.masthead {
|
||
flex-direction: column;
|
||
}
|
||
|
||
.colophon {
|
||
padding-bottom: 6rem;
|
||
}
|
||
}
|
||
</style>
|