Gisela and target point added.

tilorswift/js/Field.js

@@ -8,6 +8,7 @@ export default class Field
         this.tileset = tileset;
         this.index = index;
         this.isEntrancePoint = false;
+        this.isTargetPoint = false;
         this.initHtml();
         this.initEventListeners();
     }
@@ -75,6 +76,17 @@ export default class Field
         }
     }
 
+    setTargetPoint(bool)
+    {
+        this.isTargetPoint = bool;
+
+        if (this.isTargetPoint) {
+            this.htmlElement.classList.add('target');
+        } else {
+            this.htmlElement.classList.remove('target');
+        }
+    }
+
     getElement()
     {
         return this.htmlElement;

tilorswift/js/Terrain.js

@@ -12,6 +12,8 @@ export default class Terrain
         this.tilesY = tilesY;
         this.entranceTileX = undefined;
         this.entranceTileY = undefined;
+        this.targetTileX = undefined;
+        this.targetTileY = undefined;
         this.backgroundColor = backgroundColor;
         this.htmlElement = document.createElement('table');
         this.brushTileIndex = 0;
@@ -134,6 +136,20 @@ export default class Terrain
         }
     }
 
+    setTargetPoint(tileX, tileY)
+    {
+        if (this.fields[tileY][tileX].index === -1) {
+            if (this.targetTileX !== undefined && this.targetTileY !== undefined) {
+                this.fields[this.targetTileY][this.targetTileX].setTargetPoint(false);
+            }
+
+            this.targetTileX = tileX;
+            this.targetTileY = tileY;
+
+            this.fields[tileY][tileX].setTargetPoint(true);
+        }
+    }
+
     getFieldCoordinates(field)
     {
         for (let y = 0; y < this.fields.length; y++) {
@@ -152,6 +168,11 @@ export default class Terrain
         return this.entranceTileX !== undefined && this.entranceTileY !== undefined;
     }
 
+    hasTargetPoint()
+    {
+        return this.targetTileX !== undefined && this.targetTileY !== undefined;
+    }
+
     static createFromJson(terrainData)
     {
         let imageTileset = new Image();
@@ -166,6 +187,8 @@ export default class Terrain
 
                 if (x === terrainData.startX && y === terrainData.startY) {
                     terrain.setEntrancePoint(x, y);
+                } else if (x === terrainData.targetX && y === terrainData.targetY) {
+                    terrain.setTargetPoint(x, y);
                 }
             }
         }

tilorswift/js/Tilorswift.js

@@ -22,6 +22,8 @@ export default class Tilorswift
             columns: terrain.tilesX,
             startX: terrain.entranceTileX,
             startY: terrain.entranceTileY,
+            targetX: terrain.targetTileX,
+            targetY: terrain.targetTileY,
             backgroundColor: terrain.backgroundColor,
             matrix: matrix,
         };
@@ -36,6 +38,11 @@ export default class Tilorswift
             return false;
         }
 
+        if (!terrain.hasTargetPoint()) {
+            alert('Es muss ein Zielpunkt definiert sein!');
+            return false;
+        }
+
         let filename = prompt('Dateiname', 'terrain.json');
 
         if (filename === null) {

tilorswift/js/menu/TargetPointWidget.js

@@ -0,0 +1,28 @@
+import Widget from "./Widget.js";
+import BrushMode from "../BrushMode.js";
+
+export default class TargetPointWidget extends Widget
+{
+    constructor(widgetBar, brush) {
+        super('Zielpunkt');
+        this.widgetBar = widgetBar;
+        this.brush = brush;
+        this.htmlElement = this.createElement();
+        this.htmlElement.addEventListener(
+            'click',
+            () => {
+                this.widgetBar.disableWidgets();
+                this.enable();
+                this.brush.mode = BrushMode.EXIT;
+            }
+        );
+    }
+
+    createElement()
+    {
+        let htmlElement = document.createElement('div');
+        htmlElement.id = 'target-picker';
+
+        return htmlElement;
+    }
+}

tilorswift/js/module.js

@@ -20,8 +20,9 @@ import TilorswiftAddRowsClickedEvent from "./events/TilorswiftAddRowsClickedEven
 import TilorswiftAddColumnsClickedEvent from "./events/TilorswiftAddColumnsClickedEvent.js";
 import TilorswiftMenuNewTerrainClickedEvent from "./events/TilorswiftMenuNewTerrainClickedEvent.js";
 import DialogNewTerrain from "./dialog/DialogNewTerrain.js";
+import TargetPointWidget from "./menu/TargetPointWidget.js";
 
-let loader = new FileLoader('../levels/level.json');
+let loader = new FileLoader('../levels/level01.json');
 let terrainData = JSON.parse(loader.getContent());
 let image = new Image();
 image.src = terrainData.tileset;
@@ -41,6 +42,9 @@ image.onload = function () {
     let entrancePicker = new EntrancePointWidget(widgetBar, brush);
     widgetBar.addWidget(entrancePicker);
 
+    let targetPicker = new TargetPointWidget(widgetBar, brush);
+    widgetBar.addWidget(targetPicker);
+
     document.body.appendChild(widgetBar.getElement());
 
     let mouse = new Mouse();
@@ -77,6 +81,13 @@ image.onload = function () {
                     brush.mode = BrushMode.TERRAIN;
                     widgetBar.enableWidgets();
                 }
+            }  else if (brush.mode === BrushMode.EXIT) {
+                if (event.getField().index === -1) {
+                    let coordinates = terrain.getFieldCoordinates(event.getField());
+                    terrain.setTargetPoint(coordinates.x, coordinates.y);
+                    brush.mode = BrushMode.TERRAIN;
+                    widgetBar.enableWidgets();
+                }
             }
         }
     );

tilorswift/style.css

@@ -120,7 +120,7 @@ body {
     display: none;
 }
 
-#entrance-picker {
+#entrance-picker, #target-picker {
     width: 96px;
     height: 96px;
     border: 1px solid black;
@@ -131,6 +131,10 @@ body {
     cursor: pointer;
 }
 
+#target-picker {
+    background-image: url("graphics/target-point.svg");
+}
+
 #widget-insert-rows {
     position: relative;
     width: 96px;
@@ -159,11 +163,16 @@ body {
     cursor: pointer;
     display: inline-flex;
 }
-.entrance {
+.entrance, .target {
     background-image: url("graphics/entrance-point.svg") !important;
     background-size: contain !important;
     background-position: center bottom !important;
 }
+
+.target {
+    background-image: url("graphics/target-point.svg") !important;
+}
+
 .button-tile {
     margin: 2px;
 }