SequenceTile{Factory}

ts/sequence_tile.ts

@@ -0,0 +1,52 @@
+import { Tile } from './tile.js';
+
+export class SequenceTile extends Tile {
+  constructor(width: number, height: number, tiles: Tile[], delay: number, repeat: boolean) {
+    super(width, height);
+
+    this.elem.style.position = 'relative';
+
+    const tile_chunk = 1 / tiles.length;
+    let animation = null;
+
+    for (let i = 0; i < tiles.length; i++) {
+      const tile = tiles[i];
+
+      this.elem.appendChild(tile.elem);
+      tile.elem.style.width = '100%';
+      tile.elem.style.height = '100%';
+      tile.elem.style.position = 'absolute';
+      tile.elem.style.top = '0';
+      tile.elem.style.left = '0';
+      tile.elem.style.zIndex = `${i}`;
+      tile.elem.style.opacity = '0.0';
+
+      animation = tile.elem.animate(
+        [
+          {
+            'offset': i * tile_chunk,
+            'easing': 'step-start',
+            'opacity': '0.0',
+          },
+          {
+            'offset': (i + 1) * tile_chunk,
+            'easing': 'step-start',
+            'opacity': '1.0',
+          },
+        ],
+        {
+          'duration': delay * (tiles.length + 1),
+          'iterations': repeat ? Infinity : 1,
+        },
+      );
+    }
+
+    if (!repeat) {
+      animation!.finished.then(() => this.elem.remove());
+    }
+  }
+
+  play(_: string): Animation | undefined {
+    return undefined;
+  }
+}

ts/sequence_tile_factory.ts

@@ -0,0 +1,33 @@
+import { SequenceTile } from './sequence_tile.js';
+import { TileFactory } from './tile_factory.js';
+
+export class SequenceTileFactory extends TileFactory {
+  tile_factories: TileFactory[];
+  delay: number;
+  repeat: boolean;
+
+  constructor(tile_factories: TileFactory[], delay: number, repeat: boolean) {
+    super(
+      tile_factories[0].layer_name,
+      tile_factories[0].width,
+      tile_factories[0].height,
+    );
+    this.tile_factories = tile_factories;
+    this.delay = delay;
+    this.repeat = repeat;
+  }
+
+  build(tileset: string): SequenceTile {
+    const tiles = [];
+
+    for (const tile_factory of this.tile_factories) {
+      tiles.push(tile_factory.build(tileset));
+    }
+
+    return new SequenceTile(this.width, this.height, tiles, this.delay, this.repeat);
+  }
+
+  copy(): SequenceTileFactory {
+    return new SequenceTileFactory(this.tile_factories, this.delay, this.repeat);
+  }
+}

ts/tiles.ts

@@ -1,4 +1,5 @@
 import { LayeredTileFactory } from './layered_tile_factory.js';
+import { SequenceTileFactory } from './sequence_tile_factory.js';
 import { SimpleTileFactory } from './simple_tile_factory.js';
 
 // Straig
@@ -75,3 +76,14 @@ export const TOWER_FIREBALL1 = new LayeredTileFactory([
 ]);
 
 export const FIREBALL = new SimpleTileFactory('projectile', 2, 2, 'fireball');
+
+export const FIREBALL_IMPACT = new SequenceTileFactory([
+  new SimpleTileFactory('surface', 4, 4, 'fireball-impact1'),
+  new SimpleTileFactory('surface', 4, 4, 'fireball-impact2'),
+  new SimpleTileFactory('surface', 4, 4, 'fireball-impact3'),
+  new SimpleTileFactory('surface', 4, 4, 'fireball-impact4'),
+  new SimpleTileFactory('surface', 4, 4, 'fireball-impact5'),
+  new SimpleTileFactory('surface', 4, 4, 'fireball-impact6'),
+  new SimpleTileFactory('surface', 4, 4, 'fireball-impact7'),
+  new SimpleTileFactory('surface', 4, 4, 'fireball-impact8'),
+], 100, false);

ts/tower.ts

@@ -91,6 +91,8 @@ export function main() {
     tower.play('fire');
     grid.add_tile(new ProjectileTileFactory(tiles.FIREBALL, rand(-20, 20), rand(-10, 20), 5, 1.5, 5), 31, 27);
   }, 3250);
+
+  grid.add_tile(tiles.FIREBALL_IMPACT, 15, 15);
 };
 
 main();