Spectate in-game status

src/stores/online.ts

@@ -4,6 +4,7 @@ import { acceptHMRUpdate, defineStore } from 'pinia'
 type OnlinePresence = {
   userId: string
   date: Date
+  inGame: boolean
 }
 
 export const useOnlineStore = defineStore('online', {
@@ -12,8 +13,9 @@ export const useOnlineStore = defineStore('online', {
 
     return {
       room,
-      usersOnline: new Set<string>(),
+      presences: [] as OnlinePresence[],
       spectating: null as string | null,
+      presence: {} as Partial<OnlinePresence>,
     }
   },
 
@@ -27,14 +29,19 @@ export const useOnlineStore = defineStore('online', {
           newPresences.forEach((p) => {
             // @ts-ignore
             const presence = p as OnlinePresence
-            this.usersOnline.add(presence.userId)
+            this.presences = this.presences.filter(
+              (p) => p.userId != presence.userId
+            )
+            this.presences.push(presence)
           })
         })
         .on('presence', { event: 'leave' }, ({ leftPresences }) => {
           leftPresences.forEach((p) => {
             // @ts-ignore
             const presence = p as OnlinePresence
-            this.usersOnline.delete(presence.userId)
+            this.presences = this.presences.filter(
+              (p) => p.userId != presence.userId
+            )
             if (presence.userId == this.spectating) {
               this.spectating = null
             }
@@ -45,12 +52,21 @@ export const useOnlineStore = defineStore('online', {
             return
           }
 
-          await this.room.track({
-            userId: userId,
-            date: new Date(),
-          } satisfies OnlinePresence)
+          this.sendUpdate({ userId })
         })
     },
+
+    async sendUpdate(presence: Partial<OnlinePresence>) {
+      this.presence = { ...this.presence, ...presence }
+      if (!this.presence.userId) return
+      await this.room.track(this.presence)
+    },
+  },
+
+  getters: {
+    getSpectating: (state) => {
+      return state.presences.find((p) => p.userId == state.spectating)
+    },
   },
 })
 

src/views/GameView.vue

@@ -109,15 +109,17 @@ import { useEloStore } from '@/stores/elo'
 import { useGameStore } from '@/stores/game'
 import { useLoadingStore } from '@/stores/loading'
 import { useModalStore } from '@/stores/modal'
+import { useOnlineStore } from '@/stores/online'
 import { useOptionsStore } from '@/stores/options'
 import { roundToNDecimals } from '@/stores/stats'
 import { useUsersStore } from '@/stores/users'
 import { getLegOfUser } from '@/types/game'
-import { computed, onMounted, ref, watch } from 'vue'
+import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
 
 const gameStore = useGameStore()
 const usersStore = useUsersStore()
 const loadingStore = useLoadingStore()
+const onlineStore = useOnlineStore()
 
 const eloDeltas = ref<{ userId: string; eloDelta: number }[]>([])
 
@@ -133,7 +135,7 @@ const somePlayersFinished = computed(
 
 const displayVisit = computed(() => {
   if (!gameStore.game || !gameStore.gameState?.player)
-    return { visit: [null, null, null] ?? [null, null, null], isPrev: false }
+    return { visit: [null, null, null], isPrev: false }
   const leg = getLegOfUser(gameStore.game, gameStore.gameState?.player)
   const visit = leg?.visits.at(-1)
   if (
@@ -151,6 +153,10 @@ onMounted(() => {
   if (!gameStore.game) {
     quit()
   }
+  onlineStore.sendUpdate({ inGame: true })
+})
+onUnmounted(() => {
+  onlineStore.sendUpdate({ inGame: false })
 })
 
 const quit = () => {

src/views/SpectateLobbyView.vue

@@ -3,16 +3,16 @@
 
   <h2>Users</h2>
   <button
-    v-for="userId in onlineStore.usersOnline"
-    :disabled="userId == useAuthStore().auth?.id"
+    v-for="presence in onlineStore.presences"
+    :disabled="presence.userId == useAuthStore().auth?.id"
     @click="
       () => {
-        onlineStore.spectating = userId
+        onlineStore.spectating = presence.userId
         router.push({ name: 'spectate' })
       }
     "
   >
-    {{ useUsersStore().getUser(userId)?.name }}
+    {{ useUsersStore().getUser(presence.userId)?.name }}
   </button>
 </template>
 

src/views/SpectateView.vue

@@ -3,18 +3,28 @@
     Back
   </button>
 
-  <h2>Spectating {{ onlineStore.spectating }}</h2>
+  <template v-if="onlineStore.getSpectating">
+    <h2>Spectating {{ name }}</h2>
+
+    <p v-if="onlineStore.getSpectating.inGame">{{ name }} is in game.</p>
+    <p v-else>{{ name }} is not in game.</p>
+  </template>
 </template>
 
 <script lang="ts" setup>
 import { router } from '@/router'
 import { useOnlineStore } from '@/stores/online'
-import { watch } from 'vue'
+import { useUsersStore } from '@/stores/users'
+import { computed, watch } from 'vue'
 
 const onlineStore = useOnlineStore()
 
+const name = computed(
+  () => useUsersStore().getUser(onlineStore.getSpectating?.userId)?.name
+)
+
 watch(
-  () => onlineStore.spectating,
+  () => onlineStore.getSpectating,
   (spectating) => {
     if (!spectating) {
       router.push({ name: 'spectate-lobby' })