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

What you missed, in facts; a timeline on the reel; room for table talk

Browse Source 
A returning player's slip now lists what happened while they were away
— "Automaton took your treasure.", "You lost 3 life.", "It's your
turn." — each fact opening the catch-up reel at its moment, read from
the missed steps as the server redacted them for that seat; when
nothing touched them it says what each wizard was up to instead. The
reel gains a timeline: a tick per move in the mover's color, taller
where a turn begins, a blow lands, or gold changes hands, and any tick
jumps the reel there.

The chronicle takes a filter — All, Game, Table talk — with an unread
count on the talk that arrived while the casting panel covered it (a
wizard's own words never count), a peek at the latest line above the
composer while the panel is up, and the composer itself no longer
leaves when a response is owed.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Jm2auWk6RP71CjaAb4FMoG
This commit is contained in:
Eric Wagoner
2026-09-17 00:22:54 -04:00
co-authored by Claude Fable 5.1
parent 80dd7a7865
commit 8582b7feb7
4 changed files with 262 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/web/src/App.svelte
+76 -8
View File
@@ -10,6 +10,7 @@
import Card from "./Card.svelte";
import Help from "./Help.svelte";
import type { HelpTab } from "./help-state";
import { summarizeMissed } from "./catchup";
import Replay from "./Replay.svelte";
import FxGallery from "./FxGallery.svelte";
import TokenGallery from "./TokenGallery.svelte";
@@ -1476,6 +1477,26 @@
return view ? view.treasures.filter((t) => t.owner !== p.id && t.position &&
t.position.x === p.home.x && t.position.y === p.home.y).length : 0;
}
/** What the chronicle shows: everything, the game's own lines, or the talk. */
let logFilter = $state<"all" | "game" | "talk">("all");
const isTalk = (text: string) => text.startsWith("\u{1F4AC}") || text.startsWith("\u{1F3B2}");
function showLine(line: { text: string }): boolean {
return logFilter === "all" ? true : logFilter === "talk" ? isTalk(line.text) : !isTalk(line.text);
}
/** Talk that arrived while the chronicle was covered or filtered away. */
let seenTalk = $state(0);
$effect(() => {
const count = net.chatCount;
if ((!castPanelOn && logFilter !== "game") || net.lastTalkBy === net.you) seenTalk = count;
});
const unreadTalk = $derived(Math.max(0, net.chatCount - seenTalk));
const lastTalk = $derived.by(() => {
for (let i = net.log.length - 1; i >= 0; i--) {
const t = net.log[i]!.text;
if (t.startsWith("\u{1F4AC}")) return t.slice(2).trim();
}
return null;
});
/** The table is out of reach: play waits, and nothing here can be sent. */
const offline = $derived(!local.active && net.roomId != null && net.status !== "connected");
// Talk that never arrived goes back into the composer, with a word.
@@ -2354,7 +2375,7 @@
<Replay steps={net.moment.steps} moment pov={net.moment.owner}
onshare={() => net.requestShare()} onclose={() => net.closeMoment()} />
{:else if net.catchUp && net.catchUp.length > 0}
<Replay steps={net.catchUp}
<Replay steps={net.catchUp} startAt={net.catchUpStart}
onshare={net.catchUp[0]?.seq === 0 ? () => net.requestShare(-1) : null}
onclose={() => net.closeCatchUp()} />
{:else if local.replaySteps && local.replaySteps.length > 0}
@@ -2983,9 +3004,24 @@
<aside class="paper-rail">
{#if !local.active && net.missedMoves > 0}
<div class="slip catchup">
You missed {net.missedMoves} move{net.missedMoves === 1 ? "" : "s"}.
<button class="stamp tiny" onclick={() => net.requestCatchUp()}>▶ Watch what happened</button>
<button class="hint-cancel" onclick={() => net.markSeen()}>skip</button>
<div class="catchup-head">
You missed {net.missedMoves} move{net.missedMoves === 1 ? "" : "s"}.
<button class="stamp tiny" onclick={() => net.watchCatchUp(0)}>▶ Watch what happened</button>
<button class="hint-cancel" onclick={() => net.markSeen()}>skip</button>
</div>
{#if net.missedSteps && view.you}
<ul class="catchup-facts">
{#each summarizeMissed(net.missedSteps, view.you, view) as f, i (i)}
<li>
{#if f.step >= 0}
<button class="fact-jump" onclick={() => net.watchCatchUp(f.step)} title="watch this moment">▶ {f.text}</button>
{:else}
<span>{f.text}</span>
{/if}
</li>
{/each}
</ul>
{/if}
</div>
{/if}
{#if view.phase === "finished"}
@@ -3273,6 +3309,16 @@
{#if youMustRespond}{@render tableGuidance()}{/if}
</div>
{/if}
<div class="log-filters" class:tucked={castPanelOn} role="group" aria-label="what the chronicle shows">
{#each [["all", "All"], ["game", "Game"], ["talk", "Table talk"]] as [k, label] (k)}
<button class:current={logFilter === k} onclick={() => (logFilter = k as typeof logFilter)}>
{label}{#if k === "talk" && unreadTalk > 0}<span class="talk-badge">{unreadTalk}</span>{/if}
</button>
{/each}
</div>
{#if castPanelOn && !local.active && unreadTalk > 0 && lastTalk}
<div class="talk-peek">💬 {lastTalk}</div>
{/if}
<div class="chronicle" class:tucked={castPanelOn} aria-label="game log" bind:this={chronicleEl}
onscroll={onChronicleScroll}>
{#snippet receipt(line: { text: string; receipt?: string[] })}
@@ -3284,13 +3330,13 @@
{/if}
{/snippet}
{#if local.active}
{#each local.log as line, i (i)}
{#each local.log.filter(showLine) as line, i (i)}
<div class:table-talk={line.text.startsWith("\u{1F4AC}")}>
{#if line.receipt}{@render receipt(line)}{:else}{line.text}{/if}
</div>
{/each}
{:else}
{#each net.log as line, i (i)}
{#each net.log.filter(showLine) as line, i (i)}
<div class:table-talk={line.text.startsWith("\u{1F4AC}")}>
<span class="log-mark" class:blank={!line.actor} style:background={line.actor ? playerColor(line.actor) : "transparent"}></span>{#if line.receipt}{@render receipt(line)}{:else}{line.text}{/if}
{#if line.notable && line.turn !== null && prefs.instantReplay && !net.spectating}
@@ -3307,7 +3353,7 @@
onclick={() => local.rollTableDie()}>🎲 roll the die</button>
</div>
{/if}
{#if !local.active && net.roomId && !net.spectating && !castPanelOn}
{#if !local.active && net.roomId && !net.spectating}
<form class="say-box" onsubmit={(e) => {
e.preventDefault();
const t = chatDraft.trim();
@@ -4331,7 +4377,29 @@
.slip.coach .stamp { margin-left: 0.5rem; }
.slip.urgent { border-left: 4px solid #b3372b; transform: rotate(0.4deg); }
.slip.ambush-note { border-left: 4px solid #43331f; font-size: 0.85rem; }
.slip.catchup { border-left: 4px solid #5b3f9e; display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.slip.catchup { border-left: 4px solid #5b3f9e; }
.catchup-head { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.catchup-facts { list-style: none; margin: 0.45rem 0 0; padding: 0; font-size: 0.9rem; }
.catchup-facts li { margin: 0.15rem 0; }
.fact-jump { background: none; border: 0; padding: 0; font: inherit; color: #43331f; cursor: pointer; text-align: left; }
.fact-jump:hover { text-decoration: underline; }
.log-filters { display: flex; gap: 0.25rem; margin-bottom: 0.3rem; }
.log-filters.tucked { display: none; }
.log-filters button {
font-family: "Oswald", sans-serif;
font-size: 0.62rem;
letter-spacing: 0.1em;
text-transform: uppercase;
background: none;
border: 1px solid rgba(233, 225, 203, 0.35);
border-radius: 3px;
color: #c9bd9f;
padding: 0.15rem 0.5rem;
cursor: pointer;
}
.log-filters button.current { border-color: #e9e1cb; color: #e9e1cb; background: rgba(233, 225, 203, 0.14); }
.talk-badge { margin-left: 0.3rem; background: #b3372b; color: #fff; border-radius: 999px; padding: 0 0.35rem; font-size: 0.6rem; }
.talk-peek { font-family: "Courier Prime", monospace; font-size: 0.82rem; color: #e9e1cb; background: rgba(233, 225, 203, 0.12); border-left: 3px solid #b3372b; padding: 0.3rem 0.5rem; border-radius: 3px; }
/* The table out of reach: one plain notice, and the controls beneath it go quiet. */
.slip.offline-slip {
border-left: 4px solid #b3372b;
packages/web/src/Replay.svelte
+50 -1
View File
@@ -1,6 +1,7 @@
<script lang="ts">
import { motion } from "./motion";
import Board from "./Board.svelte";
import { wizardColor } from "./colors";
import FirstPerson from "./fpv/FirstPerson.svelte";
import { untrack } from "svelte";
import { humanize, spellName } from "./net.svelte";
@@ -19,6 +20,7 @@
pov = null,
onshare = null,
endLabel = null,
startAt = 0,
}: {
steps: { seq: number; actor: string; events: GameEvent[]; view: GameView; chat?: { player: string; text: string }[] }[];
onclose: () => void;
@@ -32,6 +34,8 @@
onshare?: (() => Promise<string>) | null;
/** What the leave button says once the reel has run out. */
endLabel?: string | null;
/** The step the reel opens on. */
startAt?: number;
} = $props();
/** The share button's little life: offer, mint, report. */
@@ -49,7 +53,20 @@
setTimeout(() => (shareState = "idle"), 4000);
}
let idx = $state(0);
let idx = $state(untrack(() => Math.min(Math.max(0, startAt), Math.max(0, steps.length - 1))));
/** The timeline: one tick a step, a turn's first step marked, and the
* steps where blows landed or gold changed hands flagged, so a reel of
* a hundred moves can be read at a glance and jumped into. */
const ticks = $derived(steps.map((s, i) => {
let flag: "turn" | "hit" | "gold" | "end" | null = null;
for (const e of s.events) {
if (e.type === "gameWon" || e.type === "playerEliminated") { flag = "end"; break; }
if (e.type === "treasurePickedUp" || (e.type === "treasureDropped" && e.onHomeOf != null)) flag = "gold";
else if (!flag && (e.type === "damaged" || e.type === "attackResolved" || e.type === "punched")) flag = "hit";
else if (!flag && e.type === "turnStarted") flag = "turn";
}
return { i, actor: s.actor, flag, color: wizardColor(s.view, s.actor) };
}));
let playing = $state(true);
let speed = $state(1);
/** Watch the board from above, or relive it through your own eyes. */
@@ -748,6 +765,15 @@
</div>
{/if}
</div>
{#if steps.length > 3}
<div class="timeline" role="group" aria-label="the moves, a tick each">
{#each ticks as t (t.i)}
<button class="tick" class:current={t.i === idx} class:turn={t.flag === "turn"} class:hit={t.flag === "hit"} class:gold={t.flag === "gold"} class:end={t.flag === "end"}
style:--who={t.color} title={`move ${t.i + 1} — ${t.actor}${t.flag ? ` · ${t.flag === "turn" ? "turn begins" : t.flag === "hit" ? "a blow" : t.flag === "gold" ? "treasure" : "the end"}` : ""}`}
onclick={() => { playing = false; idx = t.i; }} aria-label={`jump to move ${t.i + 1}`}></button>
{/each}
</div>
{/if}
<div class="replay-controls">
<button onclick={() => { playing = false; idx = Math.max(0, idx - 1); }} aria-label="previous move">◀</button>
<button class="playpause" onclick={() => (playing = !playing)} aria-label={playing ? "pause" : "play"}>
@@ -931,6 +957,29 @@
opacity: 0.7;
}
.replay-controls .speed.current { opacity: 1; text-decoration: underline; }
.timeline {
display: flex;
align-items: flex-end;
gap: 1px;
height: 14px;
margin: 0.4rem 0.2rem 0.2rem;
}
.tick {
flex: 1 1 0;
min-width: 2px;
height: 6px;
padding: 0;
border: 0;
border-radius: 1px;
background: var(--who, #8d8672);
opacity: 0.45;
cursor: pointer;
}
.tick.turn { height: 9px; opacity: 0.7; }
.tick.hit { height: 12px; opacity: 0.9; }
.tick.gold { height: 14px; opacity: 1; box-shadow: 0 0 0 1px #e0b34a; }
.tick.end { height: 14px; opacity: 1; background: #e9e1cb; }
.tick.current { opacity: 1; outline: 1px solid #fff; outline-offset: 1px; }
.replay-controls {
display: flex;
justify-content: center;
packages/web/src/catchup.ts
+109
View File
@@ -0,0 +1,109 @@
// What happened while you were away, as a few facts before the reel:
// read from the missed steps as the server redacted them for you, so it
// tells you only what you would have seen at the table.
import { cardDef, type GameEvent, type GameView } from "@wizwar/engine";
export interface MissedStep {
seq: number;
actor: string;
events: GameEvent[];
view: GameView;
chat?: { player: string; text: string }[];
}
export interface MissedFact {
text: string;
/** The step of the reel this fact belongs to. */
step: number;
}
function spell(id: string | null): string {
if (!id) return "a punch";
try { return cardDef(id).name; } catch { return id; }
}
function nearHome(view: GameView, you: string, cell: { x: number; y: number }): boolean {
const me = view.players.find((p) => p.id === you);
if (!me) return false;
return Math.abs(me.home.x - cell.x) + Math.abs(me.home.y - cell.y) <= 2;
}
/** The facts of the missed steps that touch you, in order, capped so the
* slip stays a slip. Each fact points at its step for the reel. */
export function summarizeMissed(steps: readonly MissedStep[], you: string, now: GameView | null): MissedFact[] {
const facts: MissedFact[] = [];
let lifeLost = 0;
let lifeLostStep = -1;
let talk = 0;
steps.forEach((s, i) => {
talk += s.chat?.length ?? 0;
for (const e of s.events) {
switch (e.type) {
case "treasurePickedUp":
if (e.owner === you && e.player !== you) facts.push({ text: `${e.player} took your treasure.`, step: i });
else if (e.player !== you && e.owner !== e.player) facts.push({ text: `${e.player} picked up ${e.owner}'s treasure.`, step: i });
break;
case "treasureDropped": {
const owner = s.view.treasures.find((t) => t.id === e.treasureId)?.owner;
if (e.onHomeOf != null && owner && e.onHomeOf !== owner) {
facts.push({ text: owner === you ? `Your treasure was carried home by ${e.player}.` : `${e.player} carried ${owner}'s treasure home.`, step: i });
}
break;
}
case "damaged":
if (e.player === you && e.amount > 0) { lifeLost += e.amount; if (lifeLostStep < 0) lifeLostStep = i; }
break;
case "spellCast":
if (e.target === you) facts.push({ text: `${e.caster} cast ${spell(e.cardId)} at you.`, step: i });
break;
case "punched":
if (e.target === you) facts.push({ text: `${e.attacker} punched you.`, step: i });
break;
case "wallDestroyed":
if (nearHome(s.view, you, e.edge.cell)) facts.push({ text: "A wall near your home was destroyed.", step: i });
break;
case "playerEliminated":
facts.push({ text: e.player === you ? "You were eliminated." : `${e.player} is out of the game.`, step: i });
break;
case "gameWon":
facts.push({ text: e.player === you ? "You won." : `${e.player} won the game.`, step: i });
break;
case "tableTalk":
talk++;
break;
default:
break;
}
}
});
if (lifeLost > 0) facts.splice(Math.min(facts.length, 1), 0, { text: `You lost ${lifeLost} life.`, step: lifeLostStep });
if (facts.length === 0) {
// Nothing touched you: say what each wizard was up to, all the same.
const doings = new Map<string, { moves: number; casts: number; first: number }>();
steps.forEach((s, i) => {
if (s.actor === you) return;
const d = doings.get(s.actor) ?? { moves: 0, casts: 0, first: i };
for (const e of s.events) {
if (e.type === "moved" && e.player === s.actor) d.moves++;
if (e.type === "spellCast" && e.caster === s.actor) d.casts++;
}
doings.set(s.actor, d);
});
for (const [who, d] of doings) {
const bits = [d.moves > 0 ? `walked ${d.moves} square${d.moves === 1 ? "" : "s"}` : "", d.casts > 0 ? `cast ${d.casts} spell${d.casts === 1 ? "" : "s"}` : ""].filter(Boolean);
facts.push({ text: `${who} ${bits.length ? bits.join(" and ") : "passed the time"}; nothing touched you.`, step: d.first });
}
}
if (talk > 0) facts.push({ text: `${talk} line${talk === 1 ? "" : "s"} of table talk.`, step: -1 });
const out = facts.slice(0, 6);
if (facts.length > 6) out.push({ text: `…and ${facts.length - 6} more.`, step: -1 });
if (now) {
const me = now.players.find((p) => p.id === you);
if (now.phase === "playing" && me?.alive) {
const mine = now.activePlayerId === you || now.stack?.waitingOn === you || now.pendingDiscard === you;
out.push({ text: mine ? "It's your turn." : `It's ${now.activePlayerId}'s turn.`, step: -1 });
}
}
return out;
}
packages/web/src/net.svelte.ts
+27 -4
View File
@@ -363,6 +363,8 @@ class Net {
chatPending = $state<string | null>(null);
/** Table talk that never arrived: handed back to the composer. */
chatUnsent = $state<string | null>(null);
/** Who spoke last at the table: your own words are never unread. */
lastTalkBy = $state<string | null>(null);
/** A finished table's call for a rematch: where it went, and who called. */
rematchCall = $state<{ roomId: string; by: string } | null>(null);
/** A rematch lobby: the last table's wizards not yet seated. */
@@ -393,6 +395,11 @@ class Net {
onFx: ((events: GameEvent[]) => void) | null = null;
/** A catch-up reel delivered by the server. */
catchUp = $state<{ seq: number; actor: string; events: GameEvent[]; view: GameView; chat?: { player: string; text: string }[] }[] | null>(null);
/** The missed steps, fetched for the summary slip before any reel is opened. */
missedSteps = $state<{ seq: number; actor: string; events: GameEvent[]; view: GameView; chat?: { player: string; text: string }[] }[] | null>(null);
/** Where the catch-up reel opens: the step a summary line pointed at. */
catchUpStart = $state(0);
private catchUpWanted: "summary" | "reel" = "reel";
/** One turn's reel, summoned from a chronicle line's instant-replay
* eye — steps plus the wizard whose eyes the camera wears. */
moment = $state<{ steps: { seq: number; actor: string; events: GameEvent[]; view: GameView; chat?: { player: string; text: string }[] }[]; owner: string } | null>(null);
@@ -549,13 +556,17 @@ class Net {
const last = this.seen[this.roomId] ?? 0;
this.missedMoves = Math.max(0, msg.seq - last);
if (this.missedMoves === 0) this.markSeen();
// The missed steps come now, for the facts on the slip; the
// reel waits for a tap.
else if (!this.missedSteps) this.requestCatchUp(true);
}
if (document.visibilityState === "visible") this.watching = this.roomId;
}
break;
}
case "catchUp":
this.catchUp = msg.steps;
if (this.catchUpWanted === "summary") this.missedSteps = msg.steps;
else this.catchUp = msg.steps;
break;
case "moment":
this.moment = { steps: msg.steps, owner: msg.owner };
@@ -569,7 +580,7 @@ class Net {
let talk = 0;
if (!msg.replayed) this.onFx?.(msg.events as GameEvent[]);
for (const e of msg.events as GameEvent[]) {
if (e.type === "tableTalk") talk++;
if (e.type === "tableTalk") { talk++; this.lastTalkBy = e.player; }
if (e.type === "gameStarted" && !msg.replayed) {
this.openingRolls = { rolls: e.dieRolls, first: e.firstPlayer, players: e.players };
}
@@ -627,6 +638,7 @@ class Net {
break;
case "chat": {
if (msg.player === this.you && this.chatPending === msg.text) this.chatPending = null;
this.lastTalkBy = msg.player;
this.log = [...this.log, { text: `\u{1F4AC} ${msg.player}: ${msg.text}`, turn: null, notable: false, actor: msg.player }];
this.chatCount += 1;
if (this.roomId) this.markChatSeen();
@@ -866,6 +878,8 @@ class Net {
* line, and wiping it would erase the only notice of why. */
leaveLocal(): void {
localStorage.removeItem(SEAT_KEY);
this.missedSteps = null;
this.catchUp = null;
this.pending = null;
this.unsent = null;
this.unconfirmed = null;
@@ -904,18 +918,27 @@ class Net {
this.send({ type: "catchUp", sinceSeq: 0, full: true });
}
/** Ask for the reel of everything since we last watched. */
requestCatchUp(): void {
/** Ask for the steps since we last watched: for the summary slip, or for the reel. */
requestCatchUp(summaryOnly = false): void {
if (!this.roomId) return;
this.catchUpWanted = summaryOnly ? "summary" : "reel";
this.send({ type: "catchUp", sinceSeq: this.seen[this.roomId] ?? 0 });
}
/** Open the reel of the missed steps, at the step a fact pointed to. */
watchCatchUp(startAt = 0): void {
this.catchUpStart = Math.max(0, startAt);
if (this.missedSteps) this.catchUp = this.missedSteps;
else this.requestCatchUp(false);
}
/** All caught up: remember it and clear the banner. */
markSeen(): void {
if (!this.roomId) return;
this.seen[this.roomId] = this.currentSeq;
localStorage.setItem(SEEN_KEY, JSON.stringify(this.seen));
this.missedMoves = 0;
this.missedSteps = null;
}
closeCatchUp(): void {