From 2e19170689d6e3deabd85b8c5ee95b56ef4d1710 Mon Sep 17 00:00:00 2001
From: ntr <ntr@smokestack.io>
Date: Wed, 3 Jul 2019 00:28:06 +1000
Subject: [PATCH] bash circle

---
 client/src/components/anims/bash.circle.jsx | 99 +++++++++++++++++++++
 1 file changed, 99 insertions(+)
 create mode 100644 client/src/components/anims/bash.circle.jsx

diff --git a/client/src/components/anims/bash.circle.jsx b/client/src/components/anims/bash.circle.jsx
new file mode 100644
index 00000000..eb8974e3
--- /dev/null
+++ b/client/src/components/anims/bash.circle.jsx
@@ -0,0 +1,99 @@
+const preact = require('preact');
+const { Component } = require('preact');
+
+const anime = require('animejs').default;
+
+const { TIMES } = require('../../constants');
+
+class Bash extends Component {
+    constructor() {
+        super();
+        this.animations = [];
+    }
+
+    render() {
+        return (
+            <svg
+                class='skill-animation red'
+                version="1.1"
+                id="bash"
+                xmlns="http://www.w3.org/2000/svg"
+                style={{ transform: 'scale(3)' }}
+                viewBox="-291 -291 582 582">
+                <filter id='bashFilter'>
+                    <feTurbulence type="turbulence" baseFrequency="0" numOctaves="1" result="turbulence"></feTurbulence>
+                    <feDisplacementMap in2="turbulence" in="SourceGraphic" scale="1" xChannelSelector="R" yChannelSelector="G"></feDisplacementMap>
+                </filter>
+                <g filter="url(#bashFilter)">
+                    <path
+                        d="M3.6 0c.23-2.93-1.9-4.9-4.8-4.77S-6.37-1.87-6.33 1.3s2.92 7.1 8.03 7 9.4-4.78 9.2-10.5-5-11.95-13.4-12.1S-18.77-6.88-18.85 3.3-10.05 24.97 4.8 24.74 32.78 11.38 32.5-6.5 16.15-42.7-7.8-42.7-55.7-22.02-56.2 9.7s27.3 65 72 64 82.32-42.78 81-92.3S55.41-126.63-23-127.4-168.4-56.97-167.6 30.3s65.85 166.15 161.27 186S246.55 187.18 284.83 0"
+                    />
+                    <path
+                        d="M3.6 0c.23-2.93-1.9-4.9-4.8-4.77S-6.37-1.87-6.33 1.3s2.92 7.1 8.03 7 9.4-4.78 9.2-10.5-5-11.95-13.4-12.1S-18.77-6.88-18.85 3.3-10.05 24.97 4.8 24.74 32.78 11.38 32.5-6.5 16.15-42.7-7.8-42.7-55.7-22.02-56.2 9.7s27.3 65 72 64 82.32-42.78 81-92.3S55.41-126.63-23-127.4-168.4-56.97-167.6 30.3s65.85 166.15 161.27 186S246.55 187.18 284.83 0"
+                        transform="rotate(120)"
+                        style="opacity: 0.75"
+                    />
+                    <path
+                        d="M3.6 0c.23-2.93-1.9-4.9-4.8-4.77S-6.37-1.87-6.33 1.3s2.92 7.1 8.03 7 9.4-4.78 9.2-10.5-5-11.95-13.4-12.1S-18.77-6.88-18.85 3.3-10.05 24.97 4.8 24.74 32.78 11.38 32.5-6.5 16.15-42.7-7.8-42.7-55.7-22.02-56.2 9.7s27.3 65 72 64 82.32-42.78 81-92.3S55.41-126.63-23-127.4-168.4-56.97-167.6 30.3s65.85 166.15 161.27 186S246.55 187.18 284.83 0"
+                        transform="rotate(240)"
+                        style="opacity: 0.5"
+                    />
+                </g>
+            </svg>
+        );
+    }
+
+    componentDidMount() {
+        this.animations.push(anime({
+            targets: ['#bash'],
+            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: ['#bash'],
+            scale: {
+                value: 1,
+                delay: TIMES.TARGET_DELAY_MS,
+                duration: TIMES.TARGET_DURATION_MS * 0.2,
+                easing: 'easeInExpo',
+            },
+            rotate: {
+                value: 180,
+                easing: 'linear',
+                loop: true,
+                delay: TIMES.TARGET_DELAY_MS,
+                duration: TIMES.TARGET_DURATION_MS,
+            },
+            delay: TIMES.TARGET_DELAY_MS + TIMES.TARGET_DURATION_MS * 0.1,
+            duration: TIMES.TARGET_DURATION_MS * 0.2,
+            easing: 'easeOutSine',
+        }));
+
+        this.animations.push(anime({
+            targets: ['#bashFilter feTurbulence', '#bashFilter feDisplacementMap'],
+            baseFrequency: 2,
+            scale: 10,
+            numOctaves: 5,
+            easing: 'easeOutSine',
+
+            delay: TIMES.TARGET_DELAY_MS,
+            duration: TIMES.TARGET_DURATION_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 = Bash;