Roe2Js :: "canvas3dRenderCommands.js"

    // const frontCanvas = document.getElementById('frontCanvas');
    // const frontContext = frontCanvas.getContext('2d');

    const TILE_WIDTH = 64;
    const TILE_HEIGHT = 32;
    const BOX_HEIGHT = 64;

    const textures = {
        top: `/GFX/wall____.png`,
        side: `/GFX/wall____.png`,
        front: `/GFX/wall____.png`
    };

    const textureImages = {};

    function loadTextures(callback) {
        let loadedCount = 0;
        const textureKeys = Object.keys(textures);
        textureKeys.forEach(key => {
            const img = new Image();
            img.src = `${host}/test dictionary/GFX/${textures[key]}`;
            img.onload = () => {
                textureImages[key] = img;
                loadedCount++;
                if (loadedCount === textureKeys.length) {
                    callback();
                }
            };
        });
    }

    function drawIsometricBox(x, y, z) {

        const screenX = (x - y) * TILE_WIDTH / 2;
        const screenY = (x + y) * TILE_HEIGHT / 2 - z * BOX_HEIGHT;

        // Draw top
        frontContext.drawImage(textureImages.top, screenX, screenY - BOX_HEIGHT);

        // Draw side
        frontContext.drawImage(textureImages.side, screenX, screenY - TILE_HEIGHT / 2);

        // Draw front
        frontContext.drawImage(textureImages.front, screenX - TILE_WIDTH / 2, screenY);
    }

    function drawScene() {
        frontContext.clearRect(0, 0, frontCanvas.width, frontCanvas.height);

        // Draw a grid of boxes for demonstration
        for (let x = 0; x < 5; x++) {
            for (let y = 0; y < 5; y++) {
                drawIsometricBox(x, y, 1);
            }
        }
    }

    loadTextures(drawScene);