mnml/client/src/components/animations.jsx

const preact = require('preact');
const anime = require('animejs').default;

const AttackCharge = require('./anims/attack.charge');

const Amplify = require('./anims/amplify');
const Banish = require('./anims/banish');
const Bash = require('./anims/bash');
const Blast = require('./anims/blast');
const Block = require('./anims/block');
const Buff = require('./anims/buff');
const Chaos = require('./anims/chaos');
const Clutch = require('./anims/clutch');
const Counter = require('./anims/counter');
const Curse = require('./anims/curse');
const Debuff = require('./anims/debuff');
const Decay = require('./anims/decay');
const Electrify = require('./anims/electrify');
const Electrocute = require('./anims/electrocute');
const Haste = require('./anims/haste');
const Heal = require('./anims/heal');
const Hex = require('./anims/hex');
const Hybrid = require('./anims/hybrid');
const Intercept = require('./anims/intercept');
const Invert = require('./anims/invert');
const Purify = require('./anims/purify');
const Recharge = require('./anims/recharge');
const Refl = require('./anims/reflect');
const Restrict = require('./anims/restrict');
const Siphon = require('./anims/siphon');
const SiphonTick = require('./anims/siphon.tick');
const Slay = require('./anims/slay');
const Sleep = require('./anims/sleep');
const Strike = require('./anims/strike');
const Stun = require('./anims/stun');
const Triage = require('./anims/triage');
const TriageTick = require('./anims/triage.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);

        switch (skill) {
        // Attack base
        case 'Attack': return <Strike colour={colours.white}/>;
        case 'Blast': return <Blast />;
        case 'Siphon': return <Siphon />;
        case 'SiphonTick': return <SiphonTick />;
        case 'Strike': return <Strike colour={colours.red}/>;
        case 'Chaos': return <Chaos />;
        case 'Slay': return <Slay />;
        case 'Heal': return <Heal />;

        // Buff Base
        case 'Buff': return <Buff />;
        case 'Amplify': return <Amplify/>;
        case 'Haste': return <Haste />;
        case 'Triage': return <Triage />;
        case 'TriageTick': return <TriageTick />;
        case 'Scatter': return false;
        case 'Hybrid': return <Hybrid />;
        case 'Intercept': return <Intercept player={player} />;

        // Debuff base
        case 'Debuff': return <Debuff />;
        case 'Curse': return <Curse />;
        case 'Decay': return <Decay />;
        case 'DecayTick': return false;
        case 'Invert': return <Invert id={construct.id} />;
        case 'Purge': return false;
        case 'Silence': return false;
        case 'Restrict': return <Restrict />;

        // Stun Base
        case 'Stun': return <Stun />;
        case 'Banish': return <Banish id={construct.id} />;
        case 'Bash': return <Bash />;
        case 'Hex': return <Hex />;
        case 'Sleep': return <Sleep />;
        case 'Throw': return false;
        case 'Ruin': return false;

        // Block Base
        case 'Block': return <Block />;
        case 'Clutch': return <Clutch team={player} />;
        case 'Electrify': return <Electrify />;
        case 'Electrocute': return <Electrocute />;
        case 'ElectrocuteTick': return <Electrocute />;
        case 'Counter': return <Counter team={player} />;
        case 'Purify': return <Purify team={player} />;
        case 'Recharge': return <Recharge team={player} />;
        case 'Reflect': return <Refl team={player} />;

        default: return false;
        }
    };

    const combatAnim = anim(event.skill);
    if (!combatAnim) return false;
    return (
        <div class={'combat-anim'}>
            {combatAnim}
        </div>
    );
}

module.exports = animations;