blast anim, improved random point util

client/src/components/animations.jsx

@@ -1,8 +1,10 @@
 const preact = require('preact');
 
 const Attack = require('./anims/attack');
+const Blast = require('./anims/blast');
 const Strike = require('./anims/strike');
-// const Test = require('./anims/test');
+
+const Test = require('./anims/test');
 
 const AttackCharge = require('./anims/attack.charge');
 
@@ -43,6 +45,7 @@ function animations(props) {
             const skill = removeTier(text);
             switch (skill) {
                 case 'Attack': return <Attack id={construct.id} stage={stage} team={player}/>;
+                case 'Blast': return <Blast id={construct.id} stage={stage} team={player}/>;
                 case 'StrikeI': return <Strike id={construct.id} stage={stage} team={player}/>;
                 default: return text;
             }
@@ -57,13 +60,13 @@ function animations(props) {
         </div>;
     }
 
-    /*
+    
-    return (
+/*    return (
         <div class={combatTextClass}>
             <Test id={construct.id} stage={stage} team={player}/>
         </div>
     );
-    */
+*/    
     return (<div>&nbsp;</div>);
 }
 

client/src/components/anims/attack.charge.jsx

@@ -11,7 +11,7 @@ class AttackCharge extends Component {
         super();
         this.team = props.team;
         this.colour = props.colour;
-        const points = randomPoints(7, 50, 300, 400);
+        const points = randomPoints(7, 50, { x: 0, y: 0, width: 300, height: 400 });
         this.charges = points.map(coord => charge(coord[0], coord[1], 6, this.colour));
     }
 

client/src/components/anims/blast.jsx

@@ -0,0 +1,90 @@
+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 = '#00aabb';
+        const points = randomPoints(8, 60, { x: 0, y: 0, width: 300, height: 400 });
+        this.charges = points.map(coord => projectile(coord[0], coord[1], 20, 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="50%" r="70%" fx="50%" fy="50%">
+                        <stop offset="0%" style="stop-color:rgb(255,255,255);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.05" numOctaves="3" result="turbulence"/>
+                    <feDisplacementMap in2="turbulence" in="SourceGraphic" scale="1" xChannelSelector="A" yChannelSelector="A"/>
+
+                </filter>
+                {this.charges}
+            </svg>
+        );
+    }
+
+    componentDidMount() {
+        anime.set('.skill-anim', {
+            rotate: 90,
+            translateY: -200,
+            translateX: 0,
+        });
+        anime.set('#explosion feDisplacementMap', {
+            scale: 1,
+        });
+
+        anime({
+            targets: '.skill-anim',
+            translateY: 0,
+            translateX: 0,
+            loop: false,
+            duration: (duration * 1 / 2),
+            easing: 'easeInQuad',
+        });
+        anime({
+            targets: '#explosion feDisplacementMap',
+            scale: 100,
+            loop: false,
+            duration,
+            easing: 'easeInQuad',
+        });
+    }
+}
+
+module.exports = AttackCharge;

client/src/components/anims/test.jsx

@@ -2,19 +2,35 @@ const preact = require('preact');
 const { Component } = require('preact');
 const anime = require('animejs').default;
 
-const charge = require('../svgs/charge');
 const { TIMES } = require('../../constants');
 const { randomPoints } = require('../../utils');
 
 const duration = TIMES.START_SKILL;
 
-class Attack extends Component {
+
+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.props = props;
+        this.team = props.team;
-        const points = randomPoints(7, 50, 300, 400);
+        // this.colour = props.colour;
-        const length = 6;
+        this.colour = '#00aabb';
-        this.charges = points.map(coord => charge(coord[0], coord[1], length, '#a52a2a'));
+        const points = randomPoints(8, 60, { x: 0, y: 0, width: 300, height: 400 });
+        this.charges = points.map(coord => projectile(coord[0], coord[1], 20, this.colour));
     }
 
     render() {
@@ -25,45 +41,56 @@ class Attack 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="50%" r="70%" fx="50%" fy="50%">
+                        <stop offset="0%" style="stop-color:rgb(255,255,255);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.05" numOctaves="3" result="turbulence"/>
+                    <feDisplacementMap in2="turbulence" in="SourceGraphic" scale="1" xChannelSelector="A" yChannelSelector="A"/>
+
+                </filter>
                 {this.charges}
             </svg>
         );
     }
 
     componentDidMount() {
-        if (this.props.stage === 'START_SKILL') {
+        const charges = document.querySelectorAll('#projectile');
-            if (!this.props.team) {
+        if (!this.team) {
             anime.set('.skill-anim', {
-                    rotate: 180,
+                rotate: 90,
+                translateY: -200,
+                translateX: 0,
             });
         } else {
             anime.set('.skill-anim', {
-                    rotate: 0,
+                rotate: 90,
+                translateY: -200,
+                translateX: 0,
             });
         }
-        }
 
-        if (this.props.stage === 'END_SKILL') {
-            if (!this.props.team) {
-                anime.set('.skill-anim', {
-                    rotate: 0,
-                });
-            } else {
-                anime.set('.skill-anim', {
-                    rotate: 180,
-                });
-            }
-        }
-        const stageone = document.querySelectorAll('#charge');
         anime({
-            targets: stageone,
+            targets: '.skill-anim',
-            fill: '#a52a2a',
+            translateY: 0,
-            delay: anime.stagger(2),
+            translateX: 0,
-            loop: true,
+            loop: false,
+            duration: (duration * 1 / 2),
+            easing: 'easeInQuad',
+        });
+        anime({
+            targets: '#explosion feDisplacementMap',
+            scale: 100,
+            loop: false,
             duration,
             easing: 'easeInQuad',
         });
     }
 }
 
-module.exports = Attack;
+module.exports = AttackCharge;

client/src/utils.jsx

@@ -345,13 +345,19 @@ const TARGET_COLOURS = {
     BROWN: '#583108',
 };
 
-function randomPoints(numPoints, radius, width, height) {
+function randomPoints(numPoints, radius, dimensions) {
+    const {
+        x,
+        y,
+        width,
+        height,
+    } = dimensions;
     const points = [];
     let infCheck = 0;
     while (points.length < numPoints) {
         const c = [
-            Math.floor(Math.random() * (width - 2 * radius) + radius),
+            Math.floor(Math.random() * (x + width - 2 * radius) + x + radius),
-            Math.floor(Math.random() * (height - 2 * radius) + radius),
+            Math.floor(Math.random() * (y + height - 2 * radius) + y + radius),
         ];
         let overlapping = false;
         for (let j = 0; j < points.length; j += 1) {
@@ -368,7 +374,7 @@ function randomPoints(numPoints, radius, width, height) {
             infCheck = 0;
         } else {
             infCheck += 1;
-            if (infCheck > 50) {
+            if (infCheck > 100) {
                 break;
             }
         }