feat(#10): reset camera position after changing level

index.js

@@ -26,6 +26,7 @@ const foregroundMaps = [
     layer: 1,
     selected: true,
   },
+  { name: "ocean", imageId: "overworld", elementId: "level2", layer: 2 },
 ];
 
 const clicableObjects = ["debug", "level1", "level2"];

modules/event-emitter.js

@@ -0,0 +1,32 @@
+class EventEmitterSingleton {
+  static instance;
+  eventEmitter;
+
+  constructor() {
+    this.eventEmitter = {};
+  }
+
+  static getInstance() {
+    if (!EventEmitterSingleton.instance) {
+      EventEmitterSingleton.instance = new EventEmitterSingleton();
+    }
+    return EventEmitterSingleton.instance;
+  }
+
+  on(eventName, callback) {
+    if (!this.eventEmitter[eventName]) {
+      this.eventEmitter[eventName] = [];
+    }
+    this.eventEmitter[eventName].push(callback);
+  }
+
+  emit(eventName, ...args) {
+    if (this.eventEmitter[eventName]) {
+      this.eventEmitter[eventName].forEach((callback) => {
+        callback(...args);
+      });
+    }
+  }
+}
+
+export const eventEmitter = EventEmitterSingleton.getInstance();

modules/game-objects/camera.js

@@ -27,6 +27,11 @@ export class Camera extends GameObject {
       (acc, item) => ({ ...acc, [item.key]: item }),
       {}
     );
+    this.eventEmitter.on("changeLevel", () => {
+      this.x = x;
+      this.y = y;
+      this.moveCamera(0, 0, 0);
+    });
   }
 
   update(delta) {

modules/game-objects/game-object.js

@@ -1,3 +1,5 @@
+import { eventEmitter } from "../event-emitter.js";
+
 export class GameObject {
   constructor(options = {}) {
     const {
@@ -14,6 +16,7 @@ export class GameObject {
     this.height = height;
     this.gameObjects = gameObjects;
     this.debug = debug;
+    this.eventEmitter = eventEmitter;
   }
 
   async load() {

modules/game-objects/map-management.js

@@ -28,5 +28,6 @@ export class MapManagement extends GameObject {
     }
     const map = this.gameObjects.find((item) => item.elementId === elementId);
     this.selected = map.name;
+    this.eventEmitter.emit("changeLevel");
   }
 }

modules/game-objects/map.js

@@ -29,7 +29,7 @@ export class Map extends GameObject {
     });
     this.levelConfig = await response.json();
     const layer = this.levelConfig.layers[this.layer];
-    const { data, height, width } = layer;
+    const { data, height, width } = layer ?? {};
     this.width = width;
     this.height = height;
     this.data = data;
@@ -39,6 +39,9 @@ export class Map extends GameObject {
     if (this._level) {
       return this._level;
     }
+    if (!this.width || !this.height) {
+      return null;
+    }
     const { ctx, canvas } = createCanvas(
       this.width * TILE_SIZE,
       this.height * TILE_SIZE
@@ -84,7 +87,7 @@ export class Map extends GameObject {
   }
 
   render(ctx, sourceX, sourceY, width, height) {
-    if (!this.levelConfig || !this.selected) {
+    if (!this.levelConfig || !this.selected || !this.level) {
       return;
     }