zenno/spurt: compare speed skills

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

@@ -9,10 +9,12 @@
 		['End Closer', RunningStyle.EndCloser],
 		['Great Escape', RunningStyle.GreatEscape],
 	] as const;
+	const skillSpeeds = [0.45, 0.35, 0.25, 0.15] as const;
 
 	let rawSpeed: number = $state(1200);
 	let rawGuts: number = $state(1200);
 	let style: RunningStyle = $state(RunningStyle.FrontRunner);
+	let opponentStyle: RunningStyle = $state(RunningStyle.PaceChaser);
 	let distanceApt: AptitudeLevel = $state(AptitudeLevel.S);
 	let raceLen: number = $state(2000);
 	let isCareer: boolean = $state(false);
@@ -36,6 +38,7 @@
 		inverseSpurtSpeed(speed, gutsStat, RunningStyle.EndCloser, AptitudeLevel.A, raceLen) - careerMod,
 		inverseSpurtSpeed(speed, gutsStat, RunningStyle.GreatEscape, AptitudeLevel.A, raceLen) - careerMod,
 	]);
+	const skillProf = $derived(skillSpeeds.map((v) => [v, inverseSpurtSpeed(speed + v, gutsStat, opponentStyle, AptitudeLevel.S, raceLen) - careerMod]));
 </script>
 
 <h1 class="text-4xl">Spurt Speed Calculator</h1>
@@ -95,3 +98,24 @@
 		</div>
 	</div>
 {/each}
+<div class="mx-auto max-w-3xl">
+	<span class="mt-8 block w-full">
+		While a speed skill is active, the equivalent speed for a distance S
+		<select id="opponentStyle" required bind:value={opponentStyle}>
+			{#each stylesList as [name, style]}
+				<option value={style}>{style === RunningStyle.GreatEscape ? 'Great Escape (Runaway)' : name}</option>
+			{/each}
+		</select>
+		is
+	</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>
+		{/each}
+	</div>
+</div>