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] 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>
     );
 }