Spaces:

LukasBe
/

game-4-rhytm-chef

Running

App Files Files Community

LukasBe commited on May 5

Commit

6b10b93

verified ·

1 Parent(s): 39c16ad

Add 3 files

Browse files

Files changed (3) hide show

README.md +6 -4
index.html +690 -19
prompts.txt +2 -0

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Game 4 Rhytm Chef
-emoji: 🚀
-colorFrom: yellow
 colorTo: yellow
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: game-4-rhytm-chef
+emoji: 🐳
+colorFrom: blue
 colorTo: yellow
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,690 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Rhythm Chef: Beat Bites Deluxe</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <style>
+        @keyframes moveDown {
+            0% { transform: translateY(-100px); }
+            100% { transform: translateY(calc(100vh - 200px)); }
+        }
+        .cue {
+            animation: moveDown var(--duration) linear forwards;
+            transition: all 0.1s ease;
+        }
+        .hit-effect {
+            animation: scaleFade 0.5s ease-out forwards;
+        }
+        @keyframes scaleFade {
+            0% { transform: scale(0.8); opacity: 1; }
+            100% { transform: scale(1.5); opacity: 0; }
+        }
+        .feedback-text {
+            animation: fadeUp 1s ease-out forwards;
+        }
+        @keyframes fadeUp {
+            0% { transform: translateY(0) scale(1); opacity: 1; }
+            100% { transform: translateY(-50px) scale(1.2); opacity: 0; }
+        }
+        .combo-text {
+            animation: pulse 0.5s ease infinite alternate;
+        }
+        @keyframes pulse {
+            0% { transform: scale(1); }
+            100% { transform: scale(1.1); }
+        }
+        #gameArea {
+            touch-action: manipulation;
+            background: radial-gradient(circle at center, #1a202c 0%, #111827 100%);
+        }
+        .kitchen-counter {
+            background: linear-gradient(to bottom, #8B5A2B 0%, #A67C52 100%);
+            box-shadow: 0 -10px 20px rgba(0,0,0,0.3);
+        }
+        .particle {
+            position: absolute;
+            pointer-events: none;
+            will-change: transform, opacity;
+        }
+        .glow {
+            filter: drop-shadow(0 0 8px currentColor);
+        }
+        .score-glow {
+            text-shadow: 0 0 10px rgba(255, 215, 0, 0.7);
+        }
+        .perfect-hit {
+            animation: perfectGlow 0.5s ease-out forwards;
+        }
+        @keyframes perfectGlow {
+            0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7); }
+            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); }
+        }
+    </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">
+            <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">
+            START COOKING
+        </button>
+        <div class="absolute bottom-8 text-gray-400 text-sm">
+            Tap the beat when ingredients reach the counter
+        </div>
+    </div>
+    <!-- Game Screen -->
+    <div id="gameScreen" class="fixed inset-0 hidden flex flex-col">
+        <!-- Score Display -->
+        <div class="flex justify-between px-8 pt-6">
+            <div class="text-4xl font-bold score-glow">
+                🏆 <span id="score">0</span>
+            </div>
+            <div id="comboContainer" class="text-4xl font-bold combo-text hidden">
+                🔥 <span id="combo">0</span>x
+            </div>
+        </div>
+        <!-- Game Area -->
+        <div id="gameArea" class="flex-1 relative overflow-hidden">
+            <!-- Floating particles background -->
+            <div id="particles"></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>
+            </div>
+            <!-- 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>
+        </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">
+            <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>
+            <div class="text-2xl mb-8">Max Combo: <span id="maxCombo" class="text-yellow-300">0</span>x</div>
+            <button id="restartButton" 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">
+                COOK AGAIN
+            </button>
+        </div>
+    </div>
+    <script>
+        // Game state
+        const gameState = {
+            score: 0,
+            combo: 0,
+            maxCombo: 0,
+            isPlaying: false,
+            bpm: 128,
+            cueSpeed: 2, // seconds to reach target
+            perfectWindow: 80, // ms
+            goodWindow: 160, // ms,
+            ingredients: ['🍅', '🧀', '🍄', '🥩', '🥬', '🍞', '🥚', '🦐', '🌽', '🧅'],
+            dishes: ['🍕', '🍔', '🍣', '🥘', '🍛', '🍜', '🌮', '🥗', '🍲', '🍝'],
+            sequence: [
+                { beat: 1, type: 'tap' },
+                { beat: 2, type: 'tap' },
+                { beat: 3, type: 'tap' },
+                { beat: 4, type: 'tap' },
+                { beat: 5.5, type: 'tap' },
+                { beat: 6.5, type: 'tap' },
+                { beat: 7, type: 'tap' },
+                { beat: 8, type: 'tap' },
+                { beat: 9, type: 'tap' },
+                { beat: 10, type: 'tap' },
+                { beat: 11.5, type: 'tap' },
+                { beat: 12.5, type: 'tap' },
+                { beat: 13, type: 'tap' },
+                { beat: 14, type: 'tap' },
+                { beat: 15, type: 'tap' },
+                { beat: 16, type: 'tap' }
+            ],
+            activeCues: [],
+            sequenceStartTime: 0,
+            currentSequenceIndex: 0,
+            audioContext: null,
+            metronomeInterval: null,
+            backgroundParticles: []
+        };
+        // DOM elements
+        const startScreen = document.getElementById('startScreen');
+        const gameScreen = document.getElementById('gameScreen');
+        const endScreen = document.getElementById('endScreen');
+        const startButton = document.getElementById('startButton');
+        const restartButton = document.getElementById('restartButton');
+        const gameArea = document.getElementById('gameArea');
+        const targetZone = document.getElementById('targetZone');
+        const feedbackText = document.getElementById('feedbackText');
+        const scoreDisplay = document.getElementById('score');
+        const comboDisplay = document.getElementById('combo');
+        const comboContainer = document.getElementById('comboContainer');
+        const finalScoreDisplay = document.getElementById('finalScore');
+        const maxComboDisplay = document.getElementById('maxCombo');
+        const finalDishDisplay = document.getElementById('finalDish');
+        const particlesContainer = document.getElementById('particles');
+        // Initialize audio context
+        function initAudio() {
+            try {
+                gameState.audioContext = new (window.AudioContext || window.webkitAudioContext)();
+            } catch (e) {
+                console.warn('Web Audio API not supported');
+            }
+        }
+        // Play a sound
+        function playSound(frequency, duration, type = 'sine') {
+            if (!gameState.audioContext) return;
+            const oscillator = gameState.audioContext.createOscillator();
+            const gainNode = gameState.audioContext.createGain();
+            oscillator.connect(gainNode);
+            gainNode.connect(gameState.audioContext.destination);
+            oscillator.type = type;
+            oscillator.frequency.value = frequency;
+            gainNode.gain.value = 0.1;
+            oscillator.start();
+            oscillator.stop(gameState.audioContext.currentTime + duration);
+        }
+        // Create background particles
+        function createParticles() {
+            // Clear existing particles
+            particlesContainer.innerHTML = '';
+            gameState.backgroundParticles = [];
+            // Create new particles
+            for (let i = 0; i < 30; i++) {
+                createParticle(true);
+            }
+        }
+        function createParticle(isBackground = false) {
+            const particle = document.createElement('div');
+            particle.className = 'particle';
+            // Random properties
+            const size = Math.random() * 6 + 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 color = `hsl(${Math.random() * 60 + 20}, 70%, 60%)`;
+            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`;
+            if (isBackground) {
+                particle.style.position = 'absolute';
+                particlesContainer.appendChild(particle);
+                gameState.backgroundParticles.push(particle);
+            }
+            return particle;
+        }
+        // Create floating animation
+        const style = document.createElement('style');
+        style.innerHTML = `
+            @keyframes float {
+                0% { transform: translate(0, 0) rotate(0deg); opacity: ${Math.random() * 0.3 + 0.1}; }
+                50% { transform: translate(${Math.random() * 100 - 50}px, ${Math.random() * 50 - 25}px) rotate(${Math.random() * 180 - 90}deg); opacity: ${Math.random() * 0.5 + 0.3}; }
+                100% { transform: translate(0, 0) rotate(0deg); opacity: ${Math.random() * 0.3 + 0.1}; }
+            }
+        `;
+        document.head.appendChild(style);
+        // Start metronome
+        function startMetronome() {
+            if (!gameState.audioContext) return;
+            const secondsPerBeat = 60 / gameState.bpm;
+            let nextBeatTime = gameState.audioContext.currentTime;
+            gameState.metronomeInterval = setInterval(() => {
+                playSound(880, 0.05, 'triangle');
+                nextBeatTime += secondsPerBeat;
+            }, secondsPerBeat * 1000);
+        }
+        // Stop metronome
+        function stopMetronome() {
+            if (gameState.metronomeInterval) {
+                clearInterval(gameState.metronomeInterval);
+                gameState.metronomeInterval = null;
+            }
+        }
+        // Create a cue element
+        function createCue() {
+            const cue = document.createElement('div');
+            const ingredient = gameState.ingredients[Math.floor(Math.random() * gameState.ingredients.length)];
+            cue.className = 'cue absolute w-20 h-20 rounded-full flex items-center justify-center text-4xl glow';
+            cue.style.setProperty('--duration', `${gameState.cueSpeed}s`);
+            cue.style.top = '-100px';
+            cue.style.left = `${Math.random() * 60 + 20}%`;
+            cue.textContent = ingredient;
+            // Add to DOM and active cues array
+            gameArea.appendChild(cue);
+            const cueObj = {
+                element: cue,
+                targetTime: Date.now() + gameState.cueSpeed * 1000,
+                hit: false,
+                ingredient: ingredient
+            };
+            gameState.activeCues.push(cueObj);
+            // Remove cue after animation completes
+            setTimeout(() => {
+                if (!cueObj.hit) {
+                    handleMiss(cueObj);
+                }
+            }, gameState.cueSpeed * 1000);
+            return cueObj;
+        }
+        // Show feedback
+        function showFeedback(text, isGood) {
+            feedbackText.textContent = text;
+            feedbackText.className = `absolute left-1/2 transform -translate-x-1/2 text-6xl font-bold text-center glow ${
+                isGood ? 'text-green-400' : 'text-red-400'
+            }`;
+            feedbackText.style.opacity = '1';
+            // Create hit effect
+            if (isGood) {
+                createHitEffect(feedbackText.getBoundingClientRect());
+            }
+            // Hide feedback after delay
+            setTimeout(() => {
+                feedbackText.style.opacity = '0';
+            }, 1000);
+        }
+        // Create hit effect
+        function createHitEffect(rect) {
+            const colors = ['#FFD700', '#FF6347', '#7FFFD4', '#FF69B4', '#9370DB'];
+            for (let i = 0; i < 15; i++) {
+                const particle = document.createElement('div');
+                particle.className = 'particle';
+                const size = Math.random() * 12 + 4;
+                const color = colors[Math.floor(Math.random() * colors.length)];
+                const angle = Math.random() * Math.PI * 2;
+                const distance = Math.random() * 50 + 20;
+                const duration = Math.random() * 1 + 0.5;
+                particle.style.width = `${size}px`;
+                particle.style.height = `${size}px`;
+                particle.style.left = `${rect.left + rect.width / 2}px`;
+                particle.style.top = `${rect.top + rect.height / 2}px`;
+                particle.style.backgroundColor = color;
+                particle.style.borderRadius = '50%';
+                particle.style.opacity = '0.8';
+                particle.style.transform = `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}`;
+                document.body.appendChild(particle);
+                setTimeout(() => {
+                    particle.style.opacity = '0';
+                    particle.style.transform += ` scale(0.5)`;
+                    setTimeout(() => particle.remove(), duration * 1000);
+                }, 10);
+            }
+        }
+        // Handle successful hit
+        function handleHit(cue, accuracy) {
+            if (cue.hit) return;
+            cue.hit = true;
+            // Visual feedback on the cue
+            cue.element.classList.add('perfect-hit');
+            cue.element.style.transform = 'scale(1.2)';
+            setTimeout(() => {
+                cue.element.remove();
+            }, 200);
+            // Determine hit quality
+            let points = 0;
+            let feedback = '';
+            let soundFreq = 0;
+            if (Math.abs(accuracy) <= gameState.perfectWindow) {
+                points = 100;
+                feedback = 'PERFECT! ✨';
+                soundFreq = 1046.50; // C note
+                playSound(soundFreq, 0.2, 'sine');
+                playSound(soundFreq/2, 0.3, 'sine');
+            } else if (Math.abs(accuracy) <= gameState.goodWindow) {
+                points = 60;
+                feedback = 'GREAT! 👍';
+                soundFreq = 783.99; // G note
+                playSound(soundFreq, 0.15, 'square');
+            } else {
+                points = 30;
+                feedback = 'GOOD 👌';
+                soundFreq = 523.25; // C note lower
+                playSound(soundFreq, 0.1, 'sawtooth');
+            }
+            // Update score and combo
+            gameState.score += points;
+            gameState.combo += 1;
+            if (gameState.combo > gameState.maxCombo) {
+                gameState.maxCombo = gameState.combo;
+            }
+            scoreDisplay.textContent = gameState.score;
+            comboDisplay.textContent = gameState.combo;
+            // Show combo if > 1
+            if (gameState.combo > 1) {
+                comboContainer.classList.remove('hidden');
+            }
+            // Show feedback
+            showFeedback(feedback, true);
+            // Create ingredient transformation effect
+            createIngredientEffect(cue);
+        }
+        // Create ingredient transformation effect
+        function createIngredientEffect(cue) {
+            const rect = cue.element.getBoundingClientRect();
+            const effect = document.createElement('div');
+            effect.className = 'absolute text-4xl glow';
+            effect.style.left = `${rect.left}px`;
+            effect.style.top = `${rect.top}px`;
+            effect.style.width = `${rect.width}px`;
+            effect.style.height = `${rect.height}px`;
+            effect.style.display = 'flex';
+            effect.style.alignItems = 'center';
+            effect.style.justifyContent = 'center';
+            effect.textContent = cue.ingredient;
+            document.body.appendChild(effect);
+            // Animate transformation
+            setTimeout(() => {
+                effect.style.transition = 'all 0.5s ease-out';
+                effect.style.transform = 'translateY(-30px) scale(1.5)';
+                effect.style.opacity = '0';
+                // Change to a cooked version
+                const cookedItems = {
+                    '🍅': '🍅', // tomato stays tomato
+                    '🧀': '🧀', // cheese stays cheese
+                    '🍄': '🍄', // mushroom stays mushroom
+                    '🥩': '🍖', // raw meat -> cooked meat
+                    '🥬': '🥗', // lettuce -> salad
+                    '🍞': '🍞', // bread stays bread
+                    '🥚': '🍳', // egg -> fried egg
+                    '🦐': '🍤', // shrimp -> fried shrimp
+                    '🌽': '🍿', // corn -> popcorn
+                    '🧅': '🧅' // onion stays onion
+                };
+                setTimeout(() => {
+                    effect.textContent = cookedItems[cue.ingredient] || '🍽️';
+                }, 250);
+                setTimeout(() => {
+                    effect.remove();
+                }, 1000);
+            }, 10);
+        }
+        // Handle miss
+        function handleMiss(cue) {
+            if (cue.hit) return;
+            cue.hit = true;
+            if (cue.element) {
+                cue.element.classList.add('opacity-50');
+                cue.element.style.transform = 'scale(0.8)';
+                setTimeout(() => {
+                    cue.element.remove();
+                }, 500);
+            }
+            // Reset combo
+            gameState.combo = 0;
+            comboDisplay.textContent = '0';
+            comboContainer.classList.add('hidden');
+            // Show feedback
+            showFeedback('MISS! 😩', false);
+            playSound(110, 0.3, 'sawtooth'); // Low buzz for miss
+            // Create break effect
+            if (cue.element) {
+                const rect = cue.element.getBoundingClientRect();
+                for (let i = 0; i < 5; 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.opacity = '0.7';
+                    piece.style.transition = 'all 0.5s ease-out';
+                    document.body.appendChild(piece);
+                    setTimeout(() => {
+                        piece.style.opacity = '0';
+                        piece.style.transform += ` translateY(30px)`;
+                        setTimeout(() => piece.remove(), 500);
+                    }, 10);
+                }
+            }
+        }
+        // Start game sequence
+        function startSequence() {
+            gameState.score = 0;
+            gameState.combo = 0;
+            gameState.maxCombo = 0;
+            gameState.isPlaying = true;
+            gameState.activeCues = [];
+            gameState.currentSequenceIndex = 0;
+            gameState.sequenceStartTime = Date.now();
+            scoreDisplay.textContent = '0';
+            comboDisplay.textContent = '0';
+            comboContainer.classList.add('hidden');
+            // Create background particles
+            createParticles();
+            // Start metronome
+            if (gameState.audioContext) {
+                startMetronome();
+            }
+            // Start spawning cues
+            spawnNextCue();
+        }
+        // Spawn next cue in sequence
+        function spawnNextCue() {
+            if (gameState.currentSequenceIndex >= gameState.sequence.length) {
+                endSequence();
+                return;
+            }
+            const currentBeat = gameState.sequence[gameState.currentSequenceIndex].beat;
+            const beatsPerSecond = gameState.bpm / 60;
+            const beatTime = currentBeat / beatsPerSecond * 1000;
+            // Calculate delay until this cue should spawn
+            const spawnDelay = beatTime - (Date.now() - gameState.sequenceStartTime) - (gameState.cueSpeed * 1000);
+            if (spawnDelay <= 0) {
+                // We're behind schedule, spawn immediately
+                createCue();
+                gameState.currentSequenceIndex++;
+                spawnNextCue();
+            } else {
+                // Schedule next cue
+                setTimeout(() => {
+                    createCue();
+                    gameState.currentSequenceIndex++;
+                    spawnNextCue();
+                }, spawnDelay);
+            }
+        }
+        // End sequence
+        function endSequence() {
+            gameState.isPlaying = false;
+            stopMetronome();
+            // Clear background particles
+            particlesContainer.innerHTML = '';
+            // Determine final dish based on score
+            const dishIndex = Math.min(
+                Math.floor(gameState.score / 500),
+                gameState.dishes.length - 1
+            );
+            finalDishDisplay.textContent = gameState.dishes[dishIndex];
+            // Wait for last cues to finish
+            setTimeout(() => {
+                finalScoreDisplay.textContent = gameState.score;
+                maxComboDisplay.textContent = gameState.maxCombo;
+                endScreen.classList.remove('hidden');
+                // Celebration particles
+                for (let i = 0; i < 50; i++) {
+                    setTimeout(() => {
+                        createParticle();
+                    }, i * 50);
+                }
+            }, gameState.cueSpeed * 1000);
+        }
+        // Handle tap input
+        function handleTap() {
+            if (!gameState.isPlaying) return;
+            const now = Date.now();
+            let closestCue = null;
+            let closestDiff = Infinity;
+            // Find the closest active cue to target time
+            for (const cue of gameState.activeCues) {
+                if (!cue.hit) {
+                    const diff = now - cue.targetTime;
+                    if (Math.abs(diff) < Math.abs(closestDiff)) {
+                        closestDiff = diff;
+                        closestCue = cue;
+                    }
+                }
+            }
+            // Visual feedback on target zone
+            targetZone.classList.add('perfect-hit');
+            setTimeout(() => {
+                targetZone.classList.remove('perfect-hit');
+            }, 300);
+            // Check if tap was close enough to any cue
+            if (closestCue && Math.abs(closestDiff) <= gameState.goodWindow * 2) {
+                handleHit(closestCue, closestDiff);
+            } else {
+                // Penalize random taps
+                gameState.combo = 0;
+                comboDisplay.textContent = '0';
+                comboContainer.classList.add('hidden');
+                showFeedback('TOO EARLY! 👎', false);
+                playSound(110, 0.3, 'square');
+            }
+        }
+        // Initialize game
+        function initGame() {
+            initAudio();
+            // Start button
+            startButton.addEventListener('click', () => {
+                startScreen.classList.add('opacity-0');
+                setTimeout(() => {
+                    startScreen.classList.add('hidden');
+                    gameScreen.classList.remove('hidden');
+                    startSequence();
+                }, 500);
+            });
+            // Restart button
+            restartButton.addEventListener('click', () => {
+                endScreen.classList.add('hidden');
+                startSequence();
+            });
+            // Tap input
+            gameArea.addEventListener('click', handleTap);
+            // Touch support
+            gameArea.addEventListener('touchstart', (e) => {
+                e.preventDefault();
+                handleTap();
+            });
+        }
+        // Start the game when ready
+        window.addEventListener('DOMContentLoaded', initGame);
+    </script>
+<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=LukasBe/game-4-rhytm-chef" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
+</html>

prompts.txt ADDED Viewed

	@@ -0,0 +1,2 @@


1	+ 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.
2	+ Make the look and feel 100 times better, employ procedural graphics and emojis as sprites.