Startpoint widget implemented

tilorswift/js/Brush.js

@@ -0,0 +1,9 @@
+import BrushMode from "./BrushMode.js";
+
+export default class Brush
+{
+    constructor()
+    {
+        this.mode = BrushMode.TERRAIN;
+    }
+}

tilorswift/js/BrushMode.js

@@ -0,0 +1,7 @@
+const BrushMode = {
+    TERRAIN: 1,
+    ENTRANCE: 2,
+    EXIT: 3,
+};
+
+export default BrushMode;

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;

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);

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) {

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;
+    }
+}

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;
                 }
             }
         )

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();
+            }
+        );
+    }
 }

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();
+                }
             }
         }
     );