document.addEventListener("DOMContentLoaded", () => {
    const canvas = document.getElementById("myCanvas");
    const ctx = canvas.getContext("2d");

    // Redimensionner le canvas à la taille de l'écran
    function resizeCanvas() {
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;
    }
    resizeCanvas();
    window.addEventListener("resize", resizeCanvas);

    // Charger l'image de remplacement
    const replacementImg = new Image();
    replacementImg.src = "./img/JV01.jpg";
    replacementImg.onload = () => {
        // Lancer l'animation une fois l'image chargée
        let tps = 0;
        let lastTime = 0;

        function update(currentTime) {
            const deltaTime = currentTime - lastTime;
            lastTime = currentTime;

            tps += (-0.03 + Math.random() * 0.08) * deltaTime * 0.5;
            tps = Math.max(0, Math.min(100, tps));

            draw(tps);
            requestAnimationFrame(update);
        }
        requestAnimationFrame(update);
    };

    function draw(tps) {
        ctx.clearRect(0, 0, canvas.width, canvas.height);

        // Dessiner l'image de fond (optionnel)
        // ctx.drawImage(backgroundImg, 0, 0, canvas.width, canvas.height);

        // Calculer le nombre de carrés
        const cols = 100; // Nombre de colonnes
        const rows = 100; // Nombre de lignes
        const cellWidth = canvas.width / cols;
        const cellHeight = canvas.height / rows;

        // Nombre de carrés à remplir
        const fillCount = Math.floor((tps / 100) * cols * rows);

        // Créer une liste de positions et les mélanger
        const positions = [];
        for (let y = 0; y < rows; y++) {
            for (let x = 0; x < cols; x++) {
                positions.push({ x, y });
            }
        }
        // Mélanger les positions
        for (let i = positions.length - 1; i > 0; i--) {
            const j = Math.floor(Math.random() * (i + 1));
            [positions[i], positions[j]] = [positions[j], positions[i]];
        }

        // Dessiner les carrés remplis
        for (let i = 0; i < fillCount; i++) {
            const { x, y } = positions[i];
            const posX = x * cellWidth;
            const posY = y * cellHeight;

            // Dessiner un rectangle noir (ou l'image)
            ctx.fillStyle = "black";
            ctx.fillRect(posX, posY, cellWidth, cellHeight);

            // Dessiner l'image de remplacement dans le carré
            ctx.drawImage(
                replacementImg,
                posX, posY, cellWidth, cellHeight,
                posX, posY, cellWidth, cellHeight
            );
        }
    }
});