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

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;
}
}