zenno/race: common component for calculator outputs

zenno/src/routes/race/spurt/+page.svelte

@@ -2,6 +2,7 @@
 	import type { ComputedSeries } from '$lib/chart';
 	import { AptitudeLevel, inverseSpurtSpeed, RunningStyle, spurtSpeed, Stat } from '$lib/race';
 	import StatChart from '$lib/StatChart.svelte';
+	import CalcInfo from '../CalcInfo.svelte';
 
 	const aptsList = Object.entries(AptitudeLevel).filter(([, val]) => typeof val === 'number');
 	const stylesList = [
@@ -93,9 +94,7 @@
 		<input type="checkbox" id="isCareer" role="switch" bind:checked={isCareer} class="min-h-6 min-w-6 align-middle" />
 	</div>
 </div>
-<span class="mt-8 block w-full text-center text-lg">
-	Target spurt speed: {speed.toFixed(3)} m/s
-</span>
+<CalcInfo title="Target Spurt Speed" class="mx-auto mt-8 max-w-md">{speed.toFixed(3)} m/s</CalcInfo>
 {#each [[AptitudeLevel.A, aProf] as const, [AptitudeLevel.S, sProf] as const] as [level, inv] (level)}
 	<div class="mx-auto max-w-3xl">
 		<span class="mt-8 block w-full">
@@ -103,14 +102,7 @@
 		</span>
 		<div class="flex flex-col md:flex-row">
 			{#each stylesList as [styleName, s] (s)}
-				<div
-					class={['m-2 flex-1 rounded-md border shadow-sm transition-shadow hover:shadow-md', s === style ? 'border-2' : null]}
-				>
-					<div class="h-full w-full flex-col text-center">
-						<span class="block text-lg">{styleName}</span>
-						<span class="block text-2xl">{inv[s]}</span>
-					</div>
-				</div>
+				<CalcInfo title={styleName} class={['flex-1', { 'border-2': s === style }]}>{inv[s]}</CalcInfo>
 			{/each}
 		</div>
 	</div>
@@ -127,12 +119,7 @@
 	</span>
 	<div class="flex flex-col md:flex-row">
 		{#each skillProf as [v, inv] (v)}
-			<div class="m-2 flex-1 rounded-md border shadow-sm transition-shadow hover:shadow-md">
-				<div class="h-full w-full flex-col text-center">
-					<span class="block text-lg">+{v.toFixed(2)}</span>
-					<span class="block text-2xl">{inv}</span>
-				</div>
-			</div>
+			<CalcInfo title={`+${v.toFixed(2)}`} class="flex-1">{inv}</CalcInfo>
 		{/each}
 	</div>
 </div>