From 25f367091b72bb0f14153b4c7aa9332f73d4488f Mon Sep 17 00:00:00 2001
From: ntr <ntr@smokestack.io>
Date: Sun, 30 Jun 2019 16:43:43 +1000
Subject: [PATCH] sameerize timings fns

---
 client/src/components/anims/amplify.jsx    |  4 ++-
 client/src/components/anims/block.jsx      |  6 ++--
 client/src/components/anims/buff.jsx       | 29 +++++++++++++--
 client/src/components/anims/debuff.jsx     | 42 +++++++++++++++++-----
 client/src/components/anims/hex.jsx        |  4 +--
 client/src/components/anims/stun.jsx       | 17 +++++----
 client/src/components/targeting.arrows.jsx |  2 +-
 7 files changed, 79 insertions(+), 25 deletions(-)

diff --git a/client/src/components/anims/amplify.jsx b/client/src/components/anims/amplify.jsx
index f221900b..6b42f3ff 100644
--- a/client/src/components/anims/amplify.jsx
+++ b/client/src/components/anims/amplify.jsx
@@ -35,7 +35,9 @@ class Amplify extends Component {
         this.animations.push(anime({
             targets: ['#amplify'],
             opacity: 1,
-            easing: 'easeInSine',
+
+            easing: 'easeOutExpo',
+            delay: TIMES.TARGET_DELAY_MS,
             duration: TIMES.TARGET_DELAY_MS,
         }));
 
diff --git a/client/src/components/anims/block.jsx b/client/src/components/anims/block.jsx
index 5f7e2bec..f3e215b0 100644
--- a/client/src/components/anims/block.jsx
+++ b/client/src/components/anims/block.jsx
@@ -49,10 +49,10 @@ class Block extends Component {
         }));
 
         this.animations.push(anime({
-            targets: ['feTurbulence', 'feDisplacementMap'],
-            baseFrequency: 0.02,
+            targets: ['#blockFilter feTurbulence', ' #blockFilter feDisplacementMap'],
+            baseFrequency: 0,
             scale: 1,
-            easing: 'easeInOutElastic',
+            easing: 'easeOutSine',
 
             delay: TIMES.TARGET_DELAY_MS,
             duration: TIMES.TARGET_DURATION_MS,
diff --git a/client/src/components/anims/buff.jsx b/client/src/components/anims/buff.jsx
index 9c76d0aa..e14933b7 100644
--- a/client/src/components/anims/buff.jsx
+++ b/client/src/components/anims/buff.jsx
@@ -14,10 +14,15 @@ class Buff extends Component {
         return (
             <svg
                 id='buff'
+                class="skill-animation"
                 version="1.1"
                 xmlns="http://www.w3.org/2000/svg"
                 viewBox="0 0 300 300">
-                <g>
+                <filter id='buffFilter'>
+                    <feTurbulence type="turbulence" baseFrequency="0.05" numOctaves="2" result="turbulence" style="transform: scale(1);"></feTurbulence>
+                    <feDisplacementMap in2="turbulence" in="SourceGraphic" scale="15" xChannelSelector="R" yChannelSelector="G"></feDisplacementMap>
+                </filter>
+                <g filter='url("#buffFilter")'>
                     <polygon class='buff-one' points='0,190    100,300   190,190'/>
                     <polygon class='buff-two' points='40,170    100,300   160,170'/>
                     <polygon class='buff-three' points='70,150    100,300   130,150'/>
@@ -27,11 +32,20 @@ class Buff extends Component {
     }
 
     componentDidMount() {
+        this.animations.push(anime({
+            targets: ['#buff'],
+            opacity: 1,
+
+            easing: 'easeOutExpo',
+            delay: TIMES.TARGET_DELAY_MS,
+            duration: TIMES.TARGET_DELAY_MS,
+        }));
+
         this.animations.push(anime({
             targets: ['#buff .buff-one'],
             points: '0,190    100,10   190,190',
             easing: 'easeOutExpo',
-            duration: TIMES.START_SKILL
+            duration: TIMES.START_SKILL,
         }));
 
         this.animations.push(anime({
@@ -47,6 +61,17 @@ class Buff extends Component {
             easing: 'easeOutExpo',
             duration: TIMES.START_SKILL,
         }));
+
+        this.animations.push(anime({
+            targets: ['#buffFilter feTurbulence', ' #buffFilter feDisplacementMap'],
+            baseFrequency: 0,
+            scale: 1,
+            easing: 'easeOutSine',
+
+            delay: TIMES.TARGET_DELAY_MS,
+            duration: TIMES.TARGET_DURATION_MS,
+        }));
+
     }
 
     // this is necessary because
diff --git a/client/src/components/anims/debuff.jsx b/client/src/components/anims/debuff.jsx
index f8b46c26..a1e32ba6 100644
--- a/client/src/components/anims/debuff.jsx
+++ b/client/src/components/anims/debuff.jsx
@@ -13,15 +13,20 @@ class Debuff extends Component {
     render() {
         return (
             <svg
-                id='buff'
+                id='debuff'
+                class="skill-animation"
                 version="1.1"
                 xmlns="http://www.w3.org/2000/svg"
                 style={{ transform: 'rotate(180deg)' }}
                 viewBox="0 0 300 300">
-                <g>
-                    <polygon class='buff-one' points='0,190    100,300   190,190'/>
-                    <polygon class='buff-two' points='40,170    100,300   160,170'/>
-                    <polygon class='buff-three' points='70,150    100,300   130,150'/>
+                <filter id='debuffFilter'>
+                    <feTurbulence type="turbulence" baseFrequency="0.05" numOctaves="2" result="turbulence" style="transform: scale(1);"></feTurbulence>
+                    <feDisplacementMap in2="turbulence" in="SourceGraphic" scale="15" xChannelSelector="R" yChannelSelector="G"></feDisplacementMap>
+                </filter>
+                <g filter='url("#debuffFilter")'>
+                    <polygon class='debuff-one' points='0,190    100,300   190,190'/>
+                    <polygon class='debuff-two' points='40,170    100,300   160,170'/>
+                    <polygon class='debuff-three' points='70,150    100,300   130,150'/>
                 </g>
             </svg>
         );
@@ -29,26 +34,45 @@ class Debuff extends Component {
 
     componentDidMount() {
         this.animations.push(anime({
-            targets: ['#buff .buff-one'],
+            targets: ['#debuff'],
+            opacity: 1,
+
+            easing: 'easeOutExpo',
+            delay: TIMES.TARGET_DELAY_MS,
+            duration: TIMES.TARGET_DELAY_MS,
+        }));
+
+        this.animations.push(anime({
+            targets: ['#debuff .debuff-one'],
             points: '0,190    100,10   190,190',
             easing: 'easeOutExpo',
             duration: TIMES.START_SKILL,
         }));
 
         this.animations.push(anime({
-            targets: ['#buff .buff-two'],
+            targets: ['#debuff .debuff-two'],
             points: '40,170    100,50   160,170',
             easing: 'easeOutExpo',
             duration: TIMES.START_SKILL,
         }));
 
         this.animations.push(anime({
-            targets: ['#buff .buff-three'],
+            targets: ['#debuff .debuff-three'],
             points: '70,150    100,90   130,150',
             easing: 'easeOutExpo',
             duration: TIMES.START_SKILL,
-            complete: anim => anim.reset(),
         }));
+
+        this.animations.push(anime({
+            targets: ['#debuffFilter feTurbulence', ' #debuffFilter feDisplacementMap'],
+            baseFrequency: 0,
+            scale: 1,
+            easing: 'easeOutSine',
+
+            delay: TIMES.TARGET_DELAY_MS,
+            duration: TIMES.TARGET_DURATION_MS,
+        }));
+
     }
 
     // this is necessary because
diff --git a/client/src/components/anims/hex.jsx b/client/src/components/anims/hex.jsx
index 2ac3f878..c2404b17 100644
--- a/client/src/components/anims/hex.jsx
+++ b/client/src/components/anims/hex.jsx
@@ -22,13 +22,11 @@ class Hex extends Component {
                 id="hex"
                 xmlns="http://www.w3.org/2000/svg"
                 viewBox="0 0 128 128">
-                <filter id='hexFilter'
-                    key={Date.now()}>
+                <filter id='hexFilter'>
                     <feTurbulence type="turbulence" baseFrequency="0.05" numOctaves="2" result="turbulence" style="transform: scale(1);"></feTurbulence>
                     <feDisplacementMap in2="turbulence" in="SourceGraphic" scale="15" xChannelSelector="R" yChannelSelector="G"></feDisplacementMap>
                 </filter>
                 <polygon
-                    key={Date.now()}
                     points="64 68.64 8.574 100 63.446 67.68 64 4 64.554 67.68 119.426 100"
                     style={{ filter: 'url("#hexFilter")' }}>
                 </polygon>
diff --git a/client/src/components/anims/stun.jsx b/client/src/components/anims/stun.jsx
index cb6d18e8..41e72c3d 100644
--- a/client/src/components/anims/stun.jsx
+++ b/client/src/components/anims/stun.jsx
@@ -4,6 +4,9 @@ const anime = require('animejs').default;
 
 const { TIMES } = require('../../constants');
 
+// logarithmic spiral lifted from
+// https://upload.wikimedia.org/wikipedia/commons/5/5b/Logarithmic_spiral_(1).svg
+
 class Stun extends Component {
     constructor() {
         super();
@@ -47,14 +50,16 @@ class Stun extends Component {
         this.animations.push(anime({
             targets: ['#stun'],
             opacity: 1,
-            easing: 'easeInSine',
+
+            easing: 'easeOutExpo',
+            delay: TIMES.TARGET_DELAY_MS,
             duration: TIMES.TARGET_DELAY_MS,
         }));
 
         this.animations.push(anime({
             targets: ['#stun'],
             rotate: 180,
-            easing: 'easeInSine',
+            easing: 'linear',
 
             duration: TIMES.TARGET_DURATION_MS,
             delay: TIMES.TARGET_DELAY_MS,
@@ -62,12 +67,12 @@ class Stun extends Component {
 
         this.animations.push(anime({
             targets: ['#stunFilter feTurbulence', '#stunFilter feDisplacementMap'],
-            baseFrequency: 0.4,
-            scale: 5,
-            easing: 'easeInOutExpo',
+            baseFrequency: 0,
+            scale: 1,
+            easing: 'easeOutSine',
 
-            duration: TIMES.TARGET_DURATION_MS,
             delay: TIMES.TARGET_DELAY_MS,
+            duration: TIMES.TARGET_DURATION_MS,
         }));
     }
 
diff --git a/client/src/components/targeting.arrows.jsx b/client/src/components/targeting.arrows.jsx
index a8710a5f..cf403d42 100644
--- a/client/src/components/targeting.arrows.jsx
+++ b/client/src/components/targeting.arrows.jsx
@@ -89,7 +89,7 @@ class TargetSvg extends Component {
             if (resolution.event[1]) ([, { skill }] = resolution.event);
         }
         const resolutionText = resolution
-            ? <text x={`${width / 2.3}`} y={`${height / 2.3}`} font-family="Jura" font-size="2em"> {skill} </text>
+            ? <text x={`${(width / 2) - 50}`} y={`${(height / 2) + 16}`} font-family="Jura" font-size="2em"> {skill} </text>
             : null;
 
         return (