triagetick

client/src/components/animations.jsx

@@ -28,6 +28,7 @@ const Chaos = require('./anims/chaos');
 const Invert = require('./anims/invert');
 const Slay = require('./anims/slay');
 const Triage = require('./anims/triage');
+const TriageTick = require('./anims/triage.tick');
 const Siphon = require('./anims/siphon');
 const SiphonTick = require('./anims/siphon.tick');
 
@@ -116,7 +117,7 @@ function animations(props) {
         case 'Amplify': return <Amplify/>;
         case 'Haste': return <Haste />;
         case 'Triage': return <Triage />;
-        case 'TriageTick': return false;
+        case 'TriageTick': return <TriageTick />;
         case 'Scatter': return false;
         case 'Hybrid': return <Hybrid />;
         case 'Taunt': return false;

client/src/components/anims/triage.jsx

@@ -57,15 +57,6 @@ class Triage extends Component {
             ],
             easing: 'easeInOutSine',
         }));
-
-        this.animations.push(anime({
-            targets: ['#triage circle'],
-            cx: 150,
-            cy: 200,
-            delay: TIMES.TARGET_DELAY_MS,
-            duration: TIMES.TARGET_DURATION_MS,
-            easing: 'easeInOutElastic',
-        }));
     }
 }
 

client/src/components/anims/triage.tick.jsx

@@ -0,0 +1,72 @@
+const preact = require('preact');
+const { Component } = require('preact');
+const anime = require('animejs').default;
+
+const { TIMES, COLOURS } = require('../../constants');
+const { randomPoints } = require('../../utils');
+
+function projectile(x, y, radius, colour) {
+    return (
+        <circle
+            cx={x}
+            cy={y}
+            r={radius}
+            fill={colour}
+            stroke="none"
+        />
+    );
+}
+
+class TriageTick extends Component {
+    constructor(props) {
+        super();
+        this.team = props.team;
+        this.animations = [];
+        const points = randomPoints(15, 10, { x: 0, y: 0, width: 300, height: 400 });
+        this.charges = points.map(coord => projectile(coord[0], coord[1], 15, COLOURS.GREEN));
+    }
+
+    render() {
+        return (
+            <svg
+                class='skill-animation'
+                id='triageTick'
+                version="1.1"
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 300 400">
+                <defs>
+                    <filter id="triageTickFilter">
+                        <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 filter="url(#triageTickFilter)">
+                    {this.charges}
+                </g>
+            </svg>
+        );
+    }
+
+    componentDidMount() {
+        this.animations.push(anime({
+            targets: ['#triageTick'],
+            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: ['#triageTick circle'],
+            cx: 150,
+            cy: 200,
+            delay: TIMES.TARGET_DELAY_MS,
+            duration: TIMES.TARGET_DURATION_MS,
+            easing: 'easeInOutElastic',
+        }));
+    }
+}
+
+module.exports = TriageTick;