From fa648ae73025c4ca0232a99ca24810fa98ff2570 Mon Sep 17 00:00:00 2001 From: Mal Date: Tue, 4 Feb 2020 23:03:33 +0100 Subject: [PATCH] Startpoint widget implemented --- js/module.js | 2 +- tilorswift/graphics/entrance-point.svg | 66 +++++++++++++++++++++++ tilorswift/js/Brush.js | 9 ++++ tilorswift/js/BrushMode.js | 7 +++ tilorswift/js/Field.js | 12 +++++ tilorswift/js/Terrain.js | 34 ++++++++++++ tilorswift/js/Tilorswift.js | 7 +++ tilorswift/js/menu/EntrancePointWidget.js | 28 ++++++++++ tilorswift/js/menu/TilesetPickerWidget.js | 5 +- tilorswift/js/menu/WidgetBar.js | 19 +++++++ tilorswift/js/module.js | 33 +++++++++--- tilorswift/style.css | 21 +++++++- 12 files changed, 231 insertions(+), 12 deletions(-) create mode 100644 tilorswift/graphics/entrance-point.svg create mode 100644 tilorswift/js/Brush.js create mode 100644 tilorswift/js/BrushMode.js create mode 100644 tilorswift/js/menu/EntrancePointWidget.js diff --git a/js/module.js b/js/module.js index 352f073..a6e31a3 100644 --- a/js/module.js +++ b/js/module.js @@ -133,7 +133,7 @@ const FRAME_DURATION = 1000 / FPS; const GAME_SPEED = 1; const GRAVITY = 2; -let levelJson = new FileLoader('levels/test_stairs.json'); +let levelJson = new FileLoader('levels/test_startpoint.json'); const LEVEL = JSON.parse(levelJson.getContent()); diff --git a/tilorswift/graphics/entrance-point.svg b/tilorswift/graphics/entrance-point.svg new file mode 100644 index 0000000..a8918d3 --- /dev/null +++ b/tilorswift/graphics/entrance-point.svg @@ -0,0 +1,66 @@ + + + + + + + + + + image/svg+xml + + + + + + + + + diff --git a/tilorswift/js/Brush.js b/tilorswift/js/Brush.js new file mode 100644 index 0000000..c4cd1b2 --- /dev/null +++ b/tilorswift/js/Brush.js @@ -0,0 +1,9 @@ +import BrushMode from "./BrushMode.js"; + +export default class Brush +{ + constructor() + { + this.mode = BrushMode.TERRAIN; + } +} \ No newline at end of file diff --git a/tilorswift/js/BrushMode.js b/tilorswift/js/BrushMode.js new file mode 100644 index 0000000..527f590 --- /dev/null +++ b/tilorswift/js/BrushMode.js @@ -0,0 +1,7 @@ +const BrushMode = { + TERRAIN: 1, + ENTRANCE: 2, + EXIT: 3, +}; + +export default BrushMode; \ No newline at end of file diff --git a/tilorswift/js/Field.js b/tilorswift/js/Field.js index 2145954..9d94faf 100644 --- a/tilorswift/js/Field.js +++ b/tilorswift/js/Field.js @@ -7,6 +7,7 @@ export default class Field { this.tileset = tileset; this.index = index; + this.isEntrancePoint = false; this.initHtml(); this.initEventListeners(); } @@ -63,6 +64,17 @@ export default class Field this.htmlElement.style.backgroundPositionX = -this.index * this.tileset.getTileWidth() + 'px'; } + setEntrancePoint(bool) + { + this.isEntrancePoint = bool; + + if (this.isEntrancePoint) { + this.htmlElement.classList.add('entrance'); + } else { + this.htmlElement.classList.remove('entrance'); + } + } + getElement() { return this.htmlElement; diff --git a/tilorswift/js/Terrain.js b/tilorswift/js/Terrain.js index fb3f7ee..f37fd40 100644 --- a/tilorswift/js/Terrain.js +++ b/tilorswift/js/Terrain.js @@ -10,6 +10,8 @@ export default class Terrain this.fields = []; this.tilesX = tilesX; this.tilesY = tilesY; + this.entranceTileX = undefined; + this.entranceTileY = undefined; this.backgroundColor = backgroundColor; this.htmlElement = document.createElement('table'); this.brushTileIndex = 0; @@ -62,6 +64,38 @@ export default class Terrain this.fields[y][x].setIndex(index); } + setEntrancePoint(tileX, tileY) + { + if (this.fields[tileY][tileX].index === -1) { + if (this.entranceTileX !== undefined && this.entranceTileY !== undefined) { + this.fields[this.entranceTileY][this.entranceTileX].setEntrancePoint(false); + } + + this.entranceTileX = tileX; + this.entranceTileY = tileY; + + this.fields[tileY][tileX].setEntrancePoint(true); + } + } + + getFieldCoordinates(field) + { + for (let y = 0; y < this.fields.length; y++) { + for (let x = 0; x < this.fields[y].length; x++) { + if (this.fields[y][x] === field) { + return {x: x, y: y}; + } + } + } + + return undefined; + } + + hasEntrancePoint() + { + return this.entranceTileX !== undefined && this.entranceTileY !== undefined; + } + static createFromJson(json) { let terrainData = JSON.parse(json); diff --git a/tilorswift/js/Tilorswift.js b/tilorswift/js/Tilorswift.js index 84d4647..4310722 100644 --- a/tilorswift/js/Tilorswift.js +++ b/tilorswift/js/Tilorswift.js @@ -20,6 +20,8 @@ export default class Tilorswift scale: terrain.tileset.scale, rows: terrain.tilesY, columns: terrain.tilesX, + startX: terrain.entranceTileX, + startY: terrain.entranceTileY, backgroundColor: terrain.backgroundColor, matrix: matrix, }; @@ -29,6 +31,11 @@ export default class Tilorswift static saveTerrainToFile(terrain) { + if (!terrain.hasEntrancePoint()) { + alert('Es muss ein Startpunkt definiert sein!'); + return; + } + let filename = prompt('Dateiname', 'terrain.json'); if (filename === null) { diff --git a/tilorswift/js/menu/EntrancePointWidget.js b/tilorswift/js/menu/EntrancePointWidget.js new file mode 100644 index 0000000..0e12ba3 --- /dev/null +++ b/tilorswift/js/menu/EntrancePointWidget.js @@ -0,0 +1,28 @@ +import Widget from "./Widget.js"; +import BrushMode from "../BrushMode.js"; + +export default class EntrancePointWidget extends Widget +{ + constructor(widgetBar, brush) { + super('Startpunkt'); + this.widgetBar = widgetBar; + this.brush = brush; + this.htmlElement = this.createElement(); + this.htmlElement.addEventListener( + 'click', + () => { + this.widgetBar.disableWidgets(); + this.enable(); + this.brush.mode = BrushMode.ENTRANCE; + } + ) + } + + createElement() + { + let htmlElement = document.createElement('div'); + htmlElement.id = 'entrance-picker'; + + return htmlElement; + } +} \ No newline at end of file diff --git a/tilorswift/js/menu/TilesetPickerWidget.js b/tilorswift/js/menu/TilesetPickerWidget.js index bb5bd65..bc9137c 100644 --- a/tilorswift/js/menu/TilesetPickerWidget.js +++ b/tilorswift/js/menu/TilesetPickerWidget.js @@ -1,13 +1,15 @@ import ButtonTile from "../ButtonTile.js"; import TilorswiftEvent from "../events/TilorswiftEvent.js"; import Widget from "./Widget.js"; +import BrushMode from "../BrushMode.js"; export default class TilesetPickerWidget extends Widget { - constructor(tileset) + constructor(tileset, brush) { super('Terrain'); this.tileset = tileset; + this.brush = brush; this.htmlElement = this.createElementPicker(); this.htmlElementSelector = this.createElementSelector(); this.loadTileset(); @@ -17,6 +19,7 @@ export default class TilesetPickerWidget extends Widget (event) => { if (this.isActive) { this.setTile(event.button.index); + this.brush.mode = BrushMode.TERRAIN; } } ) diff --git a/tilorswift/js/menu/WidgetBar.js b/tilorswift/js/menu/WidgetBar.js index 990886a..b407d0c 100644 --- a/tilorswift/js/menu/WidgetBar.js +++ b/tilorswift/js/menu/WidgetBar.js @@ -19,6 +19,7 @@ export default class WidgetBar this.widgets.forEach( (widget) => { let container = document.createElement('div'); + container.classList.add('widget-container'); container.appendChild(widget.getTitle()); container.appendChild(widget.getElement()); @@ -29,4 +30,22 @@ export default class WidgetBar return htmlElement; } + + enableWidgets() + { + this.widgets.forEach( + (widget) => { + widget.enable(); + } + ); + } + + disableWidgets() + { + this.widgets.forEach( + (widget) => { + widget.disable(); + } + ); + } } \ No newline at end of file diff --git a/tilorswift/js/module.js b/tilorswift/js/module.js index ddb184d..ee87c88 100644 --- a/tilorswift/js/module.js +++ b/tilorswift/js/module.js @@ -11,6 +11,8 @@ import MainMenuEntry from "./menu/MainMenuEntry.js"; import TilorswiftMenuSaveClickedEvent from "./events/TilorswiftMenuSaveClickedEvent.js"; import TilesetPickerWidget from "./menu/TilesetPickerWidget.js"; import WidgetBar from "./menu/WidgetBar.js"; +import EntrancePointWidget from "./menu/EntrancePointWidget.js"; +import Brush from "./Brush.js"; import BrushMode from "./BrushMode.js"; let loader = new FileLoader('../levels/level.json'); @@ -22,11 +24,17 @@ image.onload = function () { let map = document.getElementById('map'); map.appendChild(terrain.getElement()); + let brush = new Brush(); + let tileset = new Tileset(image, 8, 3); - let tilesetPicker = new TilesetPickerWidget(tileset); let widgetBar = new WidgetBar('widget-bar'); + + let tilesetPicker = new TilesetPickerWidget(tileset, brush); widgetBar.addWidget(tilesetPicker); + + let entrancePicker = new EntrancePointWidget(widgetBar, brush); + widgetBar.addWidget(entrancePicker); document.body.appendChild(widgetBar.getElement()); let mouse = new Mouse(); @@ -45,13 +53,22 @@ image.onload = function () { window.addEventListener( TilorswiftEvent.FIELD_CLICKED, (event) => { - switch (event.button) { - case 0: - event.getField().setIndex(terrain.brushTileIndex); - break; - case 2: - event.getField().setIndex(-1); - break; + if (brush.mode === BrushMode.TERRAIN && !event.getField().isEntrancePoint) { + switch (event.button) { + case 0: + event.getField().setIndex(terrain.brushTileIndex); + break; + case 2: + event.getField().setIndex(-1); + break; + } + } else if (brush.mode === BrushMode.ENTRANCE) { + if (event.getField().index === -1) { + let coordinates = terrain.getFieldCoordinates(event.getField()); + terrain.setEntrancePoint(coordinates.x, coordinates.y); + brush.mode = BrushMode.TERRAIN; + widgetBar.enableWidgets(); + } } } ); diff --git a/tilorswift/style.css b/tilorswift/style.css index 67bdc2f..970649b 100644 --- a/tilorswift/style.css +++ b/tilorswift/style.css @@ -65,7 +65,6 @@ body { #widget-bar { position: fixed; - display: flex; flex-flow: wrap row; top: 32px; left: 0; @@ -76,6 +75,10 @@ body { box-shadow: 0 0 20px black; } +.widget-container { + margin-bottom: 20px; +} + .widget-disabled { filter: saturate(0); } @@ -117,6 +120,16 @@ body { display: none; } +#entrance-picker { + width: 96px; + height: 96px; + border: 1px solid black; + background-image: url("graphics/entrance-point.svg"); + background-size: contain; + background-repeat: no-repeat; + background-position: center center; + cursor: pointer; +} .field, .button-tile { border: 0; @@ -126,7 +139,11 @@ body { cursor: pointer; display: inline-flex; } - +.entrance { + background-image: url("graphics/entrance-point.svg") !important; + background-size: contain !important; + background-position: center bottom !important; +} .button-tile { margin: 2px; }