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 tally}
-				
-				<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>
+		{#if told}
+			<TallyBoard title="How much love the duel is getting" headline={told.headline} details={told.details} note={told.note} />
+		{:else}
+			<p class="muted">Counting…</p>
+		{/if}
 	{/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);
 	}