restrict

client/src/components/animations.jsx

@@ -4,13 +4,14 @@ const anime = require('animejs').default;
 const AttackCharge = require('./anims/attack.charge');
 
 const Amplify = require('./anims/amplify');
-const Blast = require('./anims/blast');
 const Banish = require('./anims/banish');
 const Bash = require('./anims/bash');
+const Blast = require('./anims/blast');
 const Block = require('./anims/block');
 const Buff = require('./anims/buff');
 const Chaos = require('./anims/chaos');
 const Clutch = require('./anims/clutch');
+const Counter = require('./anims/counter');
 const Curse = require('./anims/curse');
 const Debuff = require('./anims/debuff');
 const Decay = require('./anims/decay');
@@ -22,14 +23,14 @@ const Hex = require('./anims/hex');
 const Hybrid = require('./anims/hybrid');
 const Intercept = require('./anims/intercept');
 const Invert = require('./anims/invert');
-const Counter = require('./anims/counter');
 const Purify = require('./anims/purify');
 const Recharge = require('./anims/recharge');
 const Refl = require('./anims/reflect');
-const Slay = require('./anims/slay');
-const Sleep = require('./anims/sleep');
+const Restrict = require('./anims/restrict');
 const Siphon = require('./anims/siphon');
 const SiphonTick = require('./anims/siphon.tick');
+const Slay = require('./anims/slay');
+const Sleep = require('./anims/sleep');
 const Strike = require('./anims/strike');
 const Stun = require('./anims/stun');
 const Triage = require('./anims/triage');
@@ -133,7 +134,7 @@ function animations(props) {
         case 'Invert': return <Invert id={construct.id} />;
         case 'Purge': return false;
         case 'Silence': return false;
-        case 'Snare': return false;
+        case 'Restrict': return <Restrict />;
 
         // Stun Base
         case 'Stun': return <Stun />;

client/src/components/anims/restrict.jsx

@@ -0,0 +1,102 @@
+const preact = require('preact');
+const { Component } = require('preact');
+
+const anime = require('animejs').default;
+
+const { TIMES } = require('../../constants');
+
+class Restrict extends Component {
+    constructor() {
+        super();
+        this.animations = [];
+    }
+
+    render() {
+        return (
+            <svg
+                class='skill-animation red'
+                version="1.1"
+                id="restrict"
+                xmlns="http://www.w3.org/2000/svg"
+                style={{ transform: 'scale(3)' }}
+                viewBox="0 0 128 128">
+                <filter id='restrictFilter'>
+                    <feTurbulence type="turbulence" baseFrequency="0" numOctaves="1" result="turbulence"></feTurbulence>
+                    <feDisplacementMap in2="turbulence" in="SourceGraphic" scale="1" xChannelSelector="R" yChannelSelector="G"></feDisplacementMap>
+                </filter>
+                <g filter="url(#restrictFilter)" stroke-width="2px" >
+                    <path id="rOne" d="M 32 96 L 32 32" />
+                    <path id="rTwo" d="M 96 32 L 96 96" />
+                </g>
+            </svg>
+        );
+    }
+
+    componentDidMount() {
+        this.animations.push(anime({
+            targets: ['#restrict'],
+            opacity: [
+                { 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: ['#restrict'],
+            scale: {
+                value: 1,
+                delay: TIMES.TARGET_DELAY_MS,
+                duration: TIMES.TARGET_DURATION_MS * 0.2,
+                easing: 'easeInExpo',
+            },
+
+            delay: TIMES.TARGET_DELAY_MS + TIMES.TARGET_DURATION_MS * 0.1,
+            duration: TIMES.TARGET_DURATION_MS * 0.2,
+            easing: 'easeOutSine',
+        }));
+
+        this.animations.push(anime({
+            targets: ['#restrictFilter feTurbulence', '#restrictFilter feDisplacementMap'],
+            baseFrequency: 2,
+            scale: 5,
+            numOctaves: 5,
+            easing: 'easeOutSine',
+
+            delay: TIMES.TARGET_DELAY_MS,
+            duration: TIMES.TARGET_DURATION_MS,
+        }));
+
+        this.animations.push(anime({
+            targets: ['#rOne'],
+
+            d: 'M 96 32 L 32 96',
+
+            delay: TIMES.TARGET_DELAY_MS + TIMES.TARGET_DURATION_MS * 0.4,
+            duration: TIMES.TARGET_DURATION_MS * 0.4,
+            easing: 'easeOutSine',
+        }));
+
+        this.animations.push(anime({
+            targets: ['#rTwo'],
+
+            d: 'M 96 96 L 32 32',
+
+            delay: TIMES.TARGET_DELAY_MS + TIMES.TARGET_DURATION_MS * 0.4,
+            duration: TIMES.TARGET_DURATION_MS * 0.4,
+            easing: 'easeOutSine',
+        }));
+    }
+
+    // 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 = Restrict;