added chaos and heal

client/src/components/animations.jsx

@@ -1,9 +1,9 @@
 const preact = require('preact');
 
-const Attack = require('./anims/attack');
 const Blast = require('./anims/blast');
+const Heal = require('./anims/heal');
 const Strike = require('./anims/strike');
-
+const Chaos = require('./anims/chaos');
 const Test = require('./anims/test');
 
 const AttackCharge = require('./anims/attack.charge');
@@ -47,6 +47,9 @@ function animations(props) {
                 case 'Attack': return <Strike id={construct.id} stage={stage} team={player} colour={colours.white}/>;
                 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 'Heal': return <Heal id={construct.id} stage={stage} team={player} colour={colours.red}/>;
                 default: return text;
             }
         }
@@ -59,13 +62,12 @@ function animations(props) {
             {combatAnim}
         </div>;
     }
-
+/*    return (
-    /*return (
         <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/blast.jsx

@@ -60,11 +60,19 @@ 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', {
-            rotate: 90,
             translateY: -200,
-            translateX: 0,
         });
+        
         anime.set('#explosion feDisplacementMap', {
             scale: 1,
         });
@@ -72,7 +80,6 @@ class AttackCharge extends Component {
         anime({
             targets: '.skill-anim',
             translateY: 0,
-            translateX: 0,
             loop: false,
             duration: (duration * 1 / 2),
             easing: 'easeInQuad',

client/src/components/anims/chaos.jsx

@@ -0,0 +1,108 @@
+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"
+            filter="url(#explosion)"
+        />
+    );
+}
+
+class AttackCharge extends Component {
+    constructor(props) {
+        super();
+        this.team = props.team;
+        // this.colour = props.colour;
+        this.colour = '#A25AC1';
+        const points = randomPoints(7, 30, { x: 0, y: 0, width: 300, height: 100 });
+        this.charges = points.map(coord => projectile(coord[0], coord[1], 14, this.colour));
+    }
+
+    render() {
+        return (
+            <svg
+                class={'skill-anim'}
+                version="1.1"
+                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" />
+                        <stop offset="100%" style={`stop-color:${this.colour};stop-opacity:1`} />
+                    </radialGradient>
+                </defs>
+                <filter id="explosion">
+                    <feGaussianBlur stdDeviation="4"/>
+                    <feTurbulence type="turbulence" baseFrequency="0.01" 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('.skill-anim', {
+            translateY: -200,
+            translateX: 0,
+        });
+        anime.set('#explosion feDisplacementMap', {
+            scale: 1,
+        });
+
+        anime({
+            targets: '.skill-anim',
+            translateY: 0,
+            translateX: 0,
+            loop: false,
+            duration: (duration * 2 / 3),
+            easing: 'easeInQuad',
+        });
+        anime({
+            targets: '#explosion feDisplacementMap',
+            scale: 75,
+            loop: false,
+            delay: (duration * 2 / 3),
+            duration: (duration * 1 / 3),
+            easing: 'easeInQuad',
+        });
+
+        const projectiles = document.querySelectorAll('#projectile');
+        projectiles.forEach(proj => anime({
+            targets: proj,
+            cx: Math.random() * 250 + 25,
+            cy: Math.random() * 300 + 50,
+            duration: (duration * 2 / 3),
+            easing: 'easeInQuad',
+        }));
+    }
+}
+
+module.exports = AttackCharge;

client/src/components/anims/heal.jsx

@@ -0,0 +1,106 @@
+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"
+            filter="url(#explosion)"
+        />
+    );
+}
+
+class Heal extends Component {
+    constructor(props) {
+        super();
+        this.team = props.team;
+        // this.colour = props.colour;
+        this.colour = '#1FF01F';
+        const points = randomPoints(15, 30, { x: 0, y: 0, width: 300, height: 400 });
+        this.charges = points.map(coord => projectile(coord[0], coord[1], 14, this.colour));
+    }
+
+    render() {
+        return (
+            <svg
+                class={'skill-anim'}
+                version="1.1"
+                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" />
+                        <stop offset="100%" style={`stop-color:${this.colour};stop-opacity:1`} />
+                    </radialGradient>
+                </defs>
+                <filter id="explosion">
+                    <feGaussianBlur stdDeviation="4"/>
+                    <feTurbulence type="turbulence" baseFrequency="0.01" 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('.skill-anim', {
+            translateY: -200,
+            translateX: 0,
+        });
+        anime.set('#explosion feDisplacementMap', {
+            scale: 100,
+        });
+
+        anime({
+            targets: '.skill-anim',
+            translateY: 0,
+            translateX: 0,
+            loop: false,
+            duration: (duration * 1 / 2),
+            easing: 'easeInQuad',
+        });
+        anime({
+            targets: '#explosion feDisplacementMap',
+            scale: 1,
+            loop: false,
+            duration: (duration * 1 / 2),
+            easing: 'easeInQuad',
+        });
+        anime({
+            targets: '#projectile',
+            cx: 150,
+            cy: 200,
+            delay: (duration * 1 / 2),
+            duration: (duration * 1 / 2),
+            easing: 'easeInQuad',
+        });
+    }
+}
+
+module.exports = Heal;

client/src/components/anims/strike.jsx

@@ -83,8 +83,6 @@ class Strike extends Component {
             scale: 1,
         });
 
-
-
         anime({
             targets: '.skill-anim',
             translateY: 0,

client/src/components/anims/test.jsx

@@ -3,21 +3,21 @@ const { Component } = require('preact');
 const anime = require('animejs').default;
 
 const { TIMES } = require('../../constants');
+const { randomPoints } = require('../../utils');
 
 const duration = TIMES.START_SKILL;
 
 
-function laser(dimensions, colour) {
+function projectile(x, y, radius, colour) {
-    const { x, y, length } = dimensions;
     return (
-        <rect
+        <circle
-            width="18"
+            cx={x}
-            height={length}
+            cy={y}
-            x={x}
+            r={radius}
-            y={y}
             fill="url(#grad1)"
             stroke-width="2"
             stroke={colour}
+            id="projectile"
             filter="url(#explosion)"
         />
     );
@@ -28,15 +28,9 @@ class AttackCharge extends Component {
         super();
         this.team = props.team;
         // this.colour = props.colour;
-        this.colour = '#a52a2a';
+        this.colour = '#A25AC1';
-
+        const points = randomPoints(7, 30, { x: 0, y: 0, width: 300, height: 100 });
-        const coord = [0, 100, 200];
+        this.charges = points.map(coord => projectile(coord[0], coord[1], 14, this.colour));
-        const points = coord.map(pos => ({
-            x: pos + Math.random() * 80,
-            y: 50 + Math.random() * 100,
-            length: 150 + Math.random() * 100,
-        }));
-        this.charges = points.map(pos => laser(pos, this.colour));
     }
 
     render() {
@@ -66,8 +60,16 @@ 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', {
-            rotate: 90,
             translateY: -200,
             translateX: 0,
         });
@@ -80,17 +82,26 @@ class AttackCharge extends Component {
             translateY: 0,
             translateX: 0,
             loop: false,
-            duration: (duration * 1 / 2),
+            duration,
             easing: 'easeInQuad',
         });
         anime({
             targets: '#explosion feDisplacementMap',
-            scale: 200,
+            scale: 75,
             loop: false,
-            delay: (duration * 1 / 4),
+            delay: (duration * 2 / 3),
-            duration,
+            duration: (duration * 1 / 3),
             easing: 'easeInQuad',
         });
+
+        const projectiles = document.querySelectorAll('#projectile');
+        projectiles.forEach(proj => anime({
+            targets: proj,
+            cx: Math.random() * 250 + 25,
+            cy: Math.random() * 300 + 50,
+            duration,
+            easing: 'easeInQuad',
+        }));
     }
 }