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

Merge branch 'develop' of ssh://mnml.gg:40022/~/mnml into develop

Browse Source
This commit is contained in:
ntr 2019-07-11 22:14:32 +10:00
commit 844fa6b54f
6 changed files with 52 additions and 174 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -17,7 +17,6 @@ function projectile(x, y, radius, colour) {
fill="url(#grad1)"
stroke-width="2"
stroke={colour}
id="projectile"
filter="url(#explosion)"
/>
);
@ -35,9 +34,9 @@ class AttackCharge extends Component {
render() {
return (
<svg
class={'skill-anim'}
class={'skill-animation'}
version="1.1"
id="Layer_1"
id="blast"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 300 400">
// {this.charges}
@ -59,14 +58,13 @@ class AttackCharge extends Component {
}
componentDidMount() {
anime.set('.skill-anim', {
translateY: -300 * this.props.direction.y,
anime.set('#blast', {
translateX: -200 * this.props.direction.x,
opacity: 0,
translateY: -300 * this.props.direction.y,
});
this.animations.push(anime({
targets: '.skill-anim',
targets: '#blast',
opacity: [
{ value: 1, delay: TIMES.TARGET_DELAY_MS, duration: TIMES.TARGET_DURATION_MS * 0.3 },
{ value: 0, delay: TIMES.TARGET_DURATION_MS * 0.7, duration: TIMES.POST_SKILL_DURATION_MS },
@ -77,23 +75,24 @@ class AttackCharge extends Component {
scale: 1,
});
anime({
targets: '.skill-anim',
this.animations.push(anime({
targets: '#blast',
translateY: 0,
translateX: 0,
loop: false,
delay: TIMES.TARGET_DELAY_MS,
duration: (duration * 1 / 2),
easing: 'easeInQuad',
});
anime({
}));
this.animations.push(anime({
targets: '#explosion feDisplacementMap',
scale: 100,
scale: 200,
loop: false,
delay: TIMES.TARGET_DELAY_MS,
duration,
delay: TIMES.TARGET_DELAY_MS + duration * 1 / 2,
duration: duration * 1 / 2,
easing: 'easeInQuad',
});
}));
}
componentWillUnmount() {

3
client/src/components/anims/purify.jsx
View File

@ -12,7 +12,6 @@ function projectile(x, y, radius, colour) {
r={radius}
fill={colour}
stroke="none"
id="charges"
opacity="0"
/>
);
@ -88,7 +87,7 @@ class Purify extends Component {
}));
this.animations.push(anime({
targets: ['#charges'],
targets: ['#purify circle'],
opacity: [
{ value: 1, duration: TIMES.TARGET_DELAY_MS + TIMES.TARGET_DURATION_MS * 0.2 },
],

9
client/src/components/anims/siphon.tick.jsx
View File

@ -16,7 +16,6 @@ function projectile(x, y, radius, colour) {
fill="url(#grad1)"
stroke-width="0.1"
stroke={colour}
id="projectile"
/>
);
}
@ -64,15 +63,15 @@ class SiphonTick extends Component {
componentDidMount() {
if (!this.props.team) {
anime.set('.skill-anim', {
rotate: 90
rotate: 90,
});
} else {
anime.set('.skill-anim', {
rotate: 270
rotate: 270,
});
}
anime.set('#projectile', {
anime.set('.skill-anim circle', {
cx: 150,
cy: 150,
});
@ -93,7 +92,7 @@ class SiphonTick extends Component {
easing: 'easeInCubic',
});
const projectiles = document.querySelectorAll('#projectile');
const projectiles = document.querySelectorAll('.skill-anim circle');
projectiles.forEach(proj => {
anime({
targets: proj,

39
client/src/components/anims/slay.jsx
View File

@ -43,9 +43,9 @@ class AttackCharge extends Component {
render() {
return (
<svg
class={'skill-anim'}
class={'skill-animation'}
version="1.1"
id="Layer_1"
id="slay"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 300 400">
<defs>
@ -67,30 +67,25 @@ class AttackCharge extends Component {
}
componentDidMount() {
let rotate = 0; // Self target value
if (this.props.direction.y) {
anime.set('#strike', {
rotate: -Math.atan(this.props.direction.y / this.props.direction.x) * 180 / Math.PI,
});
console.log(Math.atan(this.props.direction.y / this.props.direction.x) * 180 / Math.PI);
} else {
anime.set('#strike', {
rotate: 90,
});
if (!this.props.direction.x) rotate = this.props.direction.y > 0 ? 0 : 180;
else {
rotate = this.props.direction.y > 0
? -Math.atan(this.props.direction.y / this.props.direction.x) * 180 / Math.PI
: -Math.atan(this.props.direction.y / this.props.direction.x) * 180 / Math.PI + 180;
}
} else if (this.props.direction.x) {
rotate = this.props.direction.x > 0 ? 270 : 90;
}
/* if (!this.props.team) {
anime.set('.skill-anim', {
rotate: Math.random() * 180 + 90,
anime.set('#slay', {
rotate,
});
} else {
anime.set('.skill-anim', {
rotate: Math.random() * 180 + 270,
});
}
*/ anime.set('.skill-anim', {
anime.set('#slay', {
translateY: -400,
translateX: 0,
opacity: 0,
});
anime.set('#explosion feDisplacementMap', {
scale: 100,
@ -102,7 +97,7 @@ class AttackCharge extends Component {
});
this.animations.push(anime({
targets: '.skill-anim',
targets: '#slay',
opacity: [
{ value: 1, delay: TIMES.TARGET_DELAY_MS, duration: TIMES.TARGET_DURATION_MS * 0.3 },
{
@ -133,7 +128,7 @@ class AttackCharge extends Component {
delay: (TIMES.TARGET_DELAY_MS + duration + TIMES.POST_SKILL_DURATION_MS * 0.7),
}));
const projectiles = document.querySelectorAll('.skill-anim circle');
const projectiles = document.querySelectorAll('#slay circle');
projectiles.forEach(proj => {
this.animations.push(anime({
targets: proj,

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

@ -61,28 +61,26 @@ class Strike extends Component {
}
componentDidMount() {
console.log(this.props.direction);
/* if (this.props.direction.y) {
anime.set('#strike', {
rotate: -Math.atan(this.props.direction.y / this.props.direction.x) * 180 / Math.PI,
});
console.log(Math.atan(this.props.direction.y / this.props.direction.x) * 180 / Math.PI);
} else {
anime.set('#strike', {
rotate: 90,
});
}
*/
let rotate = 90;
let rotate = 0; // Self target value
if (this.props.direction.y) {
if (!this.props.direction.x) rotate = 0;
if (!this.props.direction.x) rotate = this.props.direction.y > 0 ? 0 : 180;
else {
rotate = this.props.direction.y > 0
? -Math.atan(this.props.direction.y / this.props.direction.x) * 180 / Math.PI
: -Math.atan(this.props.direction.y / this.props.direction.x) * 180 / Math.PI + 180;
}
} else if (this.props.direction.x) {
rotate = this.props.direction.x > 0 ? 270 : 90;
}
anime.set('#strike', {
translateY: -300 * this.props.direction.y,
translateX: -150 * this.props.direction.x,
rotate,
});
anime.set('#strike', {
translateY: -400,
translateX: 0,
});
this.animations.push(anime({
targets: '#strike',
opacity: [

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

@ -1,112 +0,0 @@
const preact = require('preact');
const { Component } = require('preact');
const anime = require('animejs').default;
const { TIMES } = require('../../constants');
const { randomPoints } = require('../../utils');
const duration = TIMES.TARGET_DURATION_MS;
function projectile(x, y, radius, colour) {
return (
<circle
cx={x}
cy={y}
r={radius}
fill="url(#grad1)"
stroke-width="0.1"
stroke={colour}
id="projectile"
/>
);
}
class AttackCharge extends Component {
constructor(props) {
super();
this.team = props.team;
// this.colour = props.colour;
this.colour = '#3498db';
const points = new Array(15).fill(0);
this.charges = points.map(() => projectile(150, 150, 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">
<filter id="blur">
<feGaussianBlur in="SourceGraphic" stdDeviation="2" />
</filter>
<circle id="siphon" r="20" cx="150" cy="150" stroke="#3498db" stroke-width="2.5%" filter="url(#blur)"/>
<defs>
<radialGradient id="grad1" cx="50%" cy="0%" r="85%" fx="50%" fy="50%">
<stop offset="0%" style="stop-color:#3498db;stop-opacity:0.4" />
<stop offset="100%" style={'stop-color:#1FF01F;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>
{this.charges}
</svg>
);
}
componentDidMount() {
if (!this.props.team) {
anime.set('.skill-anim', {
rotate: Math.random() * 45 + 90,
});
} else {
anime.set('.skill-anim', {
rotate: Math.random() * 45 + 270,
});
}
anime.set('#projectile', {
cx: 150,
cy: 150,
});
anime.set('#siphon', {
r: '80',
stroke: '#3498db',
});
anime({
targets: '#siphon',
keyframes: [
{ r: '50', stroke: '#3498db' },
{ r: '20', stroke: '#3498db' },
{ r: '0', stroke: '#3498db' },
],
duration: duration * 2 / 3,
easing: 'easeInCubic',
});
const projectiles = document.querySelectorAll('#projectile');
projectiles.forEach(proj => {
anime({
targets: proj,
cx: Math.random() * 250 + 25,
cy: Math.random() * 200 - 100,
delay: (Math.random() * duration * 1 / 2),
duration,
easing: 'easeInQuad',
});
});
}
}
module.exports = AttackCharge;