Refactor frontend code to use newly generated protobuf code

Author: g3force

frontend/package-lock.json

@@ -12,6 +12,7 @@
     "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore"
   },
   "dependencies": {
+    "@bufbuild/protobuf": "^2.2.3",
     "@quasar/extras": "^1.16.15",
     "dayjs": "^1.11.13",
     "format-duration": "^3.0.2",

frontend/package.json

@@ -5,9 +5,15 @@ import {useGcStateStore} from "@/store/gcState";
 const store = useGcStateStore()
 
 const numTrackerSource = computed(() => {
+  if (store.gcState.trackers === undefined) {
+    return 0
+  }
   return Object.keys(store.gcState.trackers!).length
 })
 const numAutoRefs = computed(() => {
+  if (store.gcState.autoRefState === undefined) {
+    return 0
+  }
   return Object.keys(store.gcState.autoRefState!).length
 })
 const warn = computed(() => {

frontend/src/components/ExternalConnectionStatus.vue

@@ -4,7 +4,8 @@ import TeamBadge from "@/components/common/TeamBadge.vue";
 import {useMatchStateStore} from "@/store/matchState";
 import formatDuration from "format-duration";
 import {stageName} from "@/helpers/texts";
-import {Team} from "@/proto/ssl_gc_common";
+import type {TeamJson} from "@/proto/state/ssl_gc_common_pb";
+import {durationSeconds, formatDurationJson, timestampJsonMs} from "@/helpers";
 
 const store = useMatchStateStore()
 const now = ref(Date.now())
@@ -13,14 +14,14 @@ setInterval(() => {
 }, 1000)
 
 const matchDuration = computed(() => {
-  if (store.matchState.matchTimeStart && store.matchState.matchTimeStart.getTime() > 0) {
-    return formatDuration(now.value - store.matchState.matchTimeStart.getTime())
+  if (store.matchState.matchTimeStart && timestampJsonMs(store.matchState.matchTimeStart) > 0) {
+    return formatDuration(now.value - timestampJsonMs(store.matchState.matchTimeStart!))
   }
   return "-"
 })
 const stageTimeLeft = computed(() => {
   if (store.matchState.stageTimeLeft) {
-    return formatDuration(store.matchState.stageTimeLeft.seconds * 1000)
+    return formatDurationJson(store.matchState.stageTimeLeft)
   }
   return "-"
 })
@@ -32,12 +33,12 @@ const gameState = computed(() => {
 })
 const currentActionTime = computed(() => {
   if (store.matchState.currentActionTimeRemaining
-    && store.matchState.currentActionTimeRemaining.seconds > 0) {
-    return formatDuration(store.matchState.currentActionTimeRemaining.seconds * 1000)
+    && durationSeconds(store.matchState.currentActionTimeRemaining) > 0) {
+    return formatDurationJson(store.matchState.currentActionTimeRemaining)
   }
   return undefined
 })
-const goals = (team: Team) => {
+const goals = (team: TeamJson) => {
   return store.matchState.teamState![team].goals!
 }
 const statusMessage = computed(() => {
@@ -64,9 +65,9 @@ const statusMessage = computed(() => {
       </div>
       <div class="col-grow">
         Score:
-        <TeamBadge :team="Team.YELLOW"/>
-        {{ goals(Team.YELLOW) }} : {{ goals(Team.BLUE) }}
-        <TeamBadge :team="Team.BLUE"/>
+        <TeamBadge :team="'YELLOW'"/>
+        {{ goals('YELLOW') }} : {{ goals('BLUE') }}
+        <TeamBadge :team="'BLUE'"/>
       </div>
       <div class="col-grow">
         Matching duration: <strong>{{ matchDuration }}</strong>

frontend/src/components/MatchStateToolbar.vue

@@ -1,21 +1,27 @@
 <script setup lang="ts">
 
-import {inject} from "vue";
+import {computed, inject} from "vue";
 import type {Shortcuts} from "@/providers/shortcuts";
 
-defineProps<{
-  modelValue?: number,
+const props = defineProps<{
+  modelValue?: number | bigint | "NaN" | "Infinity" | "-Infinity",
   label?: string,
 }>()
 
-const emit = defineEmits<{
-  (event: 'update:modelValue', payload: number | undefined): void;
-}>();
+const emit = defineEmits<(event: 'update:modelValue', payload: number | undefined) => void>();
 
 const shortcuts = inject<Shortcuts>('shortcuts')!
 const onFocusin = () => shortcuts.disable()
 const onFocusout = () => shortcuts.enable()
 
+const modelValueSanitised = computed(() => {
+  if (props.modelValue === undefined) {
+    return ''
+  } else {
+    return props.modelValue.toString()
+  }
+})
+
 const updateValue = (value: string | number | null) => {
   if (value !== null) {
     if (typeof value === 'string') {
@@ -35,7 +41,7 @@ const updateValue = (value: string | number | null) => {
       dense
       :label="label"
       type="number"
-      :model-value="modelValue"
+      :model-value="modelValueSanitised"
       @update:model-value="updateValue"
       @focusin="onFocusin"
       @focusout="onFocusout"

frontend/src/components/common/NumberInput.vue

@@ -15,7 +15,7 @@ const props = defineProps<{
     :name="originIcon(origin)"
     :alt="origin"
   >
-    <q-tooltip v-if="props.tooltip === true">
+    <q-tooltip v-if="props.tooltip">
       {{ origin }}
     </q-tooltip>
   </q-icon>

frontend/src/components/common/OriginIcon.vue

@@ -1,34 +1,34 @@
 <script setup lang="ts">
 import {computed} from "vue";
-import {Team} from "@/proto/ssl_gc_common";
+import {type TeamJson} from "@/proto/state/ssl_gc_common_pb";
 
 const props = defineProps<{
-  team?: Team,
+  team?: TeamJson,
   floating?: boolean,
 }>()
 
 const color = computed(() => {
   switch (props.team) {
-    case Team.YELLOW:
+    case 'YELLOW':
       return "team-yellow"
-    case Team.BLUE:
+    case 'BLUE':
       return "team-blue"
     default:
       return ""
   }
 })
 const label = computed(() => {
   switch (props.team) {
-    case Team.YELLOW:
+    case 'YELLOW':
       return "Yellow"
-    case Team.BLUE:
+    case 'BLUE':
       return "Blue"
     default:
       return ""
   }
 })
 const shown = computed(() => {
-  return props.team === Team.YELLOW || props.team === Team.BLUE
+  return props.team === 'YELLOW' || props.team === 'BLUE'
 })
 </script>
 

frontend/src/components/common/TeamBadge.vue

@@ -1,16 +1,14 @@
 <script setup lang="ts">
 import {teamOptions} from "@/helpers";
-import type {Team} from "@/proto/ssl_gc_common";
+import type {TeamJson} from "@/proto/state/ssl_gc_common_pb";
 
 defineProps<{
-  modelValue?: Team,
+  modelValue?: TeamJson,
 }>()
 
-const emit = defineEmits<{
-  (event: 'update:modelValue', payload: Team): void;
-}>();
+const emit = defineEmits<(event: 'update:modelValue', payload: TeamJson) => void>();
 
-const updateValue = (v: Team) => {
+const updateValue = (v: TeamJson) => {
   emit('update:modelValue', v)
 }
 

frontend/src/components/common/TeamInput.vue

@@ -9,9 +9,7 @@ defineProps<{
   clearable?: boolean,
 }>()
 
-const emit = defineEmits<{
-  (event: 'update:modelValue', payload: string | undefined): void;
-}>();
+const emit = defineEmits<(event: 'update:modelValue', payload: string | undefined) => void>();
 
 const shortcuts = inject<Shortcuts>('shortcuts')!
 const onFocusin = () => shortcuts.disable()

frontend/src/components/common/TextInput.vue

@@ -2,13 +2,13 @@
 import TeamBadge from "@/components/common/TeamBadge.vue";
 import type {ManualActions} from "@/providers/manualActions";
 import {computed, inject} from "vue";
-import type {Command_Type} from "@/proto/ssl_gc_state";
-import type {Team} from "@/proto/ssl_gc_common";
+import type {Command_TypeJson} from "@/proto/state/ssl_gc_state_pb";
+import type {TeamJson} from "@/proto/state/ssl_gc_common_pb";
 import {useUiStateStore} from "@/store/uiState";
 
 const props = defineProps<{
-  type: Command_Type,
-  team?: Team,
+  type: Command_TypeJson,
+  team?: TeamJson,
 }>()
 
 const manualActions = inject<ManualActions>('command-actions')!