spo/music-jeopardy
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

No longer block host when guessing
All checks were successful
Deploy Feature / deploy-feature (push) Successful in 25s
Details

Browse Source
This commit is contained in:
Johnny322
2026-03-02 21:37:54 +01:00
parent 9b6dd0b8e8
commit 083ca153ac
2 changed files with 32 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
src/App.vue
View File

@@ -1,5 +1,5 @@
<template> <template>
<div class="app" :class="{ suspended: isGuessSuspended }"> <div class="app" :class="{ suspended: viewerSuspended }">
<header class="app-header"> <header class="app-header">
<div> <div>
<p class="eyebrow">Music Jeopardy</p> <p class="eyebrow">Music Jeopardy</p>
@@ -167,6 +167,9 @@
</aside> </aside>
<section class="board"> <section class="board">
<div v-if="isGuessSuspended && !!guessingTeamId" class="board-guessing-banner">
{{ guessingTeamLabel }} is guessing
</div>
<div class="board-grid"> <div class="board-grid">
<div <div
v-for="(category, cIndex) in selectedGame?.categories || []" v-for="(category, cIndex) in selectedGame?.categories || []"
@@ -264,12 +267,13 @@
@ended="handlePlayerPause" @ended="handlePlayerPause"
></audio> ></audio>
<div v-if="viewerGuessVisible || showEnableAudio" class="viewer-actions"> <div v-if="viewerGuessVisible || showEnableAudio" class="viewer-actions">
<button v-if="showEnableAudio" class="primary enable-audio" @click="enableViewerAudio"> <button v-if="showEnableAudio" class="primary enable-audio" @click="enableViewerAudio">
Tap To Enable Audio Tap To Enable Audio
</button> </button>
<button class="primary viewer-guess" :disabled="!canViewerGuess" @click="requestGuessStop"> <button class="primary viewer-guess" :disabled="!canViewerGuess" @click="requestGuessStop">
Stop Song And Guess Stop Song And Guess
</button> </button>
</div>
<button <button
v-if="canControlGame && getCurrentTileStatus() === 'paused' && !!guessingTeamId" v-if="canControlGame && getCurrentTileStatus() === 'paused' && !!guessingTeamId"
class="primary host-reveal" class="primary host-reveal"
@@ -277,7 +281,6 @@
> >
Reveal Answer Reveal Answer
</button> </button>
</div>
<div v-if="!currentClipUrl" class="player-empty"></div> <div v-if="!currentClipUrl" class="player-empty"></div>
</div> </div>
</div> </div>
@@ -309,7 +312,7 @@
</div> </div>
</section> </section>
</main> </main>
<div v-if="isGuessSuspended" class="guess-overlay"> <div v-if="viewerSuspended" class="guess-overlay">
<p>{{ guessingTeamLabel }} is guessing</p> <p>{{ guessingTeamLabel }} is guessing</p>
</div> </div>
</div> </div>
@@ -465,6 +468,9 @@ export default {
isGuessSuspended() { isGuessSuspended() {
return this.step === 'game' && this.getCurrentTileStatus() === 'paused' return this.step === 'game' && this.getCurrentTileStatus() === 'paused'
}, },
viewerSuspended() {
return this.isGuessSuspended && !this.canControlGame
},
guessingTeamLabel() { guessingTeamLabel() {
if (this.guessingTeamId) { if (this.guessingTeamId) {
const team = this.teams.find((candidate) => candidate.id === this.guessingTeamId) const team = this.teams.find((candidate) => candidate.id === this.guessingTeamId)

17
src/styles.css
View File

@@ -374,6 +374,23 @@ button {
z-index: 1; z-index: 1;
} }
.board-guessing-banner {
position: absolute;
top: 12px;
left: 50%;
transform: translateX(-50%);
z-index: 6;
pointer-events: none;
background: rgba(12, 15, 30, 0.9);
border: 1px solid rgba(255, 255, 255, 0.25);
border-radius: 999px;
padding: 10px 18px;
font-family: 'Bebas Neue', sans-serif;
letter-spacing: 0.06em;
font-size: clamp(1.1rem, 2vw, 1.6rem);
text-transform: uppercase;
}
.board-grid { .board-grid {
display: grid; display: grid;
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));