diff --git a/graphic-sets.json b/graphic-sets.json new file mode 100644 index 0000000..1539144 --- /dev/null +++ b/graphic-sets.json @@ -0,0 +1,16 @@ +[ + { + "name": "Nature", + "tileset": "landscape01.jpg", + "tiles": 8, + "backgroundColor": "#6096ff", + "backgroundImage": null + }, + { + "name": "Moon", + "tileset": "moon.jpg", + "tiles": 2, + "backgroundColor": "black", + "backgroundImage": null + } +] \ No newline at end of file diff --git a/graphics/background_earth.jpg b/graphics/background_earth.jpg new file mode 100644 index 0000000..a0fcc77 Binary files /dev/null and b/graphics/background_earth.jpg differ diff --git a/js/GraphicSet.js b/js/GraphicSet.js new file mode 100644 index 0000000..e0f7764 --- /dev/null +++ b/js/GraphicSet.js @@ -0,0 +1,20 @@ +let GraphicSet = [ + { + name: 'Nature', + tileset: 'landscape01.jpg', + tiles: 8, + scale: 3, + backgroundColor: '#6096ff', + backgroundImage: null + }, + { + name: 'Moon', + tileset: 'moon.jpg', + tiles: 2, + scale: 3, + backgroundColor: 'black', + backgroundImage: 'background_earth.jpg' + } +]; + +export default GraphicSet; \ No newline at end of file diff --git a/js/module.js b/js/module.js index 6fcfced..9a07814 100644 --- a/js/module.js +++ b/js/module.js @@ -7,8 +7,8 @@ import FileLoader from "./FileLoader.js"; import Camera from "./Camera.js"; import Gisela from "./Gisela.js"; import Setting from "./Setting.js"; -import InterfaceEvent from "./events/InterfaceEvent.js"; import FrameRateMeasurer from "./FrameRateMeasurer.js"; +import GraphicSet from "./GraphicSet.js"; class ImageLoader { @@ -160,7 +160,7 @@ const GRAVITY = 2; let fps; let frameDuration; -let levelJson = new FileLoader('levels/level01.json'); +let levelJson = new FileLoader('levels/moon.json'); const LEVEL = JSON.parse(levelJson.getContent()); @@ -180,7 +180,7 @@ let loader = new ImageLoader(); loader.addImage(Setting.GRAPHICS_LOCATION + 'mr-croc-walk-right.png'); loader.addImage(Setting.GRAPHICS_LOCATION + 'mr-croc-walk-left.png'); -loader.addImage(Setting.TILESET_LOCATION + 'landscape01.jpg'); +loader.addImage(Setting.TILESET_LOCATION + GraphicSet[LEVEL.tileset].tileset); loader.addImage(Setting.GRAPHICS_LOCATION + 'gisela-right.png'); new FrameRateMeasurer(); @@ -191,6 +191,15 @@ window.addEventListener( let canvas = document.getElementById('canvas'); canvas.width = window.innerWidth; canvas.height = window.innerHeight; + canvas.style.backgroundAttachment = 'fixed'; + canvas.style.backgroundSize = 'cover'; + canvas.style.backgroundPosition = 'center center'; + + if (GraphicSet[LEVEL.tileset].backgroundImage !== null) { + canvas.style.backgroundImage = 'url("' + Setting.GRAPHICS_LOCATION + GraphicSet[LEVEL.tileset].backgroundImage +'")'; + } + + canvas.style.backgroundColor = LEVEL.backgroundColor; window.addEventListener( 'resize', @@ -212,7 +221,7 @@ window.addEventListener( gisela = new Gisela(); architecture.setMovableToTargetPosition(gisela); - fps = 120; //event.frameRate; + fps = 120; frameDuration = 1000 / fps; window.requestAnimationFrame(MainLoop); } diff --git a/js/retro/RetroArchitecture.js b/js/retro/RetroArchitecture.js index a13fb1f..213d4de 100644 --- a/js/retro/RetroArchitecture.js +++ b/js/retro/RetroArchitecture.js @@ -3,6 +3,8 @@ import RetroArchitectureTile from "./RetroArchitectureTile.js"; import GeometryRectCollection from "../geometry/GeometryRectCollection.js"; import GeometryPoint from "../geometry/GeometryPoint.js"; import GeometryRect from "../geometry/GeometryRect.js"; +import GraphicSet from "../GraphicSet.js"; +import Setting from "../Setting.js"; export default class RetroArchitecture { @@ -10,6 +12,8 @@ export default class RetroArchitecture { this.tileset = tilesetSprite; this.tiles = tiles; + this.backgroundColor = null; + this.backgroundImage = null; this.rows = rows; this.columns = columns; this.matrix = []; @@ -37,6 +41,16 @@ export default class RetroArchitecture } } + setBackgroundColor(color) + { + this.backgroundColor = color; + } + + setBackgroundImage(image) + { + this.backgroundImage = image; + } + getCollisionRects(rect) { let posX = Math.floor(rect.position.x / this.tileWidth) - 2; @@ -200,33 +214,46 @@ export default class RetroArchitecture let field = this.matrix[y][x]; if (field !== null && field !== undefined) { - context.drawImage( - this.tileset.canvas, - field.tile * this.tileWidth, - 0, - this.tileWidth, - this.tileHeight, - x * this.tileWidth - camera.position.x, - y * this.tileHeight - camera.position.y, - this.tileWidth, - this.tileHeight - ); + this.drawField(context, x, y, camera, field); } } } } + drawField(context, x, y, camera, field) + { + context.drawImage( + this.tileset.canvas, + field.tile * this.tileWidth, + 0, + this.tileWidth, + this.tileHeight, + x * this.tileWidth - camera.position.x, + y * this.tileHeight - camera.position.y, + this.tileWidth + 1, + this.tileHeight + 1 + ); + } + static createFromData(data) { - let tileset = new RetroSprite(data.tileset, data.scale); + let graphicSet = GraphicSet[data.tileset]; + console.log(data); + let tileset = new RetroSprite( + Setting.TILESET_LOCATION + graphicSet.tileset, + graphicSet.scale + ); let architecture = new RetroArchitecture( tileset, - data.tiles, + graphicSet.tiles, data.columns, data.rows ); + architecture.setBackgroundColor(graphicSet.backgroundColor); + architecture.setBackgroundImage(graphicSet.backgroundImage); + architecture.startX = data.startX; architecture.startY = data.startY; architecture.targetX = data.targetX; diff --git a/levels/level01.json b/levels/level01.json index 12aa2ee..3b601e9 100644 --- a/levels/level01.json +++ b/levels/level01.json @@ -1 +1 @@ -{"tileset":"/mr-crocs-adventures/graphics/tileset/landscape01.jpg","tiles":8,"scale":3,"rows":15,"columns":100,"startX":2,"startY":9,"targetX":2,"targetY":2,"backgroundColor":"#6096ff","matrix":[[4,4,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1],[4,4,-1,-1,-1,-1,-1,-1,-1,-1,-1,1,1,1,1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1],[4,4,-1,-1,-1,-1,-1,1,-1,1,-1,4,4,4,4,-1,1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,1,1,1,-1,1,1,1,1,1,1,1,-1,1,1,-1,1,-1,1,-1,1,1,-1,1,1,-1,1,-1,1,-1,1,1,1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1],[4,4,1,1,-1,-1,-1,4,-1,4,-1,4,4,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,1,-1,-1,1,-1,-1,1,-1,-1,-1,-1,1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1],[4,4,-1,-1,-1,1,-1,4,-1,4,-1,4,4,-1,-1,1,-1,-1,-1,-1,-1,-1,1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,0,0,4,-1,-1,1,-1,-1,1,1,-1,-1,1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,0,0,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1],[4,4,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,1,1,1,1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,4,-1,-1,1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1],[4,4,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,1,1,1,1,1,1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,0,0,0,-1,-1,-1,-1,-1,-1,-1,-1,1,1,1,1,-1,-1,-1,-1,-1,-1,-1,4,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1],[4,4,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,0,-1,-1,-1,-1,-1,-1,-1,-1,4,4,4,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,4,4,1,1,-1,-1,-1,-1,-1,4,0,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1],[4,4,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,0,-1,0,-1,-1,-1,4,4,4,-1,-1,-1,-1,-1,-1,1,-1,-1,-1,4,4,4,4,-1,-1,-1,-1,-1,4,-1,-1,-1,0,0,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1],[4,4,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,0,0,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,1,4,4,4,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,4,4,4,4,-1,1,1,1,1,4,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1],[4,4,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,4,4,0,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,1,4,4,4,4,-1,-1,-1,-1,-1,-1,-1,-1,1,-1,4,4,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,1,1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1],[4,4,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,1,1,1,-1,-1,2,2,-1,-1,0,0,0,4,4,4,0,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,1,4,4,4,4,4,-1,-1,-1,-1,-1,-1,1,-1,-1,-1,4,4,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,1,1,-1,4,4,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1],[4,4,-1,-1,-1,-1,-1,1,1,1,1,1,-1,-1,-1,1,1,1,-1,-1,1,1,1,4,4,4,-1,-1,3,3,-1,-1,-1,-1,-1,4,4,4,4,0,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,1,-1,1,-1,1,4,4,4,4,4,4,-1,-1,-1,-1,1,-1,-1,-1,-1,-1,4,4,2,2,2,-1,-1,2,2,-1,-1,1,1,4,4,-1,4,4,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1],[4,4,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,4,4,4,-1,-1,-1,-1,-1,4,4,4,-1,-1,3,3,2,-1,-1,-1,-1,4,4,4,4,4,0,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,4,4,4,4,4,4,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,4,4,5,5,5,-1,-1,3,3,-1,-1,4,4,4,4,-1,4,4,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1],[4,4,1,1,1,1,1,1,-1,-1,-1,1,1,1,1,4,4,4,-1,-1,-1,-1,-1,4,4,4,-1,-1,5,5,5,1,1,1,1,4,4,4,4,4,4,1,1,1,1,-1,1,-1,-1,1,1,1,-1,-1,-1,-1,4,4,4,4,4,4,1,1,1,1,1,1,-1,-1,-1,-1,4,4,-1,-1,-1,-1,-1,5,5,-1,-1,4,4,4,4,-1,4,4,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1]]} \ No newline at end of file +{"tileset":0,"rows":21,"columns":100,"startX":2,"startY":15,"targetX":2,"targetY":8,"matrix":[[-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1],[-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1],[-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1],[-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1],[-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1],[-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1],[0,0,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1],[4,4,-1,-1,-1,-1,-1,-1,-1,-1,-1,1,1,1,1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1],[4,4,-1,-1,-1,-1,-1,1,-1,1,-1,4,4,4,4,-1,1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,1,1,1,-1,1,1,1,1,1,1,1,-1,1,1,-1,1,-1,1,-1,1,1,-1,1,1,-1,1,-1,1,-1,1,1,1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1],[4,4,1,1,-1,-1,-1,4,-1,4,-1,4,4,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,1,-1,-1,1,-1,-1,1,-1,-1,-1,-1,1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1],[4,4,-1,-1,-1,1,-1,4,-1,4,-1,4,4,-1,-1,1,-1,-1,-1,-1,-1,-1,1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,0,0,4,-1,-1,1,-1,-1,1,1,-1,-1,1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,0,0,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1],[4,4,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,1,1,1,1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,4,-1,-1,1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1],[4,4,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,1,1,1,1,1,1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,0,0,0,-1,-1,-1,-1,-1,-1,-1,-1,1,1,1,1,-1,-1,-1,-1,-1,-1,-1,4,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1],[4,4,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,0,-1,-1,-1,-1,-1,-1,-1,-1,4,4,4,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,4,4,1,1,-1,-1,-1,-1,-1,4,0,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1],[4,4,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,0,-1,0,-1,-1,-1,4,4,4,-1,-1,-1,-1,-1,-1,1,-1,-1,-1,4,4,4,4,-1,-1,-1,-1,-1,4,-1,-1,-1,0,0,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1],[4,4,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,0,0,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,1,4,4,4,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,4,4,4,4,-1,1,1,1,1,4,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1],[4,4,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,4,4,0,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,1,4,4,4,4,-1,-1,-1,-1,-1,-1,-1,-1,1,-1,4,4,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,1,1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1],[4,4,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,1,1,1,-1,-1,2,2,-1,-1,0,0,0,4,4,4,0,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,1,4,4,4,4,4,-1,-1,-1,-1,-1,-1,1,-1,-1,-1,4,4,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,1,1,-1,4,4,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1],[4,4,-1,-1,-1,-1,-1,1,1,1,1,1,-1,-1,-1,1,1,1,-1,-1,1,1,1,4,4,4,-1,-1,3,3,-1,-1,-1,-1,-1,4,4,4,4,0,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,1,-1,1,-1,1,4,4,4,4,4,4,-1,-1,-1,-1,1,-1,-1,-1,-1,-1,4,4,2,2,2,-1,-1,2,2,-1,-1,1,1,4,4,-1,4,4,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1],[4,4,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,4,4,4,-1,-1,-1,-1,-1,4,4,4,-1,-1,3,3,2,-1,-1,-1,-1,4,4,4,4,4,0,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,4,4,4,4,4,4,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,4,4,5,5,5,-1,-1,3,3,-1,-1,4,4,4,4,-1,4,4,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1],[4,4,1,1,1,1,1,1,-1,-1,-1,1,1,1,1,4,4,4,-1,-1,-1,-1,-1,4,4,4,-1,-1,5,5,5,1,1,1,1,4,4,4,4,4,4,1,1,1,1,-1,1,-1,-1,1,1,1,-1,-1,-1,-1,4,4,4,4,4,4,1,1,1,1,1,1,-1,-1,-1,-1,4,4,-1,-1,-1,-1,-1,5,5,-1,-1,4,4,4,4,-1,4,4,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1]]} \ No newline at end of file diff --git a/levels/moon.json b/levels/moon.json new file mode 100644 index 0000000..9e4e2b8 --- /dev/null +++ b/levels/moon.json @@ -0,0 +1 @@ +{"tileset":1,"rows":"20","columns":51,"startX":2,"startY":16,"targetX":49,"targetY":16,"backgroundColor":"black","matrix":[[-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1],[-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1],[-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1],[-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1],[-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1],[-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1],[-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1],[-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1],[-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1],[-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1],[-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1],[-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1],[0,0,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,0],[1,1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,1],[1,1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,1],[1,1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,0,0,0,0,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,1],[1,1,-1,-1,0,0,0,0,0,0,0,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,0,0,1,1,1,1,0,0,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,0,0,0,0,-1,-1,-1,1],[1,1,0,0,1,1,1,1,1,1,1,0,0,-1,-1,-1,-1,-1,-1,0,0,0,0,1,1,1,1,1,1,1,1,0,0,0,0,0,-1,-1,-1,-1,-1,0,0,1,1,1,1,0,0,0,1],[1,1,1,1,1,1,1,1,1,1,1,1,1,0,0,0,0,0,0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1],[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1]]} \ No newline at end of file diff --git a/tilorswift/js/Terrain.js b/tilorswift/js/Terrain.js index 50ac3e1..730f12f 100644 --- a/tilorswift/js/Terrain.js +++ b/tilorswift/js/Terrain.js @@ -1,6 +1,7 @@ import Field from "./Field.js"; import Tileset from "./Tileset.js"; import TilorswiftEvent from "./events/TilorswiftEvent.js"; +import GraphicSet from "../../js/GraphicSet.js"; export default class Terrain { @@ -15,6 +16,7 @@ export default class Terrain this.targetTileX = undefined; this.targetTileY = undefined; this.backgroundColor = backgroundColor; + this.backgroundImage = undefined; this.htmlElement = document.createElement('table'); this.brushTileIndex = 0; @@ -24,7 +26,6 @@ export default class Terrain init() { this.htmlElement.id = 'level'; - this.htmlElement.style.backgroundColor = this.backgroundColor; this.htmlElement.style.width = this.tileset.getTileWidth() * this.tilesX + 'px'; this.htmlElement.style.height = this.tileset.getTileHeight() * this.tilesY + 'px'; @@ -65,6 +66,8 @@ export default class Terrain for (let q = 0; q < quantity; q++) { this._insertRow(index); this.tilesY++; + this.entranceTileY = this.entranceTileY === undefined ? undefined : this.entranceTileY + 1; + this.targetTileY = this.targetTileY === undefined ? undefined : this.targetTileY + 1; } this.htmlElement.style.height = this.tileset.getTileHeight() * this.tilesY + 'px'; @@ -82,11 +85,18 @@ export default class Terrain tr.appendChild(td); } + console.log(index); + if (index === undefined || index >= this.tilesY - 1) { this.fields.push(row); this.htmlElement.appendChild(tr); + } else if (index === 0) { + this.fields = [row].concat(this.fields); + console.log(this.fields[0]); + this.htmlElement.insertBefore(tr, this.htmlElement.childNodes[index]); } else { - this.fields = this.fields.slice(0, index).concat(row).concat(this.fields.slice(index)); + this.fields = this.fields.slice(0, index).concat([row]).concat(this.fields.slice(index)); + console.log(this.fields[1]); this.htmlElement.insertBefore(tr, this.htmlElement.childNodes[index]); } } @@ -96,6 +106,8 @@ export default class Terrain for (let c = 0; c < quantity; c++) { this._insertColumn(index); this.tilesX++; + this.entranceTileX = this.entranceTileX === undefined ? undefined : this.entranceTileX + 1; + this.targetTileX = this.targetTileX === undefined ? undefined : this.targetTileX + 1; } this.htmlElement.style.width = this.tileset.getTileWidth() * this.tilesX + 'px'; @@ -175,11 +187,10 @@ export default class Terrain static createFromJson(terrainData) { - let imageTileset = new Image(); - imageTileset.src = terrainData.tileset; + let graphicSet = GraphicSet[terrainData.tileset]; - let tileset = new Tileset(imageTileset, terrainData.tiles, terrainData.scale); - let terrain = new Terrain(tileset, terrainData.columns, terrainData.rows, terrainData.backgroundColor); + let tileset = new Tileset(terrainData.tileset); + let terrain = new Terrain(tileset, terrainData.columns, terrainData.rows, graphicSet.backgroundColor); for (let y = 0; y < terrainData.rows; y++) { for (let x = 0; x < terrainData.columns; x++) { diff --git a/tilorswift/js/Tileset.js b/tilorswift/js/Tileset.js index 324a7b1..90b4cca 100644 --- a/tilorswift/js/Tileset.js +++ b/tilorswift/js/Tileset.js @@ -1,10 +1,15 @@ +import GraphicSet from "../../js/GraphicSet.js"; +import Setting from "../../js/Setting.js"; + export default class Tileset { - constructor(image, tiles, scale = 1) + constructor(setId) { - this.image = image; - this.tiles = tiles; - this.scale = scale; + this.setId = setId; + this.image = new Image(); + this.image.src = Setting.TILESET_LOCATION + GraphicSet[this.setId].tileset; + this.tiles = GraphicSet[this.setId].tiles; + this.scale = GraphicSet[this.setId].scale; } getWidth() diff --git a/tilorswift/js/Tilorswift.js b/tilorswift/js/Tilorswift.js index d62a3a8..b9c4bd0 100644 --- a/tilorswift/js/Tilorswift.js +++ b/tilorswift/js/Tilorswift.js @@ -2,8 +2,11 @@ export default class Tilorswift { static getTerrainAsJson(terrain) { + console.log('Save da shit.'); let matrix = []; + console.log(terrain.fields.length); + for (let y = 0; y < terrain.fields.length; y++) { let row = []; @@ -15,16 +18,13 @@ export default class Tilorswift } let data = { - tileset: terrain.tileset.image.src, - tiles: terrain.tileset.tiles, - scale: terrain.tileset.scale, + tileset: terrain.tileset.setId, rows: terrain.tilesY, columns: terrain.tilesX, startX: terrain.entranceTileX, startY: terrain.entranceTileY, targetX: terrain.targetTileX, targetY: terrain.targetTileY, - backgroundColor: terrain.backgroundColor, matrix: matrix, }; diff --git a/tilorswift/js/dialog/Dialog.js b/tilorswift/js/dialog/Dialog.js index 41b116c..506ab8a 100644 --- a/tilorswift/js/dialog/Dialog.js +++ b/tilorswift/js/dialog/Dialog.js @@ -1,3 +1,7 @@ +import GraphicSet from "../../../js/GraphicSet.js"; +import Setting from "../../../js/Setting.js"; +import TilorswiftTilesetSelectedEvent from "../events/TilorswiftTilesetSelectedEvent.js"; + export default class Dialog { constructor() @@ -59,6 +63,66 @@ export default class Dialog return htmlElementInput; } + createTilesetSelector() + { + let htmlElement = document.createElement('div'); + htmlElement.id = 'tileset-selector'; + + let htmlElementLabel = document.createElement('div'); + htmlElementLabel.classList.add('dialog-label'); + htmlElementLabel.innerText = 'Terrain'; + + let htmlAvatarElement = document.createElement('div'); + htmlAvatarElement.id = 'tileset-avatar'; + htmlAvatarElement.style.backgroundImage = 'url("' + Setting.TILESET_LOCATION + GraphicSet[0].tileset + '")'; + + let htmlListElement = document.createElement('div'); + htmlListElement.id = 'tileset-list'; + + htmlElement.appendChild(htmlElementLabel); + htmlElement.appendChild(htmlAvatarElement); + htmlElement.appendChild(htmlListElement); + + htmlAvatarElement.addEventListener( + 'click', + () => { + htmlListElement.style.display = 'block'; + } + ); + + GraphicSet.forEach( + (graphicSet, index) => { + let htmlTilesetElement = document.createElement('div'); + htmlTilesetElement.classList.add('tileset'); + + let htmlThumbnail = document.createElement('div'); + htmlThumbnail.classList.add('tileset-thumbnail'); + htmlThumbnail.style.backgroundImage = 'url("' + Setting.TILESET_LOCATION + graphicSet.tileset + '")'; + htmlTilesetElement.appendChild(htmlThumbnail); + + let htmlTitleElement = document.createElement('div'); + htmlTitleElement.classList.add('tileset-title'); + htmlTitleElement.innerText = graphicSet.name; + htmlTilesetElement.appendChild(htmlTitleElement); + + htmlTilesetElement.addEventListener( + 'click', + () => { + htmlListElement.style.display = 'none'; + htmlAvatarElement.style.backgroundImage = 'url("' + Setting.TILESET_LOCATION + GraphicSet[index].tileset + '")'; + window.dispatchEvent(new TilorswiftTilesetSelectedEvent(index)); + } + ); + + htmlListElement.appendChild(htmlTilesetElement); + } + ); + + this.inputAreaElement.appendChild(htmlElement); + + return htmlElement; + } + setMessage(message) { this.messageElement.innerText = message; diff --git a/tilorswift/js/dialog/DialogAddRows.js b/tilorswift/js/dialog/DialogAddRows.js index 853069b..409b822 100644 --- a/tilorswift/js/dialog/DialogAddRows.js +++ b/tilorswift/js/dialog/DialogAddRows.js @@ -18,11 +18,11 @@ export default class DialogAddRows extends Dialog getPosition() { - return this.inputPosition.value; + return parseInt(this.inputPosition.value); } getRowsCount() { - return this.inputRows.value; + return parseInt(this.inputRows.value); } } \ No newline at end of file diff --git a/tilorswift/js/dialog/DialogNewTerrain.js b/tilorswift/js/dialog/DialogNewTerrain.js index f0e91b1..cc3051b 100644 --- a/tilorswift/js/dialog/DialogNewTerrain.js +++ b/tilorswift/js/dialog/DialogNewTerrain.js @@ -1,6 +1,6 @@ import Dialog from "./Dialog.js"; import TilorswiftNewTerrainEvent from "../events/TilorswiftNewTerrainEvent.js"; -import Setting from "../../../js/Setting.js"; +import TilorswiftEvent from "../events/TilorswiftEvent.js"; export default class DialogNewTerrain extends Dialog { @@ -9,19 +9,29 @@ export default class DialogNewTerrain extends Dialog this.setMessage('Neues Terrain erstellen'); this.inputRows = this.createInputNumber('Zeilen'); this.inputColumns = this.createInputNumber('Spalten'); + this.inputTerrain = this.createTilesetSelector(); this.buttonCancel = this.createButton('Abbrechen'); this.buttonCreate = this.createButton('Erstellen'); + this.terrainIndex = 0; this.buttonCreate.addEventListener( 'click', () => { window.dispatchEvent( new TilorswiftNewTerrainEvent( - Setting.TILESET_LOCATION + 'landscape01.jpg', /* TODO */ + this.terrainIndex, this.inputColumns.value, this.inputRows.value ) - ) + ); + } + ); + + window.addEventListener( + TilorswiftEvent.TILESET_SELECTED, + (event) => { + this.terrainIndex = event.tilesetIndex; + console.log(event.tilesetIndex); } ); } diff --git a/tilorswift/js/events/TilorswiftEvent.js b/tilorswift/js/events/TilorswiftEvent.js index 210eb2b..aa5c67a 100644 --- a/tilorswift/js/events/TilorswiftEvent.js +++ b/tilorswift/js/events/TilorswiftEvent.js @@ -13,6 +13,7 @@ const TilorswiftEvent = { ADD_COLUMNS_CLICKED: 'addColumnsClicked', NEW_TERRAIN: 'newTerrain', NEW_TERRAIN_CLICKED: 'newTerrainClicked', + TILESET_SELECTED: 'tilesetSelected', }; export default TilorswiftEvent; \ No newline at end of file diff --git a/tilorswift/js/events/TilorswiftNewTerrainEvent.js b/tilorswift/js/events/TilorswiftNewTerrainEvent.js index a7d88ca..21b3540 100644 --- a/tilorswift/js/events/TilorswiftNewTerrainEvent.js +++ b/tilorswift/js/events/TilorswiftNewTerrainEvent.js @@ -2,12 +2,11 @@ import TilorswiftEvent from "./TilorswiftEvent.js"; export default class TilorswiftNewTerrainEvent extends Event { - constructor(tileset, tilesX, tilesY) + constructor(tilesetIndex, tilesX, tilesY) { super(TilorswiftEvent.NEW_TERRAIN); - this.tileset = tileset; + this.tilesetIndex = tilesetIndex; this.tilesX = tilesX; this.tilesY = tilesY; - this.backgroundColor = '#6096ff'; } } \ No newline at end of file diff --git a/tilorswift/js/events/TilorswiftTilesetSelectedEvent.js b/tilorswift/js/events/TilorswiftTilesetSelectedEvent.js new file mode 100644 index 0000000..9a3fef2 --- /dev/null +++ b/tilorswift/js/events/TilorswiftTilesetSelectedEvent.js @@ -0,0 +1,9 @@ +import TilorswiftEvent from "./TilorswiftEvent.js"; + +export default class TilorswiftTilesetSelectedEvent extends Event +{ + constructor(tilesetIndex) { + super(TilorswiftEvent.TILESET_SELECTED); + this.tilesetIndex = tilesetIndex; + } +} \ No newline at end of file diff --git a/tilorswift/js/menu/TilesetPickerWidget.js b/tilorswift/js/menu/TilesetPickerWidget.js index bc9137c..ba4270a 100644 --- a/tilorswift/js/menu/TilesetPickerWidget.js +++ b/tilorswift/js/menu/TilesetPickerWidget.js @@ -12,6 +12,8 @@ export default class TilesetPickerWidget extends Widget this.brush = brush; this.htmlElement = this.createElementPicker(); this.htmlElementSelector = this.createElementSelector(); + this.htmlElement.appendChild(this.htmlElementSelector); + this.loadTileset(); window.addEventListener( @@ -27,12 +29,20 @@ export default class TilesetPickerWidget extends Widget loadTileset() { - this.htmlElement.appendChild(this.htmlElementSelector); - for (let t = 0; t < this.tileset.tiles; t++) { let button = new ButtonTile(this.tileset, t); this.htmlElementSelector.appendChild(button.getElement()); } + + this.htmlElement.style.backgroundImage = 'url("' + this.tileset.image.src + '")'; + this.htmlElement.style.backgroundSize = 'auto ' + this.tileset.getTileWidth() + 'px'; + } + + reloadTileset(tileset) + { + this.tileset = tileset; + this.htmlElementSelector.innerHTML = ''; + this.loadTileset(); } createElementPicker() @@ -42,8 +52,6 @@ export default class TilesetPickerWidget extends Widget htmlElement.style.width = this.tileset.getTileWidth() + 'px'; htmlElement.style.height = this.tileset.getTileHeight() + 'px'; htmlElement.style.backgroundSize = this.tileset.getTileWidth() + 'px ' + this.tileset.getTileHeight() + 'px'; - htmlElement.style.backgroundImage = 'url("' + this.tileset.image.src + '")'; - htmlElement.style.backgroundSize = 'auto ' + this.tileset.getTileWidth() + 'px'; return htmlElement; } @@ -51,7 +59,7 @@ export default class TilesetPickerWidget extends Widget createElementSelector() { let htmlElementSelector = document.createElement('div'); - htmlElementSelector.id = 'tileset-selector'; + htmlElementSelector.id = 'tileset-selector-widget'; htmlElementSelector.style.width = Math.ceil(Math.sqrt(this.tileset.tiles)) * this.tileset.getTileWidth() + 'px'; htmlElementSelector.style.left = String(this.tileset.getTileWidth() + 1) + 'px'; diff --git a/tilorswift/js/module.js b/tilorswift/js/module.js index a8ffbc5..760da14 100644 --- a/tilorswift/js/module.js +++ b/tilorswift/js/module.js @@ -21,19 +21,29 @@ import TilorswiftAddColumnsClickedEvent from "./events/TilorswiftAddColumnsClick import TilorswiftMenuNewTerrainClickedEvent from "./events/TilorswiftMenuNewTerrainClickedEvent.js"; import DialogNewTerrain from "./dialog/DialogNewTerrain.js"; import TargetPointWidget from "./menu/TargetPointWidget.js"; +import GraphicSet from "../../js/GraphicSet.js"; +import Setting from "../../js/Setting.js"; let loader = new FileLoader('../levels/level01.json'); let terrainData = JSON.parse(loader.getContent()); let image = new Image(); -image.src = terrainData.tileset; +image.src = Setting.TILESET_LOCATION + GraphicSet[terrainData.tileset].tileset; image.onload = function () { let terrain = Terrain.createFromJson(terrainData); + + if (GraphicSet[terrainData.tileset].backgroundImage !== null) { + document.body.style.backgroundImage = 'url("' + Setting.GRAPHICS_LOCATION + GraphicSet[terrainData.tileset].backgroundImage + '")'; + } + + document.body.style.backgroundColor = GraphicSet[terrainData.tileset].backgroundColor; + + let map = document.getElementById('map'); map.appendChild(terrain.getElement()); let brush = new Brush(); - let tileset = new Tileset(image, 8, 3); + let tileset = new Tileset(terrainData.tileset); let widgetBar = new WidgetBar('widget-bar'); let tilesetPicker = new TilesetPickerWidget(tileset, brush); @@ -148,9 +158,14 @@ image.onload = function () { window.addEventListener( TilorswiftEvent.NEW_TERRAIN, (event) => { - terrain = new Terrain(tileset, event.tilesX, event.tilesY, event.backgroundColor); + let tileset = new Tileset(event.tilesetIndex); + terrain = new Terrain(tileset, event.tilesX, event.tilesY, GraphicSet[event.tilesetIndex].backgroundColor); + if (GraphicSet[event.tilesetIndex].backgroundImage !== null) { + document.body.style.backgroundImage = 'url("' + Setting.GRAPHICS_LOCATION + GraphicSet[event.tilesetIndex].backgroundImage + '")'; + } map.innerHTML = ''; map.appendChild(terrain.getElement()); + tilesetPicker.reloadTileset(tileset); } ); diff --git a/tilorswift/style.css b/tilorswift/style.css index 64153cf..1860f48 100644 --- a/tilorswift/style.css +++ b/tilorswift/style.css @@ -8,6 +8,9 @@ body { margin: 0; overflow: hidden; font-family: sans-serif; + background-attachment: fixed; + background-size: cover; + background-position: center center; } #level { @@ -90,7 +93,6 @@ body { right: 0; bottom: 0; overflow: scroll; - background-color: black; } #tileset-picker { @@ -104,7 +106,7 @@ body { cursor: not-allowed; } -#tileset-selector { +#tileset-selector-widget { display: none; position: absolute; top: 0; @@ -112,11 +114,11 @@ body { box-shadow: 20px 20px 20px rgba(0, 0, 0, 0.5); } -#tileset-picker:hover > #tileset-selector { +#tileset-picker:hover > #tileset-selector-widget { display: block; } -#tileset-picker.widget-disabled:hover > #tileset-selector { +#tileset-picker.widget-disabled:hover > #tileset-selector-widget { display: none; } @@ -242,6 +244,54 @@ body { cursor: pointer; } +#tileset-selector { + position: relative; +} + +#tileset-avatar { + width: 96px; + height: 96px; + background-size: auto 100%; + cursor: pointer; + margin-bottom: 20px; +} + +#tileset-list { + position: absolute; + top: 20px; + left: 116px; + display: none; + padding: 10px; + background-color: #cccccc; + box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.5); + overflow: hidden; +} + +.tileset { + display: table-row; + cursor: pointer; +} + +.tileset:hover { + background-color: #5555cc; +} + +.tileset-thumbnail { + display: table-cell; + width: 32px; + height: 32px; + background-size: auto 100%; +} +.tileset:hover > .tileset-thumbnail { + opacity: 0.5; +} + +.tileset-title { + display: table-cell; + vertical-align: middle; + padding: 10px; +} + /* tr:hover > td > .selection { opacity: 0.5;