import { makeRgbLerpPic, threeDimCube } from "./lerppic";

const WIDTH = 800;
const HEIGHT = 600;

function main() {
    const root = document.getElementById("root");
    const canvas = document.createElement("canvas");

    if (!root || !canvas) {
        return;
    }

    root.appendChild(canvas);

    const ctx = canvas.getContext("2d", { alpha: true });
    if (!ctx) {
        return;
    }

    root.style.resize = 'both';
    root.style.overflow = 'hidden';
    root.style.width = `${ WIDTH + 20 }px`;
    root.style.height = `${ HEIGHT + 20 }px`;
    canvas.style.padding = "10px";

    function setCanvasDims(width: number, height: number) {
        canvas.width = width;
        canvas.height = height;
        canvas.style.width = `${ width }px`;
        canvas.style.height = `${ height }px`;
    }

    setCanvasDims(WIDTH - 20, HEIGHT - 20);

    const observer = new ResizeObserver((el) => {
        setCanvasDims(el[0].target.clientWidth - 20, el[0].target.clientHeight - 20);
    });
    observer.observe(root);

    const render = () => {
        ctx.fillStyle = `rgb(150, 200, 255)`;
        ctx.fillRect(0, 0, canvas.width, canvas.height);
        makeRgbLerpPic(ctx);
        window.requestAnimationFrame(render);
    };
    render();
}

main();