feat(#1): add image loader capabilities

src/canvas-windows.js

@@ -75,16 +75,17 @@ export default class CanvasWindow {
      */
     this.canvasHeight = this.nativeHeight;
 
-    window.addEventListener('resize', () => {
-      this.resize();
-    });
+    window.addEventListener("resize", () => this.resize());
+  }
 
-    window.addEventListener('load', () => {
-      // initialize native height/width
-      console.log('load')
-      this.canvas.width = this.canvasWidth;
-      this.canvas.height = this.canvasHeight;
-      this.resize();
+  async load() {
+    return new Promise((resolve) => {
+      window.addEventListener("load", () => {
+        this.canvas.width = this.canvasWidth;
+        this.canvas.height = this.canvasHeight;
+        this.resize();
+        resolve();
+      });
     });
   }
 

src/index.js

@@ -1,7 +1,18 @@
 import CanvasWindow from "./canvas-windows";
-const canvas = document.querySelector("canvas")
-new CanvasWindow({
-    canvas,
+import ResourceLoader from "./resource-loader";
+(async function gameloop() {
+  const canvasWindow = new CanvasWindow({
+    canvas: document.querySelector("canvas"),
     maxMultiplier: 5,
-    windowPercentage: 0.9
-})
+    windowPercentage: 0.9,
+  });
+  await canvasWindow.load();
+  const { canvas } = canvasWindow;
+  const ctx = canvas.getContext("2d");
+
+  const [overworld] = await Promise.all([
+    "assets/overworld.png",
+  ].map(ResourceLoader.load));
+
+  ctx.drawImage(overworld, 0, 0);
+})();

src/resource-loader.js

@@ -0,0 +1,15 @@
+export default class ResourceLoader {
+/**
+ * Loads an image from the specified URL.
+ *
+ * @return {Promise<HTMLImageElement>} A Promise that resolves with the loaded image.
+ */
+  static load(url) {
+    return new Promise((resolve, reject) => {
+      const image = new Image();
+      image.src = url;
+      image.onload = () => resolve(image)
+      image.onerror = reject;
+    });
+  }
+}