script.js

const gameArea = document.getElementById('gameArea');
const paddleLeft = document.getElementById('paddleLeft');
const paddleRight = document.getElementById('paddleRight');
const ball = document.getElementById('ball');
const playerScoreDisplay = document.getElementById('playerScore');
const botScoreDisplay = document.getElementById('botScore');

let paddleLeftY = window.innerHeight / 2 - 40; // Center the paddle
let paddleRightY = window.innerHeight / 2 - 40; // Center the paddle
let ballX = window.innerWidth / 2; // Center the ball
let ballY = window.innerHeight / 2; // Center the ball
let ballSpeedX = 3; // Horizontal speed
let ballSpeedY = 0; // Vertical speed (starts with no vertical movement)
let playerScore = 0;
let botScore = 0;
let isGamePaused = true; // Pause the game until the player moves

const paddleHeight = 80;
const paddleWidth = 10;
const ballSize = 15;
const maxAngle = 45; // Maximum angle in degrees

// Touch controls
let touchY = 0;

gameArea.addEventListener('touchmove', (e) => {
    e.preventDefault();
    touchY = e.touches[0].clientY;

    // Move left paddle based on touch position
    if (e.touches[0].clientX < window.innerWidth / 2) {
        paddleLeftY = touchY - paddleHeight / 2;
        if (paddleLeftY < 0) paddleLeftY = 0;
        if (paddleLeftY > window.innerHeight - paddleHeight) paddleLeftY = window.innerHeight - paddleHeight;

        // Start the game if it's paused
        if (isGamePaused) {
            isGamePaused = false;
        }
    }
});

function handlePaddleCollision(paddleY, paddleXDirection, isLeftPaddle) {
    const hitPosition = (ballY - (paddleY + paddleHeight / 2)) / (paddleHeight / 2);
    const angle = hitPosition * maxAngle * (Math.PI / 180); // Convert to radians
    
    ballSpeedX = paddleXDirection * Math.abs(ballSpeedX); // Ensure proper direction
    ballSpeedY = Math.sin(angle) * Math.abs(ballSpeedX);  // Adjust vertical speed

    // Reposition ball to ensure no clipping through paddle
    if (isLeftPaddle) {
        ballX = paddleWidth + 10; // Place ball just outside left paddle
    } else {
        ballX = window.innerWidth - paddleWidth - 25; // Place ball just outside right paddle
    }
}

function checkPaddleCollision(paddleY, paddleX, isLeftPaddle) {
    if (
        ballX >= paddleX && ballX <= paddleX + paddleWidth &&
        ballY + ballSize >= paddleY && ballY <= paddleY + paddleHeight
    ) {
        handlePaddleCollision(paddleY, isLeftPaddle ? 1 : -1, isLeftPaddle);
    }
}

function update() {
    if (!isGamePaused) {
        // Update ball position
        ballX += ballSpeedX;
        ballY += ballSpeedY;

        // Ball collision with top and bottom walls
        if (ballY <= 0 || ballY >= window.innerHeight - ballSize) {
            ballSpeedY = -ballSpeedY;
        }

        // Check collision with paddles using improved detection
        checkPaddleCollision(paddleLeftY, paddleWidth, true); // Left paddle
        checkPaddleCollision(paddleRightY, window.innerWidth - paddleWidth - 25, false); // Right paddle

        // Ball out of bounds (left or right)
        if (ballX <= 0) {
            botScore++;
            botScoreDisplay.textContent = botScore;
            resetBall('right');
        } else if (ballX >= window.innerWidth) {
            playerScore++;
            playerScoreDisplay.textContent = playerScore;
            resetBall('left');
        }
    }

    // Bot logic for right paddle
    if (ballSpeedX > 0) { // Ball is moving towards the right paddle
        if (paddleRightY + paddleHeight / 2 < ballY) {
            paddleRightY += 3; // Move paddle down
        } else if (paddleRightY + paddleHeight / 2 > ballY) {
            paddleRightY -= 3; // Move paddle up
        }
    }

    // Ensure the right paddle stays within bounds
    if (paddleRightY < 0) paddleRightY = 0;
    if (paddleRightY > window.innerHeight - paddleHeight) paddleRightY = window.innerHeight - paddleHeight;

    // Update ball and paddle positions
    ball.style.left = ballX + 'px';
    ball.style.top = ballY + 'px';
    paddleLeft.style.top = paddleLeftY + 'px';
    paddleRight.style.top = paddleRightY + 'px';

    requestAnimationFrame(update);
}

function resetBall(side) {
    isGamePaused = true; // Pause the game

    if (side === 'left') {
        ballX = paddleWidth + 10; // Place ball on the left paddle
        ballY = paddleLeftY + paddleHeight / 2;
        ballSpeedX = Math.abs(ballSpeedX); // Move ball to the right
    } else if (side === 'right') {
        ballX = window.innerWidth - paddleWidth - 25; // Place ball on the right paddle
        ballY = paddleRightY + paddleHeight / 2;
        ballSpeedX = -Math.abs(ballSpeedX); // Move ball to the left
    }

    ballSpeedY = 0; // Reset vertical speed
}

// Start the game loop
update();