34 lines
984 B
Svelte
34 lines
984 B
Svelte
<script lang="ts">
|
||
import { HORSE_LENGTH, speedGain } from '$lib/race';
|
||
import type { Snippet } from 'svelte';
|
||
|
||
interface Props {
|
||
children: Snippet;
|
||
speed: number;
|
||
dur: number;
|
||
accel: number;
|
||
decel: number | number[];
|
||
}
|
||
|
||
function fmtp(x: number): string {
|
||
return x >= 0 ? '+' + x.toFixed(3) : x.toFixed(3);
|
||
}
|
||
|
||
const { children, speed, dur, accel, decel }: Props = $props();
|
||
const decels = $derived([decel].flat(1));
|
||
|
||
const gain = $derived(decels.map((d) => speedGain(speed, dur, accel, d) / HORSE_LENGTH));
|
||
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>
|