Broadcast game

package.json

@@ -12,15 +12,15 @@
  },
  "dependencies": {
  "@formkit/auto-animate": "^0.8.0",
- "@supabase/supabase-js": "^2.36.0",
+ "@supabase/supabase-js": "^2.39.3",
  "@types/node": "^20.7.1",
  "chart.js": "^4.4.0",
  "chartjs-adapter-date-fns": "^3.0.0",
  "date-fns": "^2.30.0",
  "mobile-drag-drop": "^3.0.0-rc.0",
  "nanoid": "^5.0.1",
  "pinia": "^2.1.6",
- "vue": "^3.3.4",
+ "vue": "^3.4.15",
  "vue-router": "^4.2.5"
  },
  "devDependencies": {

src/stores/game.ts

@@ -12,6 +12,7 @@ import {
 } from '@/types/game'
 import { acceptHMRUpdate, defineStore } from 'pinia'
 import { useEloStore } from './elo'
+import { useOnlineStore } from './online'
 import { upsertLegStatistics, useStatsStore } from './stats'
 import { useUsersStore } from './users'
 
@@ -49,6 +50,7 @@ export const useGameStore = defineStore('game', {
  this.gameState = this.getController().getGameState()
  if (this.game) {
  this.game.result = this.gameState.rank
+ useOnlineStore().sendGame(this.game)
  }
  this.tryPlayWalkOn()
  return this.gameState

src/stores/online.ts

@@ -1,4 +1,6 @@
 import { supabase } from '@/supabase'
+import { Game } from '@/types/game'
+import { RealtimeChannel } from '@supabase/supabase-js'
 import { acceptHMRUpdate, defineStore } from 'pinia'
 
 type OnlinePresence = {
@@ -8,38 +10,69 @@ type OnlinePresence = {
 }
 
 export const useOnlineStore = defineStore('online', {
- state: () => {
- const room = supabase.channel('online')
-
- return {
- room,
- presences: [] as OnlinePresence[],
- spectating: null as string | null,
- presence: {} as Partial<OnlinePresence>,
- }
- },
+ state: () => ({
+ presences: [] as OnlinePresence[],
+ spectating: null as string | null,
+ spectatingGame: null as Game | null,
+ presence: {
+ inGame: false,
+ date: new Date(),
+ } as Partial<OnlinePresence>,
+ room: null as RealtimeChannel | null,
+ inChannel: null as RealtimeChannel | null,
+ outChannel: null as RealtimeChannel | null,
+ }),
 
  actions: {
- initRoom(userId: string) {
+ async initRoom(userId: string) {
+ await supabase.removeAllChannels()
+
+ this.room = supabase.channel('online')
  this.room
  .on('presence', { event: 'sync' }, () => {
- const state = this.room.presenceState()
+ const state = this.room?.presenceState()
  // @ts-ignore
  this.presences = Object.values(state).flat()
  })
  .subscribe(async (status) => {
- if (status !== 'SUBSCRIBED') {
- return
- }
-
+ if (status !== 'SUBSCRIBED') return
  this.sendUpdate({ userId })
  })
+
+ this.outChannel = supabase.channel(`game-${userId}`).subscribe()
  },
 
  async sendUpdate(presence: Partial<OnlinePresence>) {
  this.presence = { ...this.presence, ...presence }
  if (!this.presence.userId) return
- await this.room.track(this.presence)
+ await this.room?.track(presence)
+ },
+
+ async startSpectating(userId: string) {
+ this.spectating = userId
+ await this.inChannel?.unsubscribe()
+ this.inChannel = supabase
+ .channel(`game-${this.spectating}`)
+ .on('broadcast', { event: 'game' }, (game) => {
+ // @ts-ignore
+ this.spectatingGame = game as Game
+ })
+ .subscribe()
+ },
+
+ async stopSpectating() {
+ await this.inChannel?.unsubscribe()
+ this.inChannel = null
+ this.spectating = null
+ this.spectatingGame = null
+ },
+
+ sendGame(game: Game) {
+ this.outChannel?.send({
+ type: 'broadcast',
+ event: 'game',
+ payload: game,
+ })
  },
  },
 

src/views/GameView.vue

@@ -105,6 +105,7 @@ import Youtube from '@/components/Youtube.vue'
 import { speak } from '@/functions/speak'
 import { getGameDisplayName, getInputComponent } from '@/games/games'
 import { router } from '@/router'
+import { useAuthStore } from '@/stores/auth'
 import { useEloStore } from '@/stores/elo'
 import { useGameStore } from '@/stores/game'
 import { useLoadingStore } from '@/stores/loading'
@@ -120,6 +121,7 @@ const gameStore = useGameStore()
 const usersStore = useUsersStore()
 const loadingStore = useLoadingStore()
 const onlineStore = useOnlineStore()
+const authStore = useAuthStore()
 
 const eloDeltas = ref<{ userId: string; eloDelta: number }[]>([])
 
@@ -149,14 +151,23 @@ const displayVisit = computed(() => {
  return { visit: visit ?? [null, null, null], isPrev: false }
 })
 
-onMounted(() => {
+onMounted(async () => {
  if (!gameStore.game) {
  quit()
  }
- onlineStore.sendUpdate({ inGame: true })
+ await onlineStore.sendUpdate({
+ inGame: true,
+ userId: authStore.auth?.id,
+ date: new Date(),
+ })
 })
-onUnmounted(() => {
- onlineStore.sendUpdate({ inGame: false })
+
+onUnmounted(async () => {
+ await onlineStore.sendUpdate({
+ inGame: false,
+ userId: authStore.auth?.id,
+ date: new Date(),
+ })
 })
 
 const quit = () => {

src/views/SpectateLobbyView.vue

@@ -5,12 +5,7 @@
  <button
  v-for="presence in onlineStore.presences"
  :disabled="presence.userId == useAuthStore().auth?.id"
- @click="
- () => {
- onlineStore.spectating = presence.userId
- router.push({ name: 'spectate' })
- }
- "
+ @click="spectate(presence.userId)"
  >
  {{ useUsersStore().getUser(presence.userId)?.name }}
  </button>
@@ -23,4 +18,9 @@ import { useOnlineStore } from '@/stores/online'
 import { useUsersStore } from '@/stores/users'
 
 const onlineStore = useOnlineStore()
+
+const spectate = async (userId: string) => {
+ await onlineStore.startSpectating(userId)
+ router.push({ name: 'spectate' })
+}
 </script>

src/views/SpectateView.vue

@@ -8,14 +8,16 @@
 
  <p v-if="onlineStore.getSpectating.inGame">{{ name }} is in game.</p>
  <p v-else>{{ name }} is not in game.</p>
+
+ {{ onlineStore.spectatingGame }}
  </template>
 </template>
 
 <script lang="ts" setup>
 import { router } from '@/router'
 import { useOnlineStore } from '@/stores/online'
 import { useUsersStore } from '@/stores/users'
-import { computed, watch } from 'vue'
+import { computed, onUnmounted, watch } from 'vue'
 
 const onlineStore = useOnlineStore()
 
@@ -32,4 +34,8 @@ watch(
  },
  { immediate: true }
 )
+
+onUnmounted(() => {
+ onlineStore.stopSpectating()
+})
 </script>