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>