From 66a5402bf40c399ac2e3a439b973d5d0c92c7b14 Mon Sep 17 00:00:00 2001
From: magnetenstad <tenstad.magne@gmail.com>
Date: Tue, 30 Jan 2024 06:56:42 +0100
Subject: [PATCH] Add input from spectator

---
 src/stores/online.ts       | 43 +++++++++++++++++++++++++++++++++-----
 src/views/GameView.vue     |  4 +++-
 src/views/SpectateView.vue |  8 ++++++-
 3 files changed, 48 insertions(+), 7 deletions(-)

diff --git a/src/stores/online.ts b/src/stores/online.ts
index 3b054a9..ccc6cd8 100644
--- a/src/stores/online.ts
+++ b/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: {
diff --git a/src/views/GameView.vue b/src/views/GameView.vue
index 0b8f8db..71d5278 100644
--- a/src/views/GameView.vue
+++ b/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"
diff --git a/src/views/SpectateView.vue b/src/views/SpectateView.vue
index e689d3a..338016d 100644
--- a/src/views/SpectateView.vue
+++ b/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'