zenno/mspeed: fix display on mobile, maybe

This commit is contained in:
2026-05-25 22:49:27 -04:00
parent 6a30b1d6f0
commit efb36f705c

View File

@@ -68,7 +68,10 @@
: null, : null,
]); ]);
const lcY: Array<ComputedSeries | null> = $derived([ 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({ const pcRuler = $derived({
y: speedGain(0.35, skillDuration(2.4, raceLen), accel[1], decel[1]) / HORSE_LENGTH, y: speedGain(0.35, skillDuration(2.4, raceLen), accel[1], decel[1]) / HORSE_LENGTH,
@@ -121,23 +124,23 @@
</div> </div>
</div> </div>
<span class="mt-8 block w-full text-center text-lg">Mechanics</span> <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={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> <SpeedDur speed={lcBoost} dur={lcDur} accel={accel[0]} decel={decel[0]}>Idealized Lane Combo (DDPP)</SpeedDur>
</div> </div>
<span class="mt-8 block w-full text-center text-lg">Unique Skills</span> <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)} {#each uniques as [name, boost, dur, phase] (name)}
<SpeedDur speed={boost} dur={skillDuration(dur, raceLen)} accel={accel[phase]} decel={decel[phase]}>{name}</SpeedDur> <SpeedDur speed={boost} dur={skillDuration(dur, raceLen)} accel={accel[phase]} decel={decel[phase]}>{name}</SpeedDur>
{/each} {/each}
</div> </div>
<span class="mt-8 block w-full text-center text-lg">Inherited Uniques &amp; Other Skills</span> <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)} {#each skills as [name, boost, dur, phase] (name)}
<SpeedDur speed={boost} dur={skillDuration(dur, raceLen)} accel={accel[phase]} decel={decel[phase]}>{name}</SpeedDur> <SpeedDur speed={boost} dur={skillDuration(dur, raceLen)} accel={accel[phase]} decel={decel[phase]}>{name}</SpeedDur>
{/each} {/each}
</div> </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 <StatChart
class="flex-1" class="flex-1"
stat={Stat.Guts} stat={Stat.Guts}
@@ -147,8 +150,6 @@
xRule={gutsStat} xRule={gutsStat}
yRule={ssYRule} yRule={ssYRule}
/> />
</div>
<div class="mx-auto mt-4 h-60 py-4 md:mt-0 md:h-96 md:w-3xl">
<StatChart <StatChart
class="flex-1" class="flex-1"
stat={Stat.Power} stat={Stat.Power}
@@ -159,7 +160,7 @@
yRule={lcYRule} yRule={lcYRule}
/> />
</div> </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"> <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>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> <li>Each effect is assumed to be isolated and executed on level ground.</li>