Working animations

ts/grid.ts

@@ -1,4 +1,5 @@
 import { Layer } from './layer.js';
+import { Tile } from './tile.js';
 import { TileFactory } from './tile_factory.js';
 
 export class Grid {
@@ -49,12 +50,13 @@ export class Grid {
     }
   }
 
-  add_tile(layer: string, tile_factory: TileFactory, x: number, y: number) {
-    const elem = this.#layers.get(layer)!.add_tile(tile_factory);
+  add_tile(layer: string, tile_factory: TileFactory, x: number, y: number): Tile {
+    const tile = this.#layers.get(layer)!.add_tile(tile_factory);
+    const elem = tile.get_elem();
     // Grids are 1-indexed
     elem.style.gridColumnStart = `${x + 1}`;
     elem.style.gridRowStart = `${y + 1}`;
     this.#prnt.appendChild(elem);
-    return true;
+    return tile;
   }
 }

ts/layer.ts

@@ -1,3 +1,4 @@
+import { Tile } from './tile.js';
 import { TileFactory } from './tile_factory.js';
 
 export class Layer {
@@ -12,9 +13,9 @@ export class Layer {
     this.#tileset = tileset;
   }
 
-  add_tile(tile_factory: TileFactory): HTMLElement {
-    const elem = tile_factory.build(this.#tileset).get_elem();
-    elem.style.zIndex = `${this.#level}`;
-    return elem;
+  add_tile(tile_factory: TileFactory): Tile {
+    const tile = tile_factory.build(this.#tileset);
+    tile.get_elem().style.zIndex = `${this.#level}`;
+    return tile;
   }
 }

ts/layered_tile.ts

@@ -1,23 +1,32 @@
 import { Tile } from './tile.js';
 
 export class LayeredTile extends Tile {
-  elem: HTMLElement;
+  tiles: Tile[];
 
   constructor(width: number, height: number, tiles: Tile[]) {
     super(width, height);
+    this.tiles = [];
 
     this.elem.style.position = 'relative';
 
     for (let i = 0; i < tiles.length; i++) {
       const tile = tiles[i];
-      const sub = tile.get_elem();
-      this.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}`;
+      this.tiles.push(tile);
+
+      const child = tile.get_elem();
+      this.elem.appendChild(child);
+      child.style.width = '100%';
+      child.style.height = '100%';
+      child.style.position = 'absolute';
+      child.style.top = '0';
+      child.style.left = '0';
+      child.style.zIndex = `${i}`;
+    }
+  }
+
+  play(name: string): void {
+    for (const tile of this.tiles) {
+      tile.play(name);
     }
   }
 }

ts/simple_tile.ts

@@ -11,5 +11,12 @@ export class SimpleTile extends Tile {
 
     this.animations = animations;
   }
+
+  play(name: string): void {
+    const animation = this.animations.get(name);
+    if (animation) {
+      this.elem.animate(...animation);
+    }
+  }
 }
 

ts/tile.ts

@@ -10,4 +10,6 @@ export abstract class Tile {
   get_elem(): HTMLElement {
     return this.elem;
   }
+
+  abstract play(name: string): void;
 }

ts/tower.ts

@@ -81,7 +81,8 @@ export function main() {
   grid.add_tile('bridge', tiles.BRIDGE_LR, 46, 18);
   grid.add_tile('bridge', tiles.BRIDGE_LR, 46, 10);
 
-  grid.add_tile('tower', tiles.TOWER_FIREBALL1, 30, 18);
+  const tower = grid.add_tile('tower', tiles.TOWER_FIREBALL1, 30, 18);
+  setInterval(() => tower.play('fire'), 3250);
 };
 
 main();