From d9184dea0a66f51f3787a09e37ee27f1427732b9 Mon Sep 17 00:00:00 2001
From: Mashy <himesh.kapadia@gmail.com>
Date: Fri, 21 Jun 2019 13:18:30 +1000
Subject: [PATCH] laser anim for attack and strike

---
 client/src/components/animations.jsx   |  10 +--
 client/src/components/anims/strike.jsx | 105 ++++++++++++++++---------
 client/src/components/anims/test.jsx   |  57 +++++++-------
 3 files changed, 103 insertions(+), 69 deletions(-)

diff --git a/client/src/components/animations.jsx b/client/src/components/animations.jsx
index b60c89b7..9f9ad039 100644
--- a/client/src/components/animations.jsx
+++ b/client/src/components/animations.jsx
@@ -44,9 +44,9 @@ function animations(props) {
         } else if (stage === 'END_SKILL') {
             const skill = removeTier(text);
             switch (skill) {
-                case 'Attack': return <Attack id={construct.id} stage={stage} team={player}/>;
+                case 'Attack': return <Strike id={construct.id} stage={stage} team={player} colour={colours.white}/>;
                 case 'Blast': return <Blast id={construct.id} stage={stage} team={player}/>;
-                case 'StrikeI': return <Strike id={construct.id} stage={stage} team={player}/>;
+                case 'Strike': return <Strike id={construct.id} stage={stage} team={player} colour={colours.red}/>;
                 default: return text;
             }
         }
@@ -60,13 +60,11 @@ function animations(props) {
         </div>;
     }
 
-    
-/*    return (
+    /*return (
         <div class={combatTextClass}>
             <Test id={construct.id} stage={stage} team={player}/>
         </div>
-    );
-*/    
+    );*/
     return (<div>&nbsp;</div>);
 }
 
diff --git a/client/src/components/anims/strike.jsx b/client/src/components/anims/strike.jsx
index 92b59662..4302cef1 100644
--- a/client/src/components/anims/strike.jsx
+++ b/client/src/components/anims/strike.jsx
@@ -6,17 +6,37 @@ const { TIMES } = require('../../constants');
 
 const duration = TIMES.START_SKILL;
 
+
+function laser(dimensions, colour) {
+    const { x, y, length } = dimensions;
+    return (
+        <rect
+            width="18"
+            height={length}
+            x={x}
+            y={y}
+            fill="url(#grad1)"
+            stroke-width="2"
+            stroke={colour}
+            filter="url(#explosion)"
+        />
+    );
+}
+
 class Strike extends Component {
     constructor(props) {
         super();
-        this.props = props;
-        const points = [];
-        for (let i = 0; i <= 70; i += 1) {
-            const x = Math.floor(300 * Math.random());
-            const y = Math.floor(400 * Math.random());
-            points.push([x, y]);
-            this.circles = points.map((coord, j) => <circle key={j} cx={coord[0]} cy={coord[1]} r="7" stroke="#a52a2a" fill="#a52a2a" />);
-        }
+        this.team = props.team;
+        // this.colour = props.colour;
+        this.colour = props.colour;
+
+        const coord = [0, 100, 200];
+        const points = coord.map(pos => ({
+            x: pos + Math.random() * 80,
+            y: 50 + Math.random() * 100,
+            length: 150 + Math.random() * 100,
+        }));
+        this.charges = points.map(pos => laser(pos, this.colour));
     }
 
     render() {
@@ -27,42 +47,57 @@ class Strike extends Component {
                 id="Layer_1"
                 xmlns="http://www.w3.org/2000/svg"
                 viewBox="0 0 300 400">
-                {this.circles}
+                // {this.charges}
+                <defs>
+                    <radialGradient id="grad1" cx="50%" cy="0%" r="85%" fx="50%" fy="50%">
+                        <stop offset="0%" style="stop-color:#dba9a9;stop-opacity:0.6" />
+                        <stop offset="100%" style={`stop-color:${this.colour};stop-opacity:1`} />
+                    </radialGradient>
+                </defs>
+                <filter id="explosion">
+                    <feGaussianBlur stdDeviation="4"/>
+                    <feTurbulence type="turbulence" baseFrequency="0.01" numOctaves="3" result="turbulence"/>
+                    <feDisplacementMap in2="turbulence" in="SourceGraphic" scale="1" xChannelSelector="A" yChannelSelector="A"/>
+
+                </filter>
+                {this.charges}
             </svg>
         );
     }
 
     componentDidMount() {
-        let y = -100;
-        const daggers = document.querySelectorAll('.skill-anim circle');
-        if (this.props.stage === 'START_SKILL') {
-            if (!this.props.team) {
-                anime.set('.skill-anim', {
-                    rotate: 180,
-                });
-            } else {
-                anime.set('.skill-anim', {
-                    rotate: 0,
-                });
-            }
+        if (!this.props.team) {
+            anime.set('.skill-anim', {
+                rotate: Math.random() * 180 + 90,
+            });
+        } else {
+            anime.set('.skill-anim', {
+                rotate: Math.random() * 180 + 270,
+            });
         }
+        anime.set('.skill-anim', {
+            translateY: -200,
+            translateX: 0,
+        });
+        anime.set('#explosion feDisplacementMap', {
+            scale: 1,
+        });
+
 
-        if (this.props.stage === 'END_SKILL') {
-            if (!this.props.team) {
-                anime.set('.skill-anim', {
-                    rotate: 0,
-                });
-            } else {
-                anime.set('.skill-anim', {
-                    rotate: 180,
-                });
-            }
-        }
 
         anime({
-            targets: daggers,
-            cx: 150,
-            cy: y,
+            targets: '.skill-anim',
+            translateY: 0,
+            translateX: 0,
+            loop: false,
+            duration: (duration * 1 / 2),
+            easing: 'easeInQuad',
+        });
+        anime({
+            targets: '#explosion feDisplacementMap',
+            scale: 200,
+            loop: false,
+            delay: (duration * 1 / 4),
             duration,
             easing: 'easeInQuad',
         });
diff --git a/client/src/components/anims/test.jsx b/client/src/components/anims/test.jsx
index f7929bfe..2232dfc0 100644
--- a/client/src/components/anims/test.jsx
+++ b/client/src/components/anims/test.jsx
@@ -3,21 +3,21 @@ const { Component } = require('preact');
 const anime = require('animejs').default;
 
 const { TIMES } = require('../../constants');
-const { randomPoints } = require('../../utils');
 
 const duration = TIMES.START_SKILL;
 
 
-function projectile(x, y, radius, colour) {
+function laser(dimensions, colour) {
+    const { x, y, length } = dimensions;
     return (
-        <circle
-            cx={x}
-            cy={y}
-            r={radius}
+        <rect
+            width="18"
+            height={length}
+            x={x}
+            y={y}
             fill="url(#grad1)"
             stroke-width="2"
             stroke={colour}
-            id="projectile"
             filter="url(#explosion)"
         />
     );
@@ -28,9 +28,15 @@ class AttackCharge extends Component {
         super();
         this.team = props.team;
         // this.colour = props.colour;
-        this.colour = '#00aabb';
-        const points = randomPoints(8, 60, { x: 0, y: 0, width: 300, height: 400 });
-        this.charges = points.map(coord => projectile(coord[0], coord[1], 20, this.colour));
+        this.colour = '#a52a2a';
+
+        const coord = [0, 100, 200];
+        const points = coord.map(pos => ({
+            x: pos + Math.random() * 80,
+            y: 50 + Math.random() * 100,
+            length: 150 + Math.random() * 100,
+        }));
+        this.charges = points.map(pos => laser(pos, this.colour));
     }
 
     render() {
@@ -43,14 +49,14 @@ class AttackCharge extends Component {
                 viewBox="0 0 300 400">
                 // {this.charges}
                 <defs>
-                    <radialGradient id="grad1" cx="50%" cy="50%" r="70%" fx="50%" fy="50%">
-                        <stop offset="0%" style="stop-color:rgb(255,255,255);stop-opacity:0.6" />
+                    <radialGradient id="grad1" cx="50%" cy="0%" r="85%" fx="50%" fy="50%">
+                        <stop offset="0%" style="stop-color:#dba9a9;stop-opacity:0.6" />
                         <stop offset="100%" style={`stop-color:${this.colour};stop-opacity:1`} />
                     </radialGradient>
                 </defs>
                 <filter id="explosion">
                     <feGaussianBlur stdDeviation="4"/>
-                    <feTurbulence type="turbulence" baseFrequency="0.05" numOctaves="3" result="turbulence"/>
+                    <feTurbulence type="turbulence" baseFrequency="0.01" numOctaves="3" result="turbulence"/>
                     <feDisplacementMap in2="turbulence" in="SourceGraphic" scale="1" xChannelSelector="A" yChannelSelector="A"/>
 
                 </filter>
@@ -60,20 +66,14 @@ class AttackCharge extends Component {
     }
 
     componentDidMount() {
-        const charges = document.querySelectorAll('#projectile');
-        if (!this.team) {
-            anime.set('.skill-anim', {
-                rotate: 90,
-                translateY: -200,
-                translateX: 0,
-            });
-        } else {
-            anime.set('.skill-anim', {
-                rotate: 90,
-                translateY: -200,
-                translateX: 0,
-            });
-        }
+        anime.set('.skill-anim', {
+            rotate: 90,
+            translateY: -200,
+            translateX: 0,
+        });
+        anime.set('#explosion feDisplacementMap', {
+            scale: 1,
+        });
 
         anime({
             targets: '.skill-anim',
@@ -85,8 +85,9 @@ class AttackCharge extends Component {
         });
         anime({
             targets: '#explosion feDisplacementMap',
-            scale: 100,
+            scale: 200,
             loop: false,
+            delay: (duration * 1 / 4),
             duration,
             easing: 'easeInQuad',
         });