diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/app.coffee | 21 | ||||
| -rw-r--r-- | src/model/Map.coffee | 8 | ||||
| -rw-r--r-- | src/style.css | 14 | ||||
| -rw-r--r-- | src/util.coffee | 12 | ||||
| -rw-r--r-- | src/view/MapView.coffee | 81 |
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 |