import * as THREE from 'three'; import { Player } from 'player'; import { InputHandler } from 'inputHandler'; import { DamageTarget } from 'DamageTarget'; import { Projectile } from 'Projectile'; import { DegenPool } from 'DegenPool'; import { MeteorImpact } from 'MeteorImpact'; import { Vector3 } from 'three'; import { PLAYER_SIZE, TARGET_SIZE, FIREBALL_DAMAGE, FIREBALL_COOLDOWN, DEGEN_POOL_COOLDOWN, DEGEN_DAMAGE, DEGEN_DAMAGE_INTERVAL, METEOR_COOLDOWN, PLAYER_TARGET_COLLISION_DAMAGE, CAM_HEIGHT, CAMERA_FOLLOW_SPEED, METEOR_MAX_CAST_RANGE, METEOR_INDICATOR_COLOR, BLINK_COOLDOWN, BLINK_DISTANCE, STEALTH_COOLDOWN, STEALTH_DURATION, STEALTH_OPACITY // Added Stealth config } from 'config'; const BLINK_EFFECT_DURATION = 150; // ms duration player is invisible export class Game { constructor(renderDiv, joystickContainer, joystickKnob, rightJoystickContainer, rightJoystickKnob, selector1Element, selector2Element, selector3Element) { this.renderDiv = renderDiv; this.joystickContainer = joystickContainer; this.joystickKnob = joystickKnob; this.rightJoystickContainer = rightJoystickContainer; this.rightJoystickKnob = rightJoystickKnob; this.selector1Element = selector1Element; this.selector2Element = selector2Element; this.selector3Element = selector3Element; this.scene = new THREE.Scene(); this.renderer = new THREE.WebGLRenderer({ antialias: true }); this.renderer.setPixelRatio(window.devicePixelRatio); this.renderer.setSize(window.innerWidth, window.innerHeight); this.renderDiv.appendChild(this.renderer.domElement); // Use Orthographic Camera for 2D feel const aspect = window.innerWidth / window.innerHeight; this.camera = new THREE.OrthographicCamera( -CAM_HEIGHT * aspect / 2, CAM_HEIGHT * aspect / 2, CAM_HEIGHT / 2, -CAM_HEIGHT / 2, 1, 1000 ); this.camera.position.set(0, 0, 10); // Look down along -Z axis this.camera.lookAt(0, 0, 0); this.clock = new THREE.Clock(); this.setupScene(); this.player = new Player(this.scene); // Create Damage Target this.damageTarget = new DamageTarget(this.scene, new THREE.Vector3(3, 2, 0)); // Place it at (3, 2, 0) // Create separate InputHandlers for movement and aiming // The 'player' argument isn't used in InputHandler currently, so we can pass null or omit if refactored this.moveHandler = new InputHandler(null, this.joystickContainer, this.joystickKnob); // Left stick for movement this.aimHandler = new InputHandler(null, this.rightJoystickContainer, this.rightJoystickKnob); // Right stick for aiming window.addEventListener('resize', this.onWindowResize.bind(this)); this.isCollidingWithTarget = false; // Track collision state this.projectiles = []; // Array to hold active projectiles this.degenPools = []; // Array to hold active Degen Pools this.meteorImpacts = []; // Array to hold active meteor impacts // Map slot IDs to their assigned ability ID (e.g., 'fireball', 'degen_pool', null) this.abilitySlotMapping = { 'selector-1': null, 'selector-2': null, 'selector-3': null, }; // Track cooldowns per *ability type* this.abilityCooldowns = { fireball: -Infinity, degen_pool: -Infinity, meteor: -Infinity, blink: -Infinity, stealth: -Infinity, // Add stealth cooldown tracking // Add other ability types here as they are created }; this.isTargetingMeteor = false; // Flag to indicate if player is choosing meteor location this.meteorRangeIndicator = null; // Reference to the visual range indicator mesh this.activeMeteorSlotId = null; // Store which slot initiated the meteor targeting this.meteorTargetingOrigin = null; // Store player position when targeting starts // Bind the pointerdown handler for canvas interaction this.boundHandleCanvasPointerDown = this.handleCanvasPointerDown.bind(this); } setupScene() { this.scene.background = new THREE.Color(0xeeeeee); // Light grey background // Ambient light for basic illumination const ambientLight = new THREE.AmbientLight(0xffffff, 0.8); // Slightly reduce ambient intensity this.scene.add(ambientLight); // Add a directional light for highlights and shadows const directionalLight = new THREE.DirectionalLight(0xffffff, 0.7); // White light, moderate intensity directionalLight.position.set(5, 10, 7.5); // Position it coming from an angle this.scene.add(directionalLight); // --- Add Repeating Grid Background --- const gridSize = 100; // How large the ground plane is const divisions = 100; // How many grid lines // const gridColor = new THREE.Color(0xcccccc); // No longer needed for stone const stoneTexture = this.createStoneTexture(512); // Create stone texture, higher res might look better stoneTexture.wrapS = THREE.RepeatWrapping; stoneTexture.wrapT = THREE.RepeatWrapping; // Adjust repeat for desired stone scale. Smaller numbers = larger stones. stoneTexture.repeat.set(gridSize / 8, gridSize / 8); // e.g., repeat every 8 world units const groundGeometry = new THREE.PlaneGeometry(gridSize, gridSize); // Use MeshStandardMaterial for better lighting interaction with the texture const groundMaterial = new THREE.MeshStandardMaterial({ map: stoneTexture, color: 0xffffff, // Base color, the texture provides variations roughness: 0.8, // Make it less shiny metalness: 0.2, // Slightly metallic look for stone maybe? side: THREE.DoubleSide }); const ground = new THREE.Mesh(groundGeometry, groundMaterial); ground.position.z = -0.1; // Place slightly below the player ground.rotation.x = 0; // Keep it flat on the XY plane for orthographic view this.scene.add(ground); // --- End Floor --- } onWindowResize() { const aspect = window.innerWidth / window.innerHeight; this.camera.left = -CAM_HEIGHT * aspect / 2; this.camera.right = CAM_HEIGHT * aspect / 2; this.camera.top = CAM_HEIGHT / 2; this.camera.bottom = -CAM_HEIGHT / 2; this.camera.updateProjectionMatrix(); this.renderer.setSize(window.innerWidth, window.innerHeight); } start() { this.updateCooldownVisuals(); // Ensure initial UI state is correct // Use pointerdown listener for canvas interactions (like meteor targeting) this.renderDiv.addEventListener('pointerdown', this.boundHandleCanvasPointerDown); this.animate(); } animate() { requestAnimationFrame(this.animate.bind(this)); const deltaTime = this.clock.getDelta(); // Update game objects // --- Determine Input Directions --- // Get raw input from handlers let actualMoveDirection = this.moveHandler.getMoveDirection(); const aimDirection = this.aimHandler.getMoveDirection(); // Override move direction if targeting meteor let usedMoveDirection = this.isTargetingMeteor ? new THREE.Vector2(0, 0) : actualMoveDirection; // --- Update Player --- // Only update player physics if not currently blinking if (!this.player.isBlinking) { // Pass potentially modified move direction, but always pass raw aim direction this.player.update(deltaTime, usedMoveDirection, aimDirection); } // --- Update Other Game Objects --- this.damageTarget.update(deltaTime); // Update the target as well (placeholder for now) // --- Collision Detection and Response --- // Skip collisions if player is blinking if (!this.player.isBlinking) { this.checkAndResolveCollisions(); } // Smoothly move camera towards player const playerPosition = this.player.getPosition(); const targetX = playerPosition.x; const targetY = playerPosition.y; // Manually calculate interpolated position const currentX = this.camera.position.x; const currentY = this.camera.position.y; const nextX = currentX + (targetX - currentX) * CAMERA_FOLLOW_SPEED; const nextY = currentY + (targetY - currentY) * CAMERA_FOLLOW_SPEED; // Set the camera position (keeping Z the same) this.camera.position.x = nextX; this.camera.position.y = nextY; // Ensure camera continues looking at the player's actual XY position on the Z=0 plane this.camera.lookAt(playerPosition.x, playerPosition.y, 0); // Still look at the player's *current* position // --- Update Projectiles and Check Collisions --- const targetPos = this.damageTarget.getPosition(); // Get target position once const targetSize = TARGET_SIZE; const targetHalfSize = targetSize / 2; // Iterate backwards for safe removal from projectiles array for (let i = this.projectiles.length - 1; i >= 0; i--) { const projectile = this.projectiles[i]; // 1. Update Projectile Position const isActive = projectile.update(deltaTime); // If projectile reached max distance or is otherwise inactive if (!isActive) { this.projectiles.splice(i, 1); continue; // Skip collision check for removed projectile } // 2. Check Collision with Damage Target const projectilePos = projectile.getPosition(); const projectileSize = projectile.getSize(); // Assuming getSize() method exists const projectileHalfSize = projectileSize / 2; // Skip collision check if player is blinking if (!this.player.isBlinking) { // AABB collision detection (simple box check) const dx = projectilePos.x - targetPos.x; const dy = projectilePos.y - targetPos.y; const combinedHalfWidths = projectileHalfSize + targetHalfSize; const combinedHalfHeights = projectileHalfSize + targetHalfSize; // Assuming square-like collision if (Math.abs(dx) < combinedHalfWidths && Math.abs(dy) < combinedHalfHeights) { // Collision detected! Apply configured damage this.damageTarget.takeDamage(FIREBALL_DAMAGE); projectile.destroy(); // Destroy the projectile this.projectiles.splice(i, 1); // Remove from array console.log("Projectile hit target!"); // Because we spliced, we must 'continue' to avoid issues with the loop index continue; } } } // Closes the main projectile loop (for i ...) // --- End Projectile Update and Collision Check --- // --- Update UI (Cooldowns etc.) --- this.updateCooldownVisuals(); // --- Update Degen Pools (Visuals & Damage Logic) --- const canvasWidth = this.renderer.domElement.clientWidth; const canvasHeight = this.renderer.domElement.clientHeight; const now = performance.now(); // Get time once for this frame for (const pool of this.degenPools) { pool.update(deltaTime); // For internal logic like fade-out pool.updateScreenPosition(this.camera, canvasWidth, canvasHeight); // Update HTML position // --- Degen Pool Damage Logic --- const poolPos = pool.getWorldPosition(); const poolRadius = pool.getRadius(); // Get world radius const distSq = poolPos.distanceToSquared(targetPos); // Use squared distance for efficiency const combinedRadius = poolRadius + targetHalfSize; // Check if target center is within pool radius + target half size // Check if target center is within pool radius + target half size // Skip damage if player is blinking if (distSq < combinedRadius * combinedRadius && !this.player.isBlinking) { // Target is inside the pool, check damage interval if (now - pool.lastDamageTickTime > DEGEN_DAMAGE_INTERVAL) { this.damageTarget.takeDamage(DEGEN_DAMAGE); pool.lastDamageTickTime = now; // Update last tick time for this pool // console.log(`Target hit by Degen Pool! Health: ${this.damageTarget.currentHealth}`); // Optional debug } } } // --- Update Meteor Impacts --- for (let i = this.meteorImpacts.length - 1; i >= 0; i--) { const impact = this.meteorImpacts[i]; if (!impact.update(deltaTime)) { // Update returns false when finished this.meteorImpacts.splice(i, 1); // Remove finished impact } } // Render the scene this.renderer.render(this.scene, this.camera); } checkAndResolveCollisions() { const playerPos = this.player.getPosition(); const targetPos = this.damageTarget.getPosition(); const playerSize = PLAYER_SIZE; const targetSize = TARGET_SIZE; const playerHalfSize = playerSize / 2; const targetHalfSize = targetSize / 2; // AABB collision detection const dx = playerPos.x - targetPos.x; const dy = playerPos.y - targetPos.y; const combinedHalfWidths = playerHalfSize + targetHalfSize; const combinedHalfHeights = playerHalfSize + targetHalfSize; // Assuming square-like collision for simplicity if (Math.abs(dx) < combinedHalfWidths && Math.abs(dy) < combinedHalfHeights) { // Collision detected! if (!this.isCollidingWithTarget) { // Apply configured collision damage this.damageTarget.takeDamage(PLAYER_TARGET_COLLISION_DAMAGE); this.isCollidingWithTarget = true; // Set flag to prevent re-triggering } // Resolve the collision push-back regardless of damage application const overlapX = combinedHalfWidths - Math.abs(dx); const overlapY = combinedHalfHeights - Math.abs(dy); // Resolve collision by pushing the player along the axis of least overlap if (overlapX < overlapY) { // Push in X direction if (dx > 0) { // Player is to the right of target playerPos.x += overlapX; } else { // Player is to the left of target playerPos.x -= overlapX; } // Zero out X velocity component pushing into the target // (Check if velocity direction opposes pushback direction) if ((dx > 0 && this.player.velocity.x < 0) || (dx < 0 && this.player.velocity.x > 0)) { this.player.velocity.x = 0; } } else { // Push in Y direction if (dy > 0) { // Player is above target playerPos.y += overlapY; } else { // Player is below target playerPos.y -= overlapY; } // Zero out Y velocity component pushing into the target if ((dy > 0 && this.player.velocity.y < 0) || (dy < 0 && this.player.velocity.y > 0)) { this.player.velocity.y = 0; } } // Note: Position modification happens directly. Velocity modification added above. } else { // No collision detected, reset the flag this.isCollidingWithTarget = false; } } // Updated function to handle cooldown visuals based on assigned ability updateSingleCooldownVisual(slotId) { // Use the stored element references if available, fallback to querySelector let selectorElement; if (slotId === 'selector-1') selectorElement = this.selector1Element; else if (slotId === 'selector-2') selectorElement = this.selector2Element; else if (slotId === 'selector-3') selectorElement = this.selector3Element; else selectorElement = document.getElementById(slotId); // Fallback if (!selectorElement) { console.warn(`Could not find selector element for slotId: ${slotId}`); return; } const assignedAbilityId = this.abilitySlotMapping[slotId]; let cooldownDuration = 0; let lastActivationTime = -Infinity; let abilityName = 'None'; // Default name // Get cooldown info based on the assigned ability if (assignedAbilityId === 'fireball') { cooldownDuration = FIREBALL_COOLDOWN; lastActivationTime = this.abilityCooldowns.fireball; abilityName = 'Fireball'; } else if (assignedAbilityId === 'degen_pool') { cooldownDuration = DEGEN_POOL_COOLDOWN; lastActivationTime = this.abilityCooldowns.degen_pool; abilityName = 'Degen Pool'; } else if (assignedAbilityId === 'meteor') { cooldownDuration = METEOR_COOLDOWN; lastActivationTime = this.abilityCooldowns.meteor; abilityName = 'Meteor'; } else if (assignedAbilityId === 'blink') { cooldownDuration = BLINK_COOLDOWN; lastActivationTime = this.abilityCooldowns.blink; abilityName = 'Blink'; } else if (assignedAbilityId === 'stealth') { cooldownDuration = STEALTH_COOLDOWN; lastActivationTime = this.abilityCooldowns.stealth; abilityName = 'Stealth'; } // Add more else if blocks for other abilities... // If no ability is assigned or cooldown is 0, ensure it looks ready if (!assignedAbilityId || cooldownDuration <= 0) { if (selectorElement.classList.contains('on-cooldown')) { selectorElement.classList.remove('on-cooldown'); const timerTextElement = selectorElement.querySelector('.cooldown-timer-text'); if (timerTextElement) { timerTextElement.style.display = 'none'; timerTextElement.textContent = ''; } } // Also ensure timer text is hidden if no ability is assigned const timerTextElement = selectorElement.querySelector('.cooldown-timer-text'); if (timerTextElement) timerTextElement.style.display = 'none'; return; // No further processing needed for empty/instant abilities } // Calculate cooldown progress for assigned ability const now = performance.now(); const timeSinceLastActivation = now - lastActivationTime; const cooldownProgress = Math.min(1, timeSinceLastActivation / cooldownDuration); // 0 to 1 const isReady = cooldownProgress >= 1; // Removed duplicate declaration const timerTextElement = selectorElement.querySelector('.cooldown-timer-text'); // Handle element not found gracefully (optional, but good practice) if (!timerTextElement) { // console.warn(`Cooldown timer text element not found for slot ${slotId}`); // Less verbose // Attempt to continue updating class/styling } if (isReady) { // Cooldown finished if (selectorElement.classList.contains('on-cooldown')) { selectorElement.classList.remove('on-cooldown'); if (timerTextElement) { timerTextElement.style.display = 'none'; timerTextElement.textContent = ''; } } } else { // On cooldown if (!selectorElement.classList.contains('on-cooldown')) { selectorElement.classList.add('on-cooldown'); if (timerTextElement) { timerTextElement.style.display = 'block'; } } // Update timer text if element exists if (timerTextElement) { const remainingTime = (cooldownDuration - timeSinceLastActivation) / 1000; timerTextElement.textContent = remainingTime.toFixed(1); } } } updateCooldownVisuals() { // Update visuals for each slot based on its assigned ability this.updateSingleCooldownVisual('selector-1'); this.updateSingleCooldownVisual('selector-2'); this.updateSingleCooldownVisual('selector-3'); } // Helper function to create a procedural stone texture createStoneTexture(size = 512) { const canvas = document.createElement('canvas'); canvas.width = size; canvas.height = size; const ctx = canvas.getContext('2d'); // Base stone colors (shades of gray) const stoneColors = ['#5a5a5a', '#6a6a6a', '#7a7a7a', '#8a8a8a', '#606060', '#707070']; const mortarColor = '#444444'; const mortarWidth = Math.max(1, Math.floor(size / 100)); // Adjust mortar width based on texture size // Fill background with mortar color first ctx.fillStyle = mortarColor; ctx.fillRect(0, 0, size, size); const stoneSizeBase = size / 5; // Adjust number of stones across texture for (let y = 0; y < size; y += stoneSizeBase) { for (let x = 0; x < size; x += stoneSizeBase) { // Add randomness to stone size and position const stoneW = stoneSizeBase * (0.8 + Math.random() * 0.4); // 80% to 120% of base const stoneH = stoneSizeBase * (0.8 + Math.random() * 0.4); const stoneX = x + (Math.random() - 0.5) * stoneSizeBase * 0.1 - mortarWidth / 2; // Add slight offset const stoneY = y + (Math.random() - 0.5) * stoneSizeBase * 0.1 - mortarWidth / 2; // Choose a random stone color const colorIndex = Math.floor(Math.random() * stoneColors.length); ctx.fillStyle = stoneColors[colorIndex]; // Add slight color variation within the stone const variation = Math.floor(Math.random() * 20) - 10; // -10 to +10 variation const baseColorHex = parseInt(stoneColors[colorIndex].slice(1), 16); let r = (baseColorHex >> 16) & 0xff; let g = (baseColorHex >> 8) & 0xff; let b = baseColorHex & 0xff; r = Math.max(0, Math.min(255, r + variation)); g = Math.max(0, Math.min(255, g + variation)); b = Math.max(0, Math.min(255, b + variation)); ctx.fillStyle = `rgb(${r},${g},${b})`; // Draw the stone rectangle (leaving space for mortar) ctx.fillRect( Math.max(0, stoneX + mortarWidth), Math.max(0, stoneY + mortarWidth), Math.max(mortarWidth, stoneW - mortarWidth * 2), // Ensure width is at least mortarWidth Math.max(mortarWidth, stoneH - mortarWidth * 2) // Ensure height is at least mortarWidth ); } } const texture = new THREE.CanvasTexture(canvas); texture.needsUpdate = true; // Ensure texture updates return texture; } // Helper function to create a grid texture using Canvas (Keep for reference or potential future use) createGridTexture(size, lines, colorHex) { const canvas = document.createElement('canvas'); canvas.width = size; canvas.height = size; const context = canvas.getContext('2d'); context.fillStyle = '#ffffff'; // White background for the texture tile context.fillRect(0, 0, size, size); context.strokeStyle = `#${colorHex}`; // Grid line color context.lineWidth = 1; const step = size / lines; // Draw vertical lines for (let i = 1; i < lines; i++) { context.beginPath(); context.moveTo(i * step, 0); context.lineTo(i * step, size); context.stroke(); } // Draw horizontal lines for (let i = 1; i < lines; i++) { context.beginPath(); context.moveTo(0, i * step); context.lineTo(size, i * step); context.stroke(); } return new THREE.CanvasTexture(canvas); } // Method to map an ability ID to a specific slot ID mapAbilityToSlot(slotId, abilityId) { if (this.abilitySlotMapping.hasOwnProperty(slotId)) { console.log(`Mapping ability "${abilityId || 'none'}" to slot "${slotId}"`); this.abilitySlotMapping[slotId] = abilityId; // Immediately update the visual for the changed slot this.updateSingleCooldownVisual(slotId); } else { console.error(`Invalid slot ID "${slotId}" provided for mapping.`); } } // --- Ability Activation Logic --- // Generic function to activate the ability in a given slot activateAbility(slotId) { // --- Cancel Stealth Check --- // If the player is stealthed when attempting ANY ability, force stealth to end. if (this.player.isStealthed) { console.log("Ability activation attempt while stealthed. Ending stealth."); this.player.endStealth(true); // Force end stealth // Note: The cooldown will start automatically via the endStealth callback. } // --- End Cancel Stealth Check --- const abilityId = this.abilitySlotMapping[slotId]; if (!abilityId) { console.log(`Slot ${slotId} has no ability assigned.`); return; // No ability assigned } const now = performance.now(); let wasTargetingMeteor = this.isTargetingMeteor; // Remember if we were targeting before this click let targetingSlotIdBeforeClick = this.activeMeteorSlotId; // Remember which slot was active // --- Handle Interaction if Meteor is ALREADY being targeted --- if (wasTargetingMeteor) { console.log(`Ability button clicked while targeting meteor (from slot ${targetingSlotIdBeforeClick}). Cancelling targeting.`); this.cancelMeteorTargeting(); // Always cancel targeting if any ability button is clicked while targeting // If the user clicked the SAME meteor button that initiated targeting, just cancel and do nothing else. if (abilityId === 'meteor' && slotId === targetingSlotIdBeforeClick) { console.log("Clicked the active meteor button again to cancel."); return; // Exit activation function } // Otherwise (clicked a different ability or a different meteor slot), // targeting is cancelled, and we fall through to process the newly clicked ability below. } // --- End Meteor Targeting Interaction --- // --- Process the clicked ability (only if not cancelled above) --- // Check and perform action based on the assigned ability ID if (abilityId === 'fireball') { if (now - this.abilityCooldowns.fireball >= FIREBALL_COOLDOWN) { this.shootFireball(); this.abilityCooldowns.fireball = now; this.updateSingleCooldownVisual(slotId); } else { console.log("Fireball on cooldown."); } } else if (abilityId === 'degen_pool') { if (now - this.abilityCooldowns.degen_pool >= DEGEN_POOL_COOLDOWN) { this.activateDegenPool(); this.abilityCooldowns.degen_pool = now; this.updateSingleCooldownVisual(slotId); } else { console.log("Degen Pool on cooldown."); } } else if (abilityId === 'meteor') { // We only reach here if we were NOT targeting meteor initially, // OR if we were targeting and clicked a *different* meteor slot (targeting was cancelled above). if (now - this.abilityCooldowns.meteor >= METEOR_COOLDOWN) { this.enterMeteorTargeting(slotId); // Start targeting for this slot } else { console.log("Meteor on cooldown."); } } else if (abilityId === 'blink') { if (now - this.abilityCooldowns.blink >= BLINK_COOLDOWN) { this.activateBlink(); this.abilityCooldowns.blink = now; this.updateSingleCooldownVisual(slotId); } else { console.log("Blink on cooldown."); } } else if (abilityId === 'stealth') { // Cooldown check for stealth is special - it only checks if the *previous* // stealth effect has ended and its cooldown passed. // The actual cooldown timer starts *when the effect ends*. // For activation, we just need to check if it's *off* cooldown. if (now - this.abilityCooldowns.stealth >= STEALTH_COOLDOWN) { this.activateStealth(slotId); // Pass slotId to start cooldown later } else { console.log("Stealth on cooldown."); } } // Add more else if blocks here for other abilities... else { console.warn(`Unknown ability ID "${abilityId}" assigned to slot ${slotId}. Cannot activate.`); } } // --- Specific Ability Action Methods --- shootFireball() { // Renamed from shoot() // This code is moved from the old 'shoot' method, specific to Fireball const playerPosition = this.player.getPosition(); const aimInput = this.aimHandler.getMoveDirection(); // Get input from aim stick (Vector2) let shootDirection = new THREE.Vector3(); // Initialize shoot direction vector (Vector3) // Priority 1: Use Aim Stick if active if (aimInput.lengthSq() > 0.0001) { shootDirection.set(aimInput.x, aimInput.y, 0).normalize(); console.log("Shooting based on aim input."); } // Priority 2 (Fallback): Use Player's current forward direction if Aim stick is idle // This direction should be updated by Player.update based on movement or last aim. else { console.log("Shooting based on player forward direction (Aim inactive)."); const forward = new THREE.Vector3(1, 0, 0); // Default forward along local +X forward.applyQuaternion(this.player.mesh.quaternion); // Apply the player's current world rotation forward.normalize(); // Ensure it's a unit vector for direction shootDirection.copy(forward); // Use this calculated forward direction } // Note: Removed the separate check for moveInput and the third fallback case, // as the player's forward direction should cover both moving and stationary scenarios when aim is idle. // Final check: If shootDirection is still zero (e.g., if quaternion is invalid somehow) if (shootDirection.lengthSq() < 0.0001) { console.warn("Cannot shoot: Final shoot direction is effectively zero."); return; // Don't shoot if direction is invalid } // Calculate start position slightly in front of the player const startOffset = shootDirection.clone().multiplyScalar(PLAYER_SIZE * 0.6); // Offset slightly more than half player size const startPosition = new THREE.Vector3( playerPosition.x + startOffset.x, playerPosition.y + startOffset.y, playerPosition.z // Keep same Z-level ); // Create the projectile using the final shootDirection const projectile = new Projectile(this.scene, startPosition, shootDirection); this.projectiles.push(projectile); console.log("Fired Fireball. Projectile Count:", this.projectiles.length); // Note: Cooldown time is updated in activateAbility } activateDegenPool() { // This code is moved from the old 'activateDegenPool' method, cooldown check removed const playerPosition = this.player.getPosition(); const newPool = new DegenPool( this.renderDiv.parentNode, // Pass the container for the HTML element (body) playerPosition, (expiredPool) => { // Define the onExpire callback this.removeDegenPool(expiredPool); } ); this.degenPools.push(newPool); console.log("Activated Degen Pool at", playerPosition); // Note: Cooldown time and visual update are handled in activateAbility } removeDegenPool(poolToRemove) { const index = this.degenPools.indexOf(poolToRemove); if (index > -1) { this.degenPools.splice(index, 1); console.log("Removed expired Degen Pool from game list."); } } enterMeteorTargeting(slotId) { if (this.isTargetingMeteor) return; // Already targeting console.log("Entering Meteor targeting mode from slot:", slotId); this.isTargetingMeteor = true; this.activeMeteorSlotId = slotId; // Store which slot started this this.meteorTargetingOrigin = this.player.getPosition().clone(); // Store position AT START of targeting // Change cursor style document.body.style.cursor = 'crosshair'; // Add visual indicator for targeting range this.createRangeIndicator(); } cancelMeteorTargeting() { if (!this.isTargetingMeteor) return; console.log("Canceling Meteor targeting mode."); this.isTargetingMeteor = false; document.body.style.cursor = 'auto'; // Reset cursor // Remove visual indicator for targeting range this.removeRangeIndicator(); this.activeMeteorSlotId = null; // Clear the active slot this.meteorTargetingOrigin = null; // Clear the targeting origin } confirmMeteorTarget(worldPosition) { if (!this.isTargetingMeteor) return; console.log(`Confirming Meteor target at: (${worldPosition.x.toFixed(2)}, ${worldPosition.y.toFixed(2)})`); // Apply cooldown using the stored slot ID const now = performance.now(); this.abilityCooldowns.meteor = now; if (this.activeMeteorSlotId) { this.updateSingleCooldownVisual(this.activeMeteorSlotId); } // Reset state this.isTargetingMeteor = false; document.body.style.cursor = 'auto'; this.removeRangeIndicator(); this.activeMeteorSlotId = null; this.meteorTargetingOrigin = null; // Clear the targeting origin // Spawn the actual meteor effect at worldPosition const impact = new MeteorImpact( this.scene, worldPosition, this.damageTarget, // Pass the target reference (finishedImpact) => { // onComplete callback this.removeMeteorImpact(finishedImpact); } ); this.meteorImpacts.push(impact); } // Renamed from handleCanvasClick to handle pointer events handleCanvasPointerDown(event) { if (!this.isTargetingMeteor) return; // Only handle pointer down when targeting // IMPORTANT: Check if the direct target of the pointerdown is the canvas itself // This prevents UI elements *on top* of the canvas from triggering targeting. if (event.target !== this.renderer.domElement) { console.log("Pointer down on UI element, cancelling meteor targeting."); this.cancelMeteorTargeting(); return; } // Prevent default browser actions like text selection or drag-scrolling during targeting event.preventDefault(); // Stop this event from bubbling up further or triggering other listeners (like joysticks) // when we successfully handle it here for targeting. event.stopPropagation(); // 1. Get Pointer Coordinates (relative to canvas) const rect = this.renderer.domElement.getBoundingClientRect(); const pointerX = event.clientX - rect.left; const pointerY = event.clientY - rect.top; // 2. Convert to Normalized Device Coordinates (NDC) -> (-1 to +1) const ndc = new THREE.Vector2( (pointerX / rect.width) * 2 - 1, -(pointerY / rect.height) * 2 + 1 // Y is inverted ); // 3. Unproject to World Coordinates const worldPointerPos = new THREE.Vector3(); worldPointerPos.set(ndc.x, ndc.y, 0.5); // Z doesn't matter much for unproject with Ortho? Set to mid frustum worldPointerPos.unproject(this.camera); worldPointerPos.z = 0; // Force to Z=0 plane for our 2D game // 4. Check Range (use the stored origin position) if (!this.meteorTargetingOrigin) { console.warn("Meteor targeting origin not set!"); this.cancelMeteorTargeting(); return; } const originPos = this.meteorTargetingOrigin; const distanceSq = originPos.distanceToSquared(worldPointerPos); if (distanceSq <= METEOR_MAX_CAST_RANGE * METEOR_MAX_CAST_RANGE) { // Within range - confirm the target this.confirmMeteorTarget(worldPointerPos); } else { // Out of range - cancel targeting (or provide feedback) const distance = Math.sqrt(distanceSq); console.log(`Meteor target out of range. Distance: ${distance.toFixed(2)}, Max Range: ${METEOR_MAX_CAST_RANGE.toFixed(2)}, Origin Pos: (${originPos.x.toFixed(2)}, ${originPos.y.toFixed(2)}), Target Pos: (${worldPointerPos.x.toFixed(2)}, ${worldPointerPos.y.toFixed(2)})`); // Optional: Add a visual flash or sound cue for out of range this.cancelMeteorTargeting(); // Cancel if out of range } } createRangeIndicator() { this.removeRangeIndicator(); // Remove any existing one first const segments = 64; // Smoothness of the circle const geometry = new THREE.RingGeometry( METEOR_MAX_CAST_RANGE - 0.05, // Inner radius slightly smaller than outer METEOR_MAX_CAST_RANGE + 0.05, // Outer radius segments ); const material = new THREE.MeshBasicMaterial({ color: METEOR_INDICATOR_COLOR, opacity: 0.5, transparent: true, side: THREE.DoubleSide // Make sure it's visible from above/below }); this.meteorRangeIndicator = new THREE.Mesh(geometry, material); // Position indicator based on the stored targeting origin if (!this.meteorTargetingOrigin) { console.warn("Cannot create range indicator without targeting origin!"); return; // Should not happen if called after enterMeteorTargeting } this.meteorRangeIndicator.position.copy(this.meteorTargetingOrigin); this.meteorRangeIndicator.position.z = 0.01; // Slightly above ground this.scene.add(this.meteorRangeIndicator); } removeRangeIndicator() { if (this.meteorRangeIndicator) { this.scene.remove(this.meteorRangeIndicator); this.meteorRangeIndicator.geometry.dispose(); this.meteorRangeIndicator.material.dispose(); this.meteorRangeIndicator = null; } } // Helper method to remove meteor impact from the list removeMeteorImpact(impactToRemove) { const index = this.meteorImpacts.indexOf(impactToRemove); if (index > -1) { this.meteorImpacts.splice(index, 1); } } dispose() { // Add dispose method if not present, or add listener removal to existing one // Remove the pointerdown listener using the correct bound function reference this.renderDiv.removeEventListener('pointerdown', this.boundHandleCanvasPointerDown); this.removeRangeIndicator(); // Clean up indicator if game is destroyed while targeting // ... any other cleanup ... // e.g., dispose input handlers if (this.moveHandler) this.moveHandler.dispose(); if (this.aimHandler) this.aimHandler.dispose(); window.removeEventListener('resize', this.onWindowResize.bind(this)); // Ensure resize listener is removed // Dispose scene resources, renderer etc. (if applicable) } // New method to handle starting the stealth cooldown startStealthCooldown(slotId) { console.log(`Starting Stealth cooldown for slot: ${slotId}`); const now = performance.now(); this.abilityCooldowns.stealth = now; // Start cooldown timer NOW this.updateSingleCooldownVisual(slotId); // Update UI } activateStealth(slotId) { if (this.player.isStealthed) return; console.log("Game triggering Player.startStealth()"); // Pass the callback function to the player this.player.startStealth(() => { // This code runs when stealth ends naturally or is forced this.startStealthCooldown(slotId); }); // Note: Cooldown timer does NOT start here. It starts via the callback. } activateBlink() { if (this.player.isBlinking) return; // Prevent activating while already blinking console.log("Activating Blink!"); const playerPosition = this.player.getPosition(); const aimInput = this.aimHandler.getMoveDirection(); let blinkDirection = new THREE.Vector3(); // Priority 1: Use Aim Stick if active if (aimInput.lengthSq() > 0.0001) { blinkDirection.set(aimInput.x, aimInput.y, 0).normalize(); } // Priority 2: Use Player's forward direction if Aim stick is idle else { const forward = new THREE.Vector3(1, 0, 0); // Default forward along local +X forward.applyQuaternion(this.player.mesh.quaternion); // Apply the player's current world rotation forward.normalize(); blinkDirection.copy(forward); } // Fallback: If still zero, default to moving right (or handle as error) if (blinkDirection.lengthSq() < 0.0001) { console.warn("Blink direction is zero, defaulting to right."); blinkDirection.set(1, 0, 0); } // Calculate target position const blinkOffset = blinkDirection.multiplyScalar(BLINK_DISTANCE); const targetPosition = playerPosition.clone().add(blinkOffset); // TODO: Implement boundary checks before teleporting // 1. Start the visual effect (hide player) this.player.startBlinkEffect(); // 2. Use setTimeout to delay the reappearance and position update setTimeout(() => { // Ensure player object still exists and wasn't destroyed during the delay if (!this.player) return; // TODO: Perform boundary check *here* before moving // if (isValidPosition(targetPosition)) { ... } // Instantly move the player to the target position this.player.mesh.position.copy(targetPosition); console.log(`Player reappeared at (${targetPosition.x.toFixed(2)}, ${targetPosition.y.toFixed(2)})`); // End the visual effect (show player) this.player.endBlinkEffect(); }, BLINK_EFFECT_DURATION); // Use the defined duration // Note: Invulnerability is implicitly handled by the 'isBlinking' flag checks // in the collision/damage logic during the BLINK_EFFECT_DURATION. // Cooldown and initial visual update (starting the cooldown timer) are handled in activateAbility console.log(`Blinking towards (${targetPosition.x.toFixed(2)}, ${targetPosition.y.toFixed(2)})...`); } }