recharge

client/src/components/animations.jsx

@@ -19,6 +19,7 @@ const Heal = require('./anims/heal');
 const Hex = require('./anims/hex');
 const Strike = require('./anims/strike');
 const Parry = require('./anims/parry');
+const Recharge = require('./anims/recharge');
 const Chaos = require('./anims/chaos');
 const invert = require('./anims/invert');
 const Slay = require('./anims/slay');
@@ -114,6 +115,7 @@ function animations(props) {
             case 'Hex': return <Hex />;
             case 'Haste': return <Haste />;
             case 'Parry': return <Parry team={player} />;
+            case 'Recharge': return <Recharge 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/banish.jsx

@@ -1,9 +1,6 @@
 const anime = require('animejs').default;
 const { TIMES } = require('../../constants');
 
-// shamelessly lifted from teh anime docs
-// https://animejs.com/documentation/#svgAttr
-
 function banish(id) {
     anime({
         targets: [document.getElementById(id)],

client/src/components/anims/electrify.jsx

@@ -6,9 +6,6 @@ const anime = require('animejs').default;
 
 const { TIMES } = require('../../constants');
 
-// shamelessly lifted from teh anime docs
-// https://animejs.com/documentation/#svgAttr
-
 class Electrify extends Component {
     constructor() {
         super();

client/src/components/anims/electrocute.jsx

@@ -6,9 +6,6 @@ const anime = require('animejs').default;
 
 const { TIMES } = require('../../constants');
 
-// shamelessly lifted from teh anime docs
-// https://animejs.com/documentation/#svgAttr
-
 class Electrify extends Component {
     constructor() {
         super();

client/src/components/anims/invert.jsx

@@ -1,9 +1,6 @@
 const anime = require('animejs').default;
 const { TIMES } = require('../../constants');
 
-// shamelessly lifted from teh anime docs
-// https://animejs.com/documentation/#svgAttr
-
 function invert(id) {
     anime({
         targets: [document.getElementById(id)],

client/src/components/anims/recharge.jsx

@@ -0,0 +1,93 @@
+const preact = require('preact');
+const { Component } = require('preact');
+const anime = require('animejs').default;
+
+const { TIMES } = require('../../constants');
+
+class Recharge extends Component {
+    constructor() {
+        super();
+        this.animations = [];
+    }
+
+    render({ team }) {
+        return (
+            <svg
+                class='skill-animation red'
+                version="1.1"
+                id="recharge"
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 256 256">
+                <filter id='rechargeFilter'>
+                    <feTurbulence type="turbulence" baseFrequency="0" numOctaves="1" result="turbulence"></feTurbulence>
+                    <feDisplacementMap in2="turbulence" in="SourceGraphic" scale="1" xChannelSelector="R" yChannelSelector="G"></feDisplacementMap>
+                </filter>
+                <filter id="rechargeBlueFilter">
+                    <feGaussianBlur in="SourceGraphic" stdDeviation="5" />
+                    <feMerge>
+                        <feMergeNode />
+                        <feMergeNode in="SourceGraphic" />
+                    </feMerge>
+                </filter>
+                <path
+                    class='red'
+                    filter='url("#rechargeFilter")'
+                    d='M64,128 h-50 M64,128 h50 M64,128 v50 M64,128 v-50'
+                />
+                <path
+                    class='blue'
+                    filter='url("#rechargeBlueFilter")'
+                    d='M192,128 h-50 M192,128 h50 M192,128 v50 M192,128 v-50'
+                />
+                <path
+                    class='white'
+                    d='M192,128 h-50 M192,128 h50 M192,128 v50 M192,128 v-50'
+                />
+            </svg>
+        );
+    }
+
+    componentDidMount() {
+        this.animations.push(anime({
+            targets: ['#recharge'],
+            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: ['#recharge path.white'],
+            strokeWidth: [2, 1],
+            easing: 'easeInOutSine',
+            direction: 'alternate',
+
+            delay: TIMES.TARGET_MAIN_DELAY,
+            duration: TIMES.TARGET_MAIN_DURATION,
+        }));
+
+        this.animations.push(anime({
+            targets: ['#rechargeFilter feTurbulence', ' #rechargeFilter 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 = Recharge;