Merge branch 'master' into zones

client/src/events.js

@@ -32,6 +32,11 @@ function registerEvents(registry, events, tutorial) {
         registry.set('itemList', items);
     }
 
+    function setZone(zone) {
+        registry.set('zone', zone);
+    }
+
+
     function setGameList(gameList) {
         registry.set('gameList', gameList);
     }
@@ -162,6 +167,7 @@ function registerEvents(registry, events, tutorial) {
         setItems,
         setWs,
         setGameList,
+        setZone,
     };
 }
 

client/src/scenes/cryps.js

@@ -27,8 +27,6 @@ function renderCryps() {
     const game = new Phaser.Game(config);
 
     function changeData(parent, key, data) {
-        console.log(key, data);
-
         if (key === 'menu') {
             if (data) return game.scene.add('Menu', Menu, true);
         }
@@ -37,6 +35,7 @@ function renderCryps() {
             if (!data || game.registry.get('inGame')) return false;
             return game.scene.add('Combat', Combat, true);
         }
+        return true;
     }
 
     game.registry.events.on('changedata', changeData);

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

@@ -65,13 +65,13 @@ class MenuGameList extends Phaser.Scene {
             .text(pve.getCenter().x, pve.getCenter().y, 'new PVE\ngame', TEXT.HEADER)
             .setOrigin(0.5, 0.5));
 
-        const boss = this.add
+        const zones = this.add
             .rectangle(X + WIDTH * 2, GAME_LIST.y(0), WIDTH, HEIGHT, 0x222222)
             .setInteractive()
             .setOrigin(0);
 
         this.gameList.add(this.add
-            .text(boss.getCenter().x, boss.getCenter().y, 'MISSIONS\n', TEXT.HEADER)
+            .text(zones.getCenter().x, zones.getCenter().y, 'Zones\n', TEXT.HEADER)
             .setOrigin(0.5, 0.5));
 
 
@@ -122,12 +122,8 @@ class MenuGameList extends Phaser.Scene {
             return ws.sendGamePve(team, 'Normal');
         });
 
-        boss.on('pointerdown', () => {
+        zones.on('pointerdown', () => {
-            const team = cryps.filter(c => c.active).map(c => c.id);
+            this.scene.add('Missions', Missions, true);
-            // if (team.length === 0) return false;
-            // this.scene.add('Missions', Missions);
-            // this.scene.run('Missions');
-            // this.cleanUp();
             return ws.sendZoneCreate();
         });
 

client/src/scenes/menu.js

@@ -41,13 +41,13 @@ class Menu extends Phaser.Scene {
     }
 
     cleanUp() {
-        console.log('rip menu');
         this.registry.events.off('changedata', this.updateData, this);
         this.registry.events.off('setdata', this.updateData, this);
 
-        this.scene.get('MenuCrypList').cleanUp();
+        const ACTIVE_SCENES = ['MenuCrypList', 'MenuGameList', 'ItemList', 'Missions', 'MissionsControls'];
-        this.scene.get('MenuGameList').cleanUp();
+        ACTIVE_SCENES.forEach((sKey) => {
-        this.scene.get('ItemList').cleanUp();
+            if (this.scene.get(sKey)) this.scene.get(sKey).cleanUp();
+        });
 
         this.scene.remove();
     }

client/src/scenes/missions.controls.js

@@ -0,0 +1,41 @@
+const Phaser = require('phaser');
+const MenuGameList = require('./menu.game.list');
+
+const {
+    TEXT,
+    POSITIONS: { GAME_LIST },
+} = require('./constants');
+
+class MissionsControls extends Phaser.Scene {
+    constructor() {
+        super({ key: 'MissionsControls' });
+    }
+
+    create() {
+        const WIDTH = Math.floor(GAME_LIST.width() / 2);
+        const HEIGHT = GAME_LIST.height();
+
+        const menu = this.add
+            .rectangle(1000, 900, WIDTH, HEIGHT, 0x888888)
+            .setInteractive()
+            .setOrigin(0);
+
+        this.add
+            .text(menu.getCenter().x, menu.getCenter().y, 'Clear', TEXT.HEADER)
+            .setOrigin(0.5, 0.5);
+
+        menu.on('pointerdown', () => {
+            this.scene.get('Missions').cleanUp();
+            this.cleanUp();
+        });
+
+
+        return true;
+    }
+
+    cleanUp() {
+        this.scene.remove();
+    }
+}
+
+module.exports = MissionsControls;

client/src/scenes/missions.js

@@ -1,18 +1,14 @@
 const Phaser = require('phaser');
-const Node = require('./passive.node');
+const Node = require('./missions.node');
-const nodeData = require('./passive.data.node');
+const MissionControls = require('./missions.controls');
-const edgeData = require('./passive.data.edge');
-
 const { POSITIONS: { COMBAT } } = require('./constants');
 
-// Passive tree generator - proof of concept visuals need work
 // Mouse click hold to move, Q + E to zoom in and out
 // Press 'A' to reset allocated passive nodes
 
 class Missions extends Phaser.Scene {
     constructor() {
         super({ key: 'Missions' });
-        // this.input = props.input;
     }
 
     preload() {
@@ -20,24 +16,23 @@ class Missions extends Phaser.Scene {
     }
 
     create() {
+        this.scene.manager.add('MissionControls', MissionControls, true);
         this.graphics = this.add.graphics();
-        this.nodeData = nodeData;
+        const nodeData = this.registry.get('zone').nodes;
-        this.edgeData = edgeData;
+        this.edgeData = this.registry.get('zone').edges.map(x => x.map(y => nodeData[y]));
         this.cameras.main.setViewport(COMBAT.width() * 0.2, COMBAT.y(),
             COMBAT.width() * 0.8, COMBAT.height());
-        this.cameras.main.scrollX = 1000;
+        this.addNodes(nodeData);
-        this.cameras.main.scrollY = 500;
+        this.drawEdges(nodeData);
-        this.addNodes();
         this.addCameraControl();
         this.addEvents();
-        this.drawEdges();
     }
 
-    addNodes() {
+    addNodes(nodeData) {
         this.nodes = [];
-        this.nodeData.forEach((n) => {
+        nodeData.forEach((n, i) => {
             this.nodes[n.id] = this.add.existing(
-                new Node(this, n.x, n.y, n.id, n.alloc, n.text)
+                new Node(this, 500, 850 + i * -100, n.id, n.success, n.tag)
             ).setInteractive();
         });
     }
@@ -75,9 +70,15 @@ class Missions extends Phaser.Scene {
                 // If panning and mouse release is on node it won't allocate
                 if (gameObjects[0] instanceof Node) {
                     const team = this.registry.get('cryps').filter(c => c.active).map(c => c.id);
+                    if (team.length === 0) return false;
+
+                    // 'Boss' to be replaced with node id for RPC call
                     this.registry.get('ws').sendGamePve(team, 'Boss');
+
+                    this.cleanUp();
                 }
             }
+            return true;
         });
         this.input.on('pointermove', (pointer) => {
             const zoomFactor = 2 / this.cameras.main.zoom;
@@ -87,33 +88,33 @@ class Missions extends Phaser.Scene {
                 this.cameras.main.scrollY -= zoomFactor * (points[1].y - points[0].y);
             }
         }, this);
-        this.input.keyboard.on('keydown_A', () => {
-            this.updateNodes(); // Will update nodes from state
-        }, 0, this);
         this.input.keyboard.on('keydown_G', () => {
             this.scene.sleep();
         }, 0, this);
     }
 
-    drawEdges() {
+    drawEdges(nodeData) {
         this.graphics.clear();
         this.edgeData.forEach((e) => {
-            const drawEdge = this.nodeData.filter(n => (
+            const drawEdge = nodeData.filter(n => (
-                e[0] === n.id || e[1] === n.id
+                e[0].id === n.id || e[1].id === n.id
             ));
-            if (drawEdge[0].alloc && drawEdge[1].alloc) {
+            if (drawEdge[0].success && drawEdge[1].success) {
                 this.graphics.lineStyle(10, 0xfff00f, 0.2);
             } else {
                 this.graphics.lineStyle(2, 0xffffff, 0.2);
             }
-            this.graphics.lineBetween(drawEdge[0].x, drawEdge[0].y, drawEdge[1].x, drawEdge[1].y);
+            const nodeA = this.nodes[drawEdge[0].id];
+            const nodeB = this.nodes[drawEdge[1].id];
+            this.graphics.lineBetween(nodeA.x, nodeA.y, nodeB.x, nodeB.y);
+            return true;
         });
     }
 
     displayNodeText(node, pointer) {
         if (this.nodeText) this.nodeText.destroy();
-        this.nodeText = this.add.text(node.x, node.y, 'Going on a mission', {
+        this.nodeText = this.add.text(node.x, node.y, node.text, {
-            fontSize: '16px',
+            fontSize: '24px',
             fontFamily: 'Arial',
             color: '#ffffff',
             backgroundColor: '#222222',
@@ -125,15 +126,6 @@ class Missions extends Phaser.Scene {
         this.nodeText.setScale(1 / this.cameras.main.zoom);
     }
 
-    updateNodes() {
-        this.nodeData.forEach((n) => {
-            this.nodes[n.id].alloc = false;
-            this.nodes[n.id].updateNode();
-        });
-        // This function will  be modified to just update from state
-        // State will update n.alloc instead of false
-    }
-
     camPan(bool) {
         this.pan = bool;
     }

client/src/scenes/missions.node.js

@@ -0,0 +1,32 @@
+const Phaser = require('phaser');
+
+class PassiveNode extends Phaser.GameObjects.Sprite {
+    constructor(scene, x, y, id, alloc, text) {
+        super(scene, x, y);
+        this.setTexture('eye');
+        this.scene = scene;
+        this.alloc = alloc;
+        // this.text = (text.indexOf(',') > -1) ? text.split(',') : text;
+        this.id = id;
+        this.setPosition(x, y);
+
+        const nodeNoDigits = text.replace(/[0-9]/g, '');
+        switch (nodeNoDigits) {
+            case 'BOSS':
+                this.setScale(0.25);
+                break;
+            case 'ZONE':
+                this.setScale(0.1);
+                break;
+            default:
+                this.setScale(0.05);
+        }
+        if (this.alloc) {
+            this.setTint(0xff0000);
+        }
+
+        this.text = `${text}: id = '${id}`;
+    }
+}
+
+module.exports = PassiveNode;

client/src/socket.js

@@ -146,6 +146,11 @@ function createSocket(events) {
         events.setItems(items);
     }
 
+    function zoneState(response) {
+        const [structName, zone] = response;
+        events.setZone(zone);
+    }
+
     // -------------
     //   Setup
     // -------------
@@ -163,6 +168,7 @@ function createSocket(events) {
         account_cryps: accountCryps,
         account_items: accountItems,
         zone_create: res => console.log(res),
+        zone_state: zoneState,
     };
 
     // decodes the cbor and