83 lines
2.1 KiB
JavaScript
83 lines
2.1 KiB
JavaScript
const preact = require('preact');
|
|
const { Component } = require('preact');
|
|
const anime = require('animejs').default;
|
|
|
|
const dagger = require('../svgs/dagger');
|
|
const { TIMES } = require('../../constants');
|
|
|
|
const duration = TIMES.TARGET_DURATION_MS;
|
|
|
|
class Attack extends Component {
|
|
constructor(props) {
|
|
super();
|
|
this.props = props;
|
|
}
|
|
|
|
render() {
|
|
return (
|
|
<svg
|
|
class={'attack-anim'}
|
|
version="1.1"
|
|
id="Layer_1"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
viewBox="0 0 300 400">
|
|
{dagger(10, 250, 40, 150)}
|
|
{dagger(50, 250, 40, 150)}
|
|
{dagger(90, 250, 40, 150)}
|
|
{dagger(130, 250, 40, 150)}
|
|
{dagger(170, 250, 40, 150)}
|
|
{dagger(210, 250, 40, 150)}
|
|
{dagger(250, 250, 40, 150)}
|
|
</svg>
|
|
);
|
|
}
|
|
|
|
componentDidMount() {
|
|
let y = 0;
|
|
const daggers = document.querySelectorAll('.attack-anim .dagger');
|
|
anime.set(daggers, {
|
|
y: 250,
|
|
});
|
|
y = -150;
|
|
if (!this.props.team) {
|
|
anime.set('.attack-anim', {
|
|
rotate: 180,
|
|
});
|
|
} else {
|
|
anime.set('.attack-anim', {
|
|
rotate: 0,
|
|
});
|
|
}
|
|
|
|
// if (this.props.stage === 'END_SKILL') {
|
|
// anime.set(daggers, {
|
|
// y: 400,
|
|
// });
|
|
// y = -150;
|
|
// if (!this.props.team) {
|
|
// anime.set('.attack-anim', {
|
|
// rotate: 0,
|
|
// });
|
|
// } else {
|
|
// anime.set('.attack-anim', {
|
|
// rotate: 180,
|
|
// });
|
|
// }
|
|
// }
|
|
|
|
anime({
|
|
targets: daggers,
|
|
delay: anime.stagger(250, {
|
|
start: 250,
|
|
grid: [1, 7],
|
|
from: 'center',
|
|
easing: 'linear',
|
|
}),
|
|
y,
|
|
duration,
|
|
});
|
|
}
|
|
}
|
|
|
|
module.exports = Attack;
|