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/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 ca430e15..e04c1640 100644 --- a/client/src/scenes/menu.game.list.js +++ b/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', () => { - 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(); + zones.on('pointerdown', () => { + this.scene.add('Missions', Missions, true); return ws.sendZoneCreate(); }); diff --git a/client/src/scenes/menu.js b/client/src/scenes/menu.js index d8690e4c..e2c35f5e 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', 'MissionsControls']; + 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..4388e07d --- /dev/null +++ b/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; diff --git a/client/src/scenes/missions.js b/client/src/scenes/missions.js index 5cbc6a42..b5db1c2d 100644 --- a/client/src/scenes/missions.js +++ b/client/src/scenes/missions.js @@ -1,18 +1,14 @@ const Phaser = require('phaser'); -const Node = require('./passive.node'); -const nodeData = require('./passive.data.node'); -const edgeData = require('./passive.data.edge'); - +const Node = require('./missions.node'); +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,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.cameras.main.scrollX = 1000; - this.cameras.main.scrollY = 500; - 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(); }); } @@ -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 => ( - 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; }); } 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', @@ -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; } 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