reflect

client/.eslintrc.js

@@ -35,25 +35,6 @@ module.exports = {
         ],
     },
     rules: {
-        // prevents stupid complaints a la
-        // (req) {
-        //   req.something = x;
-        // }
-        'no-param-reassign': [2, { props: false }],
-        'no-multi-spaces': [0],
-        'max-len': ['error', 120],
-        'import/no-extraneous-dependencies': [0],
-        'prefer-arrow-callback': [0],
-        'arrow-body-style': [0],
-        'no-return-assign': 0,
-        'no-console': [0],
-        // i like loops
-        'no-plusplus': [0],
-        'no-await-in-loop': [0],
-        'indent': ['error', 4],
-        'keyword-spacing': ['error'],
-        'key-spacing': ['error'],
-
         // for preact
         "react/react-in-jsx-scope": [0],
         "react/jsx-indent": [2, 4],
@@ -1499,5 +1480,25 @@ module.exports = {
         // https://github.com/benmosher/eslint-plugin-import/blob/c34f14f67f077acd5a61b3da9c0b0de298d20059/docs/rules/no-relative-parent-imports.md
        'import/no-relative-parent-imports': 'off',
 
+
+        // prevents stupid complaints a la
+        // (req) {
+        //   req.something = x;
+        // }
+        'no-param-reassign': [2, { props: false }],
+        'no-multi-spaces': [0],
+        'max-len': ['error', 120],
+        'import/no-extraneous-dependencies': [0],
+        'prefer-arrow-callback': [0],
+        'arrow-body-style': [0],
+        'no-return-assign': 0,
+        'no-console': [0],
+        // i like loops
+        'no-plusplus': [0],
+
+        'no-await-in-loop': [0],
+        'indent': ['error', 4],
+        'keyword-spacing': ['error'],
+        'key-spacing': ['error'],
     },
 };

client/src/components/animations.jsx

@@ -20,6 +20,7 @@ const Hex = require('./anims/hex');
 const Strike = require('./anims/strike');
 const Parry = require('./anims/parry');
 const Recharge = require('./anims/recharge');
+const Reflect = require('./anims/reflect');
 const Chaos = require('./anims/chaos');
 const Invert = require('./anims/invert');
 const Slay = require('./anims/slay');
@@ -116,7 +117,8 @@ function animations(props) {
             case 'Haste': return <Haste />;
             case 'Parry': return <Parry team={player} />;
             case 'Recharge': return <Recharge team={player} />;
-            case 'Invert': return <Invert id={construct.id} />
+            case 'Reflect': return <Reflect team={player} />;
+            case 'Invert': return <Invert id={construct.id} />;
             case 'Siphon': return <Siphon id={construct.id} team={player} />;
             case 'SiphonTick': return <SiphonTick id={construct.id} team={player} />;
             case 'Stun': return <Stun />;

client/src/components/anims/recharge.jsx

@@ -51,8 +51,8 @@ class Recharge extends Component {
         this.animations.push(anime({
             targets: ['#recharge'],
             opacity: [
-                { value: 1, delay: TIMES.TARGET_FADE_IN_DELAY, duration: TIMES.TARGET_FADE_IN_DURATION },
+                { value: 1, delay: TIMES.TARGET_DELAY_MS, duration: TIMES.TARGET_DURATION_MS * 0.2 },
-                { value: 0, delay: TIMES.TARGET_FADE_OUT_DELAY, duration: TIMES.FADE_OUT_DURATION },
+                { value: 0, delay: TIMES.TARGET_DURATION_MS * 0.6, duration: TIMES.TARGET_DURATION_MS * 0.2 },
             ],
             easing: 'easeInOutSine',
         }));
@@ -63,8 +63,8 @@ class Recharge extends Component {
             easing: 'easeInOutSine',
             direction: 'alternate',
 
-            delay: TIMES.TARGET_MAIN_DELAY,
+            delay: TIMES.TARGET_DELAY_MS,
-            duration: TIMES.TARGET_MAIN_DURATION,
+            duration: TIMES.TARGET_DURATION_MS,
         }));
 
         this.animations.push(anime({
@@ -72,10 +72,10 @@ class Recharge extends Component {
             baseFrequency: 2,
             scale: 10,
             numOctaves: 5,
-            easing: 'easeOutSine',
 
-            delay: TIMES.TARGET_FADE_IN_DELAY,
+            easing: 'easeOutSine',
-            duration: TIMES.RESOLUTION_TOTAL_MS,
+            delay: TIMES.TARGET_DELAY_MS,
+            duration: TIMES.TARGET_DURATION_MS,
         }));
     }
 

client/src/components/anims/reflect.jsx

@@ -0,0 +1,82 @@
+const preact = require('preact');
+const { Component } = require('preact');
+const anime = require('animejs').default;
+
+const { TIMES, COLOURS } = require('../../constants');
+
+class Reflect extends Component {
+    constructor() {
+        super();
+        this.animations = [];
+    }
+
+    render({ team }) {
+        let redX = anime.random(32, 128);
+        let blueX = anime.random(128, 224);
+
+        return (
+            <svg
+                class='skill-animation'
+                version="1.1"
+                id="reflect"
+                xmlns="http://www.w3.org/2000/svg"
+                style={{ transform: team ? '' : 'rotate3d(1, 0, 0, 180deg)' }}
+                viewBox="0 0 256 256">
+                <defs>
+                    <filter id="reflectFilterGreen">
+                        <feGaussianBlur stdDeviation="2"/>
+                        <feColorMatrix mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 19 -9" result="cutoff"/>
+                        <feComposite operator="atop" in="SourceGraphic" in2="cutoff"/>
+                    </filter>
+                </defs>
+                <g filter="url(#reflectFilterGreen)">
+                    <rect class="green" fill={COLOURS.GREEN} x="32" y="64" width="192" height="4" />
+                    <path class="red" d={`M${redX},20 L${redX * 1.5},64 L${redX * 2},20`} style={{ 'stroke-dasharray': anime.random(48, 64) }} />
+                    <path class="blue" d={`M${blueX},20 L${blueX * 0.75},64 L${blueX * 0.5},20`} style={{ 'stroke-dasharray': anime.random(48, 64) }} />
+                </g>
+            </svg>
+        );
+    }
+
+    componentDidMount() {
+        this.animations.push(anime({
+            targets: ['#reflect'],
+            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: ['#reflect path'],
+            strokeDashoffset: [anime.setDashoffset, 0],
+            easing: 'linear',
+            loop: true,
+            duration: TIMES.TARGET_DURATION_MS / 5,
+        }));
+
+        // this.animations.push(anime({
+        //     targets: ['#reflectFilter feTurbulence', ' #reflectFilter 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 = Reflect;