107 lines
3.2 KiB
JavaScript
107 lines
3.2 KiB
JavaScript
const preact = require('preact');
|
|
const { Component } = require('preact');
|
|
const anime = require('animejs').default;
|
|
|
|
const { TIMES } = require('../../constants');
|
|
const { randomPoints } = require('../../utils');
|
|
|
|
const duration = TIMES.TARGET_DURATION_MS;
|
|
|
|
|
|
function projectile(x, y, radius, colour) {
|
|
return (
|
|
<circle
|
|
cx={x}
|
|
cy={y}
|
|
r={radius}
|
|
fill="url(#grad1)"
|
|
stroke-width="2"
|
|
stroke={colour}
|
|
id="projectile"
|
|
filter="url(#explosion)"
|
|
/>
|
|
);
|
|
}
|
|
|
|
class AttackCharge extends Component {
|
|
constructor(props) {
|
|
super();
|
|
this.team = props.team;
|
|
this.animations = [];
|
|
const points = randomPoints(8, 60, { x: 0, y: 0, width: 300, height: 400 });
|
|
this.charges = points.map(coord => projectile(coord[0], coord[1], 20, '#00aabb'));
|
|
}
|
|
|
|
render() {
|
|
return (
|
|
<svg
|
|
class={'skill-anim'}
|
|
version="1.1"
|
|
id="Layer_1"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
viewBox="0 0 300 400">
|
|
// {this.charges}
|
|
<defs>
|
|
<radialGradient id="grad1" cx="50%" cy="50%" r="70%" fx="50%" fy="50%">
|
|
<stop offset="0%" style="stop-color:rgb(255,255,255);stop-opacity:0.6" />
|
|
<stop offset="100%" style={'stop-color:#00aabb;stop-opacity:1'} />
|
|
</radialGradient>
|
|
</defs>
|
|
<filter id="explosion">
|
|
<feGaussianBlur stdDeviation="4"/>
|
|
<feTurbulence type="turbulence" baseFrequency="0.05" numOctaves="3" result="turbulence"/>
|
|
<feDisplacementMap in2="turbulence" in="SourceGraphic" scale="1" xChannelSelector="A" yChannelSelector="A"/>
|
|
|
|
</filter>
|
|
{this.charges}
|
|
</svg>
|
|
);
|
|
}
|
|
|
|
componentDidMount() {
|
|
anime.set('.skill-anim', {
|
|
translateY: -300 * this.props.direction.y,
|
|
translateX: -200 * this.props.direction.x,
|
|
opacity: 0,
|
|
});
|
|
|
|
this.animations.push(anime({
|
|
targets: '.skill-anim',
|
|
opacity: [
|
|
{ value: 1, delay: TIMES.TARGET_DELAY_MS, duration: TIMES.TARGET_DURATION_MS * 0.3 },
|
|
{ value: 0, delay: TIMES.TARGET_DURATION_MS * 0.7, duration: TIMES.POST_SKILL_DURATION_MS },
|
|
],
|
|
}));
|
|
|
|
anime.set('#explosion feDisplacementMap', {
|
|
scale: 1,
|
|
});
|
|
|
|
anime({
|
|
targets: '.skill-anim',
|
|
translateY: 0,
|
|
translateX: 0,
|
|
loop: false,
|
|
delay: TIMES.TARGET_DELAY_MS,
|
|
duration: (duration * 1 / 2),
|
|
easing: 'easeInQuad',
|
|
});
|
|
anime({
|
|
targets: '#explosion feDisplacementMap',
|
|
scale: 100,
|
|
loop: false,
|
|
delay: TIMES.TARGET_DELAY_MS,
|
|
duration,
|
|
easing: 'easeInQuad',
|
|
});
|
|
}
|
|
|
|
componentWillUnmount() {
|
|
for (let i = this.animations.length - 1; i >= 0; i--) {
|
|
this.animations[i].reset();
|
|
}
|
|
}
|
|
}
|
|
|
|
module.exports = AttackCharge;
|