mnml/client/src/scenes/menu.navigation.js

const Phaser = require('phaser');

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

const X = NAVIGATION.x();
const Y = NAVIGATION.y();
const WIDTH = NAVIGATION.width();
const HEIGHT = NAVIGATION.height();

const BTN_WIDTH = Math.floor(WIDTH / 4);
const BTN_HEIGHT = Math.floor(HEIGHT / 2);

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

    create() {
        const ws = this.registry.get('ws');
        this.cameras.main.setViewport(X, Y, WIDTH, HEIGHT);

        const play = this.add
            .rectangle(BTN_WIDTH * 3, BTN_HEIGHT, BTN_WIDTH, BTN_HEIGHT, 0x222222)
            .setInteractive()
            .setOrigin(0);
        const playText = this.add
            .text(play.getCenter().x, play.getCenter().y, 'Play Cryps', TEXT.HEADER)
            .setOrigin(0.5, 0.5);
        play.on('pointerdown', () => {
            this.selectMode(ws);
            play.destroy();
            playText.destroy();
        });
    }

    selectMode(ws) {
        this.buttons = this.add.group();
        const pvp = this.add
            .rectangle(BTN_WIDTH * 2, 0, BTN_WIDTH, BTN_HEIGHT, 0x440000)
            .setInteractive()
            .setOrigin(0);
        const pvpText = this.add
            .text(pvp.getCenter().x, pvp.getCenter().y, 'Play PVP', TEXT.HEADER)
            .setOrigin(0.5, 0.5);

        const pve = this.add
            .rectangle(BTN_WIDTH * 2, BTN_HEIGHT, BTN_WIDTH, BTN_HEIGHT, 0x004400)
            .setInteractive()
            .setOrigin(0);

        const pveText = this.add
            .text(pve.getCenter().x, pve.getCenter().y, 'Play PVE', TEXT.HEADER)
            .setOrigin(0.5, 0.5);

        pve.on('pointerdown', () => {
            this.addPveModes(ws);
            pve.destroy();
            pveText.destroy();
            pvp.destroy();
            pvpText.destroy();
        });

        pvp.on('pointerdown', () => {
            this.addPvpModes(ws);
            pve.destroy();
            pveText.destroy();
            pvp.destroy();
            pvpText.destroy();
        });

        const cancel = this.add
            .rectangle(BTN_WIDTH * 3, 0, BTN_WIDTH, BTN_HEIGHT, 0x222222)
            .setInteractive()
            .setOrigin(0)
            .on('pointerdown', () => this.scene.restart());

        this.add
            .text(cancel.getCenter().x, cancel.getCenter().y, 'Cancel', TEXT.HEADER)
            .setOrigin(0.5, 0.5);
    }

    addPvpModes(ws) {
        const hostPvp = this.add
            .rectangle(0, 0, BTN_WIDTH, BTN_HEIGHT, 0x440000)
            .setInteractive()
            .setOrigin(0)
            .on('pointerdown', () => {
                const team = this.registry.get('cryps').filter(c => c.active).map(c => c.id);
                if (team.length === 0) return false;
                ws.sendGamePvp(team);
                return this.scene.restart();
            });
        this.add
            .text(hostPvp.getCenter().x, hostPvp.getCenter().y, 'Host PVP game', TEXT.HEADER)
            .setOrigin(0.5, 0.5);

        const refresh = this.add
            .rectangle(BTN_WIDTH, 0, BTN_WIDTH, BTN_HEIGHT, 0x000044)
            .setInteractive()
            .setOrigin(0)
            .on('pointerdown', () => {
                ws.sendGameJoinableList();
                return this.scene.restart();
            });

        this.add
            .text(refresh.getCenter().x, refresh.getCenter().y, 'PVP games list', TEXT.HEADER)
            .setOrigin(0.5, 0.5);
    }

    addPveModes(ws) {
        const quickPve = this.add
            .rectangle(0, BTN_HEIGHT, BTN_WIDTH, BTN_HEIGHT, 0x004400)
            .setInteractive()
            .setOrigin(0)
            .on('pointerdown', () => {
                const team = this.registry.get('cryps').filter(c => c.active).map(c => c.id);
                if (team.length === 0) return false;
                ws.sendGamePve(team, 'Normal');
                return this.scene.restart();
            });
        this.add
            .text(quickPve.getCenter().x, quickPve.getCenter().y, 'Quick battle', TEXT.HEADER)
            .setOrigin(0.5, 0.5);

        const zones = this.add
            .rectangle(BTN_WIDTH, BTN_HEIGHT, BTN_WIDTH, BTN_HEIGHT, 0x222222)
            .setInteractive()
            .setOrigin(0)
            .on('pointerdown', () => {
                if (this.scene.get('Zones')) return false;
                ws.sendAccountZone();
                return this.scene.restart();
            });

        this.add
            .text(zones.getCenter().x, zones.getCenter().y, 'Zone Mode', TEXT.HEADER)
            .setOrigin(0.5, 0.5);
    }

    cleanUp() {
        this.scene.remove();
    }
}

module.exports = MenuNavigation;