mnml/client/src/scenes/menu.cryps.list.js

const Phaser = require('phaser');

const { TEXT, COLOURS, POSITIONS: { CRYP_LIST } } = require('./constants');
const genAvatar = require('./avatar');

const ROW_HEIGHT = CRYP_LIST.height() * 0.2;
const ROW_WIDTH = CRYP_LIST.width();

const TEXT_MARGIN = 24;

const KEY_MAP = [
    'keydown_ONE',
    'keydown_TWO',
    'keydown_THREE',
];

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

    create() {
        // this.cameras.main.setViewport(CRYP_LIST.x(), CRYP_LIST.y(), CRYP_LIST.width(), CRYP_LIST.height());
        this.registry.events.on('changedata', this.updateData, this);
        this.registry.events.on('setdata', this.updateData, this);
        this.addCrypRows(this.registry.get('cryps'));
        this.addControls();
    }

    updateData(parent, key, data) {
        if (key === 'cryps') {
            KEY_MAP.forEach(k => this.input.keyboard.removeListener(k));
            this.addCrypRows(data);
        }
    }

    addCrypRows(cryps) {
        if (!cryps) return true;
        if (this.crypRows) this.crypRows.destroy(true);
        this.crypRows = this.add.group();
        // We only display 3 cryps others can be viewed in cryp list (soon TM)
        const crypDispLength = cryps.length < 3 ? cryps.length : 3;
        const crypStat = (stat, i, crypInfo) => {
            this.crypRows.add(this.add
                .text(crypInfo.getCenter().x, crypInfo.y + TEXT_MARGIN * (2 + i), `${stat.stat}: ${stat.base}`, TEXT.NORMAL)
                .setOrigin(0.5, 0.5));
        };
        for (let i = 0; i < crypDispLength; i += 1) {
            const cryp = cryps[i];
            const BOX_WIDTH = Math.floor(ROW_WIDTH / 5);
            const ROW_X = i * BOX_WIDTH * 2;
            const ROW_Y = CRYP_LIST.y();


            const ACTIVE_FILL = cryp.active
                ? 1
                : 0.2;

            const FILL = Object.values(COLOURS)[i];
            // Selection of cryps
            const selectFn = () => {
                this.game.events.emit('CRYP_ACTIVE', cryp);
                this.registry.set('crypStats', cryp);
            };

            if (KEY_MAP[i]) {
                this.input.keyboard.on(KEY_MAP[i], () => this.game.events.emit('CRYP_ACTIVE', cryp), this);
            }

/*            const crypSelect = this.add
                .rectangle(ROW_X, ROW_Y, BOX_WIDTH, ROW_HEIGHT, FILL, 1)
                .setInteractive()
                .setOrigin(0)
                .on('pointerdown', selectFn);
            this.crypRows.add(crypSelect);
            this.crypRows.add(this.add
                .text(crypSelect.getCenter().x, crypSelect.y + TEXT_MARGIN, i + 1, TEXT.HEADER)
                .setOrigin(0.5, 0.5));*/


            // Cryp avatar and interaction box
            const crypInteract = this.add
                .rectangle(ROW_X, ROW_Y + ROW_HEIGHT * 2.5, BOX_WIDTH * 2, ROW_HEIGHT, FILL, ACTIVE_FILL)
                .setInteractive()
                .setOrigin(0)
                .on('pointerdown', selectFn);

            crypInteract.itemSelect = () => {
                crypInteract.setFillStyle(COLOURS.SELECT);
            };
            crypInteract.itemDeselect = () => {
                crypInteract.setFillStyle(FILL, ACTIVE_FILL);
            };
            crypInteract.cryp = cryp;
            this.crypRows.add(this.add.image(
                crypInteract.getCenter().x,
                crypInteract.getCenter().y,
                'aztec',
                genAvatar(cryp.name)
            ));
            this.crypRows.add(crypInteract);

            // Cryp information box (names + skills)
            const crypInfo = this.add
                .rectangle(ROW_X, ROW_Y, BOX_WIDTH * 2, ROW_HEIGHT * 2.5, FILL, ACTIVE_FILL)
                .setOrigin(0)
                .setInteractive()
                .on('pointerdown', selectFn);

            this.crypRows.add(crypInfo);
            this.crypRows.add(this.add
                .text(crypInfo.getCenter().x, crypInfo.y + TEXT_MARGIN, cryp.name, TEXT.HEADER)
                .setOrigin(0.5, 0.5));
            const CRYP_STATS = [
                cryp.stamina,
                cryp.red_shield,
                cryp.blue_shield,
                cryp.red_damage,
                cryp.blue_damage,
                cryp.speed,
            ];
            CRYP_STATS.forEach((stat, j) => crypStat(stat, j, crypInfo));
        }
        return true;
    }

    addControls() {
        // Add Spawn Cryp Option
        const spawn = this.add
            .rectangle(ROW_WIDTH * 0.05, ROW_HEIGHT * 4, ROW_WIDTH * 0.2, ROW_HEIGHT * 0.5, 0x888888)
            .setInteractive()
            .setOrigin(0)
            .on('pointerdown', () => {
                this.game.events.emit('CRYP_SPAWN');
            });
        this.add
            .text(spawn.getCenter().x, spawn.getCenter().y, '+', TEXT.HEADER)
            .setOrigin(0.5, 0.5);
        // Dialog to view all cryps
        // const crypList = this.add
        //     .rectangle(ROW_WIDTH * 0.55, ROW_HEIGHT * 3.5, ROW_WIDTH * 0.4, ROW_HEIGHT, 0xff9215)
        //     .setInteractive()
        //     .setOrigin(0)
        //     .on('pointerdown', () => {
        //         // this.game.events.emit('CRYP_LIST');
        //         // Placeholder will give a full list of all cryps in the center
        //     });
        // this.add
        //     .text(crypList.getCenter().x, crypList.getCenter().y, 'Cryp List (soon)', TEXT.NORMAL)
        //     .setOrigin(0.5, 0.5);
    }

    cleanUp() {
        KEY_MAP.forEach(k => this.input.keyboard.removeListener(k));
        this.registry.events.off('changedata', this.updateData, this);
        this.registry.events.off('setdata', this.updateData, this);
        this.scene.remove();
    }
}

module.exports = MenuCrypList;