80 lines
2.6 KiB
JavaScript
80 lines
2.6 KiB
JavaScript
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++) {
|
|
let 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()
|
|
{
|
|
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';
|
|
|
|
return htmlElement;
|
|
}
|
|
|
|
createElementSelector()
|
|
{
|
|
let 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)
|
|
{
|
|
let position = -this.tileset.getTileWidth() * index + 'px ' + this.tileset.getTileHeight() + 'px';
|
|
this.htmlElement.style.backgroundPosition = position;
|
|
}
|
|
|
|
getElement()
|
|
{
|
|
return this.htmlElement;
|
|
}
|
|
} |