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

Merge branch 'anims-change' of ssh://mnml.gg:40022/~/mnml into anims-change

Browse Source
This commit is contained in:
ntr 2019-07-02 17:36:15 +10:00
commit 7ea5830255
20 changed files with 216 additions and 152 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -5,7 +5,7 @@ const AttackCharge = require('./anims/attack.charge');
const Amplify = require('./anims/amplify'); const Amplify = require('./anims/amplify');
const Blast = require('./anims/blast'); const Blast = require('./anims/blast');
const banish = require('./anims/banish'); const Banish = require('./anims/banish');
const Bash = require('./anims/bash'); const Bash = require('./anims/bash');
const Block = require('./anims/block'); const Block = require('./anims/block');
const Buff = require('./anims/buff'); const Buff = require('./anims/buff');
@ -21,14 +21,14 @@ const Strike = require('./anims/strike');
const Parry = require('./anims/parry'); const Parry = require('./anims/parry');
const Recharge = require('./anims/recharge'); const Recharge = require('./anims/recharge');
const Chaos = require('./anims/chaos'); const Chaos = require('./anims/chaos');
const invert = require('./anims/invert'); const Invert = require('./anims/invert');
const Slay = require('./anims/slay'); const Slay = require('./anims/slay');
const Siphon = require('./anims/siphon'); const Siphon = require('./anims/siphon');
const SiphonTick = require('./anims/siphon.tick'); const SiphonTick = require('./anims/siphon.tick');
// const Test = require('./anims/test'); // const Test = require('./anims/test');
const { removeTier, getCombatText } = require('../utils'); const { removeTier } = require('../utils');
const colours = { const colours = {
red: '#a52a2a', red: '#a52a2a',
@ -99,7 +99,7 @@ function animations(props) {
switch (skill) { switch (skill) {
case 'Attack': return <Strike id={construct.id} team={player} colour={colours.white}/>; case 'Attack': return <Strike id={construct.id} team={player} colour={colours.white}/>;
case 'Amplify': return <Amplify/>; case 'Amplify': return <Amplify/>;
case 'Banish': return banish(construct.id); case 'Banish': return <Banish id={construct.id} />;
case 'Bash': return <Bash />; case 'Bash': return <Bash />;
case 'Block': return <Block />; case 'Block': return <Block />;
case 'Buff': return <Buff />; case 'Buff': return <Buff />;
@ -116,7 +116,7 @@ function animations(props) {
case 'Haste': return <Haste />; case 'Haste': return <Haste />;
case 'Parry': return <Parry team={player} />; case 'Parry': return <Parry team={player} />;
case 'Recharge': return <Recharge team={player} />; case 'Recharge': return <Recharge team={player} />;
case 'Invert': return invert(construct.id); case 'Invert': return <Invert id={construct.id} />
case 'Siphon': return <Siphon id={construct.id} team={player} />; case 'Siphon': return <Siphon id={construct.id} team={player} />;
case 'SiphonTick': return <SiphonTick id={construct.id} team={player} />; case 'SiphonTick': return <SiphonTick id={construct.id} team={player} />;
case 'Stun': return <Stun />; case 'Stun': return <Stun />;

8
client/src/components/anims/amplify.jsx
View File

@ -35,8 +35,8 @@ class Amplify extends Component {
this.animations.push(anime({ this.animations.push(anime({
targets: ['#amplify'], targets: ['#amplify'],
opacity: [ opacity: [
{ value: 1, delay: TIMES.TARGET_FADE_IN_DELAY, duration: TIMES.TARGET_FADE_IN_DURATION }, { value: 1, delay: TIMES.TARGET_DELAY_MS, duration: TIMES.TARGET_DURATION_MS * 0.2 },
{ value: 0, delay: TIMES.TARGET_FADE_OUT_DELAY, duration: TIMES.FADE_OUT_DURATION }, { value: 0, delay: TIMES.TARGET_DURATION_MS * 0.6, duration: TIMES.TARGET_DURATION_MS * 0.2 },
], ],
easing: 'easeInOutSine', easing: 'easeInOutSine',
})); }));
@ -47,8 +47,8 @@ class Amplify extends Component {
stroke: ['#3498db', '#a52a2a'], stroke: ['#3498db', '#a52a2a'],
easing: 'easeInOutSine', easing: 'easeInOutSine',
delay: TIMES.TARGET_DELAY_MS,
duration: TIMES.TARGET_DURATION_MS, duration: TIMES.TARGET_DURATION_MS,
delay: TIMES.TARGET_FADE_IN_DELAY,
})); }));
this.animations.push(anime({ this.animations.push(anime({
@ -57,8 +57,8 @@ class Amplify extends Component {
scale: 4, scale: 4,
easing: 'easeInOutExpo', easing: 'easeInOutExpo',
delay: TIMES.TARGET_DELAY_MS,
duration: TIMES.TARGET_DURATION_MS, duration: TIMES.TARGET_DURATION_MS,
delay: TIMES.TARGET_FADE_IN_DELAY,
})); }));
} }

48
client/src/components/anims/banish.jsx
View File

@ -1,16 +1,42 @@
const preact = require('preact');
const { Component } = require('preact');
const anime = require('animejs').default; const anime = require('animejs').default;
const { TIMES } = require('../../constants'); const { TIMES } = require('../../constants');
function banish(id) { class Banish extends Component {
anime({ constructor(props) {
targets: [document.getElementById(id)], super();
scaleY: 0, this.id = props.id;
fill: '#fff', this.animations = [];
easing: 'easeOutElastic',
delay: TIMES.TARGET_FADE_IN_DELAY,
duration: TIMES.TARGET_DURATION_MS,
});
} }
module.exports = banish; render() {
// Need this so unmount triggers
return <svg id='invert'></svg>;
}
componentDidMount() {
this.animations.push(anime({
targets: [document.getElementById(this.id)],
scaleY: 0,
fill: '#fff',
easing: 'easeOutElastic',
delay: TIMES.TARGET_DELAY_MS,
duration: TIMES.TARGET_DURATION_MS * 0.5,
direction: 'alternate',
}));
}
// this is necessary because
// skipping / timing / unmounting race conditions
// can cause the animations to cut short, this will ensure the values are reset
// because preact will recycle all these components
componentWillUnmount() {
for (let i = this.animations.length - 1; i >= 0; i--) {
this.animations[i].reset();
}
}
}
module.exports = Banish;

12
client/src/components/anims/bash.jsx
View File

@ -39,8 +39,8 @@ class Bash extends Component {
this.animations.push(anime({ this.animations.push(anime({
targets: ['#bash'], targets: ['#bash'],
opacity: [ opacity: [
{ value: 1, delay: TIMES.TARGET_FADE_IN_DELAY, duration: TIMES.TARGET_FADE_IN_DURATION }, { value: 1, delay: TIMES.TARGET_DELAY_MS, duration: TIMES.TARGET_DURATION_MS * 0.2 },
{ value: 0, delay: TIMES.TARGET_MAIN_DURATION - 500, duration: TIMES.FADE_OUT_DURATION }, { value: 0, delay: TIMES.TARGET_DURATION_MS * 0.6, duration: TIMES.TARGET_DURATION_MS * 0.2 },
], ],
easing: 'easeInOutSine', easing: 'easeInOutSine',
})); }));
@ -49,7 +49,7 @@ class Bash extends Component {
targets: ['#bash'], targets: ['#bash'],
scale: { scale: {
value: 1, value: 1,
delay: TIMES.TARGET_FADE_IN_DELAY, delay: TIMES.TARGET_DELAY_MS,
duration: TIMES.TARGET_DURATION_MS * 0.2, duration: TIMES.TARGET_DURATION_MS * 0.2,
easing: 'easeInExpo', easing: 'easeInExpo',
}, },
@ -66,7 +66,7 @@ class Bash extends Component {
{ translateX: 0, translateY: 2 }, { translateX: 0, translateY: 2 },
], ],
delay: TIMES.TARGET_FADE_IN_DELAY + TIMES.TARGET_DURATION_MS * 0.1, delay: TIMES.TARGET_DELAY_MS + TIMES.TARGET_DURATION_MS * 0.1,
duration: TIMES.TARGET_DURATION_MS * 0.2, duration: TIMES.TARGET_DURATION_MS * 0.2,
easing: 'easeOutSine', easing: 'easeOutSine',
})); }));
@ -78,8 +78,8 @@ class Bash extends Component {
numOctaves: 5, numOctaves: 5,
easing: 'easeOutSine', easing: 'easeOutSine',
delay: TIMES.TARGET_FADE_IN_DELAY, delay: TIMES.TARGET_DELAY_MS,
duration: TIMES.RESOLUTION_TOTAL_MS, duration: TIMES.TARGET_DURATION_MS,
})); }));
} }

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

@ -27,10 +27,9 @@ class AttackCharge extends Component {
constructor(props) { constructor(props) {
super(); super();
this.team = props.team; this.team = props.team;
// this.colour = props.colour; this.animations = [];
this.colour = '#00aabb';
const points = randomPoints(8, 60, { x: 0, y: 0, width: 300, height: 400 }); 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)); this.charges = points.map(coord => projectile(coord[0], coord[1], 20, '#00aabb'));
} }
render() { render() {
@ -45,7 +44,7 @@ class AttackCharge extends Component {
<defs> <defs>
<radialGradient id="grad1" cx="50%" cy="50%" r="70%" fx="50%" fy="50%"> <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="0%" style="stop-color:rgb(255,255,255);stop-opacity:0.6" />
<stop offset="100%" style={`stop-color:${this.colour};stop-opacity:1`} /> <stop offset="100%" style={'stop-color:#00aabb;stop-opacity:1'} />
</radialGradient> </radialGradient>
</defs> </defs>
<filter id="explosion"> <filter id="explosion">
@ -71,8 +70,17 @@ class AttackCharge extends Component {
} }
anime.set('.skill-anim', { anime.set('.skill-anim', {
translateY: -200, translateY: -200,
opacity: 0,
}); });
this.animations.push(anime({
targets: '.skill-anim',
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 },
],
}));
anime.set('#explosion feDisplacementMap', { anime.set('#explosion feDisplacementMap', {
scale: 1, scale: 1,
}); });
@ -81,6 +89,7 @@ class AttackCharge extends Component {
targets: '.skill-anim', targets: '.skill-anim',
translateY: 0, translateY: 0,
loop: false, loop: false,
delay: TIMES.TARGET_DELAY_MS,
duration: (duration * 1 / 2), duration: (duration * 1 / 2),
easing: 'easeInQuad', easing: 'easeInQuad',
}); });
@ -88,10 +97,17 @@ class AttackCharge extends Component {
targets: '#explosion feDisplacementMap', targets: '#explosion feDisplacementMap',
scale: 100, scale: 100,
loop: false, loop: false,
delay: TIMES.TARGET_DELAY_MS,
duration, duration,
easing: 'easeInQuad', easing: 'easeInQuad',
}); });
} }
componentWillUnmount() {
for (let i = this.animations.length - 1; i >= 0; i--) {
this.animations[i].reset();
}
}
} }
module.exports = AttackCharge; module.exports = AttackCharge;

4
client/src/components/anims/block.jsx
View File

@ -36,8 +36,8 @@ class Block extends Component {
this.animations.push(anime({ this.animations.push(anime({
targets: ['#block'], targets: ['#block'],
opacity: [ opacity: [
{ value: 1, delay: TIMES.TARGET_FADE_IN_DELAY, duration: TIMES.TARGET_FADE_IN_DURATION }, { value: 1, delay: TIMES.TARGET_DELAY_MS, duration: TIMES.TARGET_DURATION_MS * 0.2 },
{ value: 0, delay: TIMES.TARGET_FADE_OUT_DELAY, duration: TIMES.FADE_OUT_DURATION }, { value: 0, delay: TIMES.TARGET_DURATION_MS * 0.6, duration: TIMES.TARGET_DURATION_MS * 0.2 },
], ],
easing: 'easeInOutSine', easing: 'easeInOutSine',
})); }));

10
client/src/components/anims/buff.jsx
View File

@ -31,8 +31,8 @@ class Buff extends Component {
this.animations.push(anime({ this.animations.push(anime({
targets: ['#buff'], targets: ['#buff'],
opacity: [ opacity: [
{ value: 1, delay: TIMES.TARGET_FADE_IN_DELAY, duration: TIMES.TARGET_FADE_IN_DURATION }, { value: 1, delay: TIMES.TARGET_DELAY_MS, duration: TIMES.TARGET_DURATION_MS * 0.2 },
{ value: 0, delay: TIMES.TARGET_FADE_OUT_DELAY, duration: TIMES.FADE_OUT_DURATION }, { value: 0, delay: TIMES.TARGET_DURATION_MS * 0.6, duration: TIMES.TARGET_DURATION_MS * 0.2 },
], ],
easing: 'easeInOutSine', easing: 'easeInOutSine',
})); }));
@ -42,7 +42,7 @@ class Buff extends Component {
points: '0,190 100,10 190,190', points: '0,190 100,10 190,190',
easing: 'easeOutExpo', easing: 'easeOutExpo',
delay: TIMES.TARGET_FADE_IN_DELAY, delay: TIMES.TARGET_DELAY_MS,
duration: TIMES.TARGET_DURATION_MS, duration: TIMES.TARGET_DURATION_MS,
})); }));
@ -51,7 +51,7 @@ class Buff extends Component {
points: '40,170 100,50 160,170', points: '40,170 100,50 160,170',
easing: 'easeOutExpo', easing: 'easeOutExpo',
delay: TIMES.TARGET_FADE_IN_DELAY, delay: TIMES.TARGET_DELAY_MS,
duration: TIMES.TARGET_DURATION_MS, duration: TIMES.TARGET_DURATION_MS,
})); }));
@ -60,7 +60,7 @@ class Buff extends Component {
points: '70,150 100,90 130,150', points: '70,150 100,90 130,150',
easing: 'easeOutExpo', easing: 'easeOutExpo',
delay: TIMES.TARGET_FADE_IN_DELAY, delay: TIMES.TARGET_DELAY_MS,
duration: TIMES.TARGET_DURATION_MS, duration: TIMES.TARGET_DURATION_MS,
})); }));
} }

37
client/src/components/anims/chaos.jsx
View File

@ -25,11 +25,9 @@ function projectile(x, y, radius, colour) {
class AttackCharge extends Component { class AttackCharge extends Component {
constructor(props) { constructor(props) {
super(); super();
this.team = props.team; this.animations = [];
// this.colour = props.colour;
this.colour = '#A25AC1';
const points = randomPoints(7, 30, { x: 0, y: 0, width: 300, height: 100 }); 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.charges = points.map(coord => projectile(coord[0], coord[1], 14, '#A25AC1'));
} }
render() { render() {
@ -44,7 +42,7 @@ class AttackCharge extends Component {
<defs> <defs>
<radialGradient id="grad1" cx="50%" cy="0%" r="85%" fx="50%" fy="50%"> <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="0%" style="stop-color:#dba9a9;stop-opacity:0.6" />
<stop offset="100%" style={`stop-color:${this.colour};stop-opacity:1`} /> <stop offset="100%" style={`stop-color:#A25AC1;stop-opacity:1`} />
</radialGradient> </radialGradient>
</defs> </defs>
<filter id="explosion"> <filter id="explosion">
@ -79,36 +77,55 @@ class AttackCharge extends Component {
anime.set('.skill-anim', { anime.set('.skill-anim', {
translateY: -200, translateY: -200,
translateX: 0, translateX: 0,
opacity: 0,
}); });
anime.set('#explosion feDisplacementMap', { anime.set('#explosion feDisplacementMap', {
scale: 1, scale: 1,
}); });
anime({ this.animations.push(anime({
targets: '.skill-anim',
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 },
],
}));
this.animations.push(anime({
targets: '.skill-anim', targets: '.skill-anim',
translateY: 0, translateY: 0,
translateX: 0, translateX: 0,
loop: false, loop: false,
delay: TIMES.TARGET_DELAY_MS,
duration: (duration * 1 / 2), duration: (duration * 1 / 2),
easing: 'easeInQuad', easing: 'easeInQuad',
}); }));
anime({ this.animations.push(anime({
targets: '#explosion feDisplacementMap', targets: '#explosion feDisplacementMap',
scale: 75, scale: 75,
loop: false, loop: false,
delay: (duration * 2 / 3), delay: (TIMES.TARGET_DELAY_MS + duration * 2 / 3),
duration: (duration * 1 / 3), duration: (duration * 1 / 3),
easing: 'easeInQuad', easing: 'easeInQuad',
}); }));
projectiles.forEach(proj => anime({ projectiles.forEach(proj => anime({
targets: proj, targets: proj,
cx: Math.random() * 250 + 25, cx: Math.random() * 250 + 25,
cy: Math.random() * 300 + 50, cy: Math.random() * 300 + 50,
delay: TIMES.TARGET_DELAY_MS,
duration: (duration * 2 / 3), duration: (duration * 2 / 3),
easing: 'easeInQuad', easing: 'easeInQuad',
})); }));
} }
componentWillUnmount() {
for (let i = this.animations.length - 1; i >= 0; i--) {
this.animations[i].reset();
}
}
} }
module.exports = AttackCharge; module.exports = AttackCharge;

6
client/src/components/anims/curse.jsx
View File

@ -43,8 +43,8 @@ class Curse extends Component {
this.animations.push(anime({ this.animations.push(anime({
targets: ['#curse'], targets: ['#curse'],
opacity: [ opacity: [
{ value: 1, delay: TIMES.TARGET_FADE_IN_DELAY, duration: TIMES.TARGET_FADE_IN_DURATION }, { value: 1, delay: TIMES.TARGET_DELAY_MS, duration: TIMES.TARGET_DURATION_MS * 0.2 },
{ value: 0, delay: TIMES.TARGET_FADE_OUT_DELAY, duration: TIMES.FADE_OUT_DURATION }, { value: 0, delay: TIMES.TARGET_DURATION_MS * 0.6, duration: TIMES.TARGET_DURATION_MS * 0.2 },
], ],
easing: 'easeInOutSine', easing: 'easeInOutSine',
})); }));
@ -56,7 +56,7 @@ class Curse extends Component {
strokeWidth: [8, 0], strokeWidth: [8, 0],
filter: [`drop-shadow(0 0 5px ${COLOURS.WHITE}`, `drop-shadow(0 0 5px ${COLOURS.BLUE}`], filter: [`drop-shadow(0 0 5px ${COLOURS.WHITE}`, `drop-shadow(0 0 5px ${COLOURS.BLUE}`],
easing: 'easeOutSine', easing: 'easeOutSine',
delay: TIMES.TARGET_FADE_IN_DELAY, delay: TIMES.TARGET_DELAY_MS,
duration: TIMES.TARGET_DURATION_MS, duration: TIMES.TARGET_DURATION_MS,
})); }));
} }

4
client/src/components/anims/debuff.jsx
View File

@ -32,8 +32,8 @@ class Debuff extends Component {
this.animations.push(anime({ this.animations.push(anime({
targets: ['#debuff'], targets: ['#debuff'],
opacity: [ opacity: [
{ value: 1, delay: TIMES.TARGET_FADE_IN_DELAY, duration: TIMES.TARGET_FADE_IN_DURATION }, { value: 1, delay: TIMES.TARGET_DELAY_MS, duration: TIMES.TARGET_DURATION_MS * 0.2 },
{ value: 0, delay: TIMES.TARGET_FADE_OUT_DELAY, duration: TIMES.FADE_OUT_DURATION }, { value: 0, delay: TIMES.TARGET_DURATION_MS * 0.6, duration: TIMES.TARGET_DURATION_MS * 0.2 },
], ],
easing: 'easeInOutSine', easing: 'easeInOutSine',
})); }));

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

@ -57,7 +57,7 @@ class Decay extends Component {
transform: () => `rotate(${anime.random(-15, 15)})`, transform: () => `rotate(${anime.random(-15, 15)})`,
filter: [`drop-shadow(0 0 5px ${COLOURS.WHITE}`, `drop-shadow(0 0 5px ${COLOURS.BLUE}`], filter: [`drop-shadow(0 0 5px ${COLOURS.WHITE}`, `drop-shadow(0 0 5px ${COLOURS.BLUE}`],
easing: 'easeOutSine', easing: 'easeOutSine',
delay: TIMES.TARGET_FADE_IN_DELAY, delay: TIMES.TARGET_DELAY_MS,
duration: TIMES.TARGET_DURATION_MS, duration: TIMES.TARGET_DURATION_MS,
})); }));
} }

10
client/src/components/anims/electrify.jsx
View File

@ -1,6 +1,6 @@
const preact = require('preact'); const preact = require('preact');
const { Component } = require('preact'); const { Component } = require('preact');
const times = require('lodash/times') const times = require('lodash/times');
const anime = require('animejs').default; const anime = require('animejs').default;
@ -49,8 +49,8 @@ class Electrify extends Component {
this.animations.push(anime({ this.animations.push(anime({
targets: ['#electrify'], targets: ['#electrify'],
opacity: [ opacity: [
{ value: 1, delay: TIMES.TARGET_FADE_IN_DELAY, duration: TIMES.TARGET_FADE_IN_DURATION }, { value: 1, delay: TIMES.TARGET_DELAY_MS, duration: TIMES.TARGET_DURATION_MS * 0.2 },
{ value: 0, delay: TIMES.TARGET_FADE_OUT_DELAY, duration: TIMES.FADE_OUT_DURATION }, { value: 0, delay: TIMES.TARGET_DURATION_MS * 0.6, duration: TIMES.TARGET_DURATION_MS * 0.2 },
], ],
easing: 'easeInOutSine', easing: 'easeInOutSine',
})); }));
@ -80,7 +80,7 @@ class Electrify extends Component {
d: times(10, path), d: times(10, path),
easing: 'easeInOutSine', easing: 'easeInOutSine',
loop: true, loop: true,
duration: TIMES.TARGET_MAIN_DURATION / 5, duration: TIMES.TARGET_DURATION_MS / 5,
})); }));
this.animations.push(anime({ this.animations.push(anime({
@ -89,7 +89,7 @@ class Electrify extends Component {
easing: 'easeInOutSine', easing: 'easeInOutSine',
direction: 'alternate', direction: 'alternate',
loop: true, loop: true,
duration: TIMES.TARGET_MAIN_DURATION, duration: TIMES.TARGET_DURATION_MS,
})); }));
} }

8
client/src/components/anims/electrocute.jsx
View File

@ -47,8 +47,8 @@ class Electrify extends Component {
this.animations.push(anime({ this.animations.push(anime({
targets: ['#electrify'], targets: ['#electrify'],
opacity: [ opacity: [
{ value: 1, delay: TIMES.TARGET_FADE_IN_DELAY, duration: TIMES.TARGET_FADE_IN_DURATION }, { value: 1, delay: TIMES.TARGET_DELAY_MS, duration: TIMES.TARGET_DURATION_MS * 0.2 },
{ value: 0, delay: TIMES.TARGET_FADE_OUT_DELAY, duration: TIMES.FADE_OUT_DURATION }, { value: 0, delay: TIMES.TARGET_DURATION_MS * 0.6, duration: TIMES.TARGET_DURATION_MS * 0.2 },
], ],
easing: 'easeInOutSine', easing: 'easeInOutSine',
})); }));
@ -72,7 +72,7 @@ class Electrify extends Component {
d: times(10, path), d: times(10, path),
easing: 'easeInOutSine', easing: 'easeInOutSine',
loop: true, loop: true,
duration: TIMES.TARGET_MAIN_DURATION / 5, duration: TIMES.TARGET_DURATION_MS / 5,
})); }));
this.animations.push(anime({ this.animations.push(anime({
@ -81,7 +81,7 @@ class Electrify extends Component {
easing: 'easeInOutSine', easing: 'easeInOutSine',
direction: 'alternate', direction: 'alternate',
loop: true, loop: true,
duration: TIMES.TARGET_MAIN_DURATION, duration: TIMES.TARGET_DURATION_MS,
})); }));
} }

12
client/src/components/anims/haste.jsx
View File

@ -43,8 +43,8 @@ class Haste extends Component {
this.animations.push(anime({ this.animations.push(anime({
targets: ['#haste'], targets: ['#haste'],
opacity: [ opacity: [
{ value: 1, delay: TIMES.TARGET_FADE_IN_DELAY, duration: TIMES.TARGET_FADE_IN_DURATION }, { value: 1, delay: TIMES.TARGET_DELAY_MS, duration: TIMES.TARGET_DURATION_MS * 0.2 },
{ value: 0, delay: TIMES.TARGET_FADE_OUT_DELAY, duration: TIMES.FADE_OUT_DURATION }, { value: 0, delay: TIMES.TARGET_DURATION_MS * 0.6, duration: TIMES.TARGET_DURATION_MS * 0.2 },
], ],
easing: 'easeInOutSine', easing: 'easeInOutSine',
})); }));
@ -53,8 +53,8 @@ class Haste extends Component {
targets: ['#haste g'], targets: ['#haste g'],
stroke: [COLOURS.GREEN, COLOURS.RED], stroke: [COLOURS.GREEN, COLOURS.RED],
easing: 'easeInOutSine', easing: 'easeInOutSine',
delay: TIMES.TARGET_FADE_IN_DELAY, delay: TIMES.TARGET_DELAY_MS,
duration: TIMES.TARGET_DURATION_MS, duration: TIMES.TARGET_DURATION_MS * 0.75,
})); }));
this.animations.push(anime({ this.animations.push(anime({
@ -64,8 +64,8 @@ class Haste extends Component {
numOctaves: 5, numOctaves: 5,
easing: 'easeInOutSine', easing: 'easeInOutSine',
delay: TIMES.TARGET_FADE_IN_DELAY, delay: TIMES.TARGET_DELAY_MS,
duration: TIMES.RESOLUTION_TOTAL_MS, duration: TIMES.TARGET_DURATION_MS,
})); }));
} }

47
client/src/components/anims/heal.jsx
View File

@ -27,10 +27,9 @@ class Heal extends Component {
constructor(props) { constructor(props) {
super(); super();
this.team = props.team; this.team = props.team;
// this.colour = props.colour; this.animations = [];
this.colour = '#1FF01F';
const points = randomPoints(15, 30, { x: 0, y: 0, width: 300, height: 400 }); 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)); this.charges = points.map(coord => projectile(coord[0], coord[1], 14, '#1FF01F'));
} }
render() { render() {
@ -44,7 +43,7 @@ class Heal extends Component {
<defs> <defs>
<radialGradient id="grad1" cx="50%" cy="0%" r="85%" fx="50%" fy="50%"> <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="0%" style="stop-color:#dba9a9;stop-opacity:0.6" />
<stop offset="100%" style={`stop-color:${this.colour};stop-opacity:1`} /> <stop offset="100%" style={'stop-color:#1FF01F;stop-opacity:1'} />
</radialGradient> </radialGradient>
</defs> </defs>
<filter id="explosion"> <filter id="explosion">
@ -59,46 +58,46 @@ class Heal extends Component {
} }
componentDidMount() { 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', { anime.set('#explosion feDisplacementMap', {
scale: 100, scale: 100,
}); });
anime.set('.skill-anim', {
opacity: 0,
});
anime({ this.animations.push(anime({
targets: '.skill-anim',
opacity: [
{ value: 1, delay: TIMES.TARGET_DELAY_MS, duration: TIMES.TARGET_DURATION_MS * 0.3 },
{ value: 0, delay: TIMES.TARGET_DURATION_MS * 0.6, duration: TIMES.TARGET_DURATION_MS * 0.2 },
],
}));
this.animations.push(anime({
targets: '.skill-anim', targets: '.skill-anim',
translateY: 0, translateY: 0,
translateX: 0, translateX: 0,
loop: false, loop: false,
delay: TIMES.TARGET_DELAY_MS,
duration: (duration * 1 / 2), duration: (duration * 1 / 2),
easing: 'easeInQuad', easing: 'easeInQuad',
}); }));
anime({ this.animations.push(anime({
targets: '#explosion feDisplacementMap', targets: '#explosion feDisplacementMap',
scale: 1, scale: 1,
loop: false, loop: false,
delay: TIMES.TARGET_DELAY_MS,
duration: (duration * 1 / 2), duration: (duration * 1 / 2),
easing: 'easeInQuad', easing: 'easeInQuad',
}); }));
anime({ this.animations.push(anime({
targets: '#projectile', targets: '#projectile',
cx: 150, cx: 150,
cy: 200, cy: 200,
delay: (duration * 1 / 2), delay: (TIMES.TARGET_DELAY_MS + duration * 1 / 2),
duration: (duration * 1 / 2), duration: (duration * 1 / 2),
easing: 'easeInQuad', easing: 'easeInQuad',
}); }));
} }
} }

4
client/src/components/anims/hex.jsx
View File

@ -48,8 +48,8 @@ class Hex extends Component {
this.animations.push(anime({ this.animations.push(anime({
targets: ['#hex'], targets: ['#hex'],
opacity: [ opacity: [
{ value: 1, delay: TIMES.TARGET_FADE_IN_DELAY, duration: TIMES.TARGET_FADE_IN_DURATION }, { value: 1, delay: TIMES.TARGET_DELAY_MS, duration: TIMES.TARGET_DURATION_MS * 0.2 },
{ value: 0, delay: TIMES.TARGET_FADE_OUT_DELAY, duration: TIMES.FADE_OUT_DURATION }, { value: 0, delay: TIMES.TARGET_DURATION_MS * 0.6, duration: TIMES.TARGET_DURATION_MS * 0.2 },
], ],
easing: 'easeInOutSine', easing: 'easeInOutSine',
})); }));

47
client/src/components/anims/invert.jsx
View File

@ -1,16 +1,41 @@
const preact = require('preact');
const { Component } = require('preact');
const anime = require('animejs').default; const anime = require('animejs').default;
const { TIMES } = require('../../constants'); const { TIMES } = require('../../constants');
function invert(id) { class Invert extends Component {
anime({ constructor(props) {
targets: [document.getElementById(id)], super();
rotate: 180, this.id = props.id;
easing: 'easeInOutElastic', this.animations = [];
direction: 'alternate',
delay: TIMES.TARGET_FADE_IN_DELAY,
duration: TIMES.TARGET_DURATION_MS,
});
} }
module.exports = invert; render() {
// Need this so unmount triggers
return <svg id='invert'></svg>;
}
componentDidMount() {
this.animations.push(anime({
targets: [document.getElementById(this.id)],
rotate: 180,
delay: TIMES.TARGET_DELAY_MS,
duration: TIMES.TARGET_DURATION_MS * 0.45,
easing: 'easeInOutElastic',
direction: 'alternate',
}));
}
// this is necessary because
// skipping / timing / unmounting race conditions
// can cause the animations to cut short, this will ensure the values are reset
// because preact will recycle all these components
componentWillUnmount() {
for (let i = this.animations.length - 1; i >= 0; i--) {
this.animations[i].reset();
}
}
}
module.exports = Invert;

25
client/src/components/anims/siphon.jsx
View File

@ -7,6 +7,11 @@ const { TIMES } = require('../../constants');
const duration = TIMES.TARGET_DURATION_MS; const duration = TIMES.TARGET_DURATION_MS;
class AttackCharge extends Component { class AttackCharge extends Component {
constructor() {
super();
this.animations = [];
}
render() { render() {
return ( return (
<svg <svg
@ -14,7 +19,8 @@ class AttackCharge extends Component {
version="1.1" version="1.1"
id="Layer_1" id="Layer_1"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 300 400"> viewBox="0 0 300 400"
opacity="0">
<filter id="blur"> <filter id="blur">
<feGaussianBlur in="SourceGraphic" stdDeviation="2" /> <feGaussianBlur in="SourceGraphic" stdDeviation="2" />
</filter> </filter>
@ -28,6 +34,15 @@ class AttackCharge extends Component {
r: '140', r: '140',
stroke: '#3498db', stroke: '#3498db',
}); });
this.animations.push(anime({
targets: '.skill-anim',
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 },
],
}));
anime({ anime({
targets: '#siphon', targets: '#siphon',
keyframes: [ keyframes: [
@ -36,10 +51,18 @@ class AttackCharge extends Component {
{ r: '50', stroke: '#3498db' }, { r: '50', stroke: '#3498db' },
{ r: '20', stroke: '#3498db' }, { r: '20', stroke: '#3498db' },
], ],
delay: TIMES.TARGET_DELAY_MS,
duration, duration,
easing: 'easeInCubic', easing: 'easeInCubic',
}); });
} }
componentWillUnmount() {
for (let i = this.animations.length - 1; i >= 0; i--) {
this.animations[i].reset();
}
}
} }
module.exports = AttackCharge; module.exports = AttackCharge;

9
client/src/components/anims/stun.jsx
View File

@ -46,8 +46,8 @@ class Stun extends Component {
this.animations.push(anime({ this.animations.push(anime({
targets: ['#stun'], targets: ['#stun'],
opacity: [ opacity: [
{ value: 1, delay: TIMES.TARGET_FADE_IN_DELAY, duration: TIMES.TARGET_FADE_IN_DURATION }, { value: 1, delay: TIMES.TARGET_DELAY_MS, duration: TIMES.TARGET_DURATION_MS * 0.2 },
{ value: 0, delay: TIMES.TARGET_FADE_OUT_DELAY, duration: TIMES.FADE_OUT_DURATION }, { value: 0, delay: TIMES.TARGET_DURATION_MS * 0.6, duration: TIMES.TARGET_DURATION_MS * 0.2 },
], ],
easing: 'easeInOutSine', easing: 'easeInOutSine',
})); }));
@ -57,9 +57,8 @@ class Stun extends Component {
rotate: 180, rotate: 180,
easing: 'linear', easing: 'linear',
loop: true, loop: true,
delay: TIMES.TARGET_DELAY_MS,
duration: TIMES.RESOLUTION_TOTAL_MS, duration: TIMES.TARGET_DURATION_MS,
delay: TIMES.TARGET_FADE_IN_DELAY,
})); }));
} }

45
client/src/constants.jsx
View File

@ -1,57 +1,16 @@
const SOURCE_DURATION_MS = 1000; const SOURCE_DURATION_MS = 1000;
const TARGET_DELAY_MS = 500; const TARGET_DELAY_MS = 500;
const TARGET_DURATION_MS = 1500; const TARGET_DURATION_MS = 1500;
const FADE_DURATION_MS = 500;
const RESOLUTION_TOTAL_MS = SOURCE_DURATION_MS + TARGET_DURATION_MS + FADE_DURATION_MS;
const FADE_DELAY_MS = RESOLUTION_TOTAL_MS - FADE_DURATION_MS;
// const RESOLUTION_TOTAL_MS = 20000;
// first the source does an activation animation
const SOURCE_ANIMATION_DURATION = 850;
// the target fades in
const TARGET_FADE_IN_DELAY = 500;
const TARGET_FADE_IN_DURATION = 500;
// begins its main animation effect
const TARGET_MAIN_DELAY = 500;
const TARGET_MAIN_DURATION = 1500;
// then fades out
const TARGET_FADE_OUT_DURATION = 500;
const TARGET_FADE_OUT_DELAY = TARGET_MAIN_DELAY + TARGET_MAIN_DURATION;
const SOURCE_AND_TARGET_TOTAL_DURATION = TARGET_FADE_OUT_DELAY + TARGET_FADE_OUT_DURATION;
// combat text shows
const POST_SKILL_DURATION_MS = 1000; const POST_SKILL_DURATION_MS = 1000;
const SOURCE_AND_TARGET_TOTAL_DURATION = TARGET_DELAY_MS + TARGET_DURATION_MS;
module.exports = { module.exports = {
TIMES: { TIMES: {
SOURCE_DURATION_MS, SOURCE_DURATION_MS,
TARGET_DELAY_MS, TARGET_DELAY_MS,
TARGET_DURATION_MS, TARGET_DURATION_MS,
FADE_DELAY_MS,
FADE_DURATION_MS,
RESOLUTION_TOTAL_MS,
POST_SKILL_DURATION_MS, POST_SKILL_DURATION_MS,
SOURCE_ANIMATION_DURATION,
TARGET_FADE_IN_DELAY,
TARGET_FADE_IN_DURATION,
TARGET_MAIN_DELAY,
TARGET_MAIN_DURATION,
TARGET_FADE_OUT_DELAY,
TARGET_FADE_OUT_DURATION,
SOURCE_AND_TARGET_TOTAL_DURATION, SOURCE_AND_TARGET_TOTAL_DURATION,
}, },