LayeredTile abstraction

js/layered_tile.js

@@ -0,0 +1,35 @@
+import { Tile } from './tile.js';
+export class LayeredTile extends Tile {
+    constructor(tiles) {
+        super('', tiles[0].width, tiles[0].height);
+        this.tiles = tiles;
+    }
+    get_elem(tileset) {
+        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) => {
+            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;
+    }
+}
+//# sourceMappingURL=layered_tile.js.map

js/layered_tile.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"layered_tile.js","sourceRoot":"","sources":["../ts/layered_tile.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,IAAI,EAAE,MAAM,WAAW,CAAC;AAEhD,MAAM,OAAO,WAAY,SAAQ,IAAI;IAGnC,YAAY,KAAa;QACvB,KAAK,CAAC,EAAE,EAAE,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC;QAC3C,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;IACrB,CAAC;IAED,QAAQ,CAAC,OAAe;QACtB,MAAM,IAAI,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;QAC3C,IAAI,CAAC,KAAK,CAAC,aAAa,GAAG,QAAQ,IAAI,CAAC,KAAK,EAAE,CAAC;QAChD,IAAI,CAAC,KAAK,CAAC,UAAU,GAAG,QAAQ,IAAI,CAAC,MAAM,EAAE,CAAC;QAC9C,IAAI,CAAC,KAAK,CAAC,QAAQ,GAAG,UAAU,CAAC;QAEjC,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;YAC1C,MAAM,IAAI,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;YAC3B,MAAM,GAAG,GAAG,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC;YACnC,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC;YACtB,GAAG,CAAC,KAAK,CAAC,KAAK,GAAG,MAAM,CAAC;YACzB,GAAG,CAAC,KAAK,CAAC,MAAM,GAAG,MAAM,CAAC;YAC1B,GAAG,CAAC,KAAK,CAAC,QAAQ,GAAG,UAAU,CAAC;YAChC,GAAG,CAAC,KAAK,CAAC,GAAG,GAAG,GAAG,CAAC;YACpB,GAAG,CAAC,KAAK,CAAC,IAAI,GAAG,GAAG,CAAC;YACrB,GAAG,CAAC,KAAK,CAAC,MAAM,GAAG,GAAG,CAAC,EAAE,CAAC;SAC3B;QAED,IAAI,CAAC,gBAAgB,CAAC,SAAS,EAAE,CAAC,CAA6B,EAAE,EAAE;YACjE,KAAK,MAAM,GAAG,IAAI,IAAI,CAAC,QAAQ,EAAE;gBAC/B,GAAG,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,SAAS,EAAE,EAAC,QAAQ,EAAE,CAAC,CAAC,MAAM,EAAC,CAAC,CAAC,CAAC;aACrE;QACH,CAAC,CAAC,CAAC;QAEH,eAAe;QACf,WAAW,CAAC,GAAG,EAAE;YACf,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,SAAS,EAAE,EAAC,QAAQ,EAAE,EAAC,MAAM,EAAE,MAAM,EAAC,EAAC,CAAC,CAAC,CAAC;QAC/E,CAAC,EAAE,IAAI,CAAC,CAAC;QAET,OAAO,IAAI,CAAC;IACd,CAAC;CACF"}

js/tile.js

@@ -3,6 +3,10 @@ export class Tile {
         this.name = name;
         this.width = width;
         this.height = height;
+        this.animations = new Map();
+    }
+    add_animation(name, keyframes, options) {
+        this.animations.set(name, [keyframes, options]);
     }
     get_elem(tileset) {
         const elem = document.createElement('div');
@@ -10,6 +14,12 @@ export class Tile {
         elem.style.backgroundSize = 'cover';
         elem.style.gridColumnEnd = `span ${this.width}`;
         elem.style.gridRowEnd = `span ${this.height}`;
+        elem.addEventListener('animate', (e) => {
+            const animation = this.animations.get(e.detail.name);
+            if (animation) {
+                elem.animate(animation[0], animation[1]);
+            }
+        });
         return elem;
     }
 }

js/tile.js.map

@@ -1 +1 @@
-{"version":3,"file":"tile.js","sourceRoot":"","sources":["../ts/tile.ts"],"names":[],"mappings":"AAAA,MAAM,OAAO,IAAI;IAKf,YAAY,IAAY,EAAE,KAAa,EAAE,MAAc;QACrD,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;QACjB,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;QACnB,IAAI,CAAC,MAAM,GAAG,MAAM,CAAC;IACvB,CAAC;IAED,QAAQ,CAAC,OAAe;QACtB,MAAM,IAAI,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;QAC3C,IAAI,CAAC,KAAK,CAAC,eAAe,GAAG,eAAe,OAAO,IAAI,IAAI,CAAC,IAAI,QAAQ,CAAC;QACzE,IAAI,CAAC,KAAK,CAAC,cAAc,GAAG,OAAO,CAAC;QACpC,IAAI,CAAC,KAAK,CAAC,aAAa,GAAG,QAAQ,IAAI,CAAC,KAAK,EAAE,CAAC;QAChD,IAAI,CAAC,KAAK,CAAC,UAAU,GAAG,QAAQ,IAAI,CAAC,MAAM,EAAE,CAAC;QAC9C,OAAO,IAAI,CAAC;IACd,CAAC;CACF;AAED;;;;;;;;;;;;;;;;;;;;;;;EAuBE"}
+{"version":3,"file":"tile.js","sourceRoot":"","sources":["../ts/tile.ts"],"names":[],"mappings":"AAIA,MAAM,OAAO,IAAI;IAMf,YAAY,IAAY,EAAE,KAAa,EAAE,MAAc;QACrD,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;QACjB,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;QACnB,IAAI,CAAC,MAAM,GAAG,MAAM,CAAC;QAErB,IAAI,CAAC,UAAU,GAAG,IAAI,GAAG,EAAE,CAAC;IAC9B,CAAC;IAED,aAAa,CAAC,IAAY,EAAE,SAAqB,EAAE,OAAe;QAChE,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,IAAI,EAAE,CAAC,SAAS,EAAE,OAAO,CAAC,CAAC,CAAC;IAClD,CAAC;IAED,QAAQ,CAAC,OAAe;QACtB,MAAM,IAAI,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;QAC3C,IAAI,CAAC,KAAK,CAAC,eAAe,GAAG,eAAe,OAAO,IAAI,IAAI,CAAC,IAAI,QAAQ,CAAC;QACzE,IAAI,CAAC,KAAK,CAAC,cAAc,GAAG,OAAO,CAAC;QACpC,IAAI,CAAC,KAAK,CAAC,aAAa,GAAG,QAAQ,IAAI,CAAC,KAAK,EAAE,CAAC;QAChD,IAAI,CAAC,KAAK,CAAC,UAAU,GAAG,QAAQ,IAAI,CAAC,MAAM,EAAE,CAAC;QAE9C,IAAI,CAAC,gBAAgB,CAAC,SAAS,EAAE,CAAC,CAA6B,EAAE,EAAE;YACjE,MAAM,SAAS,GAAG,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;YACrD,IAAI,SAAS,EAAE;gBACb,IAAI,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC;aAC1C;QACH,CAAC,CAAC,CAAC;QAEH,OAAO,IAAI,CAAC;IACd,CAAC;CACF;AAED;;;;;;;;;;;;;;;;;;;;;;;EAuBE"}

js/tiles.js

@@ -1,3 +1,4 @@
+import { LayeredTile } from './layered_tile.js';
 import { Tile } from './tile.js';
 // Straight
 export const ROAD_LR = new Tile('road-lr', 6, 4);
@@ -25,44 +26,11 @@ export const RIVER_BL = new Tile('river-bl', 6, 6);
 export const RIVER_TR = new Tile('river-tr', 6, 6);
 export const RIVER_TL = new Tile('river-tl', 6, 6);
 export const BRIDGE_LR = new Tile('bridge-lr', 6, 4);
-class Tower extends Tile {
-    get_elem(_) {
-        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/tower/${this.name}.svg")`;
-        base.style.backgroundSize = 'cover';
-        base.style.zIndex = '2';
-        const back = document.createElement('div');
-        elem.appendChild(back);
-        back.style.width = '100%';
-        back.style.height = '100%';
-        back.style.position = 'absolute';
-        back.style.top = '0';
-        back.style.left = '0';
-        back.style.backgroundImage = `url("images/tower/${this.name}-back.svg")`;
-        back.style.backgroundSize = 'cover';
-        back.style.zIndex = '1';
-        const front = document.createElement('div');
-        elem.appendChild(front);
-        front.style.width = '100%';
-        front.style.height = '100%';
-        front.style.position = 'absolute';
-        front.style.top = '0';
-        front.style.left = '0';
-        front.style.backgroundImage = `url("images/tower/${this.name}-front.svg")`;
-        front.style.backgroundSize = 'cover';
-        front.style.zIndex = '3';
-        setInterval(() => {
-            back.animate([
+const tower_fireball1_back = new Tile('fireball1-back', 4, 4);
+const tower_fireball1 = new Tile('fireball1', 4, 4);
+const tower_fireball1_front = new Tile('fireball1-front', 4, 4);
+for (const tile of [tower_fireball1_back, tower_fireball1_front]) {
+    tile.add_animation('fire', [
         {
             'offset': 0.0,
             'easing': 'cubic-bezier(0.02, 1.07, 0.73, 0.99)',
@@ -81,32 +49,14 @@ class Tower extends Tile {
         'duration': 3000,
         'iterations': 1,
     });
-            front.animate([
-                {
-                    'offset': 0.0,
-                    'easing': 'cubic-bezier(0.02, 1.07, 0.73, 0.99)',
-                    'top': '0',
-                },
-                {
-                    'offset': 0.3,
-                    'easing': 'linear',
-                    'top': '20%',
-                },
-                {
-                    'offset': 1.0,
-                    'top': '0',
-                },
-            ], {
-                'duration': 3000,
-                'iterations': 1,
-            });
-        }, 3250);
-        return elem;
-    }
 }
-export const FIREBALL1 = new Tower('fireball1', 4, 4);
+export const TOWER_FIREBALL1 = new LayeredTile([
+    tower_fireball1_back,
+    tower_fireball1,
+    tower_fireball1_front,
+]);
 class Fireball extends Tile {
-    get_elem(_) {
+    get_elem(tileset) {
         const elem = document.createElement('div');
         elem.style.gridColumnEnd = `span ${this.width}`;
         elem.style.gridRowEnd = `span ${this.height}`;
@@ -118,7 +68,7 @@ class Fireball extends Tile {
         base.style.position = 'absolute';
         base.style.top = '0';
         base.style.left = '0';
-        base.style.backgroundImage = `url("images/tower/${this.name}.svg")`;
+        base.style.backgroundImage = `url("images/${tileset}/${this.name}.svg")`;
         base.style.backgroundSize = 'cover';
         base.style.visibility = 'hidden';
         setInterval(() => {

js/tower.js

@@ -73,7 +73,7 @@ export function main() {
     grid.add_tile('bridge', tiles.BRIDGE_LR, 46, 26);
     grid.add_tile('bridge', tiles.BRIDGE_LR, 46, 18);
     grid.add_tile('bridge', tiles.BRIDGE_LR, 46, 10);
-    grid.add_tile('tower', tiles.FIREBALL1, 30, 18);
+    grid.add_tile('tower', tiles.TOWER_FIREBALL1, 30, 18);
     grid.add_tile('tower', tiles.FIREBALL, 31, 17);
 }
 ;

ts/layered_tile.ts

@@ -0,0 +1,42 @@
+import { AnimateDetail, Tile } from './tile.js';
+
+export class LayeredTile extends Tile {
+  tiles: Tile[];
+
+  constructor(tiles: Tile[]) {
+    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;
+  }
+}

ts/tile.ts

@@ -1,12 +1,23 @@
+export interface AnimateDetail {
+  name: string;
+}
+
 export class Tile {
   name: string;
   width: number;
   height: number;
+  animations: Map<string, [Keyframe[], object]>;
 
   constructor(name: string, width: number, height: number) {
     this.name = name;
     this.width = width;
     this.height = height;
+
+    this.animations = new Map();
+  }
+
+  add_animation(name: string, keyframes: Keyframe[], options: object) {
+    this.animations.set(name, [keyframes, options]);
   }
 
   get_elem(tileset: string): HTMLElement {
@@ -15,6 +26,14 @@ export class Tile {
     elem.style.backgroundSize = 'cover';
     elem.style.gridColumnEnd = `span ${this.width}`;
     elem.style.gridRowEnd = `span ${this.height}`;
+
+    elem.addEventListener('animate', (e: CustomEvent<AnimateDetail>) => {
+      const animation = this.animations.get(e.detail.name);
+      if (animation) {
+        elem.animate(animation[0], animation[1]);
+      }
+    });
+
     return elem;
   }
 }

ts/tiles.ts

@@ -1,3 +1,4 @@
+import { LayeredTile } from './layered_tile.js';
 import { Tile } from './tile.js';
 
 // Straight
@@ -34,48 +35,14 @@ export const RIVER_TL = new Tile('river-tl', 6, 6);
 
 export const BRIDGE_LR = new Tile('bridge-lr', 6, 4);
 
-class Tower extends Tile {
-  get_elem(_: string): HTMLElement {
-    const elem = document.createElement('div');
-    elem.style.gridColumnEnd = `span ${this.width}`;
-    elem.style.gridRowEnd = `span ${this.height}`;
-    elem.style.position = 'relative';
+const tower_fireball1_back = new Tile('fireball1-back', 4, 4);
+const tower_fireball1 = new Tile('fireball1', 4, 4);
+const tower_fireball1_front = new Tile('fireball1-front', 4, 4);
 
-    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/tower/${this.name}.svg")`;
-    base.style.backgroundSize = 'cover';
-    base.style.zIndex = '2';
-
-    const back = document.createElement('div');
-    elem.appendChild(back);
-    back.style.width = '100%';
-    back.style.height = '100%';
-    back.style.position = 'absolute';
-    back.style.top = '0';
-    back.style.left = '0';
-    back.style.backgroundImage = `url("images/tower/${this.name}-back.svg")`;
-    back.style.backgroundSize = 'cover';
-    back.style.zIndex = '1';
-
-    const front = document.createElement('div');
-    elem.appendChild(front);
-    front.style.width = '100%';
-    front.style.height = '100%';
-    front.style.position = 'absolute';
-    front.style.top = '0';
-    front.style.left = '0';
-    front.style.backgroundImage = `url("images/tower/${this.name}-front.svg")`;
-    front.style.backgroundSize = 'cover';
-    front.style.zIndex = '3';
-
-    setInterval(() => {
-      back.animate([
+for (const tile of [tower_fireball1_back, tower_fireball1_front]) {
+  tile.add_animation(
+    'fire',
+    [
       {
         'offset': 0.0,
         'easing': 'cubic-bezier(0.02, 1.07, 0.73, 0.99)',
@@ -93,42 +60,22 @@ class Tower extends Tile {
 
         'top': '0',
       },
-      ], {
+    ],
+    {
       'duration': 3000,
       'iterations': 1,
-      });
-
-      front.animate([
-        {
-          'offset': 0.0,
-          'easing': 'cubic-bezier(0.02, 1.07, 0.73, 0.99)',
-
-          'top': '0',
     },
-        {
-          'offset': 0.3,
-          'easing': 'linear',
-
-          'top': '20%',
-        },
-        {
-          'offset': 1.0,
-
-          'top': '0',
-        },
-      ], {
-        'duration': 3000,
-        'iterations': 1,
-      });
-    }, 3250);
-
-    return elem;
-  }
+  );
 }
-export const FIREBALL1 = new Tower('fireball1', 4, 4);
+
+export const TOWER_FIREBALL1 = new LayeredTile([
+  tower_fireball1_back,
+  tower_fireball1,
+  tower_fireball1_front,
+]);
 
 class Fireball extends Tile {
-  get_elem(_: string): HTMLElement {
+  get_elem(tileset: string): HTMLElement {
     const elem = document.createElement('div');
     elem.style.gridColumnEnd = `span ${this.width}`;
     elem.style.gridRowEnd = `span ${this.height}`;
@@ -141,7 +88,7 @@ class Fireball extends Tile {
     base.style.position = 'absolute';
     base.style.top = '0';
     base.style.left = '0';
-    base.style.backgroundImage = `url("images/tower/${this.name}.svg")`;
+    base.style.backgroundImage = `url("images/${tileset}/${this.name}.svg")`;
     base.style.backgroundSize = 'cover';
     base.style.visibility = 'hidden';
 

ts/tower.ts

@@ -81,7 +81,7 @@ 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.FIREBALL1, 30, 18);
+  grid.add_tile('tower', tiles.TOWER_FIREBALL1, 30, 18);
   grid.add_tile('tower', tiles.FIREBALL, 31, 17);
 };
 

tsconfig.json

@@ -11,7 +11,6 @@
     "noImplicitThis": true,
     "noUnusedLocals": true,
     "noUnusedParameters": true,
-    "strictFunctionTypes": true,
     "strictNullChecks": true
   },
   "files": [