ntr/mnml
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

return cb from anim componentWillUnmount()

Browse Source
This commit is contained in:
Mashy 2019-07-23 15:05:03 +10:00
parent 314b34be19
commit a816e75554
45 changed files with 441 additions and 269 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
client/src/actions.jsx
View File

@ -1,11 +1,12 @@
export const setAccount = value => ({ type: 'SET_ACCOUNT', value });
export const setActiveConstruct = value => ({ type: 'SET_ACTIVE_CONSTRUCT', value });
export const setAnimating = value => ({ type: 'SET_ANIMATING', value });
export const setAnimFocus = value => ({ type: 'SET_ANIM_FOCUS', value });
export const setAnimating = value => ({ type: 'SET_ANIMATING', value });
export const setAnimCb = value => ({ type: 'SET_ANIM_CB', value });
export const setAnimFocus = value => ({ type: 'SET_ANIM_FOCUS', value });
export const setAnimSource = value => ({ type: 'SET_ANIM_SOURCE', value });
export const setAnimTarget = value => ({ type: 'SET_ANIM_TARGET', value });
export const setAnimText = value => ({ type: 'SET_ANIM_TEXT', value });
export const setAnimText = value => ({ type: 'SET_ANIM_TEXT', value });
export const setActiveItem = value => ({ type: 'SET_ACTIVE_VAR', value });
export const setActiveSkill = (constructId, skill) => ({ type: 'SET_ACTIVE_SKILL', value: constructId ? { constructId, skill } : null });

11
client/src/components/anims/absorb.jsx
View File

@ -1,10 +1,18 @@
const preact = require('preact');
const { Component } = require('preact');
const { connect } = require('preact-redux');
const anime = require('animejs').default;
const { TIMES } = require('../../constants');
const addState = connect(
function receiveState(state) {
const { animCb } = state;
return { animCb };
}
);
// shamelessly lifted from teh anime docs
// https://animejs.com/documentation/#svgAttr
@ -82,7 +90,8 @@ class Absorb extends Component {
for (let i = this.animations.length - 1; i >= 0; i--) {
this.animations[i].reset();
}
this.props.animCb();
}
}
module.exports = Absorb;
module.exports = addState(Absorb);

11
client/src/components/anims/amplify.jsx
View File

@ -1,9 +1,17 @@
const preact = require('preact');
const { Component } = require('preact');
const anime = require('animejs').default;
const { connect } = require('preact-redux');
const { TIMES } = require('../../constants');
const addState = connect(
function receiveState(state) {
const { animCb } = state;
return { animCb };
}
);
class Amplify extends Component {
constructor() {
super();
@ -70,7 +78,8 @@ class Amplify extends Component {
for (let i = this.animations.length - 1; i >= 0; i--) {
this.animations[i].reset();
}
this.props.animCb();
}
}
module.exports = Amplify;
module.exports = addState(Amplify);

60
client/src/components/anims/attack.charge.jsx
View File

@ -1,60 +0,0 @@
const preact = require('preact');
const { Component } = require('preact');
const anime = require('animejs').default;
const charge = require('../svgs/charge');
const { TIMES } = require('../../constants');
const { randomPoints } = require('../../utils');
class AttackCharge extends Component {
constructor(props) {
super();
this.team = props.team;
this.colour = props.colour;
const points = randomPoints(7, 50, { x: 0, y: 0, width: 300, height: 400 });
this.charges = points.map(coord => charge(coord[0], coord[1], 6, this.colour));
}
render() {
return (
<svg
class={'skill-anim'}
version="1.1"
id="Layer_1"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 300 400">
{this.charges}
</svg>
);
}
componentDidMount() {
const charges = document.querySelectorAll('#charge');
anime.set(charges, { fill: 'none' });
if (!this.team) {
anime.set('.skill-anim', {
rotate: 180,
});
} else {
anime.set('.skill-anim', {
rotate: 0,
});
}
this.anim = anime({
targets: charges,
fill: this.colour,
delay: anime.stagger(5, {
start: 100,
easing: 'linear',
}),
loop: false,
easing: 'easeInQuad',
});
}
componentWillUnmount() {
}
}
module.exports = AttackCharge;

82
client/src/components/anims/attack.jsx
View File

@ -1,82 +0,0 @@
const preact = require('preact');
const { Component } = require('preact');
const anime = require('animejs').default;
const dagger = require('../svgs/dagger');
const { TIMES } = require('../../constants');
const duration = TIMES.TARGET_DURATION_MS;
class Attack extends Component {
constructor(props) {
super();
this.props = props;
}
render() {
return (
<svg
class={'attack-anim'}
version="1.1"
id="Layer_1"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 300 400">
{dagger(10, 250, 40, 150)}
{dagger(50, 250, 40, 150)}
{dagger(90, 250, 40, 150)}
{dagger(130, 250, 40, 150)}
{dagger(170, 250, 40, 150)}
{dagger(210, 250, 40, 150)}
{dagger(250, 250, 40, 150)}
</svg>
);
}
componentDidMount() {
let y = 0;
const daggers = document.querySelectorAll('.attack-anim .dagger');
anime.set(daggers, {
y: 250,
});
y = -150;
if (!this.props.team) {
anime.set('.attack-anim', {
rotate: 180,
});
} else {
anime.set('.attack-anim', {
rotate: 0,
});
}
// if (this.props.stage === 'END_SKILL') {
// anime.set(daggers, {
// y: 400,
// });
// y = -150;
// if (!this.props.team) {
// anime.set('.attack-anim', {
// rotate: 0,
// });
// } else {
// anime.set('.attack-anim', {
// rotate: 180,
// });
// }
// }
anime({
targets: daggers,
delay: anime.stagger(250, {
start: 250,
grid: [1, 7],
from: 'center',
easing: 'linear',
}),
y,
duration,
});
}
}
module.exports = Attack;

12
client/src/components/anims/bash.circle.jsx
View File

@ -1,10 +1,17 @@
const preact = require('preact');
const { Component } = require('preact');
const { connect } = require('preact-redux');
const anime = require('animejs').default;
const { TIMES } = require('../../constants');
const addState = connect(
function receiveState(state) {
const { animCb } = state;
return { animCb };
}
);
class Bash extends Component {
constructor() {
super();
@ -93,7 +100,8 @@ class Bash extends Component {
for (let i = this.animations.length - 1; i >= 0; i--) {
this.animations[i].reset();
}
this.props.animCb();
}
}
module.exports = Bash;
module.exports = addState(Bash);

11
client/src/components/anims/bash.jsx
View File

@ -1,10 +1,18 @@
const preact = require('preact');
const { Component } = require('preact');
const { connect } = require('preact-redux');
const anime = require('animejs').default;
const { TIMES } = require('../../constants');
const addState = connect(
function receiveState(state) {
const { animCb } = state;
return { animCb };
}
);
class Bash extends Component {
constructor() {
super();
@ -95,7 +103,8 @@ class Bash extends Component {
for (let i = this.animations.length - 1; i >= 0; i--) {
this.animations[i].reset();
}
this.props.animCb();
}
}
module.exports = Bash;
module.exports = addState(Bash);

20
client/src/components/anims/blast.jsx
View File

@ -1,12 +1,17 @@
const preact = require('preact');
const { Component } = require('preact');
const { connect } = require('preact-redux');
const anime = require('animejs').default;
const { TIMES } = require('../../constants');
const { randomPoints } = require('../../utils');
const duration = TIMES.TARGET_DURATION_MS;
const addState = connect(
function receiveState(state) {
const { animCb } = state;
return { animCb };
}
);
function projectile(x, y, radius, colour) {
return (
@ -22,7 +27,7 @@ function projectile(x, y, radius, colour) {
);
}
class AttackCharge extends Component {
class Blast extends Component {
constructor(props) {
super();
this.team = props.team;
@ -81,7 +86,7 @@ class AttackCharge extends Component {
translateX: 0,
loop: false,
delay: TIMES.TARGET_DELAY_MS,
duration: (duration * 1 / 2),
duration: (TIMES.TARGET_DURATION_MS * 1 / 2),
easing: 'easeInQuad',
}));
@ -89,8 +94,8 @@ class AttackCharge extends Component {
targets: '#explosion feDisplacementMap',
scale: 200,
loop: false,
delay: TIMES.TARGET_DELAY_MS + duration * 1 / 2,
duration: duration * 1 / 2,
delay: TIMES.TARGET_DELAY_MS + TIMES.TARGET_DURATION_MS * 1 / 2,
duration: TIMES.TARGET_DURATION_MS * 1 / 2,
easing: 'easeInQuad',
}));
}
@ -99,7 +104,8 @@ class AttackCharge extends Component {
for (let i = this.animations.length - 1; i >= 0; i--) {
this.animations[i].reset();
}
this.props.animCb();
}
}
module.exports = AttackCharge;
module.exports = addState(Blast);

11
client/src/components/anims/block.jsx
View File

@ -1,9 +1,17 @@
const preact = require('preact');
const { Component } = require('preact');
const anime = require('animejs').default;
const { connect } = require('preact-redux');
const { TIMES } = require('../../constants');
const addState = connect(
function receiveState(state) {
const { animCb } = state;
return { animCb };
}
);
class Block extends Component {
constructor() {
super();
@ -51,7 +59,8 @@ class Block extends Component {
for (let i = this.animations.length - 1; i >= 0; i--) {
this.animations[i].reset();
}
this.props.animCb();
}
}
module.exports = Block;
module.exports = addState(Block);

10
client/src/components/anims/break.jsx
View File

@ -1,12 +1,20 @@
const preact = require('preact');
const { Component } = require('preact');
const anime = require('animejs').default;
const { connect } = require('preact-redux');
const { TIMES, COLOURS } = require('../../constants');
// logarithmic spiral lifted from
// https://upload.wikimedia.org/wikipedia/commons/5/5b/Logarithmic_spiral_(1).svg
const addState = connect(
function receiveState(state) {
const { animCb } = state;
return { animCb };
}
);
class Break extends Component {
constructor() {
super();
@ -102,4 +110,4 @@ class Break extends Component {
}
}
module.exports = Break;
module.exports = addState(Break);

11
client/src/components/anims/buff.jsx
View File

@ -1,9 +1,17 @@
const preact = require('preact');
const { Component } = require('preact');
const anime = require('animejs').default;
const { connect } = require('preact-redux');
const { TIMES } = require('../../constants');
const addState = connect(
function receiveState(state) {
const { animCb } = state;
return { animCb };
}
);
class Buff extends Component {
constructor() {
super();
@ -73,7 +81,8 @@ class Buff extends Component {
for (let i = this.animations.length - 1; i >= 0; i--) {
this.animations[i].reset();
}
this.props.animCb();
}
}
module.exports = Buff;
module.exports = addState(Buff);

22
client/src/components/anims/chaos.jsx
View File

@ -1,11 +1,17 @@
const preact = require('preact');
const { Component } = require('preact');
const anime = require('animejs').default;
const { connect } = require('preact-redux');
const { TIMES } = require('../../constants');
const { randomPoints } = require('../../utils');
const duration = TIMES.TARGET_DURATION_MS;
const addState = connect(
function receiveState(state) {
const { animCb } = state;
return { animCb };
}
);
function projectile(x, y, radius, colour) {
return (
@ -21,7 +27,7 @@ function projectile(x, y, radius, colour) {
);
}
class AttackCharge extends Component {
class Chaos extends Component {
constructor() {
super();
this.animations = [];
@ -88,15 +94,15 @@ class AttackCharge extends Component {
translateX: 0,
loop: false,
delay: TIMES.TARGET_DELAY_MS,
duration: (duration * 1 / 2),
duration: (TIMES.TARGET_DURATION_MS * 1 / 2),
easing: 'easeInQuad',
}));
this.animations.push(anime({
targets: '#explosion feDisplacementMap',
scale: 75,
loop: false,
delay: (TIMES.TARGET_DELAY_MS + duration * 2 / 3),
duration: (duration * 1 / 3),
delay: (TIMES.TARGET_DELAY_MS + TIMES.TARGET_DURATION_MS * 2 / 3),
duration: (TIMES.TARGET_DURATION_MS * 1 / 3),
easing: 'easeInQuad',
}));
@ -105,7 +111,7 @@ class AttackCharge extends Component {
cx: Math.random() * 250 + 25,
cy: Math.random() * 300 + 50,
delay: TIMES.TARGET_DELAY_MS,
duration: (duration * 2 / 3),
duration: (TIMES.TARGET_DURATION_MS * 2 / 3),
easing: 'easeInQuad',
}));
}
@ -114,8 +120,8 @@ class AttackCharge extends Component {
for (let i = this.animations.length - 1; i >= 0; i--) {
this.animations[i].reset();
}
this.props.animCb();
}
}
module.exports = AttackCharge;
module.exports = addState(Chaos);

11
client/src/components/anims/counter.jsx
View File

@ -1,9 +1,17 @@
const preact = require('preact');
const { Component } = require('preact');
const anime = require('animejs').default;
const { connect } = require('preact-redux');
const { TIMES } = require('../../constants');
const addState = connect(
function receiveState(state) {
const { animCb } = state;
return { animCb };
}
);
class Counter extends Component {
constructor() {
super();
@ -77,7 +85,8 @@ class Counter extends Component {
for (let i = this.animations.length - 1; i >= 0; i--) {
this.animations[i].reset();
}
this.props.animCb();
}
}
module.exports = Counter;
module.exports = addState(Counter);

16
client/src/components/anims/curse.jsx
View File

@ -1,11 +1,16 @@
const preact = require('preact');
const { Component } = require('preact');
const anime = require('animejs').default;
const { connect } = require('preact-redux');
const {
TIMES,
COLOURS,
} = require('../../constants');
const { TIMES } = require('../../constants');
const addState = connect(
function receiveState(state) {
const { animCb } = state;
return { animCb };
}
);
class Curse extends Component {
constructor() {
@ -73,7 +78,8 @@ class Curse extends Component {
for (let i = this.animations.length - 1; i >= 0; i--) {
this.animations[i].reset();
}
this.props.animCb();
}
}
module.exports = Curse;
module.exports = addState(Curse);

11
client/src/components/anims/debuff.jsx
View File

@ -1,9 +1,17 @@
const preact = require('preact');
const { Component } = require('preact');
const anime = require('animejs').default;
const { connect } = require('preact-redux');
const { TIMES } = require('../../constants');
const addState = connect(
function receiveState(state) {
const { animCb } = state;
return { animCb };
}
);
class Debuff extends Component {
constructor() {
super();
@ -75,7 +83,8 @@ class Debuff extends Component {
for (let i = this.animations.length - 1; i >= 0; i--) {
this.animations[i].reset();
}
this.props.animCb();
}
}
module.exports = Debuff;
module.exports = addState(Debuff);

11
client/src/components/anims/decay.jsx
View File

@ -2,9 +2,17 @@ const preact = require('preact');
const { Component } = require('preact');
const anime = require('animejs').default;
const times = require('lodash/times');
const { connect } = require('preact-redux');
const { TIMES, COLOURS } = require('../../constants');
const addState = connect(
function receiveState(state) {
const { animCb } = state;
return { animCb };
}
);
class Decay extends Component {
constructor() {
super();
@ -69,7 +77,8 @@ class Decay extends Component {
for (let i = this.animations.length - 1; i >= 0; i--) {
this.animations[i].reset();
}
this.props.animCb();
}
}
module.exports = Decay;
module.exports = addState(Decay);

11
client/src/components/anims/electrify.jsx
View File

@ -1,11 +1,19 @@
const preact = require('preact');
const { Component } = require('preact');
const times = require('lodash/times');
const { connect } = require('preact-redux');
const anime = require('animejs').default;
const { TIMES } = require('../../constants');
const addState = connect(
function receiveState(state) {
const { animCb } = state;
return { animCb };
}
);
class Electrify extends Component {
constructor() {
super();
@ -101,7 +109,8 @@ class Electrify extends Component {
for (let i = this.animations.length - 1; i >= 0; i--) {
this.animations[i].reset();
}
this.props.animCb();
}
}
module.exports = Electrify;
module.exports = addState(Electrify);

13
client/src/components/anims/electrocute.jsx
View File

@ -1,12 +1,20 @@
const preact = require('preact');
const { Component } = require('preact');
const times = require('lodash/times')
const { connect } = require('preact-redux');
const anime = require('animejs').default;
const { TIMES } = require('../../constants');
class Electrify extends Component {
const addState = connect(
function receiveState(state) {
const { animCb } = state;
return { animCb };
}
);
class Electrocute extends Component {
constructor() {
super();
this.animations = [];
@ -93,7 +101,8 @@ class Electrify extends Component {
for (let i = this.animations.length - 1; i >= 0; i--) {
this.animations[i].reset();
}
this.props.animCb();
}
}
module.exports = Electrify;
module.exports = addState(Electrocute);

15
client/src/components/anims/haste.jsx
View File

@ -1,9 +1,17 @@
const preact = require('preact');
const { Component } = require('preact');
const anime = require('animejs').default;
const { connect } = require('preact-redux');
const { TIMES, COLOURS } = require('../../constants');
const addState = connect(
function receiveState(state) {
const { animCb } = state;
return { animCb };
}
);
class Haste extends Component {
constructor() {
super();
@ -26,9 +34,7 @@ class Haste extends Component {
</feTurbulence>
<feDisplacementMap in2="turbulence" in="SourceGraphic" scale="1" xChannelSelector="R" yChannelSelector="G"></feDisplacementMap>
</filter>
<g
filter='url("#hasteFilter")'
>
<g filter='url("#hasteFilter")'>
<polygon points="10,190 100,10 190,190"/>
<polygon points="40,170 100,50 160,170"/>
<polygon points="70,150 100,90 130,150"/>
@ -77,7 +83,8 @@ class Haste extends Component {
for (let i = this.animations.length - 1; i >= 0; i--) {
this.animations[i].reset();
}
this.props.animCb();
}
}
module.exports = Haste;
module.exports = addState(Haste);

17
client/src/components/anims/heal.jsx
View File

@ -1,10 +1,18 @@
const preact = require('preact');
const { Component } = require('preact');
const anime = require('animejs').default;
const { connect } = require('preact-redux');
const { TIMES, COLOURS } = require('../../constants');
const { randomPoints } = require('../../utils');
const addState = connect(
function receiveState(state) {
const { animCb } = state;
return { animCb };
}
);
function projectile(x, y, radius, colour) {
return (
<circle
@ -68,6 +76,13 @@ class Heal extends Component {
direction: 'reverse',
}));
}
componentWillUnmount() {
for (let i = this.animations.length - 1; i >= 0; i--) {
this.animations[i].reset();
}
this.props.animCb();
}
}
module.exports = Heal;
module.exports = addState(Heal);

11
client/src/components/anims/hex.jsx
View File

@ -1,10 +1,16 @@
const preact = require('preact');
const { Component } = require('preact');
const { connect } = require('preact-redux');
const anime = require('animejs').default;
const { TIMES } = require('../../constants');
const addState = connect(
function receiveState(state) {
const { animCb } = state;
return { animCb };
}
);
// shamelessly lifted from teh anime docs
// https://animejs.com/documentation/#svgAttr
@ -82,7 +88,8 @@ class Hex extends Component {
for (let i = this.animations.length - 1; i >= 0; i--) {
this.animations[i].reset();
}
this.props.animCb();
}
}
module.exports = Hex;
module.exports = addState(Hex);

17
client/src/components/anims/hybrid.jsx
View File

@ -1,9 +1,17 @@
const preact = require('preact');
const { Component } = require('preact');
const anime = require('animejs').default;
const { connect } = require('preact-redux');
const { TIMES, COLOURS } = require('../../constants');
const addState = connect(
function receiveState(state) {
const { animCb } = state;
return { animCb };
}
);
class Hybrid extends Component {
constructor() {
super();
@ -139,9 +147,14 @@ class Hybrid extends Component {
easing: 'easeInOutSine',
loop: true,
}));
}
componentWillUnmount() {
for (let i = this.animations.length - 1; i >= 0; i--) {
this.animations[i].reset();
}
this.props.animCb();
}
}
module.exports = Hybrid;
module.exports = addState(Hybrid);

11
client/src/components/anims/intercept.jsx
View File

@ -1,5 +1,6 @@
const preact = require('preact');
const { Component } = require('preact');
const { connect } = require('preact-redux');
const anime = require('animejs').default;
@ -8,6 +9,13 @@ const {
COLOURS,
} = require('../../constants');
const addState = connect(
function receiveState(state) {
const { animCb } = state;
return { animCb };
}
);
class Intercept extends Component {
constructor() {
super();
@ -88,7 +96,8 @@ class Intercept extends Component {
for (let i = this.animations.length - 1; i >= 0; i--) {
this.animations[i].reset();
}
this.props.animCb();
}
}
module.exports = Intercept;
module.exports = addState(Intercept);

11
client/src/components/anims/link.jsx
View File

@ -1,10 +1,18 @@
const preact = require('preact');
const { Component } = require('preact');
const { connect } = require('preact-redux');
const anime = require('animejs').default;
const { TIMES } = require('../../constants');
const addState = connect(
function receiveState(state) {
const { animCb } = state;
return { animCb };
}
);
class Link extends Component {
constructor() {
super();
@ -83,7 +91,8 @@ class Link extends Component {
for (let i = this.animations.length - 1; i >= 0; i--) {
this.animations[i].reset();
}
this.props.animCb();
}
}
module.exports = Link;
module.exports = addState(Link);

11
client/src/components/anims/purge.jsx
View File

@ -1,9 +1,17 @@
const preact = require('preact');
const { Component } = require('preact');
const anime = require('animejs').default;
const { connect } = require('preact-redux');
const { TIMES } = require('../../constants');
const addState = connect(
function receiveState(state) {
const { animCb } = state;
return { animCb };
}
);
class Purge extends Component {
constructor() {
super();
@ -73,7 +81,8 @@ class Purge extends Component {
for (let i = this.animations.length - 1; i >= 0; i--) {
this.animations[i].reset();
}
this.props.animCb();
}
}
module.exports = Purge;
module.exports = addState(Purge);

11
client/src/components/anims/purify.jsx
View File

@ -1,9 +1,17 @@
const preact = require('preact');
const { Component } = require('preact');
const anime = require('animejs').default;
const { connect } = require('preact-redux');
const { TIMES, COLOURS } = require('../../constants');
const addState = connect(
function receiveState(state) {
const { animCb } = state;
return { animCb };
}
);
function projectile(x, y, radius, colour) {
return (
<circle
@ -107,7 +115,8 @@ class Purify extends Component {
for (let i = this.animations.length - 1; i >= 0; i--) {
this.animations[i].reset();
}
this.props.animCb();
}
}
module.exports = Purify;
module.exports = addState(Purify);

11
client/src/components/anims/recharge.jsx
View File

@ -1,9 +1,17 @@
const preact = require('preact');
const { Component } = require('preact');
const anime = require('animejs').default;
const { connect } = require('preact-redux');
const { TIMES } = require('../../constants');
const addState = connect(
function receiveState(state) {
const { animCb } = state;
return { animCb };
}
);
class Recharge extends Component {
constructor() {
super();
@ -87,7 +95,8 @@ class Recharge extends Component {
for (let i = this.animations.length - 1; i >= 0; i--) {
this.animations[i].reset();
}
this.props.animCb();
}
}
module.exports = Recharge;
module.exports = addState(Recharge);

11
client/src/components/anims/red.block.jsx
View File

@ -1,9 +1,17 @@
const preact = require('preact');
const { Component } = require('preact');
const anime = require('animejs').default;
const { connect } = require('preact-redux');
const { TIMES } = require('../../constants');
const addState = connect(
function receiveState(state) {
const { animCb } = state;
return { animCb };
}
);
class Block extends Component {
constructor() {
super();
@ -68,7 +76,8 @@ class Block extends Component {
for (let i = this.animations.length - 1; i >= 0; i--) {
this.animations[i].reset();
}
this.props.animCb();
}
}
module.exports = Block;
module.exports = addState(Block);

12
client/src/components/anims/red.circles.js → client/src/components/anims/red.circles.jsx
View File

@ -1,10 +1,17 @@
const preact = require('preact');
const { Component } = require('preact');
const anime = require('animejs').default;
const { connect } = require('preact-redux');
const { TIMES } = require('../../constants');
const addState = connect(
function receiveState(state) {
const { animCb } = state;
return { animCb };
}
);
class Intercept extends Component {
constructor() {
super();
@ -75,7 +82,8 @@ class Intercept extends Component {
for (let i = this.animations.length - 1; i >= 0; i--) {
this.animations[i].reset();
}
this.props.animCb();
}
}
module.exports = Intercept;
module.exports = addState(Intercept);

13
client/src/components/anims/reflect.jsx
View File

@ -1,8 +1,16 @@
const preact = require('preact');
const { Component } = require('preact');
const anime = require('animejs').default;
const { connect } = require('preact-redux');
const { TIMES, COLOURS } = require('../../constants');
const { TIMES } = require('../../constants');
const addState = connect(
function receiveState(state) {
const { animCb } = state;
return { animCb };
}
);
class Refl extends Component {
constructor() {
@ -69,7 +77,8 @@ class Refl extends Component {
for (let i = this.animations.length - 1; i >= 0; i--) {
this.animations[i].reset();
}
this.props.animCb();
}
}
module.exports = Refl;
module.exports = addState(Refl);

12
client/src/components/anims/restrict.jsx
View File

@ -1,10 +1,17 @@
const preact = require('preact');
const { Component } = require('preact');
const anime = require('animejs').default;
const { connect } = require('preact-redux');
const { TIMES } = require('../../constants');
const addState = connect(
function receiveState(state) {
const { animCb } = state;
return { animCb };
}
);
class Restrict extends Component {
constructor() {
super();
@ -96,7 +103,8 @@ class Restrict extends Component {
for (let i = this.animations.length - 1; i >= 0; i--) {
this.animations[i].reset();
}
this.props.animCb();
}
}
module.exports = Restrict;
module.exports = addState(Restrict);

13
client/src/components/anims/ruin.jsx
View File

@ -1,11 +1,16 @@
const preact = require('preact');
const { Component } = require('preact');
const anime = require('animejs').default;
const { connect } = require('preact-redux');
const { TIMES } = require('../../constants');
// logarithmic spiral lifted from
// https://upload.wikimedia.org/wikipedia/commons/5/5b/Logarithmic_spiral_(1).svg
const addState = connect(
function receiveState(state) {
const { animCb } = state;
return { animCb };
}
);
class Ruin extends Component {
constructor() {
@ -93,8 +98,8 @@ class Ruin extends Component {
componentWillUnmount() {
for (let i = this.animations.length - 1; i >= 0; i--) {
this.animations[i].reset();
}
} this.props.animCb();
}
}
module.exports = Ruin;
module.exports = addState(Ruin);

12
client/src/components/anims/silence.jsx
View File

@ -1,10 +1,17 @@
const preact = require('preact');
const { Component } = require('preact');
const { connect } = require('preact-redux');
const anime = require('animejs').default;
const { TIMES } = require('../../constants');
const addState = connect(
function receiveState(state) {
const { animCb } = state;
return { animCb };
}
);
class Silence extends Component {
constructor() {
super();
@ -90,7 +97,8 @@ class Silence extends Component {
for (let i = this.animations.length - 1; i >= 0; i--) {
this.animations[i].reset();
}
this.props.animCb();
}
}
module.exports = Silence;
module.exports = addState(Silence);

13
client/src/components/anims/siphon.jsx
View File

@ -1,12 +1,20 @@
const preact = require('preact');
const { Component } = require('preact');
const anime = require('animejs').default;
const { connect } = require('preact-redux');
const { TIMES } = require('../../constants');
const duration = TIMES.TARGET_DURATION_MS;
class AttackCharge extends Component {
const addState = connect(
function receiveState(state) {
const { animCb } = state;
return { animCb };
}
);
class Siphon extends Component {
constructor() {
super();
this.animations = [];
@ -61,8 +69,9 @@ class AttackCharge extends Component {
for (let i = this.animations.length - 1; i >= 0; i--) {
this.animations[i].reset();
}
this.props.animCb();
}
}
module.exports = AttackCharge;
module.exports = addState(Siphon);

18
client/src/components/anims/siphon.tick.jsx
View File

@ -1,11 +1,18 @@
const preact = require('preact');
const { Component } = require('preact');
const anime = require('animejs').default;
const { connect } = require('preact-redux');
const { TIMES } = require('../../constants');
const duration = TIMES.TARGET_DURATION_MS;
const addState = connect(
function receiveState(state) {
const { animCb } = state;
return { animCb };
}
);
function projectile(x, y, radius, colour) {
return (
@ -24,7 +31,7 @@ class SiphonTick extends Component {
constructor(props) {
super();
this.team = props.team;
// this.colour = props.colour;
this.animations = [];
this.colour = '#3498db';
const points = new Array(15).fill(0);
this.charges = points.map(() => projectile(150, 150, 7, '#1FF01F'));
@ -104,6 +111,13 @@ class SiphonTick extends Component {
});
});
}
componentWillUnmount() {
for (let i = this.animations.length - 1; i >= 0; i--) {
this.animations[i].reset();
}
this.props.animCb();
}
}
module.exports = SiphonTick;
module.exports = addState(SiphonTick);

14
client/src/components/anims/slay.jsx
View File

@ -1,12 +1,19 @@
const preact = require('preact');
const { Component } = require('preact');
const anime = require('animejs').default;
const { connect } = require('preact-redux');
const { TIMES } = require('../../constants');
const { randomPoints } = require('../../utils');
const duration = TIMES.TARGET_DURATION_MS;
const addState = connect(
function receiveState(state) {
const { animCb } = state;
return { animCb };
}
);
function projectile(x, y, radius, colour) {
return (
@ -31,8 +38,8 @@ function sword(colour) {
);
}
class AttackCharge extends Component {
constructor(props) {
class Slay extends Component {
constructor() {
super();
this.animations = [];
this.colour = '#a52a2a';
@ -145,7 +152,8 @@ class AttackCharge extends Component {
for (let i = this.animations.length - 1; i >= 0; i--) {
this.animations[i].reset();
}
this.props.animCb();
}
}
module.exports = AttackCharge;
module.exports = addState(Slay);

11
client/src/components/anims/sleep.jsx
View File

@ -1,6 +1,7 @@
const preact = require('preact');
const { Component } = require('preact');
const anime = require('animejs').default;
const { connect } = require('preact-redux');
const { TIMES, COLOURS } = require('../../constants');
const { randomPoints } = require('../../utils');
@ -8,6 +9,13 @@ const { randomPoints } = require('../../utils');
// logarithmic spiral lifted from
// https://upload.wikimedia.org/wikipedia/commons/5/5b/Logarithmic_spiral_(1).svg
const addState = connect(
function receiveState(state) {
const { animCb } = state;
return { animCb };
}
);
function projectile(x, y, radius, colour) {
return (
<circle
@ -132,7 +140,8 @@ class Sleep extends Component {
for (let i = this.animations.length - 1; i >= 0; i--) {
this.animations[i].reset();
}
this.props.animCb();
}
}
module.exports = Sleep;
module.exports = addState(Sleep);

11
client/src/components/anims/strike.jsx
View File

@ -1,9 +1,17 @@
const preact = require('preact');
const { Component } = require('preact');
const anime = require('animejs').default;
const { connect } = require('preact-redux');
const { TIMES } = require('../../constants');
const addState = connect(
function receiveState(state) {
const { animCb } = state;
return { animCb };
}
);
function laser(dimensions, colour) {
const { x, y, length } = dimensions;
return (
@ -112,7 +120,8 @@ class Strike extends Component {
for (let i = this.animations.length - 1; i >= 0; i--) {
this.animations[i].reset();
}
this.props.animCb();
}
}
module.exports = Strike;
module.exports = addState(Strike);

11
client/src/components/anims/stun.jsx
View File

@ -1,12 +1,20 @@
const preact = require('preact');
const { Component } = require('preact');
const anime = require('animejs').default;
const { connect } = require('preact-redux');
const { TIMES } = require('../../constants');
// logarithmic spiral lifted from
// https://upload.wikimedia.org/wikipedia/commons/5/5b/Logarithmic_spiral_(1).svg
const addState = connect(
function receiveState(state) {
const { animCb } = state;
return { animCb };
}
);
class Stun extends Component {
constructor() {
super();
@ -70,7 +78,8 @@ class Stun extends Component {
for (let i = this.animations.length - 1; i >= 0; i--) {
this.animations[i].reset();
}
this.props.animCb();
}
}
module.exports = Stun;
module.exports = addState(Stun);

11
client/src/components/anims/sustain.jsx
View File

@ -1,9 +1,17 @@
const preact = require('preact');
const { Component } = require('preact');
const anime = require('animejs').default;
const { connect } = require('preact-redux');
const { TIMES, COLOURS } = require('../../constants');
const addState = connect(
function receiveState(state) {
const { animCb } = state;
return { animCb };
}
);
class Sustain extends Component {
constructor() {
super();
@ -119,7 +127,8 @@ class Sustain extends Component {
for (let i = this.animations.length - 1; i >= 0; i--) {
this.animations[i].reset();
}
this.props.animCb();
}
}
module.exports = Sustain;
module.exports = addState(Sustain);

17
client/src/components/anims/triage.jsx
View File

@ -1,10 +1,18 @@
const preact = require('preact');
const { Component } = require('preact');
const anime = require('animejs').default;
const { connect } = require('preact-redux');
const { TIMES, COLOURS } = require('../../constants');
const { randomPoints } = require('../../utils');
const addState = connect(
function receiveState(state) {
const { animCb } = state;
return { animCb };
}
);
function projectile(x, y, radius, colour) {
return (
<circle
@ -67,6 +75,13 @@ class Triage extends Component {
direction: 'reverse',
}));
}
componentWillUnmount() {
for (let i = this.animations.length - 1; i >= 0; i--) {
this.animations[i].reset();
}
this.props.animCb();
}
}
module.exports = Triage;
module.exports = addState(Triage);

11
client/src/components/anims/triage.tick.jsx
View File

@ -1,6 +1,7 @@
const preact = require('preact');
const { Component } = require('preact');
const anime = require('animejs').default;
const { connect } = require('preact-redux');
const { TIMES, COLOURS } = require('../../constants');
const { randomPoints } = require('../../utils');
@ -17,6 +18,13 @@ function projectile(x, y, radius, colour) {
);
}
const addState = connect(
function receiveState(state) {
const { animCb } = state;
return { animCb };
}
);
class TriageTick extends Component {
constructor(props) {
super();
@ -71,7 +79,8 @@ class TriageTick extends Component {
for (let i = this.animations.length - 1; i >= 0; i--) {
this.animations[i].reset();
}
this.props.animCb();
}
}
module.exports = TriageTick;
module.exports = addState(TriageTick);

43
client/src/components/svgs/dagger.jsx
View File

File diff suppressed because one or more lines are too long

20
client/src/events.jsx
View File

@ -75,13 +75,19 @@ function registerEvents(store) {
}
return setTimeout(() => {
store.dispatch(actions.setAnimSource(null));
store.dispatch(actions.setAnimTarget(null));
store.dispatch(actions.setAnimText(null));
store.dispatch(actions.setAnimFocus([]));
// We currently need another small timeout so that everything can properly dismount / unload
// Otherwise 3 x Attack on same target will only render the first time
return setTimeout(cb, 200);
const clearAnimProps = () => {
store.dispatch(actions.setAnimSource(null));
store.dispatch(actions.setAnimTarget(null));
store.dispatch(actions.setAnimText(null));
store.dispatch(actions.setAnimFocus([]));
};
if (sequence.includes('END_SKILL')) {
// If we are have an animation playing let the anim return cb()
store.dispatch(actions.setAnimCb(cb));
return clearAnimProps();
}
clearAnimProps();
return cb();
}, timeout);
}, err => {
if (err) return console.error(err);

1
client/src/reducers.jsx
View File

@ -17,6 +17,7 @@ module.exports = {
activeSkill: createReducer(null, 'SET_ACTIVE_SKILL'),
animating: createReducer(false, 'SET_ANIMATING'),
animCb: createReducer(null, 'SET_ANIM_CB'),
animSource: createReducer(null, 'SET_ANIM_SOURCE'),
animFocus: createReducer(null, 'SET_ANIM_FOCUS'),
animTarget: createReducer(null, 'SET_ANIM_TARGET'),