Added multi scene to homepage, placeholder for rankings / news / shop

client/src/scenes/home.cryps.js

@@ -7,6 +7,8 @@ const genAvatar = require('./avatar');
 const ROW_HEIGHT = CRYP_LIST.height() * 0.2;
 const ROW_WIDTH = CRYP_LIST.width();
 
+const menuY = CRYP_LIST.height() * 1.6;
+
 const KEY_MAP = [
     'keydown-ONE',
     'keydown-TWO',
@@ -42,8 +44,8 @@ class HomeCrypList extends Phaser.Scene {
         for (let i = 0; i < cryps.length; i += 1) {
             const cryp = cryps[i];
             const BOX_WIDTH = Math.floor(ROW_WIDTH / 5);
-            const ROW_X = i * BOX_WIDTH * 2;
+            const ROW_X = BOX_WIDTH * 2 * (i % 3);
-            const ROW_Y = CRYP_LIST.y();
+            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];
@@ -85,7 +87,7 @@ class HomeCrypList extends Phaser.Scene {
 
         // Add Spawn Cryp Option
         const spawn = this.add
-            .rectangle(ROW_WIDTH * 0.05, ROW_HEIGHT * 4, ROW_WIDTH * 0.2, ROW_HEIGHT * 0.5, 0x888888)
+            .rectangle(ROW_WIDTH * 0.05, menuY, ROW_WIDTH * 0.2, ROW_HEIGHT * 0.5, 0x888888)
             .setInteractive()
             .setOrigin(0)
             .on('pointerdown', () => {
@@ -96,7 +98,7 @@ class HomeCrypList extends Phaser.Scene {
             .setOrigin(0.5, 0.5);
 
         const joinNormal = this.add
-            .rectangle(ROW_WIDTH * 0.3, ROW_HEIGHT * 4, ROW_WIDTH * 0.4, ROW_HEIGHT * 0.5, 0x888888)
+            .rectangle(ROW_WIDTH * 0.3, menuY, ROW_WIDTH * 0.4, ROW_HEIGHT * 0.5, 0x888888)
             .setInteractive()
             .setOrigin(0)
             .on('pointerdown', () => {
@@ -109,7 +111,7 @@ class HomeCrypList extends Phaser.Scene {
             .setOrigin(0.5, 0.5);
 
         const joinInstance = this.add
-            .rectangle(ROW_WIDTH * 0.8, ROW_HEIGHT * 4, ROW_WIDTH * 0.4, ROW_HEIGHT * 0.5, 0x888888)
+            .rectangle(ROW_WIDTH * 0.8, menuY, ROW_WIDTH * 0.4, ROW_HEIGHT * 0.5, 0x888888)
             .setInteractive()
             .setOrigin(0)
             .on('pointerdown', () => {

client/src/scenes/home.js

@@ -1,12 +1,21 @@
 const Phaser = require('phaser');
 
 const HomeCryps = require('./home.cryps');
+const HomeNavigation = require('./home.navigation');
+
+const HomeRankings = require('./home.rankings');
+const HomeNews = require('./home.news');
+const HomeShop = require('./home.shop');
 
 const FIXED_SCENES = [
     'HomeCryps',
+    'HomeNavigation',
 ];
 
 const VAR_SCENES = [
+    'HomeRankings',
+    'HomeNews',
+    'HomeShop',
 ];
 
 class Home extends Phaser.Scene {
@@ -18,15 +27,42 @@ class Home extends Phaser.Scene {
         this.registry.events.on('changedata', this.updateData, this);
         this.registry.events.on('setdata', this.updateData, this);
         this.scene.manager.add('HomeCryps', HomeCryps, true);
+        this.scene.manager.add('HomeNavigation', HomeNavigation, true);
+
         return true;
     }
 
     updateData(parent, key, data) {
         if (!data) return false;
-        if (key === 'menu') {
+        // Controls which scene shows in the main top right section
-            console.log(this.scene.manager);
+        switch (key) {
-            this.cleanUp();
+            case 'game': return this.cleanUp();
-        } return true;
+            case 'menu': return this.cleanUp();
+            case 'homeRankings': return this.newMainScene('HomeRankings', HomeRankings, data);
+            case 'homeNews': return this.newMainScene('HomeNews', HomeNews, data);
+            case 'homeShop': return this.newMainScene('HomeShop', HomeShop, data);
+
+
+            default: return false;
+        }
+    }
+
+    newMainScene(key, scene, data) {
+        let addScene = true;
+        // List of scenes which could be occupying the main section of the menu
+        VAR_SCENES.forEach((sKey) => {
+            if (this.scene.manager.keys[sKey]) {
+                if (key === sKey) {
+                    // If there is new data for the current scene restart
+                    this.scene.manager.keys[sKey].scene.restart(data);
+                    addScene = false;
+                } else {
+                    // Delete the old scene
+                    this.scene.manager.keys[sKey].cleanUp();
+                }
+            }
+        });
+        if (addScene) this.scene.manager.add(key, scene, true, data);
     }
 
     cleanUp() {

client/src/scenes/home.navigation.js

@@ -0,0 +1,52 @@
+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 / 6);
+const BTN_HEIGHT = Math.floor(HEIGHT / 3);
+
+class HomeNavigation extends Phaser.Scene {
+    constructor() {
+        super({ key: 'HomeNavigation' });
+    }
+
+    create() {
+        const ranks = this.add
+            .rectangle(X, Y, BTN_WIDTH, BTN_HEIGHT, 0x222222)
+            .setInteractive()
+            .setOrigin(0);
+        this.add
+            .text(ranks.getCenter().x, ranks.getCenter().y, 'Rankings', TEXT.HEADER)
+            .setOrigin(0.5, 0.5);
+        ranks.on('pointerdown', () => this.registry.set('homeRankings', true));
+
+        const news = this.add
+            .rectangle(X + BTN_WIDTH * 1.5, Y, BTN_WIDTH, BTN_HEIGHT, 0x222222)
+            .setInteractive()
+            .setOrigin(0);
+        this.add
+            .text(news.getCenter().x, news.getCenter().y, 'News', TEXT.HEADER)
+            .setOrigin(0.5, 0.5);
+        news.on('pointerdown', () => this.registry.set('homeNews', true));
+
+        const shop = this.add
+            .rectangle(X + BTN_WIDTH * 3, Y, BTN_WIDTH, BTN_HEIGHT, 0x222222)
+            .setInteractive()
+            .setOrigin(0);
+        this.add
+            .text(shop.getCenter().x, shop.getCenter().y, 'Shop', TEXT.HEADER)
+            .setOrigin(0.5, 0.5);
+        shop.on('pointerdown', () => this.registry.set('homeShop', true));
+    }
+
+    cleanUp() {
+        this.scene.remove();
+    }
+}
+
+module.exports = HomeNavigation;

client/src/scenes/home.news.js

@@ -0,0 +1,24 @@
+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 HomeNews extends Phaser.Scene {
+    constructor() {
+        super({ key: 'HomeNews' });
+    }
+
+    create() {
+        this.add.text(X, Y, 'News Scene', TEXT.HEADER);
+        this.add.text(X, Y + HEIGHT * 0.1, 'some other stuff here', TEXT.NORMAL);
+    }
+
+    cleanUp() {
+        this.scene.remove();
+    }
+}
+
+module.exports = HomeNews;

client/src/scenes/home.rankings.js

@@ -0,0 +1,24 @@
+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: 'HomeRankings' });
+    }
+
+    create() {
+        this.add.text(X, Y, 'Rankings Scene', TEXT.HEADER);
+        this.add.text(X, Y + HEIGHT * 0.1, 'some stuff here', TEXT.NORMAL);
+    }
+
+    cleanUp() {
+        this.scene.remove();
+    }
+}
+
+module.exports = HomeRankings;

client/src/scenes/home.shop.js

@@ -0,0 +1,23 @@
+const Phaser = require('phaser');
+const { POSITIONS: { MENU_MAIN }, TEXT } = require('./constants');
+
+const X = MENU_MAIN.x();
+const Y = MENU_MAIN.y();
+const HEIGHT = MENU_MAIN.height();
+
+class HomeShop extends Phaser.Scene {
+    constructor() {
+        super({ key: 'HomeShop' });
+    }
+
+    create() {
+        this.add.text(X, Y, 'Shop Scene', TEXT.HEADER);
+        this.add.text(X, Y + HEIGHT * 0.1, 'rulul', TEXT.NORMAL);
+    }
+
+    cleanUp() {
+        this.scene.remove();
+    }
+}
+
+module.exports = HomeShop;

client/src/scenes/menu.js

@@ -75,7 +75,6 @@ class Menu extends Phaser.Scene {
     }
 
     cleanUp() {
-
         this.registry.events.off('changedata', this.updateData, this);
         this.registry.events.off('setdata', this.updateData, this);
         // Delete scenes which could be showing before switching to battle scene
@@ -85,6 +84,8 @@ class Menu extends Phaser.Scene {
         FIXED_MENU_SCENES.forEach(removeScenes);
         MAIN_MENU_SCENES.forEach(removeScenes);
         this.registry.set('inMenu', false);
+        this.combinerItems = this.registry.set('combinerItems', null);
+
 
         this.scene.remove();
     }