top-down-action-adventure/src/room.js

export default class Room {
  constructor(json, name) {
    this.json = json
    this.name = name
    console.log(json)
  }

  get tilesetsToLoad() {
    const ts = {}
    this.json.tilesets.forEach((tileset, index) => {
      ts[`${this.name}-${index}`] = tileset.source
    })
    return ts
  }

  populateTilesets(assets) {
    console.log(this.json)
    this.tilesets = this.json.tilesets.map((tileset, index) => {
      const ts = assets.get(`${this.name}-${index}`)
      ts.populateImage(assets)
      return ts
    })
  }

  draw(ctx) {
    this.json.layers.forEach(layer => {
      for (let y = 0; y < layer.height; y++) {
	for (let x = 0; x < layer.width; x++) {
	  const index = x + (y * layer.width)
	  const tileIndex = layer.data[index] - 1
	  const tileset = this.tilesets[0]
	  const [sx, sy] = tileset.tileOffset(tileIndex)
	  ctx.drawImage(
	    tileset.image,
	    sx,
	    sy,
	    tileset.tileWidth,
	    tileset.tileHeight,
	    x * this.json.tilewidth,
	    y * this.json.tileheight,
	    this.json.tilewidth,
	    this.json.tileheight
	  )
	}
      }
    })
  }
}