Hacky projectile system

ts/layered_tile.ts

@@ -23,9 +23,11 @@ export class LayeredTile extends Tile {
     }
   }
 
-  play(name: string): void {
+  play(name: string): Animation | undefined {
+    let ret = undefined;
     for (const tile of this.tiles) {
-      tile.play(name);
+      ret = tile.play(name) || ret;
     }
+    return ret;
   }
 }

ts/layered_tile_factory.ts

@@ -22,4 +22,8 @@ export class LayeredTileFactory extends TileFactory {
 
     return new LayeredTile(this.width, this.height, tiles);
   }
+
+  copy(): LayeredTileFactory {
+    return new LayeredTileFactory(this.tile_factories);
+  }
 }

ts/projectile.ts

@@ -0,0 +1,54 @@
+import { LayeredTileFactory } from './layered_tile_factory.js';
+import { SimpleTileFactory } from './simple_tile_factory.js';
+import { TileFactory } from './tile_factory.js';
+
+export function projectile(simple_tile_factory: SimpleTileFactory): TileFactory {
+  const copy = simple_tile_factory.copy();
+
+  copy.add_animation(
+    'launch-x',
+    [
+      {
+        'offset': 0.0,
+        'easing': 'linear',
+        'left': '0',
+        'transform': 'rotate(0)',
+      },
+      {
+        'offset': 1.0,
+        'left': '1000%',
+        'transform': 'rotate(720deg)',
+      },
+    ],
+    {
+      'duration': 1500,
+      'iterations': 1,
+    },
+  );
+
+  copy.add_animation(
+    'launch-y',
+    [
+      {
+        'offset': 0.0,
+        'easing': 'cubic-bezier(0.33, 0.66, 0.66, 1.00)',
+        'top': '0',
+      },
+      {
+        'offset': 0.50,
+        'easing': 'cubic-bezier(0.33, 0.00, 0.66, 0.33)',
+        'top': '-500%',
+      },
+      {
+        'offset': 1.0,
+        'top': '0',
+      },
+    ],
+    {
+      'duration': 1500,
+      'iterations': 1,
+    },
+  );
+
+  return new LayeredTileFactory([copy]);
+}

ts/simple_tile.ts

@@ -12,10 +12,12 @@ export class SimpleTile extends Tile {
     this.animations = animations;
   }
 
-  play(name: string): void {
+  play(name: string): Animation | undefined {
     const animation = this.animations.get(name);
     if (animation) {
-      this.elem.animate(...animation);
+      return this.elem.animate(...animation);
+    } else {
+      return undefined;
     }
   }
 }

ts/simple_tile_factory.ts

@@ -23,6 +23,14 @@ export class SimpleTileFactory extends TileFactory {
       this.animations,
     );
   }
+
+  copy(): SimpleTileFactory {
+    const stf = new SimpleTileFactory(this.layer_name, this.width, this.height, this.name);
+    for (const [name, [keyframes, options]] of this.animations) {
+      stf.add_animation(name, keyframes, options);
+    }
+    return stf;
+  }
 }
 
 /*

ts/tile.ts

@@ -7,5 +7,9 @@ export abstract class Tile {
     this.elem.style.gridRowEnd = `span ${height}`;
   }
 
-  abstract play(name: string): void;
+  abstract play(name: string): Animation | undefined;
+
+  remove(): void {
+    this.elem.remove();
+  }
 }

ts/tile_factory.ts

@@ -12,4 +12,6 @@ export abstract class TileFactory {
   }
 
   abstract build(tileset: string): Tile;
+
+  abstract copy(): TileFactory;
 }

ts/tiles.ts

@@ -74,73 +74,4 @@ export const TOWER_FIREBALL1 = new LayeredTileFactory([
   tower_fireball1_front,
 ]);
 
-/*
-class Fireball extends SimpleTileFactory {
-  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';
-
-    const base = document.createElement('div');
-    elem.appendChild(base);
-    base.style.width = '100%';
-    base.style.height = '100%';
-    base.style.position = 'absolute';
-    base.style.top = '0';
-    base.style.left = '0';
-    base.style.backgroundImage = `url("images/${tileset}/${this.name}.svg")`;
-    base.style.backgroundSize = 'cover';
-    base.style.visibility = 'hidden';
-
-    setInterval(() => {
-      base.animate([
-        {
-          'offset': 0.0,
-          'easing': 'cubic-bezier(0.33, 0.66, 0.66, 1.00)',
-
-          'top': '0',
-        },
-        {
-          'offset': 0.50,
-          'easing': 'cubic-bezier(0.33, 0.00, 0.66, 0.33)',
-
-          'top': '-500%',
-        },
-        {
-          'offset': 1.0,
-
-          'top': '0',
-        },
-      ], {
-        'duration': 1500,
-        'iterations': 1,
-      });
-
-      base.animate([
-        {
-          'offset': 0.0,
-          'easing': 'linear',
-
-          'visibility': 'visible',
-          'left': '0',
-          'transform': 'rotate(0)',
-        },
-        {
-          'offset': 1.0,
-
-          'visibility': 'hidden',
-          'left': '1000%',
-          'transform': 'rotate(720deg)',
-        },
-      ], {
-        'duration': 1500,
-        'iterations': 1,
-      });
-    }, 3250);
-
-    return elem;
-  }
-}
-export const FIREBALL = new Fireball('fireball', 2, 2);
-*/
+export const FIREBALL = new SimpleTileFactory('projectile', 2, 2, 'fireball');

ts/tower.ts

@@ -1,4 +1,5 @@
 import { Grid } from './grid.js';
+import { projectile } from './projectile.js'
 import * as tiles from './tiles.js';
 
 export function main() {
@@ -24,7 +25,7 @@ export function main() {
   const grid = new Grid(real);
   grid.set_size(70, 56);
   grid.set_tileset('tropical');
-  grid.set_layers(['road', 'water', 'bridge', 'surface']);
+  grid.set_layers(['road', 'water', 'bridge', 'surface', 'projectile']);
 
   grid.add_tile(tiles.ROAD_TB, 20, 46);
   grid.add_tile(tiles.ROAD_BL, 18, 40);
@@ -82,7 +83,12 @@ export function main() {
   grid.add_tile(tiles.BRIDGE_LR, 46, 10);
 
   const tower = grid.add_tile(tiles.TOWER_FIREBALL1, 30, 18);
-  setInterval(() => tower.play('fire'), 3250);
+  setInterval(() => {
+    tower.play('fire');
+    const fireball = grid.add_tile(projectile(tiles.FIREBALL), 31, 17);
+    fireball.play('launch-x')!.finished.then(() => fireball.remove());
+    fireball.play('launch-y');
+  }, 3250);
 };
 
 main();