zenno/race/gate: add velocity/time chart

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

@@ -1,6 +1,8 @@
 <script lang="ts">
+	import * as Plot from '@observablehq/plot';
 	import * as race from '$lib/race';
 	import * as accel from '$lib/racelib/accel';
+	import type { Attachment } from 'svelte/attachments';
 
 	let rawPower = $state(1200);
 	let rawGuts = $state(1200);
@@ -112,6 +114,44 @@
 		gainLengths(last(seggs[0]).end, last(unskilledSeggs[0]).end),
 		gainLengths(last(seggs[1]).end, last(unskilledSeggs[1]).end),
 	]);
+
+	let width = $state(1);
+	let height = $state(1);
+	const plotLines = $derived([
+		{ t: 0, v: 3, x: 0, label: 'Slowest Speed' },
+		...seggs[0].map((t) => ({ t: t.end.t, v: t.end.v, x: t.end.x, label: 'Slowest Speed' })),
+		{ t: midTime[1], v: speeds[0], label: 'Slowest Speed' },
+		{ t: 0, v: 3, x: 0, label: 'Fastest Speed' },
+		...seggs[1].map((t) => ({ t: t.end.t, v: t.end.v, x: t.end.x, label: 'Fastest Speed' })),
+		{ t: midTime[1], v: speeds[1], label: 'Fastest Speed' },
+		{ t: 0, v: 3, x: 0, label: 'Without Skills' },
+		...unskilledSeggs[1].map((t) => ({ t: t.end.t, v: t.end.v, x: t.end.x, label: 'Without Skills' })),
+		{ t: midTime[1], v: speeds[1], label: 'Without Skills' },
+	]);
+	const makeChart: Attachment = (el) => {
+		$effect(() => {
+			el?.firstChild?.remove();
+			el?.append(
+				Plot.plot({
+					width,
+					height,
+					clip: true,
+					x: {
+						domain: [0, midTime[1]],
+						label: 'Time (s)',
+						line: true,
+					},
+					y: {
+						domain: [0, 23],
+						label: 'Speed (m/s)',
+						line: true,
+					},
+					color: { legend: true },
+					marks: [Plot.frame(), Plot.line(plotLines, { x: 't', y: 'v', stroke: 'label', strokeWidth: 3 })],
+				}),
+			);
+		});
+	};
 </script>
 
 <h1 class="text-4xl">Gate Calculator</h1>
@@ -266,6 +306,9 @@
 <div class="mx-auto flex w-full flex-col place-items-center md:flex-row md:justify-center">
 	{@render info('Skill Gain', 'L', gain[0], gain[1])}
 </div>
+<div class="mx-auto mb-12 h-72 max-w-4xl" bind:clientWidth={width} bind:clientHeight={height}>
+	<div role="img" {@attach makeChart}>the chart seems to have didn't</div>
+</div>
 
 {#snippet seggsTable(name: string, s: accel.Travel[])}
 	<table class="table-fixed border">