added slay
This commit is contained in:
Mashy
parent
b1b37fc0b6
commit
0e1098fa55
@ -4,6 +4,7 @@ const Blast = require('./anims/blast');
|
||||
const Heal = require('./anims/heal');
|
||||
const Strike = require('./anims/strike');
|
||||
const Chaos = require('./anims/chaos');
|
||||
const Slay = require('./anims/slay');
|
||||
const Test = require('./anims/test');
|
||||
|
||||
const AttackCharge = require('./anims/attack.charge');
|
||||
@ -48,7 +49,7 @@ function animations(props) {
|
||||
case 'Blast': return <Blast id={construct.id} stage={stage} team={player}/>;
|
||||
case 'Strike': return <Strike id={construct.id} stage={stage} team={player} colour={colours.red}/>;
|
||||
case 'Chaos': return <Chaos id={construct.id} team={player} colour={colours.purple}/>;
|
||||
|
||||
case 'Slay': return <Slay id={construct.id} team={player} colour={colours.yellow}/>;
|
||||
case 'Heal': return <Heal id={construct.id} stage={stage} team={player} colour={colours.red}/>;
|
||||
default: return text;
|
||||
}
|
||||
@ -66,8 +67,8 @@ function animations(props) {
|
||||
<div class={combatTextClass}>
|
||||
<Test id={construct.id} stage={stage} team={player}/>
|
||||
</div>
|
||||
);
|
||||
*/ return (<div> </div>);
|
||||
);*/
|
||||
return (<div> </div>);
|
||||
}
|
||||
|
||||
module.exports = animations;
|
||||
|
||||
137
client/src/components/anims/slay.jsx
Normal file
137
client/src/components/anims/slay.jsx
Normal file
@ -0,0 +1,137 @@
|
||||
const preact = require('preact');
|
||||
const { Component } = require('preact');
|
||||
const anime = require('animejs').default;
|
||||
|
||||
const { TIMES } = require('../../constants');
|
||||
const { randomPoints } = require('../../utils');
|
||||
|
||||
const duration = TIMES.START_SKILL;
|
||||
|
||||
|
||||
function projectile(x, y, radius, colour) {
|
||||
return (
|
||||
<circle
|
||||
cx={x}
|
||||
cy={y}
|
||||
r={radius}
|
||||
fill="url(#grad1)"
|
||||
stroke-width="2"
|
||||
stroke={colour}
|
||||
id="projectile"
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
function sword(colour) {
|
||||
return (
|
||||
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1280 720">
|
||||
<g transform="rotate(90, 640, 360) translate(0,720) scale(0.1,-0.1)" fill={colour} stroke={colour} filter="url(#explosion)" id="sword">
|
||||
<path d="M4110 5071 c-294 -119 -436 -228 -457 -350 -4 -25 -7 -230 -6 -454 2 -380 1 -408 -15 -402 -9 4 -48 16 -87 26 -160 41 -215 44 -815 41 -719 -4 -1088 13 -1475 69 -270 38 -384 75 -468 148 -67 58 -111 75 -193 74 -104 -1 -204 -59 -264 -153 -130 -202 -159 -698 -59 -998 62 -188 174 -282 335 -282 77 0 114 14 174 67 87 77 198 114 456 152 386 56 724 73 1459 70 676 -2 728 1 937 68 15 4 16 -29 15 -419 -2 -500 -4 -492 93 -582 45 -41 99 -74 217 -133 87 -43 182 -86 212 -96 172 -55 197 16 78 226 -114 202 -160 347 -187 587 -16 144 -27 371 -18 376 4 3 299 0 655 -5 2030 -31 2627 -35 3953 -23 903 8 1433 17 1665 28 l340 16 450 79 c248 44 491 88 540 99 234 50 777 180 796 190 18 10 19 14 7 26 -7 8 -198 57 -423 109 -346 80 -483 106 -885 170 -417 66 -517 78 -815 100 -312 24 -424 27 -1370 36 -1039 11 -2548 7 -3645 -10 -327 -5 -748 -11 -934 -13 l-339 -3 2 75 c3 130 22 331 41 441 25 147 71 276 142 404 34 61 70 127 80 147 21 42 24 108 6 126 -23 23 -100 13 -198 -27z"/>
|
||||
</g>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
class AttackCharge extends Component {
|
||||
constructor(props) {
|
||||
super();
|
||||
this.team = props.team;
|
||||
// this.colour = props.colour;
|
||||
this.colour = '#c5a443';
|
||||
const points = new Array(30).fill(0);
|
||||
this.charges = points.map(() => projectile(150, 420, 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">
|
||||
<defs>
|
||||
<radialGradient id="grad1" cx="50%" cy="0%" r="85%" fx="50%" fy="50%">
|
||||
<stop offset="0%" style="stop-color:#dba9a9;stop-opacity:0.6" />
|
||||
<stop offset="100%" style={`stop-color:${this.colour};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>
|
||||
{sword(this.colour)}
|
||||
{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('.skill-anim', {
|
||||
translateY: -400,
|
||||
translateX: 0,
|
||||
});
|
||||
anime.set('#explosion feDisplacementMap', {
|
||||
scale: 100,
|
||||
});
|
||||
|
||||
anime.set('#sword', {
|
||||
fill: this.colour,
|
||||
stroke: this.colour,
|
||||
});
|
||||
|
||||
anime.set('#projectile', {
|
||||
cx: 150,
|
||||
cy: 420,
|
||||
});
|
||||
|
||||
anime({
|
||||
targets: '.skill-anim',
|
||||
translateY: 0,
|
||||
translateX: 0,
|
||||
loop: false,
|
||||
duration: (duration * 1 / 2),
|
||||
easing: 'easeInQuad',
|
||||
});
|
||||
anime({
|
||||
targets: '#explosion feDisplacementMap',
|
||||
scale: 10000,
|
||||
loop: false,
|
||||
delay: (duration * 1 / 2),
|
||||
duration: (duration * 1 / 2),
|
||||
easing: 'easeInQuad',
|
||||
});
|
||||
|
||||
anime({
|
||||
targets: '#sword',
|
||||
fill: '#1FF01F',
|
||||
stroke: '#1FF01F',
|
||||
delay: (duration * 3 / 4),
|
||||
});
|
||||
|
||||
const projectiles = document.querySelectorAll('#projectile');
|
||||
projectiles.forEach(proj => {
|
||||
anime({
|
||||
targets: proj,
|
||||
cx: Math.random() * 250 + 25,
|
||||
cy: Math.random() * 200 - 100,
|
||||
delay: (duration * 2 / 3),
|
||||
duration: (duration * 1 / 3),
|
||||
easing: 'easeInQuad',
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
module.exports = AttackCharge;
|
||||
@ -18,19 +18,28 @@ function projectile(x, y, radius, colour) {
|
||||
stroke-width="2"
|
||||
stroke={colour}
|
||||
id="projectile"
|
||||
filter="url(#explosion)"
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
function sword(colour) {
|
||||
return (
|
||||
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1280 720">
|
||||
<g transform="rotate(90, 640, 360) translate(0,720) scale(0.1,-0.1)" fill={colour} stroke={colour} filter="url(#explosion)" id="sword">
|
||||
<path d="M4110 5071 c-294 -119 -436 -228 -457 -350 -4 -25 -7 -230 -6 -454 2 -380 1 -408 -15 -402 -9 4 -48 16 -87 26 -160 41 -215 44 -815 41 -719 -4 -1088 13 -1475 69 -270 38 -384 75 -468 148 -67 58 -111 75 -193 74 -104 -1 -204 -59 -264 -153 -130 -202 -159 -698 -59 -998 62 -188 174 -282 335 -282 77 0 114 14 174 67 87 77 198 114 456 152 386 56 724 73 1459 70 676 -2 728 1 937 68 15 4 16 -29 15 -419 -2 -500 -4 -492 93 -582 45 -41 99 -74 217 -133 87 -43 182 -86 212 -96 172 -55 197 16 78 226 -114 202 -160 347 -187 587 -16 144 -27 371 -18 376 4 3 299 0 655 -5 2030 -31 2627 -35 3953 -23 903 8 1433 17 1665 28 l340 16 450 79 c248 44 491 88 540 99 234 50 777 180 796 190 18 10 19 14 7 26 -7 8 -198 57 -423 109 -346 80 -483 106 -885 170 -417 66 -517 78 -815 100 -312 24 -424 27 -1370 36 -1039 11 -2548 7 -3645 -10 -327 -5 -748 -11 -934 -13 l-339 -3 2 75 c3 130 22 331 41 441 25 147 71 276 142 404 34 61 70 127 80 147 21 42 24 108 6 126 -23 23 -100 13 -198 -27z"/>
|
||||
</g>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
class AttackCharge extends Component {
|
||||
constructor(props) {
|
||||
super();
|
||||
this.team = props.team;
|
||||
// this.colour = props.colour;
|
||||
this.colour = '#A25AC1';
|
||||
const points = randomPoints(7, 30, { x: 0, y: 0, width: 300, height: 100 });
|
||||
this.charges = points.map(coord => projectile(coord[0], coord[1], 14, this.colour));
|
||||
this.colour = '#c5a443';
|
||||
const points = new Array(30).fill(0);
|
||||
this.charges = points.map(() => projectile(150, 420, 7, '#1FF01F'));
|
||||
}
|
||||
|
||||
render() {
|
||||
@ -41,7 +50,6 @@ class AttackCharge extends Component {
|
||||
id="Layer_1"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 300 400">
|
||||
// {this.charges}
|
||||
<defs>
|
||||
<radialGradient id="grad1" cx="50%" cy="0%" r="85%" fx="50%" fy="50%">
|
||||
<stop offset="0%" style="stop-color:#dba9a9;stop-opacity:0.6" />
|
||||
@ -50,10 +58,11 @@ class AttackCharge extends Component {
|
||||
</defs>
|
||||
<filter id="explosion">
|
||||
<feGaussianBlur stdDeviation="4"/>
|
||||
<feTurbulence type="turbulence" baseFrequency="0.01" numOctaves="3" result="turbulence"/>
|
||||
<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>
|
||||
);
|
||||
@ -70,11 +79,11 @@ class AttackCharge extends Component {
|
||||
});
|
||||
}
|
||||
anime.set('.skill-anim', {
|
||||
translateY: -200,
|
||||
translateY: -400,
|
||||
translateX: 0,
|
||||
});
|
||||
anime.set('#explosion feDisplacementMap', {
|
||||
scale: 1,
|
||||
scale: 100,
|
||||
});
|
||||
|
||||
anime({
|
||||
@ -82,26 +91,36 @@ class AttackCharge extends Component {
|
||||
translateY: 0,
|
||||
translateX: 0,
|
||||
loop: false,
|
||||
duration,
|
||||
duration: (duration * 1 / 2),
|
||||
easing: 'easeInQuad',
|
||||
});
|
||||
anime({
|
||||
targets: '#explosion feDisplacementMap',
|
||||
scale: 75,
|
||||
scale: 10000,
|
||||
loop: false,
|
||||
delay: (duration * 2 / 3),
|
||||
duration: (duration * 1 / 3),
|
||||
delay: (duration * 1 / 2),
|
||||
duration: (duration * 1 / 2),
|
||||
easing: 'easeInQuad',
|
||||
});
|
||||
|
||||
anime({
|
||||
targets: '#sword',
|
||||
fill: '#1FF01F',
|
||||
stroke: '#1FF01F',
|
||||
delay: (duration * 3 / 4),
|
||||
});
|
||||
|
||||
const projectiles = document.querySelectorAll('#projectile');
|
||||
projectiles.forEach(proj => anime({
|
||||
projectiles.forEach(proj => {
|
||||
anime({
|
||||
targets: proj,
|
||||
cx: Math.random() * 250 + 25,
|
||||
cy: Math.random() * 300 + 50,
|
||||
duration,
|
||||
cy: Math.random() * 200 - 100,
|
||||
delay: (duration * 1 / 3),
|
||||
duration: (duration * 2 / 3),
|
||||
easing: 'easeInQuad',
|
||||
}));
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user