wfcjs/src/app.ts

import {fetchPalette, Palette} from "./sprite";

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

    private palette?: Palette;

    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(p => this.palette = p);
    }

    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.palette) {
            let x = 0;
            for (let s of this.palette.sprites) {
                for (let y = 0; y < 4; y++) {
                    s.draw(this.context, y * 128, x, y);
                }
                x += 128;
            }
        }

        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);
app.run();