Add gray-scaling when guessing

src/App.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="app">
+  <div class="app" :class="{ suspended: isGuessSuspended }">
     <header class="app-header">
       <div>
         <p class="eyebrow">Music Jeopardy</p>
@@ -263,12 +263,14 @@
                 @pause="handlePlayerPause"
                 @ended="handlePlayerPause"
               ></audio>
-              <button v-if="showEnableAudio" class="primary enable-audio" @click="enableViewerAudio">
-                Tap To Enable Audio
-              </button>
-              <button v-if="canViewerGuess" class="primary viewer-guess" @click="requestGuessStop">
-                Guess Now
-              </button>
+              <div v-if="viewerGuessVisible || showEnableAudio" class="viewer-actions">
+                <button v-if="showEnableAudio" class="primary enable-audio" @click="enableViewerAudio">
+                  Tap To Enable Audio
+                </button>
+                <button class="primary viewer-guess" :disabled="!canViewerGuess" @click="requestGuessStop">
+                  Stop Song And Guess
+                </button>
+              </div>
               <div v-if="!currentClipUrl" class="player-empty"></div>
             </div>
           </div>
@@ -300,6 +302,9 @@
         </div>
       </section>
     </main>
+    <div v-if="isGuessSuspended" class="guess-overlay">
+      <p>{{ guessingTeamLabel }} is guessing</p>
+    </div>
   </div>
 </template>
 
@@ -334,6 +339,7 @@ type RealtimeState = {
   currentSelectorId: string | null
   lastAwardedTeamId: string | null
   isAnswerClip: boolean
+  guessingTeamId: string | null
 }
 
 type RealtimeMessage = {
@@ -399,7 +405,8 @@ export default {
       syncTimer: 0,
       audioUnlocked: true,
       latestRemoteState: null as RealtimeState | null,
-      viewerTeamId: ''
+      viewerTeamId: '',
+      guessingTeamId: null as string | null
     }
   },
   async mounted() {
@@ -437,14 +444,26 @@ export default {
     canViewerGuess() {
       return (
         !this.canControlGame &&
-        this.audioUnlocked &&
         !!this.viewerTeamId &&
         this.getCurrentTileStatus() === 'playing'
       )
     },
+    viewerGuessVisible() {
+      return !this.canControlGame && this.getCurrentTileStatus() === 'playing'
+    },
     canControlGame() {
       return !this.gameId || this.isHost
     },
+    isGuessSuspended() {
+      return this.step === 'game' && this.getCurrentTileStatus() === 'paused'
+    },
+    guessingTeamLabel() {
+      if (this.guessingTeamId) {
+        const team = this.teams.find((candidate) => candidate.id === this.guessingTeamId)
+        if (team?.name?.trim()) return team.name.trim()
+      }
+      return 'A team'
+    },
     currentSelector() {
       return this.teams.find((team) => team.id === this.currentSelectorId) || null
     },
@@ -571,6 +590,7 @@ export default {
       this.audioUnlocked = true
       this.latestRemoteState = null
       this.viewerTeamId = ''
+      this.guessingTeamId = null
       this.setGameInUrl('')
     },
     async connectSession() {
@@ -632,7 +652,8 @@ export default {
         currentClipUrl: this.currentClipUrl,
         currentSelectorId: this.currentSelectorId,
         lastAwardedTeamId: this.lastAwardedTeamId,
-        isAnswerClip: this.isAnswerClip
+        isAnswerClip: this.isAnswerClip,
+        guessingTeamId: this.guessingTeamId
       }
     },
     publishState() {
@@ -675,6 +696,7 @@ export default {
         this.currentSelectorId = state.currentSelectorId
         this.lastAwardedTeamId = state.lastAwardedTeamId
         this.isAnswerClip = state.isAnswerClip
+        this.guessingTeamId = state.guessingTeamId || null
         if (this.viewerTeamId && !this.teams.some((team) => team.id === this.viewerTeamId)) {
           this.viewerTeamId = ''
         }
@@ -710,27 +732,12 @@ export default {
       const status = this.getCurrentTileStatus()
       if (status !== 'playing') return
       const key = this.currentTileKey
-      const [cIndex, qIndex] = key.split('-').map(Number)
-      const clue = this.selectedGame.categories[cIndex].clues[qIndex]
-      this.tiles[key].status = 'guessed'
+      this.tiles[key].status = 'paused'
       this.lastAwardedTeamId = null
-      if (clue.answer) {
-        this.currentClipUrl = encodeURI(clue.answer)
-        this.isAnswerClip = true
-        await nextTick()
-        const player = this.getPlayer()
-        if (player) {
-          this.ensureAudioContext()
-          player.currentTime = 0
-          player.load()
-          player.play().catch(() => {})
-        }
-      } else {
-        const player = this.getPlayer()
-        player?.pause()
-        this.currentClipUrl = ''
-        this.isAnswerClip = false
-      }
+      this.guessingTeamId = teamId
+      this.isAnswerClip = false
+      const player = this.getPlayer()
+      player?.pause()
       this.queueStateSync()
     },
     getCurrentTileStatus() {
@@ -956,6 +963,7 @@ export default {
       this.currentTileKey = null
       this.currentClipUrl = ''
       this.lastAwardedTeamId = null
+      this.guessingTeamId = null
       this.teams = this.teams.map((team) => ({ ...team, score: 0 }))
       const randomTeam = this.teams[Math.floor(Math.random() * this.teams.length)]
       this.currentSelectorId = randomTeam?.id || null
@@ -971,6 +979,7 @@ export default {
       this.currentClipUrl = ''
       this.lastAwardedTeamId = null
       this.isAnswerClip = false
+      this.guessingTeamId = null
       this.teardownAudio()
       this.queueStateSync()
     },
@@ -1018,6 +1027,7 @@ export default {
         this.currentTileKey = key
         this.currentClipUrl = encodeURI(clue.song)
         this.isAnswerClip = false
+        this.guessingTeamId = null
         await nextTick()
         const player = this.getPlayer()
         if (player) {
@@ -1032,6 +1042,7 @@ export default {
 
       if (status === 'playing') {
         this.tiles[key].status = 'paused'
+        this.guessingTeamId = this.currentSelectorId
         const player = this.getPlayer()
         player?.pause()
         this.queueStateSync()
@@ -1065,6 +1076,7 @@ export default {
         this.currentTileKey = null
         this.currentClipUrl = ''
         this.lastAwardedTeamId = null
+        this.guessingTeamId = null
         this.checkEnd()
         this.queueStateSync()
       }
@@ -1077,6 +1089,7 @@ export default {
 
       if (status === 'paused') {
         this.tiles[key].status = 'playing'
+        this.guessingTeamId = null
         const player = this.getPlayer()
         player?.play().catch(() => {})
         this.queueStateSync()
@@ -1088,6 +1101,7 @@ export default {
         this.currentTileKey = null
         this.currentClipUrl = ''
         this.isAnswerClip = false
+        this.guessingTeamId = null
         const player = this.getPlayer()
         player?.pause()
         this.teardownAudio()
@@ -1122,6 +1136,7 @@ export default {
       const finished = allTiles.every((status) => status === 'won' || status === 'void')
       if (finished) {
         this.step = 'end'
+        this.guessingTeamId = null
       }
     }
   },