From 3527d3faa0315a6d49dc372b73527226c343445f Mon Sep 17 00:00:00 2001 From: Mashy Date: Fri, 28 Dec 2018 15:41:47 +1000 Subject: [PATCH 1/2] Mission UI stuff --- client/src/scenes/cryps.js | 3 +- client/src/scenes/menu.game.list.js | 6 +--- client/src/scenes/menu.js | 8 +++--- client/src/scenes/missions.controls.js | 37 +++++++++++++++++++++++++ client/src/scenes/missions.data.edge.js | 10 +++++++ client/src/scenes/missions.data.node.js | 10 +++++++ client/src/scenes/missions.js | 22 +++++++++------ 7 files changed, 76 insertions(+), 20 deletions(-) create mode 100644 client/src/scenes/missions.controls.js create mode 100644 client/src/scenes/missions.data.edge.js create mode 100644 client/src/scenes/missions.data.node.js diff --git a/client/src/scenes/cryps.js b/client/src/scenes/cryps.js index 8dd86cf0..802b3fe8 100644 --- a/client/src/scenes/cryps.js +++ b/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); diff --git a/client/src/scenes/menu.game.list.js b/client/src/scenes/menu.game.list.js index 3d8ec545..4482eabb 100644 --- a/client/src/scenes/menu.game.list.js +++ b/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); }); diff --git a/client/src/scenes/menu.js b/client/src/scenes/menu.js index d8690e4c..538158eb 100644 --- a/client/src/scenes/menu.js +++ b/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(); } diff --git a/client/src/scenes/missions.controls.js b/client/src/scenes/missions.controls.js new file mode 100644 index 00000000..58887986 --- /dev/null +++ b/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; diff --git a/client/src/scenes/missions.data.edge.js b/client/src/scenes/missions.data.edge.js new file mode 100644 index 00000000..0796b552 --- /dev/null +++ b/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; diff --git a/client/src/scenes/missions.data.node.js b/client/src/scenes/missions.data.node.js new file mode 100644 index 00000000..9c9b8c87 --- /dev/null +++ b/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; diff --git a/client/src/scenes/missions.js b/client/src/scenes/missions.js index 5cbc6a42..4dd5eab0 100644 --- a/client/src/scenes/missions.js +++ b/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', From 856a55448865fd50aedd3ea6b8c75cec987028a3 Mon Sep 17 00:00:00 2001 From: Mashy Date: Fri, 28 Dec 2018 17:13:13 +1000 Subject: [PATCH 2/2] gen graph from server data --- client/src/events.js | 6 ++++ client/src/scenes/menu.game.list.js | 0 client/src/scenes/menu.js | 2 +- client/src/scenes/missions.controls.js | 6 +++- client/src/scenes/missions.data.edge.js | 10 ------ client/src/scenes/missions.data.node.js | 10 ------ client/src/scenes/missions.js | 44 +++++++++---------------- client/src/scenes/missions.node.js | 32 ++++++++++++++++++ client/src/socket.js | 6 ++++ 9 files changed, 66 insertions(+), 50 deletions(-) mode change 100755 => 100644 client/src/scenes/menu.game.list.js delete mode 100644 client/src/scenes/missions.data.edge.js delete mode 100644 client/src/scenes/missions.data.node.js create mode 100644 client/src/scenes/missions.node.js diff --git a/client/src/events.js b/client/src/events.js index 01758958..e07868f6 100644 --- a/client/src/events.js +++ b/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, }; } diff --git a/client/src/scenes/menu.game.list.js b/client/src/scenes/menu.game.list.js old mode 100755 new mode 100644 diff --git a/client/src/scenes/menu.js b/client/src/scenes/menu.js index 538158eb..e2c35f5e 100644 --- a/client/src/scenes/menu.js +++ b/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(); }); diff --git a/client/src/scenes/missions.controls.js b/client/src/scenes/missions.controls.js index 58887986..4388e07d 100644 --- a/client/src/scenes/missions.controls.js +++ b/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; diff --git a/client/src/scenes/missions.data.edge.js b/client/src/scenes/missions.data.edge.js deleted file mode 100644 index 0796b552..00000000 --- a/client/src/scenes/missions.data.edge.js +++ /dev/null @@ -1,10 +0,0 @@ -const missionEdges = [ - ['CLRG', 'CNOTE'], - ['CMED2', 'CLRG'], - ['CMED1', 'CMED2'], - ['CSTAT2', 'CMED1'], - ['CSTAT1', 'CSTAT2'], - -]; - -module.exports = missionEdges; diff --git a/client/src/scenes/missions.data.node.js b/client/src/scenes/missions.data.node.js deleted file mode 100644 index 9c9b8c87..00000000 --- a/client/src/scenes/missions.data.node.js +++ /dev/null @@ -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; diff --git a/client/src/scenes/missions.js b/client/src/scenes/missions.js index 4dd5eab0..b5db1c2d 100644 --- a/client/src/scenes/missions.js +++ b/client/src/scenes/missions.js @@ -1,7 +1,5 @@ const Phaser = require('phaser'); -const Node = require('./passive.node'); -const nodeData = require('./missions.data.node'); -const edgeData = require('./missions.data.edge'); +const Node = require('./missions.node'); 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; - this.edgeData = edgeData; + const nodeData = this.registry.get('zone').nodes; + 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 => ( - e[0] === n.id || e[1] === n.id + const drawEdge = nodeData.filter(n => ( + 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; } diff --git a/client/src/scenes/missions.node.js b/client/src/scenes/missions.node.js new file mode 100644 index 00000000..7f061831 --- /dev/null +++ b/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; diff --git a/client/src/socket.js b/client/src/socket.js index 8224ae62..52079b9c 100644 --- a/client/src/socket.js +++ b/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