wfcjs/src/app.ts

import {fetchPalette} from "./sprite";
import {Chunk} from "./chunk";

export class App {
    private canvas: HTMLCanvasElement;
    private readonly context: CanvasRenderingContext2D;
    private lastTime: DOMHighResTimeStamp = 0;
    private isRunning: boolean = false;
    private chunk?: Chunk;

    public constructor(canvas: HTMLCanvasElement) {
        this.canvas = canvas;
        const context = canvas.getContext("2d");
        if (context === null) {
            throw new Error("Failed to get 2D context");
        }
        context.imageSmoothingEnabled = false; // pixelart
        this.context = context;

        this.updateSize(window.innerWidth, window.innerHeight);
        window.onresize = () => this.updateSize(window.innerWidth, window.innerHeight);
        fetchPalette("").then(palette => this.chunk = new Chunk(palette));
    }

    public run() {
        this.isRunning = true;
        this.draw(this.lastTime);
    }

    public stop() {
        this.isRunning = false;
    }

    private draw(time: DOMHighResTimeStamp) {
        this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
        if (this.chunk) {
            this.chunk.render(this.context);
        }

        this.lastTime = time;
        if (this.isRunning) {
            window.requestAnimationFrame(t => this.draw(t));
        }
    }

    private updateSize(width: number, height: number) {
        this.canvas.width = width;
        this.canvas.height = height;
    }
}

const app = new App(document.getElementById("render") as HTMLCanvasElement);
(window as any)._app = app;
app.run();