wip

client/src/components/anims/blast.jsx

@@ -59,17 +59,9 @@ class AttackCharge extends Component {
     }
 
     componentDidMount() {
-        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,
+            translateY: -300 * this.props.direction.y,
+            translateX: -200 * this.props.direction.x,
             opacity: 0,
         });
 
@@ -88,6 +80,7 @@ class AttackCharge extends Component {
         anime({
             targets: '.skill-anim',
             translateY: 0,
+            translateX: 0,
             loop: false,
             delay: TIMES.TARGET_DELAY_MS,
             duration: (duration * 1 / 2),

client/src/components/anims/chaos.jsx

@@ -16,7 +16,6 @@ function projectile(x, y, radius, colour) {
             fill="url(#grad1)"
             stroke-width="2"
             stroke={colour}
-            id="projectile"
             filter="url(#explosion)"
         />
     );
@@ -42,7 +41,7 @@ class AttackCharge extends Component {
                 <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:#A25AC1;stop-opacity:1`} />
+                        <stop offset="100%" style={'stop-color:#A25AC1;stop-opacity:1'} />
                     </radialGradient>
                 </defs>
                 <filter id="explosion">
@@ -57,16 +56,7 @@ class AttackCharge extends Component {
     }
 
     componentDidMount() {
-        if (!this.props.team) {
-            anime.set('.skill-anim', {
-                rotate: Math.random() * 180 + 90,
-            });
-        } else {
-            anime.set('.skill-anim', {
-                rotate: Math.random() * 180 + 270,
-            });
-        }
-        const projectiles = document.querySelectorAll('#projectile');
+        const projectiles = document.querySelectorAll('.skill-anim circle');
         projectiles.forEach(proj => {
             const colour = Math.random() >= 0.5 ? '#a52a2a' : '#3498db';
             anime.set(proj, {
@@ -75,8 +65,8 @@ class AttackCharge extends Component {
         });
 
         anime.set('.skill-anim', {
-            translateY: -200,
-            translateX: 0,
+            translateY: -300 * this.props.direction.y,
+            translateX: -200 * this.props.direction.x,
             opacity: 0,
         });
         anime.set('#explosion feDisplacementMap', {

client/src/components/anims/slay.jsx

@@ -17,7 +17,6 @@ function projectile(x, y, radius, colour) {
             fill="url(#grad1)"
             stroke-width="2"
             stroke={colour}
-            id="projectile"
         />
     );
 }
@@ -68,7 +67,18 @@ class AttackCharge extends Component {
     }
 
     componentDidMount() {
-        if (!this.props.team) {
+        if (this.props.direction.y) {
+            anime.set('#strike', {
+                rotate: -Math.atan(this.props.direction.y / this.props.direction.x) * 180 / Math.PI,
+            });
+            console.log(Math.atan(this.props.direction.y / this.props.direction.x) * 180 / Math.PI);
+        } else {
+            anime.set('#strike', {
+                rotate: 90,
+            });
+        }
+
+/*        if (!this.props.team) {
             anime.set('.skill-anim', {
                 rotate: Math.random() * 180 + 90,
             });
@@ -77,7 +87,7 @@ class AttackCharge extends Component {
                 rotate: Math.random() * 180 + 270,
             });
         }
-        anime.set('.skill-anim', {
+*/        anime.set('.skill-anim', {
             translateY: -400,
             translateX: 0,
             opacity: 0,
@@ -123,7 +133,7 @@ class AttackCharge extends Component {
             delay: (TIMES.TARGET_DELAY_MS + duration + TIMES.POST_SKILL_DURATION_MS * 0.7),
         }));
 
-        const projectiles = document.querySelectorAll('#projectile');
+        const projectiles = document.querySelectorAll('.skill-anim circle');
         projectiles.forEach(proj => {
             this.animations.push(anime({
                 targets: proj,

client/src/components/anims/strike.jsx

@@ -44,7 +44,6 @@ class Strike extends Component {
                 id="strike"
                 xmlns="http://www.w3.org/2000/svg"
                 viewBox="0 0 300 400">
-                // {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" />
@@ -62,19 +61,26 @@ class Strike extends Component {
     }
 
     componentDidMount() {
-        if (!this.props.team) {
+        console.log(this.props.direction);
+/*        if (this.props.direction.y) {
             anime.set('#strike', {
-                rotate: Math.random() * 180 + 90,
+                rotate: -Math.atan(this.props.direction.y / this.props.direction.x) * 180 / Math.PI,
             });
+            console.log(Math.atan(this.props.direction.y / this.props.direction.x) * 180 / Math.PI);
         } else {
             anime.set('#strike', {
-                rotate: Math.random() * 180 + 270,
+                rotate: 90,
             });
         }
-
+*/
+        let rotate = 90;
+        if (this.props.direction.y) {
+            if (!this.props.direction.x) rotate = 0;
+        }
         anime.set('#strike', {
-            translateY: -200,
-            translateX: 0,
+            translateY: -300 * this.props.direction.y,
+            translateX: -150 * this.props.direction.x,
+            rotate,
         });
 
         this.animations.push(anime({