chaos filters

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} />;

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)),

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