zenno/doc/race: better section speed charts

Fixes #49.

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

@@ -7,10 +7,6 @@
 	import { resolve } from '$app/paths';
 	import RaceLenSlider from '$lib/RaceLenSlider.svelte';
 
-	function modemean(x: number, bonus: number, p: number): number {
-		return x * (1 - p) + x * bonus * p;
-	}
-
 	let style = $state(race.RunningStyle.FrontRunner);
 	let surfaceApt = $state(race.AptitudeLevel.A);
 	let distanceApt = $state(race.AptitudeLevel.A);
@@ -84,38 +80,38 @@
 	];
 	const duelSpeed: ComputedSeries[] = [{ label: 'Dueling Speed Boost', y: (x) => race.duelSpeedMod(x) }];
 	const duelAccel: ComputedSeries[] = [{ label: 'Dueling Acceleration Boost', y: (x) => race.duelAccelMod(x) }];
-	const secSpeed: Array<ComputedAreas | null> = $derived([
+	const secSpeedEarly: Array<ComputedAreas | null> = $derived([
 		{
-			label: 'Early Race',
+			label: styleIsFront ? 'Front S' : 'Style S',
+			y1: (x) => race.sectionSpeed(raceLen, x * 1.1, style, race.Phase.EarlyRace)[0],
+			y2: (x) => race.sectionSpeed(raceLen, x * 1.1, style, race.Phase.EarlyRace)[1],
+		},
+		{
+			label: styleIsFront ? 'Front A' : 'Style A',
 			y1: (x) => race.sectionSpeed(raceLen, x, style, race.Phase.EarlyRace)[0],
 			y2: (x) => race.sectionSpeed(raceLen, x, style, race.Phase.EarlyRace)[1],
 		},
 		{
-			label: 'Mid Race',
+			label: styleIsFront ? 'Front A Speed-Up Mode' : 'Style A Pace-Up Mode',
+			y1: (x) => race.sectionSpeed(raceLen, x, style, race.Phase.EarlyRace)[0] * 1.04,
+			y2: (x) => race.sectionSpeed(raceLen, x, style, race.Phase.EarlyRace)[1] * 1.04,
+		},
+	]);
+	const secSpeedMid: Array<ComputedAreas | null> = $derived([
+		{
+			label: styleIsFront ? 'Front S' : 'Style S',
+			y1: (x) => race.sectionSpeed(raceLen, x * 1.1, style, race.Phase.MidRace)[0],
+			y2: (x) => race.sectionSpeed(raceLen, x * 1.1, style, race.Phase.MidRace)[1],
+		},
+		{
+			label: styleIsFront ? 'Front A' : 'Style A',
 			y1: (x) => race.sectionSpeed(raceLen, x, style, race.Phase.MidRace)[0],
 			y2: (x) => race.sectionSpeed(raceLen, x, style, race.Phase.MidRace)[1],
 		},
-		styleIsFront
-			? {
-					label: 'Early Race + Mean Speed-Up Mode',
-					y1: (x) => modemean(race.sectionSpeed(raceLen, x, style, race.Phase.EarlyRace)[0], 1.04, race.frontModeEnterChance(x)),
-					y2: (x) => modemean(race.sectionSpeed(raceLen, x, style, race.Phase.EarlyRace)[1], 1.04, race.frontModeEnterChance(x)),
-				}
-			: {
-					label: 'Early Race + Mean Pace-Up Mode',
-					y1: (x) => modemean(race.sectionSpeed(raceLen, x, style, race.Phase.EarlyRace)[0], 1.04, race.paceUpEnterChance(x)),
-					y2: (x) => modemean(race.sectionSpeed(raceLen, x, style, race.Phase.EarlyRace)[1], 1.04, race.paceUpEnterChance(x)),
-				},
-		styleIsFront
-			? {
-					label: 'Mid Race + Mean Speed-Up Mode',
-					y1: (x) => modemean(race.sectionSpeed(raceLen, x, style, race.Phase.MidRace)[0], 1.04, race.frontModeEnterChance(x)),
-					y2: (x) => modemean(race.sectionSpeed(raceLen, x, style, race.Phase.MidRace)[1], 1.04, race.frontModeEnterChance(x)),
-				}
-			: {
-					label: 'Mid Race + Mean Pace-Up Mode',
-					y1: (x) => modemean(race.sectionSpeed(raceLen, x, style, race.Phase.MidRace)[0], 1.04, race.paceUpEnterChance(x)),
-					y2: (x) => modemean(race.sectionSpeed(raceLen, x, style, race.Phase.MidRace)[1], 1.04, race.paceUpEnterChance(x)),
+		{
+			label: styleIsFront ? 'Front A Speed-Up Mode' : 'Style A Pace-Up Mode',
+			y1: (x) => race.sectionSpeed(raceLen, x, style, race.Phase.MidRace)[0] * 1.04,
+			y2: (x) => race.sectionSpeed(raceLen, x, style, race.Phase.MidRace)[1] * 1.04,
 		},
 	]);
 	const downhill: ComputedSeries[] = [
@@ -396,16 +392,25 @@
 		>Section Speed</Sec
 	>
 	<p>Random variance in target speed per race section.</p>
-	<div class="mb-24 h-60 w-full md:mb-20 md:h-96">
+	<div class="mb-10 grid h-96 w-full md:grid-cols-2">
 		<StatChart
-			class="mx-auto mb-12 h-full w-full max-w-3xl md:mb-10"
 			stat={race.Stat.Wit}
-			yArea={secSpeed}
-			yLabel="Section Speed (m/s)"
-			range={[17, 23]}
+			yArea={secSpeedEarly}
+			yLabel="Early Race Section Speed (m/s)"
+			range={[17, 23.5]}
 			plotOptions={{ color: { legend: true } }}
+			class="h-96 max-h-96"
 		/>
-		<div class="mx-auto flex w-full md:max-w-2xl">
+		<StatChart
+			stat={race.Stat.Wit}
+			yArea={secSpeedMid}
+			yLabel="Mid Race Section Speed (m/s)"
+			range={[17, 23.5]}
+			plotOptions={{ color: { legend: true } }}
+			class="h-96 max-h-96"
+		/>
+	</div>
+	<div class="mx-auto mb-4 flex w-full md:max-w-2xl">
 		<label class="my-auto hidden flex-1 pr-2 text-right text-sm md:inline" for="secSpeedRaceLen">Race Length</label>
 		<input
 			class="my-auto max-w-40 flex-1 md:flex-2"
@@ -424,7 +429,6 @@
 			{/each}
 		</select>
 	</div>
-	</div>
 
 	<Sec
 		h={3}