misc/tower
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Tower class hierarchy

Browse Source
This commit is contained in:
Ian Gulliver
2021-05-11 02:57:17 +00:00
parent 495aeb6204
commit 0ff24fe806
28 changed files with 346 additions and 279 deletions
Download Patch File Download Diff File Expand all files Collapse all files

177
js/tiles.js
View File

@@ -1,36 +1,36 @@
import { LayeredTileFactory } from './layered_tile_factory.js';
import { TileFactory } from './tile_factory.js';
// Straight
export const ROAD_LR = new TileFactory('road-lr', 6, 4);
export const ROAD_TB = new TileFactory('road-tb', 4, 6);
import { SimpleTileFactory } from './simple_tile_factory.js';
// Straig
export const ROAD_LR = new SimpleTileFactory(6, 4, 'road-lr');
export const ROAD_TB = new SimpleTileFactory(4, 6, 'road-tb');
// Elbow
export const ROAD_BL = new TileFactory('road-bl', 6, 6);
export const ROAD_BR = new TileFactory('road-br', 6, 6);
export const ROAD_TL = new TileFactory('road-tl', 6, 6);
export const ROAD_TR = new TileFactory('road-tr', 6, 6);
export const ROAD_BL = new SimpleTileFactory(6, 6, 'road-bl');
export const ROAD_BR = new SimpleTileFactory(6, 6, 'road-br');
export const ROAD_TL = new SimpleTileFactory(6, 6, 'road-tl');
export const ROAD_TR = new SimpleTileFactory(6, 6, 'road-tr');
// T
export const ROAD_BLR = new TileFactory('road-blr', 8, 6);
export const ROAD_TLR = new TileFactory('road-tlr', 8, 6);
export const ROAD_LTB = new TileFactory('road-ltb', 6, 8);
export const ROAD_RTB = new TileFactory('road-rtb', 6, 8);
export const ROAD_BLR = new SimpleTileFactory(8, 6, 'road-blr');
export const ROAD_TLR = new SimpleTileFactory(8, 6, 'road-tlr');
export const ROAD_LTB = new SimpleTileFactory(6, 8, 'road-ltb');
export const ROAD_RTB = new SimpleTileFactory(6, 8, 'road-rtb');
// +
export const ROAD_TBLR = new TileFactory('road-tblr', 8, 8);
export const ROAD_TBLR = new SimpleTileFactory(8, 8, 'road-tblr');
// Tower base
export const EMPTY = new TileFactory('empty', 4, 2);
export const EMPTY = new SimpleTileFactory(4, 2, 'empty');
// Straight
export const RIVER_LR = new TileFactory('river-lr', 6, 4);
export const RIVER_TB = new TileFactory('river-tb', 4, 6);
export const RIVER_LR = new SimpleTileFactory(6, 4, 'river-lr');
export const RIVER_TB = new SimpleTileFactory(4, 6, 'river-tb');
// Elbow
export const RIVER_BR = new TileFactory('river-br', 6, 6);
export const RIVER_BL = new TileFactory('river-bl', 6, 6);
export const RIVER_TR = new TileFactory('river-tr', 6, 6);
export const RIVER_TL = new TileFactory('river-tl', 6, 6);
export const BRIDGE_LR = new TileFactory('bridge-lr', 6, 4);
const tower_fireball1_back = new TileFactory('fireball1-back', 4, 4);
const tower_fireball1 = new TileFactory('fireball1', 4, 4);
const tower_fireball1_front = new TileFactory('fireball1-front', 4, 4);
for (const tile of [tower_fireball1_back, tower_fireball1_front]) {
tile.add_animation('fire', [
export const RIVER_BR = new SimpleTileFactory(6, 6, 'river-br');
export const RIVER_BL = new SimpleTileFactory(6, 6, 'river-bl');
export const RIVER_TR = new SimpleTileFactory(6, 6, 'river-tr');
export const RIVER_TL = new SimpleTileFactory(6, 6, 'river-tl');
export const BRIDGE_LR = new SimpleTileFactory(6, 4, 'bridge-lr');
const tower_fireball1_back = new SimpleTileFactory(4, 4, 'fireball1-back');
const tower_fireball1 = new SimpleTileFactory(4, 4, 'fireball1');
const tower_fireball1_front = new SimpleTileFactory(4, 4, 'fireball1-front');
for (const tile_factory of [tower_fireball1_back, tower_fireball1_front]) {
tile_factory.add_animation('fire', [
{
'offset': 0.0,
'easing': 'cubic-bezier(0.02, 1.07, 0.73, 0.99)',
@@ -55,63 +55,74 @@ export const TOWER_FIREBALL1 = new LayeredTileFactory([
tower_fireball1,
tower_fireball1_front,
]);
class Fireball extends TileFactory {
get_elem(tileset) {
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;
}
/*
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);
*/
//# sourceMappingURL=tiles.js.map