strike fixes

client/src/components/anims/reflect.jsx

@@ -4,7 +4,7 @@ const anime = require('animejs').default;
 
 const { TIMES, COLOURS } = require('../../constants');
 
-class Reflect extends Component {
+class Refl extends Component {
     constructor() {
         super();
         this.animations = [];
@@ -72,4 +72,4 @@ class Reflect extends Component {
     }
 }
 
-module.exports = Reflect;
+module.exports = Refl;

client/src/components/anims/strike.jsx

@@ -4,21 +4,18 @@ const anime = require('animejs').default;
 
 const { TIMES } = require('../../constants');
 
-const duration = TIMES.TARGET_DURATION_MS;
-
-
 function laser(dimensions, colour) {
     const { x, y, length } = dimensions;
     return (
         <rect
-            width="18"
+            width="14"
             height={length}
             x={x}
             y={y}
             fill="url(#grad1)"
             stroke-width="2"
             stroke={colour}
-            filter="url(#explosion)"
+            filter="url(#strikeFilter)"
         />
     );
 }
@@ -27,14 +24,14 @@ class Strike extends Component {
     constructor(props) {
         super();
         this.team = props.team;
-        // this.colour = props.colour;
+        this.animations = [];
         this.colour = props.colour;
 
-        const coord = [0, 100, 200];
+        const coord = [0, 50, 100, 150, 200];
         const points = coord.map(pos => ({
-            x: pos + Math.random() * 80,
+            x: pos + Math.random() * 40,
             y: 50 + Math.random() * 100,
-            length: 150 + Math.random() * 100,
+            length: 150 + Math.random() * 150,
         }));
         this.charges = points.map(pos => laser(pos, this.colour));
     }
@@ -42,9 +39,9 @@ class Strike extends Component {
     render() {
         return (
             <svg
-                class={'skill-anim'}
+                class={'skill-animation'}
                 version="1.1"
-                id="Layer_1"
+                id="strike"
                 xmlns="http://www.w3.org/2000/svg"
                 viewBox="0 0 300 400">
                 // {this.charges}
@@ -54,7 +51,7 @@ class Strike extends Component {
                         <stop offset="100%" style={`stop-color:${this.colour};stop-opacity:1`} />
                     </radialGradient>
                 </defs>
-                <filter id="explosion">
+                <filter id="strikeFilter">
                     <feGaussianBlur stdDeviation="4"/>
                     <feTurbulence type="turbulence" baseFrequency="0.01" numOctaves="3" result="turbulence"/>
                     <feDisplacementMap in2="turbulence" in="SourceGraphic" scale="1" xChannelSelector="A" yChannelSelector="A"/>
@@ -66,40 +63,55 @@ class Strike extends Component {
     }
 
     componentDidMount() {
+        this.animations.push(anime({
+            targets: ['#strike'],
+            opacity: [
+                { value: 1, delay: TIMES.TARGET_DELAY_MS, duration: TIMES.TARGET_DURATION_MS * 0.2 },
+                { value: 0, delay: TIMES.TARGET_DURATION_MS * 0.6, duration: TIMES.TARGET_DURATION_MS * 0.2 },
+            ],
+            easing: 'easeInOutSine',
+        }));
+
         if (!this.props.team) {
-            anime.set('.skill-anim', {
+            anime.set('#strike', {
                 rotate: Math.random() * 180 + 90,
             });
         } else {
-            anime.set('.skill-anim', {
+            anime.set('#strike', {
                 rotate: Math.random() * 180 + 270,
             });
         }
-        anime.set('.skill-anim', {
+        anime.set('#strike', {
             translateY: -200,
             translateX: 0,
         });
-        anime.set('#explosion feDisplacementMap', {
+        anime.set('#strikeFilter feDisplacementMap', {
             scale: 1,
         });
 
         anime({
-            targets: '.skill-anim',
+            targets: '#strike',
             translateY: 0,
             translateX: 0,
             loop: false,
-            duration: (duration * 1 / 2),
+            delay: TIMES.TARGET_DELAY_MS,
+            duration: (TIMES.TARGET_DURATION_MS * 1 / 2),
             easing: 'easeInQuad',
         });
         anime({
-            targets: '#explosion feDisplacementMap',
+            targets: '#strikeFilter feDisplacementMap',
             scale: 200,
             loop: false,
-            delay: (duration * 1 / 4),
-            duration,
+            delay: (TIMES.TARGET_DELAY_MS + TIMES.TARGET_DURATION_MS * 1 / 4),
             easing: 'easeInQuad',
         });
     }
+
+    componentWillUnmount() {
+        for (let i = this.animations.length - 1; i >= 0; i--) {
+            this.animations[i].reset();
+        }
+    }
 }
 
 module.exports = Strike;