hybrid

client/src/components/animations.jsx

@@ -18,6 +18,7 @@ const Haste = require('./anims/haste');
 const Stun = require('./anims/stun');
 const Heal = require('./anims/heal');
 const Hex = require('./anims/hex');
+const Hybrid = require('./anims/hybrid');
 const Strike = require('./anims/strike');
 const Parry = require('./anims/parry');
 const Purify = require('./anims/purify');
@@ -117,7 +118,7 @@ function animations(props) {
         case 'Triage': return <Triage />;
         case 'TriageTick': return false;
         case 'Scatter': return false;
-        case 'Hybrid': return false;
+        case 'Hybrid': return <Hybrid />;
         case 'Taunt': return false;
 
         // Debuff base

client/src/components/anims/hybrid.jsx

@@ -0,0 +1,98 @@
+const preact = require('preact');
+const { Component } = require('preact');
+const anime = require('animejs').default;
+
+const { TIMES, COLOURS } = require('../../constants');
+
+class Hybrid extends Component {
+    constructor() {
+        super();
+        this.animations = [];
+    }
+
+    render() {
+        return (
+            <svg
+                class='skill-animation'
+                id='hybrid'
+                version="1.1"
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 300 300">
+                <defs>
+                    <filter id="hybridFilter">
+                        <feGaussianBlur stdDeviation="3"/>
+                        <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(#hybridFilter)">
+                    <circle
+                        class="green"
+                        cx='50'
+                        cy='150'
+                        r='10'
+                        fill={COLOURS.GREEN}
+                        stroke="none"
+                    />
+                    <circle
+                        class="bluewhite"
+                        cx='150'
+                        cy='50'
+                        r='10'
+                        fill={COLOURS.BLUE}
+                        stroke="none"
+                    />
+                    <circle
+                        class="bluewhite"
+                        cx='150'
+                        cy='50'
+                        r='7'
+                        fill={COLOURS.WHITE}
+                        stroke="none"
+                    />
+                </g>
+            </svg>
+        );
+    }
+
+    componentDidMount() {
+        this.animations.push(anime({
+            targets: ['#hybrid'],
+            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 },
+            ],
+            transform: {
+                value: ['rotate(0)', 'rotate(360)'],
+                delay: TIMES.TARGET_DELAY_MS,
+                duration: TIMES.TARGET_DURATION_MS,
+                direction: 'alternate',
+            },
+            easing: 'easeInOutSine',
+        }));
+
+        this.animations.push(anime({
+            targets: ['#hybrid circle.green'],
+            cx: [50, 250, 50, 250],
+            delay: TIMES.TARGET_DELAY_MS,
+            duration: TIMES.TARGET_DURATION_MS,
+            easing: 'easeInOutSine',
+            loop: true,
+        }));
+
+        this.animations.push(anime({
+            targets: ['#hybrid circle.bluewhite'],
+            cy: [50, 250, 50, 250],
+            delay: TIMES.TARGET_DELAY_MS,
+            duration: TIMES.TARGET_DURATION_MS,
+            easing: 'easeInOutSine',
+            loop: true,
+        }));
+
+    }
+}
+
+module.exports = Hybrid;