Skip to content

Commit

Permalink
show clock and heat on speed screen if there's room
Browse files Browse the repository at this point in the history
  • Loading branch information
swantzter committed Jul 13, 2024
1 parent 6e7e997 commit 163570e
Showing 1 changed file with 30 additions and 3 deletions.
33 changes: 30 additions & 3 deletions src/views/DeviceStreamLive.vue
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,28 @@
<div
class="grid grid-rows-1"
:class="{
'bg-white': theme !== 'dark',
'bg-black': theme === 'dark',
'bg-white text-black': theme !== 'dark',
'bg-black text-white': theme === 'dark',
}"
>
<div
class="absolute flex flex-col"
:class="{
'top-4 right-4 items-end': freeCorner === 'top-right',
'bottom-4 right-4 items-end': freeCorner === 'bottom-right',
'top-4 left-4 items-start': freeCorner === 'top-left',
'bottom-4 left-4 items-start': freeCorner === 'bottom-left'
}"
>
<div class="font-bold text-8xl">
{{ clock }}
</div>
<div>
<span class="text-5xl">heat&nbsp;</span>
<span v-if="heatInfo.data.value" class="text-8xl font-bold">{{ heatInfo.data.value[0].HeatNumber }}</span>
</div>
</div>

<main class="grid custom-grid">
<template v-for="row of screen?.rows ?? 0" :key="row">
<template v-for="col of screen?.cols ?? 0" :key="col">
Expand Down Expand Up @@ -84,6 +102,7 @@ import SpeedLiveScore from '../components/SpeedLiveScore.vue'
import TimingLiveScore from '../components/TimingLiveScore.vue'
import UnsupportedCompetitionEvent from '../components/UnsupportedCompetitionEvent.vue'
import { useHeatInfo } from '../hooks/heat-info'
import { useDateFormat, useTimestamp } from '@vueuse/core'
useHead({
title: '📺 Device Stream (Live)'
Expand All @@ -92,16 +111,24 @@ useHead({
const settings = useDeviceStreamPools()
const screenId = useRouteQuery<string>('screen-id')
const theme = useTheme()
const clock = useDateFormat(useTimestamp({ interval: 300 }), 'HH:mm')
const screen = computed(() => screenId.value == null ? null : settings.value.screens?.[screenId.value])
const cols = computed(() => screen.value?.rows === 0 ? 1 : screen.value?.cols ?? 1)
const rows = computed(() => screen.value?.cols === 0 ? 1 : screen.value?.rows ?? 1)
const pools = computed(() => screen.value?.pools ?? {})
const tallies = reactive<Record<string, { tally: ScoreTally, lastSequence: number, completed: boolean, info?: DeviceStreamJudgeInfo }>>({})
const deviceIds = computed(() => Object.values(pools.value).map(p => p.deviceId).filter(id => typeof id === 'string'))
const freeCorner = computed(() => {
if (pools.value[`${1}:${cols.value}`] == null) return 'top-right'
if (pools.value[`${rows.value}:${cols.value}`] == null) return 'bottom-right'
if (pools.value[`${1}:${1}`] == null) return 'top-left'
if (pools.value[`${rows.value}:${1}`] == null) return 'bottom-left'
else return 'top-right'
})
const markStreamSubscription = useDeviceStreamMarkAddedSubscription({
deviceIds: deviceIds as unknown as string[]
}, {
Expand Down

0 comments on commit 163570e

Please sign in to comment.