Merge branch 'anims-change' of ssh://mnml.gg:40022/~/mnml into anims-change

client/src/components/animations.jsx

@@ -18,6 +18,7 @@ const Stun = require('./anims/stun');
 const Heal = require('./anims/heal');
 const Hex = require('./anims/hex');
 const Strike = require('./anims/strike');
+const Parry = require('./anims/parry');
 const Chaos = require('./anims/chaos');
 const invert = require('./anims/invert');
 const Slay = require('./anims/slay');
@@ -112,6 +113,7 @@ function animations(props) {
             case 'Heal': return <Heal id={construct.id} team={player} />;
             case 'Hex': return <Hex />;
             case 'Haste': return <Haste />;
+            case 'Parry': return <Parry team={player} />;
             case 'Invert': return invert(construct.id);
             case 'Siphon': return <Siphon id={construct.id} team={player} />;
             case 'SiphonTick': return <SiphonTick id={construct.id} team={player} />;

client/src/components/anims/bash.jsx

@@ -39,8 +39,8 @@ class Bash extends Component {
         this.animations.push(anime({
             targets: ['#bash'],
             opacity: [
-                { value: 1, delay: TIMES.TARGET_DELAY_MS, duration: TIMES.TARGET_DURATION_MS * 0.2 },
+                { value: 1, delay: TIMES.TARGET_FADE_IN_DELAY, duration: TIMES.TARGET_FADE_IN_DURATION },
-                { value: 0, delay: TIMES.TARGET_DURATION_MS * 0.6, duration: TIMES.TARGET_DURATION_MS * 0.2 },
+                { value: 0, delay: TIMES.TARGET_MAIN_DURATION - 500, duration: TIMES.FADE_OUT_DURATION },
             ],
             easing: 'easeInOutSine',
         }));

client/src/components/anims/decay.jsx

@@ -14,7 +14,7 @@ class Decay extends Component {
         return (
             <svg
                 id='decay'
-                class="skill-animation blue"
+                class="skill-animation white"
                 version="1.1"
                 xmlns="http://www.w3.org/2000/svg"
                 viewBox="0 0 300 300">
@@ -42,8 +42,8 @@ class Decay extends Component {
         this.animations.push(anime({
             targets: ['#decay'],
             opacity: [
-                { value: 1, delay: TIMES.TARGET_DELAY_MS, duration: TIMES.TARGET_DURATION_MS * 0.2 },
+                { value: 1, delay: TIMES.TARGET_FADE_IN_DELAY, duration: TIMES.TARGET_FADE_IN_DURATION },
-                { value: 0, delay: TIMES.TARGET_DURATION_MS * 0.6, duration: TIMES.TARGET_DURATION_MS * 0.2 },
+                { value: 0, delay: TIMES.TARGET_DURATION_MS - 1000, duration: TIMES.FADE_OUT_DURATION },
             ],
             easing: 'easeInOutSine',
         }));

client/src/components/anims/parry.jsx

@@ -0,0 +1,83 @@
+const preact = require('preact');
+const { Component } = require('preact');
+const anime = require('animejs').default;
+
+const { TIMES } = require('../../constants');
+
+class Parry extends Component {
+    constructor() {
+        super();
+        this.animations = [];
+    }
+
+    render({ team }) {
+        return (
+            <svg
+                class='skill-animation red'
+                version="1.1"
+                id="parry"
+                xmlns="http://www.w3.org/2000/svg"
+                style={{ transform: team ? 'rotate3d(1, 0, 0, 180deg)' : '' }}
+                viewBox="0 0 256 256">
+                <filter id='parryFilter'>
+                    <feTurbulence type="turbulence" baseFrequency="0" numOctaves="1" result="turbulence"></feTurbulence>
+                    <feDisplacementMap in2="turbulence" in="SourceGraphic" scale="1" xChannelSelector="R" yChannelSelector="G"></feDisplacementMap>
+                </filter>
+                <polyline
+                    points='128,168 80,240 176,240 128,168'
+                    style={{ filter: 'url("#parryFilter")' }}
+                />
+                <polyline
+                    points='176,240 212,216 128,96 44,216 80,240'
+                    style={{ filter: 'url("#parryFilter")' }}
+                />
+                <polyline
+                    points='212,216 248,192 128,24 8,192 44,216'
+                    style={{ filter: 'url("#parryFilter")' }}
+                />
+            </svg>
+        );
+    }
+
+    componentDidMount() {
+        this.animations.push(anime({
+            targets: ['#parry'],
+            opacity: [
+                { value: 1, delay: TIMES.TARGET_FADE_IN_DELAY, duration: TIMES.TARGET_FADE_IN_DURATION },
+                { value: 0, delay: TIMES.TARGET_FADE_OUT_DELAY, duration: TIMES.FADE_OUT_DURATION },
+            ],
+            easing: 'easeInOutSine',
+        }));
+
+        this.animations.push(anime({
+            targets: ['#parry'],
+            rotateX: 180,
+            delay: TIMES.TARGET_FADE_IN_DELAY * 3,
+            duration: TIMES.TARGET_DURATION_MS / 2,
+            easing: 'easeOutSine',
+        }));
+
+        this.animations.push(anime({
+            targets: ['#parryFilter feTurbulence', ' #parryFilter feDisplacementMap'],
+            baseFrequency: 2,
+            scale: 10,
+            numOctaves: 5,
+            easing: 'easeOutSine',
+
+            delay: TIMES.TARGET_FADE_IN_DELAY,
+            duration: TIMES.RESOLUTION_TOTAL_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 = Parry;