111 lines
3.2 KiB
JavaScript
111 lines
3.2 KiB
JavaScript
const preact = require('preact');
|
|
const { Component } = require('preact');
|
|
const anime = require('animejs').default;
|
|
|
|
const { TIMES } = require('../../constants');
|
|
|
|
const duration = TIMES.START_SKILL;
|
|
|
|
|
|
function projectile(x, y, radius, colour) {
|
|
return (
|
|
<circle
|
|
cx={x}
|
|
cy={y}
|
|
r={radius}
|
|
fill="url(#grad1)"
|
|
stroke-width="0.1"
|
|
stroke={colour}
|
|
id="projectile"
|
|
/>
|
|
);
|
|
}
|
|
|
|
class SiphonTick extends Component {
|
|
constructor(props) {
|
|
super();
|
|
this.team = props.team;
|
|
// this.colour = props.colour;
|
|
this.colour = '#3498db';
|
|
const points = new Array(15).fill(0);
|
|
this.charges = points.map(() => projectile(150, 150, 7, '#1FF01F'));
|
|
}
|
|
|
|
render() {
|
|
return (
|
|
<svg
|
|
class={'skill-anim'}
|
|
version="1.1"
|
|
id="Layer_1"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
viewBox="0 0 300 400">
|
|
<filter id="blur">
|
|
<feGaussianBlur in="SourceGraphic" stdDeviation="2" />
|
|
</filter>
|
|
<circle id="siphon" r="20" cx="150" cy="150" stroke="#3498db" stroke-width="2.5%" filter="url(#blur)"/>
|
|
|
|
<defs>
|
|
<radialGradient id="grad1" cx="50%" cy="0%" r="85%" fx="50%" fy="50%">
|
|
<stop offset="0%" style="stop-color:#3498db;stop-opacity:0.4" />
|
|
<stop offset="100%" style={'stop-color:#1FF01F;stop-opacity:1'} />
|
|
</radialGradient>
|
|
</defs>
|
|
<filter id="explosion">
|
|
<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>
|
|
|
|
{this.charges}
|
|
</svg>
|
|
);
|
|
}
|
|
|
|
componentDidMount() {
|
|
if (!this.props.team) {
|
|
anime.set('.skill-anim', {
|
|
rotate: Math.random() * 180 + 90,
|
|
});
|
|
} else {
|
|
anime.set('.skill-anim', {
|
|
rotate: Math.random() * 180 + 270,
|
|
});
|
|
}
|
|
|
|
anime.set('#projectile', {
|
|
cx: 150,
|
|
cy: 150,
|
|
});
|
|
|
|
anime.set('#siphon', {
|
|
r: '80',
|
|
stroke: '#3498db',
|
|
});
|
|
|
|
anime({
|
|
targets: '#siphon',
|
|
keyframes: [
|
|
{ r: '50', stroke: '#3498db' },
|
|
{ r: '20', stroke: '#3498db' },
|
|
{ r: '0', stroke: '#3498db' },
|
|
],
|
|
duration: duration * 2 / 3,
|
|
easing: 'easeInCubic',
|
|
});
|
|
|
|
const projectiles = document.querySelectorAll('#projectile');
|
|
projectiles.forEach(proj => {
|
|
anime({
|
|
targets: proj,
|
|
cx: Math.random() * 250 + 25,
|
|
cy: Math.random() * 200 - 100,
|
|
delay: (Math.random() * duration * 1 / 2),
|
|
duration,
|
|
easing: 'easeInQuad',
|
|
});
|
|
});
|
|
}
|
|
}
|
|
|
|
module.exports = SiphonTick;
|