added sleep

client/src/components/animations.jsx

@@ -23,10 +23,11 @@ const Strike = require('./anims/strike');
 const Parry = require('./anims/parry');
 const Purify = require('./anims/purify');
 const Recharge = require('./anims/recharge');
-const Reflect = require('./anims/reflect');
+const Refl = require('./anims/reflect');
 const Chaos = require('./anims/chaos');
 const Invert = require('./anims/invert');
 const Slay = require('./anims/slay');
+const Sleep = require('./anims/sleep');
 const Triage = require('./anims/triage');
 const TriageTick = require('./anims/triage.tick');
 const Siphon = require('./anims/siphon');
@@ -137,7 +138,7 @@ function animations(props) {
         case 'Banish': return <Banish id={construct.id} />;
         case 'Bash': return <Bash />;
         case 'Hex': return <Hex />;
-        case 'Sleep': return false;
+        case 'Sleep': return <Sleep />;
         case 'Throw': return false;
         case 'Ruin': return false;
 
@@ -150,7 +151,7 @@ function animations(props) {
         case 'Parry': return <Parry team={player} />;
         case 'Purify': return <Purify team={player} />;
         case 'Recharge': return <Recharge team={player} />;
-        case 'Reflect': return <Reflect team={player} />;
+        case 'Reflect': return <Refl team={player} />;
 
         default: return false;
         }

client/src/components/anims/sleep.jsx

@@ -0,0 +1,142 @@
+const preact = require('preact');
+const { Component } = require('preact');
+const anime = require('animejs').default;
+
+const { TIMES, COLOURS } = require('../../constants');
+const { randomPoints } = require('../../utils');
+
+// logarithmic spiral lifted from
+// https://upload.wikimedia.org/wikipedia/commons/5/5b/Logarithmic_spiral_(1).svg
+
+function projectile(x, y, radius, colour) {
+    return (
+        <circle
+            cx={x}
+            cy={y}
+            r={radius}
+            fill={colour}
+            stroke="none"
+            id="charges"
+            opacity="0"
+        />
+    );
+}
+
+class Sleep extends Component {
+    constructor() {
+        super();
+        this.animations = [];
+        const points = randomPoints(30, 30, { x: -250, y: -150, width: 600, height: 600 });
+        this.charges = points.map(coord => projectile(coord[0], coord[1], 15, COLOURS.GREEN));
+    }
+
+    render() {
+        const path = 'M0,100 C100,100 100,100 200,100';
+
+        return (
+            <svg
+                class='skill-animation green'
+                version="1.1"
+                id="sleep"
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="-291 -191 582 582">
+                <defs>
+                    <filter id="triageFilter">
+                        <feGaussianBlur stdDeviation="3"/>
+                        <feColorMatrix mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 19 -9" result="cutoff"/>
+                        <feComposite operator="atop" in="SourceGraphic" in2="cutoff"/>
+                    </filter>
+                </defs>
+                <g id="stun">
+                    <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>
+                <g id="heal" filter="url(#triageFilter)">
+                    {this.charges}
+                </g>
+            </svg>
+        );
+    }
+
+    componentDidMount() {
+        anime.set('#sleep', {
+            translateY: 75,
+        });
+
+        this.animations.push(anime({
+            targets: ['#sleep'],
+            opacity: [
+                { value: 1, delay: TIMES.TARGET_DELAY_MS, duration: TIMES.TARGET_DURATION_MS * 0.2 },
+            ],
+            easing: 'easeInOutSine',
+        }));
+
+        this.animations.push(anime({
+            targets: ['#sleep'],
+            rotate: 180,
+            easing: 'linear',
+            loop: true,
+            delay: TIMES.TARGET_DELAY_MS,
+            duration: TIMES.TARGET_DURATION_MS + TIMES.POST_SKILL_DURATION_MS,
+        }));
+
+        this.animations.push(anime({
+            targets: ['#stun'],
+            opacity: [
+                { value: 0, delay: TIMES.TARGET_DELAY_MS + TIMES.TARGET_DURATION_MS * 0.8, duration: TIMES.TARGET_DURATION_MS * 0.2 },
+            ],
+            easing: 'easeInOutSine',
+        }));
+
+/*        this.animations.push(anime({
+            targets: ['#heal'],
+            opacity: [
+                { value: 1, delay: TIMES.TARGET_DELAY_MS + TIMES.TARGET_DURATION_MS * 0.7, duration: TIMES.TARGET_DURATION_MS * 0.3 },
+                { value: 0, delay: TIMES.POST_SKILL_DURATION_MS * 0.6, duration: TIMES.POST_SKILL_DURATION_MS * 0.4 },
+            ],
+            easing: 'easeInOutSine',
+        }));
+*/
+
+        this.animations.push(anime({
+            targets: ['#charges'],
+            opacity: 1,
+            delay: anime.stagger(TIMES.TARGET_DURATION_MS * 0.015, { start: TIMES.TARGET_DELAY_MS }),
+            easing: 'easeInOutSine',
+        }));
+
+
+        this.animations.push(anime({
+            targets: ['#charges'],
+            cx: 0,
+            cy: 0,
+            delay: TIMES.TARGET_DELAY_MS + TIMES.TARGET_DURATION_MS + TIMES.POST_SKILL_DURATION_MS * 0.75,
+            duration: TIMES.POST_SKILL_DURATION_MS * 0.25,
+            easing: 'easeInOutSine',
+        }));
+
+    }
+
+    // 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 = Sleep;

client/src/utils.jsx

@@ -334,6 +334,8 @@ const removeTier = skill => {
 
     if (skill.includes('SiphonTick')) return 'SiphonTick';
     if (skill.includes('TriageTick')) return 'TriageTick';
+    if (skill.includes('DecayTick')) return 'DecayTick';
+    if (skill.includes('ElectrocuteTick')) return 'ElectrocuteTick';
 
     if (skill.includes('Strike')) return 'Strike';
     if (skill.includes('Heal')) return 'Heal';
@@ -359,6 +361,7 @@ const removeTier = skill => {
     if (skill.includes('Parry')) return 'Parry';
     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('Reflect')) return 'Reflect';
     if (skill.includes('Recharge')) return 'Recharge';