wip

client/src/components/anims/amplify.jsx

@@ -0,0 +1,54 @@
+const preact = require('preact');
+const { Component } = require('preact');
+
+const anime = require('animejs').default;
+
+class Amplify extends Component {
+    constructor() {
+        super();
+        this.id = Math.random();
+    }
+
+    render() {
+        const path = 'M0,100 C100,100 100,100 200,100';
+
+        return (
+            <svg
+                class='skill-animation'
+                version="1.1"
+                id="amplify"
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 200 200">
+                <filter id="ampFilter">
+                    <feTurbulence type="turbulence" baseFrequency="0.4" numOctaves="2" result="turbulence" style="transform: scale(1);"></feTurbulence>
+                    <feDisplacementMap in2="turbulence" in="SourceGraphic" scale="2" xChannelSelector="R" yChannelSelector="G"></feDisplacementMap>
+                </filter>
+                <path filter='url("#ampFilter")' d={path} />
+            </svg>
+        );
+    }
+
+    componentDidMount() {
+        const altPath = 'M0,100 C100,400 100,-200 200,100';
+        anime({
+            targets: '#amplify path',
+            d: [{ value: altPath }],
+            stroke: ['#3498db', '#a52a2a'],
+            duration: 1000,
+            direction: 'alternate',
+            easing: 'easeInOutSine',
+            delay: 500,
+        });
+
+        anime({
+            targets: ['#ampFilter feTurbulence', '#ampFilter feDisplacementMap'],
+            baseFrequency: 0.15,
+            scale: 4,
+            direction: 'alternate',
+            easing: 'easeInOutExpo',
+            delay: 500,
+        });
+    }
+}
+
+module.exports = Amplify;

client/src/components/anims/attack.jsx

@@ -35,37 +35,35 @@ class Attack extends Component {
     componentDidMount() {
         let y = 0;
         const daggers = document.querySelectorAll('.attack-anim .dagger');
-        if (this.props.stage === 'START_SKILL') {
-            anime.set(daggers, {
-                y: 250,
+        anime.set(daggers, {
+            y: 250,
+        });
+        y = -150;
+        if (!this.props.team) {
+            anime.set('.attack-anim', {
+                rotate: 180,
+            });
+        } else {
+            anime.set('.attack-anim', {
+                rotate: 0,
             });
-            y = -150;
-            if (!this.props.team) {
-                anime.set('.attack-anim', {
-                    rotate: 180,
-                });
-            } else {
-                anime.set('.attack-anim', {
-                    rotate: 0,
-                });
-            }
         }
 
-        if (this.props.stage === 'END_SKILL') {
-            anime.set(daggers, {
-                y: 400,
-            });
-            y = -150;
-            if (!this.props.team) {
-                anime.set('.attack-anim', {
-                    rotate: 0,
-                });
-            } else {
-                anime.set('.attack-anim', {
-                    rotate: 180,
-                });
-            }
-        }
+        // if (this.props.stage === 'END_SKILL') {
+        //     anime.set(daggers, {
+        //         y: 400,
+        //     });
+        //     y = -150;
+        //     if (!this.props.team) {
+        //         anime.set('.attack-anim', {
+        //             rotate: 0,
+        //         });
+        //     } else {
+        //         anime.set('.attack-anim', {
+        //             rotate: 180,
+        //         });
+        //     }
+        // }
 
         anime({
             targets: daggers,

client/src/components/anims/banish.jsx

@@ -0,0 +1,17 @@
+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)],
+        scaleY: 0,
+        fill: '#fff',
+        easing: 'easeInOutElastic',
+        duration: TIMES.START_SKILL,
+    });
+}
+
+module.exports = banish;

client/src/components/anims/heal.jsx

@@ -59,19 +59,19 @@ class Heal extends Component {
     }
 
     componentDidMount() {
-        if (!this.props.team) {
-            anime.set('.skill-anim', {
-                rotate: Math.random() * 180 + 90,
-            });
-        } else {
-            anime.set('.skill-anim', {
-                rotate: Math.random() * 180 + 270,
-            });
-        }
-        anime.set('.skill-anim', {
-            translateY: -200,
-            translateX: 0,
-        });
+        // if (!this.props.team) {
+        //     anime.set('.skill-anim', {
+        //         rotate: Math.random() * 180 + 90,
+        //     });
+        // } else {
+        //     anime.set('.skill-anim', {
+        //         rotate: Math.random() * 180 + 270,
+        //     });
+        // }
+        // anime.set('.skill-anim', {
+        //     translateY: -200,
+        //     translateX: 0,
+        // });
         anime.set('#explosion feDisplacementMap', {
             scale: 100,
         });