import * as THREE from 'three'; import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js'; import { PoseLandmarker, FilesetResolver } from 'https://esm.sh/@mediapipe/tasks-vision@0.10.14'; // Changed HandLandmarker to PoseLandmarker import { AudioManager } from 'audioManager'; // SpeechManager import removed export class Game { constructor(renderDiv) { this.renderDiv = renderDiv; this.scene = null; this.camera = null; this.renderer = null; this.videoElement = null; this.poseLandmarker = null; this.lastVideoTime = -1; this.numPosesToTrack = 1; // Define how many poses we intend to track this.poses = []; this.lastLandmarkPositions = []; // Smoothed positions for each pose's landmarks this.poseLineMaterial = null; this.posePointMaterial1 = null; // posePointMaterial2 removed as we are focusing on a single pose type for now this.poseKeypointIndices = []; this.poseConnections = null; this.gameState = 'loading'; // loading, ready, tracking, error this.gameOverText = null; this.startButton = null; this.startScreenOverlay = null; this.clock = new THREE.Clock(); this.audioManager = new AudioManager(); this.smoothingFactor = 0.4; // loadedModels removed as it's not currently used // speechManager removed // speechBubble removed // speechBubbleTimeout removed // isSpeechActive removed // DVD Logo properties this.dvdLogo = null; this.dvdLogoTexture = null; this.dvdLogoVelocity = new THREE.Vector2(0, 0); // Initialized to 0, set in _startGame/_restartGame this.baseDVDSpeed = 80; // Base speed in pixels per second this.dvdSpeedIncrement = 2.2; // How much speed increases per score point this.dvdLogoOriginalSize = { width: 485, height: 223 }; // Adjust DVD logo scale for mobile devices const mobileBreakpoint = 768; // pixels if (window.innerWidth < mobileBreakpoint) { this.dvdLogoScale = 0.35; // Smaller scale for mobile } else { this.dvdLogoScale = 0.6; // Default scale for larger screens } this.dvdLogoSize = { width: this.dvdLogoOriginalSize.width * this.dvdLogoScale, height: this.dvdLogoOriginalSize.height * this.dvdLogoScale }; this.dvdLogoColors = [ // More vibrant neon colors for the DVD logo new THREE.Color(0x00FFFF), // Bright Cyan new THREE.Color(0xFF00FF), // Bright Magenta new THREE.Color(0x39FF14), // Neon Green new THREE.Color(0xFFFF33), // Bright Yellow new THREE.Color(0xFF5F00), // Bright Orange new THREE.Color(0xFF1493), // Deep Pink / Hot Pink new THREE.Color(0x7D05E6) // Electric Purple ]; this.currentDvdColorIndex = 0; // Start with the first color this.score = 0; this.scoreDisplay = null; this.coins = []; this.maxCoins = 2; this.coinTexture = null; this.coinOriginalSize = { width: 1024, height: 1024 }; // From asset meta this.coinScale = 0.12; // Increased scale for better visibility this.coinSize = { width: this.coinOriginalSize.width * this.coinScale, height: this.coinOriginalSize.height * this.coinScale }; this.gameOverTriggeredByDVD = false; // Flag to know if DVD caused game over this.gracePeriodActive = false; this.gracePeriodDuration = 3000; // 3 seconds this.gracePeriodTimeout = null; this.countdownDisplay = null; // For the 3-second countdown this.countdownInterval = null; // Initialize asynchronously this._init().catch(error => { console.error("Initialization failed:", error); this._showError("Initialization failed. Check console."); }); } async _init() { this._setupDOM(); this._setupThree(); // _setupSpeechRecognition call removed await this._loadAssets(); this._setupDVDSprite(); // Setup DVD logo after assets are loaded await this._setupPoseTracking(); // Renamed from _setupHandTracking // 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/61sib4-FjRL.png?UvO4') 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 = "DVD Dodge"; title.style.fontSize = 'clamp(40px, 10vw, 80px)'; title.style.marginBottom = '20px'; title.style.textShadow = '3px 3px 8px rgba(0,0,0,0.9)'; textContainer.appendChild(title); const instructions = document.createElement('p'); instructions.innerHTML = `Stand up and move back from your camera.
Collect coins and avoid the evil DVD logo!`; instructions.style.fontSize = 'clamp(16px, 4.5vw, 28px)'; // Adjusted for better mobile readability instructions.style.lineHeight = '1.5'; instructions.style.marginBottom = '30px'; instructions.style.textShadow = '2px 2px 6px rgba(0,0,0,0.8)'; 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'; loadingText.style.textShadow = '1px 1px 4px rgba(0,0,0,0.7)'; textContainer.appendChild(loadingText); this.startScreenOverlay.appendChild(textContainer); 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 Status text (formerly Game Over) 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 = 'white'; // Default color, can be changed by _showError this.gameOverContainer.style.textShadow = '2px 2px 4px black'; this.gameOverContainer.style.fontFamily = '"Arial Black", Gadget, sans-serif'; // Main Status Text (formerly Game Over Text) this.gameOverText = document.createElement('div'); // Will be 'gameOverText' internally this.gameOverText.innerText = 'STATUS'; // Generic placeholder 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 (may or may not be shown depending on context) this.restartHintText = document.createElement('div'); this.restartHintText.innerText = '(click to restart tracking)'; this.restartHintText.style.fontSize = 'clamp(16px, 4.5vw, 28px)'; // Adjusted for better mobile readability this.restartHintText.style.fontWeight = 'normal'; this.restartHintText.style.opacity = '0.9'; // Slightly faded this.gameOverContainer.appendChild(this.restartHintText); this.renderDiv.appendChild(this.gameOverContainer); // --- Score Display --- this.scoreDisplay = document.createElement('div'); this.scoreDisplay.id = 'score-display'; this.scoreDisplay.style.position = 'absolute'; this.scoreDisplay.style.bottom = '20px'; // Changed from top this.scoreDisplay.style.left = '20px'; // Changed from right this.scoreDisplay.style.padding = '10px 20px'; this.scoreDisplay.style.backgroundColor = 'rgba(0, 0, 0, 0.6)'; this.scoreDisplay.style.color = '#FFD700'; // Gold color for score this.scoreDisplay.style.fontFamily = '"Arial Black", Gadget, sans-serif'; this.scoreDisplay.style.fontSize = 'clamp(20px, 4vw, 32px)'; this.scoreDisplay.style.fontWeight = 'bold'; this.scoreDisplay.style.border = '3px solid #FFD700'; this.scoreDisplay.style.borderRadius = '10px'; this.scoreDisplay.style.boxShadow = '0 0 15px rgba(255, 215, 0, 0.6)'; this.scoreDisplay.style.zIndex = '15'; // Above video, below start/game over screens this.scoreDisplay.innerText = `Net Worth: $${this.score}`; // Updated text this.scoreDisplay.style.display = 'none'; // Hidden until game starts this.renderDiv.appendChild(this.scoreDisplay); // Watermelon (Center Emoji Marker) setup removed // Chad Image Marker setup removed // Start Button - Now positioned inside the overlay initially this.startButton = document.createElement('button'); this.startButton.innerText = 'START'; // 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 = 'clamp(12px, 2.5vh, 18px) clamp(25px, 5vw, 35px)'; // Responsive padding this.startButton.style.fontSize = 'clamp(18px, 4.5vw, 36px)'; // Adjusted font size 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.transition = 'background-color 0.2s ease-in-out, transform 0.1s ease-in-out'; // For hover effect // 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 // Hover effect for Start Button const originalButtonColor = '#4CAF50'; // Green const hoverButtonColor = '#45a049'; // Darker Green this.startButton.onmouseenter = () => { this.startButton.style.backgroundColor = hoverButtonColor; this.startButton.style.transform = 'scale(1.05)'; }; this.startButton.onmouseleave = () => { this.startButton.style.backgroundColor = originalButtonColor; this.startButton.style.transform = 'scale(1)'; }; // 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); // --- Speech Bubble REMOVED --- // --- Countdown Display --- this.countdownDisplay = document.createElement('div'); this.countdownDisplay.id = 'countdown-display'; this.countdownDisplay.style.position = 'absolute'; this.countdownDisplay.style.top = '50%'; this.countdownDisplay.style.left = '50%'; this.countdownDisplay.style.transform = 'translate(-50%, -50%)'; this.countdownDisplay.style.fontSize = 'clamp(100px, 25vw, 200px)'; this.countdownDisplay.style.fontFamily = '"Arial Black", Gadget, sans-serif'; this.countdownDisplay.style.fontWeight = 'bold'; this.countdownDisplay.style.color = '#00FFFF'; // Neon Blue this.countdownDisplay.style.textShadow = '0 0 8px rgba(0, 255, 255, 0.7), 0 0 15px rgba(0, 200, 255, 0.5)'; // More subtle neon glow this.countdownDisplay.style.zIndex = '20'; // Above video/game, below modals this.countdownDisplay.style.display = 'none'; // Hidden initially this.renderDiv.appendChild(this.countdownDisplay); } _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); for (let i = 0; i < this.numPosesToTrack; i++) { const lineGroup = new THREE.Group(); lineGroup.visible = false; this.scene.add(lineGroup); this.poses.push({ landmarks: null, anchorPos: new THREE.Vector3(), lineGroup: lineGroup }); this.lastLandmarkPositions.push([]); // Initialize for each pose } this.poseLineMaterial = new THREE.LineBasicMaterial({ color: 0xffffff, linewidth: 5 }); this.posePointMaterial1 = new THREE.MeshBasicMaterial({ color: 0xff00ff, side: THREE.DoubleSide }); // Magenta for pose // posePointMaterial2 removed // Define connections for MediaPipe Pose landmarks (BlazePose GHUM 33 landmarks) // https://developers.google.com/mediapipe/solutions/vision/pose_landmarker#pose_landmarks this.poseConnections = [ // Torso [11, 12], // Shoulders [11, 23], // Left shoulder to Left hip [12, 24], // Right shoulder to Right hip [23, 24], // Hips // Arms [11, 13], [13, 15], // Left arm [12, 14], [14, 16], // Right arm // Legs [23, 25], [25, 27], // Left leg [24, 26], [26, 28], // Right leg // Optional head/face connections if desired - keeping it simple for now // [0,1],[0,4],[1,2],[4,5],[2,3],[5,6] // Simplified face outline ]; // Keypoints to draw circles on (subset of 33 pose landmarks) // Nose, Shoulders, Elbows, Wrists, Hips, Knees, Ankles this.poseKeypointIndices = [ 0, // Nose 11, 12, // Shoulders 13, 14, // Elbows 15, 16, // Wrists 23, 24, // Hips 25, 26, // Knees 27, 28 // Ankles ]; // Particle resources removed // Ground line removed } async _loadAssets() { const textureLoader = new THREE.TextureLoader(); // const gltfLoader = new GLTFLoader(); // Keep if other GLTFs might be loaded try { this.dvdLogoTexture = await textureLoader.loadAsync('https://play.rosebud.ai/assets/dvd-logo-red-9195cf.png?SJdP'); this.dvdLogoTexture.minFilter = THREE.LinearFilter; this.dvdLogoTexture.magFilter = THREE.LinearFilter; // console.log("DVD Logo texture loaded."); this.coinTexture = await textureLoader.loadAsync('https://play.rosebud.ai/assets/coin.png?8XKh'); this.coinTexture.minFilter = THREE.LinearFilter; this.coinTexture.magFilter = THREE.LinearFilter; // console.log("Coin texture loaded."); } catch (error) { console.error("Error loading assets:", error); this._showError("Failed to load assets."); throw error; // Stop initialization } } _setupDVDSprite() { if (!this.dvdLogoTexture || !this.camera) { console.error("DVD Logo texture or camera not ready for sprite setup."); return; } const geometry = new THREE.PlaneGeometry(this.dvdLogoSize.width, this.dvdLogoSize.height); const material = new THREE.MeshBasicMaterial({ map: this.dvdLogoTexture, transparent: true, side: THREE.DoubleSide, color: this.dvdLogoColors[this.currentDvdColorIndex] // Set initial color }); this.dvdLogo = new THREE.Mesh(geometry, material); // Initial position: top-leftish this.dvdLogo.position.x = this.camera.left + this.dvdLogoSize.width / 2 + 20; this.dvdLogo.position.y = this.camera.top - this.dvdLogoSize.height / 2 - 20; this.dvdLogo.position.z = 5; // In front of pose lines (at z=1 to 1.1) this.dvdLogo.visible = false; // Initially hidden, shown on game start this.scene.add(this.dvdLogo); } _updateDVDSprite(deltaTime) { if (!this.dvdLogo || this.gameState !== 'tracking' || !this.dvdLogo.visible) return; // Calculate current speed based on score const currentSpeed = this.baseDVDSpeed + (this.score * this.dvdSpeedIncrement); // Update velocity magnitude while preserving direction const direction = this.dvdLogoVelocity.clone().normalize(); this.dvdLogoVelocity.copy(direction.multiplyScalar(currentSpeed)); this.dvdLogo.position.x += this.dvdLogoVelocity.x * deltaTime; this.dvdLogo.position.y += this.dvdLogoVelocity.y * deltaTime; const halfWidth = this.dvdLogoSize.width / 2; const halfHeight = this.dvdLogoSize.height / 2; const minX = this.camera.left + halfWidth; const maxX = this.camera.right - halfWidth; const minY = this.camera.bottom + halfHeight; // camera.bottom is negative const maxY = this.camera.top - halfHeight; // camera.top is positive let bounced = false; if (this.dvdLogo.position.x <= minX) { this.dvdLogo.position.x = minX; this.dvdLogoVelocity.x *= -1; bounced = true; } else if (this.dvdLogo.position.x >= maxX) { this.dvdLogo.position.x = maxX; this.dvdLogoVelocity.x *= -1; bounced = true; } if (this.dvdLogo.position.y <= minY) { this.dvdLogo.position.y = minY; this.dvdLogoVelocity.y *= -1; bounced = true; } else if (this.dvdLogo.position.y >= maxY) { this.dvdLogo.position.y = maxY; this.dvdLogoVelocity.y *= -1; bounced = true; } if (bounced) { this.audioManager.playPickupSound(); // Play a sound on bounce // Change DVD logo color this.currentDvdColorIndex = (this.currentDvdColorIndex + 1) % this.dvdLogoColors.length; if (this.dvdLogo && this.dvdLogo.material) { this.dvdLogo.material.color.set(this.dvdLogoColors[this.currentDvdColorIndex]); } } // Always check for collision with pose, regardless of bounce this._checkDVDCollisionWithPose(); } _checkDVDCollisionWithPose() { if (!this.dvdLogo || !this.dvdLogo.visible || this.gameState !== 'tracking' || this.poses.length === 0 || this.gameOverTriggeredByDVD || this.gracePeriodActive) return; const dvdLeft = this.dvdLogo.position.x - this.dvdLogoSize.width / 2; const dvdRight = this.dvdLogo.position.x + this.dvdLogoSize.width / 2; const dvdTop = this.dvdLogo.position.y + this.dvdLogoSize.height / 2; const dvdBottom = this.dvdLogo.position.y - this.dvdLogoSize.height / 2; for (const pose of this.poses) { if (pose.landmarks) { // We need to get the screen coordinates of the landmarks, which are already calculated in _updatePoseLines // For simplicity here, we'll re-calculate them or assume they are available in a suitable format. // The `points3D` from `_updatePoseLines` are in camera space coordinates. // Re-using the logic from _updatePoseLines to get keypoint screen positions // This is a bit redundant, ideally, we'd store these transformed points if needed frequently const videoParams = this._getVisibleVideoParameters(); if (!videoParams) continue; const canvasWidth = this.renderDiv.clientWidth; const canvasHeight = this.renderDiv.clientHeight; for (const keypointIndex of this.poseKeypointIndices) { if (keypointIndex >= pose.landmarks.length) continue; const lm = pose.landmarks[keypointIndex]; if (lm.visibility && lm.visibility > 0.3) { // Use a visibility threshold const lmOriginalX = lm.x * videoParams.videoNaturalWidth; const lmOriginalY = lm.y * videoParams.videoNaturalHeight; let normX_visible = (lmOriginalX - videoParams.offsetX) / videoParams.visibleWidth; let normY_visible = (lmOriginalY - videoParams.offsetY) / videoParams.visibleHeight; // Clamp normalized values to [0, 1] to avoid issues with points slightly off-screen normX_visible = Math.max(0, Math.min(1, normX_visible)); normY_visible = Math.max(0, Math.min(1, normY_visible)); // Convert to screen coordinates (same as in _updatePoseLines) // (0,0) is center of screen for Three.js Ortho camera const keypointX = (1 - normX_visible) * canvasWidth - canvasWidth / 2; const keypointY = (1 - normY_visible) * canvasHeight - canvasHeight / 2; // Simple AABB collision check (Axis-Aligned Bounding Box) if (keypointX > dvdLeft && keypointX < dvdRight && keypointY > dvdBottom && keypointY < dvdTop) { this.gameOverTriggeredByDVD = true; // Set flag to prevent multiple triggers this._showStatusScreen("GAME OVER", 'red', true, true); // Pass new parameter for custom restart text this.gameState = 'paused'; // Change state to allow restart this.audioManager.playGameOverSound(); if (this.dvdLogo) { this.dvdLogo.visible = false; // Hide DVD logo on game over } // Hide pose lines on game over this.poses.forEach(p => { if(p.lineGroup) p.lineGroup.visible = false; }); return; // Collision found, no need to check further } } } } } } async _setupPoseTracking() { try { const vision = await FilesetResolver.forVisionTasks( 'https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@0.10.14/wasm' ); this.poseLandmarker = await PoseLandmarker.createFromOptions(vision, { baseOptions: { modelAssetPath: `https://storage.googleapis.com/mediapipe-models/pose_landmarker/pose_landmarker_lite/float16/1/pose_landmarker_lite.task`, delegate: 'GPU', }, numPoses: this.numPosesToTrack, runningMode: 'VIDEO', outputSegmentationMasks: false }); const stream = await navigator.mediaDevices.getUserMedia({ video: { facingMode: 'user', width: { ideal: 1280 }, height: { ideal: 720 } }, audio: false, }); this.videoElement.srcObject = stream; return new Promise((resolve) => { this.videoElement.onloadedmetadata = () => { this.videoElement.style.width = this.renderDiv.clientWidth + 'px'; this.videoElement.style.height = this.renderDiv.clientHeight + 'px'; resolve(); }; }); } catch (error) { console.error('Error setting up Pose Tracking or Webcam:', error); this._showError(`Webcam/Pose Tracking Error: ${error.message}. Please allow camera access.`); throw error; } } _updatePose() { // Renamed from _updateHands if (!this.poseLandmarker || !this.videoElement.srcObject || this.videoElement.readyState < 2 || this.videoElement.videoWidth === 0) { // console.log("_updatePose: Early exit - conditions not met."); // Debug return; } const videoTime = this.videoElement.currentTime; if (videoTime > this.lastVideoTime) { this.lastVideoTime = videoTime; try { const results = this.poseLandmarker.detectForVideo(this.videoElement, performance.now()); if (!results || !results.landmarks || results.landmarks.length === 0) { this.poses.forEach(p => { if(p.lineGroup) p.lineGroup.visible = false; }); return; } const videoParams = this._getVisibleVideoParameters(); if (!videoParams) { return; } const canvasWidth = this.renderDiv.clientWidth; const canvasHeight = this.renderDiv.clientHeight; for (let i = 0; i < this.poses.length; i++) { // Iterate over poses we are prepared to handle (i.e., this.numPosesToTrack) const pose = this.poses[i]; if (results.landmarks[i] && results.landmarks[i].length > 0) { let currentRawLandmarks = results.landmarks[i]; if (!this.lastLandmarkPositions[i] || this.lastLandmarkPositions[i].length !== currentRawLandmarks.length) { this.lastLandmarkPositions[i] = currentRawLandmarks.map(lm => ({ ...lm })); } const smoothedLandmarks = currentRawLandmarks.map((lm, lmIndex) => { const prevLm = this.lastLandmarkPositions[i][lmIndex]; return { x: this.smoothingFactor * lm.x + (1 - this.smoothingFactor) * prevLm.x, y: this.smoothingFactor * lm.y + (1 - this.smoothingFactor) * prevLm.y, z: this.smoothingFactor * lm.z + (1 - this.smoothingFactor) * prevLm.z, visibility: lm.visibility }; }); this.lastLandmarkPositions[i] = smoothedLandmarks.map(lm => ({...lm})); pose.landmarks = smoothedLandmarks; if (this.gameState === 'tracking') { const noseLm = smoothedLandmarks[0]; if (noseLm && noseLm.visibility && noseLm.visibility > 0.1) { const lmOriginalX = noseLm.x * videoParams.videoNaturalWidth; const lmOriginalY = noseLm.y * videoParams.videoNaturalHeight; let normX_visible = (lmOriginalX - videoParams.offsetX) / videoParams.visibleWidth; let normY_visible = (lmOriginalY - videoParams.offsetY) / videoParams.visibleHeight; const poseX = (1 - normX_visible) * canvasWidth - canvasWidth / 2; const poseY = (1 - normY_visible) * canvasHeight - canvasHeight / 2; pose.anchorPos.set(poseX, poseY, 1); } this._updatePoseLines(i, smoothedLandmarks, videoParams, canvasWidth, canvasHeight); if (pose.lineGroup) pose.lineGroup.visible = true; } else if (this.gameState === 'paused') { this._checkRestartGesture(smoothedLandmarks); if (pose.lineGroup) pose.lineGroup.visible = false; } else { // For other states like 'loading', 'ready', 'error' if (pose.lineGroup) pose.lineGroup.visible = false; } } else { pose.landmarks = null; if (pose.lineGroup) { pose.lineGroup.visible = false; } } } } catch (error) { console.error("Error during pose detection:", error); } } } _getVisibleVideoParameters() { if (!this.videoElement || this.videoElement.videoWidth === 0 || this.videoElement.videoHeight === 0) { return null; } const vNatW = this.videoElement.videoWidth; const vNatH = this.videoElement.videoHeight; const rW = this.renderDiv.clientWidth; const rH = this.renderDiv.clientHeight; if (vNatW === 0 || vNatH === 0 || rW === 0 || rH === 0) return null; const videoAR = vNatW / vNatH; const renderDivAR = rW / rH; let finalVideoPixelX, finalVideoPixelY; let visibleVideoPixelWidth, visibleVideoPixelHeight; if (videoAR > renderDivAR) { // Video is wider than renderDiv, scaled to fit renderDiv height, cropped horizontally. const scale = rH / vNatH; // Scale factor based on height. const scaledVideoWidth = vNatW * scale; // Width of video if scaled to fit renderDiv height. // Total original video pixels cropped horizontally (from both sides combined). const totalCroppedPixelsX = (scaledVideoWidth - rW) / scale; finalVideoPixelX = totalCroppedPixelsX / 2; // Pixels cropped from the left of original video. finalVideoPixelY = 0; // No vertical cropping. visibleVideoPixelWidth = vNatW - totalCroppedPixelsX; // Width of the visible part in original video pixels. visibleVideoPixelHeight = vNatH; // Full height is visible. } else { // Video is taller than renderDiv (or same AR), scaled to fit renderDiv width, cropped vertically. const scale = rW / vNatW; // Scale factor based on width. const scaledVideoHeight = vNatH * scale; // Height of video if scaled to fit renderDiv width. // Total original video pixels cropped vertically (from top and bottom combined). const totalCroppedPixelsY = (scaledVideoHeight - rH) / scale; finalVideoPixelX = 0; // No horizontal cropping. finalVideoPixelY = totalCroppedPixelsY / 2; // Pixels cropped from the top of original video. visibleVideoPixelWidth = vNatW; // Full width is visible. visibleVideoPixelHeight = vNatH - totalCroppedPixelsY; // Height of the visible part in original video pixels. } // Safety check for degenerate cases (e.g., extreme aspect ratios leading to zero visible dimension) if (visibleVideoPixelWidth <= 0 || visibleVideoPixelHeight <= 0) { // Fallback or log error, this shouldn't happen in normal scenarios console.warn("Calculated visible video dimension is zero or negative.", {visibleVideoPixelWidth, visibleVideoPixelHeight}); return { // Return full video dimensions as a fallback to prevent division by zero offsetX: 0, offsetY: 0, visibleWidth: vNatW, visibleHeight: vNatH, videoNaturalWidth: vNatW, videoNaturalHeight: vNatH }; } return { offsetX: finalVideoPixelX, offsetY: finalVideoPixelY, visibleWidth: visibleVideoPixelWidth, visibleHeight: visibleVideoPixelHeight, videoNaturalWidth: vNatW, videoNaturalHeight: vNatH }; } _showStatusScreen(message, color = 'white', showRestartHint = false, isGameOverDVD = false) { // Added isGameOverDVD flag this.gameOverContainer.style.display = 'block'; this.gameOverText.innerText = message; this.gameOverText.style.color = color; if (showRestartHint) { this.restartHintText.innerText = isGameOverDVD ? "click or raise both arms to restart 🙌" : "(click to retry)"; // Adjusted default hint this.restartHintText.style.display = 'block'; } else { this.restartHintText.style.display = 'none'; } if (this.dvdLogo) this.dvdLogo.visible = false; } _showError(message) { this.gameOverContainer.style.display = 'block'; this.gameOverText.innerText = `ERROR: ${message}`; this.gameOverText.style.color = 'orange'; this.restartHintText.innerText = "(click to retry)"; // Adjusted default hint for error this.restartHintText.style.display = 'block'; // Show restart hint on error this.gameState = 'error'; this.poses.forEach(pose => { // Renamed from hands if (pose.lineGroup) pose.lineGroup.visible = false; }); if (this.startButton) this.startButton.style.display = 'none'; if (this.dvdLogo) this.dvdLogo.visible = false; } _startGame() { if (this.gameState !== 'ready') return; this.audioManager.resumeContext(); // speechManager.requestPermissionAndStart() call removed if (this.startScreenOverlay) { this.startScreenOverlay.style.display = 'none'; } this.startButton.style.display = 'none'; this.gameState = 'tracking'; this.lastVideoTime = -1; this.clock.start(); this.score = 0; // Reset score this._updateScoreDisplay(); if (this.scoreDisplay) this.scoreDisplay.style.display = 'block'; // Show score this.gameOverTriggeredByDVD = false; // Reset flag this.gracePeriodActive = true; // Activate grace period clearTimeout(this.gracePeriodTimeout); // Clear any existing timeout this.gracePeriodTimeout = setTimeout(() => { this.gracePeriodActive = false; console.log("Grace period ended."); // if (this.countdownDisplay) this.countdownDisplay.style.display = 'none'; // clearInterval(this.countdownInterval); }, this.gracePeriodDuration); // Start countdown display if (this.countdownDisplay) { this.countdownDisplay.style.display = 'block'; let count = 3; this.countdownDisplay.innerText = count; this.audioManager.playCountdownTickSound(); // Play sound for initial "3" this.countdownInterval = setInterval(() => { count--; if (count > 0) { this.countdownDisplay.innerText = count; this.audioManager.playCountdownTickSound(); // Play sound for "2", "1" } else if (count === 0) { this.countdownDisplay.innerText = "GO!"; this.audioManager.playCountdownGoSound(); // Play sound for "GO!" } else { clearInterval(this.countdownInterval); if (this.countdownDisplay) this.countdownDisplay.style.display = 'none'; } }, 1000); } if (this.dvdLogo && this.camera) { this.dvdLogo.visible = true; // Reset DVD logo position and velocity for a new game this.dvdLogo.position.x = this.camera.left + this.dvdLogoSize.width / 2 + Math.random() * 50; // Add some randomness this.dvdLogo.position.y = this.camera.top - this.dvdLogoSize.height / 2 - Math.random() * 50; const initialAngle = Math.random() * Math.PI * 2; // Random direction // Initial speed is the base speed this.dvdLogoVelocity.set(Math.cos(initialAngle) * this.baseDVDSpeed, Math.sin(initialAngle) * this.baseDVDSpeed); } // Initialize and show coins this._initializeCoins(); // This will also add them to the scene this.coins.forEach(coin => { if (coin.mesh) coin.mesh.visible = true; }); } _restartGame() { this.gameOverContainer.style.display = 'none'; if (this.startScreenOverlay) { // If restarting to the start screen, show it, otherwise keep it hidden if game just restarts // For now, assume direct restart to tracking: this.startScreenOverlay.style.display = 'none'; } this.poses.forEach(pose => { if (pose.lineGroup) { pose.lineGroup.visible = false; // Hide old pose lines } }); this.gameState = 'tracking'; this.lastVideoTime = -1; this.clock.start(); // Restart clock this.score = 0; // Reset score on restart this._updateScoreDisplay(); if (this.scoreDisplay) this.scoreDisplay.style.display = 'block'; // Ensure score is visible this.gameOverTriggeredByDVD = false; // Reset flag this.gracePeriodActive = true; // Activate grace period clearTimeout(this.gracePeriodTimeout); // Clear any existing timeout this.gracePeriodTimeout = setTimeout(() => { this.gracePeriodActive = false; console.log("Grace period ended after restart."); // if (this.countdownDisplay) this.countdownDisplay.style.display = 'none'; // clearInterval(this.countdownInterval); }, this.gracePeriodDuration); // Start countdown display on restart if (this.countdownDisplay) { this.countdownDisplay.style.display = 'block'; let count = 3; this.countdownDisplay.innerText = count; this.audioManager.playCountdownTickSound(); // Play sound for initial "3" on restart this.countdownInterval = setInterval(() => { count--; if (count > 0) { this.countdownDisplay.innerText = count; this.audioManager.playCountdownTickSound(); // Play sound for "2", "1" on restart } else if (count === 0) { this.countdownDisplay.innerText = "GO!"; this.audioManager.playCountdownGoSound(); // Play sound for "GO!" on restart } else { clearInterval(this.countdownInterval); if (this.countdownDisplay) this.countdownDisplay.style.display = 'none'; } }, 1000); } if (this.dvdLogo && this.camera) { this.dvdLogo.visible = true; // Reset DVD logo position and velocity this.dvdLogo.position.x = this.camera.left + this.dvdLogoSize.width / 2 + Math.random() * 50; this.dvdLogo.position.y = this.camera.top - this.dvdLogoSize.height / 2 - Math.random() * 50; const initialAngle = Math.random() * Math.PI * 2; // Reset speed to base speed on restart this.dvdLogoVelocity.set(Math.cos(initialAngle) * this.baseDVDSpeed, Math.sin(initialAngle) * this.baseDVDSpeed); } // Initialize coins positions on restart this.coins.forEach(coin => { if (coin.mesh) { this.scene.remove(coin.mesh); // Remove old mesh coin.mesh.geometry.dispose(); // Material is shared, no need to dispose unless it's unique per coin } }); this.coins = []; // Clear existing coins this._initializeCoins(); // Re-initialize coins, this will add them to the scene and make them visible this.coins.forEach(coin => { // Ensure coins are visible after re-initialization if (coin.mesh) coin.mesh.visible = true; }); } _updateScoreDisplay() { if (this.scoreDisplay) { this.scoreDisplay.innerText = `Net Worth: $${this.score}`; // Updated text } } _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'; // Watermelon, Chad, GroundLine updates removed. } _updatePoseLines(poseIndex, landmarks, videoParams, canvasWidth, canvasHeight) { const pose = this.poses[poseIndex]; const lineGroup = pose.lineGroup; while (lineGroup.children.length) { const child = lineGroup.children[0]; lineGroup.remove(child); if (child.geometry) child.geometry.dispose(); } if (!landmarks || landmarks.length === 0 || !videoParams) { lineGroup.visible = false; return; } let drawnElementsCount = 0; const points3D = landmarks.map((lm, idx) => { const lmOriginalX = lm.x * videoParams.videoNaturalWidth; const lmOriginalY = lm.y * videoParams.videoNaturalHeight; let normX_visible = (lmOriginalX - videoParams.offsetX) / videoParams.visibleWidth; let normY_visible = (lmOriginalY - videoParams.offsetY) / videoParams.visibleHeight; normX_visible = Math.max(0, Math.min(1, normX_visible)); normY_visible = Math.max(0, Math.min(1, normY_visible)); const x = (1 - normX_visible) * canvasWidth - canvasWidth / 2; const y = (1 - normY_visible) * canvasHeight - canvasHeight / 2; const isVisible = lm.visibility && lm.visibility > 0.3; return new THREE.Vector3(x, y, isVisible ? 1.1 : -10000); }); const lineZ = 1.0; this.poseConnections.forEach(conn => { if (conn[0] >= points3D.length || conn[1] >= points3D.length) { return; } const p1 = points3D[conn[0]]; const p2 = points3D[conn[1]]; if (p1 && p2 && p1.z > -1000 && p2.z > -1000) { const lineP1 = p1.clone().setZ(lineZ); const lineP2 = p2.clone().setZ(lineZ); const geometry = new THREE.BufferGeometry().setFromPoints([lineP1, lineP2]); const line = new THREE.Line(geometry, this.poseLineMaterial); lineGroup.add(line); drawnElementsCount++; } }); const keypointRadius = 12; // Increased from 8 const majorJointRadius = 15; // Increased from 10 const circleSegments = 12; this.poseKeypointIndices.forEach(index => { if (index >= points3D.length) { return; } const landmarkPosition = points3D[index]; if (landmarkPosition && landmarkPosition.z > -1000) { let radius = keypointRadius; if ([11,12,23,24].includes(index)) radius = majorJointRadius; const circleGeometry = new THREE.CircleGeometry(radius, circleSegments); const material = this.posePointMaterial1; // Simplified: only one material for points const landmarkCircle = new THREE.Mesh(circleGeometry, material); landmarkCircle.position.copy(landmarkPosition); lineGroup.add(landmarkCircle); drawnElementsCount++; } }); if (drawnElementsCount > 0) { lineGroup.visible = true; } else { lineGroup.visible = false; } } _animate() { requestAnimationFrame(this._animate.bind(this)); const deltaTime = this.clock.getDelta(); if (this.gameState === 'tracking') { this._updatePose(); this._updateDVDSprite(deltaTime); this._updateCoins(); // Add coin update logic to the game loop } else if (this.gameState === 'paused') { this._updatePose(); // Continue updating pose for gesture detection } // Always render the scene this.renderer.render(this.scene, this.camera); } start() { // Add click listener for resuming audio context and potentially restarting on error this.renderDiv.addEventListener('click', () => { this.audioManager.resumeContext(); if (this.gameState === 'error' || this.gameState === 'paused') { this._restartGame(); } }); // Note: Game interaction now starts via the Start Button after _init completes. } _initializeCoins() { if (!this.coinTexture || !this.camera) { console.error("Coin texture or camera not ready for coin setup."); return; } // Clear existing coin meshes from the scene if any this.coins.forEach(coin => { if (coin.mesh) this.scene.remove(coin.mesh); }); this.coins = []; // Reset the coins array const geometry = new THREE.PlaneGeometry(this.coinSize.width, this.coinSize.height); const material = new THREE.MeshBasicMaterial({ map: this.coinTexture, transparent: true, side: THREE.DoubleSide }); for (let i = 0; i < this.maxCoins; i++) { const coinMesh = new THREE.Mesh(geometry, material); this._positionCoinRandomly(coinMesh); coinMesh.visible = false; // Initially hidden until game starts this.scene.add(coinMesh); this.coins.push({ mesh: coinMesh, collected: false }); } } _positionCoinRandomly(coinMesh) { if (!this.camera) return; // Ensure coins are fully within the camera view const margin = this.coinSize.width; // Keep coin away from edges by its own width/height const xRange = (this.camera.right - this.camera.left - 2 * margin); const yRange = (this.camera.top - this.camera.bottom - 2 * margin); coinMesh.position.x = this.camera.left + margin + Math.random() * xRange; coinMesh.position.y = this.camera.bottom + margin + Math.random() * yRange; coinMesh.position.z = 4; // Slightly in front of DVD logo (at z=5) } _updateCoins() { if (this.gameState !== 'tracking' || this.poses.length === 0 || this.gracePeriodActive) return; // Added gracePeriodActive check const videoParams = this._getVisibleVideoParameters(); if (!videoParams) return; const canvasWidth = this.renderDiv.clientWidth; const canvasHeight = this.renderDiv.clientHeight; for (const coin of this.coins) { if (!coin.mesh || coin.collected || !coin.mesh.visible) continue; const coinLeft = coin.mesh.position.x - this.coinSize.width / 2; const coinRight = coin.mesh.position.x + this.coinSize.width / 2; const coinTop = coin.mesh.position.y + this.coinSize.height / 2; const coinBottom = coin.mesh.position.y - this.coinSize.height / 2; for (const pose of this.poses) { if (pose.landmarks) { for (const keypointIndex of this.poseKeypointIndices) { if (keypointIndex >= pose.landmarks.length) continue; const lm = pose.landmarks[keypointIndex]; if (lm.visibility && lm.visibility > 0.3) { // Visibility threshold // Convert landmark to screen coordinates (similar to DVD collision) const lmOriginalX = lm.x * videoParams.videoNaturalWidth; const lmOriginalY = lm.y * videoParams.videoNaturalHeight; let normX_visible = (lmOriginalX - videoParams.offsetX) / videoParams.visibleWidth; let normY_visible = (lmOriginalY - videoParams.offsetY) / videoParams.visibleHeight; normX_visible = Math.max(0, Math.min(1, normX_visible)); normY_visible = Math.max(0, Math.min(1, normY_visible)); const keypointX = (1 - normX_visible) * canvasWidth - canvasWidth / 2; const keypointY = (1 - normY_visible) * canvasHeight - canvasHeight / 2; // AABB collision check if (keypointX > coinLeft && keypointX < coinRight && keypointY > coinBottom && keypointY < coinTop) { this.score++; this._updateScoreDisplay(); this.audioManager.playCoinSound(); // Use the new coin sound // Mark as collected and respawn coin.collected = true; coin.mesh.visible = false; // Hide briefly // Respawn logic (can be delayed or immediate) setTimeout(() => { this._positionCoinRandomly(coin.mesh); coin.mesh.visible = true; coin.collected = false; }, 200); // Short delay before respawn break; // Stop checking other keypoints for this coin } } } } if (coin.collected) break; // If collected by this pose, move to next coin } } } // _updateSpeechBubbleAppearance method removed // _setupSpeechRecognition method removed _checkRestartGesture(landmarks) { if (this.gameState !== 'paused' || !landmarks) return; // MediaPipe Pose Landmark indices: const NOSE = 0; const LEFT_WRIST = 15; const RIGHT_WRIST = 16; const nose = landmarks[NOSE]; const leftWrist = landmarks[LEFT_WRIST]; const rightWrist = landmarks[RIGHT_WRIST]; const visibilityThreshold = 0.5; // Visibility score from 0.0 to 1.0 if (nose && nose.visibility > visibilityThreshold && leftWrist && leftWrist.visibility > visibilityThreshold && rightWrist && rightWrist.visibility > visibilityThreshold) { // Y-coordinates are normalized; smaller y means higher on the person's silhouette. // Check if both wrists are above the nose. if (leftWrist.y < nose.y && rightWrist.y < nose.y) { console.log("Arms up gesture detected for restart!"); this._restartGame(); } } } }