charge attacks

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

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;

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',
         });
-
-
     }
 }
 

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>
     );
-}
+};