show participant names for speed live when coming from servo

RopeScore · Jul 13, 2024 · 6e7e997 · 6e7e997
1 parent 9a167f8
commit 6e7e997
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 9 deletions.
diff --git a/src/components/SpeedLiveScore.vue b/src/components/SpeedLiveScore.vue
@@ -27,10 +27,10 @@
       {{ pool ?? '' }}
     </div>
     <div
-      v-if="entry"
-      class="font-bold text-4xl absolute top-2 right-2 max-w-[66%] overflow-hidden custom-wrap"
+      v-if="entry || names"
+      class="font-bold text-4xl absolute top-2 right-2 max-w-[66%] overflow-hidden custom-wrap text-balance text-right"
     >
-      {{ entry.participant.name }}
+      {{ entry?.participant?.name ?? names }}
     </div>
 
     <div v-if="!entry?.didNotSkipAt" class="z-1 font-semibold tabular-nums w-full text-center font-mono custom-size">
@@ -66,6 +66,10 @@ const props = defineProps({
     type: Object as PropType<EntryFragment>,
     default: () => null
   },
+  names: {
+    type: String,
+    default: () => null
+  },
   scoresheet: {
     type: Object as PropType<Pick<MarkScoresheetFragment & ScoresheetBaseFragment, 'id' | '__typename' | 'completedAt'> | null>,
     default: () => null

diff --git a/src/views/DeviceStreamLive.vue b/src/views/DeviceStreamLive.vue
@@ -19,6 +19,7 @@
               :device-id="pools[`${row}:${col}`].deviceId"
               :cols="cols"
               :bg-url="poolBgUrl(pools[`${row}:${col}`].label)"
+              :names="poolNames(pools[`${row}:${col}`].label)"
               :theme="theme"
             />
             <timing-live-score
@@ -72,7 +73,7 @@
 <script lang="ts" setup>
 import { computed, reactive, ref, watch } from 'vue'
 import { type DeviceStreamJudgeInfo, type DeviceStreamMarkAddedSubscription, useDeviceStreamMarkAddedSubscription } from '../graphql/generated'
-import { type ScoreTally, type Mark } from '../helpers'
+import { type ScoreTally, type Mark, formatList } from '../helpers'
 import { useDeviceStreamPools } from '../hooks/stream-pools'
 import { useHead } from '@vueuse/head'
 import { useRouteQuery } from '@vueuse/router'
@@ -145,13 +146,18 @@ function markStreamWatcher (res: DeviceStreamMarkAddedSubscription | null | unde
 watch(markStreamSubscription.result, markStreamWatcher)
 watch(markStreamSubscriptionAlt.result, markStreamWatcher)
 
-const poolBackgrounds = ref<Array<{ poolLabel: number, bgUrl?: string }>>([])
+const poolBackgrounds = ref<Array<{ poolLabel: number, bgUrl?: string, names: string[] }>>([])
 
 function poolBgUrl (poolLabel: number | undefined) {
   if (poolLabel == null) return undefined
   return poolBackgrounds.value.find(pb => `${pb.poolLabel}` === `${poolLabel}`)?.bgUrl
 }
 
+function poolNames (poolLabel: number | undefined) {
+  if (poolLabel == null) return undefined
+  return formatList(poolBackgrounds.value.find(pb => `${pb.poolLabel}` === `${poolLabel}`)?.names ?? [])
+}
+
 const hic = ref(settings.value.heatInfo)
 watch(() => settings.value.heatInfo, newHeatInfo => { hic.value = newHeatInfo })
 
@@ -162,10 +168,18 @@ watch(heatInfo.data, heatInfo => {
     poolBackgrounds.value = []
     return
   }
-  poolBackgrounds.value = heatInfo.map(hi => ({
-    poolLabel: hi.Station,
-    bgUrl: hi.TeamCountryFlagUrl || (hi.TeamCountryCode ? `/flags/${hi.TeamCountryCode.toLocaleLowerCase()}.svg` : undefined)
-  }))
+  poolBackgrounds.value = heatInfo.map(hi => {
+    const names = []
+    for (const p of [1, 2, 3, 4]) {
+      let name = hi[`Part${p}`]
+      name = name.substring(0, name.length - (hi[`Part${p}_Last`] ?? '').length).trim()
+      if (name.length > 0) names.push(name)
+    }
+    return {
+      poolLabel: hi.Station,
+      bgUrl: hi.TeamCountryFlagUrl || (hi.TeamCountryCode ? `/flags/${hi.TeamCountryCode.toLocaleLowerCase()}.svg` : undefined),
+      names
+    }})
 })
 </script>