mnml/client/src/components/animations.jsx

const preact = require('preact');

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

const Blast = require('./anims/blast');
const Heal = require('./anims/heal');
const Strike = require('./anims/strike');
const Chaos = require('./anims/chaos');
const Slay = require('./anims/slay');
const Siphon = require('./anims/siphon');
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',
};


function animations(props) {
    const { combatTextClass, combatText, stage, player, construct } = props;
    const anim = text => {
        if (stage === 'START_SKILL') {
            const skill = removeTier(text);
            switch (skill) {
                // Attack Base
                case 'Attack': return <AttackCharge id={construct.id} team={player} colour={colours.white}/>;
                case 'Strike': return <AttackCharge id={construct.id} team={player} colour={colours.red}/>;
                case 'Heal': return <AttackCharge id={construct.id} team={player} colour={colours.green}/>;
                case 'Blast': return <AttackCharge id={construct.id} team={player} colour={colours.blue}/>;
                case 'Chaos': return <AttackCharge id={construct.id} team={player} colour={colours.purple}/>;
                case 'Slay': return <AttackCharge id={construct.id} team={player} colour={colours.yellow}/>;
                case 'Siphon': return <AttackCharge id={construct.id} team={player} colour={colours.cyan}/>;
                // Stun Base
                // Block Base
                // Buff Base
                // Debuff Base
                default: return text;
            }
        } else if (stage === 'END_SKILL') {
            const skill = removeTier(text);
            switch (skill) {
                case 'Attack': return <Strike id={construct.id} stage={stage} team={player} colour={colours.white}/>;
                case 'Blast': return <Blast id={construct.id} stage={stage} team={player}/>;
                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 'Siphon': return <Siphon id={construct.id} stage={stage} team={player} colour={colours.red}/>;
                default: return text;
            }
        }
        return text;
    };

    if (combatText) {
        const combatAnim = anim(combatText);
        return <div class={combatTextClass}>
            {combatAnim}
        </div>;
    }
/*    return (
        <div class={combatTextClass}>
            <Test id={construct.id} stage={stage} team={player}/>
        </div>
    );
*/
    return (<div>&nbsp;</div>);
}

module.exports = animations;