Intelligent graphic sets implemented

tilorswift/js/menu/IntelligentBrushSwitch.js

@@ -0,0 +1,58 @@
+import Widget from "./Widget.js";
+import {Switch} from "./Switch.js";
+
+export class IntelligentBrushSwitch extends Widget
+{
+    constructor(tilesetPicker, brush) {
+        super('Intelligenter Pinsel');
+
+        this.tilesetPicker = tilesetPicker;
+        this.brush = brush;
+
+        this.switch = new Switch();
+        this.switch.onToggle = (status) => {
+            if (this.isActive) {
+                this.setIntelligentBrush(status);
+            }
+        }
+        this.htmlElement.appendChild(this.switch.htmlElement);
+
+        if (tilesetPicker.tileset.hasExtendedTiles()) {
+            this.setIntelligentBrush(true);
+        }
+    }
+
+    switchOn()
+    {
+        if (!this.switch.status) {
+            this.switch.toggle()
+            this.setIntelligentBrush(true);
+        }
+    }
+
+    switchOff()
+    {
+        if (this.switch.status) {
+            this.switch.toggle()
+            this.setIntelligentBrush(false);
+        }
+    }
+
+    setIntelligentBrush(status)
+    {
+        this.brush.isIntelligent = status;
+        this.tilesetPicker.updateExtendedTileVisibility();
+    }
+
+    enable() {
+        super.enable();
+
+        this.switch.enable();
+    }
+
+    disable() {
+        super.disable();
+
+        this.switch.disable();
+    }
+}

tilorswift/js/menu/Switch.js

@@ -0,0 +1,50 @@
+export class Switch
+{
+    constructor(status = false) {
+        this.htmlElement = document.createElement('div');
+        this.htmlElement.classList.add('switch');
+        this.slider = document.createElement('div');
+        this.slider.classList.add('switch-slider');
+        this.htmlElement.appendChild(this.slider);
+        this.status = status;
+        this.isEnabled = true;
+
+        this.updateSlider();
+
+        this.onToggle = () => {}
+
+        this.htmlElement.addEventListener(
+            'click',
+            () => {
+                if (!this.isEnabled) {
+                    return;
+                }
+
+                this.toggle();
+                this.onToggle(this.status);
+            }
+        )
+    }
+
+    toggle()
+    {
+        this.status = !this.status;
+        this.updateSlider();
+    }
+
+    updateSlider()
+    {
+        this.slider.classList.add(this.status ? 'switch-slider-on' : 'switch-slider-off');
+        this.slider.classList.remove(this.status ? 'switch-slider-off' : 'switch-slider-on');
+    }
+
+    enable()
+    {
+        this.isEnabled = true;
+    }
+
+    disable()
+    {
+        this.isEnabled = false;
+    }
+}

tilorswift/js/menu/TilesetPickerWidget.js

@@ -24,7 +24,7 @@ export default class TilesetPickerWidget extends Widget
                     this.brush.mode = BrushMode.TERRAIN;
                 }
             }
-        )
+        );
     }
 
     loadTileset()
@@ -61,7 +61,7 @@ export default class TilesetPickerWidget extends Widget
     {
         const htmlElementSelector = document.createElement('div');
         htmlElementSelector.id = 'tileset-selector-widget';
-        htmlElementSelector.style.width = Math.ceil(Math.sqrt(this.tileset.tiles))  * this.tileset.getTileWidth() + 'px';
+        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;
@@ -76,4 +76,17 @@ export default class TilesetPickerWidget extends Widget
     {
         return this.htmlElement;
     }
+
+    updateExtendedTileVisibility()
+    {
+        const firstExtendedTileIndex = this.tileset.tiles - (this.tileset.tiles - this.tileset.primaryTiles);
+
+        for (const index of this.htmlElementSelector.childNodes.keys()) {
+            if (index >= firstExtendedTileIndex) {
+                this.htmlElementSelector.childNodes.item(index).style.display = this.brush.isIntelligent
+                    ? 'none'
+                    : 'inline-flex';
+            }
+        }
+    }
 }