24 lines
876 B
Vue
24 lines
876 B
Vue
<script setup lang="ts">
|
|
import { computed } from 'vue';
|
|
import type { JourneySnapshot } from '@/journey/types';
|
|
import type { QualityTier } from '@/journey/motion-policy';
|
|
|
|
const props = defineProps<{
|
|
journey: JourneySnapshot;
|
|
sectionLabel: string;
|
|
quality: QualityTier;
|
|
}>();
|
|
|
|
const routePercent = computed(() => `${Math.round(Math.min(1, Math.max(0, props.journey.routeProgress)) * 100)}%`);
|
|
const qualityLabel = computed(() => props.quality.charAt(0).toUpperCase() + props.quality.slice(1));
|
|
</script>
|
|
|
|
<template>
|
|
<aside class="journey-hud" aria-hidden="true">
|
|
<span class="journey-hud__route">ROUTE {{ routePercent }}</span>
|
|
<span class="journey-hud__section">{{ sectionLabel }}</span>
|
|
<span class="journey-hud__quality">{{ qualityLabel }}</span>
|
|
<strong v-if="journey.arrived" class="journey-hud__arrival">ARRIVED</strong>
|
|
</aside>
|
|
</template>
|