1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
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
|
