From 189cbea0bf68b9a573706f887a36f9bb9873245e Mon Sep 17 00:00:00 2001
From: ntr <ntr@smokestack.io>
Date: Tue, 2 Jul 2019 22:10:37 +1000
Subject: [PATCH] fix hex

---
 client/src/components/animations.jsx |  2 +
 client/src/components/anims/heal.jsx | 87 +++++++++++-----------------
 client/src/components/anims/hex.jsx  |  8 +--
 3 files changed, 39 insertions(+), 58 deletions(-)

diff --git a/client/src/components/animations.jsx b/client/src/components/animations.jsx
index 19af3209..9251f1be 100644
--- a/client/src/components/animations.jsx
+++ b/client/src/components/animations.jsx
@@ -24,6 +24,7 @@ const Reflect = require('./anims/reflect');
 const Chaos = require('./anims/chaos');
 const Invert = require('./anims/invert');
 const Slay = require('./anims/slay');
+const Triage = require('./anims/triage');
 const Siphon = require('./anims/siphon');
 const SiphonTick = require('./anims/siphon.tick');
 
@@ -118,6 +119,7 @@ function animations(props) {
             case 'Parry': return <Parry team={player} />;
             case 'Recharge': return <Recharge team={player} />;
             case 'Reflect': return <Reflect team={player} />;
+            case 'Triage': return <Triage />;
             case 'Invert': return <Invert id={construct.id} />;
             case 'Siphon': return <Siphon id={construct.id} team={player} />;
             case 'SiphonTick': return <SiphonTick id={construct.id} team={player} />;
diff --git a/client/src/components/anims/heal.jsx b/client/src/components/anims/heal.jsx
index 4f0ad3b4..2d5b2b09 100644
--- a/client/src/components/anims/heal.jsx
+++ b/client/src/components/anims/heal.jsx
@@ -2,23 +2,17 @@ const preact = require('preact');
 const { Component } = require('preact');
 const anime = require('animejs').default;
 
-const { TIMES } = require('../../constants');
+const { TIMES, COLOURS } = require('../../constants');
 const { randomPoints } = require('../../utils');
 
-const duration = TIMES.TARGET_DURATION_MS;
-
-
 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)"
+            fill={colour}
+            stroke="none"
         />
     );
 }
@@ -28,75 +22,60 @@ class Heal extends Component {
         super();
         this.team = props.team;
         this.animations = [];
-        const points = randomPoints(15, 30, { x: 0, y: 0, width: 300, height: 400 });
-        this.charges = points.map(coord => projectile(coord[0], coord[1], 14, '#1FF01F'));
+        const points = randomPoints(30, 10, { x: 0, y: 0, width: 300, height: 400 });
+        this.charges = points.map(coord => projectile(coord[0], coord[1], 12, COLOURS.GREEN));
     }
 
     render() {
         return (
             <svg
-                class={'skill-anim'}
+                class='skill-animation'
+                id='heal'
                 version="1.1"
-                id="Layer_1"
                 xmlns="http://www.w3.org/2000/svg"
                 viewBox="0 0 300 400">
                 <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:#1FF01F;stop-opacity:1'} />
-                    </radialGradient>
+                    <filter id="healFilter">
+                        <feGaussianBlur stdDeviation="3"/>
+                        <feColorMatrix mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 19 -9" result="cutoff"/>
+                        <feComposite operator="atop" in="SourceGraphic" in2="cutoff"/>
+                    </filter>
                 </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}
+                <g filter="url(#healFilter)">
+                    {this.charges}
+                </g>
             </svg>
         );
     }
 
     componentDidMount() {
-        anime.set('#explosion feDisplacementMap', {
-            scale: 100,
-        });
-        anime.set('.skill-anim', {
-            opacity: 0,
-        });
-
         this.animations.push(anime({
-            targets: '.skill-anim',
+            targets: ['#heal'],
             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.6, duration: TIMES.TARGET_DURATION_MS * 0.2 },
             ],
+            easing: 'easeInOutSine',
         }));
 
+        // this.animations.push(anime({
+        //     targets: '.skill-anim',
+        //     translateY: 0,
+        //     translateX: 0,
+        //     loop: false,
+        //     delay: TIMES.TARGET_DELAY_MS,
+        //     duration: (duration * 1 / 2),
+        //     easing: 'easeInQuad',
+        // }));
+
         this.animations.push(anime({
-            targets: '.skill-anim',
-            translateY: 0,
-            translateX: 0,
-            loop: false,
-            delay: TIMES.TARGET_DELAY_MS,
-            duration: (duration * 1 / 2),
-            easing: 'easeInQuad',
-        }));
-        this.animations.push(anime({
-            targets: '#explosion feDisplacementMap',
-            scale: 1,
-            loop: false,
-            delay: TIMES.TARGET_DELAY_MS,
-            duration: (duration * 1 / 2),
-            easing: 'easeInQuad',
-        }));
-        this.animations.push(anime({
-            targets: '#projectile',
+            targets: ['#heal circle'],
             cx: 150,
             cy: 200,
-            delay: (TIMES.TARGET_DELAY_MS + duration * 1 / 2),
-            duration: (duration * 1 / 2),
-            easing: 'easeInQuad',
+            delay: TIMES.TARGET_DELAY_MS,
+            duration: TIMES.TARGET_DURATION_MS * 1.5,
+            easing: 'easeInOutSine',
+            direction: 'reverse',
         }));
     }
 }
diff --git a/client/src/components/anims/hex.jsx b/client/src/components/anims/hex.jsx
index 842464cb..86cf757c 100644
--- a/client/src/components/anims/hex.jsx
+++ b/client/src/components/anims/hex.jsx
@@ -59,8 +59,8 @@ class Hex extends Component {
             points: '64 124.94732621931382 8.574 96.00354944613788 8.62269130211947 32.03166105954991 64 4 119.37730869788052 32.03166105954991 119.426 96.00354944613788',
             easing: 'easeOutExpo',
 
-            delay: TIMES.TARGET_MAIN_DELAY,
-            duration: TIMES.TARGET_MAIN_DURATION,
+            delay: TIMES.TARGET_DELAY_MS,
+            duration: TIMES.TARGET_DURATION_MS,
         }));
 
         this.animations.push(anime({
@@ -69,8 +69,8 @@ class Hex extends Component {
             easing: 'easeInOutSine',
             direction: 'alternate',
 
-            delay: TIMES.TARGET_MAIN_DELAY,
-            duration: TIMES.TARGET_MAIN_DURATION,
+            delay: TIMES.TARGET_DELAY_MS,
+            duration: TIMES.TARGET_DURATION_MS,
         }));
     }