stun

client/assets/styles/styles.css

@@ -277,6 +277,12 @@ button[disabled] {
     stroke: #333;
 }
 
+.white {
+    color: whitesmoke;
+    stroke: whitesmoke;
+}
+
+
 /*
     LOGIN
 */

client/src/components/animations.jsx

@@ -9,6 +9,7 @@ const banish = require('./anims/banish');
 const Block = require('./anims/block');
 const Buff = require('./anims/buff');
 const Debuff = require('./anims/debuff');
+const Stun = require('./anims/stun');
 const Heal = require('./anims/heal');
 const Hex = require('./anims/hex');
 const Strike = require('./anims/strike');
@@ -104,6 +105,7 @@ function animations(props) {
             case 'Hex': return <Hex />;
             case 'Siphon': return <Siphon id={construct.id} stage={stage} team={player} colour={colours.red}/>;
             case 'SiphonTick': return <SiphonTick id={construct.id} stage={stage} team={player} colour={colours.red}/>;
+            case 'Stun': return <Stun />;
             default: return false;
         }
     };

client/src/components/anims/amplify.jsx

@@ -35,6 +35,8 @@ class Amplify extends Component {
         this.animations.push(anime({
             targets: ['#amplify'],
             opacity: 1,
+            easing: 'easeInSine',
+            duration: TIMES.TARGET_DELAY_MS,
         }));
 
         this.animations.push(anime({

client/src/components/anims/block.jsx

@@ -50,7 +50,7 @@ class Block extends Component {
 
         this.animations.push(anime({
             targets: ['feTurbulence', 'feDisplacementMap'],
-            baseFrequency: 0,
+            baseFrequency: 0.02,
             scale: 1,
             easing: 'easeOutSine',
 

client/src/components/anims/stun.jsx

@@ -0,0 +1,75 @@
+const preact = require('preact');
+const { Component } = require('preact');
+const anime = require('animejs').default;
+
+const { TIMES } = require('../../constants');
+
+class Stun extends Component {
+    constructor() {
+        super();
+        this.animations = [];
+    }
+
+    render() {
+        const path = 'M0,100 C100,100 100,100 200,100';
+
+        return (
+            <svg
+                class='skill-animation white'
+                version="1.1"
+                id="stun"
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="-291 -291 582 582">
+                <filter id="ampFilter">
+                    <feTurbulence type="turbulence" baseFrequency="0.4" numOctaves="2" result="turbulence" style="transform: scale(1);"></feTurbulence>
+                    <feDisplacementMap in2="turbulence" in="SourceGraphic" scale="2" xChannelSelector="R" yChannelSelector="G"></feDisplacementMap>
+                </filter>
+                <g>
+                <path
+                    d="M3.6 0c.23-2.93-1.9-4.9-4.8-4.77S-6.37-1.87-6.33 1.3s2.92 7.1 8.03 7 9.4-4.78 9.2-10.5-5-11.95-13.4-12.1S-18.77-6.88-18.85 3.3-10.05 24.97 4.8 24.74 32.78 11.38 32.5-6.5 16.15-42.7-7.8-42.7-55.7-22.02-56.2 9.7s27.3 65 72 64 82.32-42.78 81-92.3S55.41-126.63-23-127.4-168.4-56.97-167.6 30.3s65.85 166.15 161.27 186S246.55 187.18 284.83 0"
+                />
+                </g>
+            </svg>
+        );
+    }
+
+    componentDidMount() {
+        this.animations.push(anime({
+            targets: ['#stun'],
+            opacity: 1,
+            easing: 'easeInSine',
+            duration: TIMES.TARGET_DELAY_MS,
+        }));
+
+        this.animations.push(anime({
+            targets: ['#stun'],
+            rotate: 360,
+            easing: 'easeInSine',
+
+            duration: TIMES.TARGET_DURATION_MS,
+            delay: TIMES.TARGET_DELAY_MS,
+        }));
+
+        this.animations.push(anime({
+            targets: ['#ampFilter feTurbulence', '#ampFilter feDisplacementMap'],
+            baseFrequency: 0.15,
+            scale: 4,
+            easing: 'easeInOutExpo',
+
+            duration: TIMES.TARGET_DURATION_MS,
+            delay: TIMES.TARGET_DELAY_MS,
+        }));
+    }
+
+    // this is necessary because
+    // skipping / timing / unmounting race conditions
+    // can cause the animations to cut short, this will ensure the values are reset
+    // because preact will recycle all these components
+    componentWillUnmount() {
+        for (let i = this.animations.length - 1; i >= 0; i--) {
+            this.animations[i].reset();
+        }
+    }
+}
+
+module.exports = Stun;