Implement basic map rendering

5 files changed, 134 insertions, 2 deletions

diff --git a/src/app.coffee b/src/app.coffee
index 08c8575..630fcfd 100644
--- a/src/app.coffee
+++ b/src/app.coffee
@@ -1,3 +1,20 @@
-lodash = require 'lodash'
+'use strict'
 
-document.write '<h1>Hello</h1>'
+require './style.css'
+
+
+Map = require './model/Map'
+MapView = require './view/MapView'
+
+
+mapView = null
+
+
+window.onload = ->
+        xhr = new XMLHttpRequest()
+        xhr.onload = ->
+                mapDef = new Map(JSON.parse this.responseText)
+                mapView = new MapView mapDef, ->
+
+        xhr.open 'GET', 'resources/map/test.json', true
+        xhr.send()
diff --git a/src/model/Map.coffee b/src/model/Map.coffee
new file mode 100644
index 0000000..e97b1ed
--- /dev/null
+++ b/src/model/Map.coffee
@@ -0,0 +1,8 @@
+'use strict'
+
+class Map
+        constructor: (data) ->
+                {@tiles, @collition, @layers} = data
+
+
+module.exports = Map
diff --git a/src/style.css b/src/style.css
new file mode 100644
index 0000000..a1d58ec
--- /dev/null
+++ b/src/style.css
@@ -0,0 +1,14 @@
+html, body {
+  width:  100%;
+  height: 100%;
+}
+
+canvas {
+  position: absolute;
+}
+
+* {
+        margin: 0px;
+        padding: 0px;
+        border: 0px;
+}
diff --git a/src/util.coffee b/src/util.coffee
new file mode 100644
index 0000000..d2cea04
--- /dev/null
+++ b/src/util.coffee
@@ -0,0 +1,12 @@
+'use strict'
+
+_ = require 'lodash'
+
+module.exports =
+        mapPromises: (promises) ->
+                _.reduce promises, ((seq, v, k) ->
+                        seq.then (acc) ->
+                                v.then (r) ->
+                                        acc[k] = r
+                                        acc
+                ), Promise.resolve {}
diff --git a/src/view/MapView.coffee b/src/view/MapView.coffee
new file mode 100644
index 0000000..4cd05de
--- /dev/null
+++ b/src/view/MapView.coffee
@@ -0,0 +1,81 @@
+'use strict'
+
+_ = require 'lodash'
+util = require '../util'
+
+
+tileSize = 32
+
+body = document.getElementsByTagName('body')[0]
+
+
+loadImage = (url) ->
+        new Promise (resolve, reject) ->
+                img = new Image()
+                img.addEventListener 'load', -> resolve img
+                img.addEventListener 'error', -> reject Error('Failed to load ' + url)
+                img.src = url
+
+loadImages = (imgs) ->
+        util.mapPromises(_.mapValues imgs, loadImage)
+
+loadTiles = (tileDef) ->
+        loadImages(_.mapValues tileDef, (t) -> "resources/sprite/tile/#{t.file}.png")
+
+
+class MapView
+        constructor: (@map, ready) ->
+                @redrawPending = false
+
+                @canvas = document.createElement 'canvas'
+                @ctx = @canvas.getContext '2d'
+                body.appendChild @canvas
+
+                body.addEventListener 'resize', @setSize
+
+                @setSize()
+
+                loadTiles(@map.tiles).then (tiles) =>
+                        @tiles = tiles
+                        @redraw()
+                        ready()
+
+        drawTile: (x, y, tile) ->
+                return unless tile
+
+                @ctx.drawImage(tile, x, y)
+
+        draw: ->
+                @redrawPending = false
+
+                @ctx.clearRect 0, 0, @canvas.width, @canvas.height
+
+                return unless @tiles
+
+                for layer in @map.layers
+                        y = 0
+
+                        for row in layer
+                                x = 0
+
+                                for tile in row
+                                        @drawTile x, y, @tiles[tile]
+                                        x += tileSize
+
+                                y += tileSize
+
+        redraw: ->
+                unless @redrawPending
+                        @redrawPending = true
+                        window.requestAnimationFrame => @draw()
+
+        setSize: ->
+                e = document.documentElement
+                @canvas.width = window.innerWidth || e.clientWidth || body.clientWidth
+                @canvas.height = window.innerHeight || e.clientHeight || body.clientHeight
+
+                @redraw()
+
+
+
+module.exports = MapView