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

feat: overhead gantry top bar with a docking sign window

Browse Source 
The top bar becomes a steel gantry. Its centre window is a mask cut-out the
3D exit sign docks into; between signs the window shows the dash read-out.
The drive controls move into the right bay, and the reading viewport is
clipped at the beam, so the empty band under the bar is gone.
This commit is contained in:
LucaP
2026-10-10 22:20:48 +03:00
parent 32eb3e4d40
commit 0ae27168cd
16 changed files with 819 additions and 398 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
src/components/JourneyHud.vue
View File

@@ -7,8 +7,15 @@ const props = defineProps<{
journey: JourneySnapshot;
sectionLabel: string;
exit?: string | undefined;
nextLabel?: string | undefined;
nextExit?: string | undefined;
}>();
/** Decorative next-exit line (CSS generated content keeps SSR text stable). */
const next = computed(() =>
props.nextLabel === undefined ? 'END OF ROUTE' : `NEXT ${props.nextExit ?? ''} \u2192 ${props.nextLabel}`.toUpperCase(),
);
const routePercent = computed(() => `${Math.round(Math.min(1, Math.max(0, props.journey.routeProgress)) * 100)}%`);
// The dash clock is decorative and CSS-generated, so SSR and hydrated text stay identical.
@@ -24,7 +31,7 @@ onUnmounted(() => window.clearInterval(timer));
<template>
<aside class="journey-hud" aria-hidden="true" :data-exit="exit" :data-clock="clock">
<span class="journey-hud__route"><span>ROUTE</span> <strong>{{ routePercent }}</strong></span>
<span class="journey-hud__route" :data-next="next"><span>ROUTE</span> <strong>{{ routePercent }}</strong></span>
<span class="journey-hud__section">{{ sectionLabel }}</span>
<strong v-if="journey.arrived" class="journey-hud__arrival">ARRIVED</strong>
</aside>