hex

client/assets/styles/game.css

@@ -72,7 +72,7 @@
         "name       "
         "stats      ";
 
-    transition-property: translate;
+    transition-property: translate, opacity;
     transition-duration: 0.25s;
     transition-delay: 0;
     transition-timing-function: ease;

client/src/components/animations.jsx

@@ -4,6 +4,7 @@ const AttackCharge = require('./anims/attack.charge');
 
 const Blast = require('./anims/blast');
 const Heal = require('./anims/heal');
+const Hex = require('./anims/hex');
 const Strike = require('./anims/strike');
 const Chaos = require('./anims/chaos');
 const Slay = require('./anims/slay');
@@ -54,6 +55,7 @@ function animations(props) {
                 case 'Chaos': return <Chaos id={construct.id} team={player} colour={colours.purple}/>;
                 case 'Slay': return <Slay id={construct.id} team={player} colour={colours.yellow}/>;
                 case 'Heal': return <Heal id={construct.id} stage={stage} team={player} colour={colours.red}/>;
+                case 'Hex': return <Hex id={Date.now()} stage={stage} team={player} colour={colours.red}/>;
                 case 'Siphon': return <Siphon id={construct.id} stage={stage} team={player} colour={colours.red}/>;
                 case 'SiphonTick': return <SiphonTick id={construct.id} stage={stage} team={player} colour={colours.red}/>;
                 default: return false;

client/src/components/anims/heal.jsx

@@ -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" />

client/src/components/anims/hex.jsx

@@ -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;

client/src/components/svgs/hex.jsx

@@ -1,58 +0,0 @@
-const preact = require('preact');
-const { Component } = require('preact');
-
-const anime = require('animejs').default;
-
-// shamelessly lifted from teh anime docs
-// https://animejs.com/documentation/#svgAttr
-
-class Hex extends Component {
-    render() {
-        return (
-            <svg
-                class='hex-anim skill-animation blue'
-                version="1.1"
-                id="Layer_1"
-                xmlns="http://www.w3.org/2000/svg"
-                viewBox="0 0 128 128">
-                <filter id="hexFilter">
-                    <feTurbulence type="turbulence" baseFrequency="0" numOctaves="2" result="turbulence" style="transform: scale(1);"></feTurbulence>
-                    <feDisplacementMap in2="turbulence" in="SourceGraphic" scale="0" xChannelSelector="R" yChannelSelector="G"></feDisplacementMap>
-                </filter>
-                <polygon
-                    points="64 124.94732621931382 8.574 96.00354944613788 8.62269130211947 32.03166105954991 64 4 119.37730869788052 32.03166105954991 119.426 96.00354944613788 " style="filter: url(&quot;#hexFilter&quot;); transform: scale(1);"
-                    fill="currentColor"
-                ></polygon>
-            </svg>
-        );
-    }
-
-    componentDidMount() {
-        anime({
-            targets: ['.hex-anim'],
-            scale: [1, 2],
-            loop: true,
-            direction: 'alternate',
-            easing: 'easeInOutExpo',
-        });
-
-        anime({
-            targets: ['.hex-anim polygon'],
-            points: '64 69.88600002141976 8.574 99.91603773440568 62.29420564057706 66.93105659089863 64 3.916037734405676 65.70579435942294 66.93105659089863 119.426 99.91603773440568',
-            loop: true,
-            direction: 'alternate',
-            easing: 'easeInOutExpo',
-        });
-
-        anime({
-            targets: ['#hexFilter feTurbulence', '#hexFilter feDisplacementMap'],
-            baseFrequency: 0.05,
-            scale: 15,
-            loop: true,
-            direction: 'alternate',
-            easing: 'easeInOutExpo',
-        });
-    }
-}
-
-module.exports = Hex;