mr-crocs-adventures/tilorswift/js/dialog/Dialog.js

import GraphicSet from "../../../js/GraphicSet.js";
import Setting from "../../../js/Setting.js";
import TilorswiftTilesetSelectedEvent from "../events/TilorswiftTilesetSelectedEvent.js";

export default class Dialog
{
    constructor()
    {
        this.htmlElement = document.createElement('div');
        this.htmlElement.classList.add('dialog');
        this.boxElement = document.createElement('div');
        this.boxElement.classList.add('dialog-box');
        this.htmlElement.appendChild(this.boxElement);
        this.messageElement = document.createElement('div');
        this.messageElement.classList.add('dialog-message');
        this.boxElement.appendChild(this.messageElement);
        this.inputAreaElement = document.createElement('div');
        this.inputAreaElement.classList.add('dialog-input-area');
        this.boxElement.appendChild(this.inputAreaElement);
        this.buttonAreaElement = document.createElement('div');
        this.buttonAreaElement.classList.add('dialog-button-area');
        this.boxElement.appendChild(this.buttonAreaElement);

        document.body.appendChild(this.htmlElement);
    }

    createButton(text)
    {
        let button = document.createElement('span');
        button.classList.add('dialog-button');
        button.innerText = text;
        this.buttonAreaElement.appendChild(button);

        button.addEventListener(
            'click',
            () => {
                this.htmlElement.remove();
            }
        );

        return button;
    }

    createInputNumber(label, value = 0, min = 0, max = 999999, step = 1)
    {
        let htmlElement = document.createElement('div');
        htmlElement.classList.add('dialog-input-area');

        let htmlElementLabel = document.createElement('div');
        htmlElementLabel.classList.add('dialog-label');
        htmlElementLabel.innerText = label;

        let htmlElementInput = document.createElement('input');
        htmlElementInput.classList.add('dialog-input');
        htmlElementInput.type = 'number';
        htmlElementInput.value = value;
        htmlElementInput.max = max;
        htmlElementInput.min = min;
        htmlElementInput.step = step;

        htmlElement.appendChild(htmlElementLabel);
        htmlElement.appendChild(htmlElementInput);

        this.inputAreaElement.appendChild(htmlElement);

        return htmlElementInput;
    }

    createTilesetSelector()
    {
        let htmlElement = document.createElement('div');
        htmlElement.id = 'tileset-selector';

        let htmlElementLabel = document.createElement('div');
        htmlElementLabel.classList.add('dialog-label');
        htmlElementLabel.innerText = 'Terrain';

        let htmlAvatarElement = document.createElement('div');
        htmlAvatarElement.id = 'tileset-avatar';
        htmlAvatarElement.style.backgroundImage = 'url("../' + Setting.TILESET_LOCATION + GraphicSet[0].tileset + '")';

        let htmlListElement = document.createElement('div');
        htmlListElement.id = 'tileset-list';

        htmlElement.appendChild(htmlElementLabel);
        htmlElement.appendChild(htmlAvatarElement);
        htmlElement.appendChild(htmlListElement);

        htmlAvatarElement.addEventListener(
            'click',
            () => {
                htmlListElement.style.display = 'block';
            }
        );

        GraphicSet.forEach(
            (graphicSet, index) => {
                let htmlTilesetElement = document.createElement('div');
                htmlTilesetElement.classList.add('tileset');

                let htmlThumbnail = document.createElement('div');
                htmlThumbnail.classList.add('tileset-thumbnail');

                const image = new Image();
                image.src = '../' + Setting.TILESET_LOCATION + graphicSet.tileset;

                htmlThumbnail.style.backgroundImage = 'url(' + image.src + ')';
                htmlThumbnail.style.backgroundPositionX = -(image.width / graphicSet.tiles) * graphicSet.tilePreview + 'px';
                htmlTilesetElement.appendChild(htmlThumbnail);

                let htmlTitleElement = document.createElement('div');
                htmlTitleElement.classList.add('tileset-title');
                htmlTitleElement.innerText = graphicSet.name;
                htmlTilesetElement.appendChild(htmlTitleElement);

                htmlTilesetElement.addEventListener(
                    'click',
                    () => {
                        htmlListElement.style.display = 'none';
                        htmlAvatarElement.style.backgroundImage = 'url(' + image.src + ')';
                        htmlAvatarElement.style.backgroundPositionX = -96 * graphicSet.tilePreview + 'px';

                        window.dispatchEvent(new TilorswiftTilesetSelectedEvent(index));
                    }
                );

                htmlListElement.appendChild(htmlTilesetElement);
            }
        );

        this.inputAreaElement.appendChild(htmlElement);

        return htmlElement;
    }

    createFileInput(types = [])
    {
        let input = document.createElement('input');
        input.type = 'file';

        if (types.length > 0) {
            for (const t in types) {
                types[t] = '.' + types[t]
            }

            input.accept = types.join(', ');
        }

        this.inputAreaElement.appendChild(input);

        return input;
    }

    setMessage(message)
    {
        this.messageElement.innerText = message;
    }

    close()
    {
        this.htmlElement.remove();
    }
}