Tile -> TileFactory

ts/layered_tile_factory.ts

@@ -0,0 +1,42 @@
+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;
+  }
+}