import Widget from "./Widget.js"; import BrushMode from "../BrushMode.js"; import TilorswiftEvent from "../events/TilorswiftEvent.js"; import ButtonBackgroundTile from "../ButtonBackgroundTile.js"; import Tileset from "../Tileset.js"; export default class BackgroundPickerWidget extends Widget { constructor(tileset, brush) { super('Hintergrund'); this.tileset = tileset; this.brush = brush; this.htmlElement = this.createElementPicker(); this.htmlElementSelector = this.createElementSelector(); this.htmlElement.appendChild(this.htmlElementSelector); this.loadTileset(); window.addEventListener( TilorswiftEvent.BACKGROUND_BUTTON_TILE_CLICKED, (event) => { if (this.isActive) { this.setTile(event.button.index); this.brush.mode = BrushMode.BACKGROUND; } } ); } loadTileset() { if (this.tileset.background === null) { this.htmlElement.style.backgroundImage = 'none'; return; } for (let t = -2; t >= -this.tileset.background.tiles - 1; t--) { console.log(t); const button = new ButtonBackgroundTile(this.tileset, t); this.htmlElementSelector.appendChild(button.getElement()); } this.htmlElement.style.backgroundImage = 'url("' + this.tileset.background.image.src + '")'; this.htmlElement.style.backgroundSize = 'auto ' + this.tileset.getTileWidth() + 'px'; } /** * @param {Tileset} tileset */ 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() { const 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() { const 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) { this.htmlElement.style.backgroundPosition = String(-this.tileset.getTileWidth() * index) + 'px ' + String(this.tileset.getTileHeight()) + 'px'; } getElement() { return this.htmlElement; } updateExtendedTileVisibility() { const firstExtendedTileIndex = this.tileset.tiles - (this.tileset.tiles - this.tileset.primaryTiles); for (const index of this.htmlElementSelector.childNodes.keys()) { if (index >= firstExtendedTileIndex) { this.htmlElementSelector.childNodes.item(index).style.display = this.brush.isIntelligent ? 'none' : 'inline-flex'; } } } }