ntr/mnml
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

added chaos and heal

Browse Source
This commit is contained in:
Mashy 2019-06-24 12:35:14 +10:00
parent d9184dea0a
commit b1b37fc0b6
6 changed files with 264 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
client/src/components/animations.jsx
View File

@ -1,9 +1,9 @@
const preact = require('preact');
const Attack = require('./anims/attack');
const Blast = require('./anims/blast');
const Heal = require('./anims/heal');
const Strike = require('./anims/strike');
const Chaos = require('./anims/chaos');
const Test = require('./anims/test');
const AttackCharge = require('./anims/attack.charge');
@ -47,6 +47,9 @@ function animations(props) {
case 'Attack': return <Strike id={construct.id} stage={stage} team={player} colour={colours.white}/>;
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 'Heal': return <Heal id={construct.id} stage={stage} team={player} colour={colours.red}/>;
default: return text;
}
}
@ -59,13 +62,12 @@ function animations(props) {
{combatAnim}
</div>;
}
/*return (
/* return (
<div class={combatTextClass}>
<Test id={construct.id} stage={stage} team={player}/>
</div>
);*/
return (<div>&nbsp;</div>);
);
*/ return (<div>&nbsp;</div>);
}
module.exports = animations;

15
client/src/components/anims/blast.jsx
View File

@ -60,11 +60,19 @@ class AttackCharge extends Component {
}
componentDidMount() {
if (!this.props.team) {
anime.set('.skill-anim', {
rotate: 90,
translateY: -200,
translateX: 0,
rotate: Math.random() * 180 + 90,
});
} else {
anime.set('.skill-anim', {
rotate: Math.random() * 180 + 270,
});
}
anime.set('.skill-anim', {
translateY: -200,
});
anime.set('#explosion feDisplacementMap', {
scale: 1,
});
@ -72,7 +80,6 @@ class AttackCharge extends Component {
anime({
targets: '.skill-anim',
translateY: 0,
translateX: 0,
loop: false,
duration: (duration * 1 / 2),
easing: 'easeInQuad',

108
client/src/components/anims/chaos.jsx Normal file
View File

@ -0,0 +1,108 @@
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"
filter="url(#explosion)"
/>
);
}
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));
}
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="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.01" 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('.skill-anim', {
translateY: -200,
translateX: 0,
});
anime.set('#explosion feDisplacementMap', {
scale: 1,
});
anime({
targets: '.skill-anim',
translateY: 0,
translateX: 0,
loop: false,
duration: (duration * 2 / 3),
easing: 'easeInQuad',
});
anime({
targets: '#explosion feDisplacementMap',
scale: 75,
loop: false,
delay: (duration * 2 / 3),
duration: (duration * 1 / 3),
easing: 'easeInQuad',
});
const projectiles = document.querySelectorAll('#projectile');
projectiles.forEach(proj => anime({
targets: proj,
cx: Math.random() * 250 + 25,
cy: Math.random() * 300 + 50,
duration: (duration * 2 / 3),
easing: 'easeInQuad',
}));
}
}
module.exports = AttackCharge;

106
client/src/components/anims/heal.jsx Normal file
View File

@ -0,0 +1,106 @@
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"
filter="url(#explosion)"
/>
);
}
class Heal extends Component {
constructor(props) {
super();
this.team = props.team;
// this.colour = props.colour;
this.colour = '#1FF01F';
const points = randomPoints(15, 30, { x: 0, y: 0, width: 300, height: 400 });
this.charges = points.map(coord => projectile(coord[0], coord[1], 14, this.colour));
}
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="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.01" 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('.skill-anim', {
translateY: -200,
translateX: 0,
});
anime.set('#explosion feDisplacementMap', {
scale: 100,
});
anime({
targets: '.skill-anim',
translateY: 0,
translateX: 0,
loop: false,
duration: (duration * 1 / 2),
easing: 'easeInQuad',
});
anime({
targets: '#explosion feDisplacementMap',
scale: 1,
loop: false,
duration: (duration * 1 / 2),
easing: 'easeInQuad',
});
anime({
targets: '#projectile',
cx: 150,
cy: 200,
delay: (duration * 1 / 2),
duration: (duration * 1 / 2),
easing: 'easeInQuad',
});
}
}
module.exports = Heal;

2
client/src/components/anims/strike.jsx
View File

@ -83,8 +83,6 @@ class Strike extends Component {
scale: 1,
});
anime({
targets: '.skill-anim',
translateY: 0,

53
client/src/components/anims/test.jsx
View File

@ -3,21 +3,21 @@ const { Component } = require('preact');
const anime = require('animejs').default;
const { TIMES } = require('../../constants');
const { randomPoints } = require('../../utils');
const duration = TIMES.START_SKILL;
function laser(dimensions, colour) {
const { x, y, length } = dimensions;
function projectile(x, y, radius, colour) {
return (
<rect
width="18"
height={length}
x={x}
y={y}
<circle
cx={x}
cy={y}
r={radius}
fill="url(#grad1)"
stroke-width="2"
stroke={colour}
id="projectile"
filter="url(#explosion)"
/>
);
@ -28,15 +28,9 @@ class AttackCharge extends Component {
super();
this.team = props.team;
// this.colour = props.colour;
this.colour = '#a52a2a';
const coord = [0, 100, 200];
const points = coord.map(pos => ({
x: pos + Math.random() * 80,
y: 50 + Math.random() * 100,
length: 150 + Math.random() * 100,
}));
this.charges = points.map(pos => laser(pos, this.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));
}
render() {
@ -66,8 +60,16 @@ class AttackCharge extends Component {
}
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', {
rotate: 90,
translateY: -200,
translateX: 0,
});
@ -80,17 +82,26 @@ class AttackCharge extends Component {
translateY: 0,
translateX: 0,
loop: false,
duration: (duration * 1 / 2),
duration,
easing: 'easeInQuad',
});
anime({
targets: '#explosion feDisplacementMap',
scale: 200,
scale: 75,
loop: false,
delay: (duration * 1 / 4),
duration,
delay: (duration * 2 / 3),
duration: (duration * 1 / 3),
easing: 'easeInQuad',
});
const projectiles = document.querySelectorAll('#projectile');
projectiles.forEach(proj => anime({
targets: proj,
cx: Math.random() * 250 + 25,
cy: Math.random() * 300 + 50,
duration,
easing: 'easeInQuad',
}));
}
}