134 lines
4.5 KiB
JavaScript
134 lines
4.5 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 Curse = require('./anims/curse');
|
|
const Stun = require('./anims/stun');
|
|
const Heal = require('./anims/heal');
|
|
const Hex = require('./anims/hex');
|
|
const Strike = require('./anims/strike');
|
|
const Chaos = require('./anims/chaos');
|
|
const Slay = require('./anims/slay');
|
|
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 SOURCE_ANIM_MS = 1000;
|
|
|
|
const TARGET_ANIM_DELAY_MS = 500;
|
|
const TARGET_ANIM_MS = 1000;
|
|
|
|
function animations(props) {
|
|
const { resolution, stage, player, construct, game, account } = props;
|
|
|
|
if (!resolution) return false;
|
|
const [type, event] = resolution.event;
|
|
if (!event.skill) return false;
|
|
if (!resolution.target) return false;
|
|
|
|
console.log(resolution);
|
|
|
|
// source animation
|
|
if (resolution.source.id === construct.id) {
|
|
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: SOURCE_ANIM_MS,
|
|
});
|
|
}
|
|
|
|
if (resolution.target.id !== construct.id) return false;
|
|
|
|
// target animation
|
|
const anim = text => {
|
|
console.log(text);
|
|
if (!text) return false;
|
|
const skill = removeTier(text);
|
|
|
|
if (skill === 'Bash' && type === 'Damage') return false;
|
|
switch (skill) {
|
|
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 'Bash': return <Bash />;
|
|
case 'Block': return <Block />;
|
|
case 'Buff': return <Buff />;
|
|
case 'Curse': return <Curse />;
|
|
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}/>;
|
|
case 'Heal': return <Heal id={construct.id} stage={stage} team={player} colour={colours.red}/>;
|
|
case 'Hex': return <Hex />;
|
|
case 'Siphon': return <Siphon id={construct.id} stage={stage} team={player} colour={colours.red}/>;
|
|
case 'SiphonTick': return <SiphonTick id={construct.id} stage={stage} team={player} colour={colours.red}/>;
|
|
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;
|