add siphon

client/src/components/animations.jsx

@@ -1,14 +1,15 @@
 const preact = require('preact');
 
+const AttackCharge = require('./anims/attack.charge');
+
 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 Siphon = require('./anims/siphon');
 const Test = require('./anims/test');
 
-const AttackCharge = require('./anims/attack.charge');
-
 const { removeTier } = require('../utils');
 
 const colours = {
@@ -51,6 +52,7 @@ function animations(props) {
                 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}/>;
+                case 'Siphon': return <Siphon id={construct.id} stage={stage} team={player} colour={colours.red}/>;
                 default: return text;
             }
         }
@@ -67,7 +69,8 @@ function animations(props) {
         <div class={combatTextClass}>
             <Test id={construct.id} stage={stage} team={player}/>
         </div>
-    );*/
+    );
+*/
     return (<div>&nbsp;</div>);
 }
 

client/src/components/anims/siphon.jsx

@@ -0,0 +1,45 @@
+const preact = require('preact');
+const { Component } = require('preact');
+const anime = require('animejs').default;
+
+const { TIMES } = require('../../constants');
+
+const duration = TIMES.START_SKILL;
+
+class AttackCharge extends Component {
+    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="140" cx="150" cy="150" stroke="#3498db" stroke-width="2.5%" filter="url(#blur)"/>
+            </svg>
+        );
+    }
+
+    componentDidMount() {
+        anime.set('#siphon', {
+            r: '140',
+            stroke: '#3498db',
+        });
+        anime({
+            targets: '#siphon',
+            keyframes: [
+                { r: '110', stroke: '#1FF01F' },
+                { r: '80', stroke: '#1FF01F' },
+                { r: '50', stroke: '#3498db' },
+                { r: '20', stroke: '#3498db' },
+            ],
+            duration,
+            easing: 'easeInCubic',
+        });
+    }
+}
+
+module.exports = AttackCharge;

client/src/components/anims/test.jsx

@@ -22,13 +22,9 @@ function projectile(x, y, radius, colour) {
     );
 }
 
-function sword(colour) {
+function arc() {
     return (
-        <svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1280 720">
+        <circle id="siphon" r="140" cx="150" cy="150" stroke="#3498db" stroke-width="2.5%" filter="url(#blur)"/>
-            <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>
     );
 }
 
@@ -50,26 +46,17 @@ class AttackCharge extends Component {
                 id="Layer_1"
                 xmlns="http://www.w3.org/2000/svg"
                 viewBox="0 0 300 400">
-                <defs>
+                <filter id="blur">
-                    <radialGradient id="grad1" cx="50%" cy="0%" r="85%" fx="50%" fy="50%">
+                    <feGaussianBlur in="SourceGraphic" stdDeviation="2" />
-                        <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)}
+                {arc()}
                 {this.charges}
             </svg>
         );
     }
 
     componentDidMount() {
-        if (!this.props.team) {
+/*        if (!this.props.team) {
             anime.set('.skill-anim', {
                 rotate: Math.random() * 180 + 90,
             });
@@ -110,7 +97,6 @@ class AttackCharge extends Component {
             delay: (duration * 3 / 4),
         });
 
-        const projectiles = document.querySelectorAll('#projectile');
         projectiles.forEach(proj => {
             anime({
                 targets: proj,
@@ -121,6 +107,20 @@ class AttackCharge extends Component {
                 easing: 'easeInQuad',
             });
         });
+*/
+        const siphon = document.querySelectorAll('#siphon');
+        anime({
+            targets: siphon,
+            keyframes: [
+                { r: '110', stroke: '#1FF01F' },
+                { r: '80', stroke: '#1FF01F' },
+                { r: '50', stroke: '#3498db' },
+                { r: '20', stroke: '#3498db' },
+            ],
+            duration,
+            easing: 'easeInCubic',
+            loop: true,
+        });
     }
 }
 

client/src/utils.jsx

@@ -383,6 +383,8 @@ function randomPoints(numPoints, radius, dimensions) {
 }
 
 const removeTier = skill => {
+    
+    if (skill.includes('SiphonTick')) return 'SiphonTick';
     if (skill.includes('Strike')) return 'Strike';
     if (skill.includes('Heal')) return 'Heal';
     if (skill.includes('Blast')) return 'Blast';