Implement basic map rendering

package.json

@@ -1,13 +1,15 @@
 {
   "private": true,
   "scripts": {
-    "start": "webpack-dev-server -d",
+    "start": "webpack-dev-server -d --content-base static",
     "build": "webpack"
   },
   "devDependencies": {
     "coffee-loader": "^0.7.2",
     "coffee-script": "^1.10.0",
+    "css-loader": "^0.23.1",
     "html-webpack-plugin": "^1.7.0",
+    "style-loader": "^0.13.0",
     "webpack": "^1.12.9",
     "webpack-dev-server": "^1.14.0"
   },

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()

src/model/Map.coffee

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

src/style.css

@@ -0,0 +1,14 @@
+html, body {
+  width:  100%;
+  height: 100%;
+}
+
+canvas {
+  position: absolute;
+}
+
+* {
+        margin: 0px;
+        padding: 0px;
+        border: 0px;
+}

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 {}

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

static/resources/map/test.json

@@ -1,16 +1,10 @@
 {
-	"options": {
-		"width": 32,
-		"height": 32,
-		"layers": 2
-	},
 	"tiles": {
 		"G": {"rotate": 0, "file": "grass"},
 		"<": {"rotate": 0, "file": "road_left"},
 		">": {"rotate": 0, "file": "road_right"}
 	},
-	"layers": [
-		[
+	"collision": [
 		"11111111111111111111111111111111",
 		"11111111111111111111111111111111",
 		"11111111111111111111111111111111",
@@ -44,6 +38,7 @@
 		"11111111111111111111111111111111",
 		"11111111111111111111111111111111"
 	],
+	"layers": [
 		[
 			"GGGGGGGGGGG<>GGGGGGGGGGGGGGGGGGG",
 			"GGGGGGGGGGG<>GGGGGGGGGGGGGGGGGGG",
@@ -77,9 +72,8 @@
 			"GGGGGGGGGGG<>GGGGGGGGGGGGGGGGGGG",
 			"GGGGGGGGGGG<>GGGGGGGGGGGGGGGGGGG",
 			"GGGGGGGGGGG<>GGGGGGGGGGGGGGGGGGG"
-		]
 		],
-	"collision": [
+		[
 			"................................",
 			"................................",
 			"................................",
@@ -113,4 +107,5 @@
 			"................................",
 			"................................"
 		]
+	]
 }

webpack.config.js

@@ -6,9 +6,14 @@ module.exports = {
     path: './build',
     filename: 'bundle.js'
   },
-  plugins: [new HtmlWebpackPlugin()],
+  plugins: [
+    new HtmlWebpackPlugin({
+      title: 'RPGedit'
+    })
+  ],
   module: {
     loaders: [
+      { test: /\.css$/, loader: 'style-loader!css-loader' },
       { test: /\.coffee$/, loader: 'coffee-loader' }
     ]
   },