Startpoint widget implemented

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

tilorswift/graphics/entrance-point.svg

@@ -0,0 +1,66 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="49.793079mm"
+   height="55.887653mm"
+   viewBox="0 0 49.793079 55.887653"
+   version="1.1"
+   id="svg2331"
+   inkscape:version="0.92.4 5da689c313, 2019-01-14"
+   sodipodi:docname="entrance-point.svg">
+  <defs
+     id="defs2325" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="0.7"
+     inkscape:cx="205.52572"
+     inkscape:cy="-77.242676"
+     inkscape:document-units="mm"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     fit-margin-top="0"
+     fit-margin-left="0"
+     fit-margin-right="0"
+     fit-margin-bottom="0"
+     inkscape:window-width="1827"
+     inkscape:window-height="1025"
+     inkscape:window-x="93"
+     inkscape:window-y="27"
+     inkscape:window-maximized="1" />
+  <metadata
+     id="metadata2328">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Ebene 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(155.6763,-12.032363)">
+    <path
+       style="fill:#0cff00;fill-opacity:1;stroke:#000000;stroke-width:0.95297039;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       d="m -137.0313,18.556468 v 31.454437 h -13.9483 l 20.47716,16.196275 0.0184,-0.483809 0.0177,0.483809 20.47716,-16.196275 h -13.94823 V 18.556468 h -4.78389 -3.52553 z"
+       id="path2298"
+       inkscape:connector-curvature="0" />
+  </g>
+</svg>

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,6 +53,7 @@ image.onload = function () {
     window.addEventListener(
         TilorswiftEvent.FIELD_CLICKED,
         (event) => {
+            if (brush.mode === BrushMode.TERRAIN && !event.getField().isEntrancePoint) {
                 switch (event.button) {
                     case 0:
                         event.getField().setIndex(terrain.brushTileIndex);
@@ -53,6 +62,14 @@ image.onload = function () {
                         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();
+                }
+            }
         }
     );
 

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