diff --git a/client/src/components/anims/slay.jsx b/client/src/components/anims/slay.jsx
index 079c2058..a136d5a2 100644
--- a/client/src/components/anims/slay.jsx
+++ b/client/src/components/anims/slay.jsx
@@ -1,34 +1,17 @@
const preact = require('preact');
const { Component } = require('preact');
const anime = require('animejs').default;
+const times = require('lodash/times');
const { TIMES } = require('../../constants');
-function projectile(x, y, radius, colour) {
- return (
-
- );
-}
-
-function sword(colour) {
- return (
-
- );
-}
+const GREEN = '#1FF01F';
+const RED = '#a52a2a';
class Slay extends Component {
constructor() {
super();
this.animations = [];
- this.colour = '#a52a2a';
- const points = new Array(30).fill(0);
- this.charges = points.map(() => projectile(150, 420, 7, '#1FF01F'));
}
render() {
@@ -39,13 +22,16 @@ class Slay extends Component {
id="slay"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 300 300">
-
-
-
-
-
- {sword(this.colour)}
- {this.charges}
+ {times(10, () => (
+
+ ))}
);
}
@@ -67,58 +53,31 @@ class Slay extends Component {
rotate,
});
- anime.set('#slay', {
- translateY: -1 * (window.innerHeight) * 0.35,
- translateX: 0,
- });
-
- anime.set('#slayFilter feDisplacementMap', {
- scale: 0,
- });
-
- anime.set('#sword', {
- fill: this.colour,
- opacity: 1,
- });
+ anime.set('#slay ellipse',{
+ fill: RED,
+ })
this.animations.push(anime({
targets: '#slay',
opacity: [
{ value: 1, duration: TIMES.TARGET_DURATION_MS * 0.2 },
- { value: 0, delay: TIMES.TARGET_DURATION_MS * 0.6, duration: TIMES.TARGET_DURATION_MS * 0.2 },
],
- translateY: 0,
- translateX: 0,
- loop: false,
easing: 'easeInQuad',
}));
this.animations.push(anime({
- targets: ['#slayFilter feTurbulence', '#slayFilter feDisplacementMap'],
- baseFrequency: 10,
- scale: 100,
- delay: TIMES.TARGET_DURATION_MS * 0.6,
+ targets: ['#slay ellipse'],
+ cx: 150,
+ cy: 325,
+ delay: TIMES.TARGET_DURATION_MS * 0.2,
duration: TIMES.TARGET_DURATION_MS * 0.3,
- easing: 'easeInQuad',
+ easing: 'easeOutQuad',
+ direction: 'alternate',
}));
- this.animations.push(anime({
- targets: '#sword',
- opacity: 0,
- delay: TIMES.TARGET_DURATION_MS * 0.9,
- }));
-
- const projectiles = document.querySelectorAll('#slay circle');
- projectiles.forEach(proj => {
- this.animations.push(anime({
- targets: proj,
- cx: Math.random() * 250 + 25,
- cy: Math.random() * 200 - 100,
- delay: TIMES.TARGET_DURATION_MS * 0.7,
- duration: TIMES.TARGET_DURATION_MS * 0.3,
- easing: 'easeInQuad',
- }));
- });
+ setTimeout(() => anime.set('#slay ellipse',{
+ fill: GREEN,
+ }), TIMES.TARGET_DURATION_MS * 0.5);
}
componentWillUnmount() {