Add input from spectator

src/stores/online.ts

@@ -1,8 +1,9 @@
 import { supabase } from '@/supabase'
-import { Game } from '@/types/game'
+import { Game, Segment } from '@/types/game'
 import { RealtimeChannel } from '@supabase/supabase-js'
 import { acceptHMRUpdate, defineStore } from 'pinia'
 import { useAuthStore } from './auth'
+import { useGameStore } from './game'
 
 type OnlinePresence = {
  userId: string
@@ -41,7 +42,27 @@ export const useOnlineStore = defineStore('online', {
  this.sendUpdate({ userId })
  })
 
- this.outChannel = supabase.channel(`game-${userId}`).subscribe()
+ this.outChannel = supabase
+ .channel(`game-${userId}`)
+ .on('broadcast', { event: 'input' }, (args) => {
+ const gameStore = useGameStore()
+ const gameController = gameStore.getController()
+ const player = gameStore.gameState?.player
+ if (args.payload.userId == player) {
+ switch (args.payload.type) {
+ case 'hit':
+ gameController.recordHit(args.payload.segment)
+ break
+ case 'miss':
+ gameController.recordMiss()
+ break
+ case 'undo':
+ gameStore.undoScore()
+ break
+ }
+ }
+ })
+ .subscribe()
  },
 
  async sendUpdate(presence: Partial<OnlinePresence>) {
@@ -60,10 +81,10 @@ export const useOnlineStore = defineStore('online', {
  await this.inChannel?.unsubscribe()
  this.inChannel = supabase
  .channel(`game-${this.presence.spectating}`)
- .on('broadcast', { event: 'game' }, (game) => {
- // @ts-ignore
- this.spectatingGame = game.payload as Game
+ .on('broadcast', { event: 'game' }, (args) => {
+ this.spectatingGame = args.payload as Game
  })
+
  .subscribe()
  },
 
@@ -81,6 +102,18 @@ export const useOnlineStore = defineStore('online', {
  payload: game,
  })
  },
+
+ sendInput(type: 'hit' | 'miss' | 'undo', segment?: Segment) {
+ this.inChannel?.send({
+ type: 'broadcast',
+ event: 'input',
+ payload: {
+ userId: useAuthStore().auth?.id,
+ type,
+ segment,
+ },
+ })
+ },
  },
 
  getters: {

src/views/GameView.vue

@@ -18,7 +18,9 @@
 
  <MainGame
  v-if="gameStore.game && gameStore.gameState"
- :show-input="true"
+ :show-input="
+ !spectators.find((p) => p.userId == gameStore.gameState?.player)
+ "
  :show-save="true"
  :game="gameStore.game"
  :game-state="gameStore.gameState"

src/views/SpectateView.vue

@@ -7,11 +7,16 @@
 
  <template v-if="onlineStore.spectatingGame && gameController && gameState">
  <MainGame
- :show-input="false"
+ :show-input="
+ !!gameState.player && gameState.player == useAuthStore().auth?.id
+ "
  :show-save="false"
  :game="onlineStore.spectatingGame"
  :game-state="gameState"
  :game-controller="gameController"
+ @hit="onlineStore.sendInput('hit', $event)"
+ @miss="onlineStore.sendInput('miss')"
+ @undo="onlineStore.sendInput('undo')"
  ></MainGame>
  </template>
  <p v-else-if="onlineStore.getSpectating?.inGame">
@@ -24,6 +29,7 @@
 import MainGame from '@/components/MainGame.vue'
 import { getGameController } from '@/games/games'
 import { router } from '@/router'
+import { useAuthStore } from '@/stores/auth'
 import { useOnlineStore } from '@/stores/online'
 import { useUsersStore } from '@/stores/users'
 import { computed, onUnmounted, watch } from 'vue'