wfcjs/src/app.ts

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

    public constructor(canvas: HTMLCanvasElement) {
        this.canvas = canvas;
        this.updateSize(window.innerWidth, window.innerHeight);

        document.onresize = () => this.updateSize(window.innerWidth, window.innerHeight);
    }

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

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

    private draw(time: DOMHighResTimeStamp) {
        // TODO: actually draw stuff

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