// Initialize parent div first const parentDiv = document.getElementById('renderDiv'); let canvas = document.getElementById('threeRenderCanvas'); // Create and show title screen function showTitleScreen() { const titleScreen = document.createElement('div'); titleScreen.style.position = 'absolute'; titleScreen.style.top = '0'; titleScreen.style.left = '0'; titleScreen.style.width = '100%'; titleScreen.style.height = '100%'; titleScreen.style.backgroundImage = 'url(https://play.rosebud.ai/assets/krabbypattymakertitlemenuimage.png?PwHu)'; titleScreen.style.backgroundSize = 'cover'; titleScreen.style.backgroundPosition = 'center'; titleScreen.style.backgroundColor = 'rgba(0, 0, 0, 0.7)'; titleScreen.style.display = 'flex'; titleScreen.style.flexDirection = 'column'; titleScreen.style.justifyContent = 'center'; titleScreen.style.alignItems = 'center'; titleScreen.style.zIndex = '3000'; // Create title container for both title and tagline const titleContainer = document.createElement('div'); titleContainer.style.textAlign = 'center'; titleContainer.style.marginBottom = '30px'; // Add title const title = document.createElement('h1'); title.textContent = 'Krabby Patty Maker'; title.style.color = '#ffeb3b'; title.style.fontSize = '48px'; title.style.marginBottom = '10px'; title.style.fontFamily = 'Arial, sans-serif'; title.style.textShadow = '2px 2px 4px rgba(0,0,0,0.5)'; // Add tagline const tagline = document.createElement('div'); tagline.textContent = 'Fan Made. Created by Brain Joose'; tagline.style.color = '#ffffff'; tagline.style.fontSize = '18px'; tagline.style.fontFamily = 'Arial, sans-serif'; tagline.style.opacity = '0.8'; // Add both elements to the container titleContainer.appendChild(title); titleContainer.appendChild(tagline); // Add instructions const instructions = document.createElement('div'); instructions.style.color = 'white'; instructions.style.fontSize = '18px'; instructions.style.marginBottom = '40px'; instructions.style.textAlign = 'center'; instructions.style.padding = '0 20px'; // Create start button const startButton = document.createElement('button'); startButton.textContent = 'Start Game'; startButton.style.padding = '15px 30px'; startButton.style.fontSize = '24px'; startButton.style.backgroundColor = '#4CAF50'; startButton.style.color = 'white'; startButton.style.border = 'none'; startButton.style.borderRadius = '10px'; startButton.style.cursor = 'pointer'; startButton.style.transition = 'transform 0.2s'; startButton.addEventListener('mouseover', () => { startButton.style.transform = 'scale(1.1)'; }); startButton.addEventListener('mouseout', () => { startButton.style.transform = 'scale(1)'; }); startButton.addEventListener('click', () => { titleScreen.remove(); gameStarted = true; // Set game started flag startGame(); }); // Create instructions button const instructionsButton = document.createElement('button'); instructionsButton.textContent = 'Instructions'; instructionsButton.style.padding = '15px 30px'; instructionsButton.style.fontSize = '24px'; instructionsButton.style.backgroundColor = '#2196F3'; instructionsButton.style.color = 'white'; instructionsButton.style.border = 'none'; instructionsButton.style.borderRadius = '10px'; instructionsButton.style.cursor = 'pointer'; instructionsButton.style.marginTop = '20px'; instructionsButton.style.transition = 'transform 0.2s'; instructionsButton.addEventListener('mouseover', () => { instructionsButton.style.transform = 'scale(1.1)'; }); instructionsButton.addEventListener('mouseout', () => { instructionsButton.style.transform = 'scale(1)'; }); instructionsButton.addEventListener('click', () => { const instructionsModal = document.createElement('div'); instructionsModal.style.position = 'absolute'; instructionsModal.style.top = '50%'; instructionsModal.style.left = '50%'; instructionsModal.style.transform = 'translate(-50%, -50%)'; instructionsModal.style.backgroundColor = 'rgba(0, 0, 0, 0.95)'; instructionsModal.style.color = 'white'; instructionsModal.style.padding = '20px 30px'; instructionsModal.style.borderRadius = '20px'; instructionsModal.style.zIndex = '4000'; instructionsModal.style.maxWidth = '80%'; instructionsModal.style.maxHeight = '80vh'; instructionsModal.style.overflow = 'auto'; instructionsModal.innerHTML = `

How to Play

Make burgers according to customer orders!

Movement Controls:
🔄 A/D - Look left/right
🏃 W/S - Move forward/backward
🖱️ Right click & drag - Move camera around table
⚙️ Mouse wheel - Zoom in/out

Gameplay:
🖱️ Drag ingredients to build your burger
🔥 Cook patties on the grill
🍅 Add toppings in the correct order
⏰ Complete orders before time runs out
❤️ Don't lose all your lives!

Warning:
🔥 Burnt patties earn no money!
⏭️ Skipping orders costs money and a life!

Tips:
🍖 Weirdos like raw burgers but they still pay.
💰 Everyone pays for a cooked burger!

Remember:
🗑️ You'll have to trash mistakes to remove them from the plate
💸 But trashing food will cost you money!

`; titleScreen.appendChild(instructionsModal); document.getElementById('closeInstructions').addEventListener('click', () => { instructionsModal.remove(); }); }); titleScreen.appendChild(titleContainer); titleScreen.appendChild(startButton); titleScreen.appendChild(instructionsButton); parentDiv.appendChild(titleScreen); // Hide game UI elements initially if (hudContainer) hudContainer.style.display = 'none'; if (sauceButtonsContainer) sauceButtonsContainer.style.display = 'none'; } // Function to start the game function startGame() { // Reset tutorial state when starting new game isFirstBurger = true; currentTutorialStep = 0; // Play start sound const startSound = new Audio('https://play.rosebud.ai/assets/Spongebob - Are You Feeling it Now Mr. Krabs - QuickSounds.com.mp3?OxbD'); startSound.volume = 0.6; startSound.play(); // Initialize and play background music if not already playing if (!backgroundMusic) { backgroundMusic = new Audio('https://play.rosebud.ai/assets/sugar-high-cartoon-270770.mp3?GdUu'); backgroundMusic.loop = true; backgroundMusic.volume = 0.2; } // Only play if it's not already playing if (backgroundMusic.paused) { backgroundMusic.play().catch(error => { console.log("Background music playback prevented:", error); }); } // Show game UI elements if (hudContainer) hudContainer.style.display = 'block'; if (sauceButtonsContainer) sauceButtonsContainer.style.display = 'flex'; // Initialize game state playerScore = 0; playerLives = 5; currentLevel = 1; orderTimeLimit = 60; gameOver = false; lastOrder = null; // Initialize game components initializeBurgerIngredients(); // Start game processes startNewOrder(); // Enable game interactions canvas.addEventListener('mousedown', onMouseDown); canvas.addEventListener('mousemove', onMouseMove); canvas.addEventListener('mouseup', onMouseUp); canvas.addEventListener('mouseleave', onMouseUp); // Add touch event listeners canvas.addEventListener('touchstart', (event) => { event.preventDefault(); const touch = event.touches[0]; onMouseDown(touch); }, { passive: false }); canvas.addEventListener('touchmove', (event) => { event.preventDefault(); const touch = event.touches[0]; onMouseMove(touch); }, { passive: false }); canvas.addEventListener('touchend', (event) => { event.preventDefault(); onMouseUp(); }, { passive: false }); } import * as THREE from 'three'; import { World, NaiveBroadphase, Material, ContactMaterial, Body, Box, Vec3 } from 'https://cdn.jsdelivr.net/npm/cannon-es@0.20.0/dist/cannon-es.js'; import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js'; import { OrbitControls } from 'three/addons/controls/OrbitControls.js'; import { EffectComposer } from 'three/addons/postprocessing/EffectComposer.js'; import { RenderPass } from 'three/addons/postprocessing/RenderPass.js'; import { UnrealBloomPass } from 'three/addons/postprocessing/UnrealBloomPass.js'; import { SMAAPass } from 'three/addons/postprocessing/SMAAPass.js'; // Initialize game variables let assetsLoaded = false; let mixer; let model; let burgerIngredients = []; let selectedSauce = null; // Track currently selected sauce let isFirstBurger = true; // Track if this is the player's first burger let currentTutorialStep = 0; // Track current tutorial step // Tutorial messages configuration const tutorialSteps = [{ message: "👋 Welcome to your first order! Let's make a burger together!", duration: 3000 }, { message: "🍔 Start by grabbing a bottom bun from the right side", duration: 4000 }, { message: "🥩 Next, grab a patty and place it on the grill to cook", duration: 4000 }, { message: "⏰ Watch the patty color change as it cooks!", duration: 4000 }, { message: "🎯 Place ingredients on the plate to build your burger", duration: 4000 }, { message: "💡 Follow the order list in the top-left corner", duration: 4000 }]; // Define cooking states and customer feedback messages globally const cookingStates = ['raw', 'cooked', 'burnt']; const feedbackMessages = { good: [ "Wow! This burger is amazing! 🌟", "Best burger in Bikini Bottom! 🍔", "Delicious! Just like the commercials! 😋", "I'll definitely come back for more! ⭐", "This is better than the Chum Bucket! 🎉", "Now that's a Krabby Patty! 👨‍🍳", "Perfect seasoning! Yummy! 🔥", "This made my day! Thanks! 🎈", "Absolutely fantastic! 🌈", "5 stars! Would recommend! ⭐⭐⭐⭐⭐" ], bad: [ "This is worse than the Chum Bucket! 🤢", "I want my money back! 💢", "My disappointment is immeasurable! 😤", "Is this even food? 🗑️", "I'm calling the health inspector! ⚠️", "This is not a Krabby Patty! 😱", "Did Plankton make this? 🦠", "Mr. Krabs would be ashamed! 🦀", "This is a disaster! ☠️", "Never coming back! 🚫" ] }; let currentOrder = null; let playerScore = 0; let playerLives = 5; let orderTimer = null; let orderTimeLimit = 60; // Time limit in seconds let currentLevel = 1; let lastOrder = null; // Track the last order to prevent repeats let gameOver = false; // Initialize loading manager const loadingManager = new THREE.LoadingManager(); const textureLoader = new THREE.TextureLoader(loadingManager); const gltfLoader = new GLTFLoader(loadingManager); // Define available ingredients for random orders const availableIngredients = { required: ['bun-bottom', 'patty', 'bun-top'], optional: ['cheese', 'lettuce', 'tomato', 'onion'], cookingStates: ['raw', 'cooked', 'burnt'], sauces: { 'ketchup': 'Ketchup', 'mustard': 'Mustard', 'mayonnaise': 'Mayonnaise', 'secret-sauce': 'Secret Sauce' }, cookingLevels: ['raw', 'cooked', 'burnt'] }; // Function to generate a random order // Keep track of past orders const pastOrders = []; const MAX_PAST_ORDERS = 5; // Remember last 5 orders to avoid repeats function generateRandomOrder() { let newOrder; let attempts = 0; let orderIsDuplicate = false; const MAX_ATTEMPTS = 10; do { orderIsDuplicate = false; // Start with required ingredients const ingredients = [...availableIngredients.required]; // Calculate complexity based on score const scoreComplexity = Math.floor(playerScore / 300); // Increased frequency of complexity changes // Determine cooking preference const cookingPreference = availableIngredients.cookingStates[Math.floor(Math.random() * availableIngredients.cookingStates.length)]; const isSimpleOrder = Math.random() < Math.max(0.05, 0.15 - (scoreComplexity * 0.03)); // Calculate number of optional ingredients (increased minimums) let maxOptional = Math.min( Math.floor(3 + (scoreComplexity * 0.7)), // More ingredients with score availableIngredients.optional.length ); // Ensure minimum ingredients based on score const minOptional = Math.min( availableIngredients.optional.length, Math.max(2, Math.floor(1 + scoreComplexity * 0.4)) ); // Random number of optional ingredients (increased range) const numOptional = isSimpleOrder ? minOptional : // Simple orders always use minimum Math.max(minOptional, Math.min(maxOptional, Math.floor(Math.random() * (maxOptional + 1)))); // Shuffle and select optional ingredients const shuffledOptional = [...availableIngredients.optional] .sort(() => Math.random() - 0.5) .slice(0, numOptional); // Insert optional ingredients between patty and top bun const topBun = ingredients.pop(); ingredients.push(...shuffledOptional); // Enhanced sauce logic const baseSauceChance = isSimpleOrder ? 0.6 : 0.9; // Increased base chances const sauceChance = Math.min(0.98, baseSauceChance + (scoreComplexity * 0.08)); const maxSauces = Math.min(4, 1 + Math.floor(scoreComplexity * 0.4)); // More sauces possible const minSauces = Math.min(3, Math.max(1, Math.floor(scoreComplexity * 0.3))); // Minimum sauces based on score // Always add at least one sauce after certain score const guaranteedSauce = scoreComplexity >= 2; let selectedSauces = []; if (guaranteedSauce || Math.random() < sauceChance) { const sauceTypes = Object.keys(availableIngredients.sauces); const numSauces = Math.max( minSauces, Math.min(maxSauces, 1 + Math.floor(Math.random() * (maxSauces + 1))) ); // Add multiple sauces with more variety while (selectedSauces.length < numSauces && sauceTypes.length > selectedSauces.length) { const availableSauces = sauceTypes.filter(sauce => !selectedSauces.includes(sauce)); if (availableSauces.length > 0) { const sauce = availableSauces[Math.floor(Math.random() * availableSauces.length)]; selectedSauces.push(sauce); // Insert sauce at random position between patty and top bun const insertIndex = Math.floor(Math.random() * (ingredients.length - 1)) + 1; ingredients.splice(insertIndex, 0, sauce); } } } // Add cooking requirements const cookingRequirement = cookingPreference; ingredients.push(topBun); // Enhanced points calculation const points = Math.floor( 25 + // Base price for a basic burger (ingredients.length - 3) * 5 + // $5 per extra ingredient (selectedSauces.length * 3) + // $3 per sauce (cookingRequirement === 'well-done' ? 5 : 0) + // $5 bonus for well-done (scoreComplexity * 2) // $2 extra per complexity level ); newOrder = { ingredients: ingredients, points: points, cookingRequirement: cookingRequirement }; // Check if this order is unique compared to past orders if (pastOrders.length > 0) { orderIsDuplicate = pastOrders.some(pastOrder => JSON.stringify(pastOrder.ingredients) === JSON.stringify(newOrder.ingredients) ); } attempts++; } while (orderIsDuplicate && attempts < MAX_ATTEMPTS); // Update past orders list pastOrders.push(newOrder); if (pastOrders.length > MAX_PAST_ORDERS) { pastOrders.shift(); // Remove oldest order } return newOrder; }; // Define sauce types and their properties const sauceTypes = { ketchup: { color: 0xff0000, name: 'Ketchup', url: 'https://play.rosebud.ai/assets/ketchup.png?TRjf' }, mustard: { color: 0xffdb58, name: 'Mustard', url: 'https://play.rosebud.ai/assets/mustard.png?5qPj' }, mayonnaise: { color: 0xfffdd0, name: 'Mayonnaise', url: 'https://play.rosebud.ai/assets/mayonnaise.png?6BV5' }, 'secret-sauce': { color: 0xff9966, name: 'Secret Sauce', url: 'https://play.rosebud.ai/assets/secret%20sauce.png?lwhd' } }; // Physics world setup const world = new World(); world.gravity.set(0, -9.82, 0); world.broadphase = new NaiveBroadphase(); world.solver.iterations = 10; const defaultMaterial = new Material('default'); // Create the grill collision material first const grillCollisionMaterial = new Material('grill'); const defaultContactMaterial = new ContactMaterial( defaultMaterial, defaultMaterial, { friction: 0.95, // Increased friction restitution: 0.01, // Reduced bounce contactEquationStiffness: 1e7, // Reduced stiffness for more stable contact contactEquationRelaxation: 5, // Increased relaxation frictionEquationStiffness: 1e7, frictionEquationRegularizationTime: 5, contactEquationRegularizationTime: 5 } ); world.addContactMaterial(defaultContactMaterial); world.defaultContactMaterial = defaultContactMaterial; // BurgerIngredient class to manage individual ingredients class BurgerIngredient { constructor(textureUrl, size = 5, type = '', color = null) { this.renderOrder = 0; this.type = type; this.cookingState = type === 'patty' ? 'raw' : null; // raw, cooking, verycooked, burnt this.totalCookingTime = 0; // Track total time cooked this.cookingStartTime = 0; this.veryCookedStartTime = 0; this.isFlipped = false; // Three.js setup const geometry = new THREE.PlaneGeometry(size, size); const texture = textureLoader.load(textureUrl); texture.encoding = THREE.sRGBEncoding; // Store textures for different cooking states if (type === 'patty') { this.textures = { raw: textureLoader.load('https://play.rosebud.ai/assets/rawburgerpatty.png?uZHI'), cookedburgerpatty: textureLoader.load('https://play.rosebud.ai/assets/cookedburgerpatty.png?Fd4y'), verycooked: textureLoader.load('https://play.rosebud.ai/assets/verycookedburgerpatty.png?dCem'), burnt: textureLoader.load('https://play.rosebud.ai/assets/burntburgerpatty.png?ZnE4') }; } // Create physics body const shape = new Box(new Vec3(size / 2, 0.1, size / 2)); this.body = new Body({ mass: 0.1, // Reduced mass for better stacking material: world.defaultContactMaterial.materials[0], position: new Vec3(0, 30, 0), linearDamping: 0.95, // Increased damping angularDamping: 0.95, fixedRotation: true, allowSleep: true, // Allow physics body to sleep when stable sleepSpeedLimit: 0.1, // Lower sleep speed threshold sleepTimeLimit: 0.1 // Lower sleep time threshold }); this.body.addShape(shape); this.body.addEventListener('collide', this.onCollide.bind(this)); world.addBody(this.body); // Enhanced material settings for sauces const material = new THREE.MeshStandardMaterial({ map: texture, transparent: true, side: THREE.DoubleSide, alphaTest: 0.5, depthWrite: false, roughness: 0.3, metalness: 0.1, depthTest: true, blending: THREE.NormalBlending, opacity: 0.9 }); this.mesh = new THREE.Mesh(geometry, material); this.mesh.castShadow = true; this.mesh.receiveShadow = true; this.mesh.renderOrder = 1; // Ensure ingredients render above grill this.isPickedUp = false; this.isDragging = false; // Load sound effects this.flipSound = new Audio('https://play.rosebud.ai/assets/flippattysound.MP3?ZLdH'); this.flipSound.volume = 0.3; this.sizzleSound = new Audio('https://play.rosebud.ai/assets/grillsizzlesound.MP3?u7tB'); this.sizzleSound.volume = 0.3; } isOnPlate() { const plateCenter = new THREE.Vector3(2, 21.01, -30); // Plate center coordinates const plateRadius = 3.5; // Plate radius (matching plate collision shape) const distance = new THREE.Vector2( this.mesh.position.x - plateCenter.x, this.mesh.position.z - plateCenter.z ).length(); return ( distance <= plateRadius && // Within plate radius Math.abs(this.mesh.position.y - plateCenter.y) < 5 // Within reasonable height range ); } isOnGrill() { // More precise grill position check (matching the visual grill surface) const onGrill = ( this.mesh.position.x >= -17.5 && // Left edge of grill this.mesh.position.x <= -2.5 && // Right edge of grill this.mesh.position.z >= -35 && // Back edge of grill this.mesh.position.z <= -25 && // Front edge of grill this.mesh.position.y >= 21.8 // Higher minimum height check ); // Additional height enforcement for ingredients on grill if (onGrill) { this.body.position.y = Math.max(this.body.position.y, 21.95); this.mesh.position.y = Math.max(this.mesh.position.y, 21.95); } if (onGrill && this.body.position.y < 21.55) { this.body.position.y = 21.55; this.body.velocity.y = Math.max(0, this.body.velocity.y); this.body.force.y = 0; } return onGrill; } startCooking() { if (this.type === 'patty') { // Start cooking from current state this.cookingStartTime = Date.now(); if (this.cookingState === 'raw') { this.cookingState = 'cooking'; } this.sizzleSound.loop = true; this.sizzleSound.play(); } } stopCooking() { if (this.type === 'patty') { // Store the current cooking progress if (this.cookingStartTime > 0) { const currentCookTime = (Date.now() - this.cookingStartTime) / 1000; this.totalCookingTime += currentCookTime; } this.cookingStartTime = 0; this.sizzleSound.pause(); this.sizzleSound.currentTime = 0; } } flip() { // Removed flip requirement - cooking happens automatically } updateCookingState() { if (this.type !== 'patty') return; const onGrill = this.isOnGrill(); if (onGrill) { if (!this.sizzleSound.playing) { this.sizzleSound.loop = true; this.sizzleSound.play(); } if (this.cookingState === 'raw') { this.startCooking(); } // Calculate cooking time including previous cooking const currentCookTime = (Date.now() - this.cookingStartTime) / 1000; this.totalCookingTime += currentCookTime; // Ensure sound is playing while cooking if (this.cookingState === 'cooking' || this.cookingState === 'verycooked') { if (!this.sizzleSound.playing) { this.sizzleSound.loop = true; this.sizzleSound.play(); } } // Update cooking progress based on total time // Remove duplicate declaration and just use the value from above this.totalCookingTime = (Date.now() - this.cookingStartTime) / 1000; // First transition: raw to cooking (after 4 seconds) if (this.cookingState === 'raw' && this.totalCookingTime >= 3) { this.mesh.material.map = this.textures.cookedburgerpatty; this.mesh.material.needsUpdate = true; this.cookingState = 'cooking'; } // Second transition: cooking to very cooked else if (this.totalCookingTime >= 6 && this.cookingState === 'cooking') { this.mesh.material.map = this.textures.verycooked; this.mesh.material.needsUpdate = true; this.cookingState = 'verycooked'; this.veryCookedStartTime = Date.now(); } // Check for burning if in very cooked state if (this.cookingState === 'verycooked') { const veryCookedElapsedTime = (Date.now() - this.veryCookedStartTime) / 1000; if (veryCookedElapsedTime >= 3) { // Transition to burnt state this.mesh.material.map = this.textures.burnt; this.mesh.material.needsUpdate = true; this.cookingState = 'burnt'; this.sizzleSound.pause(); this.sizzleSound.currentTime = 0; } } } else { // Handle removal from grill if (this.sizzleSound.playing || !this.sizzleSound.paused) { this.sizzleSound.pause(); this.sizzleSound.currentTime = 0; } } } updateFacing(camera) { // Keep the mesh aligned with the body and maintain its vertical orientation const up = new THREE.Vector3(0, 1, 0); const lookAtPos = new THREE.Vector3(); lookAtPos.copy(this.mesh.position); lookAtPos.y += 1; this.mesh.up.copy(up); this.mesh.lookAt(lookAtPos); // Rotate only around Y-axis to keep ingredients flat const euler = new THREE.Euler(0, camera.rotation.y, 0, 'XYZ'); this.mesh.setRotationFromEuler(euler); } detectGarbageCollision() { // Check if ingredient is near the garbage bin const binPosition = new THREE.Vector3(-20, 6, -70); const distance = this.mesh.position.distanceTo(binPosition); if (distance < 10) { // If within 10 units of the bin // Remove from scene and physics world scene.remove(this.mesh); world.removeBody(this.body); // Remove from burgerIngredients array const index = burgerIngredients.indexOf(this); if (index > -1) { burgerIngredients.splice(index, 1); } return true; } return false; } setPosition(x, y, z) { this.mesh.position.set(x, y, z); this.body.position.set(x, y, z); } onCollide(event) { if (!this.isDragging) { // Sound effects disabled for now } } update() { if (!this.isDragging) { // Update visual position to match physics with height constraints const minGrillHeight = 22.1; // Increased minimum height to stay above grill if (this.isOnGrill()) { // Strictly enforce minimum height on grill this.body.position.y = Math.max(this.body.position.y, minGrillHeight); this.mesh.position.y = Math.max(this.mesh.position.y, minGrillHeight); // Strong constraints to prevent clipping this.body.velocity.y = Math.max(0, this.body.velocity.y); this.body.force.y = 0; this.body.angularVelocity.setZero(); // Keep the ingredient flat this.body.quaternion.setFromAxisAngle(new Vec3(1, 0, 0), 0); // Additional position correction during camera movement if (this.body.position.y < minGrillHeight + 0.1) { this.body.position.y = minGrillHeight + 0.1; } // Ensure proper rotation on grill this.body.angularDamping = 0.9; this.body.linearDamping = 0.8; } this.mesh.position.copy(this.body.position); this.mesh.quaternion.copy(this.body.quaternion); // Only cleanup if not a patty or if extremely out of bounds if (this.shouldCleanup()) { // Special handling for patties if (this.type === 'patty') { // Only cleanup if extremely out of bounds if (this.mesh.position.y < -50 || Math.abs(this.mesh.position.x) > 200 || Math.abs(this.mesh.position.z) > 200) { this.cleanup(); return; } // Reset position if moderately out of bounds else if (this.mesh.position.y < -10 || Math.abs(this.mesh.position.x) > 100 || Math.abs(this.mesh.position.z) > 100) { this.setPosition(...this.originalPos); this.body.velocity.setZero(); this.body.angularVelocity.setZero(); } } else { this.cleanup(); return; } } // Check for garbage disposal if (this.body.velocity.length() > 0.1) { // If moving if (this.detectGarbageCollision()) { return; // Stop updating if disposed } } } } shouldCleanup() { // Only return true if extremely out of bounds if (this.type === 'patty') { return ( this.mesh.position.y < -50 || // Much lower threshold for patties Math.abs(this.mesh.position.x) > 200 || Math.abs(this.mesh.position.z) > 200 ); } // Standard cleanup check for non-patty ingredients return ( this.mesh.position.y < -10 || Math.abs(this.mesh.position.x) > 100 || Math.abs(this.mesh.position.z) > 100 ); } cleanup() { // Remove from scene and physics world scene.remove(this.mesh); world.removeBody(this.body); // Remove from burgerIngredients array const index = burgerIngredients.indexOf(this); if (index > -1) { burgerIngredients.splice(index, 1); } // Stop any ongoing sounds if (this.sizzleSound) { this.sizzleSound.pause(); this.sizzleSound.currentTime = 0; } } } // Function to spawn a new ingredient function spawnIngredient(config) { const ingredient = new BurgerIngredient( config.url, 5, config.type ); ingredient.setPosition(...config.pos); ingredient.originalPos = [...config.pos]; ingredient.configTemplate = config; scene.add(ingredient.mesh); burgerIngredients.push(ingredient); return ingredient; } // Initialize burger ingredients function initializeBurgerIngredients() { // Define ingredient stations const ingredientStations = { patty: { x: -10, z: -30, spacing: 4 }, buns: { x: 8, z: -30, spacing: 6 }, toppings: { x: 12, z: -30, spacing: 5 } }; // Create ingredient configurations const ingredientConfigs = [ // Only one patty at patty station { url: 'https://play.rosebud.ai/assets/rawburgerpatty.png?uZHI', pos: [ingredientStations.patty.x + 2, 22.5, ingredientStations.patty.z], type: 'patty', maxCount: 1 // Only allow one raw patty }, // Buns station { url: 'https://play.rosebud.ai/assets/burgerbunbottom.png?4vW4', pos: [ingredientStations.buns.x, 22.5, ingredientStations.buns.z - ingredientStations.buns.spacing], type: 'bun-bottom' }, { url: 'https://play.rosebud.ai/assets/burgerbuntop.png?lY2r', pos: [ingredientStations.buns.x + 5, 22.5, ingredientStations.buns.z + ingredientStations.buns.spacing], type: 'bun-top' }, // Toppings station { url: 'https://play.rosebud.ai/assets/cheese-slice-6942.png?p7eZ', pos: [ingredientStations.toppings.x, 22.5, ingredientStations.toppings.z - 1.5 * ingredientStations.toppings.spacing], type: 'cheese' }, { url: 'https://play.rosebud.ai/assets/lettuce.png?ikGx', pos: [ingredientStations.toppings.x - 2, 22.5, ingredientStations.toppings.z - 0.5 * ingredientStations.toppings.spacing], type: 'lettuce' }, { url: 'https://play.rosebud.ai/assets/tomatoslice.png?tkMy', pos: [ingredientStations.toppings.x, 22.5, ingredientStations.toppings.z + 0.5 * ingredientStations.toppings.spacing], type: 'tomato' }, { url: 'https://play.rosebud.ai/assets/slicedonion.png?Pebj', pos: [ingredientStations.toppings.x - 2, 22.5, ingredientStations.toppings.z + 1.5 * ingredientStations.toppings.spacing], type: 'onion' } ]; // Spawn initial ingredients with count check ingredientConfigs.forEach(config => { // Check if this type has a maxCount limit if (config.maxCount) { // Count existing ingredients of this type const existingCount = burgerIngredients.filter(ing => ing.type === config.type).length; // Only spawn if we haven't reached the limit if (existingCount < config.maxCount) { spawnIngredient(config); } } else { // No limit, spawn normally spawnIngredient(config); } }); } // parentDiv and canvas already initialized at the top // Create HUD container const hudContainer = document.createElement('div'); hudContainer.style.position = 'absolute'; hudContainer.style.top = '10px'; hudContainer.style.left = '10px'; hudContainer.style.padding = '8px'; hudContainer.style.backgroundColor = 'rgba(0, 0, 0, 0.7)'; hudContainer.style.color = 'white'; hudContainer.style.borderRadius = '8px'; hudContainer.style.fontFamily = 'Arial, sans-serif'; hudContainer.style.zIndex = '1000'; hudContainer.style.fontSize = '10px'; // Create order display const orderDisplay = document.createElement('div'); orderDisplay.innerHTML = '

Current Order:

'; hudContainer.appendChild(orderDisplay); // Create score and lives display const scoreDisplay = document.createElement('div'); scoreDisplay.innerHTML = '

Money: $0

'; hudContainer.appendChild(scoreDisplay); const livesDisplay = document.createElement('div'); livesDisplay.innerHTML = '

Lives: ❤️❤️❤️❤️❤️

'; hudContainer.appendChild(livesDisplay); // Create timer display const timerDisplay = document.createElement('div'); timerDisplay.innerHTML = '

Time: 60s

'; hudContainer.appendChild(timerDisplay); // Create help button const helpButton = document.createElement('button'); helpButton.textContent = '❓ Help'; helpButton.style.padding = '8px 16px'; helpButton.style.fontSize = '14px'; helpButton.style.backgroundColor = '#2196F3'; helpButton.style.color = 'white'; helpButton.style.border = 'none'; helpButton.style.borderRadius = '5px'; helpButton.style.cursor = 'pointer'; helpButton.style.position = 'absolute'; helpButton.style.top = '10px'; helpButton.style.right = '10px'; helpButton.style.zIndex = '2000'; helpButton.addEventListener('click', () => { const instructionsModal = document.createElement('div'); instructionsModal.style.position = 'absolute'; instructionsModal.style.top = '50%'; instructionsModal.style.left = '50%'; instructionsModal.style.transform = 'translate(-50%, -50%)'; instructionsModal.style.backgroundColor = 'rgba(0, 0, 0, 0.95)'; instructionsModal.style.color = 'white'; instructionsModal.style.padding = '20px 30px'; instructionsModal.style.borderRadius = '20px'; instructionsModal.style.zIndex = '4000'; instructionsModal.style.maxWidth = '80%'; instructionsModal.style.maxHeight = '80vh'; instructionsModal.style.overflow = 'auto'; instructionsModal.innerHTML = `

How to Play

`; parentDiv.appendChild(instructionsModal); document.getElementById('closeInGameInstructions').addEventListener('click', () => { instructionsModal.remove(); }); }); parentDiv.appendChild(helpButton); parentDiv.appendChild(hudContainer); // Create sauce buttons container let sauceButtonsContainer = document.getElementById('sauceButtonsContainer'); if (!sauceButtonsContainer) { sauceButtonsContainer = document.createElement('div'); sauceButtonsContainer.id = 'sauceButtonsContainer'; sauceButtonsContainer.style.position = 'absolute'; sauceButtonsContainer.style.bottom = '20px'; sauceButtonsContainer.style.left = '50%'; sauceButtonsContainer.style.transform = 'translateX(-50%)'; sauceButtonsContainer.style.display = 'flex'; sauceButtonsContainer.style.gap = '10px'; sauceButtonsContainer.style.zIndex = '1000'; } // Create trash button const trashButton = document.createElement('button'); trashButton.textContent = '🗑️ Trash Burger'; trashButton.style.padding = '10px 20px'; trashButton.style.borderRadius = '5px'; trashButton.style.border = 'none'; trashButton.style.backgroundColor = '#ff4444'; trashButton.style.color = 'white'; trashButton.style.cursor = 'pointer'; trashButton.style.transition = 'background-color 0.3s'; trashButton.style.marginRight = '20px'; trashButton.addEventListener('click', () => { // Find all ingredients on the plate const stackedIngredients = burgerIngredients.filter(ing => ing.isOnPlate()); if (stackedIngredients.length > 0) { // Deduct points directly from current score playerScore -= 10; document.getElementById('scoreValue').textContent = playerScore; document.getElementById('scoreValue').style.color = playerScore < 0 ? '#ff4444' : 'white'; // Show penalty message const penaltyMessage = document.createElement('div'); penaltyMessage.style.position = 'absolute'; penaltyMessage.style.top = '50%'; penaltyMessage.style.left = '50%'; penaltyMessage.style.transform = 'translate(-50%, -50%)'; penaltyMessage.style.backgroundColor = 'rgba(255, 0, 0, 0.8)'; penaltyMessage.style.color = 'white'; penaltyMessage.style.padding = '20px'; penaltyMessage.style.borderRadius = '10px'; penaltyMessage.style.fontSize = '24px'; penaltyMessage.style.zIndex = '1000'; penaltyMessage.textContent = 'Food wasted! -10 points'; parentDiv.appendChild(penaltyMessage); // Remove message after delay setTimeout(() => { penaltyMessage.remove(); }, 1500); } // Remove each ingredient stackedIngredients.forEach(ingredient => { scene.remove(ingredient.mesh); world.removeBody(ingredient.body); const index = burgerIngredients.indexOf(ingredient); if (index > -1) { burgerIngredients.splice(index, 1); } }); // Reset lastPlacedIngredient lastPlacedIngredient = null; }); sauceButtonsContainer.appendChild(trashButton); // Create buttons for each sauce type Object.entries(sauceTypes).forEach(([type, properties]) => { const button = document.createElement('button'); button.textContent = properties.name; button.style.padding = '10px 20px'; button.style.borderRadius = '5px'; button.style.border = 'none'; button.style.backgroundColor = '#333'; button.style.color = 'white'; button.style.cursor = 'pointer'; button.style.transition = 'background-color 0.3s'; button.addEventListener('click', () => { // Get stacked ingredients const stackedIngredients = burgerIngredients.filter(ing => ing.isOnPlate()); if (stackedIngredients.length > 0) { // Sort ingredients by height stackedIngredients.sort((a, b) => a.mesh.position.y - b.mesh.position.y); // Calculate stack height (slightly closer to previous ingredient) const stackHeight = stackedIngredients[stackedIngredients.length - 1].mesh.position.y + 0.05; // Create sauce with proper type and smaller size const sauce = new BurgerIngredient( properties.url, 3.5, // Slightly larger size for better coverage type, null ); // Position sauce precisely on top of the stack sauce.setPosition( plate.body.position.x, stackHeight, plate.body.position.z ); // Set higher render order for proper layering sauce.mesh.renderOrder = stackedIngredients.length + 1; scene.add(sauce.mesh); burgerIngredients.push(sauce); lastPlacedIngredient = sauce; // Update render order sauce.mesh.renderOrder = stackedIngredients.length; } // Update button styles sauceButtonsContainer.querySelectorAll('button').forEach(btn => { btn.style.backgroundColor = '#333'; }); button.style.backgroundColor = '#' + sauceTypes[type].color.toString(16); }); sauceButtonsContainer.appendChild(button); }); parentDiv.appendChild(sauceButtonsContainer); if (!canvas) { canvas = document.createElement('canvas'); canvas.id = 'threeRenderCanvas'; parentDiv.appendChild(canvas); } // Create loading screen const loadingScreen = document.createElement('div'); loadingScreen.style.position = 'absolute'; loadingScreen.style.top = '0'; loadingScreen.style.left = '0'; loadingScreen.style.width = '100%'; loadingScreen.style.height = '100%'; loadingScreen.style.backgroundColor = 'rgba(0, 0, 0, 0.8)'; loadingScreen.style.color = 'white'; loadingScreen.style.display = 'flex'; loadingScreen.style.justifyContent = 'center'; loadingScreen.style.alignItems = 'center'; loadingScreen.style.fontSize = '24px'; loadingScreen.innerHTML = 'Loading... 0%'; parentDiv.appendChild(loadingScreen); // Initialize background music variable let backgroundMusic; // Loading manager events loadingManager.onProgress = function(url, itemsLoaded, itemsTotal) { const progress = ((itemsLoaded / itemsTotal) * 100).toFixed(0); loadingScreen.innerHTML = `Loading... ${progress}%`; }; loadingManager.onLoad = function() { assetsLoaded = true; loadingScreen.style.display = 'none'; // Background music initialization disabled for now }; // Initialize the scene const scene = new THREE.Scene(); // Clock for animation const clock = new THREE.Clock(); // Initialize the camera const camera = new THREE.PerspectiveCamera( 60, // Reduced FOV for better perspective canvas.offsetWidth / canvas.offsetHeight, 0.1, 1000 ); camera.position.set(0, 32, 0); // Increased height for better view camera.lookAt(0, 20, -30); // Lower look target to focus more on grill surface // Initialize the renderer with HDR const renderer = new THREE.WebGLRenderer({ antialias: true, canvas: canvas, powerPreference: 'high-performance', }); renderer.setPixelRatio(window.devicePixelRatio); renderer.setSize(canvas.offsetWidth, canvas.offsetHeight); renderer.shadowMap.enabled = true; renderer.shadowMap.type = THREE.PCFSoftShadowMap; renderer.outputEncoding = THREE.sRGBEncoding; renderer.toneMapping = THREE.ACESFilmicToneMapping; renderer.toneMappingExposure = 1.2; // Initialize post-processing const composer = new EffectComposer(renderer); // Regular scene render pass const renderPass = new RenderPass(scene, camera); composer.addPass(renderPass); // Add subtle bloom effect const bloomPass = new UnrealBloomPass( new THREE.Vector2(window.innerWidth, window.innerHeight), 0.3, // Reduced bloom strength 0.4, 0.85 // Increased threshold to only affect the brightest elements ); composer.addPass(bloomPass); // Add anti-aliasing const smaaPass = new SMAAPass( window.innerWidth * renderer.getPixelRatio(), window.innerHeight * renderer.getPixelRatio() ); composer.addPass(smaaPass); // Initialize composer size composer.setSize(parentDiv.clientWidth, parentDiv.clientHeight); // Define sky colors for environmental lighting const skyColor = new THREE.Color(0x87ceeb); // Bright sky blue const groundColor = new THREE.Color(0xffffff); // White ground reflection // Create sky dome with improved colors const vertexShader = ` varying vec3 vWorldPosition; void main() { vec4 worldPosition = modelMatrix * vec4( position, 1.0 ); vWorldPosition = worldPosition.xyz; gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 ); }`; const fragmentShader = ` uniform vec3 topColor; uniform vec3 bottomColor; uniform float offset; uniform float exponent; varying vec3 vWorldPosition; void main() { float h = normalize( vWorldPosition + offset ).y; gl_FragColor = vec4( mix( bottomColor, topColor, max( pow( max( h, 0.0 ), exponent ), 0.0 ) ), 1.0 ); }`; const uniforms = { topColor: { value: skyColor }, bottomColor: { value: groundColor }, offset: { value: 33 }, exponent: { value: 0.6 }, }; const skyGeo = new THREE.SphereGeometry(500, 32, 15); const skyMat = new THREE.ShaderMaterial({ uniforms: uniforms, vertexShader: vertexShader, fragmentShader: fragmentShader, side: THREE.BackSide, }); const sky = new THREE.Mesh(skyGeo, skyMat); scene.add(sky); // Modify OrbitControls setup const controls = new OrbitControls(camera, renderer.domElement); controls.enableDamping = true; controls.dampingFactor = 0.25; controls.screenSpacePanning = false; controls.maxPolarAngle = Math.PI / 1.8; controls.minPolarAngle = Math.PI / 3.5; controls.minDistance = 10; controls.maxDistance = 30; controls.target.set(0, 21, -30); controls.minAzimuthAngle = -Math.PI / 3; controls.maxAzimuthAngle = Math.PI / 3; controls.mouseButtons = { LEFT: THREE.MOUSE.ROTATE, // Only allow left click for rotation MIDDLE: null, // Disable middle mouse RIGHT: null // Disable right mouse }; // Create flat terrain function createTerrain() { const size = 200; // Create simple flat plane for visuals const geometry = new THREE.PlaneGeometry(size, size); const texture = textureLoader.load('https://play.rosebud.ai/assets/krustykrabfloor.png?4cGz'); texture.wrapS = texture.wrapT = THREE.RepeatWrapping; texture.repeat.set(8, 8); // Adjust the repeat to make the pattern visible texture.encoding = THREE.sRGBEncoding; const material = new THREE.MeshStandardMaterial({ map: texture, roughness: 0.8, metalness: 0.1, envMapIntensity: 1.0 }); const terrain = new THREE.Mesh(geometry, material); terrain.rotation.x = -Math.PI / 2; terrain.receiveShadow = true; scene.add(terrain); return terrain; } // Create roof for the map function createRoof() { const mapSize = 200; const roofHeight = 2; const roofGeometry = new THREE.BoxGeometry(mapSize + 4, roofHeight, mapSize + 4); // Slightly larger than walls // Load and configure roof texture const roofTexture = textureLoader.load('https://play.rosebud.ai/assets/krustykrabfloor.png?4cGz'); roofTexture.wrapS = roofTexture.wrapT = THREE.RepeatWrapping; roofTexture.repeat.set(8, 8); // Match the floor texture repeat roofTexture.encoding = THREE.sRGBEncoding; const roofMaterial = new THREE.MeshStandardMaterial({ map: roofTexture, roughness: 0.8, metalness: 0.1 }); const roof = new THREE.Mesh(roofGeometry, roofMaterial); roof.position.set(0, 41, 0); // Position above walls (wallHeight + 1) roof.receiveShadow = true; roof.castShadow = true; return roof; } // Create walls around the map function createWalls() { const wallsGroup = new THREE.Group(); const wallHeight = 40; const wallThickness = 2; const mapSize = 200; // Same as terrain size // Load window texture const windowTexture = textureLoader.load('https://play.rosebud.ai/assets/krustykrabwindow.jpg?RgXX'); windowTexture.encoding = THREE.sRGBEncoding; // Create window const windowWidth = 30; const windowHeight = 20; const windowGeometry = new THREE.PlaneGeometry(windowWidth, windowHeight); const windowMaterial = new THREE.MeshStandardMaterial({ map: windowTexture, transparent: true, side: THREE.DoubleSide }); const windowMesh = new THREE.Mesh(windowGeometry, windowMaterial); windowMesh.position.set(0, wallHeight / 2, -mapSize / 2 + wallThickness / 2 + 0.1); wallsGroup.add(windowMesh); const wallGeometry = new THREE.BoxGeometry(1, 1, 1); // Load wall texture const wallTexture = textureLoader.load('https://play.rosebud.ai/assets/krustykrabkitchenwall.png?o3vK'); wallTexture.encoding = THREE.sRGBEncoding; wallTexture.wrapS = wallTexture.wrapT = THREE.RepeatWrapping; wallTexture.repeat.set(4, 1); // Adjust these values to control the texture repeat const wallMaterial = new THREE.MeshStandardMaterial({ map: wallTexture, roughness: 0.8, metalness: 0.2 }); // Create four walls const walls = [ // North wall { width: mapSize + wallThickness, height: wallHeight, depth: wallThickness, position: [0, wallHeight / 2, -mapSize / 2] }, // South wall { width: mapSize + wallThickness, height: wallHeight, depth: wallThickness, position: [0, wallHeight / 2, mapSize / 2] }, // East wall { width: wallThickness, height: wallHeight, depth: mapSize + wallThickness, position: [mapSize / 2, wallHeight / 2, 0] }, // West wall { width: wallThickness, height: wallHeight, depth: mapSize + wallThickness, position: [-mapSize / 2, wallHeight / 2, 0] } ]; walls.forEach(({ width, height, depth, position }) => { const wall = new THREE.Mesh(wallGeometry, wallMaterial); wall.scale.set(width, height, depth); wall.position.set(...position); wall.castShadow = true; wall.receiveShadow = true; wallsGroup.add(wall); }); return wallsGroup; } // Setup improved lighting system const sunLight = new THREE.DirectionalLight(skyColor, 2.0); sunLight.position.set(-50, 100, -50); sunLight.castShadow = true; sunLight.shadow.mapSize.width = 2048; sunLight.shadow.mapSize.height = 2048; sunLight.shadow.camera.near = 10; sunLight.shadow.camera.far = 400; sunLight.shadow.camera.left = -100; sunLight.shadow.camera.right = 100; sunLight.shadow.camera.top = 100; sunLight.shadow.camera.bottom = -100; sunLight.shadow.bias = -0.001; scene.add(sunLight); // Add hemisphere light to simulate sky and ground bounce light const hemiLight = new THREE.HemisphereLight(skyColor, groundColor, 1.0); // Increased intensity scene.add(hemiLight); // Add ambient light to reduce shadows const ambientLight = new THREE.AmbientLight(0xffffff, 0.5); scene.add(ambientLight); // Add corner lights const cornerLights = [{ position: [-90, 35, -90], target: [0, 0, 0] }, { position: [90, 35, -90], target: [0, 0, 0] }, { position: [-90, 35, 90], target: [0, 0, 0] }, { position: [90, 35, 90], target: [0, 0, 0] }]; cornerLights.forEach(({ position, target }) => { const spotLight = new THREE.SpotLight(0xffffff, 0.5); spotLight.position.set(...position); spotLight.target.position.set(...target); spotLight.angle = Math.PI / 3; spotLight.penumbra = 1; spotLight.decay = 1; spotLight.distance = 0; spotLight.castShadow = true; spotLight.shadow.bias = -0.001; spotLight.shadow.mapSize.width = 1024; spotLight.shadow.mapSize.height = 1024; scene.add(spotLight); scene.add(spotLight.target); }); // Create initial scene const terrain = createTerrain(); // Create cooking counter function createCookingCounter() { // Create counter group and physics const counterGroup = new THREE.Group(); // Create counter physics body const counterShape = new Box(new Vec3(20, 1, 10)); const counterBody = new Body({ mass: 0, // Static body material: world.defaultContactMaterial.materials[0], position: new Vec3(0, 21, -30), // Moved up by 1 unit to account for counter thickness type: Body.STATIC }); // Create grill collision surface const grillShape = new Box(new Vec3(7.5, 1, 7.5)); const grillBody = new Body({ mass: 0, material: world.defaultContactMaterial.materials[0], position: new Vec3(-10, 21.6, -30), type: Body.STATIC, collisionResponse: 1, fixedRotation: true, allowSleep: false, updateMassProperties: false }); grillBody.addShape(grillShape); world.addBody(grillBody); counterBody.addShape(counterShape); world.addBody(counterBody); // Add invisible walls around the counter const wallThickness = 0.5; const wallHeight = 2; // Create invisible wall shapes const frontWallShape = new Box(new Vec3(20, wallHeight, wallThickness)); const backWallShape = new Box(new Vec3(20, wallHeight, wallThickness)); const leftWallShape = new Box(new Vec3(wallThickness, wallHeight, 10)); const rightWallShape = new Box(new Vec3(wallThickness, wallHeight, 10)); // Create and position invisible wall bodies const frontWall = new Body({ mass: 0 }); frontWall.addShape(frontWallShape); frontWall.position.set(0, 22, -20); const backWall = new Body({ mass: 0 }); backWall.addShape(backWallShape); backWall.position.set(0, 22, -40); const leftWall = new Body({ mass: 0 }); leftWall.addShape(leftWallShape); leftWall.position.set(-20, 22, -30); const rightWall = new Body({ mass: 0 }); rightWall.addShape(rightWallShape); rightWall.position.set(20, 22, -30); // Add walls to physics world world.addBody(frontWall); world.addBody(backWall); world.addBody(leftWall); world.addBody(rightWall); // Load grill texture const grillTexture = textureLoader.load('https://play.rosebud.ai/assets/stovegrilltop.png?u2zz'); grillTexture.encoding = THREE.sRGBEncoding; grillTexture.flipY = false; grillTexture.minFilter = THREE.LinearFilter; grillTexture.magFilter = THREE.LinearFilter; // Create grill surface const grillGeometry = new THREE.PlaneGeometry(15, 15); const grillMaterial = new THREE.MeshStandardMaterial({ map: grillTexture, roughness: 0.7, metalness: 0.5, transparent: true, alphaTest: 0.5, depthTest: true, depthWrite: false, side: THREE.DoubleSide, emissive: new THREE.Color(0xff0000), emissiveIntensity: 1.0, renderOrder: 0 // Ensure grill renders below ingredients }); const grillSurface = new THREE.Mesh(grillGeometry, grillMaterial); grillSurface.rotation.x = -Math.PI / 2; grillSurface.position.set(-10, 21.1, 0); // Moved to the left half of the counter grillSurface.receiveShadow = true; counterGroup.add(grillSurface); // Create counter top const counterGeometry = new THREE.BoxGeometry(40, 2, 20); const counterMaterial = new THREE.MeshStandardMaterial({ color: 0x808080, roughness: 0.3, metalness: 0.5 }); const counterTop = new THREE.Mesh(counterGeometry, counterMaterial); counterTop.position.y = 20; // Height of the counter counterTop.receiveShadow = true; counterTop.castShadow = true; // Create counter legs const legGeometry = new THREE.BoxGeometry(2, 20, 2); const legMaterial = new THREE.MeshStandardMaterial({ color: 0x606060, roughness: 0.5, metalness: 0.7 }); // Create and position 4 legs const positions = [ [-18, 10, 8], // front left [18, 10, 8], // front right [-18, 10, -8], // back left [18, 10, -8] // back right ]; positions.forEach(pos => { const leg = new THREE.Mesh(legGeometry, legMaterial); leg.position.set(...pos); leg.receiveShadow = true; leg.castShadow = true; counterGroup.add(leg); }); counterGroup.add(counterTop); counterGroup.position.set(0, 0, -30); // Position in front of DoodleBob's starting position return counterGroup; } // Create plate for burger assembly function createPlate() { const plateGeometry = new THREE.PlaneGeometry(7, 7); const plateTexture = textureLoader.load('https://play.rosebud.ai/assets/plate.png?VWkR'); plateTexture.encoding = THREE.sRGBEncoding; const plateMaterial = new THREE.MeshStandardMaterial({ map: plateTexture, transparent: true, side: THREE.DoubleSide, alphaTest: 0.5 }); const plateMesh = new THREE.Mesh(plateGeometry, plateMaterial); plateMesh.rotation.x = -Math.PI / 2; plateMesh.position.set(2, 21.01, -30); // Lower the plate slightly plateMesh.receiveShadow = true; // Add collision shape for the plate const plateShape = new Box(new Vec3(3.5, 0.1, 3.5)); const plateBody = new Body({ mass: 0, material: world.defaultContactMaterial.materials[0], position: new Vec3(2, 21.01, -30) }); plateBody.addShape(plateShape); world.addBody(plateBody); return { mesh: plateMesh, body: plateBody }; } // Create kitchen appliances function createKitchenAppliances() { const appliancesGroup = new THREE.Group(); // Create stainless steel material const steelMaterial = new THREE.MeshStandardMaterial({ color: 0x888888, roughness: 0.2, metalness: 0.8 }); // Create large fridge const fridgeGeometry = new THREE.BoxGeometry(15, 35, 12); const fridge = new THREE.Mesh(fridgeGeometry, steelMaterial); fridge.position.set(-60, 17.5, -90); fridge.castShadow = true; fridge.receiveShadow = true; appliancesGroup.add(fridge); // Create oven const ovenGeometry = new THREE.BoxGeometry(20, 30, 12); const oven = new THREE.Mesh(ovenGeometry, steelMaterial); oven.position.set(60, 15, -90); oven.castShadow = true; oven.receiveShadow = true; appliancesGroup.add(oven); // Create microwave const microwaveGeometry = new THREE.BoxGeometry(12, 8, 8); const microwave = new THREE.Mesh(microwaveGeometry, steelMaterial); microwave.position.set(-30, 30, -90); microwave.castShadow = true; microwave.receiveShadow = true; appliancesGroup.add(microwave); return appliancesGroup; } // Create garbage bin function createGarbageBin() { const binGroup = new THREE.Group(); // Create the main bin body const binGeometry = new THREE.BoxGeometry(8, 12, 8); const binMaterial = new THREE.MeshStandardMaterial({ color: 0x404040, roughness: 0.8, metalness: 0.2 }); const binMesh = new THREE.Mesh(binGeometry, binMaterial); binMesh.position.set(0, 6, 0); binMesh.castShadow = true; binMesh.receiveShadow = true; binGroup.add(binMesh); // Create lid const lidGeometry = new THREE.BoxGeometry(9, 1, 9); const lidMaterial = new THREE.MeshStandardMaterial({ color: 0x505050, roughness: 0.7, metalness: 0.3 }); const lidMesh = new THREE.Mesh(lidGeometry, lidMaterial); lidMesh.position.set(0, 12.5, 0); lidMesh.castShadow = true; lidMesh.receiveShadow = true; binGroup.add(lidMesh); // Add physics body for the bin const binShape = new Box(new Vec3(4, 6, 4)); const binBody = new Body({ mass: 0, material: world.defaultContactMaterial.materials[0], position: new Vec3(-20, 6, -70) }); binBody.addShape(binShape); world.addBody(binBody); // Position the bin group binGroup.position.set(-20, 0, -70); return binGroup; } // Add counter to scene const cookingCounter = createCookingCounter(); scene.add(cookingCounter); // Add plate to the scene const plate = createPlate(); scene.add(plate.mesh); // Add kitchen appliances to scene const kitchenAppliances = createKitchenAppliances(); scene.add(kitchenAppliances); // Add garbage bin to scene const garbageBin = createGarbageBin(); scene.add(garbageBin); // Add walls to scene const walls = createWalls(); scene.add(walls); // Add roof to scene const roof = createRoof(); scene.add(roof); // Load DoodleBob model before game starts gltfLoader.load('https://play.rosebud.ai/assets/DoodleBobwalking.glb?LSnK', (gltf) => { model = gltf.scene; model.scale.set(20, 20, 20); model.position.set(-20, 0, -80); model.rotation.y = 0.2; scene.add(model); // Setup animation mixer mixer = new THREE.AnimationMixer(model); if (gltf.animations.length > 0) { const walkAnimation = mixer.clipAction(gltf.animations[0]); // Play animation once walkAnimation.setLoop(THREE.LoopOnce); walkAnimation.clampWhenFinished = true; walkAnimation.timeScale = 0; // Freeze animation walkAnimation.time = 0.5; // Set to mid-walk pose walkAnimation.play(); } }); // Animation loop let gameStarted = false; // Add flag to track if game has started function animate() { const delta = clock.getDelta(); requestAnimationFrame(animate); if (assetsLoaded) { if (gameStarted) { // Only run game logic if game has started // Step physics world world.step(1 / 60); applyControls(); // Apply camera controls controls.update(); // Update animations if (mixer) { mixer.update(delta); } // Update burger ingredients burgerIngredients.forEach(ingredient => { ingredient.updateFacing(camera); ingredient.update(); ingredient.updateCookingState(); }); } composer.render(); } } // Handle window resize function onWindowResize() { const width = parentDiv.clientWidth; const height = parentDiv.clientHeight; // Update camera camera.aspect = width / height; camera.updateProjectionMatrix(); // Update renderer and composer renderer.setSize(width, height); composer.setSize(width, height); // Update post-processing passes bloomPass.resolution.set(width, height); smaaPass.setSize(width, height); } // Add event listeners window.addEventListener('resize', onWindowResize); const resizeObserver = new ResizeObserver(onWindowResize); resizeObserver.observe(parentDiv); // Start animation animate(); // ========================= // Mobile Controls Integration // ========================= // Define keysPressed object with standardized key names const keysPressed = { up: false, down: false, left: false, right: false, jump: false, }; // Helper functions to handle button presses function addButtonListeners(buttonId, key) { const button = document.getElementById(buttonId); if (!button) return; // Prevent default to avoid unwanted scrolling or other behaviors button.addEventListener('touchstart', (event) => { event.preventDefault(); keysPressed[key] = true; }, { passive: false }); button.addEventListener('touchend', (event) => { event.preventDefault(); keysPressed[key] = false; }, { passive: false }); // Also handle mouse events for desktop compatibility button.addEventListener('mousedown', (event) => { event.preventDefault(); keysPressed[key] = true; }); button.addEventListener('mouseup', (event) => { event.preventDefault(); keysPressed[key] = false; }); button.addEventListener('mouseleave', (event) => { event.preventDefault(); keysPressed[key] = false; }); } // ========================= // Keyboard Controls Integration // ========================= // Add event listeners for keyboard controls window.addEventListener('keydown', (event) => { switch (event.code) { case 'ArrowUp': case 'KeyW': keysPressed.up = true; break; case 'ArrowDown': case 'KeyS': keysPressed.down = true; break; case 'ArrowLeft': case 'KeyA': keysPressed.left = true; break; case 'ArrowRight': case 'KeyD': keysPressed.right = true; break; case 'Space': keysPressed.jump = true; break; default: break; } }); window.addEventListener('keyup', (event) => { switch (event.code) { case 'ArrowUp': case 'KeyW': keysPressed.up = false; break; case 'ArrowDown': case 'KeyS': keysPressed.down = false; break; case 'ArrowLeft': case 'KeyA': keysPressed.left = false; break; case 'ArrowRight': case 'KeyD': keysPressed.right = false; break; case 'Space': keysPressed.jump = false; break; default: break; } }); // ========================= // End of Mobile and Keyboard Controls Integration // ========================= // Initialize raycaster and mouse vector const raycaster = new THREE.Raycaster(); const mouse = new THREE.Vector2(); let selectedIngredient = null; let lastPlacedIngredient = null; let dragPlane = new THREE.Plane(new THREE.Vector3(0, 1, 0), 0); // Function to apply controls based on keysPressed function applyControls() { const moveSpeed = 0.5; // Reduced for more controlled movement const verticalSpeed = 0.3; // Reduced for more controlled vertical movement const rotationSpeed = 0.02; // Speed of rotation if (keysPressed.up) { camera.position.z -= moveSpeed; } if (keysPressed.down) { camera.position.z += moveSpeed; } if (keysPressed.left) { // Rotate camera left around the target point camera.position.sub(controls.target); camera.position.applyAxisAngle(new THREE.Vector3(0, 1, 0), rotationSpeed); camera.position.add(controls.target); camera.lookAt(controls.target); } if (keysPressed.right) { // Rotate camera right around the target point camera.position.sub(controls.target); camera.position.applyAxisAngle(new THREE.Vector3(0, 1, 0), -rotationSpeed); camera.position.add(controls.target); camera.lookAt(controls.target); } if (keysPressed.jump) { camera.position.y += verticalSpeed; } } // Mouse event handlers function onMouseDown(event) { const rect = canvas.getBoundingClientRect(); mouse.x = ((event.clientX - rect.left) / rect.width) * 2 - 1; mouse.y = -((event.clientY - rect.top) / rect.height) * 2 + 1; raycaster.setFromCamera(mouse, camera); // Get all intersected objects once const intersectedObjects = raycaster.intersectObjects(burgerIngredients.map(i => i.mesh)); // Get all stacked ingredients on the plate const stackedIngredients = burgerIngredients.filter(ing => ing.isOnPlate()); stackedIngredients.sort((a, b) => b.mesh.position.y - a.mesh.position.y); // First check if we're clicking the top-most stacked ingredient if (stackedIngredients.length > 0) { const topIngredient = lastPlacedIngredient || stackedIngredients[0]; const intersectsTop = raycaster.intersectObject(topIngredient.mesh); if (intersectsTop.length > 0 && topIngredient === stackedIngredients[0]) { controls.enabled = false; selectedIngredient = topIngredient; selectedIngredient.isDragging = true; // Modify physics properties for the top ingredient selectedIngredient.body.linearDamping = 0.99; // Increase damping to reduce bouncing selectedIngredient.body.angularDamping = 0.99; selectedIngredient.body.velocity.setZero(); // Reset any existing velocity selectedIngredient.body.angularVelocity.setZero(); // Reset any rotation dragPlane.constant = -intersectsTop[0].point.y; return; } } // If not clicking a stacked ingredient, check other ingredients if (intersectedObjects.length > 0) { const ingredient = burgerIngredients.find(i => i.mesh === intersectedObjects[0].object); if (ingredient) { // Remove flip check since flipping is no longer required // Start cooking if it's a raw patty on the grill if (ingredient.type === 'patty' && ingredient.cookingState === 'raw' && ingredient.mesh.position.x < -2.5) { // Check if on grill ingredient.startCooking(); } // Handle dragging controls.enabled = false; selectedIngredient = ingredient; selectedIngredient.isDragging = true; dragPlane.constant = -intersectedObjects[0].point.y; } } } // Function to create sauce layer function createSauceLayer() { if (!selectedSauce) return null; const sauce = new BurgerIngredient( sauceTypes[selectedSauce].url, 2.5, // Much smaller size for sauces 'sauce' ); scene.add(sauce.mesh); burgerIngredients.push(sauce); return sauce; } function onMouseMove(event) { if (selectedIngredient && selectedIngredient.isDragging) { // Get stacked ingredients before moving const stackedIngredients = burgerIngredients.filter(ing => ing.isOnPlate() && !ing.isDragging ); const rect = canvas.getBoundingClientRect(); mouse.x = ((event.clientX - rect.left) / rect.width) * 2 - 1; mouse.y = -((event.clientY - rect.top) / rect.height) * 2 + 1; raycaster.setFromCamera(mouse, camera); const intersectPoint = new THREE.Vector3(); raycaster.ray.intersectPlane(dragPlane, intersectPoint); // Check if we're over the plate and handle stacking if (selectedIngredient.isOnPlate()) { // Update last placed ingredient lastPlacedIngredient = selectedIngredient; // Find all ingredients on the plate const stackedIngredients = burgerIngredients.filter(ing => ing !== selectedIngredient && ing.isOnPlate() && !ing.isDragging ); // Sort by height and adjust rendering order stackedIngredients.sort((a, b) => a.mesh.position.y - b.mesh.position.y); // Update renderOrder for proper overlay stackedIngredients.forEach((ing, index) => { ing.mesh.renderOrder = index; // Ensure stacked ingredients stay still ing.body.velocity.setZero(); ing.body.angularVelocity.setZero(); ing.body.force.setZero(); }); // Set the current ingredient's render order to be highest selectedIngredient.mesh.renderOrder = stackedIngredients.length; // Calculate stack height with smaller increment const stackHeight = stackedIngredients.length > 0 ? stackedIngredients[stackedIngredients.length - 1].mesh.position.y + 0.08 : plate.body.position.y + 0.15; // Set position with zero velocity and increased damping selectedIngredient.body.velocity.setZero(); selectedIngredient.body.angularVelocity.setZero(); selectedIngredient.body.force.setZero(); selectedIngredient.body.linearDamping = 0.99; selectedIngredient.body.angularDamping = 0.99; selectedIngredient.setPosition( plate.body.position.x, stackHeight, plate.body.position.z ); } else { selectedIngredient.setPosition(intersectPoint.x, intersectPoint.y, intersectPoint.z); } } } function onMouseUp(event) { if (selectedIngredient) { // Check if the ingredient was part of a stack const wasStacked = selectedIngredient.isOnPlate(); // Calculate throw velocity based on mouse movement const movementX = event.movementX || 0; const movementY = event.movementY || 0; const throwForce = Math.sqrt(movementX * movementX + movementY * movementY); // Apply velocity to the physics body if (throwForce > 5) { // Minimum force threshold const throwDirection = new THREE.Vector3(); raycaster.ray.direction.normalize(); throwDirection.copy(raycaster.ray.direction); throwDirection.y = 0.8; // Higher upward arc throwDirection.multiplyScalar(throwForce * 0.3); // Reduced throw force multiplier selectedIngredient.body.velocity.set( throwDirection.x, throwDirection.y, throwDirection.z ); } // If the ingredient was moved from its original position, spawn a new one if (selectedIngredient.configTemplate) { const distance = new THREE.Vector3( selectedIngredient.mesh.position.x - selectedIngredient.originalPos[0], selectedIngredient.mesh.position.y - selectedIngredient.originalPos[1], selectedIngredient.mesh.position.z - selectedIngredient.originalPos[2] ).length(); if (distance > 1) { // Spawn a new ingredient at the original position spawnIngredient(selectedIngredient.configTemplate); // Remove the template from the moved ingredient delete selectedIngredient.configTemplate; } } selectedIngredient.isDragging = false; // Reset physics properties when releasing selectedIngredient.body.linearDamping = 0.8; // Reset to original values selectedIngredient.body.angularDamping = 0.9; // Update lastPlacedIngredient if the ingredient is no longer on the plate if (!selectedIngredient.isOnPlate() && lastPlacedIngredient === selectedIngredient) { const stackedIngredients = burgerIngredients.filter(ing => ing.isOnPlate()); lastPlacedIngredient = stackedIngredients.length > 0 ? stackedIngredients[stackedIngredients.length - 1] : null; } selectedIngredient = null; } controls.enabled = true; } // Function to start a new order function startNewOrder() { // Clear any existing order timer if (orderTimer) { clearInterval(orderTimer); } // Show tutorial messages if this is the first burger if (isFirstBurger) { showTutorialMessages(); } // Check if score is negative before starting new order if (playerScore < 0) { playerLives--; document.getElementById('livesValue').textContent = '❤️'.repeat(Math.max(0, playerLives)); // Show warning message about negative score const warningMessage = document.createElement('div'); warningMessage.style.position = 'absolute'; warningMessage.style.top = '50%'; warningMessage.style.left = '50%'; warningMessage.style.transform = 'translate(-50%, -50%)'; warningMessage.style.backgroundColor = 'rgba(255, 165, 0, 0.8)'; warningMessage.style.color = 'white'; warningMessage.style.padding = '20px'; warningMessage.style.borderRadius = '10px'; warningMessage.style.fontSize = '24px'; warningMessage.style.zIndex = '1000'; warningMessage.innerHTML = ` Warning: Negative Score! Lost a life!
${playerLives > 0 ? `Lives remaining: ${'❤️'.repeat(playerLives)}` : ''} `; parentDiv.appendChild(warningMessage); // Remove warning message after delay setTimeout(() => { warningMessage.remove(); }, 2000); // Check for game over if (playerLives <= 0) { gameOver = true; showGameOver(); return; } } // Generate new random order let newOrder; do { newOrder = generateRandomOrder(); } while (lastOrder && JSON.stringify(newOrder.ingredients) === JSON.stringify(lastOrder.ingredients)); currentOrder = newOrder; lastOrder = newOrder; // Update order display const orderDetails = document.getElementById('orderDetails'); if (orderDetails) { // Create cooking requirement note with styling let cookingNote = ''; const cookingEmojis = { 'raw': '🥩', 'cooked': '🍖', 'burnt': '🔥' }; const cookingColors = { 'raw': '#ff6b6b', 'cooked': '#4CAF50', 'burnt': '#ff4400' }; cookingNote = `

${cookingEmojis[currentOrder.cookingRequirement]} Customer wants patty ${currentOrder.cookingRequirement.toUpperCase()}!

`; const ingredientsList = currentOrder.ingredients.map(ing => { // Check if the ingredient is a sauce if (availableIngredients.sauces[ing]) { return `

${availableIngredients.sauces[ing]}

`; } return `

${ing}

`; }); orderDetails.innerHTML = `

Order #${Math.floor(Math.random() * 9999)}

${cookingNote}

Ingredients (${currentOrder.cookingRequirement === 'burnt' ? 'No Money - Burnt Order' : `\$${currentOrder.points}`}):

${ingredientsList.join('')} `; } // Reset timer let timeLeft = orderTimeLimit; document.getElementById('timerValue').textContent = timeLeft; // Start timer orderTimer = setInterval(() => { timeLeft--; document.getElementById('timerValue').textContent = timeLeft; if (timeLeft <= 0) { clearInterval(orderTimer); failOrder("Time's up!"); } }, 1000); } // Function to check burger correctness function checkBurger() { if (!currentOrder) return; // Get all ingredients on the plate, sorted by Y position const stackedIngredients = burgerIngredients .filter(ing => ing.isOnPlate()) .sort((a, b) => a.mesh.position.y - b.mesh.position.y); // Check for incomplete burger if (stackedIngredients.length < currentOrder.ingredients.length) { playerLives--; document.getElementById('livesValue').textContent = '❤️'.repeat(playerLives); // Check for game over if (playerLives <= 0) { gameOver = true; showGameOver(); return; } const missingCount = currentOrder.ingredients.length - stackedIngredients.length; failOrder(`Incomplete burger! Missing ${missingCount} ${missingCount === 1 ? 'ingredient' : 'ingredients'}! Lost a life! ❌`, 100); return; } // Check if there are any patties at all const patties = stackedIngredients.filter(ing => ing.type === 'patty' && ing.isOnPlate()); // First check: Are there any patties at all? if (patties.length === 0) { serveBadBurger("A burger needs a patty! 🍔", 50); return; } // Second check: Check each patty's cooking state for (const patty of patties) { if (patty.cookingState === 'raw') { // Immediately clear the plate stackedIngredients.forEach(ingredient => { scene.remove(ingredient.mesh); world.removeBody(ingredient.body); const index = burgerIngredients.indexOf(ingredient); if (index > -1) { burgerIngredients.splice(index, 1); } }); // Severe penalty from current score playerLives--; const currentScore = playerScore; playerScore = currentScore - 500; // Additional score penalty - allow negative document.getElementById('scoreValue').textContent = playerScore; document.getElementById('livesValue').textContent = '❤️'.repeat(playerLives); // Enhanced warning messages const rawMessages = [ "🚨 SEVERE HEALTH CODE VIOLATION! Raw meat is dangerous!", "☣️ FOOD SAFETY ALERT! Raw patty detected!", "🏥 HEALTH HAZARD! Never serve raw meat!", "⚠️ CRITICAL ERROR: Uncooked patty!", "🚫 IMMEDIATE VIOLATION: Raw meat is forbidden!" ]; const rawMessage = rawMessages[Math.floor(Math.random() * rawMessages.length)]; // Show warning with sound effect const warningSound = new Audio('https://play.rosebud.ai/assets/flippattysound.MP3?ZLdH'); warningSound.volume = 0.3; warningSound.play(); serveBadBurger(rawMessage + "\n\n⛔ Your burger has been confiscated!\n💢 SEVERE PENALTY: -500 points", 500); return; } } // Only continue if no raw patties were found if (stackedIngredients.length === 0) { serveBadBurger("Can't serve an empty plate!", 50); return; } // Continue with burger validation // Previous patty check already done above // Check for raw or burnt patties first - before any other validation for (const patty of patties) { const clearPlate = () => { stackedIngredients.forEach(ingredient => { scene.remove(ingredient.mesh); world.removeBody(ingredient.body); const index = burgerIngredients.indexOf(ingredient); if (index > -1) { burgerIngredients.splice(index, 1); } }); }; if (patty.cookingState === 'raw') { playerLives--; document.getElementById('livesValue').textContent = '❤️'.repeat(playerLives); clearPlate(); const randomMessage = feedbackMessages.bad[Math.floor(Math.random() * feedbackMessages.bad.length)]; const rawMessages = [ "You tried to poison a customer with raw meat! 🤮", "The Health Inspector is furious! Raw meat?! ⚠️", "That's a serious food safety violation! Raw patty! 🚫", "Are you trying to get us shut down? Raw meat! 🏥", "Even Plankton wouldn't serve raw meat! 🦠", "Mr. Krabs is going to jail because of this! 🚔", "This could make someone very sick! ☣️", "RAW MEAT ALERT! This is dangerous! ⛔", "The Krusty Krab has standards! No raw meat! 🆘", "This isn't sushi! Cook the patty! 🔥" ]; const rawMessage = rawMessages[Math.floor(Math.random() * rawMessages.length)]; serveBadBurger(rawMessage + "\n\n" + randomMessage + "\n\nYour burger has been thrown away!", 500); return; } if (patty.cookingState === 'burnt') { playerLives--; document.getElementById('livesValue').textContent = '❤️'.repeat(playerLives); clearPlate(); const burntMessages = [ "QUALITY VIOLATION! Burnt patties are inedible! 🔥", "This patty is completely burnt! ⚫", "Can't serve charred food! 🚫", "The patty is ruined! Too burnt! 💢", "Nobody wants a burnt patty! ♨️" ]; const randomMessage = burntMessages[Math.floor(Math.random() * burntMessages.length)]; serveBadBurger(randomMessage + " Your burger has been thrown away!", 125); return; } } // Check for existence of patties if (patties.length === 0) { serveBadBurger("Where's the patty? This is a burger restaurant!", 75); return; } // Check patties' cooking states for (const patty of patties) { // Remove redundant raw patty check since we handle it earlier if (patty.cookingState === 'burnt') { playerLives--; document.getElementById('livesValue').textContent = '❤️'.repeat(playerLives); const burntMessages = [ "This patty is burnt to a crisp! 🔥", "Even SpongeBob wouldn't serve this charred mess! ⚫", "Too burnt! The health inspector won't be happy! ⚠️", "The secret formula doesn't include carbon! 🚫", "Mr. Krabs can't sell this burnt disaster! 💢" ]; const randomBurntMessage = burntMessages[Math.floor(Math.random() * burntMessages.length)]; serveBadBurger(randomBurntMessage, 125); return; } } // Extract ingredient types, with special handling for sauces and patties const stackedTypes = stackedIngredients.map(ing => { // Enhanced sauce type handling if (Object.keys(sauceTypes).includes(ing.type)) { // Normalize sauce type names return ing.type === 'secret-sauce' ? 'secret-sauce' : ing.type; } // Return regular ingredient type return ing.type; }); // If any null values were returned due to cooking state issues, exit if (stackedTypes.includes(null)) return; // Detailed validation logging console.log('Expected Order:', currentOrder.ingredients); console.log('Actual Stack:', stackedTypes); console.log('Ingredients Details:', stackedIngredients.map(ing => ({ type: ing.type, position: ing.mesh.position.y, isSauce: Object.keys(sauceTypes).includes(ing.type) }))); console.log('Order Check:', { expected: currentOrder.ingredients, actual: stackedTypes, stacked: stackedIngredients.map(ing => ({ type: ing.type, y: ing.mesh.position.y, cookingState: ing.cookingState })) }); // Allow serving any burger configuration let isBadBurger = false; let failureReason = ""; // Check if there are any ingredients if (stackedTypes.length === 0) { isBadBurger = true; failureReason = "Empty plate served!"; } // Check basic structure but don't return immediately else if (stackedTypes[0] !== 'bun-bottom') { isBadBurger = true; failureReason = "Missing bottom bun!"; } else if (stackedTypes[stackedTypes.length - 1] !== 'bun-top') { isBadBurger = true; failureReason = "Missing top bun!"; } // Check if ingredients match the order, using the filtered stackedTypes const actualStackedTypes = stackedTypes.filter(type => type !== null); if (actualStackedTypes.length !== currentOrder.ingredients.length) { isBadBurger = true; const diff = Math.abs(actualStackedTypes.length - currentOrder.ingredients.length); failureReason = `${actualStackedTypes.length > currentOrder.ingredients.length ? 'Too many' : 'Missing'} ingredients! (${diff} ${diff === 1 ? 'ingredient' : 'ingredients'})`; } // Check basic structure (buns) if (actualStackedTypes[0] !== 'bun-bottom') { failOrder("Start with a bottom bun!"); return; } if (stackedTypes[stackedTypes.length - 1] !== 'bun-top') { failOrder("Finish with a top bun!"); return; } // Compare ingredient counts if (stackedTypes.length !== currentOrder.ingredients.length) { const diff = Math.abs(stackedTypes.length - currentOrder.ingredients.length); failOrder(`${stackedTypes.length > currentOrder.ingredients.length ? 'Too many' : 'Missing'} ingredients! (${diff} ${diff === 1 ? 'ingredient' : 'ingredients'})`); return; } // Get the stacked ingredients ordered from bottom to top const burgerStack = burgerIngredients .filter(ing => ing.isOnPlate()) .sort((a, b) => a.mesh.position.y - b.mesh.position.y); // Compare each layer with enhanced sauce detection for (let i = 0; i < currentOrder.ingredients.length; i++) { const expectedType = currentOrder.ingredients[i]; const actualType = stackedTypes[i]; const position = i === 0 ? "bottom" : i === stackedTypes.length - 1 ? "top" : `layer ${i + 1}`; console.log(`Comparing layer ${i}:`, { expected: expectedType, actual: actualType, isSauce: Object.keys(sauceTypes).includes(expectedType) }); // Enhanced sauce comparison if (Object.keys(sauceTypes).includes(expectedType)) { // Enhanced sauce comparison with type normalization const normalizedExpected = expectedType === 'secret-sauce' ? 'secret-sauce' : expectedType; const normalizedActual = actualType === 'secret-sauce' ? 'secret-sauce' : actualType; if (normalizedExpected !== normalizedActual) { const expectedSauceName = sauceTypes[expectedType].name; const actualSauceName = actualType ? (sauceTypes[actualType]?.name || 'wrong sauce') : 'no sauce'; failOrder(`Wrong sauce at ${position}! Expected ${expectedSauceName}, got ${actualSauceName}`); return; } continue; } // Handle regular ingredient comparison if (expectedType !== actualType) { failOrder(`Wrong ingredient at ${position}! Expected ${expectedType}, got ${actualType || 'nothing'}`); return; } } // Do final cooking state checks before completing the order const pattyStates = stackedIngredients .filter(ing => ing.type === 'patty') .map(ing => ing.cookingState); // Double-check for raw or burnt patties (redundant but safe) if (pattyStates.includes('raw') && currentOrder.cookingRequirement !== 'raw') { playerLives--; document.getElementById('livesValue').textContent = '❤️'.repeat(playerLives); serveBadBurger("Food safety violation! Raw meat detected! 🤢", 500); return; } if (pattyStates.includes('burnt') && currentOrder.cookingRequirement !== 'burnt') { playerLives--; document.getElementById('livesValue').textContent = '❤️'.repeat(playerLives); serveBadBurger("Burnt patty detected when not requested! 🔥", 125); return; } // Accept all patty states and complete order if ingredients are correct const currentPatty = stackedIngredients.find(ing => ing.type === 'patty'); // If we got here, the ingredients are correct, so complete the order completeOrder(); } // Function to complete order function completeOrder() { clearInterval(orderTimer); // Cache the current score before modifications const previousScore = playerScore; // Calculate points based on order and cooking state const currentPatty = burgerIngredients.find(ing => ing.type === 'patty' && ing.isOnPlate()); let orderPoints = 0; let bonusPoints = 0; if (currentPatty && currentPatty.cookingState === 'burnt') { // No points for burnt orders orderPoints = 0; } else { // Normal scoring for non-burnt orders orderPoints = currentOrder.points; bonusPoints = 10; // $10 tip for good orders } // Update the total score playerScore = previousScore + orderPoints + bonusPoints; // Update score display document.getElementById('scoreValue').textContent = playerScore; // Remove the completed burger from the scene const stackedIngredients = burgerIngredients.filter(ing => ing.isOnPlate()); stackedIngredients.forEach(ingredient => { scene.remove(ingredient.mesh); world.removeBody(ingredient.body); const index = burgerIngredients.indexOf(ingredient); if (index > -1) { burgerIngredients.splice(index, 1); } }); // Create success message // Get random feedback message const randomFeedback = feedbackMessages.good[Math.floor(Math.random() * feedbackMessages.good.length)]; // Create success message container const successMessage = document.createElement('div'); successMessage.style.position = 'absolute'; successMessage.style.top = '50%'; successMessage.style.left = '50%'; successMessage.style.transform = 'translate(-50%, -50%)'; successMessage.style.backgroundColor = 'rgba(0, 255, 0, 0.8)'; successMessage.style.color = 'white'; successMessage.style.padding = '20px'; successMessage.style.borderRadius = '10px'; successMessage.style.fontSize = '24px'; successMessage.style.zIndex = '1000'; successMessage.style.textAlign = 'center'; // Create detailed message showing score breakdown let messageHeader = ''; let additionalFeedback = ''; if (currentPatty && currentPatty.cookingState === 'burnt') { messageHeader = "Order Complete (No Money - Burnt Order)"; additionalFeedback = '⚠️ Burnt orders are served without points! ⚠️'; } else { messageHeader = `Perfect! Order Complete`; additionalFeedback = `

Order Price: +\$${orderPoints}
Tip: +\$${bonusPoints}
Total: +\$${orderPoints + bonusPoints}

`; } successMessage.innerHTML = `

${messageHeader}

${randomFeedback}

${additionalFeedback ? `

${additionalFeedback}

` : ''} `; parentDiv.appendChild(successMessage); // Increase level every 3 successful orders if (playerScore >= currentLevel * 500) { currentLevel = Math.min(4, currentLevel + 1); orderTimeLimit = Math.max(30, orderTimeLimit - 5); // Reduce time limit } // Remove success message and start new order after delay setTimeout(() => { successMessage.remove(); startNewOrder(); }, 1500); } // Function to handle serving bad burgers function serveBadBurger(reason) { clearInterval(orderTimer); // Remove all ingredients from the plate const stackedIngredients = burgerIngredients.filter(ing => ing.isOnPlate()); stackedIngredients.forEach(ingredient => { scene.remove(ingredient.mesh); world.removeBody(ingredient.body); const index = burgerIngredients.indexOf(ingredient); if (index > -1) { burgerIngredients.splice(index, 1); } }); // Start new order immediately without any notification startNewOrder(); } // Function to show game over screen function showGameOver() { const gameOverScreen = document.createElement('div'); gameOverScreen.style.position = 'absolute'; gameOverScreen.style.top = '50%'; gameOverScreen.style.left = '50%'; gameOverScreen.style.transform = 'translate(-50%, -50%)'; gameOverScreen.style.backgroundColor = 'rgba(0, 0, 0, 0.9)'; gameOverScreen.style.color = 'white'; gameOverScreen.style.padding = '40px'; gameOverScreen.style.borderRadius = '20px'; gameOverScreen.style.textAlign = 'center'; gameOverScreen.style.zIndex = '2000'; gameOverScreen.innerHTML = `

Game Over!

Final Money: \$${playerScore}

Kindly Refresh Your Browser To Play Again

`; parentDiv.appendChild(gameOverScreen); } // Function to restart game function restartGame() { // Clear any existing timers if (orderTimer) { clearInterval(orderTimer); orderTimer = null; } // Reset all game variables playerScore = 0; playerLives = 5; currentLevel = 1; orderTimeLimit = 60; gameOver = false; lastOrder = null; gameStarted = false; // Clear all ingredients and reset their states burgerIngredients.forEach(ingredient => { if (ingredient.sizzleSound) { ingredient.sizzleSound.pause(); ingredient.sizzleSound.currentTime = 0; } scene.remove(ingredient.mesh); world.removeBody(ingredient.body); }); burgerIngredients = []; // Reset display elements document.getElementById('scoreValue').textContent = '0'; document.getElementById('livesValue').textContent = '❤️'.repeat(5); document.getElementById('timerValue').textContent = '60'; document.getElementById('orderDetails').innerHTML = ''; // Hide game UI elements if (hudContainer) hudContainer.style.display = 'none'; if (sauceButtonsContainer) sauceButtonsContainer.style.display = 'none'; // Show title screen showTitleScreen(); } // Function to fail order function failOrder(reason, penalty = 50) { if (gameOver) return; clearInterval(orderTimer); const previousScore = playerScore; const currentScore = playerScore; playerScore = currentScore - penalty; // Allow negative scores document.getElementById('scoreValue').textContent = playerScore; // Check if score went from positive to zero if (previousScore > 0 && playerScore === 0) { playerLives--; document.getElementById('livesValue').textContent = '❤️'.repeat(playerLives); if (playerLives <= 0) { gameOver = true; showGameOver(); return; } } // Create and show failure message const failureMessage = document.createElement('div'); failureMessage.style.position = 'absolute'; failureMessage.style.top = '50%'; failureMessage.style.left = '50%'; failureMessage.style.transform = 'translate(-50%, -50%)'; failureMessage.style.backgroundColor = 'rgba(255, 0, 0, 0.8)'; failureMessage.style.color = 'white'; failureMessage.style.padding = '20px'; failureMessage.style.borderRadius = '10px'; failureMessage.style.fontSize = '24px'; failureMessage.style.zIndex = '1000'; failureMessage.innerHTML = ` ${reason} (-${penalty} points)
${playerLives > 0 ? `Lives remaining: ${'❤️'.repeat(playerLives)}` : ''} `; parentDiv.appendChild(failureMessage); // Remove the message after a delay setTimeout(() => { failureMessage.remove(); if (!gameOver) { startNewOrder(); } }, 1500); } // Add serve button const serveButton = document.createElement('button'); serveButton.textContent = '🍔 Serve Burger'; serveButton.style.padding = '10px 20px'; serveButton.style.borderRadius = '5px'; serveButton.style.border = 'none'; serveButton.style.backgroundColor = '#4CAF50'; serveButton.style.color = 'white'; serveButton.style.cursor = 'pointer'; serveButton.style.marginRight = '20px'; serveButton.addEventListener('click', checkBurger); sauceButtonsContainer.insertBefore(serveButton, sauceButtonsContainer.firstChild); // Add skip order button const skipButton = document.createElement('button'); skipButton.textContent = '⏭️ Skip Order (-\$50)'; skipButton.style.padding = '10px 20px'; skipButton.style.borderRadius = '5px'; skipButton.style.border = 'none'; skipButton.style.backgroundColor = '#ff4444'; skipButton.style.color = 'white'; skipButton.style.cursor = 'pointer'; skipButton.style.marginRight = '20px'; skipButton.addEventListener('click', () => { if (gameOver) return; // Clear current order timer clearInterval(orderTimer); // Apply penalties playerScore -= 50; playerLives--; // Update displays document.getElementById('scoreValue').textContent = playerScore; document.getElementById('livesValue').textContent = '❤️'.repeat(Math.max(0, playerLives)); // Create warning message const skipMessage = document.createElement('div'); skipMessage.style.position = 'absolute'; skipMessage.style.top = '50%'; skipMessage.style.left = '50%'; skipMessage.style.transform = 'translate(-50%, -50%)'; skipMessage.style.backgroundColor = 'rgba(255, 165, 0, 0.9)'; skipMessage.style.color = 'white'; skipMessage.style.padding = '20px'; skipMessage.style.borderRadius = '10px'; skipMessage.style.fontSize = '24px'; skipMessage.style.zIndex = '1000'; skipMessage.style.textAlign = 'center'; skipMessage.innerHTML = ` ⚠️ Order Skipped! ⚠️
-\$50
Lost 1 life
${playerLives > 0 ? `Lives remaining: ${'❤️'.repeat(Math.max(0, playerLives))}` : 'Game Over!'} `; parentDiv.appendChild(skipMessage); // Remove all ingredients from the plate const stackedIngredients = burgerIngredients.filter(ing => ing.isOnPlate()); stackedIngredients.forEach(ingredient => { scene.remove(ingredient.mesh); world.removeBody(ingredient.body); const index = burgerIngredients.indexOf(ingredient); if (index > -1) { burgerIngredients.splice(index, 1); } }); // Check for game over if (playerLives <= 0) { setTimeout(() => { skipMessage.remove(); gameOver = true; showGameOver(); }, 1500); return; } // Remove message and start new order after delay setTimeout(() => { skipMessage.remove(); startNewOrder(); }, 1500); }); sauceButtonsContainer.insertBefore(skipButton, sauceButtonsContainer.firstChild); // Function to show tutorial messages function showTutorialMessages() { if (currentTutorialStep >= tutorialSteps.length) { isFirstBurger = false; return; } const tutorialMessage = document.createElement('div'); tutorialMessage.style.position = 'absolute'; tutorialMessage.style.top = '50%'; tutorialMessage.style.left = '50%'; tutorialMessage.style.transform = 'translate(-50%, -50%)'; tutorialMessage.style.backgroundColor = 'rgba(0, 0, 0, 0.8)'; tutorialMessage.style.color = 'white'; tutorialMessage.style.padding = '20px'; tutorialMessage.style.borderRadius = '10px'; tutorialMessage.style.fontSize = '24px'; tutorialMessage.style.zIndex = '3000'; tutorialMessage.style.textAlign = 'center'; tutorialMessage.style.boxShadow = '0 0 10px rgba(255, 255, 255, 0.3)'; tutorialMessage.style.animation = 'fadeIn 0.5s ease-in'; // Create message content div const messageContent = document.createElement('div'); messageContent.style.marginBottom = '15px'; messageContent.innerHTML = tutorialSteps[currentTutorialStep].message; tutorialMessage.appendChild(messageContent); // Create OK button const okButton = document.createElement('button'); okButton.textContent = 'OK'; okButton.style.padding = '8px 20px'; okButton.style.fontSize = '18px'; okButton.style.backgroundColor = '#4CAF50'; okButton.style.color = 'white'; okButton.style.border = 'none'; okButton.style.borderRadius = '5px'; okButton.style.cursor = 'pointer'; okButton.style.transition = 'transform 0.2s'; okButton.addEventListener('mouseover', () => { okButton.style.transform = 'scale(1.1)'; }); okButton.addEventListener('mouseout', () => { okButton.style.transform = 'scale(1)'; }); okButton.addEventListener('click', () => { tutorialMessage.style.animation = 'fadeIn 0.5s ease-out reverse'; setTimeout(() => { tutorialMessage.remove(); currentTutorialStep++; if (currentTutorialStep < tutorialSteps.length) { showTutorialMessages(); } }, 500); }); tutorialMessage.appendChild(okButton); // Add CSS animation const style = document.createElement('style'); style.textContent = ` @keyframes fadeIn { from { opacity: 0; transform: translate(-50%, -60%); } to { opacity: 1; transform: translate(-50%, -50%); } } `; document.head.appendChild(style); parentDiv.appendChild(tutorialMessage); } // Show title screen instead of starting game immediately // Initialize with title screen only showTitleScreen();