new year, new menu

client/src/scenes/background.js

@@ -134,7 +134,7 @@ const CustomPipeline = new Phaser.Class({
         Phaser.Renderer.WebGL.Pipelines.TextureTintPipeline.call(this, {
             game,
             renderer: game.renderer,
-            fragShader: STARS,
+            fragShader: PLASMA,
         });
     },
 });

client/src/scenes/combat.js

@@ -1,5 +1,4 @@
 const Phaser = require('phaser');
-const fs = require('fs');
 const { throttle } = require('lodash');
 
 const CombatLog = require('./combat.log');
@@ -9,7 +8,6 @@ const CombatHitBox = require('./combat.hitbox');
 
 const renderResolutions = require('./combat.render.resolutions');
 
-const aztecAtlas = require('../../assets/aztec.atlas.json');
 
 class Combat extends Phaser.Scene {
     constructor() {
@@ -17,20 +15,12 @@ class Combat extends Phaser.Scene {
     }
 
     preload() {
-        // Textures already loaded can do proper check in future when theres more textures
+        this.load.image('proj', 'https://labs.phaser.io/assets/sprites/bullet.png');
-        if (!(this.textures.getTextureKeys().length > 2)) {
+        this.load.image('blue', 'https://labs.phaser.io/assets/particles/blue.png');
-            const aztecImg = new Image();
+        this.load.image('green', 'https://labs.phaser.io/assets/particles/green.png');
-            aztecImg.src = `data:image/png;base64,${new Buffer.from(fs.readFileSync('./assets/aztec.clean.png')).toString('base64')}`;
+        this.load.image('red', 'https://labs.phaser.io/assets/particles/red.png');
-            aztecImg.onload = () => {
+        this.load.image('white', 'https://labs.phaser.io/assets/particles/white.png');
-                this.textures.addAtlas('aztec', aztecImg, aztecAtlas);
+        this.load.image('yellow', 'https://labs.phaser.io/assets/particles/yellow.png');
-            };
-            this.load.image('proj', 'https://labs.phaser.io/assets/sprites/bullet.png');
-            this.load.image('blue', 'https://labs.phaser.io/assets/particles/blue.png');
-            this.load.image('green', 'https://labs.phaser.io/assets/particles/green.png');
-            this.load.image('red', 'https://labs.phaser.io/assets/particles/red.png');
-            this.load.image('white', 'https://labs.phaser.io/assets/particles/white.png');
-            this.load.image('yellow', 'https://labs.phaser.io/assets/particles/yellow.png');
-        }
     }
 
     create() {

client/src/scenes/constants.js

@@ -4,36 +4,40 @@
 const CANVAS_WIDTH = 1600;
 const CANVAS_HEIGHT = 1000;
 
-const menuWidth = () => CANVAS_WIDTH;
+const headerWidth = () => CANVAS_WIDTH;
-const menuHeight = () => 25;
+const headerHeight = () => Math.floor(CANVAS_HEIGHT * 0.05);
+
+
+const menuCrypListWidth = () => Math.floor(CANVAS_WIDTH * 0.3);
+const menuCrypListHeight = () => Math.floor(CANVAS_HEIGHT * 0.5);
+const menuCrypListX = () => 0;
+const menuCrypListY = () => headerHeight();
+
+const itemListWidth = () => Math.floor(CANVAS_WIDTH * 0.5);
+const itemListHeight = () => Math.floor(CANVAS_HEIGHT * 0.5);
+const itemListX = () => 0;
+const itemListY = () => Math.floor(CANVAS_HEIGHT * 0.5);
+
+const menuNavigationWidth = () => Math.floor(CANVAS_WIDTH * 0.5);
+const menuNavigationHeight = () => Math.floor(CANVAS_HEIGHT * 0.3);
+const menuNavigationX = () => Math.floor(CANVAS_WIDTH * 0.5);
+const menuNavigationY = () => Math.floor(CANVAS_HEIGHT * 0.7);
+
+const menuMainWidth = () => Math.floor(CANVAS_WIDTH * 0.7);
+const menuMainHeight = () => Math.floor(CANVAS_HEIGHT * 0.5);
+const menuMainX = () => Math.floor(CANVAS_WIDTH * 0.3);
+const menuMainY = () => headerHeight();
+
 
 const combatWidth = () => CANVAS_WIDTH;
-const combatHeight = () => CANVAS_HEIGHT - menuHeight();
+const combatHeight = () => CANVAS_HEIGHT - headerHeight();
-const combatY = () => menuHeight();
+const combatY = () => headerHeight();
 const combatX = () => 0;
 
-const crypListWidth = () => Math.floor(CANVAS_WIDTH * 0.2);
+const statsWidth = () => Math.floor(CANVAS_WIDTH - menuCrypListWidth());
-const crypListHeight = () => CANVAS_HEIGHT - menuHeight();
+const statsHeight = () => CANVAS_HEIGHT - headerHeight();
-const cryplistRowHeight = cryps => crypListHeight() / cryps.length;
+const statsY = () => headerHeight();
-const crypListY = () => menuHeight();
+const statsX = () => menuCrypListWidth();
-const crypListX = () => 0;
-
-const gameListWidth = () => Math.floor(CANVAS_WIDTH * 0.2);
-const gameListHeight = () => Math.floor(CANVAS_HEIGHT / 10);
-const gameListX = () => crypListWidth() + itemListWidth();
-const gameListY = i => menuHeight() + (gameListHeight() * i);
-const gameListRowY = i => menuHeight() + (gameListHeight() * (i + 2));
-
-const itemListWidth = () => Math.floor(CANVAS_WIDTH * 0.2);
-const itemListHeight = () => Math.floor(CANVAS_HEIGHT / 10);
-const itemListX = () => crypListWidth() * 1.5;
-const itemListY = i => menuHeight() + (itemListHeight() * i);
-const itemListRowY = i => menuHeight() + ((itemListHeight() * 1.5) * i);
-
-const statsWidth = () => Math.floor(CANVAS_WIDTH - crypListWidth() - gameListWidth());
-const statsHeight = () => CANVAS_HEIGHT - menuHeight();
-const statsY = () => menuHeight();
-const statsX = () => crypListWidth() + gameListWidth();
 const statsKnownX = () => Math.floor(statsX() + statsWidth() / 4);
 const statsLearnableX = () => Math.floor(statsX() + statsWidth() / 2);
 const statsTextMargin = () => 24;
@@ -41,7 +45,7 @@ const statsLearnableMargin = () => 12;
 
 const logWidth = () => combatWidth();
 const logHeight = () => combatHeight() * 0.3;
-const logY = () => menuHeight() + (combatHeight() * 0.7);
+const logY = () => headerHeight() + (combatHeight() * 0.7);
 const logX = () => combatWidth() * 0.6;
 
 
@@ -53,18 +57,38 @@ module.exports = {
     },
 
     POSITIONS: {
-        MENU: {
+        HEADER: {
-            width: menuWidth,
+            width: headerWidth,
-            height: menuHeight,
+            height: headerHeight,
         },
 
         CRYP_LIST: {
-            x: crypListX,
+            x: menuCrypListX,
-            y: crypListY,
+            y: menuCrypListY,
-            width: crypListWidth,
+            width: menuCrypListWidth,
-            height: crypListHeight,
+            height: menuCrypListHeight,
-            rowHeight: cryplistRowHeight,
+        },
-            rowWidth: crypListWidth,
+
+        MENU_MAIN: {
+            x: menuMainX,
+            y: menuMainY,
+            width: menuMainWidth,
+            height: menuMainHeight,
+
+        },
+
+        NAVIGATION: {
+            x: menuNavigationX,
+            y: menuNavigationY,
+            width: menuNavigationWidth,
+            height: menuNavigationHeight,
+        },
+
+        ITEM_LIST: {
+            x: itemListX,
+            y: itemListY,
+            width: itemListWidth,
+            height: itemListHeight,
         },
 
         STATS: {
@@ -91,22 +115,6 @@ module.exports = {
                 height: logHeight,
             },
         },
-
-        GAME_LIST: {
-            x: gameListX,
-            y: gameListY,
-            width: gameListWidth,
-            height: gameListHeight,
-            rowY: gameListRowY,
-        },
-
-        ITEM_LIST: {
-            x: itemListX,
-            y: itemListY,
-            width: itemListWidth,
-            height: itemListHeight,
-            rowY: itemListRowY,
-        },
     },
 
     COLOURS: {

client/src/scenes/cryps.js

@@ -5,6 +5,9 @@ const Menu = require('./menu');
 const Combat = require('./combat');
 const Zones = require('./zones');
 const Background = require('./background');
+const GameList = require('./game.list');
+const StatSheet = require('./statsheet');
+
 
 function renderCryps() {
     const config = {
@@ -24,11 +27,32 @@ function renderCryps() {
         scene: [
             Background,
             Header,
-        ], };
+        ],
+    };
 
     const game = new Phaser.Game(config);
 
+    function newMainScene(key, scene, data) {
+        let addScene = true;
+        const ACTIVE_MAIN_SCENES = ['GameList', 'Zones', 'StatSheet'];
+        ACTIVE_MAIN_SCENES.forEach((sKey) => {
+            if (game.scene.keys[sKey]) {
+                if (key === sKey) {
+                    game.scene.keys[sKey].scene.restart(data);
+                    addScene = false;
+                } else {
+                    game.scene.keys[sKey].cleanUp();
+                }
+            }
+        });
+        if (addScene) game.scene.add(key, scene, true, data);
+        return true;
+    }
+
     function changeData(parent, key, data) {
+        // Don't load other scenes if you're not logged in
+        if (!game.registry.get('account')) return false;
+
         if (key === 'menu') {
             if (data) return game.scene.add('Menu', Menu, true);
         }
@@ -39,7 +63,15 @@ function renderCryps() {
         }
 
         if (key === 'zone') {
-            return game.scene.add('Zones', Zones, true, data);
+            newMainScene('Zones', Zones, data);
+        }
+
+        if (key === 'gameList') {
+            newMainScene('GameList', GameList, data);
+        }
+
+        if (key === 'crypStats') {
+            newMainScene('StatSheet', StatSheet, data);
         }
 
         return true;

client/src/scenes/game.list.js

@@ -0,0 +1,53 @@
+const Phaser = require('phaser');
+const { TEXT, POSITIONS: { MENU_MAIN } } = require('./constants');
+
+const X = MENU_MAIN.x();
+const Y = MENU_MAIN.y();
+const WIDTH = MENU_MAIN.width();
+const HEIGHT = MENU_MAIN.height();
+const ROW_SIZE = 50;
+const LOBBY_WIDTH = WIDTH / 2;
+
+class GameList extends Phaser.Scene {
+    constructor() {
+        super({ key: 'GameList' });
+    }
+
+    create(gameList) {
+        this.cameras.main.setViewport(X, Y, WIDTH, HEIGHT);
+        const ws = this.registry.get('ws');
+
+        this.add.text(WIDTH / 3, 0, 'PVP open games', TEXT.HEADER);
+        const gameRow = (game, i) => {
+            const GAME_X = WIDTH / 6;
+            const GAME_Y = 1.3 * ROW_SIZE * (i + 1);
+
+            const gameBox = this.add
+                .rectangle(GAME_X, GAME_Y, LOBBY_WIDTH, ROW_SIZE, 0x222222)
+                .setInteractive()
+                .setOrigin(0);
+
+            const TITLE = `${game.teams[0].cryps.map(c => c.name).join(', ')} - ${game.team_size}v${game.team_size}`;
+
+            this.add
+                .text(gameBox.getCenter().x, gameBox.getCenter().y, TITLE, TEXT.NORMAL)
+                .setOrigin(0.5, 0.5);
+
+            gameBox.on('pointerdown', () => {
+                const cryps = this.registry.get('cryps');
+                const team = cryps.filter(c => c.active).map(c => c.id);
+                ws.sendGameJoin(game.id, team);
+            });
+        };
+
+        gameList.forEach(gameRow);
+
+        return true;
+    }
+
+    cleanUp() {
+        this.scene.remove();
+    }
+}
+
+module.exports = GameList;

client/src/scenes/header.js

@@ -1,12 +1,24 @@
 const Phaser = require('phaser');
 
 const { TEXT } = require('./constants');
+const fs = require('fs');
+
+const aztecAtlas = require('../../assets/aztec.atlas.json');
+
 
 class Header extends Phaser.Scene {
     constructor() {
         super({ key: 'Header', active: true });
     }
 
+    preload() {
+        const aztecImg = new Image();
+        aztecImg.src = `data:image/png;base64,${new Buffer.from(fs.readFileSync('./assets/aztec.clean.png')).toString('base64')}`;
+        aztecImg.onload = () => {
+            this.textures.addAtlas('aztec', aztecImg, aztecAtlas);
+        };
+    }
+
     create() {
         this.add.text(0, 0, 'cryps.gg', TEXT.HEADER);
     }

client/src/scenes/item.list.js

@@ -6,6 +6,13 @@ const {
     POSITIONS: { ITEM_LIST },
 } = require('./constants');
 
+const X = ITEM_LIST.x();
+const Y = ITEM_LIST.y();
+const WIDTH = ITEM_LIST.width();
+const HEIGHT = ITEM_LIST.height();
+const ITEM_WIDTH = WIDTH * 0.3;
+const ITEM_HEIGHT = HEIGHT * 0.1;
+
 const itemCheckHitbox = (scenePlugin, pointer) => {
     const { list } = scenePlugin.get('MenuCrypList').children;
     const hitboxes = list.filter(c => c.cryp);
@@ -35,11 +42,8 @@ class Item extends Phaser.GameObjects.Container {
         this.origX = x;
         this.origY = y;
 
-        const WIDTH = ITEM_LIST.width();
-        const HEIGHT = ITEM_LIST.height();
-
         this.box = scene.add
-            .rectangle(0, 0, WIDTH, HEIGHT, 0x111111);
+            .rectangle(0, 0, ITEM_WIDTH, ITEM_HEIGHT, 0x111111);
 
         this.text = scene.add
             .text(0, 0, item.action, TEXT.HEADER)
@@ -48,7 +52,7 @@ class Item extends Phaser.GameObjects.Container {
         this.add(this.box);
         this.add(this.text);
 
-        this.setSize(WIDTH, HEIGHT);
+        this.setSize(ITEM_WIDTH, ITEM_HEIGHT);
         this.setInteractive();
     }
 
@@ -94,14 +98,16 @@ class ItemList extends Phaser.Scene {
         const itemList = this.registry.get('itemList');
         const ws = this.registry.get('ws');
 
+        this.cameras.main.setViewport(X, Y, WIDTH, HEIGHT);
+
         this.registry.events.on('changedata', this.updateData, this);
         this.registry.events.on('setdata', this.updateData, this);
 
         if (!itemList) return false;
 
         itemList.forEach((item, i) => {
-            const ITEM_X = ITEM_LIST.x();
+            const ITEM_X = ITEM_WIDTH;
-            const ITEM_Y = ITEM_LIST.rowY(i);
+            const ITEM_Y = ITEM_HEIGHT * 1.2 * (i + 1);
 
             const itemBox = new Item(this, item, ITEM_X, ITEM_Y);
             this.input.setDraggable(itemBox);

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

@@ -1,6 +1,9 @@
 const Phaser = require('phaser');
 
-const { TEXT, COLOURS, POSITIONS: { CRYP_LIST, MENU } } = require('./constants');
+const { TEXT, COLOURS, POSITIONS: { CRYP_LIST } } = require('./constants');
+
+const ROW_HEIGHT = CRYP_LIST.height() * 0.2;
+const ROW_WIDTH = CRYP_LIST.width();
 
 const TEXT_MARGIN = 24;
 
@@ -8,8 +11,6 @@ const KEY_MAP = [
     'keydown_ONE',
     'keydown_TWO',
     'keydown_THREE',
-    'keydown_FOUR',
-    'keydown_FIVE',
 ];
 
 class MenuCrypList extends Phaser.Scene {
@@ -18,9 +19,11 @@ class MenuCrypList extends Phaser.Scene {
     }
 
     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) {
@@ -34,34 +37,20 @@ class MenuCrypList extends Phaser.Scene {
         if (!cryps) return true;
         if (this.crypRows) this.crypRows.destroy(true);
         this.crypRows = this.add.group();
-        const ROW_HEIGHT = CRYP_LIST.rowHeight(cryps);
+        // We only display 3 cryps others can be viewed in cryp list (soon TM)
-        const ROW_WIDTH = CRYP_LIST.rowWidth();
+        for (let i = 0; i < 3; i += 1) {
+            const cryp = cryps[i];
+            const ROW_X = 0;
+            const ROW_Y = (i * ROW_HEIGHT);
 
-        cryps.forEach((cryp, i) => {
+            const BOX_WIDTH = Math.floor(ROW_WIDTH / 5);
-            const ROW_X = CRYP_LIST.x();
-            const ROW_Y = (i * CRYP_LIST.rowHeight(cryps)) + MENU.height();
 
             const ACTIVE_FILL = cryp.active
                 ? 1
-                : 0;
+                : 0.2;
 
             const FILL = Object.values(COLOURS)[i];
-
+            // Selection of cryps
-            const row = this.add.rectangle(ROW_X, ROW_Y, ROW_WIDTH, ROW_HEIGHT, FILL, ACTIVE_FILL)
-                .setInteractive()
-                .setOrigin(0)
-                .on('pointerdown', () => {
-                    this.scene.get('Menu').displaySkills(cryp);
-                });
-
-            row.itemSelect = () => {
-                row.setFillStyle(COLOURS.SELECT);
-            };
-
-            row.itemDeselect = () => {
-                row.setFillStyle(FILL, ACTIVE_FILL);
-            };
-
             const selectFn = () => {
                 this.game.events.emit('CRYP_ACTIVE', cryp);
             };
@@ -70,41 +59,81 @@ class MenuCrypList extends Phaser.Scene {
                 this.input.keyboard.on(KEY_MAP[i], selectFn, this);
             }
 
-            row.cryp = cryp;
+            const crypSelect = this.add
-            this.crypRows.add(row);
+                .rectangle(ROW_X, ROW_Y, BOX_WIDTH, ROW_HEIGHT, FILL, 1)
-
-            const crypStat = (stat, j) => {
-                const STAT_X = ROW_X;
-                const STAT_Y = (j * TEXT_MARGIN) + ROW_Y + TEXT_MARGIN;
-
-                this.crypRows.add(this.add.text(STAT_X, STAT_Y, `${stat.stat}: ${stat.base}`, TEXT.NORMAL));
-            };
-
-            const CRYP_STATS = [cryp.stamina, cryp.phys_dmg, cryp.spell_dmg];
-            CRYP_STATS.forEach(crypStat);
-
-            const crypSkill = (skill, j) => {
-                const SKILL_X = ROW_X;
-                const SKILL_Y = ((j + 3) * TEXT_MARGIN) + ROW_Y + TEXT_MARGIN;
-
-                this.crypRows.add(this.add.text(SKILL_X, SKILL_Y, `${skill.skill}`, TEXT.NORMAL));
-            };
-
-            cryp.skills.forEach(crypSkill);
-
-            const selectBtn = this.add
-                .rectangle(0, ROW_Y + (ROW_HEIGHT * 0.9), ROW_WIDTH, ROW_HEIGHT / 10, FILL, 0.5)
                 .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 + BOX_WIDTH, ROW_Y, BOX_WIDTH * 2, ROW_HEIGHT, FILL, ACTIVE_FILL)
+                .setInteractive()
+                .setOrigin(0)
+                .on('pointerdown', () => {
+                    this.registry.set('crypStats', cryp);
+                });
+            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',
+                `sprite${Math.floor(Math.random() * 19) + 1}`
+            ));
+            this.crypRows.add(crypInteract);
+
+            // Cryp information box (names + skills)
+            const crypInfo = this.add
+                .rectangle(ROW_X + BOX_WIDTH * 3, ROW_Y, BOX_WIDTH * 2, ROW_HEIGHT, FILL, ACTIVE_FILL)
                 .setOrigin(0);
-
+            this.crypRows.add(crypInfo);
-            selectBtn.on('pointerdown', selectFn);
+            this.crypRows.add(this.add
-
+                .text(crypInfo.getCenter().x, crypInfo.y + TEXT_MARGIN, cryp.name, TEXT.HEADER)
-            this.crypRows.add(this.add.text(ROW_WIDTH - 20, ROW_Y, i + 1, TEXT.HEADER));
+                .setOrigin(0.5, 0.5));
-            this.crypRows.add(this.add.text(ROW_X, ROW_Y + (TEXT_MARGIN * 0), cryp.name, TEXT.HEADER));
+            this.crypRows.add(this.add
-        });
+                .text(crypInfo.getCenter().x, crypInfo.y + TEXT_MARGIN * 2, `Level: ${cryp.lvl}`, TEXT.NORMAL)
+                .setOrigin(0.5, 0.5));
+        }
         return true;
     }
 
+    addControls() {
+        // Add Spawn Cryp Option
+        const spawn = this.add
+            .rectangle(ROW_WIDTH * 0.05, ROW_HEIGHT * 3.5, ROW_WIDTH * 0.4, ROW_HEIGHT, 0x888888)
+            .setInteractive()
+            .setOrigin(0)
+            .on('pointerdown', () => {
+                this.game.events.emit('CRYP_SPAWN');
+            });
+        this.add
+            .text(spawn.getCenter().x, spawn.getCenter().y, 'Spawn Cryp', 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);

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

@@ -1,145 +0,0 @@
-const Phaser = require('phaser');
-
-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') {
-            console.log('got game list');
-            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 zones = this.add
-            .rectangle(X + WIDTH * 2, GAME_LIST.y(0), WIDTH, HEIGHT, 0x222222)
-            .setInteractive()
-            .setOrigin(0);
-
-        this.gameList.add(this.add
-            .text(zones.getCenter().x, zones.getCenter().y, 'Zones\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');
-        });
-
-        zones.on('pointerdown', () => {
-            if (this.scene.get('Zones')) return false;
-            return ws.sendAccountZone();
-        });
-
-
-        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;

client/src/scenes/menu.js

@@ -1,10 +1,8 @@
 const Phaser = require('phaser');
 
 const MenuCrypList = require('./menu.cryps.list');
-const MenuGameList = require('./menu.game.list');
+const MenuNavigation = require('./menu.navigation');
-
 const ItemList = require('./item.list');
-const StatSheet = require('./statsheet');
 
 class Menu extends Phaser.Scene {
     constructor() {
@@ -16,7 +14,7 @@ class Menu extends Phaser.Scene {
         this.registry.events.on('setdata', this.updateData, this);
 
         this.scene.manager.add('MenuCrypList', MenuCrypList, true);
-        this.scene.manager.add('MenuGameList', MenuGameList, true);
+        this.scene.manager.add('MenuNavigation', MenuNavigation, true);
         this.scene.manager.add('ItemList', ItemList, true);
 
         return true;
@@ -25,26 +23,16 @@ class Menu extends Phaser.Scene {
     updateData(parent, key, data) {
         if (key === 'game') {
             if (data) return this.cleanUp();
-            return this.scene.restart();
         }
 
         return true;
     }
 
-    // Scene switch to statsheet called by MenuCrypRows scene
-    displaySkills(cryp) {
-        if (cryp) {
-            this.scene.manager.add('StatSheet', StatSheet, true, cryp);
-            this.cleanUp();
-        }
-        return true;
-    }
-
     cleanUp() {
         this.registry.events.off('changedata', this.updateData, this);
         this.registry.events.off('setdata', this.updateData, this);
 
-        const ACTIVE_SCENES = ['MenuCrypList', 'MenuGameList', 'ItemList', 'Zones'];
+        const ACTIVE_SCENES = ['MenuCrypList', 'MenuNavigation', 'GameList', 'StatSheet', 'ItemList', 'Zones'];
         ACTIVE_SCENES.forEach((sKey) => {
             if (this.scene.get(sKey)) this.scene.get(sKey).cleanUp();
         });

client/src/scenes/menu.navigation.js

@@ -0,0 +1,146 @@
+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;

client/src/scenes/statsheet.button.js

@@ -1,16 +0,0 @@
-const { TEXT, POSITIONS: { STATS } } = require('./constants');
-
-const menuHeight = STATS.height() * 0.1;
-const menuWidth = STATS.width() * 0.25;
-
-function addButton(scene, x, y, cback, name) {
-    const button = scene.add
-        .rectangle(x, y, menuWidth, menuHeight, 0x222222)
-        .setInteractive()
-        .setOrigin(0)
-        .on('pointerdown', cback);
-    scene.add.text(button.getCenter().x, button.getCenter().y, name, TEXT.HEADER)
-        .setOrigin(0.5, 0.5);
-}
-
-module.exports = addButton;

client/src/scenes/statsheet.js

@@ -1,15 +1,31 @@
 const Phaser = require('phaser');
+const { POSITIONS: { MENU_MAIN }, TEXT, SKILLS } = require('./constants');
 
-const { POSITIONS: { STATS } } = require('./constants');
+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 LEARN_MAGIN = 12;
 
-const Passives = require('./passives');
+const menuX = WIDTH / 10;
-const Stats = require('./statsheet.stats');
+const menuY = HEIGHT * 0.8;
-const Skills = require('./statsheet.skills');
+const menuWidth = WIDTH / 10;
-const addButton = require('./statsheet.button');
+const menuHeight = HEIGHT * 0.3;
 
-const menuOrig = STATS.height() * 0.5;
+const X_LEARN = WIDTH * 2 / 4;
-const menuHeight = STATS.height() * 0.1;
+const Y_SKILLS = HEIGHT * 0.5;
-const menuPad = STATS.height() * 0.01;
+
+
+function addButton(scene, x, y, cback, name) {
+    const button = scene.add
+        .rectangle(x, y, menuWidth, menuHeight, 0x222222)
+        .setInteractive()
+        .setOrigin(0)
+        .on('pointerdown', cback);
+    scene.add.text(button.getCenter().x, button.getCenter().y, name, TEXT.HEADER)
+        .setOrigin(0.5, 1);
+}
 
 class StatSheet extends Phaser.Scene {
     constructor() {
@@ -17,80 +33,126 @@ class StatSheet extends Phaser.Scene {
     }
 
     create(cryp) {
-        this.cryp = cryp;
+        this.cameras.main.setViewport(X, Y, WIDTH, HEIGHT);
-        this.stats = new Stats(this, cryp);
-        this.addControls(cryp);
-        this.addSkills(cryp);
-        this.skills = true;
         this.registry.events.on('changedata', this.updateData, this);
-        this.registry.events.on('setdata', this.updateData, this);
+        this.cryp = cryp;
+        this.forget = false;
+
+        const crypStat = (stat, i) => {
+            const STAT_X = WIDTH / 10;
+            const STAT_Y = (i + 1) * TEXT_MARGIN;
+            this.add.text(STAT_X, STAT_Y, `${stat.stat}: ${stat.base}`, TEXT.NORMAL);
+        };
+
+        const CRYP_STATS = [cryp.stamina, cryp.phys_dmg, cryp.spell_dmg];
+        this.add.text(WIDTH / 10, 0, cryp.name, TEXT.HEADER);
+        CRYP_STATS.forEach(crypStat);
+        this.addKnownSkills(cryp);
+        this.addControls();
     }
 
     updateData(parent, key, data) {
-        if (key === 'menu') {
+        if (key === 'cryps') {
-            if (data) return this.cleanUp();
+            const cryp = data.find(c => c.id === this.cryp.id);
+            this.cryp = cryp;
+            this.addKnownSkills(cryp);
         }
-        return true;
     }
 
+    addControls() {
+        const infoCback = () => {
+            this.forget = false;
+            this.addKnownSkills(this.cryp);
+            if (this.learnSkills) this.learnSkills.destroy(true);
+        };
+        const forgetCback = () => {
+            this.forget = true;
+            this.addKnownSkills(this.cryp);
+        };
+        const learnCback = () => {
+            this.forget = false;
+            this.addKnownSkills(this.cryp);
+            this.addLearnableSkills(this.cryp);
+        };
+        addButton(this, menuX, menuY, infoCback, 'Skill\nInfo');
+        addButton(this, menuX + menuWidth * 1.1, menuY, forgetCback, 'Forget\nSkills');
+        addButton(this, menuX + menuWidth * 2.2, menuY, learnCback, 'Learn\nSkills');
+    }
 
-    addControls(cryp) {
+    addKnownSkills(cryp) {
-        const menuCback = () => {
+        if (this.knownSkills) this.knownSkills.destroy(true);
-            this.registry.set('menu', true);
+        this.knownSkills = this.add.group();
+
+        this.add.text(menuX, Y_SKILLS, 'Skills', TEXT.HEADER);
+        const knownSkill = (skill, i) => {
+            const SKILL_X = menuX;
+            const SKILL_Y = (i * TEXT_MARGIN) + Y_SKILLS + TEXT_MARGIN;
+
+            const color = this.forget ? '#ff0000' : '#ffffff';
+            const style = { fontFamily: 'monospace', fontSize: 16, color };
+            this.knownSkills.add(this.add.text(menuX, SKILL_Y, skill.skill, style)
+                .setInteractive()
+                .on('pointerdown', () => {
+                    if (this.forget) {
+                        this.registry.get('ws').sendCrypForget(cryp.id, skill.skill);
+                    }
+                })
+                .on('pointerover', (pointer) => {
+                    if (!this.forget) {
+                        const { description } = SKILLS.LEARNABLE.find(s => s.name === skill.skill);
+                        this.displaySkillText(SKILL_X, SKILL_Y, description, pointer);
+                    }
+                })
+                .on('pointerout', () => {
+                    if (this.skillText) this.skillText.destroy();
+                }));
         };
-        const passiveCback = () => {
+        cryp.skills.forEach(knownSkill);
-            if (this.passives) return false;
+    }
-            this.removeSkills();
+
-            this.addPassives(cryp);
+    addLearnableSkills(cryp) {
-            this.passives = true;
+        if (this.learnSkills) this.learnSkills.destroy(true);
-            return true;
+        this.learnSkills = this.add.group();
-        };
+        const learnable = (skill, i) => {
-        const skillCback = () => {
+            const SKILL_X = i <= 10 ? X_LEARN : X_LEARN + WIDTH / 5;
-            if (this.skills) return false;
+            const SKILL_Y = i <= 10 ? (i + 1) * TEXT_MARGIN : (i - 10) * TEXT_MARGIN;
-            this.removePassives();
+
-            this.addSkills(cryp);
+            this.learnSkills.add(this.add.text(SKILL_X, SKILL_Y, skill.name, TEXT.NORMAL)
-            this.skills = true;
+                .setInteractive()
-            return true;
+                .on('pointerdown', () => {
-        };
+                    this.registry.get('ws').sendCrypLearn(cryp.id, skill.name);
-        const clearCback = () => {
+                })
-            this.removePassives();
+                .on('pointerover', (pointer) => {
-            this.removeSkills();
+                    if (!this.forget) {
-            return true;
+                        this.displaySkillText(SKILL_X, SKILL_Y, skill.description, pointer);
+                    }
+                })
+                .on('pointerout', () => {
+                    if (this.skillText) this.skillText.destroy();
+                }));
         };
 
-        addButton(this, 0, menuOrig, menuCback, 'Main Menu');
+        this.learnSkills.add(this.add.text(X_LEARN, 0, 'Learnable', TEXT.HEADER));
-        addButton(this, 0, menuOrig + (menuHeight + menuPad), passiveCback, 'View Passives');
+        SKILLS.LEARNABLE.forEach(learnable);
-        addButton(this, 0, menuOrig + (menuHeight + menuPad) * 2, skillCback, 'View Skills');
-        addButton(this, 0, menuOrig + (menuHeight + menuPad) * 3, clearCback, 'View Cryp');
     }
 
-    addSkills(cryp) {
+    displaySkillText(x, y, description, pointer) {
-        this.scene.manager.add('Skills', Skills, true, cryp);
+        if (this.skillText) this.skillText.destroy();
+        this.skillText = this.add.text(x, y, description, {
+            fontSize: '16px',
+            fontFamily: 'Arial',
+            color: '#ffffff',
+            backgroundColor: '#222222',
+        }).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);
     }
 
-    addPassives(cryp) {
-        this.scene.manager.add('Passives', Skills, true, cryp);
-    }
-
-    removePassives() {
-        if (!this.passives) return false;
-        this.scene.get('Passives').cleanUp();
-        this.passives = false;
-        return true;
-    }
-
-    removeSkills() {
-        if (!this.skills) return false;
-        this.scene.get('Skills').cleanUp();
-        this.skills = false;
-        return true;
-    }
 
     cleanUp() {
         this.registry.events.off('changedata', this.updateData, this);
-        this.registry.events.off('setdata', this.updateData, this);
-        this.removePassives();
-        this.removeSkills();
         this.scene.remove();
     }
 }

client/src/scenes/statsheet.skills.js

@@ -1,105 +0,0 @@
-const Phaser = require('phaser');
-
-const { TEXT, SKILLS, POSITIONS: { STATS } } = require('./constants');
-const addButton = require('./statsheet.button');
-
-const TEXT_MARGIN = STATS.textMargin();
-const X_ORIG_KNOWN = STATS.knownX();
-const X_ORIG_LEARN = STATS.learnableX();
-const Y_ORIG = STATS.y();
-
-const menuOrigX = STATS.width() * 0.6;
-const menuOrigY = STATS.height() * 0.3;
-const menuHeight = STATS.height() * 0.1;
-const menuPad = STATS.height() * 0.01;
-const menuWidth = STATS.width() * 0.25;
-
-
-class Skills extends Phaser.Scene {
-    constructor() {
-        super({ key: 'Skills' });
-    }
-
-    create(cryp) {
-        this.cryp = cryp;
-        this.forget = false;
-        // Destroy the old registry event if it exists
-        this.registry.events.on('changedata', this.updateData, this);
-        this.add.text(X_ORIG_KNOWN, Y_ORIG, 'Skills', TEXT.HEADER);
-        this.addKnownSkills(cryp);
-        this.addControls();
-    }
-
-    addControls() {
-        const infoCback = () => {
-            this.forget = false;
-            this.addKnownSkills(this.cryp);
-            if (this.learnSkills) this.learnSkills.destroy(true);
-        };
-        const forgetCback = () => {
-            this.forget = true;
-            this.addKnownSkills(this.cryp);
-        };
-        const learnCback = () => {
-            this.forget = false;
-            this.addKnownSkills(this.cryp);
-            this.addLearnableSkills(this.cryp);
-        };
-        addButton(this, menuOrigX, menuOrigY, infoCback, 'Skill Info');
-        addButton(this, menuOrigX, menuOrigY + (menuHeight + menuPad), forgetCback, 'Forget Skills');
-        addButton(this, menuOrigX, menuOrigY + (menuHeight + menuPad) * 2, learnCback, 'Learn Skills');
-    }
-
-    addKnownSkills(cryp) {
-        if (this.knownSkills) this.knownSkills.destroy(true);
-        this.knownSkills = this.add.group();
-        const knownSkill = (skill, i) => {
-            const SKILL_X = X_ORIG_KNOWN;
-            const SKILL_Y = (i * TEXT_MARGIN) + Y_ORIG + TEXT_MARGIN;
-
-            const color = this.forget ? '#ff0000' : '#ffffff';
-            const style = { fontFamily: 'monospace', fontSize: 16, color };
-            this.knownSkills.add(this.add.text(SKILL_X, SKILL_Y, skill.skill, style)
-                .setInteractive()
-                .on('pointerdown', () => {
-                    if (this.forget) {
-                        this.registry.get('ws').sendCrypForget(cryp.id, skill.skill);
-                    }
-                }));
-        };
-        cryp.skills.forEach(knownSkill);
-    }
-
-    addLearnableSkills(cryp) {
-        if (this.learnSkills) this.learnSkills.destroy(true);
-        this.learnSkills = this.add.group();
-        const learnable = (skill, i) => {
-            const SKILL_X = X_ORIG_LEARN;
-            const SKILL_Y = Y_ORIG + (i * STATS.learnableMargin() * 3) + TEXT_MARGIN;
-
-            this.learnSkills.add(this.add.text(SKILL_X, SKILL_Y, [skill.name, skill.description], TEXT.LEARNABLE)
-                .setInteractive()
-                .on('pointerdown', () => {
-                    this.registry.get('ws').sendCrypLearn(cryp.id, skill.name);
-                }));
-        };
-
-        this.learnSkills.add(this.add.text(X_ORIG_LEARN, Y_ORIG, 'Learnable', TEXT.HEADER));
-        SKILLS.LEARNABLE.forEach(learnable);
-    }
-
-    updateData(parent, key, data) {
-        if (key === 'cryps') {
-            const cryp = data.find(c => c.id === this.cryp.id);
-            this.cryp = cryp;
-            this.addKnownSkills(cryp);
-        }
-    }
-
-    cleanUp() {
-        this.registry.events.off('changedata', this.updateData, this);
-        this.scene.remove();
-    }
-}
-
-module.exports = Skills;

client/src/scenes/statsheet.stats.js

@@ -1,22 +0,0 @@
-const Phaser = require('phaser');
-
-const { TEXT, POSITIONS: { STATS } } = require('./constants');
-
-const TEXT_MARGIN = STATS.textMargin();
-
-class Stats extends Phaser.GameObjects.Group {
-    constructor(scene, cryp) {
-        super(scene);
-        const crypStat = (stat, i) => {
-            const STAT_X = 0;
-            const STAT_Y = (i * TEXT_MARGIN) + STATS.y() + TEXT_MARGIN;
-            this.add(scene.add.text(STAT_X, STAT_Y, `${stat.stat}: ${stat.base}`, TEXT.NORMAL));
-        };
-
-        const CRYP_STATS = [cryp.stamina, cryp.phys_dmg, cryp.spell_dmg];
-        this.add(scene.add.text(0, STATS.y(), cryp.name, TEXT.HEADER));
-        CRYP_STATS.forEach(crypStat);
-    }
-}
-
-module.exports = Stats;

client/src/scenes/zone.controls.js

@@ -1,9 +1,11 @@
 const Phaser = require('phaser');
 
-const {
+const { TEXT, POSITIONS: { MENU_MAIN } } = require('./constants');
-    TEXT,
+
-    POSITIONS: { GAME_LIST },
+const X = MENU_MAIN.x();
-} = require('./constants');
+const Y = MENU_MAIN.y();
+const WIDTH = MENU_MAIN.width();
+const HEIGHT = MENU_MAIN.height();
 
 class ZoneControls extends Phaser.Scene {
     constructor() {
@@ -11,11 +13,10 @@ class ZoneControls extends Phaser.Scene {
     }
 
     create(zoneId) {
-        const WIDTH = Math.floor(GAME_LIST.width() / 2);
+        this.cameras.main.setViewport(X, Y, WIDTH, HEIGHT);
-        const HEIGHT = GAME_LIST.height();
 
         const menu = this.add
-            .rectangle(1000, 900, WIDTH, HEIGHT, 0x888888)
+            .rectangle(Math.floor(WIDTH * 0.7), Math.floor(HEIGHT * 0.8), Math.floor(WIDTH * 0.2), Math.floor(HEIGHT * 0.2), 0x888888)
             .setInteractive()
             .setOrigin(0);
 
@@ -24,9 +25,8 @@ class ZoneControls extends Phaser.Scene {
             .setOrigin(0.5, 0.5);
 
         menu.on('pointerdown', () => {
-            this.scene.get('Zones').cleanUp();
             this.registry.get('ws').sendZoneClose(zoneId);
-            this.cleanUp();
+            this.scene.get('Zones').cleanUp();
         });
 
 

client/src/scenes/zones.js

@@ -1,7 +1,13 @@
 const Phaser = require('phaser');
 const Node = require('./zone.node');
 const ZoneControls = require('./zone.controls');
-const { POSITIONS: { COMBAT } } = require('./constants');
+const { POSITIONS: { MENU_MAIN } } = require('./constants');
+
+const X = MENU_MAIN.x();
+const Y = MENU_MAIN.y();
+const WIDTH = MENU_MAIN.width();
+const HEIGHT = MENU_MAIN.height();
+
 
 // Mouse click hold to move, Q + E to zoom in and out
 // Press 'A' to reset allocated passive nodes
@@ -19,8 +25,7 @@ class Zones extends Phaser.Scene {
         if (!zone) return false;
         this.scene.manager.add('ZoneControls', ZoneControls, true, zone.id);
         this.graphics = this.add.graphics();
-        this.cameras.main.setViewport(COMBAT.width() * 0.2, COMBAT.y(),
+        this.cameras.main.setViewport(X, Y, WIDTH, HEIGHT);
-            COMBAT.width() * 0.8, COMBAT.height());
         this.addNodes(zone.graph.nodes);
         this.drawEdges(zone.graph.edges);
         this.addCameraControl();
@@ -32,7 +37,7 @@ class Zones extends Phaser.Scene {
         this.nodes = [];
         nodeData.forEach((n, i) => {
             this.nodes[i] = this.add.existing(
-                new Node(this, 500, 850 + i * -100, i, n.success, n.tag)
+                new Node(this, 250 + i * 100, 250, i, n.success, n.tag)
             ).setInteractive();
         });
     }
@@ -108,8 +113,8 @@ class Zones extends Phaser.Scene {
             backgroundColor: '#222222',
         }).setPadding(32);
         this.nodeText.setAlpha(0.8);
-        this.nodeText.setOrigin(pointer.x >= COMBAT.width() * 0.6 ? 1 : 0,
+        this.nodeText.setOrigin(pointer.x >= WIDTH * 0.65 ? 1 : 0,
-            pointer.y >= COMBAT.height() * 0.5 ? 1 : 0);
+            pointer.y >= HEIGHT * 0.25 ? 1 : 0);
         this.nodeText.setWordWrapWidth(450);
         this.nodeText.setScale(1 / this.cameras.main.zoom);
     }