mnml/client/src/scenes/statsheet.js

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

const X = MENU_MAIN.x();
const Y = MENU_MAIN.y();
const WIDTH = MENU_MAIN.width();
const HEIGHT = MENU_MAIN.height();
const TEXT_MARGIN = 24;

const menuX = WIDTH / 10;
const menuY = HEIGHT * 0.8;
const menuWidth = WIDTH / 10;
const menuHeight = HEIGHT * 0.3;

const X_LEARN = WIDTH * 2 / 4;
const Y_SKILLS = HEIGHT * 0.5;


function addButton(scene, x, y, cback, name) {
    const button = scene.add
        .rectangle(x, y, menuWidth, menuHeight, 0x222222)
        .setInteractive()
        .setOrigin(0)
        .on('pointerdown', cback);
    scene.add.text(button.getCenter().x, button.getCenter().y, name, TEXT.HEADER)
        .setOrigin(0.5, 1);
}

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

    create(cryp) {
        this.cameras.main.setViewport(X, Y, WIDTH, HEIGHT);
        this.registry.events.on('changedata', this.updateData, this);
        this.cryp = cryp;
        this.forget = false;

        const crypStat = (stat, i) => {
            const STAT_X = WIDTH / 10;
            const STAT_Y = (i + 1) * TEXT_MARGIN;
            this.add.text(STAT_X, STAT_Y, `${stat.stat}: ${stat.base}`, TEXT.NORMAL);
        };

        const CRYP_STATS = [cryp.stamina, cryp.phys_dmg, cryp.spell_dmg];
        this.add.text(WIDTH / 10, 0, cryp.name, TEXT.HEADER);
        CRYP_STATS.forEach(crypStat);
        this.addKnownSkills(cryp);
        this.addLearnableSkills(cryp);
        this.addControls();
    }

    updateData(parent, key, data) {
        if (key === 'cryps') {
            const cryp = data.find(c => c.id === this.cryp.id);
            this.cryp = cryp;
            this.addKnownSkills(cryp);
        }
    }

    addControls() {
        const infoCback = () => {
            this.forget = false;
            this.addKnownSkills(this.cryp);
        };
        const forgetCback = () => {
            this.forget = true;
            this.addKnownSkills(this.cryp);
        };
        addButton(this, menuX, menuY, infoCback, 'Skill\nInfo');
        addButton(this, menuX + menuWidth * 1.1, menuY, forgetCback, 'Forget\nSkills');
    }

    addKnownSkills(cryp) {
        if (this.knownSkills) this.knownSkills.destroy(true);
        this.knownSkills = this.add.group();

        this.add.text(menuX, Y_SKILLS, 'Skills', TEXT.HEADER);
        const knownSkill = (skill, i) => {
            const SKILL_X = menuX;
            const SKILL_Y = (i * TEXT_MARGIN) + Y_SKILLS + TEXT_MARGIN;

            const color = this.forget ? '#ff0000' : '#ffffff';
            const style = { fontFamily: 'monospace', fontSize: 16, color };
            this.knownSkills.add(this.add.text(menuX, SKILL_Y, skill.skill, style)
                .setInteractive()
                .on('pointerdown', () => {
                    if (this.forget) {
                        this.registry.get('ws').sendCrypForget(cryp.id, skill.skill);
                    }
                })
                .on('pointerover', (pointer) => {
                    if (!this.forget) {
                        const { description } = SKILLS.LEARNABLE.find(s => s.name === skill.skill);
                        this.displaySkillText(SKILL_X, SKILL_Y, description, pointer);
                    }
                })
                .on('pointerout', () => {
                    if (this.skillText) this.skillText.destroy();
                }));
        };
        cryp.skills.forEach(knownSkill);
    }

    addLearnableSkills(cryp) {
        if (this.learnSkills) this.learnSkills.destroy(true);
        this.learnSkills = this.add.group();
        const learnable = (skill, i) => {
            const SKILL_X = i <= 10 ? X_LEARN : X_LEARN + WIDTH / 5;
            const SKILL_Y = i <= 10 ? (i + 1) * TEXT_MARGIN : (i - 10) * TEXT_MARGIN;

            this.learnSkills.add(this.add.text(SKILL_X, SKILL_Y, skill.name, TEXT.NORMAL)
                .setInteractive()
                .on('pointerdown', () => {
                    this.registry.get('ws').sendCrypLearn(cryp.id, skill.name);
                })
                .on('pointerover', (pointer) => {
                    if (!this.forget) {
                        this.displaySkillText(SKILL_X, SKILL_Y, skill.description, pointer);
                    }
                })
                .on('pointerout', () => {
                    if (this.skillText) this.skillText.destroy();
                }));
        };

        this.learnSkills.add(this.add.text(X_LEARN, 0, 'Learnable', TEXT.HEADER));
        SKILLS.LEARNABLE.forEach(learnable);
    }

    displaySkillText(x, y, description, pointer) {
        if (this.skillText) this.skillText.destroy();
        this.skillText = this.add.text(x, y, description, {
            fontSize: '16px',
            fontFamily: 'Arial',
            color: '#ffffff',
            backgroundColor: '#222222',
        }).setPadding(32);
        this.skillText.setAlpha(0.8);
        this.skillText.setOrigin(pointer.x >= WIDTH * 0.65 ? 1 : 0,
            pointer.y >= HEIGHT * 0.25 ? 1 : 0);
        this.skillText.setWordWrapWidth(450);
    }


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

module.exports = StatSheet;