import * as THREE from 'three'; import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js'; // Import GLTFLoader import { HandLandmarker, FilesetResolver } from 'https://esm.sh/@mediapipe/tasks-vision@0.10.14'; import { AudioManager } from 'audioManager'; // Import the AudioManager export class Game { // Added export here constructor(renderDiv) { this.renderDiv = renderDiv; this.scene = null; this.camera = null; this.renderer = null; this.videoElement = null; this.handLandmarker = null; this.lastVideoTime = -1; this.ghosts = []; // Renamed from cubes this.hands = []; // Stores data about detected hands (landmarks, anchor position, line group) this.handLineMaterial = null; // Material for hand lines this.fingertipMaterial = null; // Material for fingertip circles this.fingertipLandmarkIndices = [4, 8, 12, 16, 20]; // TIP landmarks this.handConnections = null; // Landmark connection definitions this.handCollisionRadius = 30; // Conceptual radius for hand collision, was 25 (sphere radius) this.gameState = 'loading'; // loading, ready, playing, gameover, error this.gameOverText = null; this.startButton = null; // Add reference for start button this.startScreenOverlay = null; // Reference for the start screen overlay this.spawnIntervalId = null; this.clock = new THREE.Clock(); this.centerEmojiMarker = null; // Reference for the emoji marker DOM element this.chadImageMarker = null; // Reference for the Chad image marker DOM element this.particles = []; // Array to hold active particle systems this.particleGeometry = null; // Reusable geometry for particles this.particleMaterial = null; // Reusable material for particles this.score = 0; this.scoreDisplay = null; this.audioManager = new AudioManager(); // Create an instance of AudioManager this.lastLandmarkPositions = [{}, {}]; // Store last known positions for each hand's landmarks this.loadedModels = {}; // To store loaded models like the ghost this.ghostTextures = []; // Array to store multiple ghost textures this.pickedUpGhostsInfo = new Map(); // To store info about picked up ghosts (which hand, initial Y) this.fallingGhosts = new Set(); // Ghosts currently falling this.gravity = -980; // Gravity acceleration in world units per second^2 this.dropHeightThreshold = 75; // Min height diff from pickup to trigger disappearance (lowered from 100) this.groundLevelY = -250; // Y-coordinate for the "ground" - Lowered further this.watermelonWorldX = 0; // X-coordinate of the watermelon's center (calculated in _setupDOM) this.watermelonCenterY = 0; // Y-coordinate of the watermelon's center (calculated in _setupDOM) this.groundLineMesh = null; // Reference to the visual ground line // Initialize asynchronously this._init().catch(error => { console.error("Initialization failed:", error); this._showError("Initialization failed. Check console."); }); } async _init() { this._setupDOM(); this._setupThree(); await this._loadAssets(); // Add asset loading step await this._setupHandTracking(); // This needs to complete before we can proceed // Ensure webcam is playing before starting game logic dependent on it await this.videoElement.play(); window.addEventListener('resize', this._onResize.bind(this)); this.gameState = 'ready'; // Change state to ready, not playing // Show start button now that loading is complete this._showStartButton(); this._animate(); // Start the animation loop (it will check state) } _setupDOM() { this.renderDiv.style.position = 'relative'; this.renderDiv.style.width = '100vw'; // Use viewport units for fullscreen this.renderDiv.style.height = '100vh'; this.renderDiv.style.overflow = 'hidden'; this.renderDiv.style.background = '#111'; // Fallback background // --- Start Screen Overlay --- this.startScreenOverlay = document.createElement('div'); this.startScreenOverlay.style.position = 'absolute'; this.startScreenOverlay.style.top = '0'; this.startScreenOverlay.style.left = '0'; this.startScreenOverlay.style.width = '100%'; this.startScreenOverlay.style.height = '100%'; this.startScreenOverlay.style.background = `url('https://play.rosebud.ai/assets/nerdCover.png?r0G7') no-repeat center center / cover`; this.startScreenOverlay.style.zIndex = '30'; // Above everything else initially this.startScreenOverlay.style.display = 'flex'; // Use flexbox for centering content this.startScreenOverlay.style.flexDirection = 'column'; this.startScreenOverlay.style.justifyContent = 'center'; this.startScreenOverlay.style.alignItems = 'center'; this.startScreenOverlay.style.color = '#fff'; this.startScreenOverlay.style.textAlign = 'center'; this.startScreenOverlay.style.fontFamily = '"Arial Black", Gadget, sans-serif'; // Text shadow will be applied to individual elements for more control // Create a container for the text elements to apply a background const textContainer = document.createElement('div'); textContainer.style.backgroundColor = 'rgba(0, 0, 0, 0.4)'; // Further reduced opacity textContainer.style.padding = '10px 25px'; // Further reduced padding textContainer.style.borderRadius = '15px'; textContainer.style.maxWidth = '90%'; textContainer.style.boxSizing = 'border-box'; // Ensure padding is included in maxWidth const title = document.createElement('h1'); title.innerText = "LeetCoders vs. Chad"; // New game title title.style.fontSize = 'clamp(40px, 10vw, 80px)'; title.style.marginBottom = '20px'; title.style.textShadow = '3px 3px 8px rgba(0,0,0,0.9)'; // Refined shadow textContainer.appendChild(title); const instructions = document.createElement('p'); instructions.innerHTML = `Use your hands to pick up and drop LeetCoders.
Prevent them from reaching Chad's Castle!`; instructions.style.fontSize = 'clamp(18px, 4vw, 30px)'; // instructions.style.maxWidth = '80%'; // MaxWidth now on textContainer instructions.style.lineHeight = '1.5'; instructions.style.marginBottom = '30px'; // Adjusted margin instructions.style.textShadow = '2px 2px 6px rgba(0,0,0,0.8)'; // Refined shadow textContainer.appendChild(instructions); // Add loading text, will be hidden later const loadingText = document.createElement('p'); loadingText.id = 'loading-text'; loadingText.innerText = 'Loading assets and webcam...'; loadingText.style.fontSize = 'clamp(16px, 3vw, 24px)'; loadingText.style.fontStyle = 'italic'; loadingText.style.marginTop = '10px'; // Added margin loadingText.style.textShadow = '1px 1px 4px rgba(0,0,0,0.7)'; // Refined shadow textContainer.appendChild(loadingText); this.startScreenOverlay.appendChild(textContainer); // Add the text container to the overlay this.renderDiv.appendChild(this.startScreenOverlay); // --- End Start Screen Overlay --- this.videoElement = document.createElement('video'); this.videoElement.style.position = 'absolute'; this.videoElement.style.top = '0'; this.videoElement.style.left = '0'; this.videoElement.style.width = '100%'; this.videoElement.style.height = '100%'; this.videoElement.style.objectFit = 'cover'; this.videoElement.style.transform = 'scaleX(-1)'; // Mirror view for intuitive control this.videoElement.autoplay = true; this.videoElement.muted = true; // Mute video to avoid feedback loops if audio was captured this.videoElement.playsInline = true; this.videoElement.style.zIndex = '0'; // Ensure video is behind THREE canvas this.renderDiv.appendChild(this.videoElement); // Container for Game Over text and restart hint this.gameOverContainer = document.createElement('div'); this.gameOverContainer.style.position = 'absolute'; this.gameOverContainer.style.top = '50%'; this.gameOverContainer.style.left = '50%'; this.gameOverContainer.style.transform = 'translate(-50%, -50%)'; this.gameOverContainer.style.zIndex = '10'; this.gameOverContainer.style.display = 'none'; // Hidden initially this.gameOverContainer.style.pointerEvents = 'none'; // Don't block clicks this.gameOverContainer.style.textAlign = 'center'; // Center text elements within this.gameOverContainer.style.color = 'red'; this.gameOverContainer.style.textShadow = '2px 2px 4px black'; this.gameOverContainer.style.fontFamily = '"Arial Black", Gadget, sans-serif'; // Main Game Over Text this.gameOverText = document.createElement('div'); this.gameOverText.innerText = 'GAME OVER'; this.gameOverText.style.fontSize = 'clamp(36px, 10vw, 72px)'; // Responsive font size this.gameOverText.style.fontWeight = 'bold'; this.gameOverText.style.marginBottom = '10px'; // Space below main text this.gameOverContainer.appendChild(this.gameOverText); // Restart Hint Text this.restartHintText = document.createElement('div'); this.restartHintText.innerText = '(click to restart game)'; this.restartHintText.style.fontSize = 'clamp(16px, 3vw, 24px)'; this.restartHintText.style.fontWeight = 'normal'; this.restartHintText.style.opacity = '0.8'; // Slightly faded this.gameOverContainer.appendChild(this.restartHintText); this.renderDiv.appendChild(this.gameOverContainer); this.scoreDisplay = document.createElement('div'); this.scoreDisplay.style.position = 'absolute'; this.scoreDisplay.style.bottom = '20px'; // Changed from top this.scoreDisplay.style.left = '20px'; // Keep left this.scoreDisplay.style.fontFamily = '"Arial Black", Gadget, sans-serif'; this.scoreDisplay.style.fontSize = 'clamp(24px, 5vw, 48px)'; this.scoreDisplay.style.fontWeight = '900'; // Bolder font this.scoreDisplay.style.color = 'rgba(255,255,0,0.8)'; // Semi-transparent yellow this.scoreDisplay.style.textShadow = '1px 1px 3px black'; this.scoreDisplay.style.zIndex = '10'; this.scoreDisplay.style.pointerEvents = 'none'; this.scoreDisplay.innerText = `SCORE: ${this.score}`; this.scoreDisplay.style.display = 'none'; // Hide initially this.renderDiv.appendChild(this.scoreDisplay); // Watermelon (Center Emoji Marker) setup const EMOJI_APPROX_HEIGHT = 150; // Increased from 100 const emojiVisualOffsetFromRight = EMOJI_APPROX_HEIGHT / 2 + 25; // Adjusted margin slightly this.watermelonWorldX = (this.renderDiv.clientWidth / 2) - emojiVisualOffsetFromRight; this.watermelonCenterY = this.groundLevelY + (EMOJI_APPROX_HEIGHT / 2); this.centerEmojiMarker = document.createElement('div'); this.centerEmojiMarker.innerText = '🏰 '; this.centerEmojiMarker.style.position = 'absolute'; this.centerEmojiMarker.style.left = `calc(100% - ${emojiVisualOffsetFromRight}px)`; this.centerEmojiMarker.style.top = `calc(50% - ${this.watermelonCenterY}px)`; // CSS top from viewport center this.centerEmojiMarker.style.transform = 'translate(-50%, -50%)'; this.centerEmojiMarker.style.fontSize = `${EMOJI_APPROX_HEIGHT}px`; // Use the new height for font size this.centerEmojiMarker.style.opacity = '1'; this.centerEmojiMarker.style.zIndex = '5'; this.centerEmojiMarker.style.pointerEvents = 'none'; this.centerEmojiMarker.style.display = 'none'; // Hide initially this.renderDiv.appendChild(this.centerEmojiMarker); // Chad Image Marker setup (above castle) this.chadImageMarker = document.createElement('div'); this.chadImageMarker.style.position = 'absolute'; this.chadImageMarker.style.width = '150px'; // Increased width this.chadImageMarker.style.height = '180px'; // Increased height this.chadImageMarker.style.backgroundImage = `url('https://rosebud.ai/assets/chad.png?ulwk')`; this.chadImageMarker.style.backgroundSize = 'contain'; this.chadImageMarker.style.backgroundRepeat = 'no-repeat'; this.chadImageMarker.style.backgroundPosition = 'center'; // Position it above the castle emoji. // The castle's top is `calc(50% - ${this.watermelonCenterY}px - ${EMOJI_APPROX_HEIGHT / 2}px)` effectively // So we set the bottom of chadImage to align with the top of the castle. const chadImageWidth = 150; // Must match style.width const chadImageHeight = 180; // Must match style.height this.chadImageMarker.style.left = `calc(100% - ${emojiVisualOffsetFromRight}px - ${chadImageWidth / 2}px)`; // Center chad with castle this.chadImageMarker.style.top = `calc(50% - ${this.watermelonCenterY}px - ${EMOJI_APPROX_HEIGHT / 2}px - ${chadImageHeight}px + 15px)`; // Place above castle, adjusted offset this.chadImageMarker.style.zIndex = '6'; // Above castle (z=5) this.chadImageMarker.style.pointerEvents = 'none'; this.chadImageMarker.style.display = 'none'; // Hide initially this.renderDiv.appendChild(this.chadImageMarker); // Start Button - Now positioned inside the overlay initially this.startButton = document.createElement('button'); this.startButton.innerText = 'START GAME'; // Remove absolute positioning, let flexbox handle it in overlay // this.startButton.style.position = 'absolute'; // this.startButton.style.top = '50%'; // this.startButton.style.left = '50%'; // this.startButton.style.transform = 'translate(-50%, -50%)'; this.startButton.style.marginTop = '20px'; // Add some space above button this.startButton.style.padding = '20px 40px'; this.startButton.style.fontSize = 'clamp(20px, 5vw, 40px)'; this.startButton.style.fontFamily = '"Arial Black", Gadget, sans-serif'; this.startButton.style.fontWeight = 'bold'; this.startButton.style.color = '#fff'; this.startButton.style.backgroundColor = '#4CAF50'; // Green this.startButton.style.border = '5px solid #FF476F'; this.startButton.style.borderRadius = '10px'; this.startButton.style.cursor = 'pointer'; this.startButton.style.boxShadow = '0 5px 15px rgba(0,0,0,0.3)'; // this.startButton.style.zIndex = '20'; // zIndex handled by parent overlay this.startButton.style.display = 'none'; // Hidden initially, shown after loading this.startButton.onclick = this._startGame.bind(this); // Bind click handler // Append startButton to the textContainer as well, or directly to overlay if preferred // For now, keeping it in the overlay but after the textContainer for logical flow this.startScreenOverlay.appendChild(this.startButton); } _setupThree() { const width = this.renderDiv.clientWidth; const height = this.renderDiv.clientHeight; this.scene = new THREE.Scene(); // Using OrthographicCamera for a 2D-like overlay effect this.camera = new THREE.OrthographicCamera(width / -2, width / 2, height / 2, height / -2, 1, 1000); this.camera.position.z = 100; // Position along Z doesn't change scale in Ortho this.renderer = new THREE.WebGLRenderer({ alpha: true, antialias: true }); this.renderer.setSize(width, height); this.renderer.setPixelRatio(window.devicePixelRatio); this.renderer.domElement.style.position = 'absolute'; this.renderer.domElement.style.top = '0'; this.renderer.domElement.style.left = '0'; this.renderer.domElement.style.zIndex = '1'; // Canvas on top of video this.renderDiv.appendChild(this.renderer.domElement); const ambientLight = new THREE.AmbientLight(0xffffff, 0.7); this.scene.add(ambientLight); const directionalLight = new THREE.DirectionalLight(0xffffff, 0.9); directionalLight.position.set(0, 0, 100); // Pointing from behind camera this.scene.add(directionalLight); // Setup hand visualization (palm circles removed, lines will be added later) for (let i = 0; i < 2; i++) { // Support up to 2 hands const lineGroup = new THREE.Group(); lineGroup.visible = false; this.scene.add(lineGroup); this.hands.push({ landmarks: null, anchorPos: new THREE.Vector3(), lineGroup: lineGroup, pickedUpGhost: null, // Ghost object currently held by this hand isPinching: false, // Is this hand currently pinching? pinchPointWorld: new THREE.Vector3() // World coordinates of the pinch midpoint }); } this.handLineMaterial = new THREE.LineBasicMaterial({ color: 0x00ccff, linewidth: 8 }); // Increased linewidth from 5 to 8 this.fingertipMaterial = new THREE.MeshBasicMaterial({ color: 0xff8800, side: THREE.DoubleSide }); // Orange for fingertips // Define connections for MediaPipe hand landmarks // See: https://developers.google.com/mediapipe/solutions/vision/hand_landmarker#hand_landmarks this.handConnections = [ // Thumb [0, 1], [1, 2], [2, 3], [3, 4], // Index finger [0, 5], [5, 6], [6, 7], [7, 8], // Middle finger [0, 9], [9, 10], [10, 11], [11, 12], // Ring finger [0, 13], [13, 14], [14, 15], [15, 16], // Pinky [0, 17], [17, 18], [18, 19], [19, 20], // Palm [5, 9], [9, 13], [13, 17] // Connect base of fingers ]; // Setup reusable particle resources this.particleGeometry = new THREE.BoxGeometry(3, 3, 3); // Small cubes as particles for explosions this.particleMaterial = new THREE.MeshBasicMaterial({ transparent: true }); // Basic material, color set per system // Note: We can reuse particleGeometry or create a different one (e.g., SphereGeometry) if desired // Create the ground line const groundLinePoints = []; groundLinePoints.push(new THREE.Vector3(width / -2, this.groundLevelY, 0)); // z=0, behind sprites groundLinePoints.push(new THREE.Vector3(width / 2, this.groundLevelY, 0)); const groundLineGeometry = new THREE.BufferGeometry().setFromPoints(groundLinePoints); const groundLineMaterial = new THREE.LineBasicMaterial({ color: 0xffffff, linewidth: 5 }); // Bold white line this.groundLineMesh = new THREE.Line(groundLineGeometry, groundLineMaterial); this.scene.add(this.groundLineMesh); } async _loadAssets() { console.log("Loading assets..."); const textureLoader = new THREE.TextureLoader(); const gltfLoader = new GLTFLoader(); // Keep GLTFLoader if needed for other models try { // Load Ghost Textures const textureUrls = [ 'https://rosebud.ai/assets/msn-mobile-icon.png?Em51', 'https://rosebud.ai/assets/nerd.png?EGVR', 'https://rosebud.ai/assets/msn3-5.png?Qf66' ]; const texturePromises = textureUrls.map(url => textureLoader.loadAsync(url)); this.ghostTextures = await Promise.all(texturePromises); this.ghostTextures.forEach(texture => { texture.colorSpace = THREE.SRGBColorSpace; // Ensure correct color for all }); console.log(`${this.ghostTextures.length} Ghost textures loaded.`); // Load Ghost GLTF Model (keep if you plan to use it later, otherwise remove) /* const gltf = await gltfLoader.loadAsync('https://play.rosebud.ai/assets/Ghost.gltf?CtHQ'); gltf.scene.traverse((child) => { if (child.isMesh) { child.castShadow = true; child.material.metalness = 0; } }); const box = new THREE.Box3().setFromObject(gltf.scene); const size = box.getSize(new THREE.Vector3()); this.loadedModels.ghost = { scene: gltf.scene, size: size, center: box.getCenter(new THREE.Vector3()) }; console.log("Ghost GLTF model loaded and stored."); */ } catch (error) { console.error("Error loading assets:", error); this._showError("Failed to load game assets."); throw error; // Stop initialization } } async _setupHandTracking() { try { console.log("Setting up Hand Tracking..."); const vision = await FilesetResolver.forVisionTasks( 'https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@0.10.14/wasm' ); this.handLandmarker = await HandLandmarker.createFromOptions(vision, { baseOptions: { modelAssetPath: `https://storage.googleapis.com/mediapipe-models/hand_landmarker/hand_landmarker/float16/1/hand_landmarker.task`, delegate: 'GPU', // Use GPU if available }, numHands: 2, runningMode: 'VIDEO', // Process video stream }); console.log("HandLandmarker created."); console.log("Requesting webcam access..."); const stream = await navigator.mediaDevices.getUserMedia({ video: { facingMode: 'user', width: { ideal: 1280 }, height: { ideal: 720 } }, audio: false, }); this.videoElement.srcObject = stream; console.log("Webcam stream obtained."); // Wait for video metadata to load to ensure dimensions are available return new Promise((resolve) => { this.videoElement.onloadedmetadata = () => { console.log("Webcam metadata loaded."); // Adjust video size slightly after metadata is loaded if needed, but CSS handles most this.videoElement.style.width = this.renderDiv.clientWidth + 'px'; this.videoElement.style.height = this.renderDiv.clientHeight + 'px'; resolve(); }; }); } catch (error) { console.error('Error setting up Hand Tracking or Webcam:', error); this._showError(`Webcam/Hand Tracking Error: ${error.message}. Please allow camera access.`); throw error; // Re-throw to stop initialization } } _startSpawning() { this._stopSpawning(); // Ensure any previous interval is cleared // Spawn initial burst (REMOVED) // for (let i = 0; i < 5; i++) this._spawnGhost(); // Start periodic spawning with dynamic interval based on score this._scheduleNextSpawn(); // Start the regular spawning immediately } _scheduleNextSpawn() { if (this.spawnIntervalId) clearTimeout(this.spawnIntervalId); // Use timeout for variable delays // Calculate spawn interval: Start at 1200ms, decrease by 5ms per 10 points (0.5ms per point) // Clamp minimum interval at 250ms to prevent impossible rates const baseInterval = 2000; // Increased base interval (was 1100ms) const scoreModifier = this.score * 0.3; // Interval decreases slower with score (was 0.75) const minInterval = 500; // Increased minimum interval (was 200ms) const spawnInterval = Math.max(minInterval, baseInterval - scoreModifier); // Calculate how many ghosts to spawn in this batch based on score let numGhostsToSpawn = 1 + Math.floor(this.score / 50); // 1 extra ghost for every 50 points numGhostsToSpawn = Math.min(numGhostsToSpawn, 3); // Cap at a maximum of 3 ghosts per spawn event this.spawnIntervalId = setTimeout(() => { if (this.gameState === 'playing') { for (let i = 0; i < numGhostsToSpawn; i++) { this._spawnGhost(); // Spawn the calculated number of ghosts } this._scheduleNextSpawn(); // Schedule the *next* spawn event } }, spawnInterval); } _stopSpawning() { if (this.spawnIntervalId) { clearTimeout(this.spawnIntervalId); // Use clearTimeout now this.spawnIntervalId = null; } } // Renamed from _spawnCube _spawnGhost() { if (!this.ghostTextures || this.ghostTextures.length === 0) { console.error("Ghost textures not loaded, cannot spawn ghost."); return; } // Randomly select a texture const randomIndex = Math.floor(Math.random() * this.ghostTextures.length); const selectedTexture = this.ghostTextures[randomIndex]; const spriteMaterial = new THREE.SpriteMaterial({ map: selectedTexture, alphaTest: 0.1, // Don't render fully transparent pixels transparent: true }); const ghostSprite = new THREE.Sprite(spriteMaterial); let spriteSize; const NERD_TEXTURE_URL = 'https://rosebud.ai/assets/nerd.png?EGVR'; if (selectedTexture.image && selectedTexture.image.src === NERD_TEXTURE_URL) { // Nerd ghost: make it even larger (e.g., 120 to 200) spriteSize = 130 + Math.random() * 50; } else { // Regular ghost: (e.g., 60 to 100) spriteSize = 70 + Math.random() * 30; } ghostSprite.scale.set(spriteSize, spriteSize, 1); const width = this.renderDiv.clientWidth; const spawnMarginFromLeftEdge = spriteSize / 2 + 10; // So ghost is fully visible const x = (-width / 2) + spawnMarginFromLeftEdge; const y = this.groundLevelY + (spriteSize / 2); // Center of ghost, with base on groundLevelY ghostSprite.position.set(x, y, 1); // z=1 for visibility // Calculate speed - reduced values const baseSpeed = 40 + this.score * 0.1; // Reduced base speed (was 70) and slower scaling const randomSpeedRange = 30 + this.score * 0.05; // Reduced random range (was 50) and slower scaling let speed = baseSpeed + Math.random() * randomSpeedRange; speed = Math.min(speed, 250); // Reduced max speed (was 400) const direction = new THREE.Vector2(1, 0); // Move strictly from left to right ghostSprite.userData.velocity = direction.multiplyScalar(speed); ghostSprite.userData.size = spriteSize; // Store size for collision detection ghostSprite.userData.droppedFromHigh = false; // Initialize flag // Rotation not typically needed for 2D sprites facing the camera, but can add if desired // ghostSprite.userData.rotationSpeed = (Math.random() - 0.5) * 0.05; this.ghosts.push(ghostSprite); // Add to ghosts array this.scene.add(ghostSprite); } _updateHands() { if (!this.handLandmarker || !this.videoElement.srcObject || this.videoElement.readyState < 2) return; const videoTime = this.videoElement.currentTime; if (videoTime > this.lastVideoTime) { this.lastVideoTime = videoTime; try { const results = this.handLandmarker.detectForVideo(this.videoElement, performance.now()); const width = this.renderDiv.clientWidth; const height = this.renderDiv.clientHeight; const PINCH_THRESHOLD_3D = 42; // Increased from 35: Distance between thumb and index finger tips const PICKUP_RADIUS = 60; // Distance from pinch point to ghost center for pickup const GHOST_PICKUP_Z = 2; // Z-depth for the ghost when picked up for (let i = 0; i < this.hands.length; i++) { const hand = this.hands[i]; hand.isPinching = false; // Reset pinch state for the hand if (results.landmarks && results.landmarks[i]) { const currentLandmarks = results.landmarks[i]; hand.landmarks = currentLandmarks; const palm = currentLandmarks[9]; // MIDDLE_FINGER_MCP const handX = (1 - palm.x) * width - width / 2; const handY = (1 - palm.y) * height - height / 2; hand.anchorPos.set(handX, handY, 1); this._updateHandLines(i, currentLandmarks, width, height); hand.lineGroup.visible = true; // Pinch detection const thumbTipLandmark = currentLandmarks[4]; // THUMB_TIP const indexTipLandmark = currentLandmarks[8]; // INDEX_FINGER_TIP if (thumbTipLandmark && indexTipLandmark) { const thumbTipWorld = new THREE.Vector3( (1 - thumbTipLandmark.x) * width - width / 2, (1 - thumbTipLandmark.y) * height - height / 2, GHOST_PICKUP_Z ); const indexTipWorld = new THREE.Vector3( (1 - indexTipLandmark.x) * width - width / 2, (1 - indexTipLandmark.y) * height - height / 2, GHOST_PICKUP_Z ); const distance = thumbTipWorld.distanceTo(indexTipWorld); if (distance < PINCH_THRESHOLD_3D) { hand.isPinching = true; hand.pinchPointWorld.set( (thumbTipWorld.x + indexTipWorld.x) / 2, (thumbTipWorld.y + indexTipWorld.y) / 2, GHOST_PICKUP_Z ); } } // Ghost pickup logic if (hand.isPinching && !hand.pickedUpGhost) { for (const ghost of this.ghosts) { if (!this.pickedUpGhostsInfo.has(ghost.uuid)) { // Check if ghost is not already picked up by any hand const distToPinchPoint = ghost.position.distanceTo(hand.pinchPointWorld); if (distToPinchPoint < PICKUP_RADIUS) { hand.pickedUpGhost = ghost; this.pickedUpGhostsInfo.set(ghost.uuid, { handIndex: i, initialY: ghost.position.y }); this.audioManager.playPickupSound(); // Use new pickup sound break; } } } } else if (!hand.isPinching && hand.pickedUpGhost) { const droppedGhost = hand.pickedUpGhost; const pickupInfo = this.pickedUpGhostsInfo.get(droppedGhost.uuid); // Get this BEFORE deleting this.pickedUpGhostsInfo.delete(droppedGhost.uuid); hand.pickedUpGhost = null; const currentDropHeight = droppedGhost.position.y - (pickupInfo ? pickupInfo.initialY : this.groundLevelY + droppedGhost.userData.size / 2); if (currentDropHeight > this.dropHeightThreshold) { droppedGhost.userData.droppedFromHigh = true; // No immediate disappearance or score, will be handled on ground impact } else { droppedGhost.userData.droppedFromHigh = false; } // Always let it fall this.fallingGhosts.add(droppedGhost.uuid); droppedGhost.userData.velocity.x = 0; droppedGhost.userData.velocity.y = 0; } } else { // No landmarks for this hand hand.landmarks = null; if (hand.lineGroup) hand.lineGroup.visible = false; // If hand is lost while holding a ghost, drop it (treat as normal fall) if (hand.pickedUpGhost) { const droppedGhost = hand.pickedUpGhost; this.pickedUpGhostsInfo.delete(droppedGhost.uuid); // Remove from picked up map this.fallingGhosts.add(droppedGhost.uuid); // Add to falling set droppedGhost.userData.velocity.x = 0; // Reset horizontal velocity droppedGhost.userData.velocity.y = 0; // Reset vertical velocity for gravity to take over hand.pickedUpGhost = null; // Clear from hand } } } } catch (error) { console.error("Error during hand detection:", error); } } } _updateGhosts(deltaTime) { const centerThreshold = 45; for (let i = this.ghosts.length - 1; i >= 0; i--) { const ghost = this.ghosts[i]; if (this.pickedUpGhostsInfo.has(ghost.uuid)) { const pickupInfo = this.pickedUpGhostsInfo.get(ghost.uuid); const pickingHand = this.hands[pickupInfo.handIndex]; if (pickingHand && pickingHand.isPinching && pickingHand.pinchPointWorld) { ghost.position.copy(pickingHand.pinchPointWorld); } else { // Hand lost pinch or disappeared, ghost should be dropped (handled in _updateHands) // For safety, if it's still marked as picked up here but hand isn't pinching, release it this.pickedUpGhostsInfo.delete(ghost.uuid); // Ghost will now fall back to normal behavior in the next part of this loop } // Skip normal movement and game over check for picked up ghosts that are actively held if (pickingHand && pickingHand.pickedUpGhost === ghost) { // Ensure this hand is still holding THIS ghost continue; } } if (this.fallingGhosts.has(ghost.uuid)) { // Apply gravity ghost.userData.velocity.y += this.gravity * deltaTime; ghost.position.y += ghost.userData.velocity.y * deltaTime; // Check if landed on ground const ghostBottomY = ghost.position.y - (ghost.userData.size / 2); if (ghostBottomY <= this.groundLevelY) { ghost.position.y = this.groundLevelY + (ghost.userData.size / 2); ghost.userData.velocity.y = 0; // Stop vertical movement this.fallingGhosts.delete(ghost.uuid); // No longer falling if (ghost.userData.droppedFromHigh) { // Ghost hit the ground after a high drop - poof! this._createParticles(ghost.position, new THREE.Color(0xaaaaff)); // Special color for high drop this.scene.remove(ghost); if (ghost.material) ghost.material.dispose(); // No geometry for sprite to dispose const ghostIndex = this.ghosts.findIndex(g => g.uuid === ghost.uuid); if (ghostIndex > -1) this.ghosts.splice(ghostIndex, 1); this.score += 1; // Changed bonus points for high drop to 1 this._updateScoreDisplay(); this.audioManager.playGhostPoofSound(); // Use new, specific poof sound ghost.userData.droppedFromHigh = false; // Reset flag (though ghost is removed) continue; // Skip resuming movement for this ghost } else { // Normal landing, resume movement const baseSpeed = 40 + this.score * 0.1; const randomSpeedRange = 30 + this.score * 0.05; let speed = baseSpeed + Math.random() * randomSpeedRange; speed = Math.min(speed, 250); ghost.userData.velocity.x = speed; // Start moving right again } } // Skip normal movement and game over check for falling ghosts until they land continue; } // Normal ghost movement if not picked up AND not falling ghost.position.x += ghost.userData.velocity.x * deltaTime; ghost.position.y += ghost.userData.velocity.y * deltaTime; // This should be minimal if on ground // Ensure ghosts that are not falling stay on the ground level // This also handles ghosts that just landed and had their Y slightly adjusted. if (!this.fallingGhosts.has(ghost.uuid) && !this.pickedUpGhostsInfo.has(ghost.uuid)) { ghost.position.y = this.groundLevelY + (ghost.userData.size / 2); } // Check if ghost reached the watermelon (Game Over condition) const ghostRightEdge = ghost.position.x + (ghost.userData.size / 2); const EMOJI_APPROX_HEIGHT = 150; // Must match the new size in _setupDOM const watermelonLeftEdge = this.watermelonWorldX - (EMOJI_APPROX_HEIGHT / 2); if (ghostRightEdge >= watermelonLeftEdge) { this.gameState = 'gameover'; this._showGameOver(); this.audioManager.playGameOverSound(); break; } } } _showGameOver() { this.gameOverContainer.style.display = 'block'; // Show the container this.gameOverText.innerText = 'GAME OVER'; // Ensure correct text this.gameOverText.style.color = 'red'; // Ensure correct color this.restartHintText.style.display = 'block'; // Show the hint this._stopSpawning(); // Stop new ghosts // Optional: Fade out existing ghosts or make them stop this.ghosts.forEach(ghost => { // Changed from cubes // Example: Make ghosts semi-transparent if (ghost.material) ghost.material.opacity = 0.3; // Stop movement ghost.userData.velocity.set(0,0); }); // Hand mesh opacity change removed // this.hands.forEach(hand => { // if(hand.mesh.visible) { // hand.mesh no longer exists // hand.mesh.material.opacity = 0.3; // } // }); } _showError(message) { this.gameOverContainer.style.display = 'block'; // Show container this.gameOverText.innerText = `ERROR: ${message}`; // Set error text this.gameOverText.style.color = 'orange'; // Set error color this.restartHintText.style.display = 'none'; // Hide restart hint on error this.gameState = 'error'; this._stopSpawning(); this.hands.forEach(hand => { if (hand.lineGroup) hand.lineGroup.visible = false; }); // Hide start button if it was somehow visible if (this.startButton) this.startButton.style.display = 'none'; } _startGame() { console.log("Starting game from button..."); if (this.gameState !== 'ready') return; // Only start from ready state this.audioManager.resumeContext(); // Resume audio on start // Hide start screen overlay if it's visible if (this.startScreenOverlay) { this.startScreenOverlay.style.display = 'none'; } this.startButton.style.display = 'none'; // Hide button this.gameState = 'playing'; // Set state to playing this.lastVideoTime = -1; // Reset video time tracking for detection this.clock.start(); // Ensure clock is running // Show game elements that were hidden this.scoreDisplay.style.display = 'block'; this.centerEmojiMarker.style.display = 'block'; if (this.chadImageMarker) this.chadImageMarker.style.display = 'block'; // Show Chad image this._startSpawning(); // Start spawning ghosts } _restartGame() { console.log("Restarting game..."); this.gameOverContainer.style.display = 'none'; // Hide the whole container // Don't show the start overlay on restart if (this.startScreenOverlay) { this.startScreenOverlay.style.display = 'none'; } this.hands.forEach(hand => { if (hand.lineGroup) { hand.lineGroup.visible = false; // Hide lines initially on restart // Children (lines) are recreated on landmark detection, so no need to clear them here } }); // Remove remaining ghosts this.ghosts.forEach(ghost => { this.scene.remove(ghost); if (ghost.material) ghost.material.dispose(); // No geometry disposal usually needed for sprites }); this.ghosts = []; // Clear ghosts array // If ground line exists, ensure its material is reset (though it's not changed in gameover) // No specific reset needed for the line currently, but good to keep in mind if it gets effects. // Reset score this.score = 0; this._updateScoreDisplay(); // Ensure game elements are visible this.scoreDisplay.style.display = 'block'; this.centerEmojiMarker.style.display = 'block'; if (this.chadImageMarker) this.chadImageMarker.style.display = 'block'; this.gameState = 'playing'; this.lastVideoTime = -1; // Reset video time tracking this.clock.start(); // Restart clock if stopped this._startSpawning(); // Start spawning ghosts again } _updateScoreDisplay() { if(this.scoreDisplay) { this.scoreDisplay.innerText = `SCORE: ${this.score}`; } } _showStartButton() { // This is called when assets and webcam are ready if (this.startScreenOverlay) { // Hide loading text inside the overlay const loadingText = this.startScreenOverlay.querySelector('#loading-text'); if (loadingText) loadingText.style.display = 'none'; // Show the start button inside the overlay if (this.startButton) { this.startButton.style.display = 'block'; } } else { // Fallback if overlay wasn't created correctly if (this.startButton) { this.startButton.style.display = 'block'; // Position it centrally if overlay doesn't exist this.startButton.style.position = 'absolute'; this.startButton.style.top = '50%'; this.startButton.style.left = '50%'; this.startButton.style.transform = 'translate(-50%, -50%)'; this.startButton.style.zIndex = '20'; } } } _onResize() { const width = this.renderDiv.clientWidth; const height = this.renderDiv.clientHeight; // Update camera perspective this.camera.left = width / -2; this.camera.right = width / 2; this.camera.top = height / 2; this.camera.bottom = height / -2; this.camera.updateProjectionMatrix(); // Update renderer size this.renderer.setSize(width, height); // Update video element size this.videoElement.style.width = width + 'px'; this.videoElement.style.height = height + 'px'; // Update watermelon's world X position as it's relative to screen width const EMOJI_APPROX_HEIGHT = 150; // Must match the new size const emojiVisualOffsetFromRight = EMOJI_APPROX_HEIGHT / 2 + 35; // Adjusted margin this.watermelonWorldX = (width / 2) - emojiVisualOffsetFromRight; this.watermelonCenterY = this.groundLevelY + (EMOJI_APPROX_HEIGHT / 2); // Also update Y in case groundLevel changed // Update Chad image position if (this.chadImageMarker) { const chadImageWidth = 150; // Must match its styled width const chadImageHeight = 180; // Must match its styled height this.chadImageMarker.style.left = `calc(100% - ${emojiVisualOffsetFromRight}px - ${chadImageWidth / 2}px)`; this.chadImageMarker.style.top = `calc(50% - ${this.watermelonCenterY}px - ${EMOJI_APPROX_HEIGHT / 2}px - ${chadImageHeight}px + 15px)`; } // Update ground line geometry if (this.groundLineMesh) { const groundLinePoints = []; groundLinePoints.push(new THREE.Vector3(width / -2, this.groundLevelY, 0)); groundLinePoints.push(new THREE.Vector3(width / 2, this.groundLevelY, 0)); this.groundLineMesh.geometry.setFromPoints(groundLinePoints); // No need for .needsUpdate typically when using setFromPoints as it replaces the attribute. } } // --- Particle System Logic --- _createParticles(position, color) { const particleCount = 35; // Increased particle count const particleSpeed = 250; // Increased base speed const particleLife = 0.8; // Slightly longer life const baseParticleSize = 5; // Increased base size const system = { particles: [], life: particleLife }; // Use a slightly larger, more detailed geometry const particleGeometry = new THREE.IcosahedronGeometry(baseParticleSize, 0); // Small sphere for (let i = 0; i < particleCount; i++) { // Clone material for unique color/opacity per particle system const material = this.particleMaterial.clone(); // Introduce slight color variation around the base color (white for ghosts) const variedColor = color.clone().offsetHSL( (Math.random() - 0.5) * 0.1, // Small hue shift (Math.random() - 0.5) * 0.2, // Small saturation shift (Math.random() - 0.2) * 0.1 // Mostly brighter shift ); material.color.copy(variedColor); material.opacity = 1.0; // Start fully opaque const particle = new THREE.Mesh(particleGeometry, material); particle.position.copy(position); // Increase randomness in initial size const sizeVariation = 0.5 + Math.random() * 1.0; // Scale between 0.5x and 1.5x base size particle.scale.setScalar(sizeVariation); // Random outward velocity with more power const velocity = new THREE.Vector3( (Math.random() - 0.5) * 2, (Math.random() - 0.5) * 2, (Math.random() - 0.5) * 2 ).normalize().multiplyScalar(particleSpeed * (0.7 + Math.random() * 0.6)); // Higher and more varied speed particle.userData.velocity = velocity; particle.userData.initialLife = particleLife; // Store initial life for fading particle.userData.life = particleLife; this.scene.add(particle); system.particles.push(particle); } this.particles.push(system); // Clean up temporary geometry particleGeometry.dispose(); } _updateParticles(deltaTime) { for (let i = this.particles.length - 1; i >= 0; i--) { const system = this.particles[i]; let allParticlesDead = true; // Check if system is finished system.particles.forEach(p => { if (p.userData.life > 0) { allParticlesDead = false; p.userData.life -= deltaTime; if (p.userData.life <= 0) { // Particle died this frame this.scene.remove(p); if (p.geometry) p.geometry.dispose(); // Dispose unique geometry if (p.material) p.material.dispose(); // Dispose cloned material } else { // Update living particle p.position.addScaledVector(p.userData.velocity, deltaTime); p.userData.velocity.multiplyScalar(0.97); // Slightly more damping // Fade out based on individual particle life const lifeRatio = p.userData.life / p.userData.initialLife; if (p.material) p.material.opacity = lifeRatio; // Linear fade (more opaque for longer) // Optional: Add rotation p.rotation.x += (Math.random() - 0.5) * 0.1; p.rotation.y += (Math.random() - 0.5) * 0.1; } } }); if (allParticlesDead) { // Remove the empty system container this.particles.splice(i, 1); } } } // --- End Explosion Particle System --- // Trail particle system methods (_createTrailParticle, _updateTrailParticles) have been removed. _updateHandLines(handIndex, landmarks, screenWidth, screenHeight) { const hand = this.hands[handIndex]; const lineGroup = hand.lineGroup; // Clear previous lines while (lineGroup.children.length) { const line = lineGroup.children[0]; lineGroup.remove(line); if (line.geometry) line.geometry.dispose(); // Material is shared for lines, but fingertip circle materials might be unique if we decide to clone later // For now, fingertipMaterial is also shared. } if (!landmarks || landmarks.length === 0) { lineGroup.visible = false; return; } const points3D = landmarks.map(lm => { const x = (1 - lm.x) * screenWidth - screenWidth / 2; const y = (1 - lm.y) * screenHeight - screenHeight / 2; return new THREE.Vector3(x, y, 1.1); // Slightly in front of lines (Z=1.1) }); // Draw connecting lines (same Z as before, or adjust if needed relative to circles) const lineZ = 1; this.handConnections.forEach(conn => { const p1 = points3D[conn[0]].clone().setZ(lineZ); const p2 = points3D[conn[1]].clone().setZ(lineZ); if (p1 && p2) { const geometry = new THREE.BufferGeometry().setFromPoints([p1, p2]); const line = new THREE.Line(geometry, this.handLineMaterial); lineGroup.add(line); } }); // Draw fingertip circles const fingertipRadius = 8; // Radius of the circle const circleSegments = 16; // Smoothness of the circle this.fingertipLandmarkIndices.forEach(index => { const tipPosition = points3D[index]; if (tipPosition) { const circleGeometry = new THREE.CircleGeometry(fingertipRadius, circleSegments); const fingertipCircle = new THREE.Mesh(circleGeometry, this.fingertipMaterial); fingertipCircle.position.copy(tipPosition); // Already has Z=1.1 lineGroup.add(fingertipCircle); } }); lineGroup.visible = true; } _animate() { requestAnimationFrame(this._animate.bind(this)); const deltaTime = this.clock.getDelta(); // Only update game logic if playing if (this.gameState === 'playing' || this.gameState === 'gameover') { // Keep updating hands even in game over for visual feedback this._updateHands(); } if (this.gameState === 'playing') { this._updateGhosts(deltaTime); // Changed from _updateCubes } // Update particles regardless of game state for fade out etc. this._updateParticles(deltaTime); // Explosion particles // _updateTrailParticles call removed // Always render the scene this.renderer.render(this.scene, this.camera); } start() { // Add click listener for restarting the game AND resuming audio context this.renderDiv.addEventListener('click', () => { // Resume audio context on any click, required by browsers this.audioManager.resumeContext(); if (this.gameState === 'gameover') { this._restartGame(); } // We no longer start the game on the first click here, only restart }); console.log('Game setup initiated. Waiting for async operations...'); // Note: Game interaction now starts via the Start Button after _init completes. } }