gen graph from server data

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/menu.js

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

client/src/scenes/missions.controls.js

@@ -26,12 +26,16 @@ class MissionsControls extends Phaser.Scene {
 
         menu.on('pointerdown', () => {
             this.scene.get('Missions').cleanUp();
-            this.scene.remove();
+            this.cleanUp();
         });
 
 
         return true;
     }
+
+    cleanUp() {
+        this.scene.remove();
+    }
 }
 
 module.exports = MissionsControls;

client/src/scenes/missions.data.edge.js

@@ -1,10 +0,0 @@
-const missionEdges = [
-    ['CLRG', 'CNOTE'],
-    ['CMED2', 'CLRG'],
-    ['CMED1', 'CMED2'],
-    ['CSTAT2', 'CMED1'],
-    ['CSTAT1', 'CSTAT2'],
-
-];
-
-module.exports = missionEdges;

client/src/scenes/missions.data.node.js

@@ -1,10 +0,0 @@
-const missionNodes = [
-    { x: 500, y: 450, id: 'CNOTE', alloc: false, text: 'Boss Fight' },
-    { x: 500, y: 550, id: 'CLRG', alloc: false, text: 'Mission 5' },
-    { x: 500, y: 600, id: 'CMED2', alloc: false, text: 'Mission 4'},
-    { x: 500, y: 650, id: 'CMED1', alloc: false, text: 'Mission 3'},
-    { x: 500, y: 700, id: 'CSTAT2', alloc: false, text: 'Mission 2'},
-    { x: 500, y: 750, id: 'CSTAT1', alloc: false, text: 'Mission 1'},
-];
-
-module.exports = missionNodes;

client/src/scenes/missions.js

@@ -1,7 +1,5 @@
 const Phaser = require('phaser');
-const Node = require('./passive.node');
+const Node = require('./missions.node');
-const nodeData = require('./missions.data.node');
-const edgeData = require('./missions.data.edge');
 const MissionControls = require('./missions.controls');
 const { POSITIONS: { COMBAT } } = require('./constants');
 
@@ -18,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.addNodes();
+        this.addNodes(nodeData);
+        this.drawEdges(nodeData);
         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();
         });
     }
@@ -91,26 +88,26 @@ 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;
         });
     }
 
@@ -129,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