Add 2 files

index.html

@@ -46,6 +46,7 @@
         #gameArea {
             touch-action: manipulation;
             background: radial-gradient(circle at center, #1a202c 0%, #111827 100%);
+            overflow: hidden;
         }
         
         .kitchen-counter {
@@ -76,30 +77,181 @@
             50% { box-shadow: 0 0 30px 15px rgba(255, 255, 255, 0.7); }
             100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }
         }
+        
+        /* New effects */
+        .ripple {
+            position: absolute;
+            border-radius: 50%;
+            background: rgba(255, 255, 255, 0.3);
+            transform: scale(0);
+            pointer-events: none;
+            animation: ripple 1s linear;
+        }
+        
+        @keyframes ripple {
+            to {
+                transform: scale(4);
+                opacity: 0;
+            }
+        }
+        
+        .floating-bg-element {
+            position: absolute;
+            opacity: 0.1;
+            animation: floatBg 30s linear infinite;
+            z-index: 0;
+        }
+        
+        @keyframes floatBg {
+            0% { transform: translate(0, 0) rotate(0deg); }
+            25% { transform: translate(50px, 50px) rotate(5deg); }
+            50% { transform: translate(100px, 0) rotate(0deg); }
+            75% { transform: translate(50px, -50px) rotate(-5deg); }
+            100% { transform: translate(0, 0) rotate(0deg); }
+        }
+        
+        .combo-explosion {
+            position: absolute;
+            width: 100%;
+            height: 100%;
+            pointer-events: none;
+            z-index: 5;
+        }
+        
+        .streak-light {
+            position: absolute;
+            height: 2px;
+            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.8), transparent);
+            transform-origin: left center;
+            pointer-events: none;
+            z-index: 4;
+        }
+        
+        .ingredient-trail {
+            position: absolute;
+            width: 10px;
+            height: 10px;
+            border-radius: 50%;
+            pointer-events: none;
+            z-index: 3;
+        }
+        
+        .energy-wave {
+            position: absolute;
+            width: 300px;
+            height: 300px;
+            border-radius: 50%;
+            background: radial-gradient(circle, rgba(255,255,255,0.2) 0%, transparent 70%);
+            transform: scale(0);
+            opacity: 1;
+            pointer-events: none;
+            animation: energyWave 1.5s ease-out forwards;
+        }
+        
+        @keyframes energyWave {
+            0% { transform: scale(0); opacity: 1; }
+            100% { transform: scale(3); opacity: 0; }
+        }
+        
+        .floating-sparkle {
+            position: absolute;
+            width: 6px;
+            height: 6px;
+            border-radius: 50%;
+            background-color: white;
+            pointer-events: none;
+            animation: sparkleFloat 2s ease-out forwards;
+        }
+        
+        @keyframes sparkleFloat {
+            0% { transform: translate(0, 0) scale(1); opacity: 1; }
+            100% { transform: translate(random(100) - 50px, -100px) scale(0); opacity: 0; }
+        }
+        
+        .screen-flash {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background-color: white;
+            opacity: 0;
+            pointer-events: none;
+            z-index: 10;
+        }
+        
+        .combo-streak {
+            position: absolute;
+            width: 100%;
+            height: 100%;
+            background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
+            pointer-events: none;
+            z-index: 2;
+        }
+        
+        .kitchen-light {
+            position: absolute;
+            width: 100%;
+            height: 100%;
+            background: radial-gradient(circle at 50% 30%, rgba(255,215,0,0.1) 0%, transparent 70%);
+            pointer-events: none;
+            z-index: 1;
+            animation: kitchenLightPulse 2s infinite alternate;
+        }
+        
+        @keyframes kitchenLightPulse {
+            0% { opacity: 0.3; }
+            100% { opacity: 0.7; }
+        }
+        
+        .perfect-ring {
+            position: absolute;
+            border-radius: 50%;
+            border: 3px solid rgba(255,255,255,0.8);
+            transform: scale(0);
+            pointer-events: none;
+            animation: perfectRing 0.8s ease-out forwards;
+        }
+        
+        @keyframes perfectRing {
+            0% { transform: scale(0); opacity: 1; }
+            100% { transform: scale(3); opacity: 0; }
+        }
     </style>
 </head>
 <body class="bg-gray-900 text-white font-sans overflow-hidden">
     <!-- Start Screen -->
     <div id="startScreen" class="fixed inset-0 flex flex-col items-center justify-center bg-gradient-to-br from-gray-900 to-gray-800 z-10 transition-opacity duration-500">
-        <div class="text-center mb-12">
+        <div id="startScreenBg" class="absolute inset-0 overflow-hidden">
+            <!-- Floating background elements -->
+            <div class="floating-bg-element text-6xl" style="top:20%; left:10%;">🍳</div>
+            <div class="floating-bg-element text-6xl" style="top:30%; left:70%;">🥘</div>
+            <div class="floating-bg-element text-6xl" style="top:60%; left:20%;">🍕</div>
+            <div class="floating-bg-element text-6xl" style="top:70%; left:80%;">🍣</div>
+        </div>
+        
+        <div class="text-center mb-12 relative z-10">
             <h1 class="text-7xl font-bold mb-4 text-yellow-400 glow">🍳 RHYTHM CHEF</h1>
             <h2 class="text-4xl mb-6 text-yellow-300 glow">Beat Bites Deluxe</h2>
             <div class="text-xl text-gray-300 max-w-md mx-auto">
                 Tap the ingredients in rhythm to cook up perfect dishes!
             </div>
         </div>
-        <button id="startButton" class="bg-gradient-to-r from-yellow-500 to-yellow-600 hover:from-yellow-400 hover:to-yellow-500 text-4xl text-gray-900 font-bold py-5 px-16 rounded-full transition-all transform hover:scale-105 shadow-lg glow">
+        <button id="startButton" class="bg-gradient-to-r from-yellow-500 to-yellow-600 hover:from-yellow-400 hover:to-yellow-500 text-4xl text-gray-900 font-bold py-5 px-16 rounded-full transition-all transform hover:scale-105 shadow-lg glow relative z-10">
             START COOKING
         </button>
-        <div class="absolute bottom-8 text-gray-400 text-sm">
+        <div class="absolute bottom-8 text-gray-400 text-sm z-10">
             Tap the beat when ingredients reach the counter
         </div>
     </div>
 
     <!-- Game Screen -->
     <div id="gameScreen" class="fixed inset-0 hidden flex flex-col">
+        <!-- Kitchen ambient light -->
+        <div class="kitchen-light"></div>
+        
         <!-- Score Display -->
-        <div class="flex justify-between px-8 pt-6">
+        <div class="flex justify-between px-8 pt-6 relative z-10">
             <div class="text-4xl font-bold score-glow">
                 🏆 <span id="score">0</span>
             </div>
@@ -113,6 +265,9 @@
             <!-- Floating particles background -->
             <div id="particles"></div>
             
+            <!-- Combo streak effect -->
+            <div id="comboStreak" class="combo-streak hidden"></div>
+            
             <!-- Target Zone (Kitchen Counter) -->
             <div id="targetZone" class="kitchen-counter absolute left-0 right-0 h-24 rounded-t-3xl flex items-center justify-center" style="bottom: 20%;">
                 <div class="w-full h-1 bg-yellow-300 bg-opacity-50 rounded-full mx-8"></div>
@@ -120,12 +275,18 @@
             
             <!-- Feedback Text -->
             <div id="feedbackText" class="absolute left-1/2 transform -translate-x-1/2 text-6xl font-bold text-center opacity-0" style="bottom: 30%;"></div>
+            
+            <!-- Combo explosion container -->
+            <div id="comboExplosion" class="combo-explosion"></div>
+            
+            <!-- Energy waves container -->
+            <div id="energyWaves"></div>
         </div>
     </div>
 
     <!-- End Screen -->
     <div id="endScreen" class="fixed inset-0 hidden flex flex-col items-center justify-center bg-gray-900 bg-opacity-95 z-20">
-        <div class="text-center">
+        <div class="text-center relative">
             <h2 class="text-6xl font-bold mb-8 text-yellow-400 glow">DISH COMPLETE! 🎉</h2>
             <div class="text-5xl mb-8">Final Score: <span id="finalScore" class="text-yellow-300">0</span></div>
             <div id="finalDish" class="text-9xl mb-12">🍲</div>
@@ -136,6 +297,9 @@
         </div>
     </div>
 
+    <!-- Screen flash effect -->
+    <div id="screenFlash" class="screen-flash"></div>
+
     <script>
         // Game state
         const gameState = {
@@ -172,7 +336,8 @@
             currentSequenceIndex: 0,
             audioContext: null,
             metronomeInterval: null,
-            backgroundParticles: []
+            backgroundParticles: [],
+            lastTapPosition: { x: 0, y: 0 }
         };
 
         // DOM elements
@@ -191,6 +356,11 @@
         const maxComboDisplay = document.getElementById('maxCombo');
         const finalDishDisplay = document.getElementById('finalDish');
         const particlesContainer = document.getElementById('particles');
+        const comboExplosion = document.getElementById('comboExplosion');
+        const comboStreak = document.getElementById('comboStreak');
+        const energyWaves = document.getElementById('energyWaves');
+        const screenFlash = document.getElementById('screenFlash');
+        const startScreenBg = document.getElementById('startScreenBg');
 
         // Initialize audio context
         function initAudio() {
@@ -226,7 +396,7 @@
             gameState.backgroundParticles = [];
             
             // Create new particles
-            for (let i = 0; i < 30; i++) {
+            for (let i = 0; i < 50; i++) {
                 createParticle(true);
             }
         }
@@ -236,20 +406,30 @@
             particle.className = 'particle';
             
             // Random properties
-            const size = Math.random() * 6 + 2;
+            const size = Math.random() * 10 + 2;
             const x = Math.random() * 100;
             const y = Math.random() * 100;
             const duration = Math.random() * 20 + 10;
             const delay = Math.random() * 5;
-            const opacity = Math.random() * 0.3 + 0.1;
+            const opacity = Math.random() * 0.5 + 0.1;
             const color = `hsl(${Math.random() * 60 + 20}, 70%, 60%)`;
+            const shape = Math.random() > 0.7 ? 'text' : 'circle';
+            
+            if (shape === 'text') {
+                const emojis = ['✨', '🌟', '⭐', '⚡', '💫', '🔥', '🍳', '🥘', '🍲'];
+                particle.textContent = emojis[Math.floor(Math.random() * emojis.length)];
+                particle.style.fontSize = `${size}px`;
+                particle.style.width = 'auto';
+                particle.style.height = 'auto';
+            } else {
+                particle.style.width = `${size}px`;
+                particle.style.height = `${size}px`;
+                particle.style.backgroundColor = color;
+                particle.style.borderRadius = '50%';
+            }
             
-            particle.style.width = `${size}px`;
-            particle.style.height = `${size}px`;
             particle.style.left = `${x}%`;
             particle.style.top = `${y}%`;
-            particle.style.backgroundColor = color;
-            particle.style.borderRadius = '50%';
             particle.style.opacity = opacity;
             particle.style.animation = `float ${duration}s linear ${delay}s infinite`;
             
@@ -283,6 +463,10 @@
             gameState.metronomeInterval = setInterval(() => {
                 playSound(880, 0.05, 'triangle');
                 nextBeatTime += secondsPerBeat;
+                
+                // Visual metronome effect
+                createEnergyWave(targetZone.getBoundingClientRect().left + targetZone.offsetWidth / 2, 
+                                targetZone.getBoundingClientRect().top + targetZone.offsetHeight / 2);
             }, secondsPerBeat * 1000);
         }
 
@@ -305,6 +489,9 @@
             cue.style.left = `${Math.random() * 60 + 20}%`;
             cue.textContent = ingredient;
             
+            // Add trail effect
+            createIngredientTrail(cue);
+            
             // Add to DOM and active cues array
             gameArea.appendChild(cue);
             const cueObj = { 
@@ -325,6 +512,37 @@
             return cueObj;
         }
 
+        // Create ingredient trail effect
+        function createIngredientTrail(cue) {
+            const trailInterval = setInterval(() => {
+                if (!cue.parentElement) {
+                    clearInterval(trailInterval);
+                    return;
+                }
+                
+                const rect = cue.getBoundingClientRect();
+                const trail = document.createElement('div');
+                trail.className = 'ingredient-trail';
+                trail.style.left = `${rect.left + rect.width / 2}px`;
+                trail.style.top = `${rect.top + rect.height / 2}px`;
+                trail.style.backgroundColor = `hsl(${Math.random() * 60 + 20}, 80%, 60%)`;
+                trail.style.opacity = Math.random() * 0.6 + 0.2;
+                trail.style.transform = `scale(${Math.random() * 0.5 + 0.5})`;
+                
+                document.body.appendChild(trail);
+                
+                setTimeout(() => {
+                    trail.style.transition = 'all 0.5s ease-out';
+                    trail.style.opacity = '0';
+                    trail.style.transform = 'scale(0)';
+                    setTimeout(() => trail.remove(), 500);
+                }, 10);
+            }, 50);
+            
+            // Clean up interval when cue is removed
+            cue.dataset.trailInterval = trailInterval;
+        }
+
         // Show feedback
         function showFeedback(text, isGood) {
             feedbackText.textContent = text;
@@ -336,6 +554,14 @@
             // Create hit effect
             if (isGood) {
                 createHitEffect(feedbackText.getBoundingClientRect());
+                
+                // Add ripple effect
+                createRippleEffect(gameState.lastTapPosition.x, gameState.lastTapPosition.y);
+                
+                // Add perfect ring for perfect hits
+                if (text.includes('PERFECT')) {
+                    createPerfectRing(gameState.lastTapPosition.x, gameState.lastTapPosition.y);
+                }
             }
             
             // Hide feedback after delay
@@ -348,14 +574,14 @@
         function createHitEffect(rect) {
             const colors = ['#FFD700', '#FF6347', '#7FFFD4', '#FF69B4', '#9370DB'];
             
-            for (let i = 0; i < 15; i++) {
+            for (let i = 0; i < 25; i++) {
                 const particle = document.createElement('div');
                 particle.className = 'particle';
                 
-                const size = Math.random() * 12 + 4;
+                const size = Math.random() * 16 + 4;
                 const color = colors[Math.floor(Math.random() * colors.length)];
                 const angle = Math.random() * Math.PI * 2;
-                const distance = Math.random() * 50 + 20;
+                const distance = Math.random() * 100 + 30;
                 const duration = Math.random() * 1 + 0.5;
                 
                 particle.style.width = `${size}px`;
@@ -377,6 +603,91 @@
                     setTimeout(() => particle.remove(), duration * 1000);
                 }, 10);
             }
+            
+            // Add floating sparkles
+            for (let i = 0; i < 10; i++) {
+                createFloatingSparkle(rect.left + rect.width / 2, rect.top + rect.height / 2);
+            }
+        }
+
+        // Create ripple effect
+        function createRippleEffect(x, y) {
+            const ripple = document.createElement('div');
+            ripple.className = 'ripple';
+            ripple.style.left = `${x}px`;
+            ripple.style.top = `${y}px`;
+            ripple.style.width = '50px';
+            ripple.style.height = '50px';
+            ripple.style.backgroundColor = `rgba(255, 255, 255, ${Math.random() * 0.2 + 0.1})`;
+            
+            document.body.appendChild(ripple);
+            
+            setTimeout(() => {
+                ripple.remove();
+            }, 1000);
+        }
+
+        // Create perfect ring effect
+        function createPerfectRing(x, y) {
+            const ring = document.createElement('div');
+            ring.className = 'perfect-ring';
+            ring.style.left = `${x}px`;
+            ring.style.top = `${y}px`;
+            ring.style.width = '50px';
+            ring.style.height = '50px';
+            
+            document.body.appendChild(ring);
+            
+            setTimeout(() => {
+                ring.remove();
+            }, 800);
+        }
+
+        // Create floating sparkle
+        function createFloatingSparkle(x, y) {
+            const sparkle = document.createElement('div');
+            sparkle.className = 'floating-sparkle';
+            sparkle.style.left = `${x}px`;
+            sparkle.style.top = `${y}px`;
+            sparkle.style.backgroundColor = `hsl(${Math.random() * 60 + 20}, 100%, 80%)`;
+            
+            document.body.appendChild(sparkle);
+            
+            setTimeout(() => {
+                sparkle.remove();
+            }, 2000);
+        }
+
+        // Create energy wave
+        function createEnergyWave(x, y) {
+            const wave = document.createElement('div');
+            wave.className = 'energy-wave';
+            wave.style.left = `${x - 150}px`;
+            wave.style.top = `${y - 150}px`;
+            
+            energyWaves.appendChild(wave);
+            
+            setTimeout(() => {
+                wave.remove();
+            }, 1500);
+        }
+
+        // Create streak light effect
+        function createStreakLight(x, y, angle, length) {
+            const light = document.createElement('div');
+            light.className = 'streak-light';
+            light.style.left = `${x}px`;
+            light.style.top = `${y}px`;
+            light.style.width = `${length}px`;
+            light.style.transform = `rotate(${angle}rad)`;
+            
+            document.body.appendChild(light);
+            
+            setTimeout(() => {
+                light.style.opacity = '0';
+                light.style.transition = 'opacity 0.5s ease-out';
+                setTimeout(() => light.remove(), 500);
+            }, 10);
         }
 
         // Handle successful hit
@@ -387,12 +698,17 @@
             
             // Visual feedback on the cue
             cue.element.classList.add('perfect-hit');
-            cue.element.style.transform = 'scale(1.2)';
+            cue.element.style.transform = 'scale(1.5)';
             
             setTimeout(() => {
                 cue.element.remove();
             }, 200);
             
+            // Clear trail interval
+            if (cue.element.dataset.trailInterval) {
+                clearInterval(parseInt(cue.element.dataset.trailInterval));
+            }
+            
             // Determine hit quality
             let points = 0;
             let feedback = '';
@@ -404,6 +720,13 @@
                 soundFreq = 1046.50; // C note
                 playSound(soundFreq, 0.2, 'sine');
                 playSound(soundFreq/2, 0.3, 'sine');
+                
+                // Screen flash for perfect hits
+                screenFlash.style.opacity = '0.3';
+                screenFlash.style.transition = 'opacity 0.3s ease-out';
+                setTimeout(() => {
+                    screenFlash.style.opacity = '0';
+                }, 300);
             } else if (Math.abs(accuracy) <= gameState.goodWindow) {
                 points = 60;
                 feedback = 'GREAT! ��';
@@ -429,6 +752,28 @@
             // Show combo if > 1
             if (gameState.combo > 1) {
                 comboContainer.classList.remove('hidden');
+                
+                // Combo streak effect
+                if (gameState.combo % 5 === 0) {
+                    comboStreak.classList.remove('hidden');
+                    setTimeout(() => {
+                        comboStreak.classList.add('hidden');
+                    }, 300);
+                    
+                    // Combo explosion for every 5 hits
+                    if (gameState.combo % 10 === 0) {
+                        createComboExplosion();
+                    }
+                }
+                
+                // Streak lights for high combos
+                if (gameState.combo > 3) {
+                    for (let i = 0; i < 3; i++) {
+                        const angle = Math.random() * Math.PI * 2;
+                        const length = Math.random() * 200 + 100;
+                        createStreakLight(gameState.lastTapPosition.x, gameState.lastTapPosition.y, angle, length);
+                    }
+                }
             }
             
             // Show feedback
@@ -438,6 +783,41 @@
             createIngredientEffect(cue);
         }
 
+        // Create combo explosion effect
+        function createComboExplosion() {
+            comboExplosion.innerHTML = '';
+            
+            for (let i = 0; i < 30; i++) {
+                const particle = document.createElement('div');
+                particle.className = 'particle';
+                
+                const size = Math.random() * 20 + 10;
+                const color = `hsl(${Math.random() * 60 + 20}, 100%, 70%)`;
+                const angle = Math.random() * Math.PI * 2;
+                const distance = Math.random() * 300 + 100;
+                const duration = Math.random() * 1 + 0.5;
+                
+                particle.style.width = `${size}px`;
+                particle.style.height = `${size}px`;
+                particle.style.left = '50%';
+                particle.style.top = '50%';
+                particle.style.backgroundColor = color;
+                particle.style.borderRadius = '50%';
+                particle.style.opacity = '0.8';
+                particle.style.transform = `translate(-50%, -50%) translate(${Math.cos(angle) * distance}px, ${Math.sin(angle) * distance}px)`;
+                particle.style.transition = `all ${duration}s ease-out`;
+                particle.style.boxShadow = `0 0 ${size/2}px ${color}`;
+                
+                comboExplosion.appendChild(particle);
+                
+                setTimeout(() => {
+                    particle.style.opacity = '0';
+                    particle.style.transform += ` scale(0.5)`;
+                    setTimeout(() => particle.remove(), duration * 1000);
+                }, 10);
+            }
+        }
+
         // Create ingredient transformation effect
         function createIngredientEffect(cue) {
             const rect = cue.element.getBoundingClientRect();
@@ -457,7 +837,7 @@
             // Animate transformation
             setTimeout(() => {
                 effect.style.transition = 'all 0.5s ease-out';
-                effect.style.transform = 'translateY(-30px) scale(1.5)';
+                effect.style.transform = 'translateY(-50px) scale(2)';
                 effect.style.opacity = '0';
                 
                 // Change to a cooked version
@@ -495,6 +875,11 @@
                 setTimeout(() => {
                     cue.element.remove();
                 }, 500);
+                
+                // Clear trail interval
+                if (cue.element.dataset.trailInterval) {
+                    clearInterval(parseInt(cue.element.dataset.trailInterval));
+                }
             }
             
             // Reset combo
@@ -509,22 +894,22 @@
             // Create break effect
             if (cue.element) {
                 const rect = cue.element.getBoundingClientRect();
-                for (let i = 0; i < 5; i++) {
+                for (let i = 0; i < 8; i++) {
                     const piece = document.createElement('div');
                     piece.className = 'particle absolute text-xl';
                     piece.textContent = cue.ingredient;
                     piece.style.left = `${rect.left + rect.width/2}px`;
                     piece.style.top = `${rect.top + rect.height/2}px`;
-                    piece.style.transform = `translate(${(Math.random() - 0.5) * 50}px, ${(Math.random() - 0.5) * 50}px) rotate(${Math.random() * 360}deg)`;
+                    piece.style.transform = `translate(${(Math.random() - 0.5) * 80}px, ${(Math.random() - 0.5) * 80}px) rotate(${Math.random() * 360}deg)`;
                     piece.style.opacity = '0.7';
-                    piece.style.transition = 'all 0.5s ease-out';
+                    piece.style.transition = 'all 0.8s ease-out';
                     
                     document.body.appendChild(piece);
                     
                     setTimeout(() => {
                         piece.style.opacity = '0';
-                        piece.style.transform += ` translateY(30px)`;
-                        setTimeout(() => piece.remove(), 500);
+                        piece.style.transform += ` translateY(50px)`;
+                        setTimeout(() => piece.remove(), 800);
                     }, 10);
                 }
             }
@@ -543,6 +928,7 @@
             scoreDisplay.textContent = '0';
             comboDisplay.textContent = '0';
             comboContainer.classList.add('hidden');
+            comboStreak.classList.add('hidden');
             
             // Create background particles
             createParticles();
@@ -607,18 +993,40 @@
                 endScreen.classList.remove('hidden');
                 
                 // Celebration particles
-                for (let i = 0; i < 50; i++) {
+                for (let i = 0; i < 100; i++) {
                     setTimeout(() => {
-                        createParticle();
+                        const particle = createParticle();
+                        particle.style.position = 'fixed';
+                        particle.style.left = `${Math.random() * 100}%`;
+                        particle.style.top = `${Math.random() * 100}%`;
+                        particle.style.fontSize = `${Math.random() * 30 + 20}px`;
+                        particle.style.opacity = '0.8';
+                        particle.style.animation = `float ${Math.random() * 3 + 2}s ease-out forwards`;
+                        
+                        const emojis = ['✨', '🌟', '⭐', '⚡', '💫', '🔥', '🎉', '🎊', '🥳'];
+                        particle.textContent = emojis[Math.floor(Math.random() * emojis.length)];
+                        
+                        endScreen.appendChild(particle);
+                        
+                        setTimeout(() => {
+                            particle.remove();
+                        }, 3000);
                     }, i * 50);
                 }
             }, gameState.cueSpeed * 1000);
         }
 
         // Handle tap input
-        function handleTap() {
+        function handleTap(e) {
             if (!gameState.isPlaying) return;
             
+            // Store tap position for effects
+            const rect = gameArea.getBoundingClientRect();
+            gameState.lastTapPosition = {
+                x: (e.clientX || e.touches[0].clientX) - rect.left,
+                y: (e.clientY || e.touches[0].clientY) - rect.top
+            };
+            
             const now = Date.now();
             let closestCue = null;
             let closestDiff = Infinity;
@@ -640,6 +1048,9 @@
                 targetZone.classList.remove('perfect-hit');
             }, 300);
             
+            // Create energy wave at tap position
+            createEnergyWave(gameState.lastTapPosition.x, gameState.lastTapPosition.y);
+            
             // Check if tap was close enough to any cue
             if (closestCue && Math.abs(closestDiff) <= gameState.goodWindow * 2) {
                 handleHit(closestCue, closestDiff);
@@ -657,6 +1068,21 @@
         function initGame() {
             initAudio();
             
+            // Add floating elements to start screen
+            for (let i = 0; i < 10; i++) {
+                const element = document.createElement('div');
+                element.className = 'floating-bg-element text-4xl';
+                element.style.left = `${Math.random() * 100}%`;
+                element.style.top = `${Math.random() * 100}%`;
+                element.style.animationDuration = `${Math.random() * 30 + 20}s`;
+                element.style.animationDelay = `${Math.random() * 10}s`;
+                
+                const emojis = ['🍳', '🥘', '🍕', '🍔', '🍟', '🌭', '🍿', '🧂', '🥗', '🍣'];
+                element.textContent = emojis[Math.floor(Math.random() * emojis.length)];
+                
+                startScreenBg.appendChild(element);
+            }
+            
             // Start button
             startButton.addEventListener('click', () => {
                 startScreen.classList.add('opacity-0');
@@ -679,7 +1105,7 @@
             // Touch support
             gameArea.addEventListener('touchstart', (e) => {
                 e.preventDefault();
-                handleTap();
+                handleTap(e);
             });
         }
 

prompts.txt

@@ -1,2 +1,3 @@
 Okay, here is a detailed, implementation-grade plan for building an interactive demonstrator for the core game mechanics of **Rhythm Chef: Beat Bites**. This focuses on creating a minimal viable product (MVP) specifically for user feedback on the core rhythm interaction feel, keeping the codebase limited.  **Assumptions:**  *   **Engine:** Unity (common choice for hypercasual, good for rapid prototyping). *   **Language:** C#. *   **Target Platform:** Android (easy for distributing APKs for testing). *   **Input Focus:** Start with **Tap** only for simplicity. Hold/Swipe can be added later if the Tap feels good.  **I. Demonstrator Objectives**  1.  Implement the core rhythm interaction: spawning cues, moving cues, detecting timed player input within a target zone. 2.  Provide immediate, clear visual and audio feedback for successful hits and misses. 3.  Synchronize cue movement and required input timing to a consistent beat (can be a simple metronome track or internal timer). 4.  Allow a user to play through a short, predefined sequence of cues. 5.  Keep the scope strictly limited to the core mechanic loop for fast iteration and focused feedback.  **II. Scope Definition**  *   **IN SCOPE:**     *   Single, non-scrolling conveyor belt or lane for cues.     *   One type of cue requiring a **Tap** input.     *   One clearly defined target zone.     *   Precise timing mechanism for cue spawning and hit detection.     *   Simple visual representation of cues (e.g., colored circles/squares representing ingredients/actions).     *   Visual feedback (e.g., color change, simple particle effect, text popup like "Perfect!"/"Miss!").     *   Basic audio feedback (hit sound, miss sound, beat/metronome sound).     *   A predefined, short sequence (~15-30 seconds) of Tap cues.     *   Minimal UI: Start Button, potentially a simple score/combo counter (optional but helpful). *   **OUT OF SCOPE:**     *   Multiple lanes or complex patterns.     *   Hold or Swipe input types.     *   Multiple cue types/actions (chop, fry, etc.).     *   Any meta-game (restaurant, currency, upgrades).     *   Scoring beyond basic hit/miss feedback (no stars, complex calculations).     *   Multiple songs or difficulty levels.     *   Polished art assets (use placeholders).     *   Advanced UI, menus, settings.     *   Saving/loading progress.     *   Performance optimization beyond basic functionality.  **III. Key Components & Implementation Details**  1.  **`GameManager.cs`**     *   **Purpose:** Controls the overall state, timing, and sequence playback.     *   **Properties:**         *   `float bpm`: Beats per minute for the rhythm.         *   `float cueSpeed`: Speed at which cues travel towards the target.         *   `float targetZonePosition`: Y-coordinate (or X if horizontal) of the target zone center.         *   `float spawnPosition`: Y-coordinate (or X) where cues appear.         *   `GameObject cuePrefab`: Prefab for the visual cue object.         *   `Transform cueSpawnPoint`: Transform where cues are instantiated.         *   `AudioSource metronomeSource`: Optional, for playing a beat sound.         *   `List<CueData> sequence`: Holds the predefined sequence of cues (timing).         *   `float songStartTime`: Time when the sequence began (using `AudioSettings.dspTime` or `Time.timeSinceLevelLoad`).         *   `int currentSequenceIndex`: Tracks the next cue to spawn.         *   `bool isPlaying`: Game state flag.     *   **Methods:**         *   `StartSequence()`: Initializes timing, resets index, sets `isPlaying = true`. Starts metronome if used.         *   `Update()`:             *   If `isPlaying`, check `sequence` if it's time to spawn the `currentSequenceIndex` cue based on `bpm` and `songStartTime`.             *   If spawning, instantiate `cuePrefab` at `cueSpawnPoint`, calculate its `targetTime` (arrival time at target zone), and pass necessary data to the cue's script. Increment `currentSequenceIndex`.             *   Handles end of sequence.         *   `StopSequence()`: Sets `isPlaying = false`.  2.  **`CueData.cs` (or Struct)**     *   **Purpose:** Simple data structure to define a single cue in the sequence.     *   **Properties:**         *   `float beatTimestamp`: The beat number (e.g., 1, 1.5, 2) within the sequence when this cue should *hit* the target zone.         *   `CueType type`: Enum (e.g., `Tap`). (Initially only Tap needed).  3.  **`CueObject.cs` (attached to `cuePrefab`)**     *   **Purpose:** Represents a single moving cue.     *   **Properties:**         *   `float speed`: Movement speed (set by `GameManager`).         *   `float targetTime`: The exact game time (`Time.timeSinceLevelLoad` or `dspTime`) this cue should ideally be hit.         *   `bool isHit`: Flag to prevent multiple hits.         *   `bool canBeHit`: Flag to indicate if it's currently within the hittable window around the target zone.     *   **Methods:**         *   `Initialize(float targetTime, float speed)`: Called by `GameManager` on spawn.         *   `Update()`:             *   Move the cue downwards (or towards the target) at `speed * Time.deltaTime`.             *   Check if the cue has passed the target zone *without* being hit and *after* its hittable window - trigger a Miss condition if so and destroy/disable self.         *   `OnTriggerEnter/Exit2D(Collider2D other)`: If using physics triggers for the target zone, set `canBeHit = true/false`.         *   `ProcessHit()`: Called by `InputHandler` when a hit is registered on this cue. Sets `isHit = true`, triggers success feedback, potentially disables the cue visually, and schedules destruction.  4.  **`TargetZone.cs` (attached to a GameObject with a Collider2D)**     *   **Purpose:** Defines the area where input is registered and cues are evaluated.     *   **Properties:**         *   `float perfectWindow`: Time window (+/- seconds) for a perfect hit.         *   `float okWindow`: Time window (+/- seconds) for an acceptable (non-miss) hit. (Keep simple first: just Perfect/Miss).     *   **Methods:**         *   `OnTriggerEnter2D/Exit2D(Collider2D other)`: Detects `CueObject` entering/leaving the zone's collider. Could be used by `CueObject` to set its `canBeHit` flag.     *   **Note:** Hit timing validation logic might live more centrally in `InputHandler` or `GameManager` rather than distributed here.  5.  **`InputHandler.cs`**     *   **Purpose:** Detects player input and checks if it corresponds to a hittable cue.     *   **Properties:**         *   `TargetZone targetZone`: Reference to the target zone script/object.         *   `LayerMask cueLayer`: Physics layer for cues.     *   **Methods:**         *   `Update()`:             *   Check for Tap input (`Input.GetMouseButtonDown(0)` or `Input.touchCount > 0 && Input.GetTouch(0).phase == TouchPhase.Began`).             *   If Tap detected:                 *   Determine the current game time (`Time.timeSinceLevelLoad` or `AudioSettings.dspTime`).                 *   Find the "closest" active `CueObject` that is currently `canBeHit` (e.g., using Physics2D overlap checks near the target zone, or iterating through active cues and checking position/timing).                 *   If a potential cue is found:                     *   Calculate `timeDifference = currentTime - cue.targetTime`.                     *   If `Mathf.Abs(timeDifference) <= targetZone.perfectWindow`:                         *   Call `cue.ProcessHit()`.                         *   Trigger "Perfect" feedback via `FeedbackManager`.                     *   Else (if outside window but maybe an OK window exists later):                         *   Trigger "Miss" feedback via `FeedbackManager` (or OK if implementing).                         *   Potentially destroy/disable the cue to prevent late hits.                 *   Else (no cue was hittable):                     *   Optional: Trigger a generic "Miss" feedback for tapping empty space.  6.  **`FeedbackManager.cs` (Singleton or easily accessible)**     *   **Purpose:** Centralized handler for triggering visual/audio feedback.     *   **Properties:**         *   `GameObject perfectHitEffectPrefab`: Particle effect/animation for perfect hits.         *   `GameObject missEffectPrefab`: Effect for misses.         *   `AudioClip hitSound`: Sound for successful hit.         *   `AudioClip missSound`: Sound for miss/error.         *   `AudioSource feedbackAudioSource`: Source to play feedback sounds.         *   `TextMeshProUGUI feedbackText`: UI Text element to display "Perfect!"/"Miss!".     *   **Methods:**         *   `ShowHitFeedback(Vector3 position)`: Instantiate `perfectHitEffectPrefab` at `position`, play `hitSound`, show "Perfect!" text briefly.         *   `ShowMissFeedback(Vector3 position)`: Instantiate `missEffectPrefab` at `position`, play `missSound`, show "Miss!" text briefly.  **IV. Timing Implementation (CRITICAL)**  *   **Consistency is Key:** Use a consistent time source.     *   **Option A (Simpler):** `Time.timeSinceLevelLoad`. Easier for basic logic but can drift slightly from audio. Good enough for a demonstrator.     *   **Option B (More Accurate):** `AudioSettings.dspTime`. Provides highly accurate timing synced with the audio engine. Requires careful handling, especially when scheduling future events based on audio playback. *   **Calculations:**     *   Convert `bpm` to seconds per beat (`60f / bpm`).     *   Calculate cue `targetTime`: `songStartTime + cue.beatTimestamp * secondsPerBeat`.     *   Calculate spawn time: `targetTime - travelDuration`, where `travelDuration` is `distance / cueSpeed`. Spawn the cue at this calculated spawn time.  **V. UI Implementation (Minimal)**  *   Canvas with:     *   `Button` to call `GameManager.StartSequence()`.     *   `TextMeshProUGUI` (optional) for Score/Combo (incremented in `FeedbackManager` on hit, reset on miss).     *   `TextMeshProUGUI` for "Perfect!"/"Miss!" feedback text (controlled by `FeedbackManager`).  **VI. Placeholder Assets**  *   **Cue:** Simple white Circle or Square sprite. *   **Target Zone:** Semi-transparent rectangle/line across the lane. *   **Hit Effect:** Simple particle burst (e.g., Unity's default particle system emitting a few sparks) or a quick scaling/fading circle. *   **Miss Effect:** Red flash or different particle effect. *   **Audio:**     *   Metronome: Simple "tick" sound.     *   Hit Sound: Short, satisfying "click" or "pop".     *   Miss Sound: Dull "thud" or "buzz".  **VII. Build & Test Plan**  1.  Implement core components (`GameManager`, `CueObject`, `InputHandler`, `TargetZone`, `FeedbackManager`). 2.  Define a simple `sequence` in `GameManager` (e.g., 10 taps on consecutive beats). 3.  Use precise timing based on `Time.timeSinceLevelLoad` initially. 4.  Integrate basic visual and audio feedback. 5.  Test internally: Does it *feel* responsive? Is the timing right? 6.  Refine timing windows (`perfectWindow`) based on feel. 7.  Build an Android APK. 8.  Distribute APK to testers. 9.  Gather feedback specifically on:     *   Timing sensitivity (too strict, too lenient?).     *   Clarity of visual cues.     *   Effectiveness of feedback (did they know if they hit/missed?).     *   Overall satisfaction/fun of the core interaction.  **VIII. Success Criteria for Demonstrator**  *   The demonstrator runs smoothly on a target Android device. *   Cues spawn and travel predictably, synchronized with the beat. *   User taps near the target zone trigger immediate hit/miss feedback. *   Feedback (visual and audio) is clear and correctly corresponds to input timing accuracy. *   Testers can understand the core mechanic and provide feedback on its "feel" within 5 minutes of playing. *   The codebase is minimal and focused solely on the described scope.  Okay, here's an ASCII art representation of the UI and user flow for the **Rhythm Chef: Beat Bites** core mechanics demonstrator.  **1. User Flow Diagram**  ```ascii +-------------------+      +----------------------+      +----------------------+ |    Start Screen   | ---+->|   Gameplay Loop      |---+->|  End Screen (Simple)| | (Title, [Start])  | User | (Cues, Target, Input)| User | (Score?, [Restart])| +-------------------+ Taps |                      | Finishes Sequence        +----------------------+                        Start +--<-------------------+ Or Fails             | (Optional)           |                              |                      |                      | Back to Start Screen |                              +----------------------+                      +----------------------+ ```  **2. UI Mockups (ASCII Art)**  **A. Start Screen**  ```ascii +-----------------------------------------+ |                                         | |      // RHYTHM CHEF: BEAT BITES //      | |          (Core Demo)                  | |                                         | |                                         | |                                         | |                                         | |             +-----------+               | |             |  [ START ]|               | |             +-----------+               | |                                         | |                                         | +-----------------------------------------+   User taps [ START ] --> Transitions to Gameplay Screen ```  **B. Gameplay Screen (Mid-Sequence)**  *   Imagine cues `(*)` moving downwards `v` towards the `TARGET ZONE`. *   The player needs to tap when a cue is inside the `TARGET ZONE`.  ```ascii +-----------------------------------------+ | SCORE: 005   COMBO: 3x                  | <--- Optional Score/Combo Display |-----------------------------------------| |                                         | |                                         | |                   (*)                   | <--- Incoming Cue 1 |                    v                    | |                                         | |                                         | |                   (*)                   | <--- Incoming Cue 2 |                    v                    | |                                         | |  =====================================  | \ |  |         TARGET ZONE            |  | <--- The Area to Tap In |  =====================================  | / |                   v                    | |                   (*)                   | <--- Cue that just passed (or was missed) |                                         | |                                         | |                                         | |-----------------------------------------| | FEEDBACK:                              | <--- Area for text feedback +-----------------------------------------+ ```  **C. Gameplay Screen (Moment of Tap - Perfect Hit)**  *   Player taps as `(*)` enters the `TARGET ZONE`. *   Visual & text feedback appears.  ```ascii +-----------------------------------------+ | SCORE: 006   COMBO: 4x                  | <--- Score/Combo Updated |-----------------------------------------| |                                         | |                                         | |                   (*)                   | |                    v                    | |                                         | |                                         | |                   (*)                   | |                    v                    | |                                         | |  =====================================  | |  |     > > > PERFECT! < < <       |  | <--- Cue hit inside, feedback shown |  =====================================  | |                   |                    | |                 (Effect)                | <--- Visual effect (e.g., ASCII explosion *`*`) |                                         | |                                         | |-----------------------------------------| | FEEDBACK: Perfect!                      | <--- Text feedback updated +-----------------------------------------+ ```  **D. Gameplay Screen (Moment of Tap - Miss)**  *   Player taps too early/late, or misses a cue.  ```ascii +-----------------------------------------+ | SCORE: 006   COMBO: 0x                  | <--- Combo Reset |-----------------------------------------| |                                         | |                                         | |                   (*)                   | |                    v                    | |                                         | |                                         | |                   (*)                   | |                    v                    | |                                         | |  =====================================  | |  |         TARGET ZONE            |  | |  =====================================  | |                   v                    | |                   (X)                   | <--- Missed cue indication / effect |                                         | |                                         | |-----------------------------------------| | FEEDBACK: Miss!                         | <--- Text feedback updated +-----------------------------------------+ ```  **E. End Screen (Simple Demo End)**  *   Appears after the predefined sequence finishes.  ```ascii +-----------------------------------------+ |                                         | |            SEQUENCE COMPLETE!           | |                                         | |           (Final Score: 025)            | <--- Optional final score |                                         | |                                         | |             +-------------+             | |             | [ RESTART ] |             | |             +-------------+             | |                                         | |                                         | +-----------------------------------------+   User taps [ RESTART ] --> Transitions back to Gameplay Screen (restarts sequence)   (Or could go back to the Start Screen) ```  This ASCII representation outlines the essential visual elements and the flow between them for the core mechanics demonstrator, focusing on clarity for user feedback on the rhythm interaction.   Okay, here are specific pixel-based dimensions and positions for the UI elements based on a **reference screen resolution of 1080x1920 pixels (Width x Height - Portrait Orientation)**.  **Important Considerations:**  *   **Reference Only:** These are *fixed pixel values* for the specified reference resolution. In a real implementation (e.g., using Unity Canvas), you would use anchors, pivots, and potentially scaling components (like Canvas Scaler UI Scale Mode) to ensure the UI adapts correctly to different screen sizes and aspect ratios. *   **Origin Point:** Assume the (0, 0) coordinate is the **bottom-left** corner of the screen, common in some UI systems, or **top-left** (common in others - I will specify based on typical Unity Canvas usage: **(0,0) is Bottom-Left, (1080, 1920) is Top-Right** unless stated otherwise). Positions usually refer to the object's **pivot point** (often the center, unless specified). *   **Font Sizes:** Pixel sizes for fonts are approximate and depend heavily on the specific font file used. *   **Actors:** Actors like Cues and Effects have positions that change dynamically or are instantiated at specific world/UI coordinates.  ---  **A. Start Screen (1080x1920)**  *   **Widget:** `Title Text` (e.g., "RHYTHM CHEF: BEAT BITES")     *   **Position (Pivot: Center):** (540, 1600) `(Center X, ~83% Height)`     *   **Dimensions:** Auto-sized by text, constrained if needed.     *   **Font Size:** 90px     *   **Anchor Preset (Unity):** Top-Center *   **Widget:** `Subtitle Text` (e.g., "(Core Demo)")     *   **Position (Pivot: Center):** (540, 1480) `(Center X, below Title)`     *   **Dimensions:** Auto-sized by text.     *   **Font Size:** 40px     *   **Anchor Preset (Unity):** Top-Center *   **Widget:** `Start Button`     *   **Position (Pivot: Center):** (540, 400) `(Center X, ~21% Height)`     *   **Dimensions:** 450px (Width) x 150px (Height)     *   **Anchor Preset (Unity):** Bottom-Center *   **Widget:** `Start Button Text` (e.g., "[ START ]")     *   **Position:** Centered within the Start Button.     *   **Font Size:** 60px  ---  **B. Gameplay Screen (1080x1920)**  *   **Widget:** `Score Text Label` (e.g., "SCORE:")     *   **Position (Pivot: Top-Left):** (40, 1880) `(Padding Left, Padding Top)`     *   **Dimensions:** Auto-sized by text.     *   **Font Size:** 50px     *   **Anchor Preset (Unity):** Top-Left *   **Widget:** `Score Value Text` (e.g., "000")     *   **Position (Pivot: Top-Left):** (200, 1880) `(Right of Label, Same Top)`     *   **Dimensions:** Auto-sized by text (allow space for growth).     *   **Font Size:** 50px     *   **Anchor Preset (Unity):** Top-Left *   **Widget:** `Combo Text Label` (e.g., "COMBO:")     *   **Position (Pivot: Top-Right):** (900, 1880) `(Approx position, adjust based on Value width)`     *   **Dimensions:** Auto-sized by text.     *   **Font Size:** 50px     *   **Anchor Preset (Unity):** Top-Right *   **Widget:** `Combo Value Text` (e.g., "0x")     *   **Position (Pivot: Top-Right):** (1040, 1880) `(Padding Right, Same Top)`     *   **Dimensions:** Auto-sized by text (allow space for growth).     *   **Font Size:** 50px     *   **Anchor Preset (Unity):** Top-Right *   **Area:** `Cue Travel Area` (Logical, no visual widget)     *   **Bounds:** Approx X = Center (e.g., 540), Y from 1800 (Spawn) down to ~200 (Despawn below target). *   **Widget:** `Target Zone Visual` (The horizontal bar indicator)     *   **Position (Pivot: Center):** (540, 400) `(Center X, Defined Y)`     *   **Dimensions:** 900px (Width) x 80px (Height)     *   **Anchor Preset (Unity):** Position manually or Bottom-Center with Y offset.     *   **Note:** The *logical* hit detection center Y might be exactly 400. The timing windows (`perfectWindow`, `okWindow`) define the tolerance around this point in *time*, not necessarily pixels vertically (though they are related via cue speed). *   **Actor:** `Cue Object` (Visual representation)     *   **Position:** Dynamic. Spawns near Y=1800, travels downwards to Y=400 (target). X is typically centered (540).     *   **Dimensions:** 80px (Width) x 80px (Height) (Example, adjust for visual clarity) *   **Widget:** `Feedback Text` (e.g., "Perfect!", "Miss!")     *   **Position (Pivot: Center):** (540, 600) `(Center X, Above Target Zone)`     *   **Dimensions:** Auto-sized by text.     *   **Font Size:** 70px     *   **Anchor Preset (Unity):** Position manually or relative to Target Zone. (Appears temporarily). *   **Actor:** `Hit/Miss Feedback Effect` (Particles/Animation)     *   **Position:** Instantiated at the Cue's position *when* the hit/miss occurs (approx X=540, Y=400).     *   **Dimensions:** Dynamic based on the effect design (e.g., expands to 150x150px briefly).  ---  **C. End Screen (1080x1920)**  *   **Widget:** `Completion Text` (e.g., "SEQUENCE COMPLETE!")     *   **Position (Pivot: Center):** (540, 1200) `(Center X, ~62% Height)`     *   **Dimensions:** Auto-sized by text.     *   **Font Size:** 70px     *   **Anchor Preset (Unity):** Center *   **Widget:** `Final Score Text` (Optional, e.g., "Final Score: 025")     *   **Position (Pivot: Center):** (540, 1050) `(Center X, below Completion text)`     *   **Dimensions:** Auto-sized by text.     *   **Font Size:** 50px     *   **Anchor Preset (Unity):** Center *   **Widget:** `Restart Button`     *   **Position (Pivot: Center):** (540, 400) `(Center X, ~21% Height - same as Start Button)`     *   **Dimensions:** 450px (Width) x 150px (Height)     *   **Anchor Preset (Unity):** Bottom-Center *   **Widget:** `Restart Button Text` (e.g., "[ RESTART ]")     *   **Position:** Centered within the Restart Button.     *   **Font Size:** 60px  ---  Remember to implement proper UI scaling and anchoring in your chosen game engine to handle various device resolutions effectively beyond this 1080x1920 reference.
-Make the look and feel 100 times better, employ procedural graphics and emojis as sprites.
+Make the look and feel 100 times better, employ procedural graphics and emojis as sprites.
+Act as graphical effect engineer and add many more cool effect to the game play, make it explode with cool effects, particles etc., background effect ...