Added home page

client/src/events.js

@@ -20,7 +20,7 @@ function registerEvents(registry, events, tutorial) {
 
     function setAccount(account) {
         registry.set('account', account);
-        registry.set('menu', true);
+        registry.set('home', true);
         events.emit('ACCOUNT', account);
     }
 
@@ -28,10 +28,19 @@ function registerEvents(registry, events, tutorial) {
         registry.set('activeSkill', skill);
     }
 
+    function setMenu() {
+        registry.set('menu', true);
+    }
+
+
     function setVbox(items) {
         registry.set('vbox', items);
     }
 
+    function setInstance(instance) {
+        registry.set('instance', instance);
+    }
+
     function setZone(zone) {
         registry.set('zone', zone);
     }
@@ -177,6 +186,8 @@ function registerEvents(registry, events, tutorial) {
         setActiveSkill,
         setCryps,
         setGame,
+        setInstance,
+        setMenu,
         setVbox,
         setWs,
         setGameList,

client/src/scenes/cryps.js

@@ -1,9 +1,11 @@
 const Phaser = require('phaser');
 
 const Header = require('./header');
+const Home = require('./home');
 const Menu = require('./menu');
 const Combat = require('./combat');
-const Background = require('./background');
+
+// const Background = require('./background');
 
 function renderCryps() {
     const config = {
@@ -41,6 +43,10 @@ function renderCryps() {
         // Don't load other scenes if you're not logged in
         if (!game.registry.get('account')) return false;
 
+        if (key === 'home') {
+            if (data) return game.scene.add('Home', Home, true);
+        }
+
         if (key === 'menu') {
             if (data) return game.scene.add('Menu', Menu, true);
         }

client/src/scenes/home.cryps.js

@@ -0,0 +1,150 @@
+const Phaser = require('phaser');
+const { remove } = require('lodash');
+
+const { TEXT, COLOURS, POSITIONS: { CRYP_LIST } } = require('./constants');
+const genAvatar = require('./avatar');
+
+const ROW_HEIGHT = CRYP_LIST.height() * 0.2;
+const ROW_WIDTH = CRYP_LIST.width();
+
+const TEXT_MARGIN = 24;
+
+const KEY_MAP = [
+    'keydown-ONE',
+    'keydown-TWO',
+    'keydown-THREE',
+];
+
+const NULL_UUID = '00000000-0000-0000-0000-000000000000';
+
+class HomeCrypList extends Phaser.Scene {
+    constructor() {
+        super({ key: 'HomeCryps' });
+    }
+
+
+    updateData(parent, key, data) {
+        if (key === 'cryps') {
+            KEY_MAP.forEach(k => this.input.keyboard.removeListener(k));
+            this.scene.restart();
+        }
+    }
+
+    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);
+        const cryps = this.registry.get('cryps');
+
+
+        if (!cryps) return true;
+        const ws = this.registry.get('ws');
+        this.activeCryps = [];
+        // We only display 3 cryps others can be viewed in cryp list (soon TM)
+        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_Y = CRYP_LIST.y();
+            const ACTIVE_FILL = 0.2;
+
+            const FILL = Object.values(COLOURS)[i];
+            // Selection of cryps
+
+            // Cryp avatar and interaction box
+            const crypInteract = this.add
+                .rectangle(ROW_X, ROW_Y + ROW_HEIGHT * 0.2, BOX_WIDTH * 2, ROW_HEIGHT, FILL)
+                .setInteractive()
+                .setOrigin(0);
+            crypInteract.setAlpha(0.2);
+            crypInteract.on('pointerdown', () => {
+                if (this.activeCryps.includes(crypInteract)) {
+                    remove(this.activeCryps, n => n === crypInteract);
+                    crypInteract.setAlpha(0.2);
+                } else {
+                    this.activeCryps.push(crypInteract);
+                    crypInteract.setAlpha(1);
+                }
+                console.log(this.activeCryps);
+            });
+
+            crypInteract.itemSelect = () => {
+                crypInteract.setFillStyle(COLOURS.SELECT);
+            };
+            crypInteract.itemDeselect = () => {
+                crypInteract.setFillStyle(FILL, ACTIVE_FILL);
+            };
+
+            crypInteract.cryp = cryp;
+            this.add.image(
+                crypInteract.getCenter().x,
+                crypInteract.getCenter().y,
+                'aztec',
+                genAvatar(cryp.name)
+            );
+            this.add.text(ROW_X + BOX_WIDTH, ROW_Y, cryp.name, TEXT.HEADER)
+                .setOrigin(0.5, 0.5);
+        }
+
+        // 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)
+            .setInteractive()
+            .setOrigin(0)
+            .on('pointerdown', () => {
+                this.game.events.emit('CRYP_SPAWN');
+            });
+        this.add
+            .text(spawn.getCenter().x, spawn.getCenter().y, '+', TEXT.HEADER)
+            .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)
+            .setInteractive()
+            .setOrigin(0)
+            .on('pointerdown', () => {
+                const playerCryps = [];
+                this.activeCryps.forEach(obj => playerCryps.push(obj.cryp.id));
+                ws.sendPlayerCrypsSet(NULL_UUID, playerCryps);
+            });
+        this.add
+            .text(joinNormal.getCenter().x, joinNormal.getCenter().y, 'Join Normal', TEXT.HEADER)
+            .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)
+            .setInteractive()
+            .setOrigin(0)
+            .on('pointerdown', () => {
+                const playerCryps = [];
+                this.activeCryps.forEach(obj => playerCryps.push(obj.cryp.id));
+                ws.sendInstanceJoin(playerCryps);
+            });
+        this.add
+            .text(joinInstance.getCenter().x, joinInstance.getCenter().y, 'Join Instance', 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);
+        this.registry.events.off('setdata', this.updateData, this);
+        this.scene.remove();
+    }
+}
+
+module.exports = HomeCrypList;

client/src/scenes/home.js

@@ -0,0 +1,48 @@
+const Phaser = require('phaser');
+
+const HomeCryps = require('./home.cryps');
+
+const FIXED_SCENES = [
+    'HomeCryps',
+];
+
+const VAR_SCENES = [
+];
+
+class Home extends Phaser.Scene {
+    constructor() {
+        super({ key: 'Home', active: true });
+    }
+
+    create() {
+        this.registry.events.on('changedata', this.updateData, this);
+        this.registry.events.on('setdata', this.updateData, this);
+        this.scene.manager.add('HomeCryps', HomeCryps, true);
+
+        return true;
+    }
+
+    updateData(parent, key, data) {
+        if (!data) return false;
+        if (key === 'menu') {
+            this.cleanUp();
+        } return true;
+    }
+
+    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
+
+        const removeScenes = (sKey) => {
+            if (this.scene.get(sKey)) this.scene.get(sKey).cleanUp();
+        };
+        FIXED_SCENES.forEach(removeScenes);
+        VAR_SCENES.forEach(removeScenes);
+
+
+        this.scene.remove();
+    }
+}
+
+module.exports = Home;

client/src/scenes/menu.js

@@ -23,8 +23,6 @@ const MAIN_MENU_SCENES = [
     'ItemInfo',
 ];
 
-const NULL_UUID = '00000000-0000-0000-0000-000000000000';
-
 class Menu extends Phaser.Scene {
     constructor() {
         super({ key: 'Menu', active: true });
@@ -36,7 +34,6 @@ class Menu extends Phaser.Scene {
 
         // When we load the menu request the latest items
         // Item list will restart when the data comes in
-        this.registry.get('ws').sendPlayerState(NULL_UUID);
 
         this.scene.manager.add('MenuCrypList', MenuCrypList, true);
         this.scene.manager.add('MenuNavigation', MenuNavigation, true);

client/src/scenes/menu.navigation.js

@@ -27,12 +27,6 @@ class MenuNavigation extends Phaser.Scene {
             .text(play.getCenter().x, play.getCenter().y, 'Play Cryps', TEXT.HEADER)
             .setOrigin(0.5, 0.5);
         play.on('pointerdown', () => {
-            const cryps = this.registry.get('cryps');
-            const crypJoinList = [0, 0, 0];
-            for (let i = 0; i <= 2; i += 1) {
-                crypJoinList[i] = cryps[i].id;
-            }
-            ws.sendInstanceJoin(crypJoinList);
             this.selectMode(ws);
             play.destroy();
             playText.destroy();
@@ -59,12 +53,10 @@ class MenuNavigation extends Phaser.Scene {
             .setOrigin(0.5, 0.5);
 
         pve.on('pointerdown', () => {
-            this.addPveModes(ws);
             pve.destroy();
             pveText.destroy();
             pvp.destroy();
             pvpText.destroy();
-            ws.sendAccountZone();
         });
 
         pvp.on('pointerdown', () => {

client/src/socket.js

@@ -81,8 +81,8 @@ function createSocket(events) {
         send({ method: 'cryp_unspec', params: { id, spec } });
     }
 
-    function sendPlayerCrypsSet(instanceId) {
-        send({ method: 'player_cryps_set', params: { instance_id: instanceId } });
+    function sendPlayerCrypsSet(instanceId, crypIds) {
+        send({ method: 'player_cryps_set', params: { instance_id: instanceId, cryp_ids: crypIds } });
     }
 
     function sendPlayerState(instanceId) {
@@ -177,6 +177,9 @@ function createSocket(events) {
 
     function playerState(response) {
         const [structName, player] = response;
+        events.setMenu();
+        events.setCryps(player.cryps);
+        events.setInstance(player.instance);
         events.setVbox(player.vbox);
     }