added slay

client/src/components/animations.jsx

@@ -4,6 +4,7 @@ const Blast = require('./anims/blast');
 const Heal = require('./anims/heal');
 const Strike = require('./anims/strike');
 const Chaos = require('./anims/chaos');
+const Slay = require('./anims/slay');
 const Test = require('./anims/test');
 
 const AttackCharge = require('./anims/attack.charge');
@@ -48,7 +49,7 @@ function animations(props) {
                 case 'Blast': return <Blast id={construct.id} stage={stage} team={player}/>;
                 case 'Strike': return <Strike id={construct.id} stage={stage} team={player} colour={colours.red}/>;
                 case 'Chaos': return <Chaos id={construct.id} team={player} colour={colours.purple}/>;
-
+                case 'Slay': return <Slay id={construct.id} team={player} colour={colours.yellow}/>;
                 case 'Heal': return <Heal id={construct.id} stage={stage} team={player} colour={colours.red}/>;
                 default: return text;
             }
@@ -66,8 +67,8 @@ function animations(props) {
         <div class={combatTextClass}>
             <Test id={construct.id} stage={stage} team={player}/>
         </div>
-    );
+    );*/
-*/    return (<div>&nbsp;</div>);
+    return (<div>&nbsp;</div>);
 }
 
 module.exports = animations;

client/src/components/anims/slay.jsx

@@ -0,0 +1,137 @@
+const preact = require('preact');
+const { Component } = require('preact');
+const anime = require('animejs').default;
+
+const { TIMES } = require('../../constants');
+const { randomPoints } = require('../../utils');
+
+const duration = TIMES.START_SKILL;
+
+
+function projectile(x, y, radius, colour) {
+    return (
+        <circle
+            cx={x}
+            cy={y}
+            r={radius}
+            fill="url(#grad1)"
+            stroke-width="2"
+            stroke={colour}
+            id="projectile"
+        />
+    );
+}
+
+function sword(colour) {
+    return (
+        <svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1280 720">
+            <g transform="rotate(90, 640, 360) translate(0,720) scale(0.1,-0.1)" fill={colour} stroke={colour} filter="url(#explosion)" id="sword">
+                <path d="M4110 5071 c-294 -119 -436 -228 -457 -350 -4 -25 -7 -230 -6 -454 2 -380 1 -408 -15 -402 -9 4 -48 16 -87 26 -160 41 -215 44 -815 41 -719 -4 -1088 13 -1475 69 -270 38 -384 75 -468 148 -67 58 -111 75 -193 74 -104 -1 -204 -59 -264 -153 -130 -202 -159 -698 -59 -998 62 -188 174 -282 335 -282 77 0 114 14 174 67 87 77 198 114 456 152 386 56 724 73 1459 70 676 -2 728 1 937 68 15 4 16 -29 15 -419 -2 -500 -4 -492 93 -582 45 -41 99 -74 217 -133 87 -43 182 -86 212 -96 172 -55 197 16 78 226 -114 202 -160 347 -187 587 -16 144 -27 371 -18 376 4 3 299 0 655 -5 2030 -31 2627 -35 3953 -23 903 8 1433 17 1665 28 l340 16 450 79 c248 44 491 88 540 99 234 50 777 180 796 190 18 10 19 14 7 26 -7 8 -198 57 -423 109 -346 80 -483 106 -885 170 -417 66 -517 78 -815 100 -312 24 -424 27 -1370 36 -1039 11 -2548 7 -3645 -10 -327 -5 -748 -11 -934 -13 l-339 -3 2 75 c3 130 22 331 41 441 25 147 71 276 142 404 34 61 70 127 80 147 21 42 24 108 6 126 -23 23 -100 13 -198 -27z"/>
+            </g>
+        </svg>
+    );
+}
+
+class AttackCharge extends Component {
+    constructor(props) {
+        super();
+        this.team = props.team;
+        // this.colour = props.colour;
+        this.colour = '#c5a443';
+        const points = new Array(30).fill(0);
+        this.charges = points.map(() => projectile(150, 420, 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">
+                <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:${this.colour};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>
+                {sword(this.colour)}
+                {this.charges}
+            </svg>
+        );
+    }
+
+    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: -400,
+            translateX: 0,
+        });
+        anime.set('#explosion feDisplacementMap', {
+            scale: 100,
+        });
+
+        anime.set('#sword', {
+            fill: this.colour,
+            stroke: this.colour,
+        });
+
+        anime.set('#projectile', {
+            cx: 150,
+            cy: 420,
+        });
+
+        anime({
+            targets: '.skill-anim',
+            translateY: 0,
+            translateX: 0,
+            loop: false,
+            duration: (duration * 1 / 2),
+            easing: 'easeInQuad',
+        });
+        anime({
+            targets: '#explosion feDisplacementMap',
+            scale: 10000,
+            loop: false,
+            delay: (duration * 1 / 2),
+            duration: (duration * 1 / 2),
+            easing: 'easeInQuad',
+        });
+
+        anime({
+            targets: '#sword',
+            fill: '#1FF01F',
+            stroke: '#1FF01F',
+            delay: (duration * 3 / 4),
+        });
+
+        const projectiles = document.querySelectorAll('#projectile');
+        projectiles.forEach(proj => {
+            anime({
+                targets: proj,
+                cx: Math.random() * 250 + 25,
+                cy: Math.random() * 200 - 100,
+                delay: (duration * 2 / 3),
+                duration: (duration * 1 / 3),
+                easing: 'easeInQuad',
+            });
+        });
+    }
+}
+
+module.exports = AttackCharge;

client/src/components/anims/test.jsx

@@ -18,19 +18,28 @@ function projectile(x, y, radius, colour) {
             stroke-width="2"
             stroke={colour}
             id="projectile"
-            filter="url(#explosion)"
         />
     );
 }
 
+function sword(colour) {
+    return (
+        <svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1280 720">
+            <g transform="rotate(90, 640, 360) translate(0,720) scale(0.1,-0.1)" fill={colour} stroke={colour} filter="url(#explosion)" id="sword">
+                <path d="M4110 5071 c-294 -119 -436 -228 -457 -350 -4 -25 -7 -230 -6 -454 2 -380 1 -408 -15 -402 -9 4 -48 16 -87 26 -160 41 -215 44 -815 41 -719 -4 -1088 13 -1475 69 -270 38 -384 75 -468 148 -67 58 -111 75 -193 74 -104 -1 -204 -59 -264 -153 -130 -202 -159 -698 -59 -998 62 -188 174 -282 335 -282 77 0 114 14 174 67 87 77 198 114 456 152 386 56 724 73 1459 70 676 -2 728 1 937 68 15 4 16 -29 15 -419 -2 -500 -4 -492 93 -582 45 -41 99 -74 217 -133 87 -43 182 -86 212 -96 172 -55 197 16 78 226 -114 202 -160 347 -187 587 -16 144 -27 371 -18 376 4 3 299 0 655 -5 2030 -31 2627 -35 3953 -23 903 8 1433 17 1665 28 l340 16 450 79 c248 44 491 88 540 99 234 50 777 180 796 190 18 10 19 14 7 26 -7 8 -198 57 -423 109 -346 80 -483 106 -885 170 -417 66 -517 78 -815 100 -312 24 -424 27 -1370 36 -1039 11 -2548 7 -3645 -10 -327 -5 -748 -11 -934 -13 l-339 -3 2 75 c3 130 22 331 41 441 25 147 71 276 142 404 34 61 70 127 80 147 21 42 24 108 6 126 -23 23 -100 13 -198 -27z"/>
+            </g>
+        </svg>
+    );
+}
+
 class AttackCharge extends Component {
     constructor(props) {
         super();
         this.team = props.team;
         // this.colour = props.colour;
-        this.colour = '#A25AC1';
+        this.colour = '#c5a443';
-        const points = randomPoints(7, 30, { x: 0, y: 0, width: 300, height: 100 });
+        const points = new Array(30).fill(0);
-        this.charges = points.map(coord => projectile(coord[0], coord[1], 14, this.colour));
+        this.charges = points.map(() => projectile(150, 420, 7, '#1FF01F'));
     }
 
     render() {
@@ -41,7 +50,6 @@ class AttackCharge extends Component {
                 id="Layer_1"
                 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" />
@@ -50,10 +58,11 @@ class AttackCharge extends Component {
                 </defs>
                 <filter id="explosion">
                     <feGaussianBlur stdDeviation="4"/>
-                    <feTurbulence type="turbulence" baseFrequency="0.01" numOctaves="3" result="turbulence"/>
+                    <feTurbulence type="turbulence" baseFrequency="0.001" numOctaves="3" result="turbulence"/>
                     <feDisplacementMap in2="turbulence" in="SourceGraphic" scale="1" xChannelSelector="A" yChannelSelector="A"/>
 
                 </filter>
+                {sword(this.colour)}
                 {this.charges}
             </svg>
         );
@@ -70,11 +79,11 @@ class AttackCharge extends Component {
             });
         }
         anime.set('.skill-anim', {
-            translateY: -200,
+            translateY: -400,
             translateX: 0,
         });
         anime.set('#explosion feDisplacementMap', {
-            scale: 1,
+            scale: 100,
         });
 
         anime({
@@ -82,26 +91,36 @@ class AttackCharge extends Component {
             translateY: 0,
             translateX: 0,
             loop: false,
-            duration,
+            duration: (duration * 1 / 2),
             easing: 'easeInQuad',
         });
         anime({
             targets: '#explosion feDisplacementMap',
-            scale: 75,
+            scale: 10000,
             loop: false,
-            delay: (duration * 2 / 3),
+            delay: (duration * 1 / 2),
-            duration: (duration * 1 / 3),
+            duration: (duration * 1 / 2),
             easing: 'easeInQuad',
         });
 
+        anime({
+            targets: '#sword',
+            fill: '#1FF01F',
+            stroke: '#1FF01F',
+            delay: (duration * 3 / 4),
+        });
+
         const projectiles = document.querySelectorAll('#projectile');
-        projectiles.forEach(proj => anime({
+        projectiles.forEach(proj => {
-            targets: proj,
+            anime({
-            cx: Math.random() * 250 + 25,
+                targets: proj,
-            cy: Math.random() * 300 + 50,
+                cx: Math.random() * 250 + 25,
-            duration,
+                cy: Math.random() * 200 - 100,
-            easing: 'easeInQuad',
+                delay: (duration * 1 / 3),
-        }));
+                duration: (duration * 2 / 3),
+                easing: 'easeInQuad',
+            });
+        });
     }
 }