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

Prototype tower + projectile animation

Browse Source
This commit is contained in:
Ian Gulliver
2021-05-10 03:36:12 +00:00
parent 5e9a00ef76
commit 0818a57202
13 changed files with 5261 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
js/tile.js
View File

@@ -1,36 +1,18 @@
var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, privateMap, value) {
if (!privateMap.has(receiver)) {
throw new TypeError("attempted to set private field on non-instance");
}
privateMap.set(receiver, value);
return value;
};
var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, privateMap) {
if (!privateMap.has(receiver)) {
throw new TypeError("attempted to get private field on non-instance");
}
return privateMap.get(receiver);
};
var _name, _width, _height;
export class Tile {
constructor(name, width, height) {
_name.set(this, void 0);
_width.set(this, void 0);
_height.set(this, void 0);
__classPrivateFieldSet(this, _name, name);
__classPrivateFieldSet(this, _width, width);
__classPrivateFieldSet(this, _height, height);
this.name = name;
this.width = width;
this.height = height;
}
get_elem(tileset) {
const elem = document.createElement('div');
elem.style.backgroundImage = `url("images/${tileset}/${__classPrivateFieldGet(this, _name)}.svg")`;
elem.style.backgroundImage = `url("images/${tileset}/${this.name}.svg")`;
elem.style.backgroundSize = 'cover';
elem.style.gridColumnEnd = `span ${__classPrivateFieldGet(this, _width)}`;
elem.style.gridRowEnd = `span ${__classPrivateFieldGet(this, _height)}`;
elem.style.gridColumnEnd = `span ${this.width}`;
elem.style.gridRowEnd = `span ${this.height}`;
return elem;
}
}
_name = new WeakMap(), _width = new WeakMap(), _height = new WeakMap();
/*
function string_to_mask(mask_string: string): boolean[][] {
// mask_string: '\n+++\n+++\n'

2
js/tile.js.map
View File

@@ -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;QAJvD,wBAAc;QACd,yBAAe;QACf,0BAAgB;QAGd,uBAAA,IAAI,SAAS,IAAI,EAAC;QAClB,uBAAA,IAAI,UAAU,KAAK,EAAC;QACpB,uBAAA,IAAI,WAAW,MAAM,EAAC;IACxB,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,mCAAU,QAAQ,CAAC;QAC1E,IAAI,CAAC,KAAK,CAAC,cAAc,GAAG,OAAO,CAAC;QACpC,IAAI,CAAC,KAAK,CAAC,aAAa,GAAG,QAAQ,oCAAW,EAAE,CAAC;QACjD,IAAI,CAAC,KAAK,CAAC,UAAU,GAAG,QAAQ,qCAAY,EAAE,CAAC;QAC/C,OAAO,IAAI,CAAC;IACd,CAAC;CACF;;AAED;;;;;;;;;;;;;;;;;;;;;;;EAuBE"}
{"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"}

139
js/tiles.js
View File

@@ -25,4 +25,143 @@ 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([
{
'offset': 0.0,
'easing': 'cubic-bezier(0.02, 1.07, 0.73, 0.99)',
'top': '0',
},
{
'offset': 0.3,
'easing': 'linear',
'top': '25%',
},
{
'offset': 1.0,
'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': '25%',
},
{
'offset': 1.0,
'top': '0',
},
], {
'duration': 3000,
'iterations': 1,
});
}, 5000);
return elem;
}
}
export const FIREBALL1 = new Tower('fireball1', 4, 4);
class Fireball 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.visibility = 'hidden';
setInterval(() => {
base.animate([
{
'offset': 0.0,
'easing': 'cubic-bezier(0.33333, 0.66667, 0.66667, 1)',
'top': '0',
},
{
'offset': 0.50,
'easing': 'cubic-bezier(0.33333, 0, 0.66667, 0.33333)',
'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,
});
}, 5000);
return elem;
}
}
export const FIREBALL = new Fireball('fireball', 2, 2);
//# sourceMappingURL=tiles.js.map

2
js/tiles.js.map
View File

File diff suppressed because one or more lines are too long

5
js/tower.js
View File

@@ -20,7 +20,7 @@ export function main() {
const grid = new Grid(real);
grid.set_size(70, 56);
grid.set_tileset('tropical');
grid.set_layers(['road', 'water', 'bridge']);
grid.set_layers(['road', 'water', 'bridge', 'tower']);
grid.add_tile('road', tiles.ROAD_TB, 20, 46);
grid.add_tile('road', tiles.ROAD_BL, 18, 40);
grid.add_tile('road', tiles.ROAD_TR, 12, 38);
@@ -59,6 +59,7 @@ export function main() {
grid.add_tile('road', tiles.ROAD_LR, 46, 10);
grid.add_tile('road', tiles.ROAD_LR, 52, 10);
grid.add_tile('road', tiles.ROAD_LR, 58, 10);
grid.add_tile('road', tiles.EMPTY, 30, 20);
grid.add_tile('water', tiles.RIVER_TB, 47, 46);
grid.add_tile('water', tiles.RIVER_TB, 47, 40);
grid.add_tile('water', tiles.RIVER_TB, 47, 34);
@@ -72,6 +73,8 @@ 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.FIREBALL, 31, 17);
}
;
main();

2
js/tower.js.map
View File

File diff suppressed because one or more lines are too long