Widgets implemented.

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