Mission UI stuff

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

@@ -124,11 +124,7 @@ class MenuGameList extends Phaser.Scene {
 
         boss.on('pointerdown', () => {
             const team = cryps.filter(c => c.active).map(c => c.id);
-            if (team.length === 0) return false;
-            this.scene.add('Missions', Missions);
-            this.scene.run('Missions');
-            this.cleanUp();
-            // return ws.sendGamePve(team, 'Boss');
+            this.scene.add('Missions', Missions, true);
         });
 
 

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();
-        this.scene.get('MenuGameList').cleanUp();
-        this.scene.get('ItemList').cleanUp();
+        const ACTIVE_SCENES = ['MenuCrypList', 'MenuGameList', 'ItemList', 'Missions', 'MissionControls'];
+        ACTIVE_SCENES.forEach((sKey) => {
+            if (this.scene.get(sKey)) this.scene.get(sKey).cleanUp();
+        });
 
         this.scene.remove();
     }

client/src/scenes/missions.controls.js

@@ -0,0 +1,37 @@
+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.scene.remove();
+        });
+
+
+        return true;
+    }
+}
+
+module.exports = MissionsControls;

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

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

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

@@ -0,0 +1,10 @@
+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,18 +1,16 @@
 const Phaser = require('phaser');
 const Node = require('./passive.node');
-const nodeData = require('./passive.data.node');
-const edgeData = require('./passive.data.edge');
-
+const nodeData = require('./missions.data.node');
+const edgeData = require('./missions.data.edge');
+const MissionControls = require('./missions.controls');
 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,13 +18,13 @@ class Missions extends Phaser.Scene {
     }
 
     create() {
+        
+        this.scene.manager.add('MissionControls', MissionControls, true);
         this.graphics = this.add.graphics();
         this.nodeData = nodeData;
         this.edgeData = edgeData;
         this.cameras.main.setViewport(COMBAT.width() * 0.2, COMBAT.y(),
             COMBAT.width() * 0.8, COMBAT.height());
-        this.cameras.main.scrollX = 1000;
-        this.cameras.main.scrollY = 500;
         this.addNodes();
         this.addCameraControl();
         this.addEvents();
@@ -75,9 +73,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;
@@ -112,8 +116,8 @@ class Missions extends Phaser.Scene {
 
     displayNodeText(node, pointer) {
         if (this.nodeText) this.nodeText.destroy();
-        this.nodeText = this.add.text(node.x, node.y, 'Going on a mission', {
-            fontSize: '16px',
+        this.nodeText = this.add.text(node.x, node.y, node.text, {
+            fontSize: '24px',
             fontFamily: 'Arial',
             color: '#ffffff',
             backgroundColor: '#222222',