145 lines
5.1 KiB
JavaScript
145 lines
5.1 KiB
JavaScript
const preact = require('preact');
|
|
const anime = require('animejs').default;
|
|
|
|
const AttackCharge = require('./anims/attack.charge');
|
|
|
|
const Amplify = require('./anims/amplify');
|
|
const Blast = require('./anims/blast');
|
|
const Banish = require('./anims/banish');
|
|
const Bash = require('./anims/bash');
|
|
const Block = require('./anims/block');
|
|
const Buff = require('./anims/buff');
|
|
const Debuff = require('./anims/debuff');
|
|
const Decay = require('./anims/decay');
|
|
const Curse = require('./anims/curse');
|
|
const Electrify = require('./anims/electrify');
|
|
const Haste = require('./anims/haste');
|
|
const Stun = require('./anims/stun');
|
|
const Heal = require('./anims/heal');
|
|
const Hex = require('./anims/hex');
|
|
const Strike = require('./anims/strike');
|
|
const Parry = require('./anims/parry');
|
|
const Recharge = require('./anims/recharge');
|
|
const Reflect = require('./anims/reflect');
|
|
const Chaos = require('./anims/chaos');
|
|
const Invert = require('./anims/invert');
|
|
const Slay = require('./anims/slay');
|
|
const Triage = require('./anims/triage');
|
|
const Siphon = require('./anims/siphon');
|
|
const SiphonTick = require('./anims/siphon.tick');
|
|
|
|
// const Test = require('./anims/test');
|
|
|
|
const { removeTier } = require('../utils');
|
|
|
|
const colours = {
|
|
red: '#a52a2a',
|
|
green: '#1FF01F',
|
|
blue: '#3498db',
|
|
purple: '#A25AC1',
|
|
yellow: '#d1c86a',
|
|
cyan: '#6AD1BF',
|
|
white: '#FFFFFF',
|
|
};
|
|
|
|
const { TIMES } = require('../constants');
|
|
|
|
function animations(props) {
|
|
const { game, account, resolution, player, construct } = props;
|
|
if (!resolution) return false;
|
|
const [, event] = resolution.event;
|
|
if (!event.skill) return false;
|
|
if (!resolution.target) return false;
|
|
|
|
// source animation
|
|
if (resolution.source.id === construct.id && resolution.stages.includes('START_SKILL')) {
|
|
const playerTeam = game.players.find(t => t.id === account.id);
|
|
const playerTeamIds = playerTeam.constructs.map(c => c.id);
|
|
const otherTeam = game.players.find(t => t.id !== account.id);
|
|
const otherTeamIds = otherTeam.constructs.map(c => c.id);
|
|
|
|
const sourceIsPlayer = playerTeamIds.includes(construct.id);
|
|
const targetIsPlayer = playerTeamIds.includes(resolution.target.id);
|
|
|
|
const sameTeam = (sourceIsPlayer && targetIsPlayer) || (!sourceIsPlayer && !targetIsPlayer);
|
|
|
|
const y = sameTeam
|
|
? 0
|
|
: targetIsPlayer
|
|
? 1
|
|
: -1;
|
|
|
|
const i = sourceIsPlayer
|
|
? playerTeamIds.findIndex(c => c === construct.id)
|
|
: otherTeamIds.findIndex(c => c === construct.id);
|
|
|
|
const j = targetIsPlayer
|
|
? playerTeamIds.findIndex(c => c === resolution.target.id)
|
|
: otherTeamIds.findIndex(c => c === resolution.target.id);
|
|
|
|
const x = j - i;
|
|
anime({
|
|
targets: [document.getElementById(construct.id)],
|
|
translateY: y * 200,
|
|
translateX: x * 200,
|
|
easing: 'easeInOutElastic',
|
|
direction: 'alternate',
|
|
duration: TIMES.SOURCE_DURATION_MS,
|
|
|
|
});
|
|
}
|
|
|
|
if (resolution.target.id !== construct.id) return false;
|
|
|
|
// target animation
|
|
const anim = text => {
|
|
console.log(text);
|
|
if (!text || !resolution.sequence[0].includes('END_SKILL')) return false;
|
|
const skill = removeTier(text);
|
|
|
|
// if (skill === 'Bash' && type === 'Damage') return false;
|
|
switch (skill) {
|
|
case 'Attack': return <Strike id={construct.id} team={player} colour={colours.white}/>;
|
|
case 'Amplify': return <Amplify/>;
|
|
case 'Banish': return <Banish id={construct.id} />;
|
|
case 'Bash': return <Bash />;
|
|
case 'Block': return <Block />;
|
|
case 'Buff': return <Buff />;
|
|
case 'Curse': return <Curse />;
|
|
case 'Electrify': return <Electrify />;
|
|
case 'Blast': return <Blast id={construct.id} team={player}/>;
|
|
case 'Debuff': return <Debuff />;
|
|
case 'Decay': return <Decay />;
|
|
case 'Strike': return <Strike id={construct.id} team={player} colour={colours.red}/>;
|
|
case 'Chaos': return <Chaos id={construct.id} team={player}/>;
|
|
case 'Slay': return <Slay id={construct.id} team={player} />;
|
|
case 'Heal': return <Heal id={construct.id} team={player} />;
|
|
case 'Hex': return <Hex />;
|
|
case 'Haste': return <Haste />;
|
|
case 'Parry': return <Parry team={player} />;
|
|
case 'Recharge': return <Recharge team={player} />;
|
|
case 'Reflect': return <Reflect team={player} />;
|
|
case 'Triage': return <Triage />;
|
|
case 'Invert': return <Invert id={construct.id} />;
|
|
case 'Siphon': return <Siphon id={construct.id} team={player} />;
|
|
case 'SiphonTick': return <SiphonTick id={construct.id} team={player} />;
|
|
case 'Stun': return <Stun />;
|
|
default: return false;
|
|
}
|
|
};
|
|
|
|
const combatAnim = anim(event.skill);
|
|
if (combatAnim) {
|
|
return (
|
|
<div class={'combat-anim'}>
|
|
{combatAnim}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div></div>);
|
|
}
|
|
|
|
module.exports = animations;
|