import * as THREE from 'three'; import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js'; // Import GLTFLoader import { HandLandmarker, FilesetResolver } from 'https://esm.sh/@mediapipe/tasks-vision@0.10.14'; import { AudioManager } from 'audioManager'; // Import the AudioManager import { PhysicsManager } from 'PhysicsManager'; // Import PhysicsManager 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 (0 is wrist) this.handConnections = null; // Landmark connection definitions this.handInteractionRadiusPixels = 50; // Radius in pixels for hand landmark interaction points (now 1 meter in physics) this.gameState = 'loading'; // loading, ready, tracking, error, completed this.gameOverText = null; // Will be repurposed or simplified 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.blobs = []; // To store our blob sprites this.msnTexture = null; // Texture for initial MSN state this.pcTexture = null; // Texture for PC ZONE MARKER this.macTexture = null; // Texture for Mac ZONE MARKER this.transformedPcBlobTexture = null; // Texture for PC-transformed BLOBS this.transformedMacBlobTexture = null; // Texture for Mac-transformed BLOBS this.physicsManager = null; // To manage Rapier 2D physics this.blobPhysicsIds = new Map(); // To map blob sprites to physics body IDs this.progressTextElement = null; // For displaying transformation progress this.allBlobsTransformed = false; // Flag to track if completion logic has run this.pcZoneVisual = null; // Mesh for PC zone background this.macZoneVisual = null; // Mesh for Mac zone background this.pcZoneMarker = null; // Sprite for PC icon in zone this.macZoneMarker = null; // Sprite for Mac icon in zone this.zoneMaterial = null; // Shared material for zone backgrounds this.initialCooldownActive = false; this.initialCooldownDuration = 2.0; // 2 seconds this.initialCooldownTimer = 0; // Initialize asynchronously this._init().catch(error => { // console.error("Initialization failed:", error); this._showError("Initialization failed. Check console."); }); } async _init() { this._setupDOM(); // Sets up basic DOM, including speech bubble container this._setupThree(); // Pass audioManager to PhysicsManager for collision sounds this.physicsManager = new PhysicsManager(this.audioManager); await this.physicsManager.init(); // Restore world boundaries creation this.physicsManager.createWorldBoundaries(this.renderDiv.clientWidth, this.renderDiv.clientHeight); await this._loadAssets(); // Add asset loading step // Load custom Mac sound after general assets and AudioManager initialization await this.audioManager.loadMacTransformSound('https://play.rosebud.ai/assets/macos-sound-fx-error.wav?jUr6'); await this.audioManager.loadPcTransformSound('https://play.rosebud.ai/assets/windows-7-critical-stop.wav?tgP7'); this._createTransformationZoneVisuals(); // Create zone visuals this._createInitialBlobs(); // Create visual blobs & their physics bodies await this._setupHandTracking(); // This needs to complete before we can proceed // Ensure webcam is playing before starting game logic dependent on it await this.videoElement.play(); window.addEventListener('resize', this._onResize.bind(this)); this.gameState = 'ready'; // Change state to ready, not playing // Start button removed, game will start automatically this._startGame(); 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 // Dynamically add Google Font for pixel style const fontLink = document.createElement('link'); fontLink.href = 'https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap'; fontLink.rel = 'stylesheet'; document.head.appendChild(fontLink); // --- Start Screen Overlay and its contents (title, instructions, loading text) 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.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 = '1px 1px 2px black'; // Adjusted for pixel font // Default fontFamily for gameOverContainer, will be overridden for completion message 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 setup removed // Progress Text Element this.progressTextElement = document.createElement('div'); this.progressTextElement.style.position = 'absolute'; this.progressTextElement.style.top = '20px'; // Position from the top this.progressTextElement.style.left = '50%'; this.progressTextElement.style.transform = 'translateX(-50%)'; this.progressTextElement.style.minWidth = '200px'; // Adjusted minWidth slightly, can be fine-tuned this.progressTextElement.style.textAlign = 'right'; // Align text to the right this.progressTextElement.style.whiteSpace = 'pre-wrap'; // Allow wrapping for multi-line, preserve spaces this.progressTextElement.style.zIndex = '10'; // Above video, potentially above other UI this.progressTextElement.style.color = 'white'; this.progressTextElement.style.fontSize = 'clamp(18px, 4vw, 36px)'; // Decreased font size this.progressTextElement.style.fontWeight = 'normal'; // Pixel fonts often look better without bold this.progressTextElement.style.textShadow = '1px 1px 2px black'; // Adjust shadow for pixel font this.progressTextElement.style.fontFamily = '"Press Start 2P", cursive'; this.progressTextElement.innerHTML = 'PC: 0
Mac: 0
na: 100'; // Initial text with line break for neutral blobs this.renderDiv.appendChild(this.progressTextElement); // Background image for completion screen this.completionBackgroundImageElement = document.createElement('div'); this.completionBackgroundImageElement.style.position = 'absolute'; this.completionBackgroundImageElement.style.top = '0'; this.completionBackgroundImageElement.style.left = '0'; this.completionBackgroundImageElement.style.width = '100%'; this.completionBackgroundImageElement.style.height = '100%'; // Background image will be set dynamically in _showStatusScreen this.completionBackgroundImageElement.style.backgroundSize = 'cover'; this.completionBackgroundImageElement.style.backgroundPosition = 'center'; this.completionBackgroundImageElement.style.zIndex = '9'; // Below status text, above video/canvas this.completionBackgroundImageElement.style.display = 'none'; // Hidden initially this.renderDiv.appendChild(this.completionBackgroundImageElement); } _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 // removed pickedUpGhost, isPinching, pinchPointWorld }); } 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() { const textureLoader = new THREE.TextureLoader(); // const gltfLoader = new GLTFLoader(); // Only if loading other models try { // Load initial MSN blob texture this.msnTexture = await textureLoader.loadAsync('https://play.rosebud.ai/assets/msn-mobile-icon.png?Em51'); // Load PC zone marker texture this.pcTexture = await textureLoader.loadAsync('https://play.rosebud.ai/assets/windows2.png?rXrL'); // Load Mac zone marker texture this.macTexture = await textureLoader.loadAsync('https://play.rosebud.ai/assets/apple.png?OvhS'); // Load textures for Blobs after transformation this.transformedPcBlobTexture = await textureLoader.loadAsync('https://play.rosebud.ai/assets/computer.png?ZhS6'); this.transformedMacBlobTexture = await textureLoader.loadAsync('https://play.rosebud.ai/assets/Apple_Computer_Logo_rainbow.svg (1).png?jeob'); // Ghost Textures loading removed // Ghost GLTF Model loading removed (was already commented out) } catch (error) { // console.error("Error loading assets:", error); this._showError("Failed to load assets."); // Generic message throw error; // Stop initialization } } async _setupHandTracking() { try { 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 }); const stream = await navigator.mediaDevices.getUserMedia({ video: { facingMode: 'user', width: { ideal: 1280 }, height: { ideal: 720 } }, audio: false, }); this.videoElement.srcObject = stream; // Wait for video metadata to load to ensure dimensions are available return new Promise((resolve) => { this.videoElement.onloadedmetadata = () => { // Adjust video size slightly after metadata is loaded if needed, but CSS handles most this.videoElement.style.width = this.renderDiv.clientWidth + 'px'; this.videoElement.style.height = this.renderDiv.clientHeight + 'px'; resolve(); }; }); } catch (error) { // console.error('Error setting up Hand Tracking or Webcam:', error); this._showError(`Webcam/Hand Tracking Error: ${error.message}. Please allow camera access.`); throw error; // Re-throw to stop initialization } } // _startSpawning, _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]; 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, // visibility and presence are not typically part of MediaPipe landmark objects directly, // but if they were, you might carry them over or smooth them if appropriate. }; }); this.lastLandmarkPositions[i] = smoothedLandmarks.map(lm => ({...lm})); // Update last positions with new smoothed ones hand.landmarks = smoothedLandmarks; const palm = smoothedLandmarks[9]; // MIDDLE_FINGER_MCP const lmOriginalX = palm.x * videoParams.videoNaturalWidth; const lmOriginalY = palm.y * videoParams.videoNaturalHeight; let normX_visible = (lmOriginalX - videoParams.offsetX) / videoParams.visibleWidth; let normY_visible = (lmOriginalY - videoParams.offsetY) / videoParams.visibleHeight; const handX = (1 - normX_visible) * canvasWidth - canvasWidth / 2; const handY = (1 - normY_visible) * canvasHeight - canvasHeight / 2; hand.anchorPos.set(handX, handY, 1); this._updateHandLines(i, smoothedLandmarks, videoParams, canvasWidth, canvasHeight); hand.lineGroup.visible = true; } else { // No landmarks for this hand hand.landmarks = null; if (hand.lineGroup) hand.lineGroup.visible = false; } // After updating hand lines and visibility if (hand.lineGroup.visible && hand.landmarks) { this._handleHandBlobInteractions(i, hand.landmarks, videoParams, canvasWidth, canvasHeight); } } } catch (error) { // console.error("Error during hand 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 }; } _createInitialBlobs() { if (!this.msnTexture) { // console.error("MSN texture not loaded. Cannot create blobs."); return; } const numBlobs = 100; const blobBaseSize = Math.min(this.renderDiv.clientWidth, this.renderDiv.clientHeight) / 12; for (let i = 0; i < numBlobs; i++) { const material = new THREE.SpriteMaterial({ map: this.msnTexture, // Start with MSN texture color: 0xffffff, transparent: true, depthTest: false }); const blobSprite = new THREE.Sprite(material); const randomScaleFactor = 0.8 + Math.random() * 0.4; blobSprite.scale.set(blobBaseSize * randomScaleFactor, blobBaseSize * randomScaleFactor, 1); const visualX = (Math.random() - 0.5) * (this.renderDiv.clientWidth * 0.7); const visualY = (Math.random() - 0.5) * (this.renderDiv.clientHeight * 0.4) + (this.renderDiv.clientHeight * 0.1); blobSprite.position.set(visualX, visualY, 2); this.scene.add(blobSprite); this.blobs.push(blobSprite); if (this.physicsManager && this.physicsManager.isInitialized) { const visualRadius = (blobBaseSize * randomScaleFactor) / 2; const physicsRadius = this.physicsManager.pixelsToMeters(visualRadius); const physicsX = this.physicsManager.pixelsToMeters(visualX); const physicsY = this.physicsManager.pixelsToMeters(visualY); const physicsId = this.physicsManager.createCircularBody( physicsRadius, physicsX, physicsY, 0.6, 0.5, false, { spriteIndex: i, type: 'msn' } // Add type to physics userData as well for consistency if needed ); blobSprite.userData = { physicsId: physicsId, type: 'msn' }; // Blob type: 'msn', 'pc', 'mac' } } } _createTransformationZoneVisuals() { if (this.pcZoneVisual) this.scene.remove(this.pcZoneVisual); if (this.macZoneVisual) this.scene.remove(this.macZoneVisual); if (this.pcZoneMarker) this.scene.remove(this.pcZoneMarker); if (this.macZoneMarker) this.scene.remove(this.macZoneMarker); const screenWidth = this.renderDiv.clientWidth; const screenHeight = this.renderDiv.clientHeight; // Zone dimensions (consistent with detection logic) - increased size const zoneWidth = screenWidth * 0.22; // Increased from 0.15 to 0.22 (22%) const zoneHeight = screenHeight * 0.22; // Increased from 0.15 to 0.22 (22%) const zoneDepth = 0.1; // A small depth for the plane if (!this.zoneMaterial) { this.zoneMaterial = new THREE.MeshBasicMaterial({ color: 0xADD8E6, // Light Blue transparent: true, opacity: 0.55, // Further increased opacity for zone background side: THREE.DoubleSide }); } const zoneGeometry = new THREE.PlaneGeometry(zoneWidth, zoneHeight); // PC Zone (Top-Left) this.pcZoneVisual = new THREE.Mesh(zoneGeometry, this.zoneMaterial); this.pcZoneVisual.position.set( -screenWidth / 2 + zoneWidth / 2, screenHeight / 2 - zoneHeight / 2, 0.8 // Z-position: behind hand lines, in front of video ); this.scene.add(this.pcZoneVisual); if (this.pcTexture) { const pcMarkerMaterial = new THREE.SpriteMaterial({ map: this.pcTexture, color: 0xffffff, transparent: true, opacity: 1.0, // Full opacity for PC marker depthTest: false // Ensure visible over zone background }); this.pcZoneMarker = new THREE.Sprite(pcMarkerMaterial); const markerSize = Math.min(zoneWidth, zoneHeight) * 0.85; // Increased from 0.7 to 0.85 for more height this.pcZoneMarker.scale.set(markerSize, markerSize, 1); this.pcZoneMarker.position.set( this.pcZoneVisual.position.x, this.pcZoneVisual.position.y, 0.9 // Slightly in front of the zone background ); this.scene.add(this.pcZoneMarker); } // Mac Zone (Top-Right) this.macZoneVisual = new THREE.Mesh(zoneGeometry.clone(), this.zoneMaterial); // Use clone for geometry this.macZoneVisual.position.set( screenWidth / 2 - zoneWidth / 2, screenHeight / 2 - zoneHeight / 2, 0.8 // Z-position ); this.scene.add(this.macZoneVisual); if (this.macTexture) { const macMarkerMaterial = new THREE.SpriteMaterial({ map: this.macTexture, color: 0xffffff, transparent: true, opacity: 1.0, // Full opacity for Mac marker depthTest: false }); this.macZoneMarker = new THREE.Sprite(macMarkerMaterial); const markerSizeMac = Math.min(zoneWidth, zoneHeight) * 0.85; // Increased from 0.7 to 0.85 for more height, consistent with PC // Scale Mac icon to be a square of the same size as the PC icon // const macAspect = this.macTexture.image ? this.macTexture.image.height / this.macTexture.image.width : 1; // Aspect ratio no longer used for direct scaling here this.macZoneMarker.scale.set(markerSizeMac, markerSizeMac, 1); // Force square scaling this.macZoneMarker.position.set( this.macZoneVisual.position.x, this.macZoneVisual.position.y, 0.9 // Slightly in front of the zone background ); this.scene.add(this.macZoneMarker); } } // _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'; if (this.gameState === 'completed') { const pcCount = this.blobs.filter(b => b.userData.type === 'pc').length; const macCount = this.blobs.filter(b => b.userData.type === 'mac').length; if (pcCount > macCount) { this.gameOverText.innerText = "Bill Gates Thanks You!"; // Optionally set a different background for Bill if desired, or use the same one. // For now, using the same one as requested. this.completionBackgroundImageElement.style.backgroundImage = `url('https://play.rosebud.ai/assets/de5i66smnd9a1.webp?MU2H')`; } else if (macCount > pcCount) { this.gameOverText.innerText = "Steve Jobs Thanks You!"; this.completionBackgroundImageElement.style.backgroundImage = `url('https://play.rosebud.ai/assets/de5i66smnd9a1.webp?MU2H')`; } else { // Tie condition this.gameOverText.innerText = "Everyone Thanks You!"; // Or a generic tie message this.completionBackgroundImageElement.style.backgroundImage = `url('https://play.rosebud.ai/assets/de5i66smnd9a1.webp?MU2H')`; } this.gameOverText.style.color = '#FFD700'; // Gold color for "Thanks" this.gameOverText.style.fontFamily = '"Press Start 2P", cursive'; // Apply pixel font this.gameOverText.style.fontSize = 'clamp(24px, 6vw, 48px)'; // Adjust size for pixel font readability this.restartHintText.innerText = '(click to restart)'; this.restartHintText.style.fontFamily = '"Press Start 2P", cursive'; // Apply pixel font to hint this.restartHintText.style.fontSize = 'clamp(12px, 2.5vw, 18px)'; // Adjust size this.restartHintText.style.display = 'block'; this.completionBackgroundImageElement.style.display = 'block'; if(this.progressTextElement) this.progressTextElement.style.display = 'none'; // Hide progress % } else { // Reset font for other messages like errors if needed, or set a default for gameOverText this.gameOverText.style.fontFamily = '"Arial Black", Gadget, sans-serif'; this.gameOverText.style.fontSize = 'clamp(36px, 10vw, 72px)'; this.restartHintText.style.fontFamily = '"Arial Black", Gadget, sans-serif'; this.restartHintText.style.fontSize = 'clamp(16px, 3vw, 24px)'; this.completionBackgroundImageElement.style.display = 'none'; if(this.progressTextElement) this.progressTextElement.style.display = 'block'; // Show progress % } // No spawning to stop for template } _showError(message) { this.gameOverContainer.style.display = 'block'; this.gameOverText.innerText = `ERROR: ${message}`; this.gameOverText.style.color = 'orange'; this.gameOverText.style.fontFamily = '"Press Start 2P", cursive'; // Use pixel font for errors too this.gameOverText.style.fontSize = 'clamp(18px, 4vw, 36px)'; // Adjusted size this.restartHintText.innerText = '(click to try again)'; this.restartHintText.style.fontFamily = '"Press Start 2P", cursive'; this.restartHintText.style.fontSize = 'clamp(12px, 2.5vw, 18px)'; this.restartHintText.style.display = 'block'; // Changed from 'true' string this.gameState = 'error'; // No spawning to stop this.hands.forEach(hand => { if (hand.lineGroup) hand.lineGroup.visible = false; }); // Removed startButton visibility update as button is removed. } _startGame() { if (this.gameState !== 'ready') return; this.audioManager.resumeContext(); // For general audio // References to startScreenOverlay and startButton display removed. this.gameState = 'tracking'; // Changed from 'playing' this.lastVideoTime = -1; this.initialCooldownActive = true; this.initialCooldownTimer = this.initialCooldownDuration; this.clock.start(); // Removed display of score, castle, chad // Removed _startSpawning() } _restartGame() { this.gameOverContainer.style.display = 'none'; this.completionBackgroundImageElement.style.display = 'none'; // Hide completion background if (this.progressTextElement) this.progressTextElement.style.display = 'block'; // Ensure progress text is visible this.hands.forEach(hand => { if (hand.lineGroup) { hand.lineGroup.visible = false; } }); // Reset all blobs this.blobs.forEach(blobSprite => { blobSprite.userData.type = 'msn'; // Reset type to 'msn' if (this.msnTexture) { blobSprite.material.map = this.msnTexture; // Reset texture to MSN blobSprite.material.needsUpdate = true; } const physicsId = blobSprite.userData.physicsId; if (physicsId !== undefined && this.physicsManager && this.physicsManager.isInitialized) { const body = this.physicsManager.bodies.get(physicsId); if (body) { body.setLinvel({ x: 0, y: 0 }, true); body.setAngvel(0, true); const currentBodyUserData = body.userData; if (currentBodyUserData) { body.userData = { ...currentBodyUserData, type: 'msn' }; // Also reset type in physics body's userData } // Optional: If you want to re-randomize positions on restart: // const visualX = (Math.random() - 0.5) * (this.renderDiv.clientWidth * 0.7); // const visualY = (Math.random() - 0.5) * (this.renderDiv.clientHeight * 0.4) + (this.renderDiv.clientHeight * 0.1); // const physicsX = this.physicsManager.pixelsToMeters(visualX); // const physicsY = this.physicsManager.pixelsToMeters(visualY); // this.physicsManager.setBodyPosition(physicsId, physicsX, physicsY); // blobSprite.position.set(visualX, visualY, 2); } } }); if (this.progressTextElement) { const initialNeutralCount = this.blobs.length; // Assuming all blobs start as 'msn' this.progressTextElement.innerHTML = `PC: 0
Mac: 0
na: ${initialNeutralCount}`; // Reset score with neutral count } this.allBlobsTransformed = false; // Ensure this flag is reset if it wasn't done elsewhere this.gameState = 'tracking'; this.lastVideoTime = -1; this.initialCooldownActive = true; this.initialCooldownTimer = this.initialCooldownDuration; this.clock.start(); } // _updateScoreDisplay method removed. // _showStartButton method removed as the button itself is 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 this.videoElement.style.width = width + 'px'; this.videoElement.style.height = height + 'px'; // Watermelon, Chad, GroundLine updates removed. this._createTransformationZoneVisuals(); // Recreate/update zone visuals on resize } _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; const y = (1 - normY_visible) * canvasHeight - canvasHeight / 2; 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; } _handleHandBlobInteractions(handIndex, landmarks, videoParams, canvasWidth, canvasHeight) { if (!this.physicsManager || !this.physicsManager.isInitialized || !landmarks) return; const interactionPointsWorld = this.fingertipLandmarkIndices.map(index => { const lm = landmarks[index]; if (!lm) return null; 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 visualX = (1 - normX_visible) * canvasWidth - canvasWidth / 2; const visualY = (1 - normY_visible) * canvasHeight - canvasHeight / 2; return new THREE.Vector2(visualX, visualY); // Using Vector2 for 2D positions }).filter(p => p !== null); const interactionRadiusPhysics = this.physicsManager.pixelsToMeters(this.handInteractionRadiusPixels); this.blobs.forEach(blobSprite => { const physicsId = blobSprite.userData.physicsId; if (physicsId === undefined) return; const blobState = this.physicsManager.getBodyState(physicsId); if (!blobState) return; const blobPositionPhysics = new THREE.Vector2(blobState.x, blobState.y); const blobRadiusPhysics = this.physicsManager.pixelsToMeters(blobSprite.scale.x / 2); // Approximate radius from sprite scale interactionPointsWorld.forEach(pointVisual => { const pointPhysics = new THREE.Vector2( this.physicsManager.pixelsToMeters(pointVisual.x), this.physicsManager.pixelsToMeters(pointVisual.y) ); const distanceSq = pointPhysics.distanceToSquared(blobPositionPhysics); const combinedRadius = blobRadiusPhysics + interactionRadiusPhysics; if (distanceSq < combinedRadius * combinedRadius) { // Collision detected const direction = new THREE.Vector2().subVectors(blobPositionPhysics, pointPhysics).normalize(); // Slightly decreased impulse magnitude for hand interaction const impulseMagnitude = 4.0; this.physicsManager.applyImpulse(physicsId, direction.x * impulseMagnitude, direction.y * impulseMagnitude); } }); }); } _animate() { requestAnimationFrame(this._animate.bind(this)); const deltaTime = this.clock.getDelta(); // Get deltaTime once per frame // Update hands if tracking if (this.gameState === 'tracking') { this._updateHands(); if (this.initialCooldownActive) { this.initialCooldownTimer -= deltaTime; if (this.initialCooldownTimer <= 0) { this.initialCooldownActive = false; this.initialCooldownTimer = 0; // console.log("Initial game cooldown finished."); } } } // Step physics world and update blob positions if (this.physicsManager && this.physicsManager.isInitialized) { this.physicsManager.stepWorld(); this.blobs.forEach(blobSprite => { const physicsId = blobSprite.userData.physicsId; if (physicsId !== undefined) { const state = this.physicsManager.getBodyState(physicsId); if (state) { blobSprite.position.x = this.physicsManager.metersToPixels(state.x); blobSprite.position.y = this.physicsManager.metersToPixels(state.y); // Sprites don't typically rotate with physics body rotation in 2D unless desired. // blobSprite.rotation.z = state.angle; // Corner-based transformation logic // A blob can be 'msn', 'pc', or 'mac'. // We check if its current type should change based on zone entry. const currentType = blobSprite.userData.type; let newType = null; const screenWidth = this.renderDiv.clientWidth; const screenHeight = this.renderDiv.clientHeight; // Define corner zone sizes - increased size, consistent with _createTransformationZoneVisuals const zoneWidth = screenWidth * 0.22; // Increased from 0.15 to 0.22 const zoneHeight = screenHeight * 0.22; // Increased from 0.15 to 0.22 // World coordinates of corners (orthographic camera, origin at center) const topLeftX = -screenWidth / 2; const topLeftY = screenHeight / 2; const topRightX = screenWidth / 2; const topRightY = screenHeight / 2; // Same Y as top-left const blobWorldX = blobSprite.position.x; const blobWorldY = blobSprite.position.y; // Check for top-left corner (PC Zone) if (blobWorldX < topLeftX + zoneWidth && blobWorldY > topLeftY - zoneHeight) { if (currentType === 'msn' || currentType === 'mac') { newType = 'pc'; } } // Check for top-right corner (Mac Zone) else if (blobWorldX > topRightX - zoneWidth && blobWorldY > topRightY - zoneHeight) { if (currentType === 'msn' || currentType === 'pc') { newType = 'mac'; } } if (newType && newType !== currentType && !this.initialCooldownActive) { // Check cooldown blobSprite.userData.type = newType; const body = this.physicsManager.bodies.get(physicsId); if (body && body.userData) { body.userData = { ...body.userData, type: newType }; } if (newType === 'pc') { blobSprite.material.map = this.transformedPcBlobTexture; } else if (newType === 'mac') { blobSprite.material.map = this.transformedMacBlobTexture; } blobSprite.material.needsUpdate = true; this.audioManager.playBlobTransformSound(newType); // Pass 'pc' or 'mac' } } } } ); // Corrected: removed extra '}' // Update progress text and check for game completion if (this.blobs.length > 0) { const totalBlobs = this.blobs.length; const pcCount = this.blobs.filter(b => b.userData.type === 'pc').length; const macCount = this.blobs.filter(b => b.userData.type === 'mac').length; const neutralCount = totalBlobs - pcCount - macCount; // Calculate neutral blobs if (this.progressTextElement) { this.progressTextElement.innerHTML = `PC: ${pcCount}
Mac: ${macCount}
na: ${neutralCount}`; // Update score with neutral count } // Game completes when all initial MSN blobs are transformed to EITHER PC or Mac if (neutralCount === 0 && totalBlobs > 0 && !this.allBlobsTransformed) { // Check if neutralCount is 0 this.allBlobsTransformed = true; // Set flag this.gameState = 'completed'; // Set game state to completed this.audioManager.playCompletionSound(); // The message and styling are now handled by _showStatusScreen based on 'completed' state this._showStatusScreen("", "", true); // Message and color are overridden by 'completed' state } } else if (this.progressTextElement) { this.progressTextElement.innerHTML = 'PC: 0
Mac: 0
na: 0'; // Default if no blobs, assuming 0 neutral } } // _updateGhosts and _updateParticles calls removed. // 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 === 'completed') { if (this.gameState === 'completed') { // this.allBlobsTransformed = false; // This is now handled inside _restartGame } this._restartGame(); // _restartGame now handles resetting allBlobsTransformed } }); // Note: Game interaction now starts via the Start Button after _init completes. } }

Other games like this

About PC versus Mac