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

@@ -5,6 +5,7 @@
 	import { goto } from '$app/navigation';
 	import { loadFamily, type FamilyGame } from '$lib/family';
 	import About from './About.svelte';
+	import TallyBoard from './Tally.svelte';
 	import Preferences from './Preferences.svelte';
 	import { prefs, setPref } from '$lib/prefs.svelte';
 	import { allSeats, doubtSeat, forgetSeat, rememberSeat, ServerError, trustSeat } from '$lib/net/client';
@@ -37,6 +38,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 ? 'game played to a finish' : 'games played to a finish' },
+			{ n: t.byGame["won by the king's escape"] ?? 0, label: "won by the king's escape" },
+			{ n: t.byGame['won by taking the king'] ?? 0, label: 'won by taking the king' },
+			{ n: hours(t.minutesAtTable), label: 'at the table' }
+		];
+		const told = new Set<string>(["won by the king's escape", 'won by taking the king']);
+		const details = [
+			{ n: t.gamesBegun, label: `games 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 recorded; ${t.longestGameTurns} in the longest game` },
+			{ n: t.gamesWithBot, label: `games with a housecarl 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 game 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 moves, so a game 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('');
@@ -274,27 +299,11 @@
 		</div>
 	{/snippet}
 	{#snippet aboutTally()}
-		<div class="about-body">
-			{#if tally}
-				
-				<dl class="tally">
-					<dt>{tally.gamesFinished}</dt><dd>{tally.gamesFinished === 1 ? 'game' : 'games'} played 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 recorded; {tally.longestGameTurns} in the longest game</dd>
-					<dt>{hours(tally.minutesAtTable)}</dt><dd>at the table, by the clock between moves</dd>
-					<dt>{tally.gamesWithBot}</dt><dd>{tally.gamesWithBot === 1 ? 'game' : 'games'} with a housecarl 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 game began {new Date(tally.firstGameAt).toLocaleDateString(undefined, { year: 'numeric', month: 'long', day: 'numeric' })}.{/if}
-					Names are counted, not people: one player under two names is two here. Table time counts only the minutes between moves, so a game 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 board 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}
@@ -619,19 +628,4 @@
 		border-radius: 4px;
 	}
 
-	.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;
-	}
-
-	.tally dd {
-		margin: 0;
-	}
 </style>