Merge branch 'anims-change' into develop

client/src/components/anims/blast.jsx

@@ -17,7 +17,6 @@ function projectile(x, y, radius, colour) {
             fill="url(#grad1)"
             stroke-width="2"
             stroke={colour}
-            id="projectile"
             filter="url(#explosion)"
         />
     );
@@ -35,9 +34,9 @@ class AttackCharge extends Component {
     render() {
         return (
             <svg
-                class={'skill-anim'}
+                class={'skill-animation'}
                 version="1.1"
-                id="Layer_1"
+                id="blast"
                 xmlns="http://www.w3.org/2000/svg"
                 viewBox="0 0 300 400">
                 // {this.charges}
@@ -59,14 +58,13 @@ class AttackCharge extends Component {
     }
 
     componentDidMount() {
-        anime.set('.skill-anim', {
+        anime.set('#blast', {
-            translateY: -300 * this.props.direction.y,
             translateX: -200 * this.props.direction.x,
-            opacity: 0,
+            translateY: -300 * this.props.direction.y,
         });
 
         this.animations.push(anime({
-            targets: '.skill-anim',
+            targets: '#blast',
             opacity: [
                 { value: 1, delay: TIMES.TARGET_DELAY_MS, duration: TIMES.TARGET_DURATION_MS * 0.3 },
                 { value: 0, delay: TIMES.TARGET_DURATION_MS * 0.7, duration: TIMES.POST_SKILL_DURATION_MS },
@@ -77,23 +75,24 @@ class AttackCharge extends Component {
             scale: 1,
         });
 
-        anime({
+        this.animations.push(anime({
-            targets: '.skill-anim',
+            targets: '#blast',
             translateY: 0,
             translateX: 0,
             loop: false,
             delay: TIMES.TARGET_DELAY_MS,
             duration: (duration * 1 / 2),
             easing: 'easeInQuad',
-        });
+        }));
-        anime({
+
+        this.animations.push(anime({
             targets: '#explosion feDisplacementMap',
-            scale: 100,
+            scale: 200,
             loop: false,
-            delay: TIMES.TARGET_DELAY_MS,
+            delay: TIMES.TARGET_DELAY_MS + duration * 1 / 2,
-            duration,
+            duration: duration * 1 / 2,
             easing: 'easeInQuad',
-        });
+        }));
     }
 
     componentWillUnmount() {

client/src/components/anims/purify.jsx

@@ -12,7 +12,6 @@ function projectile(x, y, radius, colour) {
             r={radius}
             fill={colour}
             stroke="none"
-            id="charges"
             opacity="0"
         />
     );
@@ -88,7 +87,7 @@ class Purify extends Component {
         }));
 
         this.animations.push(anime({
-            targets: ['#charges'],
+            targets: ['#purify circle'],
             opacity: [
                 { value: 1, duration: TIMES.TARGET_DELAY_MS + TIMES.TARGET_DURATION_MS * 0.2 },
             ],

client/src/components/anims/siphon.tick.jsx

@@ -16,7 +16,6 @@ function projectile(x, y, radius, colour) {
             fill="url(#grad1)"
             stroke-width="0.1"
             stroke={colour}
-            id="projectile"
         />
     );
 }
@@ -64,15 +63,15 @@ class SiphonTick extends Component {
     componentDidMount() {
         if (!this.props.team) {
             anime.set('.skill-anim', {
-                rotate: 90
+                rotate: 90,
             });
         } else {
             anime.set('.skill-anim', {
-                rotate: 270
+                rotate: 270,
             });
         }
 
-        anime.set('#projectile', {
+        anime.set('.skill-anim circle', {
             cx: 150,
             cy: 150,
         });
@@ -93,7 +92,7 @@ class SiphonTick extends Component {
             easing: 'easeInCubic',
         });
 
-        const projectiles = document.querySelectorAll('#projectile');
+        const projectiles = document.querySelectorAll('.skill-anim circle');
         projectiles.forEach(proj => {
             anime({
                 targets: proj,

client/src/components/anims/slay.jsx

@@ -43,9 +43,9 @@ class AttackCharge extends Component {
     render() {
         return (
             <svg
-                class={'skill-anim'}
+                class={'skill-animation'}
                 version="1.1"
-                id="Layer_1"
+                id="slay"
                 xmlns="http://www.w3.org/2000/svg"
                 viewBox="0 0 300 400">
                 <defs>
@@ -67,30 +67,25 @@ class AttackCharge extends Component {
     }
 
     componentDidMount() {
+        let rotate = 0; // Self target value
         if (this.props.direction.y) {
-            anime.set('#strike', {
+            if (!this.props.direction.x) rotate = this.props.direction.y > 0 ? 0 : 180;
-                rotate: -Math.atan(this.props.direction.y / this.props.direction.x) * 180 / Math.PI,
+            else {
-            });
+                rotate = this.props.direction.y > 0
-            console.log(Math.atan(this.props.direction.y / this.props.direction.x) * 180 / Math.PI);
+                    ? -Math.atan(this.props.direction.y / this.props.direction.x) * 180 / Math.PI
-        } else {
+                    : -Math.atan(this.props.direction.y / this.props.direction.x) * 180 / Math.PI + 180;
-            anime.set('#strike', {
+            }
-                rotate: 90,
+        } else if (this.props.direction.x) {
-            });
+            rotate = this.props.direction.x > 0 ? 270 : 90;
         }
 
-/*        if (!this.props.team) {
+        anime.set('#slay', {
-            anime.set('.skill-anim', {
+            rotate,
-                rotate: Math.random() * 180 + 90,
+        });
-            });
+
-        } else {
+        anime.set('#slay', {
-            anime.set('.skill-anim', {
-                rotate: Math.random() * 180 + 270,
-            });
-        }
-*/        anime.set('.skill-anim', {
             translateY: -400,
             translateX: 0,
-            opacity: 0,
         });
         anime.set('#explosion feDisplacementMap', {
             scale: 100,
@@ -102,11 +97,11 @@ class AttackCharge extends Component {
         });
 
         this.animations.push(anime({
-            targets: '.skill-anim',
+            targets: '#slay',
             opacity: [
                 { value: 1, delay: TIMES.TARGET_DELAY_MS, duration: TIMES.TARGET_DURATION_MS * 0.3 },
                 {
-                    value: 0, 
+                    value: 0,
                     delay: TIMES.TARGET_DURATION_MS * 0.7 + TIMES.POST_SKILL_DURATION_MS * 0.8,
                     duration: TIMES.POST_SKILL_DURATION_MS * 0.2,
                 }],
@@ -133,7 +128,7 @@ class AttackCharge extends Component {
             delay: (TIMES.TARGET_DELAY_MS + duration + TIMES.POST_SKILL_DURATION_MS * 0.7),
         }));
 
-        const projectiles = document.querySelectorAll('.skill-anim circle');
+        const projectiles = document.querySelectorAll('#slay circle');
         projectiles.forEach(proj => {
             this.animations.push(anime({
                 targets: proj,

client/src/components/anims/strike.jsx

@@ -61,28 +61,26 @@ class Strike extends Component {
     }
 
     componentDidMount() {
-        console.log(this.props.direction);
+        let rotate = 0; // Self target value
-/*        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,
-            });
-        }
-*/
-        let rotate = 90;
         if (this.props.direction.y) {
-            if (!this.props.direction.x) rotate = 0;
+            if (!this.props.direction.x) rotate = this.props.direction.y > 0 ? 0 : 180;
+            else {
+                rotate = this.props.direction.y > 0
+                    ? -Math.atan(this.props.direction.y / this.props.direction.x) * 180 / Math.PI
+                    : -Math.atan(this.props.direction.y / this.props.direction.x) * 180 / Math.PI + 180;
+            }
+        } else if (this.props.direction.x) {
+            rotate = this.props.direction.x > 0 ? 270 : 90;
         }
         anime.set('#strike', {
-            translateY: -300 * this.props.direction.y,
-            translateX: -150 * this.props.direction.x,
             rotate,
         });
 
+        anime.set('#strike', {
+            translateY: -400,
+            translateX: 0,
+        });
+
         this.animations.push(anime({
             targets: '#strike',
             opacity: [

client/src/components/anims/test.jsx

@@ -1,112 +0,0 @@
-const preact = require('preact');
-const { Component } = require('preact');
-const anime = require('animejs').default;
-
-const { TIMES } = require('../../constants');
-const { randomPoints } = require('../../utils');
-
-const duration = TIMES.TARGET_DURATION_MS;
-
-
-function projectile(x, y, radius, colour) {
-    return (
-        <circle
-            cx={x}
-            cy={y}
-            r={radius}
-            fill="url(#grad1)"
-            stroke-width="0.1"
-            stroke={colour}
-            id="projectile"
-        />
-    );
-}
-
-class AttackCharge extends Component {
-    constructor(props) {
-        super();
-        this.team = props.team;
-        // this.colour = props.colour;
-        this.colour = '#3498db';
-        const points = new Array(15).fill(0);
-        this.charges = points.map(() => projectile(150, 150, 7, '#1FF01F'));
-    }
-
-    render() {
-        return (
-            <svg
-                class={'skill-anim'}
-                version="1.1"
-                id="Layer_1"
-                xmlns="http://www.w3.org/2000/svg"
-                viewBox="0 0 300 400">
-                <filter id="blur">
-                    <feGaussianBlur in="SourceGraphic" stdDeviation="2" />
-                </filter>
-                <circle id="siphon" r="20" cx="150" cy="150" stroke="#3498db" stroke-width="2.5%" filter="url(#blur)"/>
-
-                <defs>
-                    <radialGradient id="grad1" cx="50%" cy="0%" r="85%" fx="50%" fy="50%">
-                        <stop offset="0%" style="stop-color:#3498db;stop-opacity:0.4" />
-                        <stop offset="100%" style={'stop-color:#1FF01F;stop-opacity:1'} />
-                    </radialGradient>
-                </defs>
-                <filter id="explosion">
-                    <feGaussianBlur stdDeviation="4"/>
-                    <feTurbulence type="turbulence" baseFrequency="0.001" numOctaves="3" result="turbulence"/>
-                    <feDisplacementMap in2="turbulence" in="SourceGraphic" scale="1" xChannelSelector="A" yChannelSelector="A"/>
-                </filter>
-
-                {this.charges}
-            </svg>
-        );
-    }
-
-    componentDidMount() {
-        if (!this.props.team) {
-            anime.set('.skill-anim', {
-                rotate: Math.random() * 45 + 90,
-            });
-        } else {
-            anime.set('.skill-anim', {
-                rotate: Math.random() * 45 + 270,
-            });
-        }
-
-        anime.set('#projectile', {
-            cx: 150,
-            cy: 150,
-        });
-
-        anime.set('#siphon', {
-            r: '80',
-            stroke: '#3498db',
-        });
-
-        anime({
-            targets: '#siphon',
-            keyframes: [
-                { r: '50', stroke: '#3498db' },
-                { r: '20', stroke: '#3498db' },
-                { r: '0', stroke: '#3498db' },
-            ],
-            duration: duration * 2 / 3,
-            easing: 'easeInCubic',
-        });
-
-        const projectiles = document.querySelectorAll('#projectile');
-        projectiles.forEach(proj => {
-            anime({
-                targets: proj,
-                cx: Math.random() * 250 + 25,
-                cy: Math.random() * 200 - 100,
-                delay: (Math.random() * duration * 1 / 2),
-                duration,
-                easing: 'easeInQuad',
-            });
-        });
-
-    }
-}
-
-module.exports = AttackCharge;