82 lines
2.2 KiB
CoffeeScript
82 lines
2.2 KiB
CoffeeScript
'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'
|
|
@canvas.style.position = 'absolute'
|
|
body.appendChild @canvas
|
|
|
|
@ctx = @canvas.getContext '2d'
|
|
|
|
window.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
|