Factor out AnimatableTile{Factory}

This commit is contained in:
Ian Gulliver
2021-05-11 05:28:20 +00:00
parent 4e65819183
commit 8f76317ccc
16 changed files with 80 additions and 51 deletions

17
js/animatable_tile.js Normal file
View File

@@ -0,0 +1,17 @@
import { Tile } from './tile.js';
export class AnimatableTile extends Tile {
constructor(width, height, animations) {
super(width, height);
this.animations = animations;
}
play(name) {
const animation = this.animations.get(name);
if (animation) {
return this.elem.animate(...animation);
}
else {
return undefined;
}
}
}
//# sourceMappingURL=animatable_tile.js.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"animatable_tile.js","sourceRoot":"","sources":["../ts/animatable_tile.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,WAAW,CAAC;AAEjC,MAAM,OAAgB,cAAe,SAAQ,IAAI;IAG/C,YAAY,KAAa,EAAE,MAAc,EAAE,UAA6C;QACtF,KAAK,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC;QACrB,IAAI,CAAC,UAAU,GAAG,UAAU,CAAC;IAC/B,CAAC;IAED,IAAI,CAAC,IAAY;QACf,MAAM,SAAS,GAAG,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;QAC5C,IAAI,SAAS,EAAE;YACb,OAAO,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,GAAG,SAAS,CAAC,CAAC;SACxC;aAAM;YACL,OAAO,SAAS,CAAC;SAClB;IACH,CAAC;CACF"}

View File

@@ -0,0 +1,11 @@
import { TileFactory } from './tile_factory.js';
export class AnimatableTileFactory extends TileFactory {
constructor() {
super(...arguments);
this.animations = new Map();
}
add_animation(name, keyframes, options) {
this.animations.set(name, [keyframes, options]);
}
}
//# sourceMappingURL=animatable_tile_factory.js.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"animatable_tile_factory.js","sourceRoot":"","sources":["../ts/animatable_tile_factory.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAEhD,MAAM,OAAgB,qBAAsB,SAAQ,WAAW;IAA/D;;QACE,eAAU,GAAsC,IAAI,GAAG,EAAE,CAAC;IAO5D,CAAC;IALC,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;CAGF"}

View File

@@ -1,6 +1,6 @@
import { LayeredTileFactory } from './layered_tile_factory.js';
export function projectile(simple_tile_factory) {
const copy = simple_tile_factory.copy();
export function projectile(tile_factory) {
const copy = tile_factory.copy();
copy.add_animation('launch-x', [
{
'offset': 0.0,

View File

@@ -1 +1 @@
{"version":3,"file":"projectile.js","sourceRoot":"","sources":["../ts/projectile.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,2BAA2B,CAAC;AAI/D,MAAM,UAAU,UAAU,CAAC,mBAAsC;IAC/D,MAAM,IAAI,GAAG,mBAAmB,CAAC,IAAI,EAAE,CAAC;IAExC,IAAI,CAAC,aAAa,CAChB,UAAU,EACV;QACE;YACE,QAAQ,EAAE,GAAG;YACb,QAAQ,EAAE,QAAQ;YAClB,MAAM,EAAE,GAAG;YACX,WAAW,EAAE,WAAW;SACzB;QACD;YACE,QAAQ,EAAE,GAAG;YACb,MAAM,EAAE,OAAO;YACf,WAAW,EAAE,gBAAgB;SAC9B;KACF,EACD;QACE,UAAU,EAAE,IAAI;QAChB,YAAY,EAAE,CAAC;KAChB,CACF,CAAC;IAEF,IAAI,CAAC,aAAa,CAChB,UAAU,EACV;QACE;YACE,QAAQ,EAAE,GAAG;YACb,QAAQ,EAAE,sCAAsC;YAChD,KAAK,EAAE,GAAG;SACX;QACD;YACE,QAAQ,EAAE,IAAI;YACd,QAAQ,EAAE,sCAAsC;YAChD,KAAK,EAAE,OAAO;SACf;QACD;YACE,QAAQ,EAAE,GAAG;YACb,KAAK,EAAE,GAAG;SACX;KACF,EACD;QACE,UAAU,EAAE,IAAI;QAChB,YAAY,EAAE,CAAC;KAChB,CACF,CAAC;IAEF,OAAO,IAAI,kBAAkB,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC;AACxC,CAAC"}
{"version":3,"file":"projectile.js","sourceRoot":"","sources":["../ts/projectile.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,2BAA2B,CAAC;AAI/D,MAAM,UAAU,UAAU,CAAC,YAAmC;IAC5D,MAAM,IAAI,GAAG,YAAY,CAAC,IAAI,EAAE,CAAC;IAEjC,IAAI,CAAC,aAAa,CAChB,UAAU,EACV;QACE;YACE,QAAQ,EAAE,GAAG;YACb,QAAQ,EAAE,QAAQ;YAClB,MAAM,EAAE,GAAG;YACX,WAAW,EAAE,WAAW;SACzB;QACD;YACE,QAAQ,EAAE,GAAG;YACb,MAAM,EAAE,OAAO;YACf,WAAW,EAAE,gBAAgB;SAC9B;KACF,EACD;QACE,UAAU,EAAE,IAAI;QAChB,YAAY,EAAE,CAAC;KAChB,CACF,CAAC;IAEF,IAAI,CAAC,aAAa,CAChB,UAAU,EACV;QACE;YACE,QAAQ,EAAE,GAAG;YACb,QAAQ,EAAE,sCAAsC;YAChD,KAAK,EAAE,GAAG;SACX;QACD;YACE,QAAQ,EAAE,IAAI;YACd,QAAQ,EAAE,sCAAsC;YAChD,KAAK,EAAE,OAAO;SACf;QACD;YACE,QAAQ,EAAE,GAAG;YACb,KAAK,EAAE,GAAG;SACX;KACF,EACD;QACE,UAAU,EAAE,IAAI;QAChB,YAAY,EAAE,CAAC;KAChB,CACF,CAAC;IAEF,OAAO,IAAI,kBAAkB,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC;AACxC,CAAC"}

View File

@@ -1,19 +1,9 @@
import { Tile } from './tile.js';
export class SimpleTile extends Tile {
import { AnimatableTile } from './animatable_tile.js';
export class SimpleTile extends AnimatableTile {
constructor(width, height, image_url, animations) {
super(width, height);
super(width, height, animations);
this.elem.style.backgroundImage = `url('${encodeURIComponent(image_url)}')`;
this.elem.style.backgroundSize = 'cover';
this.animations = animations;
}
play(name) {
const animation = this.animations.get(name);
if (animation) {
return this.elem.animate(...animation);
}
else {
return undefined;
}
}
}
//# sourceMappingURL=simple_tile.js.map

View File

@@ -1 +1 @@
{"version":3,"file":"simple_tile.js","sourceRoot":"","sources":["../ts/simple_tile.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,WAAW,CAAC;AAEjC,MAAM,OAAO,UAAW,SAAQ,IAAI;IAGlC,YAAY,KAAa,EAAE,MAAc,EAAE,SAAiB,EAAE,UAA6C;QACzG,KAAK,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC;QAErB,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,eAAe,GAAG,QAAQ,kBAAkB,CAAC,SAAS,CAAC,IAAI,CAAC;QAC5E,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,cAAc,GAAG,OAAO,CAAC;QAEzC,IAAI,CAAC,UAAU,GAAG,UAAU,CAAC;IAC/B,CAAC;IAED,IAAI,CAAC,IAAY;QACf,MAAM,SAAS,GAAG,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;QAC5C,IAAI,SAAS,EAAE;YACb,OAAO,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,GAAG,SAAS,CAAC,CAAC;SACxC;aAAM;YACL,OAAO,SAAS,CAAC;SAClB;IACH,CAAC;CACF"}
{"version":3,"file":"simple_tile.js","sourceRoot":"","sources":["../ts/simple_tile.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAEtD,MAAM,OAAO,UAAW,SAAQ,cAAc;IAC5C,YAAY,KAAa,EAAE,MAAc,EAAE,SAAiB,EAAE,UAA6C;QACzG,KAAK,CAAC,KAAK,EAAE,MAAM,EAAE,UAAU,CAAC,CAAC;QAEjC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,eAAe,GAAG,QAAQ,kBAAkB,CAAC,SAAS,CAAC,IAAI,CAAC;QAC5E,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,cAAc,GAAG,OAAO,CAAC;IAC3C,CAAC;CACF"}

View File

@@ -1,13 +1,9 @@
import { SimpleTile } from './simple_tile.js';
import { TileFactory } from './tile_factory.js';
export class SimpleTileFactory extends TileFactory {
import { AnimatableTileFactory } from './animatable_tile_factory.js';
export class SimpleTileFactory extends AnimatableTileFactory {
constructor(layer_name, width, height, name) {
super(layer_name, width, height);
this.name = name;
this.animations = new Map();
}
add_animation(name, keyframes, options) {
this.animations.set(name, [keyframes, options]);
}
build(tileset) {
return new SimpleTile(this.width, this.height, `images/${tileset}/${this.name}.svg`, this.animations);

View File

@@ -1 +1 @@
{"version":3,"file":"simple_tile_factory.js","sourceRoot":"","sources":["../ts/simple_tile_factory.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC9C,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAEhD,MAAM,OAAO,iBAAkB,SAAQ,WAAW;IAIhD,YAAY,UAAkB,EAAE,KAAa,EAAE,MAAc,EAAE,IAAY;QACzE,KAAK,CAAC,UAAU,EAAE,KAAK,EAAE,MAAM,CAAC,CAAC;QACjC,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;QACjB,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,KAAK,CAAC,OAAe;QACnB,OAAO,IAAI,UAAU,CACnB,IAAI,CAAC,KAAK,EACV,IAAI,CAAC,MAAM,EACX,UAAU,OAAO,IAAI,IAAI,CAAC,IAAI,MAAM,EACpC,IAAI,CAAC,UAAU,CAChB,CAAC;IACJ,CAAC;IAED,IAAI;QACF,MAAM,GAAG,GAAG,IAAI,iBAAiB,CAAC,IAAI,CAAC,UAAU,EAAE,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC;QACvF,KAAK,MAAM,CAAC,IAAI,EAAE,CAAC,SAAS,EAAE,OAAO,CAAC,CAAC,IAAI,IAAI,CAAC,UAAU,EAAE;YAC1D,GAAG,CAAC,aAAa,CAAC,IAAI,EAAE,SAAS,EAAE,OAAO,CAAC,CAAC;SAC7C;QACD,OAAO,GAAG,CAAC;IACb,CAAC;CACF;AAED;;;;;;;;;;;;;;;;;;;;;;;EAuBE"}
{"version":3,"file":"simple_tile_factory.js","sourceRoot":"","sources":["../ts/simple_tile_factory.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC9C,OAAO,EAAE,qBAAqB,EAAE,MAAM,8BAA8B,CAAC;AAErE,MAAM,OAAO,iBAAkB,SAAQ,qBAAqB;IAG1D,YAAY,UAAkB,EAAE,KAAa,EAAE,MAAc,EAAE,IAAY;QACzE,KAAK,CAAC,UAAU,EAAE,KAAK,EAAE,MAAM,CAAC,CAAC;QACjC,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;IACnB,CAAC;IAED,KAAK,CAAC,OAAe;QACnB,OAAO,IAAI,UAAU,CACnB,IAAI,CAAC,KAAK,EACV,IAAI,CAAC,MAAM,EACX,UAAU,OAAO,IAAI,IAAI,CAAC,IAAI,MAAM,EACpC,IAAI,CAAC,UAAU,CAChB,CAAC;IACJ,CAAC;IAED,IAAI;QACF,MAAM,GAAG,GAAG,IAAI,iBAAiB,CAAC,IAAI,CAAC,UAAU,EAAE,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC;QACvF,KAAK,MAAM,CAAC,IAAI,EAAE,CAAC,SAAS,EAAE,OAAO,CAAC,CAAC,IAAI,IAAI,CAAC,UAAU,EAAE;YAC1D,GAAG,CAAC,aAAa,CAAC,IAAI,EAAE,SAAS,EAAE,OAAO,CAAC,CAAC;SAC7C;QACD,OAAO,GAAG,CAAC;IACb,CAAC;CACF;AAED;;;;;;;;;;;;;;;;;;;;;;;EAuBE"}

19
ts/animatable_tile.ts Normal file
View File

@@ -0,0 +1,19 @@
import { Tile } from './tile.js';
export abstract class AnimatableTile extends Tile {
animations: Map<string, [Keyframe[], object]>;
constructor(width: number, height: number, animations: Map<string, [Keyframe[], object]>) {
super(width, height);
this.animations = animations;
}
play(name: string): Animation | undefined {
const animation = this.animations.get(name);
if (animation) {
return this.elem.animate(...animation);
} else {
return undefined;
}
}
}

View File

@@ -0,0 +1,11 @@
import { TileFactory } from './tile_factory.js';
export abstract class AnimatableTileFactory extends TileFactory {
animations: Map<string, [Keyframe[], object]> = new Map();
add_animation(name: string, keyframes: Keyframe[], options: object) {
this.animations.set(name, [keyframes, options]);
}
abstract copy(): AnimatableTileFactory;
}

View File

@@ -1,9 +1,9 @@
import { LayeredTileFactory } from './layered_tile_factory.js';
import { SimpleTileFactory } from './simple_tile_factory.js';
import { AnimatableTileFactory } from './animatable_tile_factory.js';
import { TileFactory } from './tile_factory.js';
export function projectile(simple_tile_factory: SimpleTileFactory): TileFactory {
const copy = simple_tile_factory.copy();
export function projectile(tile_factory: AnimatableTileFactory): TileFactory {
const copy = tile_factory.copy();
copy.add_animation(
'launch-x',

View File

@@ -1,24 +1,11 @@
import { Tile } from './tile.js';
export class SimpleTile extends Tile {
animations: Map<string, [Keyframe[], object]>;
import { AnimatableTile } from './animatable_tile.js';
export class SimpleTile extends AnimatableTile {
constructor(width: number, height: number, image_url: string, animations: Map<string, [Keyframe[], object]>) {
super(width, height);
super(width, height, animations);
this.elem.style.backgroundImage = `url('${encodeURIComponent(image_url)}')`;
this.elem.style.backgroundSize = 'cover';
this.animations = animations;
}
play(name: string): Animation | undefined {
const animation = this.animations.get(name);
if (animation) {
return this.elem.animate(...animation);
} else {
return undefined;
}
}
}

View File

@@ -1,18 +1,12 @@
import { SimpleTile } from './simple_tile.js';
import { TileFactory } from './tile_factory.js';
import { AnimatableTileFactory } from './animatable_tile_factory.js';
export class SimpleTileFactory extends TileFactory {
export class SimpleTileFactory extends AnimatableTileFactory {
name: string;
animations: Map<string, [Keyframe[], object]>;
constructor(layer_name: string, width: number, height: number, name: string) {
super(layer_name, width, height);
this.name = name;
this.animations = new Map();
}
add_animation(name: string, keyframes: Keyframe[], options: object) {
this.animations.set(name, [keyframes, options]);
}
build(tileset: string): SimpleTile {

View File

@@ -14,6 +14,8 @@
"strictNullChecks": true
},
"files": [
"ts/animatable_tile.ts",
"ts/animatable_tile_factory.ts",
"ts/grid.ts",
"ts/layered_tile.ts",
"ts/layered_tile_factory.ts",