Add entity rendering

src/app.coffee

@@ -2,19 +2,20 @@
 
 require './style.css'
 
+window._ = require 'lodash'
 
-Map = require './model/Map'
+MapData = require './model/MapData'
-MapView = require './view/MapView'
+MapContext = require './control/MapContext'
 
 
-mapView = null
+mapContext = null
 
 
 window.onload = ->
         xhr = new XMLHttpRequest()
         xhr.onload = ->
-                mapDef = new Map(JSON.parse this.responseText)
+                mapDef = new MapData(JSON.parse this.responseText)
-                mapView = new MapView mapDef
+                mapContext = new MapContext mapDef
 
         xhr.open 'GET', 'resources/map/test.json', true
         xhr.send()

src/control/MapContext.coffee

@@ -0,0 +1,29 @@
+'use strict'
+
+
+Direction = require '../model/Direction'
+Entity = require '../model/Entity'
+EntityPosition = require '../model/EntityPosition'
+Position = require '../model/Position'
+
+MapView = require '../view/MapView'
+
+
+class MapContext
+        constructor: (@map) ->
+                @entities = {}
+
+                @playerEntity = new EntityPosition(
+                        new Entity('square'),
+                        new Position(8, 8),
+                        Direction.EAST)
+
+                @addEntity(@playerEntity)
+
+                @mavView = new MapView @map, @entities
+
+        addEntity: (entity) =>
+                @entities[entity.position.asString()] = entity
+
+
+module.exports = MapContext

src/model/Direction.coffee

@@ -0,0 +1,13 @@
+'use strict'
+
+
+Direction =
+        NORTH: 0
+        EAST: 1
+        SOUTH: 2
+        WEST: 3
+
+        reverse: (d) -> (d+2)%4
+
+
+module.exports = Direction

src/model/Entity.coffee

@@ -0,0 +1,8 @@
+'use strict'
+
+
+class Entity
+        constructor: (@name) ->
+
+
+module.exports = Entity

src/model/EntityPosition.coffee

@@ -0,0 +1,8 @@
+'use strict'
+
+
+class EntityPosition
+        constructor: (@entity, @position, @direction) ->
+
+
+module.exports = EntityPosition

src/model/MapData.coffee

@@ -1,8 +1,9 @@
 'use strict'
 
-class Map
+
+class MapData
         constructor: (data) ->
                 {@tiles, @collition, @layers} = data
 
 
-module.exports = Map
+module.exports = MapData

src/model/Position.coffee

@@ -0,0 +1,10 @@
+'use strict'
+
+
+class Position
+        constructor: (@x, @y) ->
+
+        asString: => "#{@x},#{@y}"
+
+
+module.exports = Position

src/util.coffee

@@ -1,12 +1,13 @@
 'use strict'
 
-_ = require 'lodash'
 
 module.exports =
         mapPromises: (promises) ->
-                _.reduce promises, ((seq, v, k) ->
+                p = []
-                        seq.then (acc) ->
+                ret = {}
-                                v.then (r) ->
+
-                                        acc[k] = r
+                for own k, v of promises
-                                        acc
+                        do (k, v) ->
-                ), Promise.resolve {}
+                                p.push(v.then (r) -> ret[k] = r)
+
+                Promise.all(p).then -> ret

src/view/MapView.coffee

@@ -1,6 +1,5 @@
 'use strict'
 
-_ = require 'lodash'
 util = require '../util'
 
 
@@ -19,12 +18,20 @@ loadImage = (url) ->
 loadImages = (imgs) ->
         util.mapPromises(_.mapValues imgs, loadImage)
 
-loadTiles = (tileDef) ->
+loadTiles = (tiles) ->
-        loadImages(_.mapValues tileDef, (t) -> "resources/sprite/tile/#{t.file}.png")
+        loadImages(_.mapValues tiles, (t) -> "resources/sprite/tile/#{t.file}.png")
+
+loadEntities = (entities) ->
+        p = {}
+        for e in entities
+                do (e) ->
+                        p[e.entity.name] = loadImage "resources/sprite/entity/#{e.entity.name}.png"
+
+        util.mapPromises p
 
 
 class MapView
-        constructor: (@map) ->
+        constructor: (@map, @entities) ->
                 @redrawPending = false
 
                 @canvas = document.createElement 'canvas'
@@ -36,22 +43,38 @@ class MapView
                 window.addEventListener 'resize', @setSize
                 @setSize()
 
-                @ready = loadTiles(@map.tiles).then (tiles) =>
+                tilesReady = loadTiles(@map.tiles).then (tiles) =>
                         @tiles = tiles
+
+                entitiesReady = loadEntities(_.values @entities).then (entities) =>
+                        @entitySprites = entities
+
+                tilesReady.then(entitiesReady).then =>
                         @redraw()
                         return
 
         drawTile: (x, y, tile) =>
                 return unless tile
 
-                @ctx.drawImage(tile, x, y)
+                @ctx.drawImage tile, x, y
+
+        drawEntity: (e) =>
+                sprite = @entitySprites[e.entity.name]
+                return unless sprite
+
+                @ctx.drawImage(
+                        sprite,
+                        e.direction*tileSize, 0,
+                        tileSize, tileSize,
+                        e.position.x*tileSize, e.position.y*tileSize,
+                        tileSize, tileSize)
 
         draw: =>
                 @redrawPending = false
 
                 @ctx.clearRect 0, 0, @canvas.width, @canvas.height
 
-                return unless @tiles
+                return unless @tiles and @entitySprites
 
                 for layer in @map.layers
                         y = 0
@@ -65,6 +88,9 @@ class MapView
 
                                 y += tileSize
 
+                for e in _.values @entities
+                        @drawEntity e
+
         redraw: =>
                 unless @redrawPending
                         @redrawPending = true