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

Receipts under resolved attacks; the cast line clears; the table holds still; teleport wraps

Browse Source 
Each resolved attack now folds a receipt under its line, read off the
engine's own record: the blow as it came in, what each counter left of
it in the order they were weighed, what landed, and whose life moved.
The resolution event carries the incoming damage and duration and the
trail of counters for it. Hotseat chronicles carry the same.

The line a cast was accepted on stayed on the board: its timer compared
a reactive proxy to the object it held. Kept raw, it clears.

The board jumped while walking. The "sending" note added a line beside
End turn and took it away again, and the refusal toast stood in the
flow above the table for five seconds; both now float and move
nothing.

Teleport reaches through the lettered openings in the engine, but the
board dimmed the squares beyond them. The eligibility map follows the
warps as the engine does.

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-16 23:32:34 -04:00
co-authored by Claude Fable 5.1
parent 7d0c1c68a3
commit 648f6ab8cd
7 changed files with 225 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/web/src/App.svelte
+43 -6
View File
@@ -1653,7 +1653,7 @@
/** The attack on the stack draws its sight line; a cast that resolved
* at once (a creation, a curse) draws the line it was accepted on for a
* few seconds, so the table can see how the aim was legal. */
let castTrace = $state<SightLine | null>(null);
let castTrace = $state.raw<SightLine | null>(null);
let castTraceTimer: ReturnType<typeof setTimeout> | null = null;
const sightTrace = $derived((view ? stackSightTrace(view) : null) ?? castTrace);
@@ -3230,14 +3230,24 @@
{/if}
<div class="chronicle" class:tucked={castPanelOn} aria-label="game log" bind:this={chronicleEl}
onscroll={onChronicleScroll}>
{#snippet receipt(line: { text: string; receipt?: string[] })}
{#if line.receipt}
<details class="receipt">
<summary>⚖ {line.text}</summary>
<ul>{#each line.receipt as r, j (j)}<li>{r}</li>{/each}</ul>
</details>
{/if}
{/snippet}
{#if local.active}
{#each local.log as line, i (i)}
<div class:table-talk={line.startsWith("\u{1F4AC}")}>{line}</div>
<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)}
<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>{line.text}
<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}
<button class="moment-eye" title="relive this turn"
onclick={() => net.requestMoment(line.turn!)}>👁</button>
@@ -3689,14 +3699,22 @@
}
.count-btn.current { background: #43331f; color: #e9e1cb; }
/* The toast floats over the page: a refusal that came and went must
* never push the table down and back. */
.toast {
position: fixed;
top: 3.6rem;
left: 50%;
transform: translateX(-50%);
z-index: 70;
max-width: min(40rem, calc(100% - 2rem));
background: #6d2119;
color: #f2e6d8;
border: 1px solid #96382c;
padding: 0.5rem 0.85rem;
border-radius: 4px;
margin-bottom: 0.7rem;
font-size: 0.95rem;
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
}
.boxlid {
@@ -4246,7 +4264,19 @@
}
.offline-note { font-style: italic; color: #6b3a2f; }
.game.offline .hand, .game.offline .board-zone, .game.offline .actions .stamp { pointer-events: none; opacity: 0.55; }
.sending { font-family: "Courier Prime", monospace; font-size: 0.78rem; color: #6b5a41; font-style: italic; }
.sending {
font-family: "Courier Prime", monospace;
font-size: 0.78rem;
color: #6b5a41;
font-style: italic;
/* Floats above its row: a note that came and went must never move the board. */
position: absolute;
right: 0;
top: -1.2rem;
white-space: nowrap;
pointer-events: none;
}
.say-box .sending { position: static; }
.sending.ok { color: #3f6b2f; font-style: normal; }
.rematch-call { font-size: 0.9rem; }
.seat.ghost .seat-name { font-style: italic; font-weight: 400; }
@@ -4361,6 +4391,13 @@
box-shadow: 0 2px 7px rgba(0, 0, 0, 0.45);
}
.chronicle div + div { margin-top: 0.05rem; }
/* A resolved attack's account, folded under a one-line summary. */
.receipt { display: inline; }
.receipt summary { display: inline; cursor: pointer; color: #6b5a41; font-style: italic; }
.receipt summary:hover { color: #43331f; }
.receipt ul { margin: 0.15rem 0 0.3rem 1.1rem; padding: 0; list-style: none; }
.receipt li { font-size: 0.86rem; color: #43331f; margin: 0.05rem 0; }
.receipt li::before { content: "› "; color: #8a6d3f; }
/* the acting wizard's color, so one player's lines can be picked out at a glance */
.log-mark {
display: inline-block;
@@ -4424,7 +4461,7 @@
color: #43331f;
}
.actions { display: flex; align-items: center; gap: 0.55rem; flex-wrap: wrap; min-height: 2rem; }
.actions { position: relative; display: flex; align-items: center; gap: 0.55rem; flex-wrap: wrap; min-height: 2rem; }
.draw-pick { color: #a49c86; font-size: 0.9rem; }
.attack-scrim {
packages/web/src/local.svelte.ts
+17 -12
View File
@@ -16,7 +16,8 @@ import {
type GameEvent,
redactEvent,
} from "@wizwar/engine";
import { humanize, net } from "./net.svelte";
import { type LogLine, humanize, net } from "./net.svelte";
import { receiptFor } from "./receipt";
const SAVE_KEY = "wizwar-hotseat";
@@ -47,7 +48,7 @@ class LocalGame {
viewerId = $state<PlayerId | null>(null);
/** Set while the device should be handed to the named player. */
handoffTo = $state<PlayerId | null>(null);
log = $state<string[]>([]);
log = $state<LogLine[]>([]);
/** The opening roll-off, shown once as the boards flip. */
openingRolls = $state<{ rolls: Record<string, number[]>; first: string; players: string[] } | null>(null);
/** Board flourishes: the app hooks in to animate command results. */
@@ -64,11 +65,19 @@ class LocalGame {
private activeMs = 0;
private lastMoveAt = 0;
/** A line of the chronicle for an event, and the receipt under a resolved attack. */
private chronicle(e: GameEvent, batch: readonly GameEvent[]): void {
const line = humanize(e);
if (line) this.log = [...this.log, { text: line, turn: null, notable: false }];
const receipt = receiptFor(batch, e);
if (receipt) this.log = [...this.log, { text: receipt.title, turn: null, notable: false, receipt: receipt.lines }];
}
/** The tabletop D4 for house calls: chronicle only, no game state. */
rollTableDie(): void {
if (!this.viewerId) return;
const roll = 1 + (crypto.getRandomValues(new Uint32Array(1))[0]! % 4);
this.log = [...this.log, `\u{1F3B2} ${this.viewerId} rolls the die \u2014 ${roll}`];
this.log = [...this.log, { text: `\u{1F3B2} ${this.viewerId} rolls the die \u2014 ${roll}`, turn: null, notable: false }];
}
/** Rebuild the whole game as replay steps (finished games only). */
@@ -148,8 +157,7 @@ class LocalGame {
this.gameState = state;
this.log = [];
for (const e of events) {
const line = humanize(e);
if (line) this.log = [...this.log, line];
this.chronicle(e, events);
}
this.active = true;
this.viewerId = null;
@@ -174,16 +182,14 @@ class LocalGame {
let current = state;
this.log = [];
for (const e of events) {
const line = humanize(e);
if (line) this.log = [...this.log, line];
this.chronicle(e, events);
}
for (const c of saved.commands) {
const result = applyCommand(current, c.playerId, c.command);
if (!result.ok) throw new Error(`replay failed: ${result.error}`);
current = result.state;
for (const e of result.events) {
const line = humanize(e);
if (line) this.log = [...this.log, line];
this.chronicle(e, result.events);
}
}
this.config = saved.config;
@@ -218,7 +224,7 @@ class LocalGame {
const plain = $state.snapshot(this.gameState) as GameState;
const result = applyCommand(plain, this.viewerId, command);
if (!result.ok) {
this.log = [...this.log, `— ${result.error} —`];
this.log = [...this.log, { text: `— ${result.error} —`, turn: null, notable: false }];
return;
}
this.onFx?.(result.events);
@@ -237,8 +243,7 @@ class LocalGame {
});
}
for (const e of result.events) {
const line = humanize(e);
if (line) this.log = [...this.log, line];
this.chronicle(e, result.events);
}
this.persist();
if (this.gameState.phase === "playing") {
packages/web/src/net.svelte.ts
+7
View File
@@ -2,6 +2,7 @@
import type { Command, GameEvent, GameView, Side } from "@wizwar/engine";
import { cardDef } from "@wizwar/engine";
import { receiptFor } from "./receipt";
const SERVER_URL =
import.meta.env.VITE_WIZWAR_SERVER ??
@@ -242,6 +243,8 @@ export interface LogLine {
/** The wizard acting, for the color mark beside the line: whoever
* cast, struck, walked, or countered — otherwise the turn's owner. */
actor?: string;
/** A resolved attack's account, folded under its line. */
receipt?: string[];
}
/** Events whose `player` is the one acting rather than the one acted on. */
@@ -578,6 +581,10 @@ class Net {
(e.type === "gameWon" || TURN_BOUNDARY.has(e.type));
this.log = [...this.log, { text: line, turn: this.turnCounter >= 0 ? this.turnCounter : null, notable, actor: actorOf(e, this.turnOwner) }];
}
const receipt = receiptFor(msg.events as GameEvent[], e);
if (receipt) {
this.log = [...this.log, { text: receipt.title, turn: this.turnCounter >= 0 ? this.turnCounter : null, notable: false, actor: actorOf(e, this.turnOwner), receipt: receipt.lines }];
}
}
if (talk > 0) {
this.chatCount += talk;
packages/web/src/receipt.ts
+102
View File
@@ -0,0 +1,102 @@
// The receipt under a resolved attack: the blow as it came in, what each
// counter left of it, what landed, and whose life moved — read off the
// engine's own events, so it explains what happened rather than what the
// cards promise.
import { cardDef, type GameEvent } from "@wizwar/engine";
export interface Receipt {
title: string;
lines: string[];
}
function nameOf(id: string | null): string {
if (!id) return "The punch";
try { return cardDef(id).name; } catch { return id; }
}
/** The receipt for a resolution event, or null when there is nothing to
* account for. `batch` is the event list the resolution arrived in: the
* damage and life bookkeeping of the same exchange sits beside it. */
export function receiptFor(batch: readonly GameEvent[], e: GameEvent): Receipt | null {
if (e.type === "attackMissed") {
const why =
e.because === "invisible" ? `${e.defender} is invisible; the die sent it astray.`
: e.because === "shrink" ? `${e.defender} is shrunk; the die said miss.`
: `${e.defender} outran it.`;
return { title: `${nameOf(e.attackCardId)} misses ${e.defender}`, lines: [why] };
}
if (e.type !== "attackResolved") return null;
const at = batch.indexOf(e);
let start = 0;
for (let i = at - 1; i >= 0; i--) {
if (batch[i]!.type === "attackResolved") { start = i + 1; break; }
}
const exchange = batch.slice(start, at + 1);
const returned = exchange.some((x) => x.type === "damaged" && /\(reflected\)/.test(x.source));
const lines: string[] = [];
const healed = exchange.find((x) => x.type === "lifeGained" && /\(reversed\)/.test(x.source));
const tookHold = exchange.find((x) => x.type === "spellSustained");
if (e.incoming != null) {
const card = nameOf(e.attackCardId);
const dur0 = e.incomingDuration ?? 0;
const parts = [
e.incoming > 0 ? `${e.incoming} incoming`
: dur0 > 0 ? `${dur0} turn${dur0 === 1 ? "" : "s"} of ${card} incoming`
: `${card} incoming`,
];
let damage = e.incoming;
let duration = dur0;
let reflected = 0;
for (const t of e.trail ?? []) {
const c = nameOf(t.cardId);
if (t.nullified) { parts.push(`${t.player}'s ${c} is nullified`); continue; }
const off = damage - t.damage;
const back = t.reflected - reflected;
const turnsOff = duration - t.duration;
let verb: string;
if (t.cardId === "full-reflection") verb = "turns it around";
else if (t.cardId === "reverse") verb = healed ? "turns it into healing" : "reverses it";
else if (t.cardId === "empathy") verb = "shares it with the caster";
else if (t.cardId === "anti-anti") verb = "cancels the counter before it";
else if (back > 0) verb = t.damage > 0 ? `sends ${back} back and lets ${t.damage} through` : `sends ${back} back`;
else if ((t.damage === 0 && damage > 0) || (t.duration === 0 && duration > 0 && damage === 0)) verb = "stops it cold";
else if (off > 0) verb = `takes ${off} off`;
else if (turnsOff > 0) verb = `takes ${turnsOff} turn${turnsOff === 1 ? "" : "s"} off`;
else verb = "changes nothing";
parts.push(`${t.player}'s ${c} ${verb}`);
damage = t.damage;
duration = t.duration;
reflected = t.reflected;
}
parts.push(
e.redirected ? `the whole blow turns back on ${e.attacker}`
: e.fullyStopped ? "nothing lands"
: healed && healed.type === "lifeGained" ? `${healed.amount} heals ${e.defender} instead`
: e.damageDealt > 0 ? `${e.damageDealt} lands on ${e.defender}`
: tookHold && tookHold.type === "spellSustained" ? `${card} takes hold of ${e.defender} for ${tookHold.turns} turn${tookHold.turns === 1 ? "" : "s"}`
: "nothing to land",
);
lines.push(parts.join(" → "));
} else if (e.redirected) {
lines.push(`the whole blow turns back on ${e.attacker}`);
} else if (e.fullyStopped) {
lines.push("nothing lands");
}
for (const x of exchange) {
if (x.type === "damaged" && x.amount > 0) {
const soak = x.soaks?.map((s) => `${s.what} soaks ${s.amount}`).join(", ");
lines.push(`${x.player}: ${x.lifeAfter + x.amount} → ${x.lifeAfter} life${soak ? ` (${soak})` : ""}`);
} else if (x.type === "damageImmune") {
lines.push(`${x.player} takes nothing — ${x.because}`);
} else if (x.type === "lifeGained") {
lines.push(`${x.player}: ${x.lifeAfter - x.amount} → ${x.lifeAfter} life, reversed`);
} else if (x.type === "stonesDestroyed") {
lines.push(`${x.player}'s magic stones are destroyed`);
}
}
if (lines.length === 0) return null;
return { title: `${nameOf(e.attackCardId)}${returned ? ", returned," : ""} resolved`, lines };
}