hatred -> absorb, clutch -> sustain

client/src/animations.test.jsx

@@ -79,7 +79,7 @@ const SKILLS = [
     'BashI',
     'BlastI',
     'ChaosI',
-    'ClutchI',
+    'SustainI',
     'CounterAttackI',
     'CounterI',
     'CurseI',
@@ -90,10 +90,10 @@ const SKILLS = [
     'ElectrocuteTickI',
     'HasteI',
     'HasteStrike',
-    'HatredI',
+    'AbsorbI',
     'HealI',
     'HexI',
-    'HostilityI',
+    'AbsorbtionI',
     'HybridBlast',
     'HybridI',
     'InterceptI',

client/src/components/animations.jsx

@@ -10,7 +10,7 @@ const Blast = require('./anims/blast');
 const Block = require('./anims/block');
 const Buff = require('./anims/buff');
 const Chaos = require('./anims/chaos');
-const Clutch = require('./anims/clutch');
+const Sustain = require('./anims/sustain');
 const Counter = require('./anims/counter');
 const Curse = require('./anims/curse');
 const Debuff = require('./anims/debuff');
@@ -147,7 +147,7 @@ function animations(props) {
 
         // Block Base
         case 'Block': return <Block />;
-        case 'Clutch': return <Clutch team={player} />;
+        case 'Sustain': return <Sustain team={player} />;
         case 'Electrify': return <Electrify />;
         case 'Electrocute': return <Electrocute />;
         case 'ElectrocuteTick': return <Electrocute />;

client/src/components/anims/absorb.jsx

@@ -0,0 +1,74 @@
+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 Absorb extends Component {
+    constructor() {
+        super();
+        this.animations = [];
+    }
+
+    render() {
+        return (
+            <svg
+                class='skill-animation blue'
+                version="1.1"
+                id="absorb"
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 128 128">
+                <defs>
+                    <filter id="absorbFilter">
+                        <feGaussianBlur in="SourceGraphic" stdDeviation="5" />
+                        <feMerge>
+                            <feMergeNode />
+                            <feMergeNode in="SourceGraphic" />
+                        </feMerge>
+                    </filter>
+                </defs>
+                <g class='blue' filter='url(#absorbFilter)'>
+                    <path d= "
+                        M 64 4
+                        L 64 96
+                    "/>
+                </g>
+            </svg>
+        );
+    }
+
+    componentDidMount() {
+        this.animations.push(anime({
+            targets: ['#absorb'],
+            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',
+        }));
+
+        anime({
+            targets: ['#absorb path'],
+            strokeDashoffset: [anime.setDashoffset, 0],
+            duration: 2000,
+            easing: 'linear',
+            loop: true,
+        });
+    }
+
+    // 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 = Absorb;

client/src/components/anims/clutch.jsx

@@ -4,7 +4,7 @@ const anime = require('animejs').default;
 
 const { TIMES, COLOURS } = require('../../constants');
 
-class Clutch extends Component {
+class Sustain extends Component {
     constructor() {
         super();
         this.animations = [];
@@ -15,28 +15,28 @@ class Clutch extends Component {
             <svg
                 class='skill-animation green'
                 version="1.1"
-                id="clutch"
+                id="sustain"
                 xmlns="http://www.w3.org/2000/svg"
                 style={{ transform: team ? 'rotate3d(1, 0, 0, 180deg)' : '' }}
                 viewBox="0 0 300 300">
-                <filter id='clutchFilter'>
+                <filter id='sustainFilter'>
                     <feTurbulence type="turbulence" baseFrequency="0" numOctaves="1" result="turbulence"></feTurbulence>
                     <feDisplacementMap in2="turbulence" in="SourceGraphic" scale="1" xChannelSelector="R" yChannelSelector="G"></feDisplacementMap>
                 </filter>
                 <polyline
                     id="stageOne"
                     points='0 0'
-                    style={{ filter: 'url("#clutchFilter")' }}
+                    style={{ filter: 'url("#sustainFilter")' }}
                 />
                 <polyline
                     id="stageTwo"
                     points='0 0'
-                    style={{ filter: 'url("#clutchFilter")' }}
+                    style={{ filter: 'url("#sustainFilter")' }}
                 />
                 <polyline
                     id="stageThree"
                     points='0 0'
-                    style={{ filter: 'url("#clutchFilter")' }}
+                    style={{ filter: 'url("#sustainFilter")' }}
                 />
             </svg>
         );
@@ -44,7 +44,7 @@ class Clutch extends Component {
 
     componentDidMount() {
         this.animations.push(anime({
-            targets: ['#clutch'],
+            targets: ['#sustain'],
             opacity: [
                 { value: 1, delay: TIMES.TARGET_DELAY_MS, duration: TIMES.TARGET_DURATION_MS * 0.2 },
                 { value: 0, delay: TIMES.TARGET_DURATION_MS * 0.8, duration: TIMES.TARGET_DURATION_MS * 0.2 },
@@ -101,7 +101,7 @@ class Clutch extends Component {
         }));
 
         this.animations.push(anime({
-            targets: ['#clutchFilter feTurbulence', '#clutchFilter feDisplacementMap'],
+            targets: ['#sustainFilter feTurbulence', '#sustainFilter feDisplacementMap'],
             baseFrequency: 2,
             scale: 10,
             numOctaves: 5,
@@ -122,19 +122,19 @@ class Clutch extends Component {
     }
 }
 
-module.exports = Clutch;
+module.exports = Sustain;
 
 
 /*                <polyline
                     points='128,168 80,240 176,240 128,168'
-                    style={{ filter: 'url("#clutchFilter")' }}
+                    style={{ filter: 'url("#sustainFilter")' }}
                 />
                 <polyline
                     points='176,240 212,216 128,96 44,216 80,240'
-                    style={{ filter: 'url("#clutchFilter")' }}
+                    style={{ filter: 'url("#sustainFilter")' }}
                 />
                 <polyline
                     points='212,216 248,192 128,24 8,192 44,216'
-                    style={{ filter: 'url("#clutchFilter")' }}
+                    style={{ filter: 'url("#sustainFilter")' }}
                 />
 */

client/src/test.instance.js

@@ -93,7 +93,7 @@ function testInstance(uuid) {
               "cd": null
             },
             {
-              "skill": "Clutch",
+              "skill": "Sustain",
               "self_targeting": true,
               "cd": 2
             },
@@ -1334,7 +1334,7 @@ function testInstance(uuid) {
               "cd": 1
             },
             {
-              "skill": "Clutch",
+              "skill": "Sustain",
               "self_targeting": true,
               "cd": 2
             }
@@ -2201,7 +2201,7 @@ function testInstance(uuid) {
               "cd": 2
             },
             {
-              "skill": "Clutch",
+              "skill": "Sustain",
               "self_targeting": true,
               "cd": 2
             }
@@ -3441,7 +3441,7 @@ function testInstance(uuid) {
               "cd": 2
             },
             {
-              "skill": "Clutch",
+              "skill": "Sustain",
               "self_targeting": true,
               "cd": 2
             }
@@ -4132,7 +4132,7 @@ function testInstance(uuid) {
               "cd": null
             },
             {
-              "skill": "Clutch",
+              "skill": "Sustain",
               "self_targeting": true,
               "cd": 2
             }

client/src/utils.jsx

@@ -362,7 +362,7 @@ const removeTier = skill => {
     if (skill.includes('Purify')) return 'Purify';
     if (skill.includes('Electrify')) return 'Electrify';
     if (skill.includes('Electrocute')) return 'Electrocute';
-    if (skill.includes('Clutch')) return 'Clutch';
+    if (skill.includes('Sustain')) return 'Sustain';
     if (skill.includes('Reflect')) return 'Reflect';
     if (skill.includes('Recharge')) return 'Recharge';