mnml/client/src/scenes/statsheet.js

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

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 SKILL_WIDTH = Math.floor(WIDTH / 10);


class DeleteHitBox extends Phaser.GameObjects.Rectangle {
    constructor(scene, x, y) {
        super(scene, x, y, SKILL_WIDTH, SKILL_WIDTH, 0x222222);
        this.setOrigin(0);
        this.itemSelect = () => this.setFillStyle(0xff0000);
        this.itemDeselect = () => this.setFillStyle(0x222222);
    }
}

const itemCheckHitbox = (scene, pointer) => {
    const { list } = scene.scene.get('MenuCrypList').children;
    const hitboxes = list.filter(c => c.cryp)
        .concat(scene.children.list.filter(c => c instanceof DeleteHitBox));

    let found;
    for (let i = 0; i < hitboxes.length; i += 1) {
        if (Phaser.Geom.Rectangle.ContainsPoint(hitboxes[i].getBounds(), pointer.position)) {
            found = hitboxes[i];
        } else {
            hitboxes[i].itemDeselect();
        }
    }

    return found;
};

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


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

    create(cryp) {
        this.registry.events.on('changedata', this.updateData, this);
        this.cryp = cryp;

        const del = this.add.existing(new DeleteHitBox(this, X + WIDTH * 0.7, Y + HEIGHT * 0.6));
        this.add.text(del.getCenter().x, del.getCenter().y, 'Unlearn', TEXT.HEADER)
            .setOrigin(0.5, 0.5);

        this.add.text(X, Y, cryp.name, TEXT.HEADER);

        const crypStat = (stat, i) => {
            const STAT_X = X;
            const STAT_Y = Y + (i + 2) * TEXT_MARGIN;
            this.add.text(STAT_X, STAT_Y, `${stat.stat}: ${stat.value}`, TEXT.NORMAL);
        };

        const CRYP_STATS = [
            cryp.stamina,
            cryp.red_shield,
            cryp.blue_shield,
            cryp.evasion,
            cryp.red_damage,
            cryp.blue_damage,
            cryp.speed,
        ];

        CRYP_STATS.forEach(crypStat);
        this.add.text(X + WIDTH * 0.175, Y, 'Skills', TEXT.HEADER);
        const knownSkill = (skill, i) => {
            const SKILL_X = X + WIDTH * 0.21 + WIDTH * 0.125 * i;
            const SKILL_Y = Y + HEIGHT * 0.15;
            const itemObj = new Item(this, skill.skill, i, SKILL_X, SKILL_Y, SKILL_WIDTH, Math.floor(SKILL_WIDTH / 2));
            // itemObj.on('pointerdown', () => );
            this.input.setDraggable(itemObj);
            this.add.existing(itemObj);
        };
        cryp.skills.forEach(knownSkill);
        this.add.text(X + WIDTH * 0.175, Y, 'Skills', TEXT.HEADER);

        this.add.text(X + WIDTH * 0.175, Y + HEIGHT * 0.25, 'Specs', TEXT.HEADER);
       const knownSpec = (spec, i) => {
            const SKILL_X = X + WIDTH * 0.21 + WIDTH * 0.125 * i;
            const SKILL_Y = Y + HEIGHT * 0.4;
            const itemObj = new Item(this, spec, i, SKILL_X, SKILL_Y, SKILL_WIDTH, Math.floor(SKILL_WIDTH / 2));
            // itemObj.on('pointerdown', () => );
            this.input.setDraggable(itemObj);
            this.add.existing(itemObj);
        };
        cryp.specs.forEach(knownSpec);


        this.input.on('drag', (pointer, item, dragX, dragY) => {
            if (!(item instanceof Item)) return false;
            item.setPosition(dragX, dragY);
            const hitBox = itemCheckHitbox(this, pointer);
            if (hitBox) hitBox.itemSelect();
            return true;
        });

        this.input.on('dragend', (pointer, item) => {
            if (!(item instanceof Item)) return false;
            item.setPosition(item.origX, item.origY);
            const hitBox = itemCheckHitbox(this, pointer);
            if (hitBox) {
                hitBox.itemDeselect();
                // add socket function for unlearn here
                console.log(`delete: ${item.item}`);
            }
            return true;
        });
    }

    displaySkillText(x, y, description, pointer) {
        if (this.skillText) this.skillText.destroy();
        this.skillText = this.add.text(x, y, description, TEXT.HOVER).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;