added siphon tick

client/assets/styles/game.css

@@ -29,7 +29,11 @@
 }
 
 .opponent .combat-text {
-    top: 40%;
+    top: 75%;
+}
+
+.opponent .combat-anim {
+    top: 25%;
 }
 
 .opponent .game-construct {
@@ -199,7 +203,6 @@
 }
 
 .combat-text {
-    fill: whitesmoke;
     font-size: 2em;
     font-family: 'Jura';
     position: absolute;
@@ -211,6 +214,18 @@
     height: 7em;
 }
 
+.combat-anim {
+    font-size: 2em;
+    font-family: 'Jura';
+    position: absolute;
+    object-fit: contain;
+    top: 15%;
+}
+
+.combat-anim svg {
+    height: 7em;
+}
+
 .game-construct.active-skill {
     filter: drop-shadow(0 0 0.2em silver);
 }

client/src/components/animations.jsx

@@ -8,7 +8,9 @@ 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 SiphonTick = require('./anims/siphon.tick');
+
+// const Test = require('./anims/test');
 
 const { removeTier } = require('../utils');
 
@@ -41,7 +43,7 @@ function animations(props) {
                 // Block Base
                 // Buff Base
                 // Debuff Base
-                default: return text;
+                default: return false;
             }
         } else if (stage === 'END_SKILL') {
             const skill = removeTier(text);
@@ -53,24 +55,37 @@ function animations(props) {
                 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;
+                case 'SiphonTick': return <SiphonTick id={construct.id} stage={stage} team={player} colour={colours.red}/>;
+                default: return false;
             }
         }
-        return text;
+        return false;
     };
 
     if (combatText) {
         const combatAnim = anim(combatText);
-        return <div class={combatTextClass}>
+        if (combatAnim) {
+            return (
+                <div class='combat-anim'>
                     {combatAnim}
-        </div>;
+                </div>
+            );
         }
-/*    return (
+        return (
+            <div class={combatTextClass}>
+                {combatText}
+            </div>
+        );
+    }
+
+    /*
+    return (
         <div class={combatTextClass}>
             <Test id={construct.id} stage={stage} team={player}/>
         </div>
     );
     */
+
     return (<div>&nbsp;</div>);
 }
 

client/src/components/anims/chaos.jsx

@@ -89,7 +89,7 @@ class AttackCharge extends Component {
             translateY: 0,
             translateX: 0,
             loop: false,
-            duration: (duration * 2 / 3),
+            duration: (duration * 1 / 2),
             easing: 'easeInQuad',
         });
         anime({

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

@@ -0,0 +1,110 @@
+const preact = require('preact');
+const { Component } = require('preact');
+const anime = require('animejs').default;
+
+const { TIMES } = require('../../constants');
+
+const duration = TIMES.START_SKILL;
+
+
+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 SiphonTick 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() * 180 + 90,
+            });
+        } else {
+            anime.set('.skill-anim', {
+                rotate: Math.random() * 180 + 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 = SiphonTick;

client/src/components/anims/test.jsx

@@ -15,27 +15,21 @@ function projectile(x, y, radius, colour) {
             cy={y}
             r={radius}
             fill="url(#grad1)"
-            stroke-width="2"
+            stroke-width="0.1"
             stroke={colour}
             id="projectile"
         />
     );
 }
 
-function arc() {
-    return (
-        <circle id="siphon" r="140" cx="150" cy="150" stroke="#3498db" stroke-width="2.5%" filter="url(#blur)"/>
-    );
-}
-
 class AttackCharge extends Component {
     constructor(props) {
         super();
         this.team = props.team;
         // this.colour = props.colour;
-        this.colour = '#c5a443';
+        this.colour = '#3498db';
-        const points = new Array(30).fill(0);
+        const points = new Array(15).fill(0);
-        this.charges = points.map(() => projectile(150, 420, 7, '#1FF01F'));
+        this.charges = points.map(() => projectile(150, 150, 7, '#1FF01F'));
     }
 
     render() {
@@ -49,78 +43,69 @@ class AttackCharge extends Component {
                 <filter id="blur">
                     <feGaussianBlur in="SourceGraphic" stdDeviation="2" />
                 </filter>
-                {arc()}
+                <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) {
+        if (!this.props.team) {
             anime.set('.skill-anim', {
-                rotate: Math.random() * 180 + 90,
+                rotate: Math.random() * 45 + 90,
             });
         } else {
             anime.set('.skill-anim', {
-                rotate: Math.random() * 180 + 270,
+                rotate: Math.random() * 45 + 270,
             });
         }
-        anime.set('.skill-anim', {
+
-            translateY: -400,
+        anime.set('#projectile', {
-            translateX: 0,
+            cx: 150,
+            cy: 150,
         });
-        anime.set('#explosion feDisplacementMap', {
+
-            scale: 100,
+        anime.set('#siphon', {
+            r: '80',
+            stroke: '#3498db',
         });
 
         anime({
-            targets: '.skill-anim',
+            targets: '#siphon',
-            translateY: 0,
+            keyframes: [
-            translateX: 0,
+                { r: '50', stroke: '#3498db' },
-            loop: false,
+                { r: '20', stroke: '#3498db' },
-            duration: (duration * 1 / 2),
+                { r: '0', stroke: '#3498db' },
-            easing: 'easeInQuad',
+            ],
-        });
+            duration: duration * 2 / 3,
-        anime({
+            easing: 'easeInCubic',
-            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 * 1 / 3),
+                delay: (Math.random() * duration * 1 / 2),
-                duration: (duration * 2 / 3),
+                duration,
                 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,
-        });
     }
 }