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

const Phaser = require('phaser');
const Missions = require('./missions');

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

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

    create() {
        this.registry.events.on('changedata', this.updateData, this);
        this.registry.events.on('setdata', this.updateData, this);
        this.addGameList(this.registry.get('gameList'));
    }

    updateData(parent, key, data) {
        if (key === 'gameList') {
            this.addGameList(data);
        }
    }

    addGameList(gameList) {
        if (!gameList) return true;
        if (this.gameList) this.gameList.destroy(true);
        this.gameList = this.add.group();

        const ws = this.registry.get('ws');
        const cryps = this.registry.get('cryps');
        const { events } = this.game;

        const X = GAME_LIST.x();
        const WIDTH = Math.floor(GAME_LIST.width() / 2);
        const HEIGHT = GAME_LIST.height();
        const TEXT_MARGIN = 24;

        const spawn = this.add
            .rectangle(X, GAME_LIST.y(0), WIDTH, HEIGHT, 0x888888)
            .setInteractive()
            .setOrigin(0);

        this.gameList.add(this.add
            .text(spawn.getCenter().x, spawn.getCenter().y, 'spawn\ncryp', TEXT.HEADER)
            .setOrigin(0.5, 0.5));

        const pvp = this.add
            .rectangle(X + WIDTH, GAME_LIST.y(0), WIDTH, HEIGHT, 0x440000)
            .setInteractive()
            .setOrigin(0);

        this.gameList.add(this.add
            .text(pvp.getCenter().x, pvp.getCenter().y, 'new PVP\ngame', TEXT.HEADER)
            .setOrigin(0.5, 0.5));

        const pve = this.add
            .rectangle(X, GAME_LIST.y(1), WIDTH, HEIGHT, 0x004400)
            .setInteractive()
            .setOrigin(0);

        this.gameList.add(this.add
            .text(pve.getCenter().x, pve.getCenter().y, 'new PVE\ngame', TEXT.HEADER)
            .setOrigin(0.5, 0.5));

        const boss = this.add
            .rectangle(X + WIDTH * 2, GAME_LIST.y(0), WIDTH, HEIGHT, 0x222222)
            .setInteractive()
            .setOrigin(0);

        this.gameList.add(this.add
            .text(boss.getCenter().x, boss.getCenter().y, 'MISSIONS\n', TEXT.HEADER)
            .setOrigin(0.5, 0.5));


        const refresh = this.add
            .rectangle(X + WIDTH, GAME_LIST.y(1), WIDTH, HEIGHT, 0x000044)
            .setInteractive()
            .setOrigin(0);

        this.gameList.add(this.add
            .text(refresh.getCenter().x, refresh.getCenter().y, 'refresh\ngame list', TEXT.HEADER)
            .setOrigin(0.5, 0.5));


        const gameRow = (game, i) => {
            const GAME_X = GAME_LIST.x();
            const GAME_Y = GAME_LIST.rowY(i);

            const gameBox = this.add
                .rectangle(GAME_X, GAME_Y, WIDTH * 2, HEIGHT, 0x111111)
                .setInteractive()
                .setOrigin(0);

            const TITLE = game.teams[0].cryps.map(c => c.name).join(', ');

            this.gameList.add(this.add.text(GAME_X, GAME_Y, TITLE, TEXT.NORMAL));
            this.gameList.add(this.add.text(GAME_X, GAME_Y + TEXT_MARGIN, `${game.team_size}v${game.team_size}`, TEXT.NORMAL));

            gameBox.on('pointerdown', () => {
                const team = cryps.filter(c => c.active).map(c => c.id);
                ws.sendGameJoin(game.id, team);
            });
        };

        gameList.forEach(gameRow);

        spawn.on('pointerdown', () => {
            events.emit('CRYP_SPAWN');
        });

        pvp.on('pointerdown', () => {
            const team = cryps.filter(c => c.active).map(c => c.id);
            return ws.sendGamePvp(team);
        });

        pve.on('pointerdown', () => {
            const team = cryps.filter(c => c.active).map(c => c.id);
            if (team.length === 0) return false;
            return ws.sendGamePve(team, 'Normal');
        });

        boss.on('pointerdown', () => {
            const team = cryps.filter(c => c.active).map(c => c.id);
            if (team.length === 0) return false;
            this.scene.add('Missions', Missions);
            this.scene.run('Missions');
            this.cleanUp();
            // return ws.sendGamePve(team, 'Boss');
        });


        refresh.on('pointerdown', () => {
            return ws.sendGameJoinableList();
        });

        return true;
    }

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

}

module.exports = MenuGameList;