import * as THREE from 'three'; import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js'; // Import GLTFLoader import { createNoise2D } from 'https://esm.sh/simplex-noise@4.0.1'; import { HandLandmarker, FilesetResolver } from 'https://esm.sh/@mediapipe/tasks-vision@0.10.14'; import { AudioManager } from 'audioManager'; // Import the AudioManager // import { SpeechManager } from 'SpeechManager'; // Removed SpeechManager 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.hands = []; // Stores data about detected hands (landmarks, anchor position, line group) this.handLineMaterial = null; // Material for hand lines this.fingertipMaterialHand1 = null; // Material for first hand's fingertip circles (blue) this.fingertipMaterialHand2 = null; // Material for second hand's fingertip circles (green) this.fingertipLandmarkIndices = [0, 4, 8, 12, 16, 20]; // WRIST + TIP landmarks this.handConnections = null; // Landmark connection definitions this.selectionRectangleElement = null; // DOM element for the selection rectangle this.gameState = 'loading'; // loading, ready, tracking, error, won this.gameOverText = null; // Will be repurposed or simplified this.winScreenElement = null; // DOM element for the win screen // this.startButton = null; // Removed // this.startScreenOverlay = null; // Removed this.clock = new THREE.Clock(); this.audioManager = new AudioManager(); // Create an instance of AudioManager this.lastLandmarkPositions = [[], []]; // Store last known smoothed positions for each hand's landmarks this.smoothingFactor = 0.4; // Alpha for exponential smoothing (0 < alpha <= 1). Smaller = more smoothing. this.loadedModels = {}; // To store loaded models if any (e.g. a generic hand model in future) // this.speechManager = null; // Removed // this.speechBubble = null; // Removed // this.speechBubbleTimeout = null; // Removed // this.isSpeechActive = false; // Removed this.macrodataGrid = null; // For the Severance-style number grid this.selectionActivePreviousFrame = false; // Tracks if selection rect was visible in the previous frame this.targetBoxes = []; // To store references to the 5 target boxes in the bottom row this.simplex = null; // For Simplex noise-based animations this.numberCells = []; // To store references to individual number cells for animation this.debugLogCount = 0; // For temporary debugging logs this.titleBarElement = null; this.progressBarFillElement = null; this.progressTextElement = null; this.titleBarHeight = 60; // Default height in pixels this.targetBoxAreaHeight = 90; // Height of the area containing target boxes at the bottom this.currentProgress = 0; // Current progress percentage this.collectedNumbersCount = 0; this.totalNumbersToCollectForWin = 500; // Goal: collect 500 numbers for 100% progress this.targetBoxContainerElement = null; // DOM element for target boxes container this.backgroundMusicUrl = 'https://rosebud.ai/assets/song.mp3?o4bV'; this.isBackgroundMusicPlaying = false; this.driftingNumbersCount = 0; // Counter for numbers currently animating to target // Initialize asynchronously this._init().catch(error => { console.error("Initialization failed:", error); this._showError("Initialization failed. Check console."); }); } async _init() { this.simplex = createNoise2D(); // Initialize Simplex noise generator using the correct function this._setupDOM(); // Sets up basic DOM, including speech bubble container and macrodata grid this._showStatusScreen("Initializing Core Systems...", "#87CEEB", false); // Light Sky Blue, no restart hint this._setupThree(); // this._setupSpeechRecognition(); // Removed 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(); // If initialization was successful (no error changed gameState), hide "Initializing..." if (this.gameState === 'loading' || this.gameState === 'ready') { // gameState is 'loading' before this point const statusTextElement = this.gameOverText; // Alias for clarity if (statusTextElement && statusTextElement.innerText.includes("Initializing Core Systems...")) { this.gameOverContainer.style.display = 'none'; } } window.addEventListener('resize', this._onResize.bind(this)); this.gameState = 'ready'; // Change state to ready // Game will start automatically via _startGame called below this._startGame(); // Automatically start the game sequence this._animate(); // Start the animation loop (it will check state) } _setupMacrodataGridDOM() { this.macrodataGrid = document.createElement('div'); this.macrodataGrid.id = 'macrodata-grid'; this.macrodataGrid.style.position = 'absolute'; this.macrodataGrid.style.top = `${this.titleBarHeight}px`; // Position below title bar this.macrodataGrid.style.left = '0'; this.macrodataGrid.style.width = '100%'; // Height adjusted to make space for the target boxes at the bottom this.macrodataGrid.style.height = `calc(100% - ${this.titleBarHeight}px - ${this.targetBoxAreaHeight}px)`; this.macrodataGrid.style.display = 'grid'; const numCols = 10; const numRowsForNumbers = 7; // Number of rows for the actual number cells this.macrodataGrid.style.gridTemplateColumns = `repeat(${numCols}, 1fr)`; this.macrodataGrid.style.gridTemplateRows = `repeat(${numRowsForNumbers}, 1fr)`; this.macrodataGrid.style.pointerEvents = 'none'; // So it doesn't interfere with interactions this.macrodataGrid.style.zIndex = '15'; // Above video and three.js canvas, below UI like start screen this.macrodataGrid.style.fontFamily = "'Courier New', Courier, monospace"; this.macrodataGrid.style.color = '#00FFFF'; // Teal color (Cyan) this.macrodataGrid.style.overflow = 'hidden'; // Prevent scrollbars if numbers are too big // Add a style block for animations const styleSheet = document.createElement("style"); styleSheet.type = "text/css"; styleSheet.innerText = ` @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .fade-in-cell { animation: fadeIn 0.5s ease-in-out; } @keyframes fadeInOpacity { /* Renamed for clarity from potential cell content animation */ from { opacity: 0; } to { opacity: 1; } } .fade-in-new-number { animation: fadeInOpacity 0.5s ease-out forwards; } @keyframes targetDataStream { 0% { text-shadow: 0 0 5px rgba(0,255,255,0.7), 0 0 10px rgba(0,255,255,0.5); border-color: #00A0A0; /* Original Darker Teal */ transform: scale(1); } 50% { text-shadow: 0 0 25px rgba(128,255,255,1), 0 0 50px rgba(0,255,255,1), 0 0 15px #FFFFFF, 0 0 8px #30FFFF; /* Max brightness, wider glow, stronger white core, brighter teal halo */ border-color: #80FFFF; /* Even Lighter Teal for border */ transform: scale(1.10); /* Even more noticeable pulse */ background-color: #000050; /* Lighter navy during pulse */ box-shadow: 0 0 15px rgba(0, 255, 255, 0.5), inset 0 0 10px rgba(0, 255, 255, 0.3); /* Outer and inner glow */ } 100% { text-shadow: 0 0 5px rgba(0,255,255,0.7), 0 0 10px rgba(0,255,255,0.5); border-color: #00A0A0; transform: scale(1); background-color: #000030; /* Return to original background */ box-shadow: none; /* Remove glow at end */ } } .target-streaming { animation: targetDataStream 2.5s cubic-bezier(0.25, 0.1, 0.25, 1); /* Increased duration from 1.2s to 2.5s */ } `; document.head.appendChild(styleSheet); this.numberCells = []; // Clear previous number cells before repopulating // Create number cells for the main grid for (let i = 0; i < numRowsForNumbers * numCols; i++) { const cell = document.createElement('div'); cell.style.display = 'flex'; cell.style.justifyContent = 'center'; cell.style.justifyContent = 'center'; cell.style.alignItems = 'center'; cell.style.boxSizing = 'border-box'; const randomNumber = Math.floor(Math.random() * 10); cell.innerText = randomNumber.toString(); cell.style.fontSize = 'clamp(20px, 5vw, 40px)'; // Increased font size cell.style.color = '#00FFFF'; // Teal cell.style.textShadow = '0 0 4px rgba(0,255,255,0.75), 0 0 8px rgba(0,255,255,0.6)'; cell.style.filter = 'blur(0.4px)'; cell.style.transformOrigin = 'center center'; // For scaling animation // Store cell and its grid coordinates for animation const cellData = { element: cell, gridX: i % numCols, gridY: Math.floor(i / numCols), baseScale: 1, // Initial scale lastAppliedScale: 1, // Store the last applied scale for optimization computedFontSize: 0, // To store computed font size for vibration intensity isBeingCollected: false, // Flag to indicate if the cell is part of selection animation isMagnified: false, // New: True if fingertip is near magnificationScale: 1 // New: Scale to apply when magnified (defaults to baseScale) }; this.numberCells.push(cellData); this.macrodataGrid.appendChild(cell); // Get and store computed font size after appending to DOM and styles are applied // We do this once, assuming number font sizes don't change dynamically later cellData.computedFontSize = parseFloat(window.getComputedStyle(cell).fontSize); } this.renderDiv.appendChild(this.macrodataGrid); this.macrodataGrid.style.display = 'none'; // Hidden initially, only show in 'tracking' state for now } _setupTargetBoxesDOM() { this.targetBoxContainerElement = document.createElement('div'); this.targetBoxContainerElement.id = 'target-box-container'; this.targetBoxContainerElement.style.position = 'absolute'; this.targetBoxContainerElement.style.bottom = '0'; this.targetBoxContainerElement.style.left = '0'; this.targetBoxContainerElement.style.width = '100%'; this.targetBoxContainerElement.style.height = `${this.targetBoxAreaHeight}px`; this.targetBoxContainerElement.style.display = 'flex'; this.targetBoxContainerElement.style.alignItems = 'center'; // Vertically center target boxes this.targetBoxContainerElement.style.justifyContent = 'space-around'; // Distribute boxes this.targetBoxContainerElement.style.boxSizing = 'border-box'; this.targetBoxContainerElement.style.padding = '0 10px'; // Some padding for the container this.targetBoxContainerElement.style.zIndex = '15'; // Same as macrodataGrid or slightly higher if needed this.targetBoxes = []; // Clear previous target boxes const numTargetBoxes = 5; for (let i = 0; i < numTargetBoxes; i++) { const targetCell = document.createElement('div'); targetCell.style.flex = '1'; // Distribute space evenly targetCell.style.margin = '0 5px'; // Space between target boxes targetCell.style.display = 'flex'; targetCell.style.justifyContent = 'center'; targetCell.style.alignItems = 'center'; targetCell.style.boxSizing = 'border-box'; targetCell.style.height = '70%'; // Percentage of the targetBoxAreaHeight targetCell.innerText = `0${i + 1}`; targetCell.style.border = '2px solid #00A0A0'; // Darker Teal border targetCell.style.color = '#00FFFF'; // Teal text targetCell.style.fontSize = 'clamp(22px, 5.5vw, 44px)'; targetCell.style.textShadow = '0 0 5px rgba(0,255,255,0.7), 0 0 10px rgba(0,255,255,0.5)'; // Enhanced Teal glow targetCell.style.backgroundColor = '#000030'; // Navy Blue background targetCell.style.filter = 'none'; // No blur targetCell.classList.add('target-box'); this.targetBoxes.push(targetCell); this.targetBoxContainerElement.appendChild(targetCell); } this.renderDiv.appendChild(this.targetBoxContainerElement); this.targetBoxContainerElement.style.display = 'none'; // Hidden initially, show with macrodataGrid } _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 Removed --- 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.style.filter = 'grayscale(100%)'; // Make webcam feed black and white 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, 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); // ScoreDisplay removed // Watermelon (Center Emoji Marker) setup removed // Chad Image Marker setup removed // Start Button Removed --- // --- Speech Bubble Removed --- this._setupWinScreenDOM(); // Setup the win screen this._setupTitleBarDOM(); // Setup title bar first this._setupTargetBoxesDOM(); // Setup target boxes container at the bottom this._setupMacrodataGridDOM(); // Call the setup for the number grid above target boxes this._setupSelectionRectangleDOM(); // Call setup for selection rectangle } _setupTitleBarDOM() { this.titleBarElement = document.createElement('div'); this.titleBarElement.id = 'title-bar'; this.titleBarElement.style.position = 'absolute'; this.titleBarElement.style.top = '0'; this.titleBarElement.style.left = '0'; this.titleBarElement.style.width = '100%'; this.titleBarElement.style.height = `${this.titleBarHeight}px`; this.titleBarElement.style.backgroundColor = '#000030'; // Navy Blue background this.titleBarElement.style.color = '#E0E0E0'; // Light grey text for progress % this.titleBarElement.style.display = 'flex'; this.titleBarElement.style.alignItems = 'center'; this.titleBarElement.style.justifyContent = 'space-between'; this.titleBarElement.style.padding = '0 40px'; // Increased padding this.titleBarElement.style.boxSizing = 'border-box'; this.titleBarElement.style.zIndex = '25'; // Above grid, video, threejs canvas this.titleBarElement.style.fontFamily = "'Electrolize', 'Arial', sans-serif"; // Techy font const titleText = document.createElement('div'); titleText.innerText = 'COLD HARBOUR'; titleText.style.fontSize = 'clamp(20px, 3vw, 28px)'; titleText.style.fontWeight = 'bold'; titleText.style.letterSpacing = '1px'; titleText.style.color = '#00FFFF'; // Teal titleText.style.textShadow = '0 0 5px rgba(0,255,255,0.7), 0 0 10px rgba(0,255,255,0.5)'; // Enhanced Teal glow const progressArea = document.createElement('div'); progressArea.style.display = 'flex'; progressArea.style.alignItems = 'center'; const progressBarContainer = document.createElement('div'); progressBarContainer.style.width = '150px'; // Adjusted width progressBarContainer.style.height = '18px'; // Adjusted height progressBarContainer.style.backgroundColor = '#000050'; // Darker Navy for progress bar background progressBarContainer.style.border = '1px solid #00A0A0'; // Darker Teal border for progress bar progressBarContainer.style.borderRadius = '3px'; progressBarContainer.style.overflow = 'hidden'; this.progressBarFillElement = document.createElement('div'); this.progressBarFillElement.style.height = '100%'; this.progressBarFillElement.style.backgroundColor = '#00FFFF'; // Teal fill for progress this.progressBarFillElement.style.width = '0%'; this.progressBarFillElement.style.transition = 'width 0.5s ease-out'; progressBarContainer.appendChild(this.progressBarFillElement); this.progressTextElement = document.createElement('div'); this.progressTextElement.innerText = '0%'; // Initial text this.progressTextElement.style.marginLeft = '10px'; this.progressTextElement.style.fontSize = 'clamp(14px, 2vw, 16px)'; this.progressTextElement.style.minWidth = '40px'; // Ensure space for "100%" this.progressTextElement.style.textAlign = 'right'; progressArea.appendChild(progressBarContainer); progressArea.appendChild(this.progressTextElement); this.titleBarElement.appendChild(titleText); this.titleBarElement.appendChild(progressArea); this.renderDiv.appendChild(this.titleBarElement); // Set initial progress bar state this._updateProgressBar(this.currentProgress); } _setupWinScreenDOM() { this.winScreenElement = document.createElement('div'); this.winScreenElement.id = 'win-screen'; this.winScreenElement.style.position = 'absolute'; this.winScreenElement.style.top = '0'; this.winScreenElement.style.left = '0'; this.winScreenElement.style.width = '100%'; this.winScreenElement.style.height = '100%'; this.winScreenElement.style.backgroundColor = 'rgba(0,0,0,0.8)'; // Semi-transparent black background this.winScreenElement.style.zIndex = '100'; // Highest z-index to cover everything this.winScreenElement.style.display = 'none'; // Hidden initially this.winScreenElement.style.flexDirection = 'column'; this.winScreenElement.style.justifyContent = 'center'; this.winScreenElement.style.alignItems = 'center'; this.winScreenElement.style.textAlign = 'center'; const winGif = document.createElement('img'); winGif.src = 'https://play.rosebud.ai/assets/tumblr_74b542b30ab8812676cf211e3736fc6e_d3d19af6_540.gif?spBB'; winGif.style.width = '100%'; winGif.style.height = '100%'; winGif.style.objectFit = 'cover'; // Cover the entire screen with the GIF winGif.style.position = 'absolute'; winGif.style.top = '0'; winGif.style.left = '0'; winGif.style.zIndex = '-1'; // Behind the button const restartButton = document.createElement('button'); restartButton.innerText = 'the work is mysterious and important'; restartButton.style.padding = '12px 24px'; // Slightly smaller padding restartButton.style.fontSize = 'clamp(16px, 2.5vw, 20px)'; // Smaller font size restartButton.style.fontFamily = "'Electrolize', 'Arial', sans-serif"; restartButton.style.backgroundColor = 'rgba(0, 160, 160, 0.75)'; // Darker Teal with transparency restartButton.style.color = '#E0E0E0'; // Slightly off-white text restartButton.style.border = '2px solid rgba(0, 255, 255, 0.6)'; // Teal border with transparency restartButton.style.borderRadius = '5px'; restartButton.style.cursor = 'pointer'; restartButton.style.textShadow = '0 0 4px rgba(0,255,255,0.6)'; // Slightly softer text shadow restartButton.style.boxShadow = '0 0 8px rgba(0,255,255,0.4)'; // Softer box shadow restartButton.style.position = 'absolute'; // Position relative to winScreenElement restartButton.style.bottom = '5vh'; // Position from the bottom (e.g., 5% of viewport height) restartButton.style.left = '50%'; // Center horizontally restartButton.style.transform = 'translateX(-50%)'; // Adjust for centering restartButton.style.zIndex = '1'; // Ensure it's above the GIF restartButton.onclick = () => { this.winScreenElement.style.display = 'none'; this._restartGame(); }; this.winScreenElement.appendChild(winGif); this.winScreenElement.appendChild(restartButton); this.renderDiv.appendChild(this.winScreenElement); } _updateProgressBar(percentage) { const clampedPercentage = Math.max(0, Math.min(100, percentage)); if (this.progressBarFillElement) { this.progressBarFillElement.style.width = `${clampedPercentage}%`; } if (this.progressTextElement) { this.progressTextElement.innerText = `${Math.round(clampedPercentage)}%`; } this.currentProgress = clampedPercentage; // Update internal state } _setupSelectionRectangleDOM() { this.selectionRectangleElement = document.createElement('div'); this.selectionRectangleElement.id = 'selection-rectangle'; this.selectionRectangleElement.style.position = 'absolute'; this.selectionRectangleElement.style.border = '2px dashed #00FFFF'; // Teal dashed border this.selectionRectangleElement.style.backgroundColor = 'rgba(0, 255, 255, 0.3)'; // Increased opacity from 0.1 to 0.3 this.selectionRectangleElement.style.display = 'none'; // Hidden initially this.selectionRectangleElement.style.zIndex = '30'; // Ensure it's above title bar if needed this.selectionRectangleElement.style.pointerEvents = 'none'; // Non-interactive this.selectionRectangleElement.style.boxSizing = 'border-box'; // Border included in width/height this.renderDiv.appendChild(this.selectionRectangleElement); } _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, isPinching: false, wasPinching: false, // To detect pinch start/end indexTipScreenPos: new THREE.Vector2(), // Screen coordinates of index tip during pinch pinchActivationDistance: 0.06, // Stricter: Normalized distance threshold for pinch (was 0.07) thumbTipLandmarkIndex: 4, indexTipLandmarkIndex: 8 }); } this.handLineMaterial = new THREE.LineBasicMaterial({ color: 0x00ccff, linewidth: 8 }); this.fingertipMaterialHand1 = new THREE.MeshBasicMaterial({ color: 0x0000ff, side: THREE.DoubleSide }); // Blue this.fingertipMaterialHand2 = new THREE.MeshBasicMaterial({ color: 0x00ff00, side: THREE.DoubleSide }); // Green // 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 ]; // Particle resources removed // Ground line removed } async _loadAssets() { console.log("Loading assets..."); // const textureLoader = new THREE.TextureLoader(); // Only if loading other textures // const gltfLoader = new GLTFLoader(); // Only if loading other models try { // Ghost Textures loading removed // Ghost GLTF Model loading removed (was already commented out) console.log("No game-specific assets to load for template."); } catch (error) { console.error("Error loading assets:", error); this._showError("Failed to load assets."); // Generic message 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 // Adjust video size to fit below the title bar const videoTopOffset = this.titleBarHeight; this.videoElement.style.top = `${videoTopOffset}px`; this.videoElement.style.width = this.renderDiv.clientWidth + 'px'; this.videoElement.style.height = (this.renderDiv.clientHeight - videoTopOffset) + '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, _scheduleNextSpawn, _stopSpawning, _spawnGhost methods removed. _updateHands() { if (!this.handLandmarker || !this.videoElement.srcObject || this.videoElement.readyState < 2 || this.videoElement.videoWidth === 0) return; const videoTime = this.videoElement.currentTime; if (videoTime > this.lastVideoTime) { this.lastVideoTime = videoTime; try { const results = this.handLandmarker.detectForVideo(this.videoElement, performance.now()); const videoParams = this._getVisibleVideoParameters(); if (!videoParams) return; const canvasWidth = this.renderDiv.clientWidth; const canvasHeight = this.renderDiv.clientHeight; for (let i = 0; i < this.hands.length; i++) { const hand = this.hands[i]; hand.wasPinching = hand.isPinching; // Store previous pinch state if (results.landmarks && results.landmarks[i]) { 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, }; }); this.lastLandmarkPositions[i] = smoothedLandmarks.map(lm => ({...lm})); hand.landmarks = smoothedLandmarks; // Pinch Detection Logic const thumbTip = smoothedLandmarks[hand.thumbTipLandmarkIndex]; const indexTip = smoothedLandmarks[hand.indexTipLandmarkIndex]; if (thumbTip && indexTip) { const distX = thumbTip.x - indexTip.x; const distY = thumbTip.y - indexTip.y; // Using normalized distance (squared for efficiency, compare with squared threshold) const distSq = distX * distX + distY * distY; hand.isPinching = distSq < (hand.pinchActivationDistance * hand.pinchActivationDistance); // Update indexTipScreenPos regardless of pinch state, if indexTip landmark is valid // This was moved up and generalized (see below) } else { // if thumbTip or indexTip is missing hand.isPinching = false; } // Update indexTipScreenPos if the index tip landmark is available // This is used for both pinch selection rectangle and proximity magnification const indexFingerTipLandmark = smoothedLandmarks[hand.indexTipLandmarkIndex]; if (indexFingerTipLandmark) { const lmOriginalX = indexFingerTipLandmark.x * videoParams.videoNaturalWidth; const lmOriginalY = indexFingerTipLandmark.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 screenX_dom = (1 - normX_visible) * canvasWidth; const screenY_dom = (normY_visible * (canvasHeight - this.titleBarHeight)) + this.titleBarHeight; hand.indexTipScreenPos.set(screenX_dom, screenY_dom); } else { hand.indexTipScreenPos.set(-1, -1); // Mark as invalid if landmark not found } const palmLandmark = smoothedLandmarks[0]; // WRIST landmark (index 0) is often used as palm anchor if (palmLandmark) { const palmOriginalX = palmLandmark.x * videoParams.videoNaturalWidth; const palmOriginalY = palmLandmark.y * videoParams.videoNaturalHeight; let palmNormX_visible = (palmOriginalX - videoParams.offsetX) / videoParams.visibleWidth; let palmNormY_visible = (palmOriginalY - videoParams.offsetY) / videoParams.visibleHeight; palmNormX_visible = Math.max(0, Math.min(1, palmNormX_visible)); palmNormY_visible = Math.max(0, Math.min(1, palmNormY_visible)); const handX = (1 - palmNormX_visible) * canvasWidth - canvasWidth / 2; const handY = (1 - palmNormY_visible) * canvasHeight - canvasHeight / 2; hand.anchorPos.set(handX, handY, 1); this._updateHandLines(i, smoothedLandmarks, videoParams, canvasWidth, canvasHeight); hand.lineGroup.visible = true; } else { // If palm landmark (wrist) isn't available, hide the lines for this hand. if (hand.lineGroup) { hand.lineGroup.visible = false; } } // Log pinch state changes for debugging if (hand.isPinching && !hand.wasPinching && hand.indexTipScreenPos.x !== -1) { console.log(`Hand ${i} started pinching at (${hand.indexTipScreenPos.x.toFixed(2)}, ${hand.indexTipScreenPos.y.toFixed(2)})`); } else if (!hand.isPinching && hand.wasPinching) { console.log(`Hand ${i} stopped pinching.`); } } else { // No landmarks for this hand hand.landmarks = null; hand.isPinching = false; hand.indexTipScreenPos.set(-1,-1); // Mark as invalid if (hand.lineGroup) hand.lineGroup.visible = false; if (!hand.isPinching && hand.wasPinching) { // Ensure pinch stop is logged if landmarks disappear during pinch console.log(`Hand ${i} stopped pinching (landmarks lost).`); } } } this._updateSelectionRectangle(); // Call to update the rectangle // Check for selection release const selectionRect = this.selectionRectangleElement; const isSelectionCurrentlyActive = selectionRect && selectionRect.style.display === 'block'; if (this.selectionActivePreviousFrame && !isSelectionCurrentlyActive) { // Pinch was just released, process selection this._processNumberSelection(); } this.selectionActivePreviousFrame = isSelectionCurrentlyActive; } catch (error) { console.error("Error during hand detection:", error); } } } _processNumberSelection() { if (!this.selectionRectangleElement || !this.macrodataGrid || this.macrodataGrid.style.display === 'none') { // console.log("Selection processing prerequisites not met (rect, grid, or grid not visible)."); return; } const rectLeft = parseFloat(this.selectionRectangleElement.style.left); const rectTop = parseFloat(this.selectionRectangleElement.style.top); const rectWidth = parseFloat(this.selectionRectangleElement.style.width); const rectHeight = parseFloat(this.selectionRectangleElement.style.height); if (isNaN(rectLeft) || isNaN(rectTop) || isNaN(rectWidth) || isNaN(rectHeight) || rectWidth <= 0 || rectHeight <= 0) { // console.log("Invalid selection rectangle dimensions for processing at release."); return; } const selectionBounds = { left: rectLeft, top: rectTop, right: rectLeft + rectWidth, bottom: rectTop + rectHeight, }; const selectedCellElements = []; // Iterate over this.numberCells, which only contains the actual number cell elements // not the target boxes or their container. for (let i = 0; i < this.numberCells.length; i++) { const cellData = this.numberCells[i]; const cell = cellData.element; // Get the actual DOM element // Ensure cell is visible (already implicitly handled by how numberCells is populated, // but good for safety). Target box check is no longer strictly needed here as // target boxes are not in this.numberCells array. if (cell.style.display === 'none') continue; const cellBounds = cell.getBoundingClientRect(); // Relative to viewport const overlaps = !( selectionBounds.right < cellBounds.left || selectionBounds.left > cellBounds.right || selectionBounds.bottom < cellBounds.top || selectionBounds.top > cellBounds.bottom ); if (overlaps) { selectedCellElements.push(cell); } } if (selectedCellElements.length > 0) { this.audioManager.playSelectionStartBeep(); // Play beep at start of selection processing console.log(`Selected ${selectedCellElements.length} numbers on pinch release.`); // Start hum only if it's not already playing (driftingNumbersCount was 0 before this new selection) if (this.driftingNumbersCount === 0 && selectedCellElements.length > 0) { this.audioManager.startNumberDriftHum(); } this.driftingNumbersCount += selectedCellElements.length; // Increment for each newly selected number, even if hum was already active // Update progress this.collectedNumbersCount += selectedCellElements.length; const newProgressPercentage = (this.collectedNumbersCount / this.totalNumbersToCollectForWin) * 100; this._updateProgressBar(newProgressPercentage); if (newProgressPercentage >= 100 && this.gameState !== 'won') { console.log("Progress reached 100%!"); this.gameState = 'won'; this._showWinScreen(); } let chosenTargetBoxForThisSelection = null; if (this.targetBoxes.length > 0) { const randomIndex = Math.floor(Math.random() * this.targetBoxes.length); chosenTargetBoxForThisSelection = this.targetBoxes[randomIndex]; // Trigger data stream animation on the chosen target box if (chosenTargetBoxForThisSelection) { chosenTargetBoxForThisSelection.classList.add('target-streaming'); const handleStreamAnimationEnd = () => { chosenTargetBoxForThisSelection.classList.remove('target-streaming'); chosenTargetBoxForThisSelection.removeEventListener('animationend', handleStreamAnimationEnd); }; chosenTargetBoxForThisSelection.addEventListener('animationend', handleStreamAnimationEnd); } } selectedCellElements.forEach(cell => { const cellData = this.numberCells.find(cd => cd.element === cell); if (cellData) { cellData.isBeingCollected = true; // Stop pulsing/vibration } // Reset existing transitions and transforms from pulsing immediately cell.style.transition = 'none'; cell.style.transform = ''; // Resets scale and any previous translation cell.style.opacity = '1'; // Ensure it's fully visible before new animation void cell.offsetWidth; // Force reflow to apply reset styles before new transition const cellInitialRect = cell.getBoundingClientRect(); let targetXFinal, targetYFinal; if (chosenTargetBoxForThisSelection) { const targetBoxRect = chosenTargetBoxForThisSelection.getBoundingClientRect(); targetXFinal = targetBoxRect.left + targetBoxRect.width / 2; targetYFinal = targetBoxRect.top + targetBoxRect.height / 2; } else { // Fallback if no target box somehow (should not happen with current logic) // Animate off-screen downwards targetXFinal = cellInitialRect.left + cellInitialRect.width / 2; targetYFinal = window.innerHeight + cellInitialRect.height; } const currentCenterX = cellInitialRect.left + cellInitialRect.width / 2; const currentCenterY = cellInitialRect.top + cellInitialRect.height / 2; const deltaXTarget = targetXFinal - currentCenterX; const deltaYTarget = targetYFinal - currentCenterY; // Start new animation directly to the target cell.style.transition = 'transform 2.5s cubic-bezier(0.4, 0.0, 0.2, 1), opacity 2.5s ease-out 0.5s'; // Increased duration from 1.5s to 2.5s, and opacity delay cell.style.transform = `translate(${deltaXTarget}px, ${deltaYTarget}px)`; // NO SCALING cell.style.opacity = '0'; const onCollectionTransitionEnd = (event) => { if (event.target !== cell || event.propertyName !== 'opacity') { // Only act on opacity transition end for the cell itself return; } cell.removeEventListener('transitionend', onCollectionTransitionEnd); // Use a unique dataset key to track processing for this specific animation sequence if (cell.dataset.collectionAnimationProcessed === 'true') return; cell.dataset.collectionAnimationProcessed = 'true'; this.driftingNumbersCount--; // Decrement when a number finishes drifting if (this.driftingNumbersCount <= 0) { // Use <=0 for safety this.audioManager.stopNumberDriftHum(); this.driftingNumbersCount = 0; // Ensure it's reset } const cellData = this.numberCells.find(cd => cd.element === cell); if (cellData) { cellData.isBeingCollected = false; cell.style.transform = ''; cell.style.transition = ''; // Clear the collection animation's transition styles const randomNumber = Math.floor(Math.random() * 10); cell.innerText = randomNumber.toString(); cell.style.opacity = '0'; // Prepare for fade-in animation cell.classList.remove('fade-in-new-number'); void cell.offsetWidth; // Force reflow cell.classList.add('fade-in-new-number'); const onRegenerateFadeInEnd = (e) => { if (e.target !== cell || e.animationName !== 'fadeInOpacity') { return; } cell.classList.remove('fade-in-new-number'); cell.style.opacity = '1'; cell.removeEventListener('animationend', onRegenerateFadeInEnd); delete cell.dataset.collectionAnimationProcessed; // Clean up }; cell.addEventListener('animationend', onRegenerateFadeInEnd); } else { // If cellData is not found, still clean up dataset flag to prevent memory leaks delete cell.dataset.collectionAnimationProcessed; } }; cell.addEventListener('transitionend', onCollectionTransitionEnd); }); } else { // console.log("No numbers selected on pinch release within bounds:", selectionBounds); } } _updateSelectionRectangle() { if (!this.selectionRectangleElement || this.hands.length < 2) return; const hand1 = this.hands[0]; const hand2 = this.hands[1]; if (hand1.isPinching && hand2.isPinching && hand1.landmarks && hand2.landmarks) { this.selectionRectangleElement.style.display = 'block'; const x1 = hand1.indexTipScreenPos.x; const y1 = hand1.indexTipScreenPos.y; const x2 = hand2.indexTipScreenPos.x; const y2 = hand2.indexTipScreenPos.y; const left = Math.min(x1, x2); const top = Math.min(y1, y2); const width = Math.abs(x1 - x2); const height = Math.abs(y1 - y2); this.selectionRectangleElement.style.left = `${left}px`; this.selectionRectangleElement.style.top = `${top}px`; this.selectionRectangleElement.style.width = `${width}px`; this.selectionRectangleElement.style.height = `${height}px`; } else { this.selectionRectangleElement.style.display = 'none'; } } _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 }; } // _updateGhosts method removed. _showStatusScreen(message, color = 'white', showRestartHint = false) { // Generalized from _showGameOver this.gameOverContainer.style.display = 'block'; this.gameOverText.innerText = message; this.gameOverText.style.color = color; this.restartHintText.style.display = showRestartHint ? 'block' : 'none'; // No spawning to stop for template } _showWinScreen() { if (this.winScreenElement) { this.winScreenElement.style.display = 'flex'; // Use flex as defined in its setup } if (this.macrodataGrid) this.macrodataGrid.style.display = 'none'; if (this.targetBoxContainerElement) this.targetBoxContainerElement.style.display = 'none'; if (this.selectionRectangleElement) this.selectionRectangleElement.style.display = 'none'; this.hands.forEach(hand => { if (hand.lineGroup) hand.lineGroup.visible = false; }); // this.audioManager.playGameOverSound(); // Removed game over sound on win } _showError(message) { this.gameOverContainer.style.display = 'block'; this.gameOverText.innerText = `ERROR: ${message}`; this.gameOverText.style.color = 'orange'; this.restartHintText.style.display = 'true'; // Show restart hint on error this.gameState = 'error'; if (this.isBackgroundMusicPlaying) { this.audioManager.stopBackgroundMusic(); this.isBackgroundMusicPlaying = false; } // No spawning to stop this.hands.forEach(hand => { if (hand.lineGroup) hand.lineGroup.visible = false; }); // if (this.startButton) this.startButton.style.display = 'none'; // Removed } _startGame() { console.log("Attempting to start tracking automatically..."); if (this.gameState !== 'ready' && this.gameState !== 'loading' && this.gameState !== 'won') { // Allow start if ready, loading, or after winning console.log("Game not in 'ready', 'loading' or 'won' state, current state:", this.gameState); return; } this.audioManager.resumeContext(); // For general audio // Start background music if not already playing and context is running if (!this.isBackgroundMusicPlaying && this.audioManager.audioCtx && this.audioManager.audioCtx.state === 'running') { this.audioManager.loadAndPlayBackgroundMusic(this.backgroundMusicUrl); this.isBackgroundMusicPlaying = true; } // this.speechManager.requestPermissionAndStart(); // Removed // if (this.startScreenOverlay) { // Removed // this.startScreenOverlay.style.display = 'none'; // Removed // } // Removed // this.startButton.style.display = 'none'; // Removed this.gameState = 'tracking'; // Changed from 'playing' if (this.macrodataGrid) { this.macrodataGrid.style.display = 'grid'; // Show the number grid } if (this.targetBoxContainerElement) { this.targetBoxContainerElement.style.display = 'flex'; // Show the target boxes } if (this.winScreenElement) { this.winScreenElement.style.display = 'none'; // Ensure win screen is hidden } this.lastVideoTime = -1; this.clock.start(); // Removed display of score, castle, chad // Removed _startSpawning() } _restartGame() { // Renamed to _restartTracking or similar if preferred console.log("Restarting tracking..."); this.gameOverContainer.style.display = 'none'; // if (this.startScreenOverlay) { // Removed // this.startScreenOverlay.style.display = 'none'; // Removed // } // Removed this.hands.forEach(hand => { if (hand.lineGroup) { hand.lineGroup.visible = false; } }); // Ghost removal removed // Score reset removed // Visibility of game elements removed if (this.macrodataGrid) { // Ensure grid is shown on restart if it exists this.macrodataGrid.style.display = 'grid'; } if (this.targetBoxContainerElement) { this.targetBoxContainerElement.style.display = 'flex'; // Show target boxes on restart } // Ensure background music is playing on restart if the audio context is running if (!this.isBackgroundMusicPlaying && this.audioManager.audioCtx && this.audioManager.audioCtx.state === 'running') { this.audioManager.loadAndPlayBackgroundMusic(this.backgroundMusicUrl); this.isBackgroundMusicPlaying = true; } else if (this.isBackgroundMusicPlaying && this.audioManager.audioCtx && this.audioManager.audioCtx.state === 'running' && !this.audioManager.backgroundMusicSource) { // If music was marked as playing but source is gone (e.g. stopped by error state), restart it this.audioManager.loadAndPlayBackgroundMusic(this.backgroundMusicUrl); } this.collectedNumbersCount = 0; // Reset collected numbers this._updateProgressBar(0); // Reset progress bar display this.driftingNumbersCount = 0; // Reset drifting numbers counter if (this.audioManager.driftHumSource) { // Stop any existing drift hum on restart this.audioManager.stopNumberDriftHum(); } // Regenerate numbers in the grid this.numberCells.forEach(cellData => { const cell = cellData.element; const randomNumber = Math.floor(Math.random() * 10); cell.innerText = randomNumber.toString(); cell.style.transform = ''; // Clear any collection animation transforms cell.style.transition = ''; // Clear any collection animation transitions cell.style.opacity = '0'; // Prepare for fade-in cellData.isBeingCollected = false; // Reset collection state delete cell.dataset.collectionAnimationProcessed; // Clean up animation flag // Force reflow and apply fade-in animation cell.classList.remove('fade-in-new-number'); void cell.offsetWidth; cell.classList.add('fade-in-new-number'); // Cleanup animation class after it finishes const handleFadeInEnd = (e) => { if (e.target !== cell || e.animationName !== 'fadeInOpacity') { return; } cell.classList.remove('fade-in-new-number'); cell.style.opacity = '1'; // Ensure fully visible cell.removeEventListener('animationend', handleFadeInEnd); }; cell.addEventListener('animationend', handleFadeInEnd); }); this.gameState = 'tracking'; // Changed from 'playing' this.lastVideoTime = -1; this.clock.start(); this.debugLogCount = 0; // Reset debug log counter on restart // Removed _startSpawning() } // _updateScoreDisplay method removed. // _showStartButton() method removed. _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 // Update video element size, considering title bar const videoTopOffset = this.titleBarHeight; this.videoElement.style.top = `${videoTopOffset}px`; this.videoElement.style.width = width + 'px'; this.videoElement.style.height = (height - videoTopOffset) + 'px'; // Update title bar height if it's dynamic (e.g., based on clamp) // For now, it's fixed, but if it were dynamic: // this.titleBarHeight = this.titleBarElement.offsetHeight; // And then re-adjust macrodataGrid and videoElement if titleBarHeight changed. // For simplicity with fixed height, this isn't strictly necessary for this.titleBarHeight itself. // Update macrodata grid position and height if (this.macrodataGrid) { this.macrodataGrid.style.top = `${this.titleBarHeight}px`; this.macrodataGrid.style.height = `calc(100% - ${this.titleBarHeight}px - ${this.targetBoxAreaHeight}px)`; } // Target box container is positioned with 'bottom: 0', so its 'top' effectively changes with screen height. // Its height is fixed by this.targetBoxAreaHeight, so no specific resize update needed for it here // unless its internal content needs responsive adjustments beyond flexbox. // Watermelon, Chad, GroundLine updates removed. } _updateHandLines(handIndex, landmarks, videoParams, canvasWidth, canvasHeight) { const hand = this.hands[handIndex]; const lineGroup = hand.lineGroup; while (lineGroup.children.length) { const child = lineGroup.children[0]; lineGroup.remove(child); if (child.geometry) child.geometry.dispose(); // Materials are shared, no need to dispose them here unless they are unique per line/circle } if (!landmarks || landmarks.length === 0 || !videoParams) { lineGroup.visible = false; return; } const points3D = landmarks.map(lm => { 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 values to [0, 1] range to avoid issues if landmarks fall slightly outside the calculated visible area // due to precision or edge cases. This ensures they map correctly to the canvas. 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; // Corrected Y calculation for Three.js ortho camera // normY_visible = 0 (top of video) should map to Three.js Y = canvasHeight / 2 - this.titleBarHeight // normY_visible = 1 (bottom of video) should map to Three.js Y = -canvasHeight / 2 const videoDisplayHeightThree = canvasHeight - this.titleBarHeight; const y_top_video_three = canvasHeight / 2 - this.titleBarHeight; const y = y_top_video_three - (normY_visible * videoDisplayHeightThree); return new THREE.Vector3(x, y, 1.1); // Z for fingertip circles, slightly in front of lines }); const lineZ = 1; // Z for connection lines this.handConnections.forEach(conn => { const p1 = points3D[conn[0]]; const p2 = points3D[conn[1]]; if (p1 && p2) { // Ensure landmarks exist // Create points for the line with the correct Z 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.handLineMaterial); lineGroup.add(line); } }); // Draw fingertip circles const fingertipRadius = 8; // Radius of the circle for fingertips const wristRadius = 12; // Larger radius for the wrist const circleSegments = 16; // Smoothness of the circle this.fingertipLandmarkIndices.forEach(index => { const landmarkPosition = points3D[index]; if (landmarkPosition) { const radius = (index === 0) ? wristRadius : fingertipRadius; // Use wristRadius for landmark 0 const circleGeometry = new THREE.CircleGeometry(radius, circleSegments); const material = handIndex === 0 ? this.fingertipMaterialHand1 : this.fingertipMaterialHand2; const landmarkCircle = new THREE.Mesh(circleGeometry, material); landmarkCircle.position.copy(landmarkPosition); // Already has Z=1.1 lineGroup.add(landmarkCircle); } }); lineGroup.visible = true; } _animate() { requestAnimationFrame(this._animate.bind(this)); if (this.gameState === 'won') { // If game is won, we might still want some minimal rendering (e.g., background) // but skip hand tracking and number cell pulsing. this.renderer.render(this.scene, this.camera); // Render basic scene if needed return; // Skip main game loop updates } // const deltaTime = this.clock.getDelta(); // deltaTime not used currently // Update hands if tracking if (this.gameState === 'tracking') { this._updateHands(); this._updateNumberCellProximityMagnification(); // New call } // _updateGhosts and _updateParticles calls removed. this._updateNumberCellPulsing(); // Add call to update number cell animations // Always render the scene this.renderer.render(this.scene, this.camera); } _updateNumberCellProximityMagnification() { if (this.gameState !== 'tracking' || this.numberCells.length === 0) return; const proximityThreshold = 75; // pixels const magnificationFactor = 2.5; // Increased Scale multiplier (was 1.8) // Reset magnification state for all cells first this.numberCells.forEach(cellData => { cellData.isMagnified = false; // cellData.magnificationScale will be overwritten if magnified, otherwise pulsing handles it }); this.hands.forEach(hand => { if (hand.landmarks && hand.indexTipScreenPos.x !== -1) { // Hand visible and index tip pos valid const fingertipX = hand.indexTipScreenPos.x; const fingertipY = hand.indexTipScreenPos.y; this.numberCells.forEach(cellData => { if (cellData.isBeingCollected || cellData.element.style.display === 'none') { return; // Skip collected or hidden cells } const cellRect = cellData.element.getBoundingClientRect(); const cellCenterX = cellRect.left + cellRect.width / 2; const cellCenterY = cellRect.top + cellRect.height / 2; const distance = Math.sqrt( Math.pow(fingertipX - cellCenterX, 2) + Math.pow(fingertipY - cellCenterY, 2) ); if (distance < proximityThreshold) { cellData.isMagnified = true; cellData.magnificationScale = cellData.baseScale * magnificationFactor; } }); } }); } _updateNumberCellPulsing() { if (!this.simplex || this.numberCells.length === 0 || this.gameState !== 'tracking') { return; } const time = this.clock.getElapsedTime(); const noiseScaleFactor = 0.07; const pulseSpeed = 0.4; const minPulsingScale = 0.3; // Decreased for more shrinkage (was 0.5) const maxPulsingScale = 1.7; // Increased for more growth (was 1.5) this.numberCells.forEach(cellData => { if (cellData.element.style.display === 'none' || cellData.isBeingCollected) { return; } let targetScale; if (cellData.isMagnified) { targetScale = cellData.magnificationScale; } else { const noiseX = cellData.gridX * noiseScaleFactor + time * pulseSpeed * 0.2; const noiseY = cellData.gridY * noiseScaleFactor - time * pulseSpeed * 0.15; const noiseValue = this.simplex(noiseX, noiseY); // [-1, 1] targetScale = minPulsingScale + (noiseValue + 1) / 2 * (maxPulsingScale - minPulsingScale); targetScale = parseFloat(targetScale.toFixed(3)); } // Vibration parameters let vibrationBaseIntensity = 0.4; const vibrationFrequency = 20; let fontSizeFactor = cellData.computedFontSize ? (cellData.computedFontSize / 15) : 1; fontSizeFactor = Math.pow(fontSizeFactor, 2); if (cellData.isMagnified) { vibrationBaseIntensity *= 6.0; // Further increased vibration intensity multiplier for magnified (was 4.5) } const currentVibrationIntensity = vibrationBaseIntensity * fontSizeFactor; const vibrationNoiseX = this.simplex(cellData.gridX * 0.5 + time * vibrationFrequency, cellData.gridY * 0.5 + time * vibrationFrequency * 1.1); const vibrationNoiseY = this.simplex(cellData.gridX * 0.5 - time * vibrationFrequency * 0.9, cellData.gridY * 0.5 + time * vibrationFrequency); const offsetX = vibrationNoiseX * currentVibrationIntensity; const offsetY = vibrationNoiseY * currentVibrationIntensity; if (cellData.element.style.display !== 'none') { cellData.element.style.transform = `translateX(${offsetX.toFixed(2)}px) translateY(${offsetY.toFixed(2)}px) scale(${targetScale})`; cellData.lastAppliedScale = targetScale; } }); } start() { // Add click listener for resuming audio context and potentially restarting on error const handleInitialInteraction = () => { this.audioManager.resumeContext(); // Try to start background music after the first user interaction if context is now running if (!this.isBackgroundMusicPlaying && this.audioManager.audioCtx && this.audioManager.audioCtx.state === 'running') { this.audioManager.loadAndPlayBackgroundMusic(this.backgroundMusicUrl); this.isBackgroundMusicPlaying = true; } if (this.gameState === 'error' || this.gameState === 'paused') { // Assuming 'paused' might be a state where restart is desired this._restartGame(); // Restart tracking } // Note: The win screen button handles its own restart, so no need for a global click listener for 'won' state here. // Remove this listener after the first interaction to avoid multiple music start attempts from general clicks // if the music has successfully started or the game logic handles it elsewhere. // However, keeping it allows audio resume on subsequent clicks if it gets suspended again. // A more robust approach would be to specifically listen for audio context state changes. }; this.renderDiv.addEventListener('click', handleInitialInteraction); console.log('Game setup initiated. Waiting for async operations...'); // Note: Game interaction now starts via the Start Button after _init completes. } // _updateSpeechBubbleAppearance method removed // _setupSpeechRecognition method removed }

Other games like this

About macrodata refinement