decay

client/src/components/anims/decay.jsx

@@ -0,0 +1,68 @@
+const preact = require('preact');
+const { Component } = require('preact');
+const anime = require('animejs').default;
+
+const { TIMES } = require('../../constants');
+
+class Decay extends Component {
+    constructor() {
+        super();
+        this.animations = [];
+    }
+
+    render() {
+        return (
+            <svg
+                id='decay'
+                class="skill-animation blue"
+                version="1.1"
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 300 300">
+                <g>
+                    <rect x="135" y="135" width="30" height="30" />
+                    <rect x="135" y="135" width="30" height="30" />
+                    <rect x="135" y="135" width="30" height="30" />
+                    <rect x="135" y="135" width="30" height="30" />
+                    <rect x="135" y="135" width="30" height="30" />
+                    <rect x="135" y="135" width="30" height="30" />
+                    <rect x="135" y="135" width="30" height="30" />
+                    <rect x="135" y="135" width="30" height="30" />
+                    <rect x="135" y="135" width="30" height="30" />
+                    <rect x="135" y="135" width="30" height="30" />
+                </g>
+            </svg>
+        );
+    }
+
+    componentDidMount() {
+        this.animations.push(anime({
+            targets: ['#decay'],
+            opacity: 1,
+
+            easing: 'easeOutExpo',
+            delay: TIMES.TARGET_DELAY_MS,
+            duration: TIMES.TARGET_DELAY_MS,
+        }));
+
+        this.animations.push(anime({
+            targets: ['#decay rect'],
+            transform: () => `translate(${anime.random(-100, 100)} ${anime.random(-100, 100)}) rotate(${anime.random(-15, 15)})`,
+            opacity: 0,
+            easing: 'linear',
+            delay: TIMES.TARGET_DELAY_MS,
+            duration: TIMES.START_SKILL,
+        }));
+    }
+
+    // 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 = Decay;