before the app asked to access microphone and now not please fix - Follow Up Deployment

index.html

@@ -146,6 +146,9 @@
                 <button id="add-player" class="bg-primary-600 hover:bg-primary-700 text-white py-2 px-6 rounded-xl flex items-center">
                     <i class="fas fa-user-plus mr-2"></i> Add Player
                 </button>
+                <button id="calibrate" class="bg-secondary-600 hover:bg-secondary-700 text-white py-2 px-6 rounded-xl flex items-center">
+                    <i class="fas fa-sliders-h mr-2"></i> Calibrate
+                </button>
                 <button id="buzz-test" class="bg-warning-600 hover:bg-warning-700 text-white py-2 px-6 rounded-xl flex items-center">
                     <i class="fas fa-bolt mr-2"></i> Test Buzz
                 </button>
@@ -238,6 +241,40 @@
             </div>
         </div>
     </div>
+
+    <!-- Calibration Modal -->
+    <div id="calibration-modal" class="fixed inset-0 bg-black bg-opacity-70 flex items-center justify-center p-4 z-50 hidden">
+        <div class="bg-gray-800 rounded-2xl max-w-md w-full p-8">
+            <h2 class="text-2xl font-bold mb-6 text-center">Calibrate Buzzer</h2>
+            
+            <div class="mb-6">
+                <p class="mb-4">Press the buzzer from your Operation game 3-5 times to calibrate. The detector will learn the frequency pattern of your specific buzzer.</p>
+                <div class="bg-gray-700 rounded-lg p-4 mb-4">
+                    <div class="flex items-center justify-between mb-2">
+                        <span>Buzz Detections:</span>
+                        <span id="calibration-count">0</span>
+                    </div>
+                    <div class="h-4 bg-gray-600 rounded-full overflow-hidden">
+                        <div id="calibration-progress" class="h-full bg-success-600" style="width: 0%"></div>
+                    </div>
+                </div>
+                <div class="text-center">
+                    <div id="calibration-status" class="inline-block px-3 py-1 rounded-full text-sm text-gray-200 bg-gray-700 mb-4">
+                        Ready to calibrate
+                    </div>
+                    <div id="sound-level" class="w-full h-2 bg-gray-700 rounded-full overflow-hidden mb-2">
+                        <div class="h-full bg-primary-600" style="width: 0%"></div>
+                    </div>
+                    <div class="text-xs text-gray-400">Current sound level</div>
+                </div>
+            </div>
+            
+            <div class="flex gap-3">
+                <button id="cancel-calibration" class="flex-1 bg-gray-700 hover:bg-gray-600 py-3 rounded-xl font-medium">Cancel</button>
+                <button id="finish-calibration" class="flex-1 bg-primary-600 hover:bg-primary-700 py-3 rounded-xl font-medium">Finish</button>
+            </div>
+        </div>
+    </div>
     
     <script>
         // Game state variables
@@ -290,12 +327,27 @@
         
         // Buttons
         document.getElementById('add-player').addEventListener('click', openAddPlayerModal);
+        document.getElementById('calibrate').addEventListener('click', startCalibration);
         document.getElementById('buzz-test').addEventListener('click', simulateBuzz);
         document.getElementById('new-game').addEventListener('click', startNewGame);
         document.getElementById('play-again').addEventListener('click', startNewGame);
         document.getElementById('cancel-player').addEventListener('click', closeAddPlayerModal);
         document.getElementById('save-player').addEventListener('click', addNewPlayer);
+        document.getElementById('cancel-calibration').addEventListener('click', cancelCalibration);
+        document.getElementById('finish-calibration').addEventListener('click', finishCalibration);
         document.querySelector('#game-over-modal button').addEventListener('click', () => gameOverModal.classList.add('hidden'));
+
+        // Audio detection settings
+        let audioSettings = {
+            minFrequency: 1000,   // Default minimum frequency
+            maxFrequency: 3000,   // Default maximum frequency
+            threshold: 0.7,       // Default volume threshold
+            calibrated: false,
+            calibrationSamples: []
+        };
+
+        // Microphone stream
+        let microphoneStream = null;
         
         // Initialize the game
         function initGame() {
@@ -306,54 +358,33 @@
         // Set up audio listening
         async function setupMicrophone() {
             try {
-                gameState.audioContext = new (window.AudioContext || window.webkitAudioContext)();
-                gameState.analyser = gameState.audioContext.createAnalyser();
+                if (!gameState.audioContext) {
+                    gameState.audioContext = new (window.AudioContext || window.webkitAudioContext)();
+                    gameState.analyser = gameState.audioContext.createAnalyser();
+                    gameState.analyser.fftSize = 2048;
+                }
                 
-                const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
-                gameState.microphone = gameState.audioContext.createMediaStreamSource(stream);
-                gameState.microphone.connect(gameState.analyser);
+                if (microphoneStream) {
+                    microphoneStream.getTracks().forEach(track => track.stop());
+                }
                 
-                gameState.analyser.fftSize = 256;
-                const bufferLength = gameState.analyser.frequencyBinCount;
-                const dataArray = new Uint8Array(bufferLength);
+                microphoneStream = await navigator.mediaDevices.getUserMedia({ audio: {
+                    echoCancellation: false,
+                    noiseSuppression: false,
+                    autoGainControl: false
+                }});
                 
-                const detectSound = () => {
-                    if (!gameState.gameActive) return;
-                    
-                    gameState.analyser.getByteFrequencyData(dataArray);
-                    
-                    let total = 0;
-                    for (let i = 0; i < bufferLength; i++) {
-                        total += dataArray[i];
-                    }
-                    const average = total / bufferLength;
-                    
-                    // Update buzzer indicator status
-                    if (average > 60) {
-                        buzzerStatusEl.classList.remove('bg-gray-500');
-                        buzzerStatusEl.classList.add('animate-pulse-fast');
-                        
-                        if (average > 80) {
-                            // Trigger buzz detection
-                            handleBuzzDetected();
-                            // Flash red for buzz
-                            buzzerStatusEl.classList.remove('bg-green-500', 'bg-yellow-500');
-                            buzzerStatusEl.classList.add('bg-red-500');
-                        } else {
-                            // Sound detected but not buzzing yet
-                            buzzerStatusEl.classList.add('bg-yellow-500');
-                        }
-                    } else {
-                        buzzerStatusEl.classList.remove('bg-red-500', 'bg-yellow-500', 'animate-pulse-fast');
-                        buzzerStatusEl.classList.add('bg-green-500');
-                    }
-                    
-                    requestAnimationFrame(detectSound);
-                };
+                gameState.microphone = gameState.audioContext.createMediaStreamSource(microphoneStream);
+                gameState.microphone.connect(gameState.analyser);
                 
-                detectSound();
                 buzzerStatusEl.classList.remove('bg-gray-500');
                 buzzerStatusEl.classList.add('bg-green-500');
+                
+                if (!audioSettings.calibrated) {
+                    startCalibration();
+                } else {
+                    startAudioDetection();
+                }
             } catch (err) {
                 buzzerStatusEl.classList.remove('bg-gray-500');
                 buzzerStatusEl.classList.add('bg-red-500');
@@ -715,12 +746,135 @@
             updatePlayerListDisplay();
             gameOverModal.classList.add('hidden');
             
-            // Setup microphone if not already done
-            if (!gameState.audioContext) {
-                setupMicrophone();
-            }
+            // Setup microphone 
+            setupMicrophone();
         }
         
+        // Start calibration mode
+        function startCalibration() {
+            audioSettings.calibrationSamples = [];
+            document.getElementById('calibration-count').textContent = '0';
+            document.getElementById('calibration-progress').style.width = '0%';
+            document.getElementById('calibration-status').textContent = 'Making initial analysis...';
+            document.getElementById('calibration-status').className = 'inline-block px-3 py-1 rounded-full text-sm text-gray-200 bg-gray-700 mb-4';
+            
+            calibrationModal.classList.remove('hidden');
+            startAudioDetection(true);
+        }
+
+        // Cancel calibration
+        function cancelCalibration() {
+            calibrationModal.classList.add('hidden');
+            if (gameState.gameActive) {
+                startAudioDetection();
+            }
+        }
+
+        // Finish calibration and calculate thresholds
+        function finishCalibration() {
+            if (audioSettings.calibrationSamples.length > 0) {
+                // Calculate average frequency and volume thresholds
+                const avgFreq = audioSettings.calibrationSamples.reduce((sum, val) => sum + val.frequency, 0) / audioSettings.calibrationSamples.length;
+                const avgVol = audioSettings.calibrationSamples.reduce((sum, val) => sum + val.volume, 0) / audioSettings.calibrationSamples.length;
+                
+                // Set detection thresholds with some buffer
+                audioSettings.minFrequency = Math.max(0, avgFreq - 200);
+                audioSettings.maxFrequency = avgFreq + 200;
+                audioSettings.threshold = avgVol * 0.7; // 70% of average volume
+                audioSettings.calibrated = true;
+                
+                document.getElementById('calibration-status').textContent = 'Calibration complete!';
+                document.getElementById('calibration-status').className = 'inline-block px-3 py-1 rounded-full text-sm text-white bg-success-600 mb-4';
+                
+                setTimeout(() => {
+                    calibrationModal.classList.add('hidden');
+                    if (gameState.gameActive) {
+                        startAudioDetection();
+                    }
+                }, 1000);
+            }
+        }
+
+        // Start audio detection
+        function startAudioDetection(isCalibrating = false) {
+            const bufferLength = gameState.analyser.frequencyBinCount;
+            const dataArray = new Uint8Array(bufferLength);
+            const frequencyData = new Float32Array(bufferLength);
+            
+            const sampleRate = gameState.audioContext.sampleRate;
+            const minFreq = isCalibrating ? 0 : audioSettings.minFrequency;
+            const maxFreq = isCalibrating ? sampleRate/2 : audioSettings.maxFrequency;
+            
+            const detectSound = () => {
+                if (!gameState.gameActive && !isCalibrating) return;
+                
+                gameState.analyser.getByteFrequencyData(dataArray);
+                gameState.analyser.getFloatFrequencyData(frequencyData);
+                
+                // Get frequency with peak volume
+                let maxVolume = -Infinity;
+                let peakFrequency = 0;
+                let totalVolume = 0;
+                
+                for (let i = 0; i < bufferLength; i++) {
+                    const freq = i * sampleRate / bufferLength;
+                    if (freq >= minFreq && freq <= maxFreq) {
+                        if (dataArray[i] > maxVolume) {
+                            maxVolume = dataArray[i];
+                            peakFrequency = freq;
+                        }
+                        totalVolume += dataArray[i];
+                    }
+                }
+                
+                const avgVolume = totalVolume / bufferLength;
+                
+                // Update sound level indicator for calibration
+                if (isCalibrating) {
+                    const soundLevelBar = document.querySelector('#sound-level div');
+                    const normalizedVolume = Math.min(100, Math.max(0, (avgVolume / 255) * 100));
+                    soundLevelBar.style.width = `${normalizedVolume}%`;
+                }
+                
+                // Detect buzz - during calibration or normal play
+                if (avgVolume > (isCalibrating ? 30 : audioSettings.threshold * 255)) {
+                    if (isCalibrating) {
+                        // During calibration, record the frequency signature
+                        audioSettings.calibrationSamples.push({
+                            frequency: peakFrequency,
+                            volume: avgVolume / 255
+                        });
+                        
+                        const count = audioSettings.calibrationSamples.length;
+                        document.getElementById('calibration-count').textContent = count;
+                        document.getElementById('calibration-progress').style.width = `${Math.min(100, count * 20)}%`;
+                        
+                        if (count >= 3) {
+                            document.getElementById('calibration-status').textContent = 'Good samples collected!';
+                            document.getElementById('calibration-status').className = 'inline-block px-3 py-1 rounded-full text-sm text-white bg-success-600 mb-4';
+                        }
+                    } else {
+                        // During normal gameplay, trigger buzz effects
+                        handleBuzzDetected();
+                        buzzerStatusEl.classList.remove('bg-green-500', 'bg-yellow-500');
+                        buzzerStatusEl.classList.add('bg-red-500', 'animate-buzz');
+                        setTimeout(() => {
+                            buzzerStatusEl.classList.remove('animate-buzz');
+                        }, 500);
+                    }
+                } else {
+                    buzzerStatusEl.classList.remove('bg-red-500', 'animate-buzz');
+                    if (gameState.gameActive) {
+                        buzzerStatusEl.classList.add('bg-green-500');
+                    }
+                }
+                
+                requestAnimationFrame(detectSound);
+            };
+            
+            detectSound();
+        }
+
         // Simulate a buzz for testing
         function simulateBuzz() {
             handleBuzzDetected();
@@ -741,6 +895,7 @@
         document.addEventListener('DOMContentLoaded', () => {
             initGame();
             updateLifeDisplay();
+            setupMicrophone(); // Request mic access on load
         });
     </script>
 <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=web3district/operation-table" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>