Update templates/index.html

templates/index.html

@@ -198,7 +198,7 @@
 
 <!-- Audio elements -->
 <audio id="eatSound" preload="auto">
-    <source src="data:audio/mpeg;base64,SUQzBAAAAAAAI1RTU0UAAAAPAAADTGF2ZjU4Ljc2LjEwMAAAAAAAAAAAAAAA/+M4wAAAAAAAAAAAAEluZm8AAAAPAAAAAwAAAFgAVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVV//////////////////////////////////////////////////////////////////8AAAAATGF2YzU4LjEzAAAAAAAAAAAAAAAAJAAAAAAAAAAAWMBaq2QAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA/+MYxAANIAqJWUEQAFO+gRc5TRJIkiRJEiL///////////8RERERERERVVVVVVVVVVVVVVJEREREREVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVf/jGMQJA/Aa1flBABBTpGX9hDGMYxw7/+MMYxd/4wxIiI9////jDEQ7/jdEiJERERBaIiIzMzMzIiIiP//MzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzM/+MYxB4AAANIAAAAADMzMzMzMzMzMzMzMzMzMzMzM" type="audio/mpeg">
+    <source src="data:audio/mpeg;base64,SUQzBAAAAAAAI1RTU0UAAAAPAAADTGF2ZjU4Ljc2LjEwMAAAAAAAAAAAAAAA/+M4wAAAAAAAAAAAAEluZm8AAAAPAAAAAwAAAFgAVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVV//////////////////////////////////////////////////////////////////8AAAAATGF2YzU4LjEzAAAAAAAAAAAAAAAAJAAAAAAAAAAAWMBaq2QAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA/+MYxAANIAqJWUEQAFO+gRc5TRJIkiRJEiL///////////8RERERERERVVVVVVVVVVVVVVJEREREREVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVf/jGMQJA/Aa1flBABBTpGX9hDGMYxw7/+MMYxd/4wxIiI9////jDEQ7/jdEiJERERBaIiIzMzMzIiIiP//MzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzM/+MYxB4AAANIAAAAADMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzM" type="audio/mpeg">
 </audio>
 <audio id="gameOverSound" preload="auto">
     <source src="data:audio/mpeg;base64,SUQzBAAAAAAAI1RTU0UAAAAPAAADTGF2ZjU4Ljc2LjEwMAAAAAAAAAAAAAAA/+M4wAAAAAAAAAAAAEluZm8AAAAPAAAAAwAAAFgAVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVV//////////////////////////////////////////////////////////////////8AAAAATGF2YzU4LjEzAAAAAAAAAAAAAAAAJAAAAAAAAAAAWMBaq2QAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA/+MYxAAKMFqZVQEwAhGKzc+FSIiIiIiIiIj4+Pj4+Pj4+Pj4+JIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIv/jIMQNAAAP8AEAAAI+IiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIv/jEMQQAAAP8AAAAAI+IiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIg==" type="audio/mpeg">
@@ -222,7 +222,6 @@
     import { EffectComposer } from 'https://unpkg.com/three@0.160.0/examples/jsm/postprocessing/EffectComposer.js';
     import { RenderPass } from 'https://unpkg.com/three@0.160.0/examples/jsm/postprocessing/RenderPass.js';
     import { UnrealBloomPass } from 'https://unpkg.com/three@0.160.0/examples/jsm/postprocessing/UnrealBloomPass.js';
-
     // Game configuration
     const CONFIG = {
         GRID_SIZE: 25,           // Number of units across/deep
@@ -242,7 +241,6 @@
         COMBO_TIMEOUT: 5000,     // Milliseconds to get next food for combo
         HIGH_SCORES_COUNT: 5     // Number of high scores to save
     };
-
     // --- Particle System for Effects ---
     class ParticleSystem {
         constructor(scene) {
@@ -250,7 +248,6 @@
             this.particles = [];
             this.geometry = new THREE.BoxGeometry(0.2, 0.1, 0.2); // Shared geometry
         }
-
         createFoodEffect(position, color) {
             const count = 20;
             for (let i = 0; i < count; i++) {
@@ -275,7 +272,6 @@
                 });
             }
         }
-
         update() {
             for (let i = this.particles.length - 1; i >= 0; i--) {
                 const particle = this.particles[i];
@@ -283,7 +279,6 @@
                 particle.velocity.y -= 0.005; // Gravity
                 particle.life -= particle.decay;
                 particle.mesh.material.opacity = particle.life;
-
                 if (particle.life <= 0) {
                     this.scene.remove(particle.mesh);
                     particle.mesh.material.dispose();
@@ -292,7 +287,6 @@
                 }
             }
         }
-
         clear() {
             for (const particle of this.particles) {
                 this.scene.remove(particle.mesh);
@@ -303,7 +297,6 @@
             // as it might be needed again. Dispose it if ParticleSystem itself is destroyed.
         }
     }
-
     // Game state management
     const GameState = {
         MENU: 'menu',
@@ -311,7 +304,6 @@
         PAUSED: 'paused',
         GAME_OVER: 'gameOver',
         currentState: 'menu',
-
         changeState(newState) {
             this.currentState = newState;
             switch(newState) {
@@ -340,14 +332,12 @@
             }
         }
     };
-
     // --- Matrix Rain Background Effect ---
     class MatrixRain {
         constructor() {
             this.canvas = document.getElementById('matrixCanvas');
             this.ctx = this.canvas.getContext('2d');
             this.resize();
-
             this.fontSize = 14;
             this.columns = Math.floor(this.canvas.width / this.fontSize);
             this.drops = [];
@@ -359,44 +349,34 @@
             this.animate(); // Start animation
             window.addEventListener('resize', this.handleResize.bind(this));
         }
-
         handleResize() {
             this.resize();
             this.columns = Math.floor(this.canvas.width / this.fontSize);
             this.resetDrops();
         }
-
         resize() {
             this.canvas.width = window.innerWidth;
             this.canvas.height = window.innerHeight;
         }
-
         resetDrops() {
             this.drops = [];
             for(let i = 0; i < this.columns; i++) {
                 this.drops[i] = Math.floor(Math.random() * -100); // Start off-screen
             }
         }
-
         animate() {
             // Show rain on all screens as per previous request, including PLAYING
             if (GameState.currentState === GameState.MENU ||
                 GameState.currentState === GameState.PAUSED ||
                 GameState.currentState === GameState.GAME_OVER ||
                 GameState.currentState === GameState.PLAYING) {
-
-                this.ctx.fillStyle = 'rgba(0, 0, 0, 0.03)'; // Fading effect
+                this.ctx.fillStyle = 'rgba(0, 0, 0, 0.005)'; // Even more Fading effect
                 this.ctx.fillRect(0, 0, this.canvas.width, this.canvas.height);
-
-                this.ctx.fillStyle = '#00ff00'; // Matrix character color
-                this.ctx.emissiveColor = '#76ff76';
-                this.ctx.emissiveIntensity = '6';
+                this.ctx.fillStyle = '#00ccff'; // Matrix character color - now electric blue!
                 this.ctx.font = this.fontSize + 'px monospace';
-
                 for(let i = 0; i < this.drops.length; i++) {
                     const text = this.characters.charAt(Math.floor(Math.random() * this.characters.length));
                     this.ctx.fillText(text, i * this.fontSize, this.drops[i] * this.fontSize);
-
                     if(this.drops[i] * this.fontSize > this.canvas.height && Math.random() > 0.975) {
                         this.drops[i] = 0; // Reset drop
                     }
@@ -406,29 +386,24 @@
             requestAnimationFrame(this.animate);
         }
     } // <-- Make sure this curly brace properly closes the MatrixRain class
-
     // --- Object pooling for performance optimization ---
     class ObjectPool {
         constructor(createFunc, initialCount = 10) {
             this.pool = [];
             this.createFunc = createFunc;
-
             for (let i = 0; i < initialCount; i++) {
                 this.pool.push(this.createFunc());
             }
         }
-
         get() {
             if (this.pool.length > 0) {
                 return this.pool.pop();
             }
             return this.createFunc();
         }
-
         release(object) {
             this.pool.push(object);
         }
-
         clear() {
             this.pool = [];
             // Note: This doesn't dispose Three.js objects.
@@ -436,7 +411,6 @@
             // when objects are truly no longer needed by the scene.
         }
     }
-
     // --- Main Game Class ---
     class SnakeGame {
         constructor() {
@@ -463,7 +437,6 @@
             this.currentDifficulty = 'NORMAL';
             this.particleSystem = null;
             this.headLight = null;
-
             this.materials = {
                 snakeHead: new THREE.MeshStandardMaterial({
                     color: 0x39FF14, emissive: 0x39FF14, roughness: 0.1, metalness: 0.25
@@ -483,36 +456,30 @@
                 foodTetrahedron: new THREE.TetrahedronGeometry(CONFIG.CELL_SIZE * 0.6, 0),
                 obstacle: new THREE.BoxGeometry(CONFIG.CELL_SIZE * 0.9, CONFIG.CELL_SIZE * 1.5, CONFIG.CELL_SIZE * 0.9) // Taller obstacles
             };
-
             this.segmentPool = new ObjectPool(() => {
                 const segment = new THREE.Mesh(this.geometries.segment, this.materials.snakeBody.clone());
                 segment.castShadow = true; // If using shadows
                 return segment;
             }, 20);
-
             this.obstaclePool = new ObjectPool(() => {
                 const obstacle = new THREE.Mesh(this.geometries.obstacle, this.materials.obstacle.clone());
                 obstacle.castShadow = true; // If using shadows
                 return obstacle;
             }, CONFIG.MAX_OBSTACLE_COUNT * 1.5);
-
             this.init(); // Call init before matrixRain if matrixRain depends on game elements
             this.matrixRain = new MatrixRain(); // Initialize after main game setup if it interacts
             this.setupEventListeners();
             this.updateHighScoresTable();
             GameState.changeState(GameState.MENU); // Start in menu
         }
-
         init() {
             this.scene = new THREE.Scene();
             this.scene.background = null; // For Matrix rain to show through
 // Add fog for depth with brighter color
             this.scene.fog = new THREE.Fog(0x001100, CONFIG.GRID_SIZE * 0.8, CONFIG.GRID_SIZE * 2.5);
-
             this.camera = new THREE.PerspectiveCamera(65, window.innerWidth / window.innerHeight, 0.1, 1000);
             this.camera.position.set(0, CONFIG.GRID_SIZE * 0.4, CONFIG.GRID_SIZE * 0.9);
             this.camera.lookAt(0, -CONFIG.GRID_SIZE * 0.1, 0);
-
             this.renderer = new THREE.WebGLRenderer({
                 canvas: document.getElementById('gameCanvas'),
                 antialias: true,
@@ -521,38 +488,30 @@
             this.renderer.setSize(window.innerWidth, window.innerHeight);
             this.renderer.setPixelRatio(window.devicePixelRatio);
             this.renderer.shadowMap.enabled = true; // If you add shadows
-
             // Post-processing for bloom
             const renderPass = new RenderPass(this.scene, this.camera);
             const bloomPass = new UnrealBloomPass(new THREE.Vector2(window.innerWidth, window.innerHeight), 1.2, 0.8, 0.75);
             bloomPass.threshold = 0.0;
             bloomPass.strength = 1.3; // Play with these
             bloomPass.radius = 0.3;
-
             this.composer = new EffectComposer(this.renderer);
             this.composer.addPass(renderPass);
             this.composer.addPass(bloomPass);
-
             const gridHelper = new THREE.GridHelper(CONFIG.GRID_SIZE * CONFIG.CELL_SIZE, CONFIG.GRID_SIZE, 0x008800, 0x00FF00);
             gridHelper.position.y = -CONFIG.CELL_SIZE / 2; // Align with snake plane
             this.scene.add(gridHelper);
-
             const ambientLight = new THREE.AmbientLight(0x404060, 0.1); // Soft ambient
             this.scene.add(ambientLight);
-
             const directionalLight = new THREE.DirectionalLight(0xffffee, 1.6);
             directionalLight.position.set(75, 13, 10);
             directionalLight.castShadow = true;
             directionalLight.shadow.mapSize.width = 1024;
             directionalLight.shadow.mapSize.height = 1024;
             this.scene.add(directionalLight);
-
             this.headLight = new THREE.PointLight(0x39FF14, 2, CONFIG.CELL_SIZE * 5); // Brighter, green light
             this.headLight.castShadow = false; // Point lights can be expensive for shadows
             this.scene.add(this.headLight);
-
             this.particleSystem = new ParticleSystem(this.scene);
-
             window.addEventListener('resize', () => {
                 this.camera.aspect = window.innerWidth / window.innerHeight;
                 this.camera.updateProjectionMatrix();
@@ -560,38 +519,30 @@
                 this.composer.setSize(window.innerWidth, window.innerHeight); // Resize composer too
             }, false);
         }
-
         placeFood() {
             let foodPos;
             let validPosition = false;
             let attempts = 0;
             const maxAttempts = 100;
-
             const numCells = CONFIG.GRID_SIZE;
-
             while (!validPosition && attempts < maxAttempts) {
                 // Generate random indices within the grid
                 const xIndex = Math.floor(Math.random() * numCells) - Math.floor((numCells - 1) / 2);
                 const zIndex = Math.floor(Math.random() * numCells) - Math.floor((numCells - 1) / 2);
-
                 foodPos = new THREE.Vector3(
                     xIndex * CONFIG.CELL_SIZE,
                     0, // Food on the grid plane
                     zIndex * CONFIG.CELL_SIZE
                 );
-
                 let collisionWithSnake = this.snake.some(segment =>
                     segment.position.distanceToSquared(foodPos) < (CONFIG.CELL_SIZE * 0.9)**2 // Use distanceSquared
                 );
-
                 let collisionWithObstacle = this.obstacles.some(obstacle =>
                     obstacle.position.distanceToSquared(foodPos) < (CONFIG.CELL_SIZE * 0.9)**2
                 );
-
                 validPosition = !collisionWithSnake && !collisionWithObstacle;
                 attempts++;
             }
-
             if (validPosition) {
                 this.food.position.copy(foodPos);
             } else {
@@ -604,22 +555,18 @@
                 );
             }
         }
-
         createObstacles() {
             this.obstacles.forEach(obstacle => {
                 this.scene.remove(obstacle);
                 this.obstaclePool.release(obstacle);
             });
             this.obstacles = [];
-
             const numCells = CONFIG.GRID_SIZE;
-
             for (let i = 0; i < this.obstacleCount; i++) {
                 let obstaclePos;
                 let validPosition = false;
                 let attempts = 0;
                 const maxAttempts = 50;
-
                 while (!validPosition && attempts < maxAttempts) {
                     const xIndex = Math.floor(Math.random() * numCells) - Math.floor((numCells - 1) / 2);
                     const zIndex = Math.floor(Math.random() * numCells) - Math.floor((numCells - 1) / 2);
@@ -628,21 +575,16 @@
                         0, // Obstacles on the grid plane, but mesh is taller
                         zIndex * CONFIG.CELL_SIZE
                     );
-
                     let tooCloseToStart = obstaclePos.lengthSq() < (CONFIG.CELL_SIZE * 4)**2; // Check squared length
-
                     let collisionWithSnake = this.snake.some(segment =>
                         segment.position.distanceToSquared(obstaclePos) < (CONFIG.CELL_SIZE * 2)**2
                     );
-
                     let collisionWithOtherObstacle = this.obstacles.some(existingObstacle =>
                         existingObstacle.position.distanceToSquared(obstaclePos) < (CONFIG.CELL_SIZE * 1.5)**2 // Ensure spacing
                     );
-
                     validPosition = !tooCloseToStart && !collisionWithSnake && !collisionWithOtherObstacle;
                     attempts++;
                 }
-
                 if (validPosition) {
                     const obstacle = this.obstaclePool.get();
                     obstacle.position.copy(obstaclePos);
@@ -652,44 +594,35 @@
                 }
             }
         }
-
         clearGameObjects() {
             this.snake.forEach(segment => {
                 this.scene.remove(segment);
                 this.segmentPool.release(segment);
             });
             this.snake = [];
-
             if (this.food) {
                 this.scene.remove(this.food);
                 // No pool for food as it's a single, changing object
             }
             this.food = null;
-
             this.obstacles.forEach(obstacle => {
                 this.scene.remove(obstacle);
                 this.obstaclePool.release(obstacle);
             });
             this.obstacles = [];
-
             this.particleSystem.clear();
         }
-
         update(time) {
             if (this.isPaused || this.isGameOver || GameState.currentState !== GameState.PLAYING) {
                 return;
             }
-
             if (time - this.lastUpdateTime < this.gameSpeed) {
                 return;
             }
             this.lastUpdateTime = time;
-
             this.direction.copy(this.nextDirection); // More robust copy
-
             const head = this.snake[0];
             const newHeadPos = head.position.clone().add(this.direction); // CELL_SIZE is incorporated in direction
-
             const halfGridWorld = (CONFIG.GRID_SIZE / 2) * CONFIG.CELL_SIZE;
             if (
                 newHeadPos.x >= halfGridWorld || newHeadPos.x < -halfGridWorld ||
@@ -698,21 +631,18 @@
                 this.triggerGameOver();
                 return;
             }
-
             for (let i = 1; i < this.snake.length; i++) {
                 if (newHeadPos.distanceToSquared(this.snake[i].position) < (CONFIG.CELL_SIZE * 0.1)**2) { // Tighter collision
                     this.triggerGameOver();
                     return;
                 }
             }
-
             for (const obstacle of this.obstacles) {
                 if (newHeadPos.distanceToSquared(obstacle.position) < (CONFIG.CELL_SIZE * 0.75)**2) { // Check collision with obstacle
                     this.triggerGameOver();
                     return;
                 }
             }
-
             const newHead = this.segmentPool.get();
             newHead.position.copy(newHeadPos);
             newHead.material = this.materials.snakeHead; // Head material
@@ -722,11 +652,9 @@
             this.snake.unshift(newHead);
             this.scene.add(newHead);
             this.headLight.position.copy(newHeadPos); // Light follows head
-
             if (this.food && newHeadPos.distanceToSquared(this.food.position) < (CONFIG.CELL_SIZE * 0.75)**2) {
                 const foodType = this.food.userData;
                 const basePoints = foodType.points || 1;
-
                 const currentTime = performance.now();
                 if (currentTime - this.lastFoodTime < CONFIG.COMBO_TIMEOUT) {
                     this.comboCount++;
@@ -734,27 +662,21 @@
                     this.comboCount = 1;
                 }
                 this.lastFoodTime = currentTime;
-
                 const points = basePoints * this.comboCount;
                 this.score += points;
-
                 if (this.comboCount > 1) {
                     const comboElement = document.getElementById('combo');
                     comboElement.textContent = `Combo x${this.comboCount}! +${points}`;
                     comboElement.style.opacity = 1;
                     setTimeout(() => { comboElement.style.opacity = 0; }, 2000);
                 }
-
                 document.getElementById('info').textContent = `Score: ${this.score} | High: ${Math.max(this.score, this.highScore)}`;
-
                 if (foodType.speedEffect) {
                     this.gameSpeed = Math.max(50, this.gameSpeed + foodType.speedEffect); // Note: special food had -10, rare had +10
                 }
-
                 document.getElementById('eatSound').currentTime = 0;
                 document.getElementById('eatSound').play();
                 this.particleSystem.createFoodEffect(this.food.position.clone(), new THREE.Color(foodType.color));
-
                 this.chooseFoodType(); // Gets new food type, applies material
                 this.placeFood();      // Places it
             } else {
@@ -762,28 +684,23 @@
                 this.scene.remove(tail);
                 this.segmentPool.release(tail);
             }
-
             this.particleSystem.update();
-
             for (let i = 0; i < this.snake.length; i++) {
                 const segment = this.snake[i];
                 // segment.rotation.y += Math.sin(time * 0.1 + i * 0.1) * 0.01; // Slower, more subtle
                 // segment.position.y = Math.sin(time * 0.01 + i * 0.2) * 0.1;  // Subtle bob
 //                segment.position.y = Math.sin(time * 0.01 + i * 0.2) * 1.5;  // Jumping
             }
-
             if (this.food) {
                 this.food.rotation.x += 0.01;
                 this.food.rotation.y += 0.02;
                 this.food.position.y = Math.sin(time * 0.0055) * 0.25 + 0.1; // Bobbing food
             }
         }
-
         chooseFoodType() {
             const rand = Math.random();
             let foodTypeData;
             let geometry;
-
             if (rand < 0.05) { // 5% rare
                 foodTypeData = CONFIG.FOOD_TYPES[2];
                 geometry = this.geometries.foodTetrahedron;
@@ -794,7 +711,6 @@
                 foodTypeData = CONFIG.FOOD_TYPES[0];
                 geometry = this.geometries.foodBox;
             }
-
             const material = new THREE.MeshStandardMaterial({ // Use Standard for lighting
                 color: foodTypeData.color,
                 emissive: foodTypeData.color, // Make food glow
@@ -803,7 +719,6 @@
                 metalness: 0.7,
                 wireframe: true
             });
-
             if (!this.food) {
                 this.food = new THREE.Mesh(geometry, material);
                 this.scene.add(this.food);
@@ -815,17 +730,14 @@
             }
             this.food.userData = foodTypeData;
         }
-
         resetGame() {
             this.clearGameObjects();
-
             // Stop sounds
             ['eatSound', 'gameOverSound', 'bgMusic'].forEach(id => {
                 const sound = document.getElementById(id);
                 sound.pause();
                 sound.currentTime = 0;
             });
-
             this.direction.set(CONFIG.CELL_SIZE, 0, 0);
             this.nextDirection.set(CONFIG.CELL_SIZE, 0, 0);
             this.score = 0;
@@ -835,27 +747,21 @@
             GameState.currentState = GameState.PLAYING; // Set this before calling things that depend on it.
             this.comboCount = 0;
             this.lastFoodTime = 0;
-
             this.obstacleCount = Math.floor(CONFIG.MAX_OBSTACLE_COUNT * CONFIG.DIFFICULTY_LEVELS[this.currentDifficulty].obstacleMultiplier);
-
             const startSegment = this.segmentPool.get();
             startSegment.position.set(0, 0, 0);
             startSegment.material = this.materials.snakeHead; // Start with head material
             this.snake.push(startSegment);
             this.scene.add(startSegment);
             this.headLight.position.copy(startSegment.position); // Initial light pos
-
             this.chooseFoodType();
             this.placeFood();
             this.createObstacles();
-
             document.getElementById('info').textContent = `Score: ${this.score} | High: ${this.highScore}`;
-
             const music = document.getElementById('bgMusic');
             music.volume = 0.2; // Quieter music
             music.play().catch(e => console.warn("Music play failed:", e)); // Catch promise
         }
-
         startGame() {
             this.resetGame(); // This sets GameState.PLAYING internally now
             GameState.changeState(GameState.PLAYING); // Ensure UI updates
@@ -863,12 +769,10 @@
             if (this.gameLoopId) cancelAnimationFrame(this.gameLoopId); // Clear old loop
             this.gameLoop();
         }
-
         triggerGameOver() {
             if (this.isGameOver) return; // Prevent multiple triggers
             this.isGameOver = true;
             document.getElementById('finalScore').textContent = `Final Score: ${this.score}`;
-
             const highScores = this.loadHighScores();
             if (this.score > 0) {
                 highScores.push({ score: this.score, difficulty: this.currentDifficulty, date: new Date().toLocaleDateString() });
@@ -881,7 +785,6 @@
             document.getElementById('bgMusic').pause();
             GameState.changeState(GameState.GAME_OVER);
         }
-
         gameLoop(time) { // time is passed by requestAnimationFrame
             if (!this.isGameOver && GameState.currentState === GameState.PLAYING) {
                 this.update(time || performance.now()); // Use performance.now if time is undefined initially
@@ -893,7 +796,6 @@
                 if (this.gameLoopId) cancelAnimationFrame(this.gameLoopId); // Ensure loop stops
             }
         }
-
         render() {
             // this.renderer.render(this.scene, this.camera); // When using composer
             if (this.composer) {
@@ -902,26 +804,20 @@
                 this.renderer.render(this.scene, this.camera);
             }
         }
-
         setupEventListeners() {
             document.addEventListener('keydown', this.handleKeyDown.bind(this));
-
             const touchControlsDiv = document.getElementById('touchControls');
             const preventDefaultAndStopPropagation = (e) => { e.preventDefault(); e.stopPropagation(); };
-
             document.getElementById('upBtn').addEventListener('touchstart', (e) => { preventDefaultAndStopPropagation(e); this.handleDirectionChange(0, 0, -CONFIG.CELL_SIZE); });
             document.getElementById('downBtn').addEventListener('touchstart', (e) => { preventDefaultAndStopPropagation(e); this.handleDirectionChange(0, 0, CONFIG.CELL_SIZE); });
             document.getElementById('leftBtn').addEventListener('touchstart', (e) => { preventDefaultAndStopPropagation(e); this.handleDirectionChange(-CONFIG.CELL_SIZE, 0, 0); });
             document.getElementById('rightBtn').addEventListener('touchstart', (e) => { preventDefaultAndStopPropagation(e); this.handleDirectionChange(CONFIG.CELL_SIZE, 0, 0); });
-
             const gameCanvas = document.getElementById('gameCanvas');
             gameCanvas.addEventListener('touchstart', preventDefaultAndStopPropagation, { passive: false });
             gameCanvas.addEventListener('touchmove', preventDefaultAndStopPropagation, { passive: false });
-
             if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
                 touchControlsDiv.style.display = 'block';
             }
-
             document.getElementById('startBtn').addEventListener('click', () => this.startGame());
             document.getElementById('restartBtn').addEventListener('click', () => this.startGame());
             document.getElementById('menuBtn').addEventListener('click', () => GameState.changeState(GameState.MENU));
@@ -934,7 +830,6 @@
                 GameState.changeState(GameState.MENU);
             });
         }
-
         cycleDifficulty() {
             const difficulties = Object.keys(CONFIG.DIFFICULTY_LEVELS);
             const currentIndex = difficulties.indexOf(this.currentDifficulty);
@@ -942,7 +837,6 @@
             this.currentDifficulty = difficulties[nextIndex];
             document.getElementById('difficultyBtn').textContent = `DIFFICULTY: ${this.currentDifficulty.toUpperCase()}`;
         }
-
         handleKeyDown(event) {
             if (GameState.currentState === GameState.PLAYING && !this.isPaused) {
                 switch(event.key) {
@@ -958,7 +852,6 @@
                 this.startGame(); event.preventDefault();
             }
         }
-
         handleDirectionChange(dx, dy, dz) {
             const newDir = new THREE.Vector3(dx, dy, dz);
             // Prevent 180-degree turns. Dot product will be negative.
@@ -968,10 +861,8 @@
             }
             this.nextDirection.copy(newDir);
         }
-
         togglePause() {
             if (GameState.currentState !== GameState.PLAYING && GameState.currentState !== GameState.PAUSED) return;
-
             this.isPaused = !this.isPaused;
             if (this.isPaused) {
                 GameState.changeState(GameState.PAUSED);
@@ -984,17 +875,14 @@
                 this.gameLoop(); // Resume game loop
             }
         }
-
         loadHighScores() {
             const scores = localStorage.getItem('snakeHighScores');
             return scores ? JSON.parse(scores) : [];
         }
-
         updateHighScoresTable() {
             const highScores = this.loadHighScores();
             const table = document.getElementById('scoresTable');
             while (table.rows.length > 1) { table.deleteRow(1); } // Clear existing
-
             highScores.forEach((entry, index) => {
                 const row = table.insertRow(-1);
                 row.insertCell(0).textContent = index + 1;
@@ -1003,10 +891,8 @@
             });
         }
     }
-
     // Create and start the game
     const game = new SnakeGame();
-
 </script>
 </body>
 </html>