fix: build not working on itch io

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
-    const utterance = new SpeechSynthesisUtterance(textToSpeak);
-    utterance.rate = 1.2; // Slightly faster speech
-    utterance.pitch = 1.0;
-    utterance.volume = 0.8;
-    
-    // Clear the last spoken direction when speech ends
-    utterance.onend = () => {
-      setTimeout(() => {
-        this.lastSpokenDirection = '';
-      }, 500); // Small delay to prevent immediate repetition
-    };
+    try {
+      // Check if speechSynthesis is ready
+      if (speechSynthesis.speaking) {
+        console.log('Speech synthesis is currently speaking, canceling...');
+        speechSynthesis.cancel();
+      }
 
-    // Speak the directions
-    speechSynthesis.speak(utterance);
+      // Wait a bit for cancellation to complete
+      setTimeout(() => {
+        try {
+          // 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
+          
+          // Enhanced event handlers
+          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) {
@@ -193,6 +276,31 @@ export class AudioSystem {
       this.lastSpokenDirection = '';
     }
   }
+
+  // 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

@@ -11,7 +11,7 @@ export class Game {
     this.lastTime = 0;
     
     // Game settings
-    this.cellSize = 40;
+    this.cellSize = 50;
     this.cols = Math.floor(canvas.width / this.cellSize);
     this.rows = Math.floor(canvas.height / this.cellSize);
     
@@ -25,8 +25,14 @@ export class Game {
     this.soundEnabled = true;
     this.speechEnabled = true;
     this.vibrationEnabled = true;
+    this.debugMode = false;
     this.lastProximityWarning = 0;
     
+    // Move tracking for replay
+    this.playerMoves = [];
+    this.gameStartTime = null;
+    this.currentMazeLayout = null;
+    
     this.setupControls();
     this.bindEvents();
   }
@@ -35,6 +41,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 +61,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() {
@@ -70,6 +147,9 @@ export class Game {
     if (this.maze.canMoveTo(newX, newY)) {
       this.player.moveTo(newX, newY);
       
+      // Track player move for replay
+      this.trackMove(newX, newY);
+      
       // Check if player stepped on a visual danger square
       if (this.maze.isDangerousVisual(newX, newY)) {
         this.handleVisualDanger();
@@ -87,6 +167,17 @@ export class Game {
     }
   }
   
+  trackMove(x, y) {
+    // Track player move with timestamp
+    const timestamp = Date.now();
+    this.playerMoves.push({
+      x: x,
+      y: y,
+      timestamp: timestamp,
+      relativeTime: timestamp - (this.gameStartTime || timestamp)
+    });
+  }
+  
   handleVisualDanger() {
     // Visual danger squares end the game
     this.gameOver();
@@ -107,8 +198,7 @@ export class Game {
     }
     
     setTimeout(() => {
-      alert('Game Over! You stepped on a dangerous square.\nReturning to start...');
-      this.resetGame();
+      this.showReplay('Game Over! You stepped on a dangerous square.');
     }, 500);
   }
   
@@ -122,14 +212,153 @@ export class Game {
     }
     
     setTimeout(() => {
-      alert('🎉 Congratulations! You survived the danger field!\nGenerating new challenge...');
-      this.resetGame();
+      this.showReplay('🎉 Congratulations! You survived the danger field!');
     }, 500);
   }
   
+  showReplay(message) {
+    // Create and show replay modal
+    this.createReplayModal(message);
+    this.startReplayAnimation();
+  }
+  
+  createReplayModal(message) {
+    // Remove existing modal if any
+    const existingModal = document.getElementById('replayModal');
+    if (existingModal) {
+      existingModal.remove();
+    }
+    
+    // Create modal HTML
+    const modal = document.createElement('div');
+    modal.id = 'replayModal';
+    modal.innerHTML = `
+      <div class="replay-backdrop">
+        <div class="replay-content">
+          <h2>${message}</h2>
+          <div class="replay-stats">
+            <p>Moves: ${this.playerMoves.length}</p>
+            <p>Time: ${Math.round((Date.now() - this.gameStartTime) / 1000)}s</p>
+          </div>
+          <canvas id="replayCanvas" width="800" height="600"></canvas>
+          <div class="replay-controls">
+            <button id="restartBtn">🔄 Play Again</button>
+            <button id="closeReplayBtn">❌ Close</button>
+          </div>
+        </div>
+      </div>
+    `;
+    
+    document.body.appendChild(modal);
+    
+    // Add event listeners
+    document.getElementById('restartBtn').addEventListener('click', () => {
+      this.closeReplay();
+      this.resetGame();
+    });
+    
+    document.getElementById('closeReplayBtn').addEventListener('click', () => {
+      this.closeReplay();
+    });
+  }
+  
+  startReplayAnimation() {
+    const replayCanvas = document.getElementById('replayCanvas');
+    const replayCtx = replayCanvas.getContext('2d');
+    
+    if (!replayCanvas || !replayCtx) return;
+    
+    let currentMoveIndex = 0;
+    const animationSpeed = 300; // ms per move
+    
+    // Draw initial state
+    this.drawReplayFrame(replayCtx, replayCanvas, -1);
+    
+    // Animate player moves
+    const animateMove = () => {
+      if (currentMoveIndex < this.playerMoves.length) {
+        this.drawReplayFrame(replayCtx, replayCanvas, currentMoveIndex);
+        currentMoveIndex++;
+        setTimeout(animateMove, animationSpeed);
+      }
+    };
+    
+    // Start animation after a short delay
+    setTimeout(animateMove, 1000);
+  }
+  
+  drawReplayFrame(ctx, canvas, moveIndex) {
+    // Clear canvas
+    ctx.fillStyle = '#1a1a1a';
+    ctx.fillRect(0, 0, canvas.width, canvas.height);
+    
+    // Draw maze with all audio dangers visible
+    this.maze.render(ctx, this.cellSize, true); // Force debug mode for replay
+    
+    // Draw path up to current move
+    ctx.strokeStyle = '#00ff00';
+    ctx.lineWidth = 4;
+    ctx.lineCap = 'round';
+    ctx.lineJoin = 'round';
+    
+    if (moveIndex >= 0 && this.playerMoves.length > 0) {
+      ctx.beginPath();
+      // Start from initial position
+      ctx.moveTo(1 * this.cellSize + this.cellSize/2, 1 * this.cellSize + this.cellSize/2);
+      
+      // Draw line to each move up to current index
+      for (let i = 0; i <= moveIndex && i < this.playerMoves.length; i++) {
+        const move = this.playerMoves[i];
+        ctx.lineTo(move.x * this.cellSize + this.cellSize/2, move.y * this.cellSize + this.cellSize/2);
+      }
+      ctx.stroke();
+    }
+    
+    // Draw current player position
+    if (moveIndex >= 0 && moveIndex < this.playerMoves.length) {
+      const currentMove = this.playerMoves[moveIndex];
+      ctx.fillStyle = '#ffff00';
+      ctx.beginPath();
+      ctx.arc(
+        currentMove.x * this.cellSize + this.cellSize/2,
+        currentMove.y * this.cellSize + this.cellSize/2,
+        this.cellSize * 0.3,
+        0,
+        Math.PI * 2
+      );
+      ctx.fill();
+    } else if (moveIndex === -1) {
+      // Draw initial position
+      ctx.fillStyle = '#ffff00';
+      ctx.beginPath();
+      ctx.arc(
+        1 * this.cellSize + this.cellSize/2,
+        1 * this.cellSize + this.cellSize/2,
+        this.cellSize * 0.3,
+        0,
+        Math.PI * 2
+      );
+      ctx.fill();
+    }
+  }
+  
+  closeReplay() {
+    const modal = document.getElementById('replayModal');
+    if (modal) {
+      modal.remove();
+    }
+  }
+  
   resetGame() {
     this.maze.generate();
     this.player.moveTo(1, 1);
+    
+    // Reset move tracking
+    this.playerMoves = [];
+    this.gameStartTime = Date.now();
+    
+    // Store current maze layout for replay
+    this.currentMazeLayout = this.maze.cloneMaze();
   }
   
   update(deltaTime) {
@@ -149,6 +378,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 +389,8 @@ export class Game {
     this.ctx.fillStyle = '#1a1a1a';
     this.ctx.fillRect(0, 0, this.canvas.width, this.canvas.height);
     
-    // Render maze
-    this.maze.render(this.ctx, this.cellSize);
+    // Render maze with debug mode
+    this.maze.render(this.ctx, this.cellSize, this.debugMode);
     
     // Render player
     this.player.render(this.ctx);
@@ -181,6 +411,12 @@ export class Game {
   start() {
     this.running = true;
     this.maze.generate();
+    
+    // Initialize move tracking
+    this.playerMoves = [];
+    this.gameStartTime = Date.now();
+    this.currentMazeLayout = this.maze.cloneMaze();
+    
     this.lastTime = performance.now();
     requestAnimationFrame((time) => this.gameLoop(time));
   }

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 and audio-danger squares look identical (white)
+            // Safe squares - 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
@@ -341,4 +372,16 @@ export class Maze {
       }
     }
   }
+  
+  cloneMaze() {
+    // Create a deep copy of the current maze state for replay
+    return {
+      grid: this.grid.map(row => [...row]),
+      dangerousSquares: new Set(this.dangerousSquares),
+      exitX: this.exitX,
+      exitY: this.exitY,
+      cols: this.cols,
+      rows: this.rows
+    };
+  }
 }

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 {
@@ -154,3 +203,117 @@ h1 {
     gap: 0.5rem;
   }
 }
+
+/* Replay Modal */
+#replayModal {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 1000;
+}
+
+.replay-backdrop {
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.8);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  backdrop-filter: blur(5px);
+}
+
+.replay-content {
+  background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
+  border-radius: 15px;
+  padding: 2rem;
+  max-width: 90vw;
+  max-height: 90vh;
+  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.7);
+  border: 2px solid rgba(255, 255, 255, 0.1);
+  text-align: center;
+  overflow-y: auto;
+}
+
+.replay-content h2 {
+  margin-top: 0;
+  margin-bottom: 1rem;
+  font-size: 2rem;
+  color: #fff;
+}
+
+.replay-stats {
+  display: flex;
+  justify-content: center;
+  gap: 2rem;
+  margin-bottom: 1.5rem;
+}
+
+.replay-stats p {
+  margin: 0;
+  font-size: 1.2rem;
+  color: #81C784;
+  font-weight: bold;
+}
+
+#replayCanvas {
+  border: 3px solid rgba(255, 255, 255, 0.2);
+  border-radius: 10px;
+  background: #1a1a1a;
+  box-shadow: 
+    0 0 20px rgba(0, 0, 0, 0.5),
+    inset 0 0 20px rgba(255, 255, 255, 0.05);
+  margin: 1rem 0;
+  max-width: 100%;
+  height: auto;
+}
+
+.replay-controls {
+  display: flex;
+  gap: 1rem;
+  justify-content: center;
+  margin-top: 1.5rem;
+}
+
+.replay-controls button {
+  background: linear-gradient(45deg, #4CAF50, #45a049);
+  color: white;
+  border: none;
+  padding: 0.8rem 1.5rem;
+  border-radius: 25px;
+  font-size: 1rem;
+  font-weight: bold;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  box-shadow: 0 4px 15px rgba(76, 175, 80, 0.3);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+}
+
+.replay-controls button:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 6px 20px rgba(76, 175, 80, 0.4);
+  background: linear-gradient(45deg, #45a049, #4CAF50);
+}
+
+.replay-controls button:active {
+  transform: translateY(0);
+  box-shadow: 0 2px 10px rgba(76, 175, 80, 0.3);
+}
+
+@media (max-width: 768px) {
+  .replay-content {
+    padding: 1rem;
+    margin: 1rem;
+  }
+  
+  .replay-stats {
+    flex-direction: column;
+    gap: 0.5rem;
+  }
+  
+  .replay-controls {
+    flex-direction: column;
+    gap: 0.5rem;
+  }
+}

vite.config.js

@@ -0,0 +1,9 @@
+import { defineConfig } from 'vite'
+
+export default defineConfig({
+  base: './', 
+  build: {
+    outDir: 'dist',
+    assetsDir: 'assets'
+  }
+})