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