hex

2019-06-29 15:38:56 +10:00
parent 214214e838
commit b3cae863d1
5 changed files with 70 additions and 60 deletions
@@ -41,7 +41,6 @@ class Heal extends Component {
                id="Layer_1"
                xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 300 400">
-                // {this.charges}
                <defs>
                    <radialGradient id="grad1" cx="50%" cy="0%" r="85%" fx="50%" fy="50%">
                        <stop offset="0%" style="stop-color:#dba9a9;stop-opacity:0.6" />
@@ -0,0 +1,67 @@
+const preact = require('preact');
+const { Component } = require('preact');
+
+const anime = require('animejs').default;
+
+const { TIMES } = require('../../constants');
+
+// shamelessly lifted from teh anime docs
+// https://animejs.com/documentation/#svgAttr
+
+class Hex extends Component {
+    render(props) {
+        const {
+            id,
+            // stage,
+            // team,
+            // colour,
+        } = props;
+
+        return (
+            <svg
+                class='hex-anim skill-animation blue'
+                version="1.1"
+                id={id}
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 128 128">
+                <filter id={`filter${id}`}>
+                    <feTurbulence type="turbulence" baseFrequency="0.05" numOctaves="2" result="turbulence" style="transform: scale(1);"></feTurbulence>
+                    <feDisplacementMap in2="turbulence" in="SourceGraphic" scale="15" xChannelSelector="R" yChannelSelector="G"></feDisplacementMap>
+                </filter>
+                <polygon
+                    points="64 68.64 8.574 100 63.446 67.68 64 4 64.554 67.68 119.426 100"
+                    style={{ filter: `url("#filter${id}")` }}>
+                </polygon>
+            </svg>
+        );
+    }
+
+    componentDidMount() {
+        anime({
+            targets: ['.hex-anim polygon'],
+            points: '64 124.94732621931382 8.574 96.00354944613788 8.62269130211947 32.03166105954991 64 4 119.37730869788052 32.03166105954991 119.426 96.00354944613788',
+            direction: 'alternate',
+            easing: 'easeInOutExpo',
+            duration: TIMES.START_SKILL,
+        });
+
+        anime({
+            targets: ['feTurbulence', 'feDisplacementMap'],
+            baseFrequency: 0,
+            scale: 1,
+            direction: 'alternate',
+            easing: 'easeInOutExpo',
+            duration: TIMES.START_SKILL,
+        });
+    }
+
+    // reset hexagon
+    componentWillUnmount() {
+        anime.set({
+            targets: ['.hex-anim polygon'],
+            points: '64 124.94732621931382 8.574 96.00354944613788 8.62269130211947 32.03166105954991 64 4 119.37730869788052 32.03166105954991 119.426 96.00354944613788',
+        });
+    }
+}
+
+module.exports = Hex;