charge attacks

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