Merge branch 'develop' into line-anims

client/src/actions.jsx

@@ -2,6 +2,7 @@ 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 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 });

client/src/components/anims/absorb.jsx

@@ -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);

client/src/components/anims/amplify.jsx

@@ -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);

client/src/components/anims/attack.charge.jsx

@@ -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;

client/src/components/anims/bash.circle.jsx

@@ -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);

client/src/components/anims/bash.jsx

@@ -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);

client/src/components/anims/blast.jsx

@@ -1,12 +1,34 @@
 const preact = require('preact');
 const { Component } = require('preact');
+const { connect } = require('preact-redux');
 const anime = require('animejs').default;
 const times = require('lodash/times');
 
 const { TIMES, COLOURS } = require('../../constants');
 
+const addState = connect(
+    function receiveState(state) {
+        const { animCb } = state;
+        return { animCb };
+    }
+);
+
+function projectile(x, y, radius, colour) {
+    return (
+        <circle
+            cx={x}
+            cy={y}
+            r={radius}
+            fill="url(#grad1)"
+            stroke-width="2"
+            stroke={colour}
+            filter="url(#explosion)"
+        />
+    );
+}
+
 class Blast extends Component {
-    constructor() {
+    constructor(props) {
         super();
         this.animations = [];
     }
@@ -71,7 +93,8 @@ class Blast extends Component {
         for (let i = this.animations.length - 1; i >= 0; i--) {
             this.animations[i].reset();
         }
+        this.props.animCb();
     }
 }
 
-module.exports = Blast;
+module.exports = addState(Blast);

client/src/components/anims/block.jsx

@@ -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);

client/src/components/anims/break.jsx

@@ -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);

client/src/components/anims/buff.jsx

@@ -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);

client/src/components/anims/chaos.jsx

@@ -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);

client/src/components/anims/counter.jsx

@@ -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);

client/src/components/anims/curse.jsx

@@ -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);

client/src/components/anims/debuff.jsx

@@ -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);

client/src/components/anims/decay.jsx

@@ -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);

client/src/components/anims/electrify.jsx

@@ -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);

client/src/components/anims/electrocute.jsx

@@ -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);

client/src/components/anims/haste.jsx

@@ -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);

client/src/components/anims/heal.jsx

@@ -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);

client/src/components/anims/hex.jsx

@@ -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);

client/src/components/anims/hybrid.jsx

@@ -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);

client/src/components/anims/intercept.jsx

@@ -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);

client/src/components/anims/link.jsx

@@ -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);

client/src/components/anims/purge.jsx

@@ -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);

client/src/components/anims/purify.jsx

@@ -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);

client/src/components/anims/recharge.jsx

@@ -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);

client/src/components/anims/red.block.jsx

@@ -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);

client/src/components/anims/red.circles.jsx

@@ -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);

client/src/components/anims/reflect.jsx

@@ -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);

client/src/components/anims/restrict.jsx

@@ -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);

client/src/components/anims/ruin.jsx

@@ -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);

client/src/components/anims/silence.jsx

@@ -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);

client/src/components/anims/siphon.jsx

@@ -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);

client/src/components/anims/siphon.tick.jsx

@@ -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);

client/src/components/anims/slay.jsx

@@ -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);

client/src/components/anims/sleep.jsx

@@ -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);

client/src/components/anims/strike.jsx

@@ -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);

client/src/components/anims/stun.jsx

@@ -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);

client/src/components/anims/sustain.jsx

@@ -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);

client/src/components/anims/triage.jsx

@@ -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);

client/src/components/anims/triage.tick.jsx

@@ -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);

client/src/events.jsx

@@ -65,7 +65,10 @@ function registerEvents(store) {
                     store.dispatch(actions.setAnimFocus(animations.getFocusTargets(r)));
 
                     if (sequence.includes('START_SKILL')) store.dispatch(actions.setAnimSource(anims.animSource));
-                    if (sequence.includes('END_SKILL')) store.dispatch(actions.setAnimTarget(anims.animTarget));
+                    if (sequence.includes('END_SKILL')) {
+                        store.dispatch(actions.setAnimTarget(anims.animTarget));
+                        if (!['Banish', 'Invert'].includes(anims.animTarget.skill)) store.dispatch(actions.setAnimCb(cb));
+                    }
                     if (sequence.includes('POST_SKILL')) {
                         // timeout to prevent text classes from being added too soon
                         setTimeout(
@@ -73,15 +76,14 @@ function registerEvents(store) {
                             timeout - TIMES.POST_SKILL_DURATION_MS
                         );
                     }
-
                     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);
+                        if (!sequence.includes('END_SKILL')
+                            || ['Banish', 'Invert'].includes(anims.animTarget.skill)) return cb();
+                        return true;
                     }, timeout);
                 }, err => {
                     if (err) return console.error(err);

client/src/reducers.jsx

@@ -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'),