script.js

const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');

// Game variables
const PADDLE_WIDTH = 10;
const PADDLE_HEIGHT = 100;
const BALL_SIZE = 10;
const PADDLE_SPEED = 6; // Slightly faster paddles
const INITIAL_BALL_SPEED = 4; // Slightly faster ball
const MAX_BALL_SPEED = 15; // Cap ball speed

let playerY = (canvas.height - PADDLE_HEIGHT) / 2;
let cpuY = (canvas.height - PADDLE_HEIGHT) / 2;
let ballX = canvas.width / 2;
let ballY = canvas.height / 2;
let ballSpeedX = INITIAL_BALL_SPEED;
let ballSpeedY = INITIAL_BALL_SPEED;
let playerScore = 0;
let cpuScore = 0;

// Sound effects (Base64 encoded Data URIs)
const hitSound = new Audio("data:audio/wav;base64,UklGRlpaCwBXQVZFZm10IBAAAAABAAEARKwAAQAEACABAAABAAgAQABFVkFUIQAAAAADZGF0YVpaCwA=");
const scoreSound = new Audio("data:audio/wav;base64,UklGRlpaCwBXQVZFZm10IBAAAAABAAEARKwAAQAEACABAAABAAgAQABFVkFUIQAAAAADZGF0YVpaCwA=");

// Particle system
const particles = [];
function createParticle(x, y, color) {
    particles.push({
        x: x,
        y: y,
        size: Math.random() * 3 + 1,
        speedX: (Math.random() - 0.5) * 5,
        speedY: (Math.random() - 0.5) * 5,
        life: 30, // frames
        color: color
    });
}

// Power-up system
const powerUps = [];
const POWERUP_SIZE = 20;
const POWERUP_TYPES = {
    SPEED_UP: 'speed_up',
    SUPER_REFLECT: 'super_reflect',
    UNBLOCKABLE: 'unblockable',
    PADDLE_GROW: 'paddle_grow'
};

// Power-up images (External URLs)
const powerUpImages = {};
const imagePaths = {
    [POWERUP_TYPES.SPEED_UP]: 'https://upload.wikimedia.org/wikipedia/commons/f/f4/Lightning_bolt_simple.png',
    [POWERUP_TYPES.SUPER_REFLECT]: 'https://upload.wikimedia.org/wikipedia/commons/thumb/b/bb/Shield_Icon_Transparent.png/512px-Shield_Icon_Transparent.png',
    [POWERUP_TYPES.UNBLOCKABLE]: 'https://freesvg.org/img/Ghost-icon.png',
    [POWERUP_TYPES.PADDLE_GROW]: 'https://upload.wikimedia.org/wikipedia/commons/thumb/d/d6/Arrow_up.svg/71px-Arrow_up.svg.png'
};

function loadAllAssets() {
    for (const type in imagePaths) {
        const img = new Image();
        img.src = imagePaths[type];
        img.onerror = (e) => {
            console.error(`Failed to load image for ${type}:`, e);
        };
        powerUpImages[type] = img;
    }
    // Audio objects are already created with Data URIs
}

function createPowerUp() {
    const typeKeys = Object.keys(POWERUP_TYPES);
    const randomType = POWERUP_TYPES[typeKeys[Math.floor(Math.random() * typeKeys.length)]];
    powerUps.push({
        x: Math.random() * (canvas.width - POWERUP_SIZE * 2) + POWERUP_SIZE,
        y: Math.random() * (canvas.height - POWERUP_SIZE * 2) + POWERUP_SIZE,
        type: randomType,
        speedX: (Math.random() - 0.5) * 2,
        speedY: (Math.random() - 0.5) * 2,
        life: 600, // frames, around 10 seconds
        active: false
    });
}

let playerPowerUp = null;
let playerPowerUpTimer = 0;
const POWERUP_DURATION = 300; // frames

// Keyboard controls
const keys = {};
document.addEventListener('keydown', (e) => {
    keys[e.key] = true;
});
document.addEventListener('keyup', (e) => {
    keys[e.key] = false;
});

// Draw functions
function drawRect(x, y, width, height, color) {
    ctx.fillStyle = color;
    ctx.fillRect(x, y, width, height);
}

function drawCircle(x, y, radius, color) {
    ctx.fillStyle = color;
    ctx.beginPath();
    ctx.arc(x, y, radius, 0, Math.PI * 2, false);
    ctx.fill();
}

function drawText(text, x, y, color, font = '30px Arial') {
    ctx.fillStyle = color;
    ctx.font = font;
    ctx.fillText(text, x, y);
}

// Draw glowing elements
function drawGlowingRect(x, y, width, height, color) {
    ctx.shadowBlur = 20;
    ctx.shadowColor = color;
    drawRect(x, y, width, height, color);
    ctx.shadowBlur = 0; // Reset shadow
}

function drawGlowingCircle(x, y, radius, color) {
    ctx.shadowBlur = 20;
    ctx.shadowColor = color;
    drawCircle(x, y, radius, color);
    ctx.shadowBlur = 0; // Reset shadow
}

// Reset ball
function resetBall() {
    ballX = canvas.width / 2;
    ballY = canvas.height / 2;
    ballSpeedX = (Math.random() > 0.5 ? 1 : -1) * INITIAL_BALL_SPEED; // Random initial direction
    ballSpeedY = (Math.random() * 2 - 1) * INITIAL_BALL_SPEED;
}

// Apply power-up effect
function applyPowerUp(type) {
    playerPowerUp = type;
    playerPowerUpTimer = POWERUP_DURATION;
    switch (type) {
        case POWERUP_TYPES.PADDLE_GROW:
            playerPaddleHeight = PADDLE_HEIGHT * 1.5;
            break;
        case POWERUP_TYPES.SPEED_UP:
            ballSpeedX *= 2; // Double ball speed
            ballSpeedY *= 2;
            break;
        case POWERUP_TYPES.SUPER_REFLECT:
            // Handled in collision
            break;
        case POWERUP_TYPES.UNBLOCKABLE:
            // Handled in collision
            break;
    }
}

// Remove power-up effect
function removePowerUp() {
    if (playerPowerUp === POWERUP_TYPES.PADDLE_GROW) {
        playerPaddleHeight = PADDLE_HEIGHT;
    }
    if (playerPowerUp === POWERUP_TYPES.SPEED_UP) {
        ballSpeedX /= 2; // Halve ball speed back
        ballSpeedY /= 2;
    }
    playerPowerUp = null;
}

let playerPaddleHeight = PADDLE_HEIGHT; // Dynamic paddle height for player

// Background animation variables
const stars = [];
const NUM_STARS = 100;
for (let i = 0; i < NUM_STARS; i++) {
    stars.push({
        x: Math.random() * canvas.width,
        y: Math.random() * canvas.height,
        size: Math.random() * 2,
        speed: Math.random() * 0.5 + 0.1 // Slower stars
    });
}

// Update game logic
function update() {
    // Player movement (right side)
    if (keys.ArrowUp && playerY > 0) {
        playerY -= PADDLE_SPEED;
    }
    if (keys.ArrowDown && playerY < canvas.height - playerPaddleHeight) {
        playerY += PADDLE_SPEED;
    }

    // CPU movement (left side - hard level, slightly adaptive)
    const cpuCenter = cpuY + PADDLE_HEIGHT / 2;
    const cpuTargetY = ballY; // CPU aims directly at the ball

    if (cpuCenter < cpuTargetY) {
        cpuY += PADDLE_SPEED * 0.9; // CPU slightly slower than player for balance
    } else if (cpuCenter > cpuTargetY) {
        cpuY -= PADDLE_SPEED * 0.9;
    }
    // Keep CPU paddle within bounds
    if (cpuY < 0) cpuY = 0;
    if (cpuY > canvas.height - PADDLE_HEIGHT) cpuY = canvas.height - PADDLE_HEIGHT;

    // Ball movement
    ballX += ballSpeedX;
    ballY += ballSpeedY;

    // Ball collision with top/bottom walls
    if (ballY - BALL_SIZE < 0 || ballY + BALL_SIZE > canvas.height) {
        ballSpeedY = -ballSpeedY;
        createParticle(ballX, ballY, 'cyan'); // Wall hit particles
        hitSound.play();
    }

    // Ball collision with paddles
    // Player paddle (right)
    if (ballX + BALL_SIZE > canvas.width - PADDLE_WIDTH &&
        ballY > playerY && ballY < playerY + playerPaddleHeight) {
        if (playerPowerUp === POWERUP_TYPES.UNBLOCKABLE) {
            // Ball passes through, no reflection
        } else if (playerPowerUp === POWERUP_TYPES.SUPER_REFLECT) {
            ballSpeedX = -ballSpeedX * 1.5; // Super reflect, faster return
            ballSpeedY = ballSpeedY * 1.5;
            createParticle(ballX, ballY, 'yellow'); // Super reflect particles
            hitSound.play();
        } else {
            ballSpeedX = -ballSpeedX;
            ballSpeedX = Math.min(ballSpeedX * 1.1, MAX_BALL_SPEED); // Increase speed, cap it
            ballSpeedY = Math.min(ballSpeedY * 1.1, MAX_BALL_SPEED); // Increase speed, cap it
            createParticle(ballX, ballY, 'lime'); // Player hit particles
            hitSound.play();
        }
    }

    // CPU paddle (left)
    if (ballX - BALL_SIZE < PADDLE_WIDTH &&
        ballY > cpuY && ballY < cpuY + PADDLE_HEIGHT) {
        ballSpeedX = -ballSpeedX;
        ballSpeedX = Math.min(ballSpeedX * 1.1, MAX_BALL_SPEED); // Increase speed, cap it
        ballSpeedY = Math.min(ballSpeedY * 1.1, MAX_BALL_SPEED); // Increase speed, cap it
        createParticle(ballX, ballY, 'red'); // CPU hit particles
        hitSound.play();
    }

    // Ball out of bounds (scoring)
    if (ballX < 0) {
        playerScore++;
        scoreSound.play();
        resetBall();
    } else if (ballX > canvas.width) {
        cpuScore++;
        scoreSound.play();
        resetBall();
    }

    // Update particles
    for (let i = particles.length - 1; i >= 0; i--) {
        const p = particles[i];
        p.x += p.speedX;
        p.y += p.speedY;
        p.life--;
        if (p.life <= 0) {
            particles.splice(i, 1);
        }
    }

    // Update power-ups
    if (Math.random() < 0.005) { // Small chance to spawn a power-up each frame
        createPowerUp();
    }

    for (let i = powerUps.length - 1; i >= 0; i--) {
        const pu = powerUps[i];
        pu.x += pu.speedX;
        pu.y += pu.speedY;

        // Bounce off walls
        if (pu.x - POWERUP_SIZE < 0 || pu.x + POWERUP_SIZE > canvas.width) {
            pu.speedX = -pu.speedX;
        }
        if (pu.y - POWERUP_SIZE < 0 || pu.y + POWERUP_SIZE > canvas.height) {
            pu.speedY = -pu.speedY;
        }

        pu.life--;
        if (pu.life <= 0) {
            powerUps.splice(i, 1);
            continue;
        }

        // Check for ball collision with power-up
        const dist = Math.sqrt(Math.pow(ballX - pu.x, 2) + Math.pow(ballY - pu.y, 2));
        if (dist < BALL_SIZE + POWERUP_SIZE) {
            applyPowerUp(pu.type);
            powerUps.splice(i, 1); // Remove power-up after collection
            // Play a power-up sound
            hitSound.play(); // Use hit sound for now
        }
    }

    // Power-up timer
    if (playerPowerUpTimer > 0) {
        playerPowerUpTimer--;
        if (playerPowerUpTimer === 0) {
            removePowerUp();
        }
    }

    // Update stars for background animation
    stars.forEach(star => {
        star.x -= star.speed; // Move stars to the left
        if (star.x < 0) {
            star.x = canvas.width;
            star.y = Math.random() * canvas.height;
        }
    });
}

// Render everything
function draw() {
    // Clear canvas
    drawRect(0, 0, canvas.width, canvas.height, 'black');

    // Draw animated starfield background
    stars.forEach(star => {
        drawCircle(star.x, star.y, star.size, 'rgba(255, 255, 255, ' + (star.size / 2) + ')');
    });

    // Draw futuristic grid overlay
    ctx.strokeStyle = 'rgba(0, 255, 255, 0.05)'; // Very subtle cyan grid
    for (let i = 0; i < canvas.width; i += 50) {
        ctx.beginPath();
        ctx.moveTo(i, 0);
        ctx.lineTo(i, canvas.height);
        ctx.stroke();
    }
    for (let i = 0; i < canvas.height; i += 50) {
        ctx.beginPath();
        ctx.moveTo(0, i);
        ctx.lineTo(canvas.width, i);
        ctx.stroke();
    }

    // Draw paddles with glow
    drawGlowingRect(0, cpuY, PADDLE_WIDTH, PADDLE_HEIGHT, 'red'); // CPU on left
    drawGlowingRect(canvas.width - PADDLE_WIDTH, playerY, PADDLE_WIDTH, playerPaddleHeight, 'lime'); // Player on right

    // Draw ball with glow
    drawGlowingCircle(ballX, ballY, BALL_SIZE, 'cyan');

    // Draw particles
    particles.forEach(p => {
        drawCircle(p.x, p.y, p.size, p.color);
    });

    // Draw power-ups
    powerUps.forEach(pu => {
        const img = powerUpImages[pu.type];
        if (img && img.complete) { // Ensure image is loaded
            ctx.drawImage(img, pu.x - POWERUP_SIZE, pu.y - POWERUP_SIZE, POWERUP_SIZE * 2, POWERUP_SIZE * 2);
        } else {
            // Fallback to drawing a circle if image not loaded
            let color;
            switch (pu.type) {
                case POWERUP_TYPES.SPEED_UP:
                    color = 'yellow';
                    break;
                case POWERUP_TYPES.SUPER_REFLECT:
                    color = 'purple';
                    break;
                case POWERUP_TYPES.UNBLOCKABLE:
                    color = 'orange';
                    break;
                case POWERUP_TYPES.PADDLE_GROW:
                    color = 'blue';
                    break;
            }
            drawGlowingCircle(pu.x, pu.y, POWERUP_SIZE, color);
            drawText('P', pu.x - 5, pu.y + 5, 'white', '12px Arial'); // Simple text indicator
        }
    });

    // Draw scores with futuristic font (placeholder for now, will use custom font later)
    drawText(cpuScore, canvas.width / 4, 50, 'red', '40px "Press Start 2P", cursive');
    drawText(playerScore, canvas.width * 3 / 4, 50, 'lime', '40px "Press Start 2P", cursive');

    // Draw center line
    ctx.strokeStyle = 'rgba(255, 255, 255, 0.2)';
    ctx.beginPath();
    ctx.moveTo(canvas.width / 2, 0);
    ctx.lineTo(canvas.width / 2, canvas.height);
    ctx.stroke();

    // Display active power-up for player
    if (playerPowerUp) {
        drawText(`Power-up: ${playerPowerUp} (${Math.ceil(playerPowerUpTimer / 60)}s)`, canvas.width - 300, canvas.height - 20, 'white', '16px "Press Start 2P", cursive');
    }
}

// Game loop
function gameLoop() {
    update();
    draw();
    requestAnimationFrame(gameLoop);
}

// Start the game after images are loaded
loadAllAssets();