Make RoomObjects into real things

src/assets.js

@@ -12,13 +12,12 @@ const ROOM_ASSETS = {
 }
 
 export default class Assets {
-  constructor() {
+  constructor(game) {
+    this.game = game
     this.assetMap = {}
   }
 
   get(assetName) {
-    console.log("getting", assetName)
-    console.log("from", this.assetMap)
     return this.assetMap[assetName]
   }
 
@@ -44,7 +43,6 @@ export default class Assets {
   }
 
   loadImage(name, path) {
-    console.log(name, path)
     return new Promise(resolve => {
       const img = new Image()
       this.assetMap[name] = img
@@ -55,13 +53,13 @@ export default class Assets {
 
   loadTileset(name, path) {
     return fetch(path).then(rsp => rsp.json()).then(json => {
-      return this.assetMap[name] = new Tileset(json, name)
+      return this.assetMap[name] = new Tileset(this.game, json, name)
     }).then(tileset => this.loadImages(tileset.imagesToLoad))
   }
 
   loadRoom(name, path) {
     return fetch(path).then(rsp => rsp.json()).then(json => {
-      return this.assetMap[name] = new Room(json, name)
+      return this.assetMap[name] = new Room(this.game, json, name)
     }).then(room => this.loadTilesets(room.tilesetsToLoad))
   }
 }

src/game.js

@@ -41,7 +41,7 @@ export default class Game {
 
   tick(dt) {
     this.actors.forEach(actor => actor.tick(dt))
-    this.currentRoom.tick(this, dt)
+    this.currentRoom.tick(dt)
     Object.values(this.events).forEach(e => e.nextFrame())
   }
 

src/index.js

@@ -5,7 +5,7 @@ document.addEventListener("DOMContentLoaded", async e => {
   const canvas = document.getElementById("game-canvas")
   const game = new Game(canvas)
 
-  game.assets = new Assets()
+  game.assets = new Assets(game)
   await game.assets.load()
 
   game.start()

src/room.js

@@ -1,28 +1,16 @@
-import { doRectanglesOverlap } from "./util.js"
+import RoomObject from "./roomObject.js"
+
 export default class Room {
-  constructor(json, name) {
+  constructor(game, json, name) {
+    this.game = game
     this.json = json
     this.name = name
+    const objectJson = this.json.layers.find(layer => layer.type == "objectgroup")?.objects || []
+    this.objects = objectJson.map(RoomObject.fromJson.bind(null, this.game))
   }
 
-  tick(game, dt) {
-    this.json.layers.forEach(layer => {
-      if (layer.type == "objectgroup") this.tickObjectGroup(game, layer)
-    })
-  }
-
-  tickObjectGroup(game, layer) {
-    const { player } = game
-    layer.objects.forEach(object => {
-      if (doRectanglesOverlap(player, object)) {
-	const eventName = object.properties.find(property => property.name == "event")?.value
-	if (eventName) game.triggerEvent(eventName, object)
-      }
-      if (player.interactHitbox && doRectanglesOverlap(player.interactHitbox, object)) {
-	const eventName = object.properties.find(property => property.name == "interactEvent")?.value
-	if (eventName) game.triggerEvent(eventName, object)
-      }
-    })
+  tick(dt) {
+    this.objects.forEach(object => object.tick(dt))
   }
 
   get tilesetsToLoad() {
@@ -34,7 +22,6 @@ export default class Room {
   }
 
   populateTilesets(assets) {
-    console.log(this.json)
     this.tilesets = this.json.tilesets.map((tileset, index) => {
       const ts = assets.get(`${this.name}-${index}`)
       ts.populateImage(assets)

src/roomObject.js

@@ -0,0 +1,34 @@
+import { doRectanglesOverlap } from "./util.js"
+
+export default class RoomObject {
+  constructor(game) {
+    this.game = game
+  }
+  
+  static fromJson(game, json) {
+    const roomObject = new RoomObject(game)
+    Object.entries(json).forEach(([key, value]) => roomObject[key] = value)
+    return roomObject
+  }
+
+  getProperty(name) {
+    const property = this.properties.find(p => p.name == name)
+    if (!property) {
+      // console.error(`Unknown property ${name} on ${this.name}`)
+      return null
+    }
+    return property.value
+  }
+
+  tick(dt) {
+    const { player } = this.game
+    if (doRectanglesOverlap(player, this)) {
+      const eventName = this.getProperty.call(this, "event")
+      if (eventName) this.game.triggerEvent(eventName, this)
+    }
+    if (player.interactHitbox && doRectanglesOverlap(player.interactHitbox, this)) {
+      const eventName = this.getProperty("interactEvent")
+      if (eventName) this.game.triggerEvent(eventName, this)
+    }
+  }
+}

src/tileset.js

@@ -1,5 +1,6 @@
 export default class Tileset {
-  constructor(json, name) {
+  constructor(game, json, name) {
+    this.game = game
     this.json = json
     this.name = name
   }