Add empty spectate view

src/router.ts

@@ -9,6 +9,7 @@ const PasswordView = () => import('@/views/PasswordView.vue')
 const StatisticsView = () => import('@/views/StatisticsView.vue')
 const AdminView = () => import('@/views/AdminView.vue')
 const SpectateLobbyView = () => import('@/views/SpectateLobbyView.vue')
+const SpectateView = () => import('@/views/SpectateView.vue')
 
 const routes: Readonly<RouteRecordRaw[]> = [
   { path: '/', name: 'root', redirect: { name: 'home' } },
@@ -19,6 +20,7 @@ const routes: Readonly<RouteRecordRaw[]> = [
   { path: '/password', name: 'password', component: PasswordView },
   { path: '/statistics', name: 'statistics', component: StatisticsView },
   { path: '/admin', name: 'admin', component: AdminView },
+  { path: '/spectate', name: 'spectate', component: SpectateView },
   {
     path: '/spectate-lobby',
     name: 'spectate-lobby',

src/stores/auth.ts

@@ -14,7 +14,7 @@ const initAuth = async (auth: AuthUser) => {
 
 supabase.auth.onAuthStateChange(async (_, session) => {
   const user = session?.user
-  if (user && useAuthStore().auth?.id != user?.id) {
+  if (user && useAuthStore().auth?.id != user.id) {
     initAuth(user)
   }
 })

src/stores/online.ts

@@ -13,6 +13,7 @@ export const useOnlineStore = defineStore('online', {
     return {
       room,
       usersOnline: new Set<string>(),
+      spectating: null as string | null,
     }
   },
 
@@ -34,6 +35,9 @@ export const useOnlineStore = defineStore('online', {
             // @ts-ignore
             const presence = p as OnlinePresence
             this.usersOnline.delete(presence.userId)
+            if (presence.userId == this.spectating) {
+              this.spectating = null
+            }
           })
         })
         .subscribe(async (status) => {

src/views/SpectateLobbyView.vue

@@ -3,9 +3,14 @@
 
   <h2>Users</h2>
   <button
-    v-for="userId in useOnlineStore().usersOnline"
+    v-for="userId in onlineStore.usersOnline"
     :disabled="userId == useAuthStore().auth?.id"
-    @click="router.push({ name: 'home' })"
+    @click="
+      () => {
+        onlineStore.spectating = userId
+        router.push({ name: 'spectate' })
+      }
+    "
   >
     {{ useUsersStore().getUser(userId)?.name }}
   </button>
@@ -16,4 +21,6 @@ import { router } from '@/router'
 import { useAuthStore } from '@/stores/auth'
 import { useOnlineStore } from '@/stores/online'
 import { useUsersStore } from '@/stores/users'
+
+const onlineStore = useOnlineStore()
 </script>

src/views/SpectateView.vue

@@ -0,0 +1,25 @@
+<template>
+  <button id="back" @click="router.push({ name: 'spectate-lobby' })">
+    Back
+  </button>
+
+  <h2>Spectating {{ onlineStore.spectating }}</h2>
+</template>
+
+<script lang="ts" setup>
+import { router } from '@/router'
+import { useOnlineStore } from '@/stores/online'
+import { watch } from 'vue'
+
+const onlineStore = useOnlineStore()
+
+watch(
+  () => onlineStore.spectating,
+  (spectating) => {
+    if (!spectating) {
+      router.push({ name: 'spectate-lobby' })
+    }
+  },
+  { immediate: true }
+)
+</script>