From 0310b1b3df6f5cedd47535017a2cb7cb172a2014 Mon Sep 17 00:00:00 2001
From: Mashy <himesh.kapadia@gmail.com>
Date: Wed, 19 Jun 2019 15:29:33 +1000
Subject: [PATCH] charge attacks

---
 client/src/components/animations.jsx          | 30 +++++++++-
 client/src/components/anims/attack.charge.jsx | 60 +++++++++++++++++++
 client/src/components/anims/test.jsx          |  6 +-
 client/src/components/svgs/charge.jsx         |  6 +-
 4 files changed, 93 insertions(+), 9 deletions(-)
 create mode 100644 client/src/components/anims/attack.charge.jsx

diff --git a/client/src/components/animations.jsx b/client/src/components/animations.jsx
index 7512e5f2..7b6111da 100644
--- a/client/src/components/animations.jsx
+++ b/client/src/components/animations.jsx
@@ -2,16 +2,39 @@ const preact = require('preact');
 
 const Attack = require('./anims/attack');
 const Strike = require('./anims/strike');
-const Test = require('./anims/test');
+// const Test = require('./anims/test');
+
+const AttackCharge = require('./anims/attack.charge');
+
+const colours = {
+    red: '#a52a2a',
+    green: '#1FF01F',
+    blue: '#3498db',
+    purple: '#A25AC1',
+    yellow: '#d1c86a',
+    cyan: '#6AD1BF',
+};
+
 
 function animations(props) {
     const { combatTextClass, combatText, stage, player, construct } = props;
 
     const anim = text => {
+        if (stage === 'START_SKILL') {
+            switch (text) {
+                case 'StrikeI': return <AttackCharge id={construct.id} team={player} colour={colours.red}/>;
+                case 'HealI': return <AttackCharge id={construct.id} team={player} colour={colours.green}/>;
+                case 'BlastI': return <AttackCharge id={construct.id} team={player} colour={colours.blue}/>;
+                case 'ChaosI': return <AttackCharge id={construct.id} team={player} colour={colours.purple}/>;
+                case 'SlayI': return <AttackCharge id={construct.id} team={player} colour={colours.yellow}/>;
+                case 'SiphonI': return <AttackCharge id={construct.id} team={player} colour={colours.cyan}/>;
+
+                default: return <AttackCharge id={construct.id} team={player} colour="#a52a2a"/>;
+            }
+        }
         switch (text) {
             case 'Attack': return <Attack id={construct.id} stage={stage} team={player}/>;
             case 'StrikeI': return <Strike id={construct.id} stage={stage} team={player}/>;
-
             default: return text;
         }
     };
@@ -22,11 +45,14 @@ function animations(props) {
             {combatAnim}
         </div>;
     }
+
+    /*
     return (
         <div class={combatTextClass}>
             <Test id={construct.id} stage={stage} team={player}/>
         </div>
     );
+    */
     return (<div>&nbsp;</div>);
 }
 
diff --git a/client/src/components/anims/attack.charge.jsx b/client/src/components/anims/attack.charge.jsx
new file mode 100644
index 00000000..33c51a21
--- /dev/null
+++ b/client/src/components/anims/attack.charge.jsx
@@ -0,0 +1,60 @@
+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, 300, 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;
diff --git a/client/src/components/anims/test.jsx b/client/src/components/anims/test.jsx
index 97e08d00..0b0f3cb5 100644
--- a/client/src/components/anims/test.jsx
+++ b/client/src/components/anims/test.jsx
@@ -58,13 +58,11 @@ class Attack extends Component {
         anime({
             targets: stageone,
             fill: '#a52a2a',
-            delay: anime.stagger(100),
+            delay: anime.stagger(2),
             loop: true,
-            duration: duration,
+            duration,
             easing: 'easeInQuad',
         });
-
-
     }
 }
 
diff --git a/client/src/components/svgs/charge.jsx b/client/src/components/svgs/charge.jsx
index 7d2fc1a1..5e2f7dd3 100644
--- a/client/src/components/svgs/charge.jsx
+++ b/client/src/components/svgs/charge.jsx
@@ -9,7 +9,7 @@ module.exports = function charge(x, y, height, colour) {
                     ${x - 2 * height},${y + 2 * height}
                     ${x + 2 * height},${y + 2 * height}
                 `}
-                stroke="#a52a2a"
+                stroke={colour}
                 stroke-width="2"
                 id="charge"
             />
@@ -21,7 +21,7 @@ module.exports = function charge(x, y, height, colour) {
                     ${x - 3.5 * height},${y + height}
                     ${x - 2 * height},${y + 2 * height}
                 `}
-                stroke="#a52a2a"
+                stroke={colour}
                 stroke-width="2"
                 id="charge"
             />
@@ -39,4 +39,4 @@ module.exports = function charge(x, y, height, colour) {
             />
         </svg>
     );
-}
+};