68 lines
2.2 KiB
JavaScript
68 lines
2.2 KiB
JavaScript
|
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;
|
||
|
|
}
|
||
|
|
}
|