zenno/doc/race: lint fix

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

@@ -215,16 +215,6 @@
 	{/if}
 {/snippet}
 
-{#snippet docref(h: string)}
-	<p class="ml-auto text-right text-sm italic">
-		<a
-			href={`https://docs.google.com/document/d/15VzW9W2tXBBTibBRbZ8IVpW6HaMX8H0RP03kq6Az7Xg/edit?tab=t.0#heading=${h}`}
-			target="_blank"
-			rel="noopener noreferrer">ref &UpperRightArrow;</a
-		>
-	</p>
-{/snippet}
-
 <Article>
 	{#snippet head()}
 		<Sec h={1} id="top" class="text-center">Race Mechanics Charts</Sec>

zenno/src/routes/race/CalcInfo.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { ClassValue } from 'svelte/elements';
+
+	interface Props {
+		title: Snippet | string;
+		children: Snippet;
+		additional?: Snippet;
+		class?: ClassValue | null;
+	}
+
+	let { title, children, additional, class: className }: Props = $props();
+
+	const cl = $derived([
+		'm-2 flex flex-col rounded-md border p-2 text-center shadow-sm transition-shadow hover:shadow-md',
+		className,
+	]);
+</script>
+
+<div class={cl}>
+	<span class="block">
+		{#if typeof title === 'string'}
+			{title}
+		{:else}
+			{@render title()}
+		{/if}
+	</span>
+	<span class="block text-xl">
+		{@render children()}
+	</span>
+	{@render additional?.()}
+</div>

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

@@ -3,6 +3,7 @@
 	import * as race from '$lib/race';
 	import * as accel from '$lib/racelib/accel';
 	import type { Attachment } from 'svelte/attachments';
+	import CalcInfo from '../CalcInfo.svelte';
 
 	let rawPower = $state(1200);
 	let rawGuts = $state(1200);
@@ -284,14 +285,13 @@
 </form>
 
 {#snippet info(name: string, unit: string, val: number, val2?: number)}
-	<div class="m-2 max-w-72 flex-1 flex-col rounded-md border p-2 text-center shadow-sm transition-shadow hover:shadow-md">
-		<span class="block">{name}</span>
+	<CalcInfo title={name} class="max-w-72 flex-1">
 		{#if val2 == null}
 			<span class="block text-xl">{val.toFixed(3)} {unit}</span>
 		{:else}
 			<span class="block text-xl">{val.toFixed(3)} &ndash; {val2.toFixed(3)} {unit}</span>
 		{/if}
-	</div>
+	</CalcInfo>
 {/snippet}
 
 <div class="mx-auto flex w-full flex-col place-items-center md:flex-row md:justify-center">

zenno/src/routes/race/mspeed/SpeedDur.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { HORSE_LENGTH, speedGain } from '$lib/race';
 	import type { Snippet } from 'svelte';
+	import CalcInfo from '../CalcInfo.svelte';
 
 	interface Props {
 		children: Snippet;
@@ -21,13 +22,12 @@
 	const text = $derived(gain.map(fmtp).join(' – '));
 </script>
 
-<div
-	class="m-2 flex h-full w-full max-w-80 flex-1 flex-col rounded-md border p-2 text-center shadow-sm transition-shadow hover:shadow-md"
->
-	<div class="block">{@render children()}</div>
-	<span class="block text-xl">{text} L</span>
-	<div class="flex flex-row">
-		<span class="flex-1 text-xs">{fmtp(speed)} m/s</span>
-		<span class="flex-1 text-xs">{dur.toFixed(3)} s</span>
-	</div>
-</div>
+<CalcInfo title={children} class="max-w-80 flex-1">
+	{text} L
+	{#snippet additional()}
+		<div class="flex flex-row">
+			<span class="flex-1 text-xs">{fmtp(speed)} m/s</span>
+			<span class="flex-1 text-xs">{dur.toFixed(3)} s</span>
+		</div>
+	{/snippet}
+</CalcInfo>

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

@@ -1,7 +1,8 @@
 <script lang="ts">
 	import type { ComputedSeries } from '$lib/chart';
-	import { AptitudeLevel, inverseSpurtSpeed, RunningStyle, spurtSpeed, Stat } from '$lib/race';
+	import { AptitudeLevel, duelSpeedMod, 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 = [
@@ -25,6 +26,7 @@
 	const speedStat = $derived(rawSpeed + careerMod);
 	const gutsStat = $derived(rawGuts + careerMod);
 	const speed = $derived(spurtSpeed(speedStat, gutsStat, style, distanceApt, raceLen));
+	const duelBonus = $derived(duelSpeedMod(gutsStat));
 
 	const sProf = $derived([
 		inverseSpurtSpeed(speed, gutsStat, RunningStyle.FrontRunner, AptitudeLevel.S, raceLen) - careerMod,
@@ -44,17 +46,30 @@
 		skillSpeeds.map((v) => [v, inverseSpurtSpeed(speed + v, gutsStat, opponentStyle, AptitudeLevel.S, raceLen) - careerMod]),
 	);
 
-	const y: Array<ComputedSeries | null> = $derived([
+	const speedChart: Array<ComputedSeries | null> = $derived([
 		{ label: 'Aptitude S', y: (x) => spurtSpeed(x, gutsStat, style, AptitudeLevel.S, raceLen) },
-		{ label: 'Aptitude A', y: (x) => spurtSpeed(x, gutsStat, style, AptitudeLevel.A, raceLen) },
-		distanceApt < AptitudeLevel.A
+		{
+			label: `Aptitude ${AptitudeLevel[distanceApt]} + Dueling`,
+			y: (x) => spurtSpeed(x, gutsStat, style, distanceApt, raceLen) + duelBonus,
+		},
+		distanceApt !== AptitudeLevel.S
 			? { label: `Aptitude ${AptitudeLevel[distanceApt]}`, y: (x) => spurtSpeed(x, gutsStat, style, distanceApt, raceLen) }
 			: null,
 	]);
+	const gutsChart: Array<ComputedSeries | null> = $derived([
+		{ label: 'Aptitude S', y: (x) => spurtSpeed(speedStat, x, style, AptitudeLevel.S, raceLen) },
+		{
+			label: `Aptitude ${AptitudeLevel[distanceApt]} + Dueling`,
+			y: (x) => spurtSpeed(speedStat, x, style, distanceApt, raceLen) + duelSpeedMod(x),
+		},
+		distanceApt !== AptitudeLevel.S
+			? { label: `Aptitude ${AptitudeLevel[distanceApt]}`, y: (x) => spurtSpeed(speedStat, x, style, distanceApt, raceLen) }
+			: null,
+	]);
 
 	const range: [number, number] = $derived([
 		spurtSpeed(200, gutsStat, RunningStyle.GreatEscape, AptitudeLevel.C, raceLen),
-		spurtSpeed(2000, gutsStat, RunningStyle.EndCloser, AptitudeLevel.S, raceLen),
+		spurtSpeed(2000, gutsStat, RunningStyle.EndCloser, AptitudeLevel.S, raceLen) + duelBonus,
 	]);
 </script>
 
@@ -93,9 +108,10 @@
 		<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>
+<div class="mx-auto mt-8 flex max-w-3xl flex-col md:flex-row">
+	<CalcInfo title="Target Spurt Speed" class="flex-1">{speed.toFixed(3)} m/s</CalcInfo>
+	<CalcInfo title="Dueling Bonus" class="flex-1">+{duelBonus.toFixed(3)} m/s</CalcInfo>
+</div>
 {#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 +119,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,15 +136,11 @@
 	</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>
-<div class="mx-auto h-60 max-w-3xl place-content-center py-4 md:h-96">
-	<StatChart stat={Stat.Speed} {y} yLabel="Spurt Speed (m/s)" xRule={speedStat} {range} />
+<div class="mx-auto grid h-96 grid-cols-1 py-4 md:grid-cols-2">
+	<StatChart stat={Stat.Speed} y={speedChart} yLabel="Spurt Speed (m/s)" xRule={speedStat} {range} />
+	<StatChart stat={Stat.Guts} y={gutsChart} yLabel="Spurt Speed (m/s)" xRule={gutsStat} {range} />
 </div>