From ccdfe22854f781cabe2c299bb407258c7f2d784f Mon Sep 17 00:00:00 2001
From: ntr <ntr@smokestack.io>
Date: Tue, 2 Jul 2019 22:39:00 +1000
Subject: [PATCH] curse and decay changes" ;

---
 client/src/components/anims/curse.jsx |  5 ++--
 client/src/components/anims/decay.jsx | 39 +++++++++++----------------
 2 files changed, 18 insertions(+), 26 deletions(-)

diff --git a/client/src/components/anims/curse.jsx b/client/src/components/anims/curse.jsx
index 186bc94f..376658b9 100644
--- a/client/src/components/anims/curse.jsx
+++ b/client/src/components/anims/curse.jsx
@@ -58,9 +58,10 @@ class Curse extends Component {
         this.animations.push(anime({
             targets: ['#curse circle'],
             r: 0,
-            easing: 'easeInSine',
-            delay: TIMES.TARGET_DURATION_MS * 0.4,
+            easing: 'easeInOutSine',
+            delay: TIMES.TARGET_DURATION_MS,
             duration: TIMES.TARGET_DURATION_MS,
+            direction: 'reverse',
         }));
     }
 
diff --git a/client/src/components/anims/decay.jsx b/client/src/components/anims/decay.jsx
index 9fe63ed3..fa4e3aee 100644
--- a/client/src/components/anims/decay.jsx
+++ b/client/src/components/anims/decay.jsx
@@ -1,6 +1,7 @@
 const preact = require('preact');
 const { Component } = require('preact');
 const anime = require('animejs').default;
+const times = require('lodash/times');
 
 const { TIMES, COLOURS } = require('../../constants');
 
@@ -14,25 +15,17 @@ class Decay extends Component {
         return (
             <svg
                 id='decay'
-                class="skill-animation white"
+                class="skill-animation"
                 version="1.1"
                 xmlns="http://www.w3.org/2000/svg"
                 viewBox="0 0 300 300">
                 <g>
-                    <rect x="135" y="135" width="30" height="30" />
-                    <rect x="135" y="135" width="30" height="30" />
-                    <rect x="135" y="135" width="30" height="30" />
-                    <rect x="135" y="135" width="30" height="30" />
-                    <rect x="135" y="135" width="30" height="30" />
-                    <rect x="135" y="135" width="30" height="30" />
-                    <rect x="135" y="135" width="30" height="30" />
-                    <rect x="135" y="135" width="30" height="30" />
-                    <rect x="135" y="135" width="30" height="30" />
-                    <rect x="135" y="135" width="30" height="30" />
-                    <rect x="135" y="135" width="30" height="30" />
-                    <rect x="135" y="135" width="30" height="30" />
-                    <rect x="135" y="135" width="30" height="30" />
-                    <rect x="135" y="135" width="30" height="30" />
+                    {times(15, () => (
+                        <g class="box">
+                            <rect class="blue" x="135" y="135" width="30" height="30" />
+                            <rect class="white" style={{ strokeWidth: '2px' }} x="135" y="135" width="30" height="30" />
+                        </g>
+                    ))}
                 </g>
             </svg>
         );
@@ -42,20 +35,18 @@ class Decay extends Component {
         this.animations.push(anime({
             targets: ['#decay'],
             opacity: [
-                { value: 1, delay: TIMES.TARGET_FADE_IN_DELAY, duration: TIMES.TARGET_FADE_IN_DURATION },
-                { value: 0, delay: TIMES.TARGET_DURATION_MS - 1000, duration: TIMES.FADE_OUT_DURATION },
+                { 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: ['#decay rect'],
-            x: () => anime.random(50, 250),
-            y: () => anime.random(50, 250),
-            stroke: [COLOURS.WHITE, COLOURS.BLUE],
-            strokeWidth: [4, 2],
-            transform: () => `rotate(${anime.random(-15, 15)})`,
-            filter: [`drop-shadow(0 0 5px ${COLOURS.WHITE}`, `drop-shadow(0 0 5px ${COLOURS.BLUE}`],
+            targets: ['#decay .box'],
+            transform: () => `
+                translate(${anime.random(-120, 120)} ${anime.random(-120, 120)})
+                rotate(${anime.random(-15, 15)})
+            `,
             easing: 'easeOutSine',
             delay: TIMES.TARGET_DELAY_MS,
             duration: TIMES.TARGET_DURATION_MS,