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

blast anim, improved random point util

Browse Source
This commit is contained in:
Mashy 2019-06-20 16:25:03 +10:00
parent d232402c49
commit bd750be110
5 changed files with 168 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,8 +1,10 @@
const preact = require('preact');
const Attack = require('./anims/attack');
const Blast = require('./anims/blast');
const Strike = require('./anims/strike');
// const Test = require('./anims/test');
const Test = require('./anims/test');
const AttackCharge = require('./anims/attack.charge');
@ -43,6 +45,7 @@ function animations(props) {
const skill = removeTier(text);
switch (skill) {
case 'Attack': return <Attack id={construct.id} stage={stage} team={player}/>;
case 'Blast': return <Blast id={construct.id} stage={stage} team={player}/>;
case 'StrikeI': return <Strike id={construct.id} stage={stage} team={player}/>;
default: return text;
}
@ -57,8 +60,8 @@ function animations(props) {
</div>;
}
/*
return (
/* return (
<div class={combatTextClass}>
<Test id={construct.id} stage={stage} team={player}/>
</div>

2
client/src/components/anims/attack.charge.jsx
View File

@ -11,7 +11,7 @@ class AttackCharge extends Component {
super();
this.team = props.team;
this.colour = props.colour;
const points = randomPoints(7, 50, 300, 400);
const points = randomPoints(7, 50, { x: 0, y: 0, width: 300, height: 400 });
this.charges = points.map(coord => charge(coord[0], coord[1], 6, this.colour));
}

90
client/src/components/anims/blast.jsx Normal file
View File

@ -0,0 +1,90 @@
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 = '#00aabb';
const points = randomPoints(8, 60, { x: 0, y: 0, width: 300, height: 400 });
this.charges = points.map(coord => projectile(coord[0], coord[1], 20, 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="50%" r="70%" fx="50%" fy="50%">
<stop offset="0%" style="stop-color:rgb(255,255,255);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.05" numOctaves="3" result="turbulence"/>
<feDisplacementMap in2="turbulence" in="SourceGraphic" scale="1" xChannelSelector="A" yChannelSelector="A"/>
</filter>
{this.charges}
</svg>
);
}
componentDidMount() {
anime.set('.skill-anim', {
rotate: 90,
translateY: -200,
translateX: 0,
});
anime.set('#explosion feDisplacementMap', {
scale: 1,
});
anime({
targets: '.skill-anim',
translateY: 0,
translateX: 0,
loop: false,
duration: (duration * 1 / 2),
easing: 'easeInQuad',
});
anime({
targets: '#explosion feDisplacementMap',
scale: 100,
loop: false,
duration,
easing: 'easeInQuad',
});
}
}
module.exports = AttackCharge;

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

@ -2,19 +2,35 @@ const preact = require('preact');
const { Component } = require('preact');
const anime = require('animejs').default;
const charge = require('../svgs/charge');
const { TIMES } = require('../../constants');
const { randomPoints } = require('../../utils');
const duration = TIMES.START_SKILL;
class Attack extends Component {
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.props = props;
const points = randomPoints(7, 50, 300, 400);
const length = 6;
this.charges = points.map(coord => charge(coord[0], coord[1], length, '#a52a2a'));
this.team = props.team;
// this.colour = props.colour;
this.colour = '#00aabb';
const points = randomPoints(8, 60, { x: 0, y: 0, width: 300, height: 400 });
this.charges = points.map(coord => projectile(coord[0], coord[1], 20, this.colour));
}
render() {
@ -25,45 +41,56 @@ class Attack 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="50%" r="70%" fx="50%" fy="50%">
<stop offset="0%" style="stop-color:rgb(255,255,255);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.05" numOctaves="3" result="turbulence"/>
<feDisplacementMap in2="turbulence" in="SourceGraphic" scale="1" xChannelSelector="A" yChannelSelector="A"/>
</filter>
{this.charges}
</svg>
);
}
componentDidMount() {
if (this.props.stage === 'START_SKILL') {
if (!this.props.team) {
const charges = document.querySelectorAll('#projectile');
if (!this.team) {
anime.set('.skill-anim', {
rotate: 180,
rotate: 90,
translateY: -200,
translateX: 0,
});
} else {
anime.set('.skill-anim', {
rotate: 0,
rotate: 90,
translateY: -200,
translateX: 0,
});
}
}
if (this.props.stage === 'END_SKILL') {
if (!this.props.team) {
anime.set('.skill-anim', {
rotate: 0,
});
} else {
anime.set('.skill-anim', {
rotate: 180,
});
}
}
const stageone = document.querySelectorAll('#charge');
anime({
targets: stageone,
fill: '#a52a2a',
delay: anime.stagger(2),
loop: true,
targets: '.skill-anim',
translateY: 0,
translateX: 0,
loop: false,
duration: (duration * 1 / 2),
easing: 'easeInQuad',
});
anime({
targets: '#explosion feDisplacementMap',
scale: 100,
loop: false,
duration,
easing: 'easeInQuad',
});
}
}
module.exports = Attack;
module.exports = AttackCharge;

14
client/src/utils.jsx
View File

@ -345,13 +345,19 @@ const TARGET_COLOURS = {
BROWN: '#583108',
};
function randomPoints(numPoints, radius, width, height) {
function randomPoints(numPoints, radius, dimensions) {
const {
x,
y,
width,
height,
} = dimensions;
const points = [];
let infCheck = 0;
while (points.length < numPoints) {
const c = [
Math.floor(Math.random() * (width - 2 * radius) + radius),
Math.floor(Math.random() * (height - 2 * radius) + radius),
Math.floor(Math.random() * (x + width - 2 * radius) + x + radius),
Math.floor(Math.random() * (y + height - 2 * radius) + y + radius),
];
let overlapping = false;
for (let j = 0; j < points.length; j += 1) {
@ -368,7 +374,7 @@ function randomPoints(numPoints, radius, width, height) {
infCheck = 0;
} else {
infCheck += 1;
if (infCheck > 50) {
if (infCheck > 100) {
break;
}
}