diff --git a/client/src/components/anims/attack.jsx b/client/src/components/anims/attack.jsx
index 4c5cbcfa..c642f645 100644
--- a/client/src/components/anims/attack.jsx
+++ b/client/src/components/anims/attack.jsx
@@ -2,6 +2,7 @@ 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.START_SKILL;
@@ -10,54 +11,72 @@ class Attack extends Component {
constructor(props) {
super();
this.props = props;
- this.graphic = (
-
-
-
-
-
- );
}
render() {
return (
);
}
componentDidMount() {
- let value = '';
- if ((!this.props.team && this.props.stage === 'START_SKILL')
- || (this.props.team && this.props.stage === 'END_SKILL')) {
- anime.set('.attack-anim', {
- rotateX: 0,
+ let y = 0;
+ const daggers = document.querySelectorAll('.attack-anim .dagger');
+ if (this.props.stage === 'START_SKILL') {
+ anime.set(daggers, {
+ y: 250,
});
- value = '+=250px',
+ y = -150;
+ if (!this.props.team) {
+ anime.set('.attack-anim', {
+ rotate: 180,
+ });
+ } else {
+ anime.set('.attack-anim', {
+ rotate: 0,
+ });
+ }
}
- if ((!this.props.team && this.props.stage === 'END_SKILL')
- || (this.props.team && this.props.stage === 'START_SKILL')) {
- anime.set('.attack-anim', {
- rotateX: 0,
+
+ if (this.props.stage === 'END_SKILL') {
+ anime.set(daggers, {
+ y: 400,
});
- value = '-=250px',
+ y = -150;
+ if (!this.props.team) {
+ anime.set('.attack-anim', {
+ rotate: 0,
+ });
+ } else {
+ anime.set('.attack-anim', {
+ rotate: 180,
+ });
+ }
}
anime({
- targets: [`.attack-anim-${this.props.id} polygon`],
- translateY: {
- value,
- duration,
- },
- loop: false,
+ targets: daggers,
+ delay: anime.stagger(250, {
+ start: 250,
+ grid: [1, 7],
+ from: 'center',
+ easing: 'linear',
+ }),
+ y,
duration,
- easing: 'easeInQuad',
});
}
}
diff --git a/client/src/components/svgs/dagger.jsx b/client/src/components/svgs/dagger.jsx
new file mode 100644
index 00000000..94640132
--- /dev/null
+++ b/client/src/components/svgs/dagger.jsx
@@ -0,0 +1,43 @@
+const preact = require('preact');
+
+
+//style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;"
+module.exports = function dagger(x, y, width, height) {
+ return (
+
+ );
+};
diff --git a/client/src/constants.jsx b/client/src/constants.jsx
index ee619980..ad9bf9e0 100644
--- a/client/src/constants.jsx
+++ b/client/src/constants.jsx
@@ -1,7 +1,7 @@
module.exports = {
TIMES: {
- START_SKILL: 700,
- END_SKILL: 700,
+ START_SKILL: 1000,
+ END_SKILL: 1000,
POST_SKILL: 1000,
DELAY: 150,
},