From 15cde076dea3bee6dc42e5cf7812bf5867998557 Mon Sep 17 00:00:00 2001
From: ntr <ntr@smokestack.io>
Date: Wed, 16 Oct 2019 11:14:31 +1100
Subject: [PATCH 1/3] chaos filters

---
 client/src/components/animations.jsx  |  1 +
 client/src/components/anims/chaos.jsx | 25 +++++++++++++++++++++++++
 client/src/components/anims/slay.jsx  |  2 +-
 3 files changed, 27 insertions(+), 1 deletion(-)

diff --git a/client/src/components/animations.jsx b/client/src/components/animations.jsx
index f72b356b..84953719 100644
--- a/client/src/components/animations.jsx
+++ b/client/src/components/animations.jsx
@@ -118,6 +118,7 @@ class ConstructAnimation extends Component {
             case 'Electrocute': return <Electrocute />;
             case 'ElectrocuteTick': return <Electrocute />;
             case 'Counter': return <Counter player={player} />;
+            case 'CounterAttack': return <Attack direction={direction} />;
             case 'Purify': return <Purify player={player} />;
             case 'Recharge': return <Recharge player={player} />;
             case 'Reflect': return <Refl player={player} />;
diff --git a/client/src/components/anims/chaos.jsx b/client/src/components/anims/chaos.jsx
index 8250af93..447ea3f0 100644
--- a/client/src/components/anims/chaos.jsx
+++ b/client/src/components/anims/chaos.jsx
@@ -20,6 +20,7 @@ function projectile(x, y, radius, colour) {
             cy={y}
             r={radius}
             fill={colour}
+            filter={colour === '#a52a2a' ? 'url(#chaosRedFilter)' : 'url(#chaosBlueFilter)'}
         />
     );
 }
@@ -43,6 +44,19 @@ class Chaos extends Component {
                 id="Layer_1"
                 xmlns="http://www.w3.org/2000/svg"
                 viewBox="0 0 300 400">
+                <defs>
+                    <filter id="chaosBlueFilter">
+                        <feGaussianBlur in="SourceGraphic" stdDeviation="5" />
+                        <feMerge>
+                            <feMergeNode />
+                            <feMergeNode in="SourceGraphic" />
+                        </feMerge>
+                    </filter>
+                    <filter id='chaosRedFilter'>
+                        <feTurbulence type="turbulence" baseFrequency="0" numOctaves="1" result="turbulence"></feTurbulence>
+                        <feDisplacementMap in2="turbulence" in="SourceGraphic" scale="1" xChannelSelector="R" yChannelSelector="G"></feDisplacementMap>
+                    </filter>
+                </defs>
                 {this.charges}
             </svg>
         );
@@ -75,6 +89,17 @@ class Chaos extends Component {
             easing: 'easeInQuad',
         }));
 
+        this.animations.push(anime({
+            targets: ['#chaosRedFilter feTurbulence', '#chaosRedFilter feDisplacementMap'],
+            baseFrequency: 2,
+            scale: 20,
+            numOctaves: 5,
+            easing: 'easeOutSine',
+
+            delay: TIMES.TARGET_DELAY_MS,
+            duration: TIMES.TARGET_DURATION_MS,
+        }));
+
         projectiles.forEach(proj => this.animations.push(anime({
             targets: proj,
             cx: 150 + (Math.random() * 50 * (Math.random() < 0.5 ? -1 : 1)),
diff --git a/client/src/components/anims/slay.jsx b/client/src/components/anims/slay.jsx
index fe07c228..68654ea8 100644
--- a/client/src/components/anims/slay.jsx
+++ b/client/src/components/anims/slay.jsx
@@ -28,7 +28,7 @@ function projectile(x, y, radius, colour) {
 
 function sword(colour) {
     return (
-        <polygon points='150,150 75,75, 150,300, 225,75' fill={colour} id="sword" filter="url(#slayFilter)"></polygon>
+        <polygon points='150,150 100,75, 150,300, 200,75' fill={colour} id="sword" filter="url(#slayFilter)"></polygon>
     );
 }
 

From 66f80629cd41544f1e517a3aaf2905e63bf897da Mon Sep 17 00:00:00 2001
From: ntr <ntr@smokestack.io>
Date: Wed, 16 Oct 2019 12:06:22 +1100
Subject: [PATCH 2/3] pimp siphon

---
 client/src/components/anims/siphon.tick.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/src/components/anims/siphon.tick.jsx b/client/src/components/anims/siphon.tick.jsx
index 5d0faaf9..43155c07 100644
--- a/client/src/components/anims/siphon.tick.jsx
+++ b/client/src/components/anims/siphon.tick.jsx
@@ -93,7 +93,7 @@ class SiphonTick extends Component {
                 cy: 150 + (Math.random() * 300 * (Math.random() < 0.5 ? -1 : 1)),
                 delay: (Math.random() * duration * 1 / 2),
                 duration,
-                easing: 'easeInQuad',
+                easing: 'easeOutQuad',
             });
         });
     }

From 4ed8be2fc0a34c43a2e1e5d751a5d4c9cc6a299d Mon Sep 17 00:00:00 2001
From: ntr <ntr@smokestack.io>
Date: Wed, 16 Oct 2019 12:10:38 +1100
Subject: [PATCH 3/3] disable animations on disabled buttons

---
 client/assets/styles/styles.less | 1 +
 1 file changed, 1 insertion(+)

diff --git a/client/assets/styles/styles.less b/client/assets/styles/styles.less
index f89cecb0..7150057e 100644
--- a/client/assets/styles/styles.less
+++ b/client/assets/styles/styles.less
@@ -204,6 +204,7 @@ table .highlight {
 button[disabled] {
     color: #222;
     border-color: #222;
+    animation: 0;
 }
 
 #mnml input, #mnml select {