summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
Diffstat
-rw-r--r--package.json4
-rw-r--r--src/app.coffee21
-rw-r--r--src/model/Map.coffee8
-rw-r--r--src/style.css14
-rw-r--r--src/util.coffee12
-rw-r--r--src/view/MapView.coffee81
-rw-r--r--static/resources/map/test.json141
-rw-r--r--webpack.config.js7
8 files changed, 211 insertions, 77 deletions
diff --git a/package.json b/package.json
index ca3a794..15fd45b 100644
--- a/package.json
+++ b/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"
},
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
diff --git a/static/resources/map/test.json b/static/resources/map/test.json
index 1caf8e7..12b1894 100644
--- a/static/resources/map/test.json
+++ b/static/resources/map/test.json
@@ -1,50 +1,45 @@
{
- "options": {
- "width": 32,
- "height": 32,
- "layers": 2
- },
"tiles": {
"G": {"rotate": 0, "file": "grass"},
"<": {"rotate": 0, "file": "road_left"},
">": {"rotate": 0, "file": "road_right"}
},
+ "collision": [
+ "11111111111111111111111111111111",
+ "11111111111111111111111111111111",
+ "11111111111111111111111111111111",
+ "11111111111111111111111111111111",
+ "11111111111111111111111111111111",
+ "11111111111111111111111111111111",
+ "11111111111111111111111111111111",
+ "11111111111111111111111111111111",
+ "11111111111111111111111111111111",
+ "11111111111111111111111111111111",
+ "11111111111111111111111111111111",
+ "11111111111111111111111111111111",
+ "11111111111111111111111111111111",
+ "11111111111111111111111111111111",
+ "11111111111111111111111111111111",
+ "11111111111111111111111111111111",
+ "11111111111111111111111111111111",
+ "11111111111111111111111111111111",
+ "11111111111111111111111111111111",
+ "11111111111111111111111111111111",
+ "11111111111111111111111111111111",
+ "11111111111111111111111111111111",
+ "11111111111111111111111111111111",
+ "11111111111111111111111111111111",
+ "11111111111111111111111111111111",
+ "11111111111111111111111111111111",
+ "11111111111111111111111111111111",
+ "11111111111111111111111111111111",
+ "11111111111111111111111111111111",
+ "11111111111111111111111111111111",
+ "11111111111111111111111111111111",
+ "11111111111111111111111111111111"
+ ],
"layers": [
[
- "11111111111111111111111111111111",
- "11111111111111111111111111111111",
- "11111111111111111111111111111111",
- "11111111111111111111111111111111",
- "11111111111111111111111111111111",
- "11111111111111111111111111111111",
- "11111111111111111111111111111111",
- "11111111111111111111111111111111",
- "11111111111111111111111111111111",
- "11111111111111111111111111111111",
- "11111111111111111111111111111111",
- "11111111111111111111111111111111",
- "11111111111111111111111111111111",
- "11111111111111111111111111111111",
- "11111111111111111111111111111111",
- "11111111111111111111111111111111",
- "11111111111111111111111111111111",
- "11111111111111111111111111111111",
- "11111111111111111111111111111111",
- "11111111111111111111111111111111",
- "11111111111111111111111111111111",
- "11111111111111111111111111111111",
- "11111111111111111111111111111111",
- "11111111111111111111111111111111",
- "11111111111111111111111111111111",
- "11111111111111111111111111111111",
- "11111111111111111111111111111111",
- "11111111111111111111111111111111",
- "11111111111111111111111111111111",
- "11111111111111111111111111111111",
- "11111111111111111111111111111111",
- "11111111111111111111111111111111"
- ],
- [
"GGGGGGGGGGG<>GGGGGGGGGGGGGGGGGGG",
"GGGGGGGGGGG<>GGGGGGGGGGGGGGGGGGG",
"GGGGGGGGGGG<>GGGGGGGGGGGGGGGGGGG",
@@ -77,40 +72,40 @@
"GGGGGGGGGGG<>GGGGGGGGGGGGGGGGGGG",
"GGGGGGGGGGG<>GGGGGGGGGGGGGGGGGGG",
"GGGGGGGGGGG<>GGGGGGGGGGGGGGGGGGG"
+ ],
+ [
+ "................................",
+ "................................",
+ "................................",
+ "................................",
+ "................................",
+ "................................",
+ "................................",
+ "................................",
+ "................................",
+ "................................",
+ "................................",
+ "................................",
+ "................................",
+ "................................",
+ "................................",
+ "................................",
+ "................................",
+ "................................",
+ "................................",
+ "................................",
+ "................................",
+ "................................",
+ "................................",
+ "................................",
+ "................................",
+ "................................",
+ "................................",
+ "................................",
+ "................................",
+ "................................",
+ "................................",
+ "................................"
]
- ],
- "collision": [
- "................................",
- "................................",
- "................................",
- "................................",
- "................................",
- "................................",
- "................................",
- "................................",
- "................................",
- "................................",
- "................................",
- "................................",
- "................................",
- "................................",
- "................................",
- "................................",
- "................................",
- "................................",
- "................................",
- "................................",
- "................................",
- "................................",
- "................................",
- "................................",
- "................................",
- "................................",
- "................................",
- "................................",
- "................................",
- "................................",
- "................................",
- "................................"
]
}
diff --git a/webpack.config.js b/webpack.config.js
index 20a6165..d069bb6 100644
--- a/webpack.config.js
+++ b/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' }
]
},
generated by cgit v1.2.3 (git 2.25.1) at 2024-11-21 17:50:24 +0100