added instances to its own scene

client/src/scenes/home.cryps.js

@@ -7,7 +7,7 @@ const genAvatar = require('./avatar');
 const ROW_HEIGHT = CRYP_LIST.height() * 0.2;
 const ROW_WIDTH = CRYP_LIST.width();
 
-const menuY = CRYP_LIST.height();
+const menuY = CRYP_LIST.height() * 1.6;
 
 const KEY_MAP = [
     'keydown-ONE',
@@ -35,7 +35,6 @@ class HomeCrypList extends Phaser.Scene {
         this.registry.events.on('changedata', this.updateData, this);
         this.registry.events.on('setdata', this.updateData, this);
         const cryps = this.registry.get('crypList');
-        const playerList = this.registry.get('playerList');
 
 
         if (!cryps) return true;
@@ -98,24 +97,21 @@ class HomeCrypList extends Phaser.Scene {
             .text(spawn.getCenter().x, spawn.getCenter().y, '+', TEXT.HEADER)
             .setOrigin(0.5, 0.5);
 
-        const addInstance = (player, i) => {
+        const joinNormal = this.add
-            const joinNormal = this.add
+            .rectangle(ROW_WIDTH * 0.3, menuY, ROW_WIDTH * 0.4, ROW_HEIGHT * 0.5, 0x888888)
-                .rectangle(ROW_WIDTH * 0.1, menuY + ROW_HEIGHT * 0.75 * (i + 1), ROW_WIDTH, ROW_HEIGHT * 0.5, 0x888888)
+            .setInteractive()
-                .setInteractive()
+            .setOrigin(0)
-                .setOrigin(0)
+            .on('pointerdown', () => {
-                .on('pointerdown', () => {
+                const playerCryps = [];
-                    this.game.events.emit('SET_PLAYER', player);
+                this.activeCryps.forEach(obj => playerCryps.push(obj.cryp.id));
-                });
+                ws.sendPlayerCrypsSet(NULL_UUID, playerCryps);
-            this.add
+            });
-                .text(joinNormal.getCenter().x, joinNormal.getCenter().y, `${player.instance}`, TEXT.NORMAL)
+        this.add
-                .setOrigin(0.5, 0.5);
+            .text(joinNormal.getCenter().x, joinNormal.getCenter().y, 'Join Normal', TEXT.HEADER)
-        };
+            .setOrigin(0.5, 0.5);
 
-        playerList.forEach(addInstance);
+        const joinInstance = this.add
-
+            .rectangle(ROW_WIDTH * 0.8, menuY, ROW_WIDTH * 0.4, ROW_HEIGHT * 0.5, 0x888888)
-
-        const newInstance = this.add
-            .rectangle(ROW_WIDTH * 0.4, menuY, ROW_WIDTH * 0.6, ROW_HEIGHT * 0.5, 0x888888)
             .setInteractive()
             .setOrigin(0)
             .on('pointerdown', () => {
@@ -124,7 +120,7 @@ class HomeCrypList extends Phaser.Scene {
                 ws.sendInstanceJoin(playerCryps);
             });
         this.add
-            .text(newInstance.getCenter().x, newInstance.getCenter().y, 'New Instance', TEXT.HEADER)
+            .text(joinInstance.getCenter().x, joinInstance.getCenter().y, 'New Instance', TEXT.HEADER)
             .setOrigin(0.5, 0.5);
 
         return this;

client/src/scenes/home.instances.js

@@ -0,0 +1,39 @@
+const Phaser = require('phaser');
+const { POSITIONS: { MENU_MAIN }, TEXT } = require('./constants');
+
+const X = MENU_MAIN.x();
+const Y = MENU_MAIN.y();
+const WIDTH = MENU_MAIN.width();
+const HEIGHT = MENU_MAIN.height();
+
+class HomeRankings extends Phaser.Scene {
+    constructor() {
+        super({ key: 'HomeInstances' });
+    }
+
+    create() {
+        this.add.text(X, Y, 'Instances Scene', TEXT.HEADER);
+        const playerList = this.registry.get('playerList');
+        const addInstance = (player, i) => {
+        const joinNormal = this.add
+            .rectangle(X, Y + HEIGHT * 0.15 * (i + 1), WIDTH * 0.5, HEIGHT * 0.1, 0x888888)
+            .setInteractive()
+            .setOrigin(0)
+            .on('pointerdown', () => {
+                this.game.events.emit('SET_PLAYER', player);
+            });
+        this.add
+            .text(joinNormal.getCenter().x, joinNormal.getCenter().y, `${player.instance}`, TEXT.NORMAL)
+            .setOrigin(0.5, 0.5);
+        };
+
+        playerList.forEach(addInstance);
+
+    }
+
+    cleanUp() {
+        this.scene.remove();
+    }
+}
+
+module.exports = HomeRankings;

client/src/scenes/home.js

@@ -6,6 +6,7 @@ const HomeNavigation = require('./home.navigation');
 const HomeRankings = require('./home.rankings');
 const HomeNews = require('./home.news');
 const HomeShop = require('./home.shop');
+const HomeInstances = require('./home.instances');
 
 const FIXED_SCENES = [
     'HomeCryps',
@@ -16,6 +17,7 @@ const VAR_SCENES = [
     'HomeRankings',
     'HomeNews',
     'HomeShop',
+    'HomeInstances',
 ];
 
 class Home extends Phaser.Scene {
@@ -38,6 +40,7 @@ class Home extends Phaser.Scene {
         switch (key) {
             case 'game': return this.cleanUp();
             case 'menu': return this.cleanUp();
+            case 'homeInstances': return this.newMainScene('HomeInstances', HomeInstances, data);
             case 'homeRankings': return this.newMainScene('HomeRankings', HomeRankings, data);
             case 'homeNews': return this.newMainScene('HomeNews', HomeNews, data);
             case 'homeShop': return this.newMainScene('HomeShop', HomeShop, data);

client/src/scenes/home.navigation.js

@@ -42,6 +42,15 @@ class HomeNavigation extends Phaser.Scene {
             .text(shop.getCenter().x, shop.getCenter().y, 'Shop', TEXT.HEADER)
             .setOrigin(0.5, 0.5);
         shop.on('pointerdown', () => this.registry.set('homeShop', true));
+
+        const instances = this.add
+            .rectangle(X + BTN_WIDTH * 4.5, Y, BTN_WIDTH, BTN_HEIGHT, 0x222222)
+            .setInteractive()
+            .setOrigin(0);
+        this.add
+            .text(instances.getCenter().x, instances.getCenter().y, 'Instances', TEXT.HEADER)
+            .setOrigin(0.5, 0.5);
+        instances.on('pointerdown', () => this.registry.set('homeInstances', true));
     }
 
     cleanUp() {

client/src/scenes/menu.navigation.js

@@ -32,15 +32,15 @@ class MenuNavigation extends Phaser.Scene {
             ws.sendInstanceReady(player.instance);
         });
 
-        // const leave = this.add
+        const menu = this.add
-        //     .rectangle(BTN_WIDTH * 3, BTN_HEIGHT, BTN_WIDTH, BTN_HEIGHT, 0x440000)
+            .rectangle(BTN_WIDTH * 3, BTN_HEIGHT, BTN_WIDTH, BTN_HEIGHT, 0x440000)
-        //     .setInteractive()
+            .setInteractive()
-        //     .setOrigin(0)
+            .setOrigin(0)
-        //     .on('pointerdown', () => this.registry.set('home', true));
+            .on('pointerdown', () => this.registry.set('home', true));
 
-        // this.add
+        this.add
-        //     .text(leave.getCenter().x, leave.getCenter().y, 'Leave', TEXT.HEADER)
+            .text(menu.getCenter().x, menu.getCenter().y, 'Menu', TEXT.HEADER)
-        //     .setOrigin(0.5, 0.5);
+            .setOrigin(0.5, 0.5);
     }
 
     cleanUp() {