triage

client/src/components/anims/triage.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 Triage 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='triage'
+                version="1.1"
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 300 400">
+                <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 filter="url(#triageFilter)">
+                    {this.charges}
+                </g>
+            </svg>
+        );
+    }
+
+    componentDidMount() {
+        this.animations.push(anime({
+            targets: ['#triage'],
+            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: ['#triage circle'],
+            cx: 150,
+            cy: 200,
+            delay: TIMES.TARGET_DELAY_MS,
+            duration: TIMES.TARGET_DURATION_MS,
+            easing: 'easeInOutElastic',
+        }));
+    }
+}
+
+module.exports = Triage;