resets

client/assets/styles/game.css

@@ -342,6 +342,15 @@
     opacity: 0;
 }
 
+.skill-animation {
+    opacity: 0;
+
+    transition-property: opacity;
+    transition-duration: 0.5s;
+    transition-delay: 0;
+    transition-timing-function: ease;
+}
+
 /*
     COMBAT ANIMATIONS
 */

client/src/animations.socket.jsx

@@ -37,7 +37,7 @@ function createSocket(store) {
             //     store.dispatch(actions.setResolution(stagedR));
             // });
 
-            setTimeout(cb, 2000);
+            setTimeout(cb, TIMES.RESOLUTION_TOTAL_MS);
         }, err => {
             if (err) return console.error(err);
             store.dispatch(actions.setResolution(null));

client/src/components/animations.jsx

@@ -99,7 +99,7 @@ function animations(props) {
             case 'Chaos': return <Chaos id={construct.id} team={player} colour={colours.purple}/>;
             case 'Slay': return <Slay id={construct.id} team={player} colour={colours.yellow}/>;
             case 'Heal': return <Heal id={construct.id} stage={stage} team={player} colour={colours.red}/>;
-            case 'Hex': return <Hex/>;
+            case 'Hex': return <Hex />;
             case 'Siphon': return <Siphon id={construct.id} stage={stage} team={player} colour={colours.red}/>;
             case 'SiphonTick': return <SiphonTick id={construct.id} stage={stage} team={player} colour={colours.red}/>;
             default: return false;

client/src/components/anims/amplify.jsx

@@ -1,12 +1,13 @@
 const preact = require('preact');
 const { Component } = require('preact');
-
 const anime = require('animejs').default;
 
+const { TIMES } = require('../../constants');
+
 class Amplify extends Component {
     constructor() {
         super();
-        this.id = Math.random();
+        this.animations = [];
     }
 
     render() {
@@ -30,24 +31,41 @@ class Amplify extends Component {
 
     componentDidMount() {
         const altPath = 'M0,100 C100,400 100,-200 200,100';
-        anime({
+
-            targets: '#amplify path',
+        this.animations.push(anime({
+            targets: ['#amplify'],
+            opacity: 1,
+        }));
+
+        this.animations.push(anime({
+            targets: ['#amplify path'],
             d: [{ value: altPath }],
             stroke: ['#3498db', '#a52a2a'],
-            duration: 1000,
-            direction: 'alternate',
             easing: 'easeInOutSine',
-            delay: 500,
-        });
 
-        anime({
+            duration: TIMES.TARGET_DURATION_MS,
+            delay: TIMES.TARGET_DELAY_MS,
+        }));
+
+        this.animations.push(anime({
             targets: ['#ampFilter feTurbulence', '#ampFilter feDisplacementMap'],
             baseFrequency: 0.15,
             scale: 4,
-            direction: 'alternate',
             easing: 'easeInOutExpo',
-            delay: 500,
+
-        });
+            duration: TIMES.TARGET_DURATION_MS,
+            delay: TIMES.TARGET_DELAY_MS,
+        }));
+    }
+
+    // this is necessary because
+    // skipping / timing / unmounting race conditions
+    // can cause the animations to cut short, this will ensure the values are reset
+    // because preact will recycle all these components
+    componentWillUnmount() {
+        for (let i = this.animations.length - 1; i >= 0; i--) {
+            this.animations[i].reset();
+        }
     }
 }
 

client/src/components/anims/buff.jsx

@@ -5,6 +5,11 @@ const anime = require('animejs').default;
 const { TIMES } = require('../../constants');
 
 class Buff extends Component {
+    constructor() {
+        super();
+        this.animations = [];
+    }
+
     render() {
         return (
             <svg
@@ -22,29 +27,39 @@ class Buff extends Component {
     }
 
     componentDidMount() {
-        anime({
+        this.animations.push(anime({
             targets: ['#buff .buff-one'],
             points: '0,190    100,10   190,190',
             easing: 'easeOutExpo',
             duration: TIMES.START_SKILL,
             complete: anim => anim.reset(),
-        });
+        }));
 
-        anime({
+        this.animations.push(anime({
             targets: ['#buff .buff-two'],
             points: '40,170    100,50   160,170',
             easing: 'easeOutExpo',
             duration: TIMES.START_SKILL,
             complete: anim => anim.reset(),
-        });
+        }));
 
-        anime({
+        this.animations.push(anime({
             targets: ['#buff .buff-three'],
             points: '70,150    100,90   130,150',
             easing: 'easeOutExpo',
             duration: TIMES.START_SKILL,
             complete: anim => anim.reset(),
-        });
+        }));
+    }
+
+    // this is necessary because
+    // skipping / timing / unmounting race conditions
+    // can cause the animations to cut short, this will ensure the values are reset
+    // because preact will recycle all these components
+    componentWillUnmount() {
+        for (let i = this.animations.length - 1; i >= 0; i--) {
+            this.animations[i].reset();
+        }
     }
 }
 

client/src/components/anims/debuff.jsx

@@ -4,16 +4,20 @@ const anime = require('animejs').default;
 
 const { TIMES } = require('../../constants');
 
-class Buff extends Component {
+class Debuff extends Component {
+    constructor() {
+        super();
+        this.animations = [];
+    }
+
     render() {
         return (
             <svg
                 id='buff'
                 version="1.1"
                 xmlns="http://www.w3.org/2000/svg"
-                viewBox="0 0 300 300"
                 style={{ transform: 'rotate(180deg)' }}
-                >
+                viewBox="0 0 300 300">
                 <g>
                     <polygon class='buff-one' points='0,190    100,300   190,190'/>
                     <polygon class='buff-two' points='40,170    100,300   160,170'/>
@@ -24,30 +28,40 @@ class Buff extends Component {
     }
 
     componentDidMount() {
-        anime({
+        this.animations.push(anime({
             targets: ['#buff .buff-one'],
             points: '0,190    100,10   190,190',
             easing: 'easeOutExpo',
             duration: TIMES.START_SKILL,
             complete: anim => anim.reset(),
-        });
+        }));
 
-        anime({
+        this.animations.push(anime({
             targets: ['#buff .buff-two'],
             points: '40,170    100,50   160,170',
             easing: 'easeOutExpo',
             duration: TIMES.START_SKILL,
             complete: anim => anim.reset(),
-        });
+        }));
 
-        anime({
+        this.animations.push(anime({
             targets: ['#buff .buff-three'],
             points: '70,150    100,90   130,150',
             easing: 'easeOutExpo',
             duration: TIMES.START_SKILL,
             complete: anim => anim.reset(),
-        });
+        }));
+    }
+
+    // this is necessary because
+    // skipping / timing / unmounting race conditions
+    // can cause the animations to cut short, this will ensure the values are reset
+    // because preact will recycle all these components
+    componentWillUnmount() {
+        for (let i = this.animations.length - 1; i >= 0; i--) {
+            this.animations[i].reset();
+        }
     }
 }
 
-module.exports = Buff;
+module.exports = Debuff;

client/src/components/anims/hex.jsx

@@ -9,18 +9,26 @@ const { TIMES } = require('../../constants');
 // https://animejs.com/documentation/#svgAttr
 
 class Hex extends Component {
+    constructor() {
+        super();
+        this.animations = [];
+    }
+
     render() {
         return (
             <svg
-                class='hex-anim skill-animation blue'
+                class='skill-animation blue'
                 version="1.1"
+                id="hex"
                 xmlns="http://www.w3.org/2000/svg"
                 viewBox="0 0 128 128">
-                <filter id='hexFilter'>
+                <filter id='hexFilter'
+                    key={Date.now()}>
                     <feTurbulence type="turbulence" baseFrequency="0.05" numOctaves="2" result="turbulence" style="transform: scale(1);"></feTurbulence>
                     <feDisplacementMap in2="turbulence" in="SourceGraphic" scale="15" xChannelSelector="R" yChannelSelector="G"></feDisplacementMap>
                 </filter>
                 <polygon
+                    key={Date.now()}
                     points="64 68.64 8.574 100 63.446 67.68 64 4 64.554 67.68 119.426 100"
                     style={{ filter: 'url("#hexFilter")' }}>
                 </polygon>
@@ -29,22 +37,42 @@ class Hex extends Component {
     }
 
     componentDidMount() {
-        anime({
+        this.animations.push(anime({
-            targets: ['.hex-anim polygon'],
+            targets: ['#hex'],
+            opacity: 1,
+
+            delay: TIMES.TARGET_DELAY_MS,
+            duration: TIMES.TARGET_DELAY_MS,
+        }));
+
+        this.animations.push(anime({
+            targets: ['#hex polygon'],
             points: '64 124.94732621931382 8.574 96.00354944613788 8.62269130211947 32.03166105954991 64 4 119.37730869788052 32.03166105954991 119.426 96.00354944613788',
             easing: 'easeOutExpo',
-            duration: TIMES.START_SKILL,
-            complete: anim => anim.reset(),
-        });
 
-        anime({
+            delay: TIMES.TARGET_DELAY_MS,
+            duration: TIMES.TARGET_DURATION_MS,
+        }));
+
+        this.animations.push(anime({
             targets: ['feTurbulence', 'feDisplacementMap'],
             baseFrequency: 0,
             scale: 1,
             easing: 'easeOutSine',
-            duration: TIMES.START_SKILL,
+
-            complete: anim => anim.reset(),
+            delay: TIMES.TARGET_DELAY_MS,
-        });
+            duration: TIMES.TARGET_DURATION_MS,
+        }));
+    }
+
+    // this is necessary because
+    // skipping / timing / unmounting race conditions
+    // can cause the animations to cut short, this will ensure the values are reset
+    // because preact will recycle all these components
+    componentWillUnmount() {
+        for (let i = this.animations.length - 1; i >= 0; i--) {
+            this.animations[i].reset();
+        }
     }
 }
 

client/src/constants.jsx

@@ -1,5 +1,11 @@
 module.exports = {
     TIMES: {
+        RESOLUTION_TOTAL_MS: 2000,
+
+        SOURCE_DURATION_MS: 1000,
+        TARGET_DELAY_MS: 500,
+        TARGET_DURATION_MS: 1500,
+
         START_SKILL: 2000,
         END_SKILL: 2000,
         POST_SKILL: 2000,