blast and text colours

client/assets/styles/game.css

@@ -234,65 +234,54 @@
 */}
 
 .game-construct.red-damage {
-/*    filter: drop-shadow(0 0 0.2em red);
+    color: #a52a2a;
-*/    color: red;
     /*ensure construct doesn't get opacity lowered because of being KO before the KO animation*/
     opacity: 1;
-
-    /*border-color: red;*/
 }
 
 .red-damage button {
-    /*border: 1px solid red;*/
+    color: #a52a2a;
-    color: red;
 }
 
 .red-damage text {
-    fill: red;
+    fill: #a52a2a;
 }
 
 .red-damage .stats {
-    /*border-top: 1px solid red;*/
+    /*border-top: 1px solid #a52a2a;*/
 }
 
 .game-construct.blue-damage {
-/*    filter: drop-shadow(0 0 0.2em blue);
+    color: #3498db;
-*/    color: blue;
     opacity: 1;
-    /*border-color: blue;*/
 }
 
 .blue-damage button {
-    /*border: 1px solid blue;*/
+    color: #3498db;
-    color: blue;
 }
 
 .blue-damage text {
-    fill: blue;
+    fill: #3498db;
 }
 
 .blue-damage .stats {
-    /*border-top: 1px solid blue;*/
 }
 
 .game-construct.green-damage {
-/*    filter: drop-shadow(0 0 0.2em green);
+    color: #1FF01F;
-*/    color: green;
     opacity: 1;
-    /*border-color: green;*/
 }
 
 .green-damage button {
-    /*border: 1px solid green;*/
+    color: #1FF01F;
-    color: green;
 }
 
 .green-damage text {
-    fill: green;
+    fill: #1FF01F;
 }
 
 .green-damage .stats {
-    /*border-top: 1px solid green;*/
+    /*border-top: 1px solid #1FF01F;*/
 }
 
 .game-construct.purple-damage {

client/package.json

@@ -5,7 +5,7 @@
   "main": "index.js",
   "scripts": {
     "start": "parcel watch index.html --out-dir /var/lib/mnml/public/current",
-    "anims": "parcel watch animations.html --out-dir /var/lib/mnml/public/current",
+    "anims": "parcel watch animations.html --no-hmr --out-dir /var/lib/mnml/public/current",
     "build": "parcel build index.html",
     "scss": "node-sass --watch assets/scss -o assets/styles",
     "lint": "eslint --fix --ext .jsx src/",

client/src/components/anims/blast.jsx

@@ -1,100 +1,72 @@
 const preact = require('preact');
 const { Component } = require('preact');
 const anime = require('animejs').default;
+const times = require('lodash/times');
 
-const { TIMES } = require('../../constants');
+const { TIMES, COLOURS } = require('../../constants');
-const { randomPoints } = require('../../utils');
 
-const duration = TIMES.TARGET_DURATION_MS;
+class Blast extends Component {
-
+    constructor() {
-
-function projectile(x, y, radius, colour) {
-    return (
-        <circle
-            cx={x}
-            cy={y}
-            r={radius}
-            fill="url(#grad1)"
-            stroke-width="2"
-            stroke={colour}
-            filter="url(#explosion)"
-        />
-    );
-}
-
-class AttackCharge extends Component {
-    constructor(props) {
         super();
-        this.team = props.team;
         this.animations = [];
-        const points = randomPoints(8, 60, { x: 0, y: 0, width: 300, height: 400 });
-        this.charges = points.map(coord => projectile(coord[0], coord[1], 20, '#00aabb'));
     }
 
     render() {
         return (
             <svg
-                class={'skill-animation'}
+                id='blast'
+                class="skill-animation"
                 version="1.1"
-                id="blast"
+                transform-box='fill-box'
                 xmlns="http://www.w3.org/2000/svg"
-                viewBox="0 0 300 400">
+                viewBox="0 0 300 300">
-                // {this.charges}
                 <defs>
-                    <radialGradient id="grad1" cx="50%" cy="50%" r="70%" fx="50%" fy="50%">
+                    <filter id="blastFilter">
-                        <stop offset="0%" style="stop-color:rgb(255,255,255);stop-opacity:0.6" />
+                        <feGaussianBlur in="SourceGraphic" stdDeviation="3" />
-                        <stop offset="100%" style={'stop-color:#00aabb;stop-opacity:1'} />
+                        <feMerge>
-                    </radialGradient>
+                            <feMergeNode />
-                </defs>
+                            <feMergeNode in="SourceGraphic" />
-                <filter id="explosion">
+                        </feMerge>
-                    <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}
+                </defs>
+                <g>
+                    {times(50, () => (
+                        <g>
+                            <rect filter="url(#blastFilter)" class="blue" x="150" y="200" width="3" height="5" />
+                            <rect filter="url(#blastFilter)" class="white" x="150" y="200" width="1" height="3" />
+                        </g>
+                    ))}
+                </g>
             </svg>
         );
     }
 
     componentDidMount() {
-        anime.set('#blast', {
-            translateX: -200 * this.props.direction.x,
-            translateY: -300 * this.props.direction.y,
-        });
-
         this.animations.push(anime({
-            targets: '#blast',
+            targets: ['#blast'],
             opacity: [
-                { value: 1, delay: TIMES.TARGET_DELAY_MS, duration: TIMES.TARGET_DURATION_MS * 0.3 },
+                { value: 1, delay: TIMES.TARGET_DELAY_MS, duration: TIMES.TARGET_DURATION_MS * 0.2 },
-                { value: 0, delay: TIMES.TARGET_DURATION_MS * 0.7, duration: TIMES.POST_SKILL_DURATION_MS },
+                { value: 0, delay: TIMES.TARGET_DURATION_MS * 0.5, duration: TIMES.TARGET_DURATION_MS * 0.2 },
             ],
+            easing: 'easeInOutSine',
         }));
 
-        anime.set('#explosion feDisplacementMap', {
-            scale: 1,
-        });
-
         this.animations.push(anime({
-            targets: '#blast',
+            targets: ['#blast g'],
-            translateY: 0,
+            transform: () => `
-            translateX: 0,
+                translate(${anime.random(-100, 100)} ${anime.random(-100, 100)})
-            loop: false,
+            `,
+            style: { rotate: anime.random(-180, 180) },
+            easing: 'easeOutCubic',
             delay: TIMES.TARGET_DELAY_MS,
-            duration: (duration * 1 / 2),
+            duration: TIMES.TARGET_DURATION_MS,
-            easing: 'easeInQuad',
-        }));
-
-        this.animations.push(anime({
-            targets: '#explosion feDisplacementMap',
-            scale: 200,
-            loop: false,
-            delay: TIMES.TARGET_DELAY_MS + duration * 1 / 2,
-            duration: duration * 1 / 2,
-            easing: 'easeInQuad',
         }));
     }
 
+    // this is necessary because
+    // skipping / timing / unmounting race conditions
+    // can cause the animations to cut short, this will ensure the values are reset
+    // because preact will recycle all these components
     componentWillUnmount() {
         for (let i = this.animations.length - 1; i >= 0; i--) {
             this.animations[i].reset();
@@ -102,4 +74,4 @@ class AttackCharge extends Component {
     }
 }
 
-module.exports = AttackCharge;
+module.exports = Blast;