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

    const floor = document.getElementById("floor");
    const divider = document.getElementById("divider");
    const wall = document.getElementById("wall");
    const wallHeight = canvas.height / 3;
    const dividerHeight = 7;

    const sprite = document.getElementById("sprite");
    const spriteHeight = 56;
    const spriteWidth = 32;
    let spriteX = (canvas.width - spriteWidth) / 2;
    let spriteY = canvas.height - spriteHeight;

    let rightPressed = false;
    let leftPressed = false;
    let upPressed = false;
    let downPressed = false;

    let wallPattern = null;
    function setWallPattern() {
        if (wall.complete && wall.naturalWidth !== 0) {
            wallPattern = ctx.createPattern(wall, 'repeat');
        }
    }
    wall.addEventListener('load', setWallPattern);
    setWallPattern();

    let divPattern = null;
    function setDivPattern() {
        if (divider.complete && divider.naturalWidth !== 0) {
            divPattern = ctx.createPattern(divider, 'repeat');
        }
    }
    divider.addEventListener('load', setDivPattern);
    setDivPattern();

    let floorPattern = null;
    function setFloorPattern() {
        if (floor.complete && floor.naturalWidth !== 0) {
            floorPattern = ctx.createPattern(floor, 'repeat');
        }
    }
    floor.addEventListener('load', setFloorPattern);
    setFloorPattern();

    function draw() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        ctx.imageSmoothingEnabled = false;
        if (wallPattern) {
            ctx.fillStyle = wallPattern;
            ctx.fillRect(0, 0, canvas.width, canvas.height);
        };

        if (divPattern) {
            ctx.fillStyle = divPattern;
            ctx.fillRect(0, wallHeight, canvas.width, dividerHeight)
        };

        if (floorPattern) {
            ctx.fillStyle = floorPattern;
            ctx.fillRect(0, wallHeight + dividerHeight, canvas.width, canvas.height - wallHeight + dividerHeight);
        }
        if (rightPressed) {
            spriteX = Math.min(spriteX + 5, canvas.width - spriteWidth);
        }
        if (leftPressed) {
            spriteX = Math.max(spriteX - 5, 0);
        }
        if (upPressed) {
            spriteY = Math.max(spriteY - 5, 0);
        }
        if (downPressed) {
            spriteY = Math.min(spriteY + 5, canvas.height - spriteHeight);
        }
        if (sprite.complete  && sprite.naturalWidth !== 0) {
            ctx.drawImage(sprite, spriteX, spriteY, spriteWidth, spriteHeight);
        }
        requestAnimationFrame(draw);
    };

    function startGame() {
        document.addEventListener("keydown", keyDownHandler);
        document.addEventListener("keyup", keyUpHandler);
        function keyDownHandler(e) {
            if (e.key === "Right" || e.key === "ArrowRight") {
                rightPressed = true;
            } else if (e.key === "Left" || e.key === "ArrowLeft") {
                leftPressed = true;
            } else if (e.key === "Up" || e.key === "ArrowUp") {
                upPressed = true;
            } else if (e.key === "Down" || e.key === "ArrowDown") {
                downPressed = true;
            }
        };
        function keyUpHandler(e) {
            if (e.key === "Right" || e.key === "ArrowRight") {
                rightPressed = false;
            } else if (e.key === "Left" || e.key === "ArrowLeft") {
                leftPressed = false;
            }  else if (e.key === "Up" || e.key === "ArrowUp") {
                upPressed = false;
            } else if (e.key === "Down" || e.key === "ArrowDown") {
                downPressed = false;
            }
        }
        draw();
    }

    if (wall.complete) {
        startGame();
    } else {
        wall.addEventListener("load", startGame);
    }
})