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

buff debuff

Browse Source
This commit is contained in:
ntr 2019-06-30 12:28:35 +10:00
parent 74b250439b
commit 2f9c1aeda3
3 changed files with 108 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -6,6 +6,8 @@ const AttackCharge = require('./anims/attack.charge');
const Amplify = require('./anims/amplify');
const Blast = require('./anims/blast');
const banish = require('./anims/banish');
const Buff = require('./anims/buff');
const Debuff = require('./anims/debuff');
const Heal = require('./anims/heal');
const Hex = require('./anims/hex');
const Strike = require('./anims/strike');
@ -45,10 +47,8 @@ function animations(props) {
if (resolution.source.id === construct.id) {
const playerTeam = game.players.find(t => t.id === account.id);
const playerTeamIds = playerTeam.constructs.map(c => c.id);
playerTeamIds.sort();
const otherTeam = game.players.find(t => t.id !== account.id);
const otherTeamIds = otherTeam.constructs.map(c => c.id);
otherTeamIds.sort();
const sourceIsPlayer = playerTeamIds.includes(construct.id);
const targetIsPlayer = playerTeamIds.includes(resolution.target.id);
@ -92,7 +92,9 @@ function animations(props) {
case 'Attack': return <Strike id={construct.id} stage={stage} team={player} colour={colours.white}/>;
case 'Amplify': return <Amplify/>;
case 'Banish': return banish(construct.id);
case 'Buff': return <Buff />;
case 'Blast': return <Blast id={construct.id} stage={stage} team={player}/>;
case 'Debuff': return <Debuff />;
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}/>;

51
client/src/components/anims/buff.jsx Normal file
View File

@ -0,0 +1,51 @@
const preact = require('preact');
const { Component } = require('preact');
const anime = require('animejs').default;
const { TIMES } = require('../../constants');
class Buff extends Component {
render() {
return (
<svg
id='buff'
version="1.1"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 300 300">
<g>
<polygon class='buff-one' points='0,190 100,300 190,190'/>
<polygon class='buff-two' points='40,170 100,300 160,170'/>
<polygon class='buff-three' points='70,150 100,300 130,150'/>
</g>
</svg>
);
}
componentDidMount() {
anime({
targets: ['#buff .buff-one'],
points: '0,190 100,10 190,190',
easing: 'easeOutExpo',
duration: TIMES.START_SKILL,
complete: anim => anim.reset(),
});
anime({
targets: ['#buff .buff-two'],
points: '40,170 100,50 160,170',
easing: 'easeOutExpo',
duration: TIMES.START_SKILL,
complete: anim => anim.reset(),
});
anime({
targets: ['#buff .buff-three'],
points: '70,150 100,90 130,150',
easing: 'easeOutExpo',
duration: TIMES.START_SKILL,
complete: anim => anim.reset(),
});
}
}
module.exports = Buff;

53
client/src/components/anims/debuff.jsx Normal file
View File

@ -0,0 +1,53 @@
const preact = require('preact');
const { Component } = require('preact');
const anime = require('animejs').default;
const { TIMES } = require('../../constants');
class Buff extends Component {
render() {
return (
<svg
id='buff'
version="1.1"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 300 300"
style={{ transform: 'rotate(180deg)' }}
>
<g>
<polygon class='buff-one' points='0,190 100,300 190,190'/>
<polygon class='buff-two' points='40,170 100,300 160,170'/>
<polygon class='buff-three' points='70,150 100,300 130,150'/>
</g>
</svg>
);
}
componentDidMount() {
anime({
targets: ['#buff .buff-one'],
points: '0,190 100,10 190,190',
easing: 'easeOutExpo',
duration: TIMES.START_SKILL,
complete: anim => anim.reset(),
});
anime({
targets: ['#buff .buff-two'],
points: '40,170 100,50 160,170',
easing: 'easeOutExpo',
duration: TIMES.START_SKILL,
complete: anim => anim.reset(),
});
anime({
targets: ['#buff .buff-three'],
points: '70,150 100,90 130,150',
easing: 'easeOutExpo',
duration: TIMES.START_SKILL,
complete: anim => anim.reset(),
});
}
}
module.exports = Buff;