feat: add debug mode and audio console log

index.html

@@ -21,6 +21,18 @@
           <button id="soundToggle">🔊 Sound: ON</button>
           <button id="speechToggle">🗣️ Speech: ON</button>
           <button id="vibrationToggle">📳 Vibration: ON</button>
+          <button id="debugToggle">🐛 Debug: OFF</button>
+        </div>
+        <div id="debugControls" class="debug-controls" style="display: none;">
+          <h3>🐛 Debug Audio Tests</h3>
+          <div class="debug-buttons">
+            <button id="testUp">Test "Up"</button>
+            <button id="testDown">Test "Down"</button>
+            <button id="testLeft">Test "Left"</button>
+            <button id="testRight">Test "Right"</button>
+            <button id="testMultiple">Test "Up and Right"</button>
+            <button id="testAllDirections">Test "Up, Down, Left, and Right"</button>
+          </div>
         </div>
       </div>
     </div>

src/audio.js

@@ -134,7 +134,15 @@ export class AudioSystem {
   }
 
   speakDirections(directions) {
-    if (!this.speechEnabled || !('speechSynthesis' in window)) {
+    console.log('speakDirections called with:', directions);
+    
+    if (!this.speechEnabled) {
+      console.log('Speech is disabled');
+      return;
+    }
+    
+    if (!('speechSynthesis' in window)) {
+      console.error('Speech synthesis not supported in this browser');
       return;
     }
 
@@ -146,7 +154,10 @@ export class AudioSystem {
     if (directions.left) activeDirections.push('left');
     if (directions.right) activeDirections.push('right');
 
+    console.log('Active directions:', activeDirections);
+
     if (activeDirections.length === 0) {
+      console.log('No active directions to announce');
       return;
     }
 
@@ -160,8 +171,12 @@ export class AudioSystem {
       textToSpeak = activeDirections.slice(0, -1).join(', ') + ', and ' + activeDirections[activeDirections.length - 1];
     }
 
+    console.log('Text to speak:', textToSpeak);
+    console.log('Last spoken direction:', this.lastSpokenDirection);
+
     // Avoid repeating the same direction announcement
     if (textToSpeak === this.lastSpokenDirection) {
+      console.log('Skipping duplicate direction announcement');
       return;
     }
     this.lastSpokenDirection = textToSpeak;
@@ -169,21 +184,89 @@ export class AudioSystem {
     // Stop any currently playing speech
     speechSynthesis.cancel();
 
-    // Create and configure the speech utterance
+    try {
-    const utterance = new SpeechSynthesisUtterance(textToSpeak);
+      // Check if speechSynthesis is ready
-    utterance.rate = 1.2; // Slightly faster speech
+      if (speechSynthesis.speaking) {
-    utterance.pitch = 1.0;
+        console.log('Speech synthesis is currently speaking, canceling...');
-    utterance.volume = 0.8;
+        speechSynthesis.cancel();
+      }
 
-    // Clear the last spoken direction when speech ends
+      // Wait a bit for cancellation to complete
-    utterance.onend = () => {
       setTimeout(() => {
-        this.lastSpokenDirection = '';
+        try {
-      }, 500); // Small delay to prevent immediate repetition
+          // Create and configure the speech utterance
-    };
+          const utterance = new SpeechSynthesisUtterance(textToSpeak);
+          utterance.rate = 1.0; // Normal speech rate to avoid issues
+          utterance.pitch = 1.0;
+          utterance.volume = 0.8;
+          utterance.lang = 'en-US'; // Explicitly set language
           
-    // Speak the directions
+          // Enhanced event handlers
-    speechSynthesis.speak(utterance);
+          utterance.onstart = () => {
+            console.log('Speech started for:', textToSpeak);
+          };
+
+          utterance.onend = () => {
+            console.log('Speech ended for:', textToSpeak);
+            setTimeout(() => {
+              this.lastSpokenDirection = '';
+            }, 500);
+          };
+
+          utterance.onerror = (event) => {
+            console.error('Speech synthesis error:', event.error, 'for text:', textToSpeak);
+            console.error('Error details:', event);
+            
+            // Try to recover by clearing the last spoken direction
+            setTimeout(() => {
+              this.lastSpokenDirection = '';
+            }, 100);
+            
+            // Fallback: try a simpler approach
+            this.fallbackSpeech(textToSpeak);
+          };
+
+          utterance.onpause = () => {
+            console.log('Speech paused');
+          };
+
+          utterance.onresume = () => {
+            console.log('Speech resumed');
+          };
+
+          // Check if voices are available
+          const voices = speechSynthesis.getVoices();
+          console.log('Available voices:', voices.length, voices.map(v => v.name));
+          
+          if (voices.length > 0) {
+            // Try to use a default English voice
+            const englishVoice = voices.find(voice => 
+              voice.lang.startsWith('en') && voice.default
+            ) || voices.find(voice => 
+              voice.lang.startsWith('en')
+            ) || voices[0];
+            
+            if (englishVoice) {
+              utterance.voice = englishVoice;
+              console.log('Using voice:', englishVoice.name, englishVoice.lang);
+            }
+          }
+
+          console.log('Starting speech synthesis for:', textToSpeak);
+          
+          // Speak the directions
+          speechSynthesis.speak(utterance);
+          
+        } catch (innerError) {
+          console.error('Inner error in speech synthesis:', innerError);
+          this.fallbackSpeech(textToSpeak);
+        }
+      }, 100); // Small delay to ensure cancellation completes
+      
+    } catch (error) {
+      console.error('Outer error in speech synthesis:', error);
+      this.fallbackSpeech(textToSpeak);
+    }
   }
 
   setSpeechEnabled(enabled) {
@@ -194,6 +277,31 @@ export class AudioSystem {
     }
   }
 
+  // Debug methods for testing directions
+  debugTestDirection(direction) {
+    console.log('Debug: Testing direction:', direction);
+    const testDirections = {
+      up: direction === 'up',
+      down: direction === 'down',
+      left: direction === 'left',
+      right: direction === 'right',
+      squares: [{ x: 0, y: 0, dx: 0, dy: 0 }] // Mock square data
+    };
+    this.speakDirections(testDirections);
+  }
+
+  debugTestMultipleDirections(directionsArray) {
+    console.log('Debug: Testing multiple directions:', directionsArray);
+    const testDirections = {
+      up: directionsArray.includes('up'),
+      down: directionsArray.includes('down'),
+      left: directionsArray.includes('left'),
+      right: directionsArray.includes('right'),
+      squares: [{ x: 0, y: 0, dx: 0, dy: 0 }] // Mock square data
+    };
+    this.speakDirections(testDirections);
+  }
+  
   async playWinSound() {
     await this.ensureAudioContext();
     

src/game.js

@@ -25,6 +25,7 @@ export class Game {
     this.soundEnabled = true;
     this.speechEnabled = true;
     this.vibrationEnabled = true;
+    this.debugMode = false;
     this.lastProximityWarning = 0;
     
     this.setupControls();
@@ -35,6 +36,7 @@ export class Game {
     const soundToggle = document.getElementById('soundToggle');
     const speechToggle = document.getElementById('speechToggle');
     const vibrationToggle = document.getElementById('vibrationToggle');
+    const debugToggle = document.getElementById('debugToggle');
     
     soundToggle.addEventListener('click', () => {
       this.soundEnabled = !this.soundEnabled;
@@ -54,6 +56,76 @@ export class Game {
       this.vibrationEnabled = !this.vibrationEnabled;
       vibrationToggle.textContent = `📳 Vibration: ${this.vibrationEnabled ? 'ON' : 'OFF'}`;
     });
+
+    debugToggle.addEventListener('click', () => {
+      this.debugMode = !this.debugMode;
+      debugToggle.textContent = `🐛 Debug: ${this.debugMode ? 'ON' : 'OFF'}`;
+      
+      // Show/hide debug controls
+      const debugControls = document.getElementById('debugControls');
+      debugControls.style.display = this.debugMode ? 'block' : 'none';
+      
+      // Setup debug button listeners if debug mode is enabled
+      if (this.debugMode) {
+        this.setupDebugControls();
+      }
+    });
+  }
+
+  setupDebugControls() {
+    const testUp = document.getElementById('testUp');
+    const testDown = document.getElementById('testDown');
+    const testLeft = document.getElementById('testLeft');
+    const testRight = document.getElementById('testRight');
+    const testMultiple = document.getElementById('testMultiple');
+    const testAllDirections = document.getElementById('testAllDirections');
+
+    // Remove existing listeners to prevent duplicates
+    const buttons = [testUp, testDown, testLeft, testRight, testMultiple, testAllDirections];
+    buttons.forEach(button => {
+      if (button) {
+        button.replaceWith(button.cloneNode(true));
+      }
+    });
+
+    // Get fresh references after cloning
+    const newTestUp = document.getElementById('testUp');
+    const newTestDown = document.getElementById('testDown');
+    const newTestLeft = document.getElementById('testLeft');
+    const newTestRight = document.getElementById('testRight');
+    const newTestMultiple = document.getElementById('testMultiple');
+    const newTestAllDirections = document.getElementById('testAllDirections');
+
+    // Add click listeners
+    newTestUp?.addEventListener('click', () => {
+      console.log('Debug: Testing UP direction');
+      this.audioSystem.debugTestDirection('up');
+    });
+
+    newTestDown?.addEventListener('click', () => {
+      console.log('Debug: Testing DOWN direction');
+      this.audioSystem.debugTestDirection('down');
+    });
+
+    newTestLeft?.addEventListener('click', () => {
+      console.log('Debug: Testing LEFT direction');
+      this.audioSystem.debugTestDirection('left');
+    });
+
+    newTestRight?.addEventListener('click', () => {
+      console.log('Debug: Testing RIGHT direction');
+      this.audioSystem.debugTestDirection('right');
+    });
+
+    newTestMultiple?.addEventListener('click', () => {
+      console.log('Debug: Testing UP and RIGHT directions');
+      this.audioSystem.debugTestMultipleDirections(['up', 'right']);
+    });
+
+    newTestAllDirections?.addEventListener('click', () => {
+      console.log('Debug: Testing ALL directions');
+      this.audioSystem.debugTestMultipleDirections(['up', 'down', 'left', 'right']);
+    });
   }
   
   bindEvents() {
@@ -149,6 +221,7 @@ export class Game {
     // Use a timer to avoid playing too frequently
     const now = Date.now();
     if (!this.lastProximityWarning || now - this.lastProximityWarning > 1500) {
+      console.log('Playing directional proximity sound');
       this.audioSystem.playDirectionalProximitySound(directions);
       this.lastProximityWarning = now;
     }
@@ -159,8 +232,8 @@ export class Game {
     this.ctx.fillStyle = '#1a1a1a';
     this.ctx.fillRect(0, 0, this.canvas.width, this.canvas.height);
     
-    // Render maze
+    // Render maze with debug mode
-    this.maze.render(this.ctx, this.cellSize);
+    this.maze.render(this.ctx, this.cellSize, this.debugMode);
     
     // Render player
     this.player.render(this.ctx);

src/maze.js

@@ -275,7 +275,7 @@ export class Maze {
     return this.grid[y][x] === this.EXIT;
   }
   
-  render(ctx, cellSize) {
+  render(ctx, cellSize, debugMode = false) {
     for (let y = 0; y < this.rows; y++) {
       for (let x = 0; x < this.cols; x++) {
         const pixelX = x * cellSize;
@@ -291,8 +291,7 @@ export class Maze {
             break;
             
           case this.SAFE:
-          case this.DANGEROUS_AUDIO:
+            // Safe squares - white
-            // Safe squares and audio-danger squares look identical (white)
             ctx.fillStyle = '#ffffff';
             ctx.fillRect(pixelX, pixelY, cellSize, cellSize);
             // Add subtle grid lines
@@ -300,9 +299,41 @@ export class Maze {
             ctx.lineWidth = 1;
             ctx.strokeRect(pixelX, pixelY, cellSize, cellSize);
             break;
-            //debug
-          // case this.DANGEROUS_AUDIO:  
 
+          case this.DANGEROUS_AUDIO:
+            if (debugMode) {
+              // In debug mode, show audio danger squares with a blue overlay
+              ctx.fillStyle = '#ffffff';
+              ctx.fillRect(pixelX, pixelY, cellSize, cellSize);
+              
+              // Add blue debug overlay with pulsing effect
+              const time = Date.now() * 0.004;
+              const pulse = (Math.sin(time + x + y) + 1) * 0.5;
+              const alpha = 0.3 + pulse * 0.4;
+              ctx.fillStyle = `rgba(0, 100, 255, ${alpha})`;
+              ctx.fillRect(pixelX, pixelY, cellSize, cellSize);
+              
+              // Add debug border
+              ctx.strokeStyle = '#0066ff';
+              ctx.lineWidth = 2;
+              ctx.strokeRect(pixelX, pixelY, cellSize, cellSize);
+              
+              // Add audio symbol
+              ctx.fillStyle = '#ffffff';
+              ctx.font = `${cellSize * 0.4}px Arial`;
+              ctx.textAlign = 'center';
+              ctx.textBaseline = 'middle';
+              ctx.fillText('🔊', pixelX + cellSize / 2, pixelY + cellSize / 2);
+            } else {
+              // In normal mode, audio-danger squares look identical to safe squares (white)
+              ctx.fillStyle = '#ffffff';
+              ctx.fillRect(pixelX, pixelY, cellSize, cellSize);
+              // Add subtle grid lines
+              ctx.strokeStyle = '#e0e0e0';
+              ctx.lineWidth = 1;
+              ctx.strokeRect(pixelX, pixelY, cellSize, cellSize);
+            }
+            break;
             
           case this.DANGEROUS_VISUAL:
             // Visual-only danger squares - animated red appearance

src/style.css

@@ -130,6 +130,55 @@ h1 {
   box-shadow: 0 2px 10px rgba(76, 175, 80, 0.3);
 }
 
+/* Debug Controls */
+.debug-controls {
+  margin-top: 1.5rem;
+  padding: 1.5rem;
+  background: rgba(255, 100, 100, 0.1);
+  border: 2px solid rgba(255, 100, 100, 0.3);
+  border-radius: 10px;
+  box-shadow: 0 4px 15px rgba(255, 100, 100, 0.2);
+}
+
+.debug-controls h3 {
+  margin-top: 0;
+  margin-bottom: 1rem;
+  color: #ff6b6b;
+  font-size: 1.3em;
+}
+
+.debug-buttons {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+  gap: 0.8rem;
+  justify-content: center;
+}
+
+.debug-buttons button {
+  background: linear-gradient(45deg, #ff6b6b, #ff5252);
+  color: white;
+  border: none;
+  padding: 0.6rem 1rem;
+  border-radius: 20px;
+  font-size: 0.9rem;
+  font-weight: bold;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  box-shadow: 0 3px 10px rgba(255, 107, 107, 0.3);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+}
+
+.debug-buttons button:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 5px 15px rgba(255, 107, 107, 0.4);
+  background: linear-gradient(45deg, #ff5252, #ff6b6b);
+}
+
+.debug-buttons button:active {
+  transform: translateY(0);
+  box-shadow: 0 2px 8px rgba(255, 107, 107, 0.3);
+}
+
 /* Responsive design */
 @media (max-width: 768px) {
   #app {