Update script.js

script.js

@@ -1,252 +1,495 @@
+// --- Get Elements ---
 const gameArea = document.getElementById('gameArea');
 const paddleLeft = document.getElementById('paddleLeft');
 const paddleRight = document.getElementById('paddleRight');
 const ball = document.getElementById('ball');
+const powerUpElement = document.getElementById('powerUp');
 const playerScoreDisplay = document.getElementById('playerScore');
 const botScoreDisplay = document.getElementById('botScore');
+const chargeIndicator = document.getElementById('chargeIndicator');
+const chargeIndicatorFill = document.getElementById('chargeIndicatorFill');
 
 // --- Constants ---
-const paddleHeight = 80;
-const paddleWidth = 10;
-const ballSize = 15;
-const maxAngle = 45; // Max bounce angle in degrees
-const initialBallSpeedX = 4; // Starting horizontal speed
-const speedIncreaseFactor = 1.1; // Speed multiplier on hit
-const maxBallSpeed = 15; // Maximum overall ball speed
-const botPaddleSpeed = 4; // Speed of the bot paddle
+const BASE_PADDLE_HEIGHT = 80;
+const PADDLE_WIDTH = 10;
+const BALL_SIZE = 15;
+const MAX_ANGLE_DEG = 60; // Increased max angle for more variation
+const MAX_ANGLE_RAD = MAX_ANGLE_DEG * (Math.PI / 180);
+const INITIAL_BALL_SPEED = 4;
+const SPEED_INCREASE_FACTOR = 1.08; // Slightly lower increase
+const MAX_BALL_SPEED = 18;
+const BOT_PADDLE_SPEED = 5; // Base speed
+const BOT_PREDICTION_FACTOR = 0.85; // 0 = No prediction, 1 = Perfect prediction (adjust for difficulty)
+const SPIN_FACTOR = 0.08; // How much paddle speed translates to spin
+const MAX_SPIN = 1.5;     // Max spin value
+const SPIN_DRAG = 0.995;  // Spin decreases slightly over time
+const MAGNUS_EFFECT_STRENGTH = 0.003; // How much spin affects trajectory
+const CHARGE_RATE = 150; // Lower value = faster charge (ms per 100% charge)
+const MAX_CHARGE_BOOST_FACTOR = 2.0; // Max speed multiplier for fully charged shot
+const POWERUP_SPAWN_CHANCE = 0.002; // Chance per frame to spawn
+const POWERUP_DURATION = 7000; // ms
+const PADDLE_SIZE_INCREASE = 40; // Pixels to add to height
 
 // --- Game State Variables ---
-let paddleLeftY = window.innerHeight / 2 - paddleHeight / 2;
-let paddleRightY = window.innerHeight / 2 - paddleHeight / 2;
-let ballX = window.innerWidth / 2 - ballSize / 2;
-let ballY = window.innerHeight / 2 - ballSize / 2;
-let ballSpeedX = initialBallSpeedX; // Start with initial speed
+let paddleLeftY = window.innerHeight / 2 - BASE_PADDLE_HEIGHT / 2;
+let paddleRightY = window.innerHeight / 2 - BASE_PADDLE_HEIGHT / 2;
+let paddleLeftHeight = BASE_PADDLE_HEIGHT;
+let paddleRightHeight = BASE_PADDLE_HEIGHT;
+let ballX = window.innerWidth / 2 - BALL_SIZE / 2;
+let ballY = window.innerHeight / 2 - BALL_SIZE / 2;
+let ballSpeedX = INITIAL_BALL_SPEED;
 let ballSpeedY = 0;
+let ballSpin = 0; // Positive = Clockwise (Topspin from left player), Negative = Counter-Clockwise (Backspin from left player)
 let playerScore = 0;
 let botScore = 0;
-let isGamePaused = true; // Start paused
+let isGamePaused = true;
+let lastPlayerPaddleY = paddleLeftY; // For calculating spin
+let isCharging = false;
+let chargeStartTime = 0;
+let currentChargeBoost = 1.0; // Speed multiplier from charge
+let activePowerUp = null; // { type: 'PaddleSizeUp', side: 'left'/'right'/'both', timeoutId: null }
+let powerUpData = { x: 0, y: 0, active: false };
 
-// --- Event Listeners ---
-gameArea.addEventListener('touchmove', (e) => {
-    e.preventDefault();
-    if (!e.touches || e.touches.length === 0) return; // Safety check
+// --- Initial Setup ---
+function initializeGame() {
+    paddleLeft.style.height = paddleLeftHeight + 'px';
+    paddleRight.style.height = paddleRightHeight + 'px';
+    paddleLeft.style.top = paddleLeftY + 'px';
+    paddleRight.style.top = paddleRightY + 'px';
+    ball.style.left = ballX + 'px';
+    ball.style.top = ballY + 'px';
+    playerScoreDisplay.textContent = playerScore;
+    botScoreDisplay.textContent = botScore;
+    // Place paddles correctly at start/resize
+    paddleRight.style.right = '5px'; // Ensure right paddle is positioned correctly
+    paddleLeft.style.left = '5px';
+}
 
-    let touchY = e.touches[0].clientY;
-    let touchX = e.touches[0].clientX;
 
-    // Only control left paddle if touch is on the left half
-    if (touchX < window.innerWidth / 2) {
-        paddleLeftY = touchY - paddleHeight / 2;
-        // Clamp paddle position within screen bounds
-        paddleLeftY = Math.max(0, Math.min(paddleLeftY, window.innerHeight - paddleHeight));
-        paddleLeft.style.top = paddleLeftY + 'px';
+// --- Input Handling (Touch & Mouse for Player) ---
+let interactionStartY = null; // Track touch start position
+
+function handleInteractionStart(clientY, clientX) {
+    if (clientX < window.innerWidth / 2) { // Only charge if interacting on the left side
+        isCharging = true;
+        chargeStartTime = performance.now();
+        chargeIndicator.style.display = 'block';
+        updateChargeIndicator(); // Update visual immediately
+
+        interactionStartY = clientY; // Store initial Y for potential movement during charge
 
-        // Start the game on first touch if paused
         if (isGamePaused) {
-            // Determine initial direction based on which side was touched (less relevant here, but good practice)
-            // ballSpeedX = initialBallSpeedX; // Or keep the direction from resetBall
             isGamePaused = false;
+            // Determine starting direction if needed (optional)
+            // ballSpeedX = Math.abs(ballSpeedX) || INITIAL_BALL_SPEED;
         }
     }
-}, { passive: false }); // Use passive: false if preventDefault is needed
-
-// Add a click/tap listener to start the game as well
-gameArea.addEventListener('click', () => {
-    if (isGamePaused) {
-        isGamePaused = false;
-        // Optional: decide initial direction if needed
-        // if (ballX < window.innerWidth / 2) ballSpeedX = initialBallSpeedX;
-        // else ballSpeedX = -initialBallSpeedX;
+}
+
+function handleInteractionMove(clientY, clientX) {
+    if (clientX < window.innerWidth / 2) { // Only control left paddle
+        // Move paddle based on current position, not start position
+        paddleLeftY = clientY - paddleLeftHeight / 2;
+        paddleLeftY = Math.max(0, Math.min(paddleLeftY, window.innerHeight - paddleLeftHeight));
+        paddleLeft.style.top = paddleLeftY + 'px';
+    }
+}
+
+function handleInteractionEnd() {
+    if (isCharging) {
+        isCharging = false;
+        const chargeDuration = performance.now() - chargeStartTime;
+        const chargeLevel = Math.min(chargeDuration / CHARGE_RATE, 1.0); // Cap at 100%
+        currentChargeBoost = 1.0 + chargeLevel * (MAX_CHARGE_BOOST_FACTOR - 1.0);
+        // console.log("Charge Released! Boost:", currentChargeBoost.toFixed(2)); // Debug
+        chargeIndicator.style.display = 'none';
+        chargeIndicatorFill.style.width = '0%';
+        // Note: Boost is applied in handlePaddleCollision if released just before hit
     }
+    interactionStartY = null;
+}
+
+gameArea.addEventListener('touchstart', (e) => {
+    e.preventDefault();
+    const touch = e.touches[0];
+    handleInteractionStart(touch.clientY, touch.clientX);
+}, { passive: false });
+
+gameArea.addEventListener('touchmove', (e) => {
+    e.preventDefault();
+    const touch = e.touches[0];
+    handleInteractionMove(touch.clientY, touch.clientX);
+}, { passive: false });
+
+gameArea.addEventListener('touchend', (e) => {
+    handleInteractionEnd();
 });
+gameArea.addEventListener('touchcancel', (e) => {
+    handleInteractionEnd(); // Treat cancel like end
+});
+
+// Mouse fallback for Desktop
+gameArea.addEventListener('mousedown', (e) => handleInteractionStart(e.clientY, e.clientX));
+gameArea.addEventListener('mousemove', (e) => {
+     // Only move paddle if mouse button is potentially down OR touch isn't active
+     // A better approach might track mouseDown state explicitly
+     if (interactionStartY !== null || e.buttons === 1) { // Move if charging or mouse down
+        handleInteractionMove(e.clientY, e.clientX);
+     }
+});
+gameArea.addEventListener('mouseup', (e) => handleInteractionEnd());
+gameArea.addEventListener('mouseleave', (e) => handleInteractionEnd()); // Stop charging if mouse leaves
+
+
+function updateChargeIndicator() {
+     if (isCharging) {
+         const chargeDuration = performance.now() - chargeStartTime;
+         const chargeLevel = Math.min(chargeDuration / CHARGE_RATE, 1.0);
+         chargeIndicatorFill.style.width = `${chargeLevel * 100}%`;
+         requestAnimationFrame(updateChargeIndicator); // Keep updating while charging
+     }
+}
+
+// --- Power-Up Logic ---
+function spawnPowerUp() {
+    if (!powerUpData.active && Math.random() < POWERUP_SPAWN_CHANCE) {
+        // console.log("Spawning PowerUp!"); // Debug
+        powerUpData.x = Math.random() * (window.innerWidth * 0.6) + window.innerWidth * 0.2; // Spawn near middle horizontally
+        powerUpData.y = Math.random() * (window.innerHeight * 0.8) + window.innerHeight * 0.1; // Avoid edges vertically
+        powerUpData.active = true;
+        powerUpElement.style.left = powerUpData.x + 'px';
+        powerUpElement.style.top = powerUpData.y + 'px';
+        powerUpElement.style.display = 'block';
+        // playSound('powerUpSpawn');
+    }
+}
+
+function checkPowerUpCollision() {
+    if (!powerUpData.active) return;
+
+    const ballRect = ball.getBoundingClientRect();
+    const powerUpRect = powerUpElement.getBoundingClientRect();
+
+    if (ballRect.left < powerUpRect.right &&
+        ballRect.right > powerUpRect.left &&
+        ballRect.top < powerUpRect.bottom &&
+        ballRect.bottom > powerUpRect.top)
+    {
+        // console.log("PowerUp Hit!"); // Debug
+        powerUpData.active = false;
+        powerUpElement.style.display = 'none';
+        activatePowerUp('PaddleSizeUp'); // Hardcoded type for now
+        // playSound('powerUpCollect');
+    }
+}
+
+function activatePowerUp(type) {
+    clearTimeout(activePowerUp?.timeoutId); // Clear existing timer if any
+
+    const side = (ballSpeedX > 0) ? 'left' : 'right'; // Give power-up to the player who last hit
+    // console.log(`Activating ${type} for ${side}`); // Debug
+
+    if (type === 'PaddleSizeUp') {
+        if (side === 'left' || side === 'both') {
+            paddleLeftHeight = BASE_PADDLE_HEIGHT + PADDLE_SIZE_INCREASE;
+            paddleLeft.style.height = paddleLeftHeight + 'px';
+        }
+        if (side === 'right' || side === 'both') {
+            paddleRightHeight = BASE_PADDLE_HEIGHT + PADDLE_SIZE_INCREASE;
+            paddleRight.style.height = paddleRightHeight + 'px';
+        }
+        // Set timer to deactivate
+        const timeoutId = setTimeout(() => deactivatePowerUp(type, side), POWERUP_DURATION);
+        activePowerUp = { type, side, timeoutId };
+    }
+    // Add other power-up types here (MultiBall, SpeedChange, etc.)
+}
+
+function deactivatePowerUp(type, side) {
+    // console.log(`Deactivating ${type} for ${side}`); // Debug
+    if (type === 'PaddleSizeUp') {
+        if (side === 'left' || side === 'both') {
+            paddleLeftHeight = BASE_PADDLE_HEIGHT;
+            paddleLeft.style.height = paddleLeftHeight + 'px';
+        }
+        if (side === 'right' || side === 'both') {
+            paddleRightHeight = BASE_PADDLE_HEIGHT;
+            paddleRight.style.height = paddleRightHeight + 'px';
+        }
+    }
+    // Add deactivation for other types
 
+    if (activePowerUp?.timeoutId) { // Clean up state
+       activePowerUp = null;
+    }
+}
 
 // --- Collision Handling ---
-function handlePaddleCollision(paddleY, paddleX, isLeftPaddle) {
-    const ballRadius = ballSize / 2;
+function handlePaddleCollision(paddleY, paddleHeight, paddleX, isLeftPaddle) {
+    const ballRadius = BALL_SIZE / 2;
     const ballCenterX = ballX + ballRadius;
     const ballCenterY = ballY + ballRadius;
 
     const paddleTop = paddleY;
     const paddleBottom = paddleY + paddleHeight;
     const paddleLeftEdge = paddleX;
-    const paddleRightEdge = paddleX + paddleWidth;
-
-    // Simple AABB collision check first (optimization)
-    if (ballCenterX + ballRadius < paddleLeftEdge ||
-        ballCenterX - ballRadius > paddleRightEdge ||
-        ballCenterY + ballRadius < paddleTop ||
-        ballCenterY - ballRadius > paddleBottom) {
-        return; // No collision based on bounding boxes
-    }
+    const paddleRightEdge = paddleX + PADDLE_WIDTH;
 
-    // More precise check: Find closest point on paddle to ball center
+    // Find closest point on paddle to ball center
     let closestX = Math.max(paddleLeftEdge, Math.min(ballCenterX, paddleRightEdge));
     let closestY = Math.max(paddleTop, Math.min(ballCenterY, paddleBottom));
 
-    // Calculate distance between ball center and closest point
     const dx = ballCenterX - closestX;
     const dy = ballCenterY - closestY;
     const distanceSquared = (dx * dx) + (dy * dy);
 
-    // Check if collision occurred (distance < radius)
-    if (distanceSquared < (ballRadius * ballRadius)) {
-
-        // --- Collision Response ---
+    if (distanceSquared < (ballRadius * ballRadius)) { // Collision detected
+        // playSound('paddleHit');
+        showImpactEffect(isLeftPaddle ? paddleLeft : paddleRight);
+
+        // --- Calculate Spin based on paddle movement ---
+        let paddleVelocityY = 0;
+        if (isLeftPaddle) {
+            paddleVelocityY = paddleLeftY - lastPlayerPaddleY; // How much paddle moved since last frame
+        } else {
+            // Basic AI doesn't have velocity tracking here, could add if needed
+            // For now, AI imparts less spin or random spin
+            paddleVelocityY = (Math.random() - 0.5) * 2; // Small random spin
+        }
+        // Add spin based on paddle speed, clamp it
+        const addedSpin = -paddleVelocityY * SPIN_FACTOR; // Negative because Y increases downwards
+        ballSpin += addedSpin;
+        ballSpin = Math.max(-MAX_SPIN, Math.min(MAX_SPIN, ballSpin));
 
-        // 1. Calculate where the ball hit the paddle vertically (normalized)
-        // hitPosition: -1 (top edge) to +1 (bottom edge)
+        // --- Calculate Bounce Angle ---
         const paddleCenterY = paddleTop + paddleHeight / 2;
         let hitPosition = (ballCenterY - paddleCenterY) / (paddleHeight / 2);
-        // Clamp hitPosition to avoid extreme angles if hit exactly on corner
-        hitPosition = Math.max(-1, Math.min(1, hitPosition));
+        hitPosition = Math.max(-1, Math.min(1, hitPosition)); // Clamp -1 to 1
 
-        // 2. Calculate the bounce angle in radians
-        const bounceAngle = hitPosition * maxAngle * (Math.PI / 180);
+        // Angle based on hit position AND incoming spin
+        let bounceAngle = hitPosition * MAX_ANGLE_RAD;
+        // Spin affects bounce angle slightly (e.g., topspin makes it bounce lower)
+        bounceAngle -= ballSpin * 0.1; // Adjust multiplier as needed
 
-        // 3. Calculate the current speed
+        // --- Calculate Speed ---
         const currentSpeed = Math.sqrt(ballSpeedX * ballSpeedX + ballSpeedY * ballSpeedY);
+        let chargeBoostToApply = 1.0;
+        if (isLeftPaddle && currentChargeBoost > 1.0) {
+             chargeBoostToApply = currentChargeBoost;
+             currentChargeBoost = 1.0; // Reset boost after applying
+             // console.log("Applying Charge Boost!", chargeBoostToApply.toFixed(2)); // Debug
+             // playSound('chargeHit');
+             showImpactEffect(ball, true); // Extra effect for charged hit
+        }
 
-        // 4. Calculate the new speed (increase and cap)
-        let newSpeed = currentSpeed * speedIncreaseFactor;
-        newSpeed = Math.min(newSpeed, maxBallSpeed); // Apply max speed limit
+        let newSpeed = currentSpeed * SPEED_INCREASE_FACTOR * chargeBoostToApply;
+        newSpeed = Math.min(newSpeed, MAX_BALL_SPEED);
 
-        // 5. Calculate new X and Y speeds based on angle and new total speed
-        // Determine the outward direction for X based on which paddle was hit
+        // --- Calculate New Velocities ---
         const directionX = isLeftPaddle ? 1 : -1;
         ballSpeedX = directionX * newSpeed * Math.cos(bounceAngle);
-        ballSpeedY = newSpeed * Math.sin(bounceAngle);
+        // Ball speed Y influenced by bounce angle and slightly by existing spin reversal
+        ballSpeedY = newSpeed * Math.sin(bounceAngle) - ballSpin * 0.5; // Spin influences vertical speed
+
+        // Reverse spin slightly on paddle impact (simulating friction)
+        ballSpin *= -0.6; // Dampen and reverse spin slightly
 
-        // 6. Reposition ball slightly outside the paddle to prevent sticking (optional but recommended)
-        // Move ball along the collision normal (simplified as horizontal push)
+        // --- Reposition Ball ---
+        // Simple horizontal push out based on direction
         const overlap = ballRadius - Math.sqrt(distanceSquared);
-         if (isLeftPaddle && dx < 0) { // Ball was moving right, hit left paddle
-             ballX += overlap; // Push right
-         } else if (!isLeftPaddle && dx > 0) { // Ball was moving left, hit right paddle
-             ballX -= overlap; // Push left
-         }
-         // A more accurate push would be along the dx, dy vector, but horizontal is often sufficient
-
-         // Ensure ball is definitely outside after adjustment
-         if (isLeftPaddle && ballX + ballSize < paddleRightEdge) {
-            ballX = paddleRightEdge - ballSize / 2; // Adjust precisely if needed
-         } else if (!isLeftPaddle && ballX > paddleLeftEdge) {
-             ballX = paddleLeftEdge - ballSize / 2; // Adjust precisely if needed
-         }
+        ballX += directionX * (overlap + 1); // Push out slightly more
+
+        // Ensure it's fully out (optional safety)
+         if (isLeftPaddle && ballX < paddleRightEdge) ballX = paddleRightEdge;
+         else if (!isLeftPaddle && ballX + BALL_SIZE > paddleLeftEdge) ballX = paddleLeftEdge - BALL_SIZE;
+
+        return true; // Indicate collision happened
     }
+    return false; // No collision
 }
 
 
+// --- Visual Effects ---
+function showImpactEffect(element, strong = false) {
+    element.classList.add('impact');
+    if (strong) {
+        element.style.boxShadow = '0 0 25px 10px red'; // Stronger effect
+    }
+    setTimeout(() => {
+        element.classList.remove('impact');
+        element.style.boxShadow = ''; // Reset specific strong effect
+    }, 100); // Duration of the flash
+}
+
+function updateBallTrail() {
+    const speed = Math.sqrt(ballSpeedX * ballSpeedX + ballSpeedY * ballSpeedY);
+    if (speed > INITIAL_BALL_SPEED * 1.5) { // Only show trail above certain speed
+        ball.classList.add('moving');
+         // Optional: Adjust trail length/opacity based on speed here if desired
+    } else {
+        ball.classList.remove('moving');
+    }
+    // Reset the animation trick for CSS trail
+    void ball.offsetWidth; // Trigger reflow to restart CSS transition
+}
+
+
+// --- AI Logic ---
+function updateBotAI() {
+    // Predictive AI: Estimate where the ball will cross the bot's paddle line
+    let predictedY = ballY;
+    if (ballSpeedX > 0) { // Only predict if ball is moving towards bot
+        const timeToReachPaddle = (window.innerWidth - PADDLE_WIDTH - ballX) / ballSpeedX;
+
+        // Simple prediction (doesn't account for wall bounces during flight yet)
+        predictedY = ballY + ballSpeedY * timeToReachPaddle;
+
+        // Add prediction based on spin (Magnus effect over time)
+        // Simplified: Average spin effect over the predicted time
+        predictedY += ballSpin * MAGNUS_EFFECT_STRENGTH * timeToReachPaddle * timeToReachPaddle * ballSpeedX / 2; // Rough estimate
+
+        // Add inaccuracy based on prediction factor
+        const targetError = (paddleRightHeight / 2) * (1 - BOT_PREDICTION_FACTOR) * (Math.random() - 0.5);
+        predictedY += targetError;
+
+        // Clamp prediction to bounds (prevent predicting outside court)
+         predictedY = Math.max(BALL_SIZE / 2, Math.min(predictedY, window.innerHeight - BALL_SIZE / 2));
+    } else {
+         // If ball moving away, slowly center the paddle
+         predictedY = window.innerHeight / 2;
+    }
+
+
+    // Move Paddle towards predicted Y
+    const botPaddleCenterTarget = predictedY - paddleRightHeight / 2; // Target top position for paddle
+    const currentBotCenter = paddleRightY + paddleRightHeight / 2;
+
+    if (paddleRightY + paddleRightHeight / 2 < predictedY - 5) { // Move down
+        paddleRightY += BOT_PADDLE_SPEED;
+    } else if (paddleRightY + paddleRightHeight / 2 > predictedY + 5) { // Move up
+        paddleRightY -= BOT_PADDLE_SPEED;
+    }
+
+    // Clamp bot paddle position
+    paddleRightY = Math.max(0, Math.min(paddleRightY, window.innerHeight - paddleRightHeight));
+    paddleRight.style.top = paddleRightY + 'px';
+}
+
 // --- Game Update Loop ---
 function update() {
     if (!isGamePaused) {
-        // Store previous position for collision checks if needed (not strictly needed with current collision)
-        // let previousBallX = ballX;
-        // let previousBallY = ballY;
-
-        // Move Ball
+        // --- Ball Movement ---
         ballX += ballSpeedX;
-        ballY += ballSpeedY;
+        // Apply Magnus effect (curve due to spin)
+        ballY += ballSpeedY + (ballSpin * MAGNUS_EFFECT_STRENGTH * Math.abs(ballSpeedX)); // Effect stronger at higher horizontal speed
+        ballSpin *= SPIN_DRAG; // Spin decays slowly
 
-        // Ball collision with top and bottom walls
+        // --- Wall Collisions ---
         if (ballY <= 0) {
-            ballY = 0; // Prevent sticking
-            ballSpeedY = Math.abs(ballSpeedY); // Ensure it bounces down
-        } else if (ballY >= window.innerHeight - ballSize) {
-            ballY = window.innerHeight - ballSize; // Prevent sticking
-            ballSpeedY = -Math.abs(ballSpeedY); // Ensure it bounces up
+            ballY = 0;
+            ballSpeedY *= -1;
+            ballSpin *= 0.8; // Spin dampens on wall hit
+            // playSound('wallHit');
+            showImpactEffect(ball);
+        } else if (ballY >= window.innerHeight - BALL_SIZE) {
+            ballY = window.innerHeight - BALL_SIZE;
+            ballSpeedY *= -1;
+            ballSpin *= 0.8;
+            // playSound('wallHit');
+             showImpactEffect(ball);
         }
 
-        // Paddle Collisions
-        // Check collision with left paddle
-        if (ballSpeedX < 0) { // Only check left paddle if ball is moving left
-             handlePaddleCollision(paddleLeftY, 0, true); // Left paddle is at x=0
-        }
-        // Check collision with right paddle
-        else if (ballSpeedX > 0) { // Only check right paddle if ball is moving right
-             handlePaddleCollision(paddleRightY, window.innerWidth - paddleWidth, false); // Right paddle position
+        // --- Paddle Collisions ---
+        let collisionOccurred = false;
+        if (ballSpeedX < 0) { // Moving left
+            collisionOccurred = handlePaddleCollision(paddleLeftY, paddleLeftHeight, 5, true); // Left paddle at x=5
+        } else { // Moving right
+            collisionOccurred = handlePaddleCollision(paddleRightY, paddleRightHeight, window.innerWidth - PADDLE_WIDTH - 5, false); // Right paddle position
         }
 
+        // --- Power-Up Logic ---
+        spawnPowerUp();
+        checkPowerUpCollision();
 
-        // Ball out of bounds (Score)
-        if (ballX + ballSize <= 0) { // Ball went past left edge
+        // --- Scoring ---
+        if (ballX + BALL_SIZE <= 0) {
             botScore++;
             botScoreDisplay.textContent = botScore;
-            resetBall('right'); // Bot serves next
-        } else if (ballX >= window.innerWidth) { // Ball went past right edge
+            resetBall('right'); // Bot serves
+            // playSound('score');
+        } else if (ballX >= window.innerWidth) {
             playerScore++;
             playerScoreDisplay.textContent = playerScore;
-            resetBall('left'); // Player serves next
+            resetBall('left'); // Player serves
+             // playSound('score');
         }
 
-        // --- Bot AI Movement ---
-        // Move bot paddle only if the ball is moving towards it
-        if (ballSpeedX > 0) {
-            const botPaddleCenter = paddleRightY + paddleHeight / 2;
-            const ballCenter = ballY + ballSize / 2;
-            const targetY = ballCenter - paddleHeight / 2; // Target top position for bot paddle
-
-            // Move towards the ball's Y position, but not faster than botPaddleSpeed
-            if (paddleRightY < targetY) {
-                paddleRightY += Math.min(botPaddleSpeed, targetY - paddleRightY);
-            } else if (paddleRightY > targetY) {
-                 paddleRightY -= Math.min(botPaddleSpeed, paddleRightY - targetY);
-            }
-             // Clamp bot paddle position
-            paddleRightY = Math.max(0, Math.min(paddleRightY, window.innerHeight - paddleHeight));
-            paddleRight.style.top = paddleRightY + 'px';
-        }
-    }
+        // --- AI Update ---
+        updateBotAI();
 
-    // Update visual positions regardless of pause state (allows resetBall positioning)
-    ball.style.left = ballX + 'px';
-    ball.style.top = ballY + 'px';
-    // Player paddle updated in event listener
-    // Bot paddle updated in AI logic or here if needed outside AI block
+        // --- Update Visuals ---
+        ball.style.left = ballX + 'px';
+        ball.style.top = ballY + 'px';
+        updateBallTrail();
 
+        // Track player paddle's last position AFTER potential collision handling
+        lastPlayerPaddleY = paddleLeftY;
 
-    // Request next frame
+    } // End if(!isGamePaused)
+
+    // Loop
     requestAnimationFrame(update);
 }
 
 // --- Reset Ball Function ---
 function resetBall(scoringSide) {
-    isGamePaused = true; // Pause until next touch/click
-
-    // Center the ball vertically
-    ballY = window.innerHeight / 2 - ballSize / 2;
-
-    // Position ball near the paddle that will serve
-    if (scoringSide === 'left') { // Player scored, player serves (ball starts near left paddle)
-        ballX = paddleWidth + 20; // Start just right of left paddle
-        ballSpeedX = initialBallSpeedX; // Move right
-    } else { // Bot scored, bot serves (ball starts near right paddle)
-        ballX = window.innerWidth - paddleWidth - ballSize - 20; // Start just left of right paddle
-        ballSpeedX = -initialBallSpeedX; // Move left
+    isGamePaused = true; // Pause until next interaction
+
+    // Deactivate any active powerups immediately on score
+    if (activePowerUp) {
+        clearTimeout(activePowerUp.timeoutId);
+        deactivatePowerUp(activePowerUp.type, activePowerUp.side); // Visually reset paddles
     }
+     if (powerUpData.active) {
+         powerUpData.active = false;
+         powerUpElement.style.display = 'none';
+     }
 
-    // Reset vertical speed
+
+    ballY = window.innerHeight / 2 - BALL_SIZE / 2;
     ballSpeedY = 0;
+    ballSpin = 0;
+    currentChargeBoost = 1.0; // Reset charge boost
+    isCharging = false; // Ensure charging stops
+    chargeIndicator.style.display = 'none';
+    chargeIndicatorFill.style.width = '0%';
+
+
+    if (scoringSide === 'left') { // Player scored, player serves
+        ballX = PADDLE_WIDTH + 30;
+        ballSpeedX = INITIAL_BALL_SPEED;
+    } else { // Bot scored, bot serves
+        ballX = window.innerWidth - PADDLE_WIDTH - BALL_SIZE - 30;
+        ballSpeedX = -INITIAL_BALL_SPEED;
+    }
 
-    // Optional: Briefly show ball position before game restarts on touch/click
+    // Position ball visually for restart
     ball.style.left = ballX + 'px';
     ball.style.top = ballY + 'px';
+    ball.classList.remove('moving'); // Stop trail
 
-    // Display message (optional)
-    // gameMessage.textContent = "Tap to Serve";
-    // gameMessage.style.display = 'block';
+    // Could add a "Tap to serve" message here
 }
 
-// --- Initial Setup ---
-// Set initial paddle positions visually
-paddleLeft.style.top = paddleLeftY + 'px';
-paddleRight.style.top = paddleRightY + 'px';
-// Set initial ball position visually
-ball.style.left = ballX + 'px';
-ball.style.top = ballY + 'px';
-// Set initial scores visually
-playerScoreDisplay.textContent = playerScore;
-botScoreDisplay.textContent = botScore;
-
-// Start the game loop
-requestAnimationFrame(update);
+// --- Utility for Sound (Placeholder) ---
+// function playSound(soundName) {
+//     // console.log("Playing sound:", soundName); // Placeholder
+//     // In a real implementation:
+//     // const audio = new Audio(`sounds/${soundName}.wav`);
+//     // audio.play();
+// }
+
+// --- Start Game ---
+initializeGame();
+requestAnimationFrame(update); // Start the loop
+