Initial commit - Science Bowl buzzer system

player.js

@@ -0,0 +1,110 @@
+// Get player ID from URL
+const urlParams = new URLSearchParams(window.location.search);
+const playerId = urlParams.get('id') || '1';
+const playerColors = ['#ff4444', '#4444ff', '#44ff44', '#ffff44'];
+const playerNames = ['Player 1', 'Player 2', 'Player 3', 'Player 4'];
+
+// DOM elements
+const playerName = document.getElementById('playerName');
+const playerScore = document.getElementById('playerScore');
+const statusMessage = document.getElementById('statusMessage');
+const buzzer = document.getElementById('buzzer');
+const answerContainer = document.getElementById('answerContainer');
+const answerInput = document.getElementById('answerInput');
+const submitAnswer = document.getElementById('submitAnswer');
+const questionDisplay = document.getElementById('questionDisplay');
+
+// Set player identity
+playerName.textContent = playerNames[playerId - 1];
+playerName.style.color = playerColors[playerId - 1];
+document.body.style.setProperty('--player-color', playerColors[playerId - 1]);
+
+// Game state
+let canBuzz = false;
+let hasBuzzed = false;
+
+// Listen to game state
+database.ref('gameState').on('value', (snapshot) => {
+    const state = snapshot.val();
+    if (!state) return;
+    
+    // Update score
+    if (state.scores && state.scores[`player${playerId}`] !== undefined) {
+        playerScore.textContent = state.scores[`player${playerId}`];
+    }
+    
+    // Update question
+    if (state.currentQuestion) {
+        questionDisplay.textContent = state.currentQuestion.tossup_question;
+    }
+    
+    // Update buzzer state
+    if (state.buzzerActive) {
+        canBuzz = true;
+        hasBuzzed = false;
+        buzzer.disabled = false;
+        buzzer.classList.remove('locked');
+        statusMessage.textContent = 'Ready to buzz!';
+        answerContainer.style.display = 'none';
+    } else {
+        canBuzz = false;
+        buzzer.disabled = true;
+        buzzer.classList.add('locked');
+    }
+    
+    // Check if this player buzzed in
+    if (state.buzzer && state.buzzer.playerId === `player${playerId}`) {
+        statusMessage.textContent = 'You buzzed in! Answer now:';
+        answerContainer.style.display = 'block';
+        answerInput.focus();
+    } else if (state.buzzer && state.buzzer.playerId) {
+        statusMessage.textContent = `${state.buzzer.playerId} buzzed in`;
+        buzzer.classList.add('locked');
+    }
+});
+
+// Buzzer click
+buzzer.addEventListener('click', buzzIn);
+
+// Spacebar to buzz
+document.addEventListener('keydown', (e) => {
+    if (e.code === 'Space' && canBuzz && !hasBuzzed) {
+        e.preventDefault();
+        buzzIn();
+    }
+});
+
+function buzzIn() {
+    if (!canBuzz || hasBuzzed) return;
+    
+    hasBuzzed = true;
+    database.ref('gameState/buzzer').set({
+        playerId: `player${playerId}`,
+        timestamp: Date.now()
+    });
+    
+    // Visual feedback
+    buzzer.classList.add('buzzed');
+    setTimeout(() => buzzer.classList.remove('buzzed'), 300);
+}
+
+// Submit answer
+submitAnswer.addEventListener('click', submitPlayerAnswer);
+answerInput.addEventListener('keypress', (e) => {
+    if (e.key === 'Enter') submitPlayerAnswer();
+});
+
+function submitPlayerAnswer() {
+    const answer = answerInput.value.trim();
+    if (!answer) return;
+    
+    database.ref('gameState/playerAnswer').set({
+        playerId: `player${playerId}`,
+        answer: answer,
+        timestamp: Date.now()
+    });
+    
+    answerInput.value = '';
+    answerContainer.style.display = 'none';
+    statusMessage.textContent = 'Answer submitted! Waiting for moderator...';
+}