145 lines
3.6 KiB
TypeScript
145 lines
3.6 KiB
TypeScript
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);
|
|
|
|
// 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);
|
|
|
|
// 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_TBLR = new TileFactory('road-tblr', 8, 8);
|
|
|
|
// Tower base
|
|
export const EMPTY = new TileFactory('empty', 4, 2);
|
|
|
|
// Straight
|
|
export const RIVER_LR = new TileFactory('river-lr', 6, 4);
|
|
export const RIVER_TB = new TileFactory('river-tb', 4, 6);
|
|
|
|
// 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',
|
|
[
|
|
{
|
|
'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,
|
|
},
|
|
);
|
|
}
|
|
|
|
export const TOWER_FIREBALL1 = new LayeredTileFactory([
|
|
tower_fireball1_back,
|
|
tower_fireball1,
|
|
tower_fireball1_front,
|
|
]);
|
|
|
|
class Fireball extends TileFactory {
|
|
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);
|