Class App

examples/common.js:12–117

/** Base Application used by all examples */
export class App {
  constructor(title, width = 800, height = 600) {
    this.title = title;
    this.width = width;
    this.height = height;
  }

  // To be extended by subclasses
  async init() {}
  async render(_encoder, _view) {}
  async onEvent(_event) {}

  mainLoop() {
    this.window.requestRedraw();
  }

  async run() {
    this.adapter = await navigator.gpu.requestAdapter();
    if (!this.adapter) {
      throw new Error("No GPU adapter available!");
    }

    this.device = await this.adapter.requestDevice();
    enableValidationErrors(this.device, true);

    this.window = Deno.createWindow({
      title: this.title,
      width: this.width,
      height: this.height,
      resizable: true,
    });

    this.surface = this.window.createSurface(this.device);

    this.format = this.surface.getPreferredFormat();
    this.surface.configure({
      format: this.format,
      width: this.width,
      height: this.height,
    });

    await this.init();

    this.mainLoopInterval = setInterval(() => this.mainLoop(), 1000 / 60);

    for await (const event of Deno.eventLoop()) {
      await this.onEvent(event);
      if (event.type === "windowEvent" && event.windowID === this.window.id) {
        if (event.event.type === "closeRequested") {
          this.cleanup();
          Deno.exit(0);
        } else if (event.event.type === "resized") {
          this.width = event.event.width;
          this.height = event.event.height;
          this.surface.configure({
            format: this.format,
            width: this.width,
            height: this.height,