Widgets implemented.

tilorswift/js/Field.js

@@ -15,7 +15,6 @@ export default class Field
     {
         this.htmlElement.addEventListener(
             'mousedown', (event) => {
-                console.log(event);
                 window.dispatchEvent(new TilorswiftFieldClickedEvent(this, event.button));
             }
         );

tilorswift/js/Mouse.js

@@ -18,8 +18,6 @@ export default class Mouse
         window.addEventListener(
             'mouseup',
             (event) => {
-                console.log(this);
-
                 switch (event.button) {
                     case 0:
                         this.isPressedLeft = false;
@@ -54,7 +52,6 @@ export default class Mouse
                 switch (event.button) {
                     case 0:
                         this.isPressedLeft = true;
-                        console.log(this);
                         break;
                     case 1:
                         this.isPressedMiddle = true;

tilorswift/js/Tilorswift.js

@@ -29,10 +29,16 @@ export default class Tilorswift
 
     static saveTerrainToFile(terrain)
     {
+        let filename = prompt('Dateiname', 'terrain.json');
+
+        if (filename === null) {
+            return;
+        }
+
         let json = Tilorswift.getTerrainAsJson(terrain);
         let download = document.createElement('a');
 
-        download.setAttribute('download', 'terrain.json');
+        download.setAttribute('download', filename);
         download.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(json));
         download.click();
         download.remove();

tilorswift/js/menu/TilesetPickerWidget.js

@@ -0,0 +1,68 @@
+import ButtonTile from "../ButtonTile.js";
+import TilorswiftEvent from "../events/TilorswiftEvent.js";
+import Widget from "./Widget.js";
+
+export default class TilesetPickerWidget extends Widget
+{
+    constructor(tileset)
+    {
+        super('Terrain');
+        this.tileset = tileset;
+        this.htmlElement = this.createElementPicker();
+        this.htmlElementSelector = this.createElementSelector();
+        this.loadTileset();
+
+        window.addEventListener(
+            TilorswiftEvent.BUTTON_TILE_CLICKED,
+            (event) => {
+                if (this.isActive) {
+                    this.setTile(event.button.index);
+                }
+            }
+        )
+    }
+
+    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());
+        }
+    }
+
+    createElementPicker()
+    {
+        let htmlElement = document.createElement('div');
+        htmlElement.id = 'tileset-picker';
+        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;
+    }
+
+    createElementSelector()
+    {
+        let htmlElementSelector = document.createElement('div');
+        htmlElementSelector.id = 'tileset-selector';
+        htmlElementSelector.style.width = Math.ceil(Math.sqrt(this.tileset.tiles))  * this.tileset.getTileWidth() + 'px';
+        htmlElementSelector.style.left = String(this.tileset.getTileWidth() + 1) + 'px';
+
+        return htmlElementSelector;
+    }
+
+    setTile(index)
+    {
+        let position = -this.tileset.getTileWidth() * index + 'px ' + this.tileset.getTileHeight() + 'px';
+        this.htmlElement.style.backgroundPosition = position;
+    }
+
+    getElement()
+    {
+        return this.htmlElement;
+    }
+}

tilorswift/js/menu/Widget.js

@@ -0,0 +1,35 @@
+export default class Widget
+{
+    constructor(title)
+    {
+        this.title = title;
+        this.htmlElement = document.createElement('div');
+        this.isActive = true;
+    }
+
+    getTitle()
+    {
+        let htmlElementTitle = document.createElement('div');
+        htmlElementTitle.classList.add('widget-title');
+        htmlElementTitle.innerText = this.title;
+
+        return htmlElementTitle;
+    }
+
+    enable()
+    {
+        this.isActive = true;
+        this.htmlElement.classList.remove('widget-disabled');
+    }
+
+    disable()
+    {
+        this.isActive = false;
+        this.htmlElement.classList.add('widget-disabled');
+    }
+
+    getElement()
+    {
+        return this.htmlElement;
+    }
+}

tilorswift/js/menu/WidgetBar.js

@@ -0,0 +1,32 @@
+export default class WidgetBar
+{
+    constructor(id)
+    {
+        this.id = id;
+        this.widgets = [];
+    }
+
+    addWidget(widget)
+    {
+        this.widgets.push(widget);
+    }
+
+    getElement()
+    {
+        let htmlElement = document.createElement('div');
+        htmlElement.id = this.id;
+
+        this.widgets.forEach(
+            (widget) => {
+                let container = document.createElement('div');
+
+                container.appendChild(widget.getTitle());
+                container.appendChild(widget.getElement());
+
+                htmlElement.appendChild(container);
+            }
+        );
+
+        return htmlElement;
+    }
+}

tilorswift/js/module.js

@@ -3,32 +3,31 @@ import FileLoader from "../../js/FileLoader.js";
 import TilorswiftEvent from "./events/TilorswiftEvent.js";
 import Mouse from "./Mouse.js";
 import Tileset from "./Tileset.js";
-import ButtonTile from "./ButtonTile.js";
 import Tilorswift from "./Tilorswift.js";
 import TilorswiftSavedEvent from "./events/TilorswiftSavedEvent.js";
 import MainMenu from "./menu/MainMenu.js";
 import MenuGroup from "./menu/MenuGroup.js";
 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 BrushMode from "./BrushMode.js";
 
 let loader = new FileLoader('../levels/level.json');
-
 let image = new Image();
 image.src = '../graphics/tileset-landscape01.jpg';
+
 image.onload = function () {
     let terrain = Terrain.createFromJson(loader.getContent());
-
     let map = document.getElementById('map');
     map.appendChild(terrain.getElement());
 
-    let menuTileset = document.getElementById('tileset');
-
     let tileset = new Tileset(image, 8, 3);
+    let tilesetPicker = new TilesetPickerWidget(tileset);
 
-    for (let t = 0; t < tileset.tiles; t++) {
-        let button = new ButtonTile(tileset, t);
-        menuTileset.appendChild(button.getElement());
-    }
+    let widgetBar = new WidgetBar('widget-bar');
+    widgetBar.addWidget(tilesetPicker);
+    document.body.appendChild(widgetBar.getElement());
 
     let mouse = new Mouse();
 
@@ -46,7 +45,6 @@ image.onload = function () {
     window.addEventListener(
         TilorswiftEvent.FIELD_CLICKED,
         (event) => {
-            console.log(event);
             switch (event.button) {
                 case 0:
                     event.getField().setIndex(terrain.brushTileIndex);
@@ -76,6 +74,7 @@ image.onload = function () {
         }
     );
 
+    /* Prevent Firefox's default drag and drop for images */
     document.addEventListener(
         'dragstart',
         function (event) {
@@ -83,15 +82,6 @@ image.onload = function () {
         }
     );
 
-    window.addEventListener(
-        'keydown', function (event) {
-            if (event.code === 'KeyS') {
-                Tilorswift.saveTerrainToFile(terrain);
-                window.dispatchEvent(new TilorswiftSavedEvent());
-            }
-        }
-    );
-
     window.addEventListener(
         TilorswiftEvent.MENU_SAVE_CLICKED,
         function () {