mnml/client/src/scenes/combat.skills.js

const Phaser = require('phaser');
const { TEXT, POSITIONS: { COMBAT } } = require('./constants');

const calcMargin = () => {
    const CRYP_MARGIN = COMBAT.height() / 5;
    const TEXT_MARGIN = COMBAT.height() / 35;
    const TEAM_MARGIN = COMBAT.width() * 0.7;
    const X_PADDING = COMBAT.width() / 10;
    const Y_PADDING = COMBAT.height() / 7;
    return { CRYP_MARGIN, TEXT_MARGIN, TEAM_MARGIN, X_PADDING, Y_PADDING };
};

const skillTextPosition = (crypIter, skillIter) => {
    const { TEXT_MARGIN } = calcMargin();
    const skillTextX = 0.15 * COMBAT.width() * crypIter;
    const skillTextY = COMBAT.y() + COMBAT.height() * 0.7 + TEXT_MARGIN * skillIter;
    return [skillTextX, skillTextY];
};

class CrypSkill extends Phaser.GameObjects.Text {
    constructor(scene, x, y, skill, cryp) {
        // Avatar will be a property of cryp
        if (skill) {
            const CD_TEXT = skill.cd ? `(${skill.cd}T)` : '';
            const SKILL_TEXT = `${skill.skill} ${CD_TEXT}`;
            super(scene, x, y, SKILL_TEXT, TEXT.NORMAL);
            this.cryp = cryp;
            this.skill = skill;
            this.scene = scene;
            this.setInteractive();
        } else {
            super(scene, x, y, cryp.name, TEXT.HEADER);
        }
    }

    clickHandler() {
        this.scene.game.events.emit('SET_ACTIVE_SKILL', this);
    }
}

class CombatSkills extends Phaser.Scene {
    constructor() {
        super({ key: 'CombatSkills' });
    }

    create(game) {
        this.registry.events.on('changedata', this.updateData, this);
        this.input.on('pointerup', (pointer, obj) => {
            if (obj[0] instanceof CrypSkill) {
                obj[0].clickHandler();
            }
        });
        this.skills = this.add.group();
        this.account = this.registry.get('account');
        // this.drawSkills(game);
    }

    updateData(parent, key, data) {
        if (key === 'game') {
            if (!data) return false;
            const isAnimating = this.registry.get('gameAnimating');
            if (isAnimating) return false;
            // this.drawSkills(data);
        }
        return true;
    }

    drawSkills(game) {
        // const addKeys = (game.phase === 'Skill' && !team) || (game.phase === 'Target' && team);
        const renderSkills = (scene, cryp, iter) => {
            const skillList = [];
            // If the cryps have been spawned already put the skills in a corresponding pos
            const namePos = skillTextPosition(iter, 0);
            const addSkill = (skill, i) => {
                // Draw skill group name as part of the "skill class" so we can destroy it later
                if (i === 0) this.skills.add(this.add.existing(new CrypSkill(scene, namePos[0], namePos[1], false, cryp)));
                const skillTextPos = skillTextPosition(iter, i + 2);
                const skillObj = new CrypSkill(scene, skillTextPos[0], skillTextPos[1], skill, cryp);
                group.add(scene.add.existing(skillObj));
                skillList.push(skillObj);
            };
            if (game.phase === 'Skill' && cryp.account === scene.account.id) {
                if (cryp.hp.base === 0) return true;
                cryp.skills.forEach(addSkill);
            } else if (game.phase === 'Target' && cryp.account !== scene.account.id) {
                const blockSkill = game.stack.find(skill => skill.source_cryp_id === cryp.id);
                // cryp not casting this turn
                if (!blockSkill) return false;
                addSkill(blockSkill, 0);
            }
            return true;
        };

        const allyTeam = game.teams.find(t => t.id === this.account.id);
        // in future there will be more than one
        const [enemyTeam] = game.teams.filter(t => t.id !== this.account.id);

        allyTeam.cryps.forEach((cryp, i) => renderSkills(cryp, i, 0));
        if (!enemyTeam) return false;
        enemyTeam.cryps.forEach((cryp, i) => renderSkills(cryp, i, 1));

        renderSkills(this, this.skills, cryp, game, crypObj.iter);
        return true
    }

    cleanUp() {
        this.registry.events.off('changedata', this.updateData, this);
        this.scene.remove();
    }
}

module.exports = CombatSkills;


/*    clearSkills() {
        // console.log(this.scene.gameStart);
        this.children.entries.filter(obj => obj instanceof CrypSkill).forEach(obj => obj.destroy());
    }
*/
/*    crypKeyHandler(cryp, iter) {
        if (CRYP_KEY_MAP[iter]) {
            this.input.keyboard.removeListener(CRYP_KEY_MAP[iter]);
            if (cryp.skills.length > 0) { // check there are cryp skills
                this.input.keyboard.on(CRYP_KEY_MAP[iter], () => {
                    SKILL_KEY_MAP.forEach(k => this.input.keyboard.removeListener(k));
                    cryp.skills.forEach((skill, i) => {
                        this.input.keyboard.on(SKILL_KEY_MAP[i], () => {
                            this.game.events.emit('SET_ACTIVE_SKILL', skill);
                            skill.setActive();
                        }, this);
                    });
                }, this);
            }
        }
        return true;
    }*/

        /*// has the phase changed?
    const phaseChange = (this.registry.get('gamePhase') === game.phase);
    if (phaseChange) return false;
    this.registry.set('gamePhase', game.phase);
    this.combatCryps.update(game);*/