43 lines
1.2 KiB
TypeScript
43 lines
1.2 KiB
TypeScript
import { AnimateDetail, TileFactory } from './tile_factory.js';
|
|
|
|
export class LayeredTileFactory extends TileFactory {
|
|
tiles: TileFactory[];
|
|
|
|
constructor(tiles: TileFactory[]) {
|
|
super('', tiles[0].width, tiles[0].height);
|
|
this.tiles = tiles;
|
|
}
|
|
|
|
get_elem(tileset: string): HTMLElement {
|
|
const elem = document.createElement('div');
|
|
elem.style.gridColumnEnd = `span ${this.width}`;
|
|
elem.style.gridRowEnd = `span ${this.height}`;
|
|
elem.style.position = 'relative';
|
|
|
|
for (let i = 0; i < this.tiles.length; i++) {
|
|
const tile = this.tiles[i];
|
|
const sub = tile.get_elem(tileset);
|
|
elem.appendChild(sub);
|
|
sub.style.width = '100%';
|
|
sub.style.height = '100%';
|
|
sub.style.position = 'absolute';
|
|
sub.style.top = '0';
|
|
sub.style.left = '0';
|
|
sub.style.zIndex = `${i}`;
|
|
}
|
|
|
|
elem.addEventListener('animate', (e: CustomEvent<AnimateDetail>) => {
|
|
for (const sub of elem.children) {
|
|
sub.dispatchEvent(new CustomEvent('animate', {'detail': e.detail}));
|
|
}
|
|
});
|
|
|
|
// XXX removeme
|
|
setInterval(() => {
|
|
elem.dispatchEvent(new CustomEvent('animate', {'detail': {'name': 'fire'}}));
|
|
}, 3250);
|
|
|
|
return elem;
|
|
}
|
|
}
|