breakout-custom/public/javascripts/game.js

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

// Set canvas size to match the container
canvas.width = 540;
canvas.height = 675;

// Make sure the canvas is visible
canvas.style.display = 'block';

// Load background image once, outside of any function
const backgroundImage = new Image();
backgroundImage.src = '/assets/images/background.png';

let bricks = [];
let paddle = { x: 175, y: 510, width: 75, height: 15 };
let ball = { x: 200, y: 370, dx: 4, dy: -4, radius: 8 };
const floorY = 525; // Define the floor position

let isPaused = false;

function togglePause() {
    isPaused = !isPaused;
    if (!isPaused) {
        requestAnimationFrame(update);
    }
}

function drawBricks() {
    bricks.forEach(brick => {
        ctx.fillStyle = brick.color;
        ctx.fillRect(brick.x, brick.y, 90, 30);
        ctx.fillStyle = brick.textColor;
        ctx.font = '14px Arial';
        ctx.fillText(brick.text, brick.x + 10, brick.y + 20);
    });
}

function drawPaddle() {
    ctx.fillStyle = '#003333';
    ctx.fillRect(paddle.x, paddle.y, paddle.width, paddle.height);
}

function drawBall() {
    ctx.beginPath();
    ctx.arc(ball.x, ball.y, ball.radius, 0, Math.PI * 2);
    ctx.fillStyle = '#003333';
    ctx.fill();
    ctx.closePath();
}

function movePaddle(e) {
    if (!isPaused) {
        let rect = canvas.getBoundingClientRect();
        let root = document.documentElement;
        let mouseX = e.clientX - rect.left - root.scrollLeft;

        // Ensure the paddle stays within the canvas
        paddle.x = Math.max(0, Math.min(canvas.width - paddle.width, mouseX - paddle.width / 2));
    }
}

function collisionDetection() {
    bricks.forEach((brick, index) => {
        if (
            ball.x > brick.x &&
            ball.x < brick.x + 90 &&  // Changed from 50 to 90
            ball.y > brick.y &&
            ball.y < brick.y + 30     // Changed from 20 to 30
        ) {
            ball.dy = -ball.dy;
            bricks.splice(index, 1);
        }
    });
}

function drawPauseScreen() {
    ctx.fillStyle = 'rgba(0, 0, 0, 0.5)';
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    ctx.fillStyle = 'white';
    ctx.font = '30px Arial';
    ctx.fillText('PAUSED', canvas.width / 2 - 50, canvas.height / 2);
}

function update() {

    if (isPaused) {
        drawPauseScreen();
        return;
    }

    ctx.clearRect(0, 0, canvas.width, canvas.height);

    // Draw background image
    ctx.drawImage(backgroundImage, 0, 0, canvas.width, canvas.height);

    // Draw floor line
    ctx.beginPath();
    ctx.moveTo(0, floorY);
    ctx.lineTo(canvas.width, floorY);
    ctx.strokeStyle = 'white';
    ctx.stroke();

    drawBricks();
    drawPaddle();
    drawBall();

    collisionDetection();

    if (bricks.length === 0) {
        // Gagné !!
        document.location.reload();
        return;
    }

    // Bounce off side walls
    if (ball.x + ball.dx > canvas.width - ball.radius || ball.x + ball.dx < ball.radius) {
        ball.dx = -ball.dx;
    }

    // Bounce off top wall
    if (ball.y + ball.dy < ball.radius) {
        ball.dy = -ball.dy;
    } else if (ball.y + ball.dy > floorY - paddle.height) { // Changed to use floorY
        if (ball.x > paddle.x-ball.radius && ball.x < paddle.x + paddle.width+ball.radius) {

            // Limit the angle to a maximum of 60 degrees (pi/3 radians) from vertical
            const maxAngle = Math.PI*2/3;
            // Calculate where the ball hit the paddle
            let hitPos = Math.max(0.1, Math.min(0.9, (ball.x - paddle.x) / paddle.width)) ;

            console.log('Hit position:', hitPos); // Debugging purposes

            // Change angle based on where the ball hit the paddle
            let angle = hitPos * Math.PI - Math.PI/2;
            console.log('Angle brut:', angle); // Debugging purposes

            // Add some randomness to the angle (within the limited range)
            angle += (Math.random() - 0.5) * Math.PI/12;

            // Ensure the angle stays within the maximum limits after randomness
            if (Math.abs(angle) < maxAngle) {
                angle = Math.sign(angle) * maxAngle;
            }

            console.log('Angle ajusté:', angle); // Debugging purposes

            // Set new velocity based on this angle
            let speed = Math.sqrt(ball.dx * ball.dx + ball.dy * ball.dy);
            ball.dx = Math.cos(angle) * speed * Math.sign(angle);
            ball.dy = -Math.abs(Math.sin(angle) * speed); // Ensure the ball always goes up
        } else {
            // Game over!
            document.location.reload();
        }
    }

    ball.x += ball.dx;
    ball.y += ball.dy;

    requestAnimationFrame(update);
}

document.addEventListener('keydown', function(e) {
    if (e.key === 'p' || e.key === 'P') {
        togglePause();
    }
});

// Create pause button
const pauseButton = document.createElement('button');
pauseButton.textContent = 'Pause';
pauseButton.style.position = 'absolute';
pauseButton.style.top = '10px';
pauseButton.style.left = '10px';
pauseButton.style.zIndex = '20';
document.getElementById('gameContainer').appendChild(pauseButton);
pauseButton.addEventListener('click', togglePause);

// Load bricks from JSON file

function updateThemeHeader(theme) {
    const themeHeader = document.getElementById('themeHeader');
    if (themeHeader) {
        themeHeader.textContent = `Theme: ${theme}`;
        themeHeader.style.position = 'absolute';
        themeHeader.style.top = '10px';
        themeHeader.style.left = '0';
        themeHeader.style.right = '0';
        themeHeader.style.zIndex = '10';
    }
}

const brickFiles = [
    'bricks-productivite.json',
    'bricks-developpement.json',
    'bricks-medias-sociaux.json',
    'bricks-marketing.json',
    'bricks-coaching.json',
    'bricks-ai-techbro.json'
];
const randomFile = brickFiles[Math.floor(Math.random() * brickFiles.length)];

// Extract theme from filename
const theme = randomFile.split('-')[1].split('.')[0];

fetch(`/bricks?file=${randomFile}`)
    .then(response => response.json())
    .then(data => {
        bricks = data;
        updateThemeHeader(theme);
        update();
    });

document.addEventListener('mousemove', movePaddle, true);