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;

    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() {
        if (wallPattern) {
            ctx.fillStyle = wallPattern;
            ctx.fillRect(0, 0, canvas.width, wallHeight);
        };

        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);
        }
    };

    function startGame() {
        draw();
    }

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