diff --git a/client/src/components/animations.jsx b/client/src/components/animations.jsx
index f330a561..ea580f56 100644
--- a/client/src/components/animations.jsx
+++ b/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 ;
case 'Haste': return ;
case 'Triage': return ;
- case 'TriageTick': return false;
+ case 'TriageTick': return ;
case 'Scatter': return false;
case 'Hybrid': return ;
case 'Taunt': return false;
diff --git a/client/src/components/anims/triage.jsx b/client/src/components/anims/triage.jsx
index 34eff8b0..9e560405 100644
--- a/client/src/components/anims/triage.jsx
+++ b/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',
- }));
}
}
diff --git a/client/src/components/anims/triage.tick.jsx b/client/src/components/anims/triage.tick.jsx
new file mode 100644
index 00000000..e688605d
--- /dev/null
+++ b/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 (
+
+ );
+}
+
+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 (
+
+ );
+ }
+
+ 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;