xeno/Portfolio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: drive the nav bar's speed on screens below 1280 px

Browse Source
This commit is contained in:
LucaP
2026-10-13 13:22:41 +03:00
parent 4a5c54e922
commit 9124761d8d
1 changed files with 12 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
src/journey/speedometer-dial.ts
View File

@@ -6,7 +6,9 @@
* text. The frame keeps the journey loop running while the needle settles, * text. The frame keeps the journey loop running while the needle settles,
* during a flash and for the ignition sweep; otherwise scroll events and the * during a flash and for the ignition sweep; otherwise scroll events and the
* navigator drive it. Below 1280 the bay is the summary's and the gauge is * navigator drive it. Below 1280 the bay is the summary's and the gauge is
* display: none, so the frame does nothing there. * display: none, but the nav bar still mirrors its speed
* (composables/useNavBarSignals.ts), so the frame keeps --speed, --throttle,
* data-engine, data-brake and data-jump live there and skips the rest.
*/ */
import type { BeamSample } from '@/journey/headlight-beam'; import type { BeamSample } from '@/journey/headlight-beam';
import { readIgnition } from '@/journey/ignition-feed'; import { readIgnition } from '@/journey/ignition-feed';
@@ -104,7 +106,6 @@ export function createSpeedometerDial(el: HTMLElement, sources: DialSources): Sp
return { return {
frame(now, journey) { frame(now, journey) {
if (!wide) return false;
const navigation = sources.navigation(); const navigation = sources.navigation();
input.driveSpeed = journey.driveSpeed; input.driveSpeed = journey.driveSpeed;
input.direction = journey.direction; input.direction = journey.direction;
@@ -115,20 +116,23 @@ export function createSpeedometerDial(el: HTMLElement, sources: DialSources): Sp
input.arrived = journey.arrived; input.arrived = journey.arrived;
const out = model.step(now, input, sources.animated()); const out = model.step(now, input, sources.animated());
// What the nav bar reads, at every width.
prop(1, '--speed', Math.min(1, out.kmh / MAX_KMH), 0.002, 3);
prop(2, '--throttle', out.throttle, 0.01, 2);
const engine = out.engine === 'off' && input.arrived ? 'parked' : out.engine;
if (strings[3] !== engine) { strings[3] = engine; el.dataset.engine = engine; }
flag(0, 'data-brake', out.brake);
flag(1, 'data-jump', input.jump);
if (!wide) return !out.settled;
const beam = sources.sampleBeam(now); const beam = sources.sampleBeam(now);
const flashing = flashOf(beam === null ? 0 : beam.intensity) && out.engine === 'on'; const flashing = flashOf(beam === null ? 0 : beam.intensity) && out.engine === 'on';
const units = sources.units(); const units = sources.units();
prop(0, '--needle', needleDegrees(out.kmh), 0.15, 1); prop(0, '--needle', needleDegrees(out.kmh), 0.15, 1);
prop(1, '--speed', Math.min(1, out.kmh / MAX_KMH), 0.002, 3);
prop(2, '--throttle', out.throttle, 0.01, 2);
text(0, '.speedo__digits', formatSpeed(out.kmh, units)); text(0, '.speedo__digits', formatSpeed(out.kmh, units));
text(1, '.speedo__gear', out.gear); text(1, '.speedo__gear', out.gear);
text(2, '.speedo__trip', formatTrip(out.tripKm, units)); text(2, '.speedo__trip', formatTrip(out.tripKm, units));
const engine = out.engine === 'off' && input.arrived ? 'parked' : out.engine;
if (strings[3] !== engine) { strings[3] = engine; el.dataset.engine = engine; }
flag(0, 'data-brake', out.brake);
flag(1, 'data-jump', input.jump);
flag(2, 'data-flash', flashing); flag(2, 'data-flash', flashing);
if (detailOn) { if (detailOn) {
const minutes = Math.max(1, Math.round((now - mountedAt) / 60_000)); const minutes = Math.max(1, Math.round((now - mountedAt) / 60_000));