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

134 lines
4.7 KiB
JavaScript

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');
htmlThumbnail.style.backgroundImage = 'url("../' + Setting.TILESET_LOCATION + graphicSet.tileset + '")';
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("../' + Setting.TILESET_LOCATION + GraphicSet[index].tileset + '")';
window.dispatchEvent(new TilorswiftTilesetSelectedEvent(index));
}
);
htmlListElement.appendChild(htmlTilesetElement);
}
);
this.inputAreaElement.appendChild(htmlElement);
return htmlElement;
}
setMessage(message)
{
this.messageElement.innerText = message;
}
}