132 lines
3.9 KiB
JavaScript
132 lines
3.9 KiB
JavaScript
const preact = require('preact');
|
|
const { Component } = require('preact');
|
|
const anime = require('animejs').default;
|
|
|
|
const { TIMES } = require('../../constants');
|
|
|
|
function projectile(x, y, radius, colour) {
|
|
return (
|
|
<circle
|
|
cx={x}
|
|
cy={y}
|
|
stroke="none"
|
|
r={radius}
|
|
fill={colour}
|
|
/>
|
|
);
|
|
}
|
|
|
|
function sword(colour) {
|
|
return (
|
|
<polygon points='150,150 100,75, 150,300, 200,75' stroke="none" fill={colour} id="sword" filter="url(#slayFilter)"></polygon>
|
|
);
|
|
}
|
|
|
|
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() {
|
|
return (
|
|
<svg
|
|
class={'skill-animation'}
|
|
version="1.1"
|
|
id="slay"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
viewBox="0 0 300 300">
|
|
<filter id="slayFilter">
|
|
<feGaussianBlur stdDeviation="4"/>
|
|
<feTurbulence type="turbulence" baseFrequency="0.001" numOctaves="3" result="turbulence"/>
|
|
<feDisplacementMap in2="turbulence" in="SourceGraphic" scale="1" xChannelSelector="A" yChannelSelector="A"/>
|
|
</filter>
|
|
{sword(this.colour)}
|
|
{this.charges}
|
|
</svg>
|
|
);
|
|
}
|
|
|
|
componentDidMount() {
|
|
let rotate = 0; // Self target value
|
|
if (this.props.direction.y) {
|
|
if (!this.props.direction.x) rotate = this.props.direction.y > 0 ? 0 : 180;
|
|
else {
|
|
rotate = this.props.direction.y > 0
|
|
? -Math.atan(this.props.direction.y / this.props.direction.x) * 180 / Math.PI
|
|
: -Math.atan(this.props.direction.y / this.props.direction.x) * 180 / Math.PI + 180;
|
|
}
|
|
} else if (this.props.direction.x) {
|
|
rotate = this.props.direction.x > 0 ? 270 : 90;
|
|
}
|
|
|
|
anime.set('#slay', {
|
|
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,
|
|
});
|
|
|
|
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,
|
|
duration: TIMES.TARGET_DURATION_MS * 0.3,
|
|
easing: 'easeInQuad',
|
|
}));
|
|
|
|
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',
|
|
}));
|
|
});
|
|
}
|
|
|
|
componentWillUnmount() {
|
|
for (let i = this.animations.length - 1; i >= 0; i--) {
|
|
this.animations[i].reset();
|
|
}
|
|
}
|
|
}
|
|
|
|
module.exports = Slay;
|