feat(#3): simplify code

modules/canvas-resizer.js

@@ -0,0 +1,41 @@
+export class CanvasResizer {
+  /**
+   * Creates a new instance of `CanvasResizer` class.
+   * @param {Object} config - The configuration options for the class.
+   * @param {HTMLCanvasElement} config.canvas - The canvas element to resize.
+   * @param {number} config.width - The native width.
+   * @param {number} config.height - The native height.
+   * @param {number} config.percentage - The percentage of the screen size to use for the canvas.
+   */
+  constructor({ canvas, width, height, percentage }) {
+    this.canvas = canvas;
+    this.width = width;
+    this.height = height;
+    this.percentage = percentage;
+
+    this.canvas.width = this.width;
+    this.canvas.height = this.height;
+  }
+
+  load() {
+    return new Promise((resolve) => {
+      ["load", "resize"].map(item => window.addEventListener(item, () => {
+        this._resize();
+        if (item === "load") {
+          resolve();
+        }
+      }));
+    })
+  }
+
+  _resize() {
+    let canvasWidth = Math.floor(window.innerWidth * this.percentage);
+    let canvasHeight = Math.floor(canvasWidth / (this.width / this.height));
+    if (canvasHeight >= window.innerHeight * this.percentage) {
+      canvasHeight = Math.floor(window.innerHeight * this.percentage);
+      canvasWidth = Math.floor(canvasHeight / (this.height / this.width))
+    }
+    this.canvas.style.width = canvasWidth + 'px';
+    this.canvas.style.height = canvasHeight + 'px';
+  }
+}

modules/utils.js

@@ -0,0 +1,4 @@
+export async function getLevel(name) {
+    const level = await fetch("/resources/" + name + ".json")
+    return await level.json()
+}