Encapsulate projectile logic

js/projectile_tile_factory.js

@@ -0,0 +1,55 @@
+import { LayeredTileFactory } from './layered_tile_factory.js';
+import { TileFactory } from './tile_factory.js';
+export class ProjectileTileFactory extends TileFactory {
+    constructor(tile_factory) {
+        super(tile_factory.layer_name, tile_factory.width, tile_factory.height);
+        this.source_tile_factory = tile_factory;
+        const copy = 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,
+        });
+        this.tile_factory = new LayeredTileFactory([copy]);
+    }
+    build(tileset) {
+        const tile = this.tile_factory.build(tileset);
+        tile.play('launch-x').finished.then(() => tile.remove());
+        tile.play('launch-y');
+        return tile;
+    }
+    copy() {
+        return new ProjectileTileFactory(this.source_tile_factory);
+    }
+}
+//# sourceMappingURL=projectile_tile_factory.js.map

js/projectile_tile_factory.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"projectile_tile_factory.js","sourceRoot":"","sources":["../ts/projectile_tile_factory.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,kBAAkB,EAAE,MAAM,2BAA2B,CAAC;AAE/D,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAEhD,MAAM,OAAO,qBAAsB,SAAQ,WAAW;IAIpD,YAAY,YAAmC;QAC7C,KAAK,CAAC,YAAY,CAAC,UAAU,EAAE,YAAY,CAAC,KAAK,EAAE,YAAY,CAAC,MAAM,CAAC,CAAC;QAExE,IAAI,CAAC,mBAAmB,GAAG,YAAY,CAAC;QAExC,MAAM,IAAI,GAAG,YAAY,CAAC,IAAI,EAAE,CAAC;QAEjC,IAAI,CAAC,aAAa,CAChB,UAAU,EACV;YACE;gBACE,QAAQ,EAAE,GAAG;gBACb,QAAQ,EAAE,QAAQ;gBAClB,MAAM,EAAE,GAAG;gBACX,WAAW,EAAE,WAAW;aACzB;YACD;gBACE,QAAQ,EAAE,GAAG;gBACb,MAAM,EAAE,OAAO;gBACf,WAAW,EAAE,gBAAgB;aAC9B;SACF,EACD;YACE,UAAU,EAAE,IAAI;YAChB,YAAY,EAAE,CAAC;SAChB,CACF,CAAC;QAEF,IAAI,CAAC,aAAa,CAChB,UAAU,EACV;YACE;gBACE,QAAQ,EAAE,GAAG;gBACb,QAAQ,EAAE,sCAAsC;gBAChD,KAAK,EAAE,GAAG;aACX;YACD;gBACE,QAAQ,EAAE,IAAI;gBACd,QAAQ,EAAE,sCAAsC;gBAChD,KAAK,EAAE,OAAO;aACf;YACD;gBACE,QAAQ,EAAE,GAAG;gBACb,KAAK,EAAE,GAAG;aACX;SACF,EACD;YACE,UAAU,EAAE,IAAI;YAChB,YAAY,EAAE,CAAC;SAChB,CACF,CAAC;QAEF,IAAI,CAAC,YAAY,GAAG,IAAI,kBAAkB,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC;IACrD,CAAC;IAED,KAAK,CAAC,OAAe;QACnB,MAAM,IAAI,GAAG,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;QAC9C,IAAI,CAAC,IAAI,CAAC,UAAU,CAAE,CAAC,QAAQ,CAAC,IAAI,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,MAAM,EAAE,CAAC,CAAC;QAC1D,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;QACtB,OAAO,IAAI,CAAC;IACd,CAAC;IAED,IAAI;QACF,OAAO,IAAI,qBAAqB,CAAC,IAAI,CAAC,mBAAmB,CAAC,CAAC;IAC7D,CAAC;CACF"}

js/tower.js

@@ -1,5 +1,5 @@
 import { Grid } from './grid.js';
-import { projectile } from './projectile.js';
+import { ProjectileTileFactory } from './projectile_tile_factory.js';
 import * as tiles from './tiles.js';
 export function main() {
     document.body.style.margin = '0';
@@ -77,9 +77,7 @@ export function main() {
     const tower = grid.add_tile(tiles.TOWER_FIREBALL1, 30, 18);
     setInterval(() => {
         tower.play('fire');
-        const fireball = grid.add_tile(projectile(tiles.FIREBALL), 31, 17);
+        grid.add_tile(new ProjectileTileFactory(tiles.FIREBALL), 31, 17);
-        fireball.play('launch-x').finished.then(() => fireball.remove());
-        fireball.play('launch-y');
     }, 3250);
 }
 ;

ts/projectile.ts

@@ -1,54 +0,0 @@
-import { LayeredTileFactory } from './layered_tile_factory.js';
-import { AnimatableTileFactory } from './animatable_tile_factory.js';
-import { TileFactory } from './tile_factory.js';
-
-export function projectile(tile_factory: AnimatableTileFactory): TileFactory {
-  const copy = 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/projectile_tile_factory.ts

@@ -0,0 +1,75 @@
+import { AnimatableTileFactory } from './animatable_tile_factory.js';
+import { LayeredTileFactory } from './layered_tile_factory.js';
+import { Tile } from './tile.js';
+import { TileFactory } from './tile_factory.js';
+
+export class ProjectileTileFactory extends TileFactory {
+  source_tile_factory: AnimatableTileFactory;
+  tile_factory: TileFactory;
+
+  constructor(tile_factory: AnimatableTileFactory) {
+    super(tile_factory.layer_name, tile_factory.width, tile_factory.height);
+
+    this.source_tile_factory = tile_factory;
+
+    const copy = 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,
+      },
+    );
+
+    this.tile_factory = new LayeredTileFactory([copy]);
+  }
+
+  build(tileset: string): Tile {
+    const tile = this.tile_factory.build(tileset);
+    tile.play('launch-x')!.finished.then(() => tile.remove());
+    tile.play('launch-y');
+    return tile;
+  }
+
+  copy(): ProjectileTileFactory {
+    return new ProjectileTileFactory(this.source_tile_factory);
+  }
+}

ts/tower.ts

@@ -1,5 +1,5 @@
 import { Grid } from './grid.js';
-import { projectile } from './projectile.js'
+import { ProjectileTileFactory } from './projectile_tile_factory.js'
 import * as tiles from './tiles.js';
 
 export function main() {
@@ -85,9 +85,7 @@ export function main() {
   const tower = grid.add_tile(tiles.TOWER_FIREBALL1, 30, 18);
   setInterval(() => {
     tower.play('fire');
-    const fireball = grid.add_tile(projectile(tiles.FIREBALL), 31, 17);
+    grid.add_tile(new ProjectileTileFactory(tiles.FIREBALL), 31, 17);
-    fireball.play('launch-x')!.finished.then(() => fireball.remove());
-    fireball.play('launch-y');
   }, 3250);
 };
 

tsconfig.json

@@ -20,7 +20,7 @@
     "ts/layered_tile.ts",
     "ts/layered_tile_factory.ts",
     "ts/layer.ts",
-    "ts/projectile.ts",
+    "ts/projectile_tile_factory.ts",
     "ts/simple_tile.ts",
     "ts/simple_tile_factory.ts",
     "ts/tile.ts",