The tally is told as Wiz-War tells it: the game's own story on cards, then the ledgers in detail

A few counts that are the game's story (games finished, how they were
won, hours at the table) stand large on cards in the accent color, the
rest follow in a column of figures, then the fine print: Tally.svelte,
shared through the kit, with each game choosing its counts and words.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Jm2auWk6RP71CjaAb4FMoG

src/lib/components/Hall.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import About from './About.svelte';
+	import TallyBoard from './Tally.svelte';
 	import { goto } from '$app/navigation';
 	import { loadFamily, type FamilyGame } from '$lib/family';
 	import { allSeats, api, doubtSeat, forgetSeat, rememberSeat, ServerError, trustSeat, type Report, type Tally } from '$lib/game/client';
@@ -23,6 +24,30 @@
 		if (aboutOpen && !tally) api.tally().then((t) => (tally = t)).catch(() => (tally = null));
 	});
 	const hours = (minutes: number) => (minutes < 90 ? `${minutes} minutes` : `${Math.round(minutes / 60)} hours`);
+
+	/** The tally as the about panel tells it: this game's own story on cards, the rest in detail. */
+	const told = $derived.by(() => {
+		const t = tally;
+		if (!t) return null;
+		
+		const headline = [
+			{ n: t.gamesFinished, label: t.gamesFinished === 1 ? 'duel fought to a finish' : 'duels fought to a finish' },
+			{ n: t.byGame['duels won with every rival slain'] ?? 0, label: 'won with every rival slain' },
+			{ n: t.byGame["duels won by a rival's surrender"] ?? 0, label: "won by a rival's surrender" },
+			{ n: hours(t.minutesAtTable), label: 'at the table' }
+		];
+		const told = new Set<string>(['duels won with every rival slain', "duels won by a rival's surrender"]);
+		const details = [
+			{ n: t.gamesBegun, label: `duels begun, at ${t.tablesOpened} ${t.tablesOpened === 1 ? 'table' : 'tables'}` },
+			{ n: t.namesSeated, label: t.namesSeated === 1 ? 'name has taken a seat' : 'names have taken a seat' },
+			{ n: t.turnsPlayed, label: `turns of gestures written; ${t.longestGameTurns} in the longest duel` },
+			{ n: t.gamesWithBot, label: `duels with the bot seated` },
+			...(t.talkLines ? [{ n: t.talkLines, label: t.talkLines === 1 ? 'line of table talk' : 'lines of table talk' }] : []),
+			...Object.entries(t.byGame).filter(([label]) => !told.has(label)).map(([label, n]) => ({ n, label }))
+		];
+		const first = t.firstGameAt ? `The first duel began ${new Date(t.firstGameAt).toLocaleDateString(undefined, { year: 'numeric', month: 'long', day: 'numeric' })}. ` : '';
+		return { headline, details, note: `${first}Names are counted, not people: one player under two names is two here. Table time counts only the minutes between reveals, so a duel left open overnight adds nothing for the night.` };
+	});
 	/** The other games of Kestrel's Hall, for the about panel. */
 	let family = $state<FamilyGame[]>([]);
 	let hall = $state('');
@@ -305,27 +330,11 @@
 		</div>
 	{/snippet}
 	{#snippet aboutTally()}
-		<div class="about-body">
+		{#if told}
-			{#if tally}
+			<TallyBoard title="How much love the duel is getting" headline={told.headline} details={told.details} note={told.note} />
-				
-				<dl class="tally">
-					<dt>{tally.gamesFinished}</dt><dd>{tally.gamesFinished === 1 ? 'duel' : 'duels'} fought to a finish, of {tally.gamesBegun} begun at {tally.tablesOpened} {tally.tablesOpened === 1 ? 'table' : 'tables'}</dd>
-					<dt>{tally.namesSeated}</dt><dd>{tally.namesSeated === 1 ? 'name has' : 'names have'} taken a seat</dd>
-					<dt>{tally.turnsPlayed}</dt><dd>turns of gestures written; {tally.longestGameTurns} in the longest duel</dd>
-					<dt>{hours(tally.minutesAtTable)}</dt><dd>at the table, by the clock between reveals</dd>
-					<dt>{tally.gamesWithBot}</dt><dd>{tally.gamesWithBot === 1 ? 'duel' : 'duels'} with the bot seated; {tally.talkLines} {tally.talkLines === 1 ? 'line' : 'lines'} of table talk</dd>
-					{#each Object.entries(tally.byGame) as [label, n] (label)}
-						<dt>{n}</dt><dd>{label}</dd>
-					{/each}
-				</dl>
-				<p class="muted small">
-					{#if tally.firstGameAt}The first duel began {new Date(tally.firstGameAt).toLocaleDateString(undefined, { year: 'numeric', month: 'long', day: 'numeric' })}.{/if}
-					Names are counted, not people: one wizard under two names is two here. Table time counts only the minutes between reveals, so a duel left open overnight adds nothing for the night.
-				</p>
 		{:else}
 			<p class="muted">Counting…</p>
 		{/if}
-		</div>
 	{/snippet}
 	{#snippet aboutFamily()}
 		<div class="about-body">{#if family.length}
@@ -700,23 +709,6 @@
 		margin-top: 0.6rem;
 	}
 
-	.tally {
-		display: grid;
-		grid-template-columns: max-content 1fr;
-		gap: 0.25rem 0.9rem;
-		margin: 0.4rem 0 0.6rem;
-	}
-
-	.tally dt {
-		text-align: right;
-		font-weight: 500;
-		color: var(--bone);
-	}
-
-	.tally dd {
-		margin: 0;
-	}
-
 	.about-body em {
 		color: var(--bone);
 	}

src/lib/components/Tally.svelte

@@ -0,0 +1,94 @@
+<script lang="ts" module>
+	/** One count told: the number, and what it counts. */
+	export interface TallyLine {
+		n: number | string;
+		label: string;
+	}
+</script>
+
+<script lang="ts">
+	// What the ledgers add up to, told as Wiz-War tells it: a few counts that
+	// are the game's own story, large, on cards; then the rest in a column of
+	// figures; then the fine print. Each game chooses its counts and words.
+	let { headline, details, note, title = 'How much love the table is getting' }: { headline: TallyLine[]; details: TallyLine[]; note?: string; title?: string } =
+		$props();
+
+	const shown = (n: number | string) => (typeof n === 'number' ? n.toLocaleString() : n);
+</script>
+
+<h3>{title}</h3>
+<div class="stories">
+	{#each headline as s (s.label)}
+		<div class="story"><span class="big">{shown(s.n)}</span><span>{s.label}</span></div>
+	{/each}
+</div>
+{#if details.length}
+	<h3>The ledgers in detail</h3>
+	<dl class="ledger">
+		{#each details as d (d.label)}
+			<dt>{shown(d.n)}</dt><dd>{d.label}</dd>
+		{/each}
+	</dl>
+{/if}
+{#if note}<p class="note">{note}</p>{/if}
+
+<style>
+	h3 {
+		font-size: 0.8rem;
+		font-weight: 600;
+		letter-spacing: 0.12em;
+		text-transform: uppercase;
+		color: var(--bone);
+		border-bottom: 1px solid var(--rule-strong);
+		padding-bottom: 0.25rem;
+		margin: 0.2rem 0 0.7rem;
+	}
+	.stories {
+		display: grid;
+		grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
+		gap: 0.7rem;
+		margin: 0 0 1.2rem;
+	}
+	.story {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		text-align: center;
+		gap: 0.2rem;
+		background: var(--slate-deep);
+		border: 1px solid var(--rule-strong);
+		border-radius: 4px;
+		padding: 0.7rem 0.5rem 0.6rem;
+		font-size: 0.9rem;
+		color: var(--bone-dim);
+	}
+	.big {
+		font-size: 1.9rem;
+		font-weight: 700;
+		line-height: 1.05;
+		color: var(--ember);
+		font-variant-numeric: tabular-nums;
+	}
+	.ledger {
+		display: grid;
+		grid-template-columns: auto 1fr;
+		gap: 0.35rem 0.8rem;
+		margin: 0 0 1rem;
+	}
+	.ledger dt {
+		font-weight: 700;
+		color: var(--ember);
+		text-align: right;
+		white-space: nowrap;
+		font-variant-numeric: tabular-nums;
+	}
+	.ledger dd {
+		margin: 0;
+		color: var(--bone-dim);
+	}
+	.note {
+		font-size: 0.85rem;
+		font-style: italic;
+		color: var(--bone-faint);
+	}
+</style>