zenno/mspeed: also show base acceleration

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

@@ -16,6 +16,7 @@
 		Stat,
 	} from '$lib/race';
 	import StatChart from '$lib/StatChart.svelte';
+	import { i } from 'mathjs';
 	import SpeedDur from './SpeedDur.svelte';
 
 	let rawPower = $state(1200);
@@ -68,7 +69,10 @@
 			: null,
 	]);
 	const lcY: Array<ComputedSeries | null> = $derived([
-		{ label: 'Ideal Lane Combo', y: (x) => speedGain(moveLaneModifier(x), lcDur, accel[0], decel[0]) / HORSE_LENGTH },
+		{
+			label: 'Ideal Lane Combo',
+			y: (x) => speedGain(moveLaneModifier(x), lcDur, acceleration(x, style, surfApt, Phase.EarlyRace), decel[0]) / HORSE_LENGTH,
+		},
 	]);
 	const pcRuler = $derived({
 		y: speedGain(0.35, skillDuration(2.4, raceLen), accel[1], decel[1]) / HORSE_LENGTH,
@@ -121,23 +125,45 @@
 	</div>
 </div>
 <span class="mt-8 block w-full text-center text-lg">Mechanics</span>
-<div class="mx-auto flex w-full flex-col md:flex-row md:justify-center">
+<div class="mx-auto flex w-full flex-col place-items-center md:flex-row md:justify-center">
 	<SpeedDur speed={ssBoost} dur={ssDur} accel={accel[0]} decel={[decel[0], decel[1]]}>Spot Struggle</SpeedDur>
 	<SpeedDur speed={lcBoost} dur={lcDur} accel={accel[0]} decel={decel[0]}>Idealized Lane Combo (DDPP)</SpeedDur>
 </div>
+<table class="mx-auto mt-1 table-fixed text-sm border border-t-0 rounded-b-md">
+	<caption class="border border-b-0 rounded-t-md">Base Acceleration</caption>
+	<thead>
+		<tr>
+			<th class="w-32" scope="col">Early Race</th>
+			<th class="w-32" scope="col">Mid Race</th>
+			<th class="w-32" scope="col">Late Race</th>
+		</tr>
+	</thead>
+	<tbody>
+		<tr>
+			{#each accel as v, i (i)}
+				<td class="text-center">{v.toFixed(3)} m/s²</td>
+			{/each}
+		</tr>
+		<tr>
+			{#each decel as v, i (i)}
+				<td class="text-center">{v.toFixed(3)} m/s²</td>
+			{/each}
+		</tr>
+	</tbody>
+</table>
 <span class="mt-8 block w-full text-center text-lg">Unique Skills</span>
-<div class="mx-auto flex flex-col md:flex-row md:justify-center">
+<div class="mx-auto flex flex-col place-items-center md:flex-row md:justify-center">
 	{#each uniques as [name, boost, dur, phase] (name)}
 		<SpeedDur speed={boost} dur={skillDuration(dur, raceLen)} accel={accel[phase]} decel={decel[phase]}>{name}</SpeedDur>
 	{/each}
 </div>
 <span class="mt-8 block w-full text-center text-lg">Inherited Uniques &amp; Other Skills</span>
-<div class="mx-auto flex flex-col md:flex-row md:justify-center">
+<div class="mx-auto flex flex-col place-items-center md:flex-row md:justify-center">
 	{#each skills as [name, boost, dur, phase] (name)}
 		<SpeedDur speed={boost} dur={skillDuration(dur, raceLen)} accel={accel[phase]} decel={decel[phase]}>{name}</SpeedDur>
 	{/each}
 </div>
-<div class="mx-auto h-60 py-4 md:h-96 md:w-3xl">
+<div class="mx-auto grid h-96 grid-cols-1 py-4 md:grid-cols-2">
 	<StatChart
 		class="flex-1"
 		stat={Stat.Guts}
@@ -147,8 +173,6 @@
 		xRule={gutsStat}
 		yRule={ssYRule}
 	/>
-</div>
-<div class="mx-auto mt-4 h-60 py-4 md:mt-0 md:h-96 md:w-3xl">
 	<StatChart
 		class="flex-1"
 		stat={Stat.Power}
@@ -159,7 +183,7 @@
 		yRule={lcYRule}
 	/>
 </div>
-<div class="mx-auto mt-12 w-full max-w-4xl border-t md:mt-8">
+<div class="mx-auto mt-12 w-full max-w-4xl border-t pt-4 md:mt-8">
 	<ul class="ml-4 list-disc">
 		<li>All lengths gained include acceleration at the beginning of each speed boost and deceleration after its end.</li>
 		<li>Each effect is assumed to be isolated and executed on level ground.</li>