mr-crocs-adventures/tilorswift/js/menu/TilesetPickerWidget.js

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, brush)
    {
        super('Terrain');
        this.tileset = tileset;
        this.brush = brush;
        this.htmlElement = this.createElementPicker();
        this.htmlElementSelector = this.createElementSelector();
        this.htmlElement.appendChild(this.htmlElementSelector);

        this.loadTileset();

        window.addEventListener(
            TilorswiftEvent.BUTTON_TILE_CLICKED,
            (event) => {
                if (this.isActive) {
                    this.setTile(event.button.index);
                    this.brush.mode = BrushMode.TERRAIN;
                }
            }
        )
    }

    loadTileset()
    {
        for (let t = 0; t < this.tileset.tiles; t++) {
            const button = new ButtonTile(this.tileset, t);
            this.htmlElementSelector.appendChild(button.getElement());
        }

        this.htmlElement.style.backgroundImage = 'url("' + this.tileset.image.src + '")';
        this.htmlElement.style.backgroundSize = 'auto ' + this.tileset.getTileWidth() + 'px';
    }

    reloadTileset(tileset)
    {
        this.tileset = tileset;
        this.htmlElementSelector.innerHTML = '';
        this.htmlElementSelector.style.width = Math.ceil(Math.sqrt(this.tileset.tiles))  * this.tileset.getTileWidth() + 'px';
        this.loadTileset();
    }

    createElementPicker()
    {
        const 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';

        return htmlElement;
    }

    createElementSelector()
    {
        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.left = String(this.tileset.getTileWidth() + 1) + 'px';

        return htmlElementSelector;
    }

    setTile(index)
    {
        this.htmlElement.style.backgroundPosition = -this.tileset.getTileWidth() * index + 'px ' + this.tileset.getTileHeight() + 'px';
    }

    getElement()
    {
        return this.htmlElement;
    }
}