From 3280ab57bffb3fa1018d406eb25a3d98564a51d7 Mon Sep 17 00:00:00 2001 From: Matthias Schiffer Date: Tue, 5 Jan 2016 18:10:35 +0100 Subject: Implement basic map rendering --- package.json | 4 +- src/app.coffee | 21 +++++- src/model/Map.coffee | 8 +++ src/style.css | 14 ++++ src/util.coffee | 12 ++++ src/view/MapView.coffee | 81 +++++++++++++++++++++++ static/resources/map/test.json | 141 ++++++++++++++++++++--------------------- webpack.config.js | 7 +- 8 files changed, 211 insertions(+), 77 deletions(-) create mode 100644 src/model/Map.coffee create mode 100644 src/style.css create mode 100644 src/util.coffee create mode 100644 src/view/MapView.coffee 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 '

Hello

' +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,49 +1,44 @@ { - "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", @@ -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' } ] }, -- cgit v1.2.3