mnml/phaser-client/src/scenes/home.cryps.js

const Phaser = require('phaser');
const { remove } = require('lodash');

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

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

const menuY = CRYP_LIST.height() * 0.8;

const KEY_MAP = [
    'keydown-ONE',
    'keydown-TWO',
    'keydown-THREE',
];

const NULL_UUID = '00000000-0000-0000-0000-000000000000';

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


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

    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);
        const cryps = this.registry.get('crypList');
        const lineGroup = this.add.existing(new LineGroup(this));

        if (!cryps) return true;
        const ws = this.registry.get('ws');
        this.activeCryps = [];
        // We only display 3 cryps others can be viewed in cryp list (soon TM)
        for (let i = 0; i < cryps.length; i += 1) {
            const cryp = cryps[i];
            const BOX_WIDTH = Math.floor(ROW_WIDTH / 5);
            const ROW_X = BOX_WIDTH * 2 * (i % 3);
            const ROW_Y = CRYP_LIST.y() + (Math.floor(i / 3)) * ROW_HEIGHT * 1.5;
            const ACTIVE_FILL = 0.2;

            const FILL = Object.values(COLOURS)[i];
            // Selection of cryps

            // Cryp avatar and interaction box
            const cReady = this.add
                .rectangle(ROW_X, ROW_Y + ROW_HEIGHT * 0.2, BOX_WIDTH * 2, ROW_HEIGHT, FILL)
                .setInteractive()
                .setOrigin(0);
            cReady.setAlpha(0.2);
            cReady.on('pointerdown', () => {
                lineGroup.clear(true, true);
                if (this.activeCryps.includes(cReady)) {
                    remove(this.activeCryps, n => n === cReady);
                    cReady.setAlpha(0.2);
                } else {
                    this.activeCryps.push(cReady);
                    cReady.setAlpha(0.75);
                    lineGroup.add(this.add.existing(
                        new LineBox(this, cReady.x, cReady.y, cReady.width, cReady.height, cReady.fillColor, 3)
                    ));
                }
            });

            cReady.itemSelect = () => {
                cReady.setFillStyle(COLOURS.SELECT);
            };
            cReady.itemDeselect = () => {
                cReady.setFillStyle(FILL, ACTIVE_FILL);
            };

            cReady.cryp = cryp;
            this.add.image(
                cReady.getCenter().x,
                cReady.getCenter().y,
                'aztec',
                genAvatar(cryp.name)
            );
            this.add.text(ROW_X + BOX_WIDTH, ROW_Y, cryp.name, TEXT.HEADER)
                .setOrigin(0.5, 0.5);
        }

        // Add Spawn Cryp Option
        const spawn = this.add
            .rectangle(ROW_WIDTH * 0.05, menuY, 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);

        const joinNormal = this.add
            .rectangle(ROW_WIDTH * 0.3, menuY, ROW_WIDTH * 0.4, ROW_HEIGHT * 0.5, 0x888888)
            .setInteractive()
            .setOrigin(0)
            .on('pointerdown', () => {
                const playerCryps = [];
                this.activeCryps.forEach(obj => playerCryps.push(obj.cryp.id));
                ws.sendPlayerCrypsSet(NULL_UUID, playerCryps);
            });
        this.add
            .text(joinNormal.getCenter().x, joinNormal.getCenter().y, 'Join Normal', TEXT.HEADER)
            .setOrigin(0.5, 0.5);

        const joinInstance = this.add
            .rectangle(ROW_WIDTH * 0.8, menuY, ROW_WIDTH * 0.4, ROW_HEIGHT * 0.5, 0x888888)
            .setInteractive()
            .setOrigin(0)
            .on('pointerdown', () => {
                const playerCryps = [];
                this.activeCryps.forEach(obj => playerCryps.push(obj.cryp.id));
                ws.sendInstanceJoin(playerCryps);
            });
        this.add
            .text(joinInstance.getCenter().x, joinInstance.getCenter().y, 'New Instance', TEXT.HEADER)
            .setOrigin(0.5, 0.5);

        return this;
    }

    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 = HomeCrypList;