From 58641b57f301fbcbaa7171d1dacdc08a255c2636 Mon Sep 17 00:00:00 2001 From: Mashy Date: Fri, 21 Dec 2018 19:31:59 +1000 Subject: [PATCH 1/2] refactor menu --- client/src/scenes/combat.js | 2 +- client/src/scenes/cryp.list.js | 93 ----------- client/src/scenes/cryp.row.js | 82 ---------- client/src/scenes/cryps.js | 6 +- client/src/scenes/header.js | 15 ++ client/src/scenes/menu.cryps.list.js | 98 ++++++++++++ .../{game.list.js => menu.game.list.js} | 67 +++++--- client/src/scenes/menu.js | 84 +++++++++- client/src/scenes/missions.js | 145 ++++++++++++++++++ client/src/scenes/statsheet.js | 7 +- 10 files changed, 390 insertions(+), 209 deletions(-) delete mode 100644 client/src/scenes/cryp.list.js delete mode 100644 client/src/scenes/cryp.row.js create mode 100644 client/src/scenes/header.js create mode 100644 client/src/scenes/menu.cryps.list.js rename client/src/scenes/{game.list.js => menu.game.list.js} (63%) create mode 100644 client/src/scenes/missions.js diff --git a/client/src/scenes/combat.js b/client/src/scenes/combat.js index 02be843e..1fac2557 100644 --- a/client/src/scenes/combat.js +++ b/client/src/scenes/combat.js @@ -65,8 +65,8 @@ class Combat extends Phaser.Scene { } endGame() { - this.scene.switch('CrypList'); // Switch back to cryp list this.registry.set('game', null); + this.scene.wake('Menu'); // Switch back to cryp list this.scene.get('CombatLog').cleanUp(); this.scene.get('CombatCryps').cleanUp(); this.scene.get('CombatSkills').cleanUp(); diff --git a/client/src/scenes/cryp.list.js b/client/src/scenes/cryp.list.js deleted file mode 100644 index 55268f01..00000000 --- a/client/src/scenes/cryp.list.js +++ /dev/null @@ -1,93 +0,0 @@ -const Phaser = require('phaser'); - -const Combat = require('./combat'); -const CrypRows = require('./cryp.row'); -const GameList = require('./game.list'); -const ItemList = require('./item.list'); -const StatSheet = require('./statsheet'); - -class CrypList extends Phaser.Scene { - constructor() { - super({ key: 'CrypList', active: true }); - } - - create() { - this.registry.events.off('changedata', this.updateData, this); - this.registry.events.off('setdata', this.updateData, this); - this.registry.events.on('changedata', this.updateData, this); - this.registry.events.on('setdata', this.updateData, this); - if (this.registry.get('cryps')) { - this.renderList(); - this.renderGameList(); - } - return true; - } - - updateData(parent, key, data) { - const UPDATE_KEYS = ['gameList', 'cryps']; - if (UPDATE_KEYS.includes(key)) { - this.renderList(); - this.renderGameList(); - } - - if (key === 'itemList') { - return this.renderItemList(); - } - - if (key === 'game' && this.scene.isActive()) { - this.scene.sleep(); - this.scene.add('Combat', Combat); - this.scene.run('Combat', data); - } - - return true; - } - - renderList() { - const cryps = this.registry.get('cryps'); - - // your cryps - if (this.CrypRows) { - this.CrypRows.cleanup(); - this.CrypRows.destroy(true); - } - this.CrypRows = new CrypRows(this, cryps); - } - - renderGameList() { - const ws = this.registry.get('ws'); - const cryps = this.registry.get('cryps'); - const gameList = this.registry.get('gameList'); - - if (this.gameList) { - this.gameList.cleanup(); - this.gameList.destroy(true); - } - - this.gameList = new GameList({ list: this, ws, cryps, gameList, events: this.game.events }); - } - - renderItemList() { - const ws = this.registry.get('ws'); - const itemList = this.registry.get('itemList'); - - if (this.itemList) { - this.itemList.cleanup(); - this.itemList.destroy(true); - } - - this.itemList = new ItemList({ list: this, ws, itemList, events: this.game.events }); - } - - - displaySkills(cryp) { - if (cryp) { - this.scene.add('StatSheet', StatSheet); - this.scene.run('StatSheet', { cryp }); - this.scene.stop(); - } - return true; - } -} - -module.exports = CrypList; diff --git a/client/src/scenes/cryp.row.js b/client/src/scenes/cryp.row.js deleted file mode 100644 index b87eaa9e..00000000 --- a/client/src/scenes/cryp.row.js +++ /dev/null @@ -1,82 +0,0 @@ -const Phaser = require('phaser'); - -const { TEXT, COLOURS, POSITIONS: { CRYP_LIST, MENU, STATS } } = require('./constants'); - -const TEXT_MARGIN = 24; - -const KEY_MAP = [ - 'keydown_ONE', - 'keydown_TWO', - 'keydown_THREE', -]; - -class CrypRows extends Phaser.GameObjects.Group { - constructor(list, cryps) { - super(list); - this.keyboard = list.input.keyboard; - - const ROW_HEIGHT = CRYP_LIST.rowHeight(cryps); - const ROW_WIDTH = CRYP_LIST.rowWidth(); - - cryps.forEach((cryp, i) => { - const ROW_X = CRYP_LIST.x(); - const ROW_Y = (i * CRYP_LIST.rowHeight(cryps)) + MENU.height(); - - const ACTIVE_FILL = cryp.active - ? 1 - : 0; - - const FILL = Object.values(COLOURS)[i]; - - const row = list.add - .rectangle(ROW_X, ROW_Y, ROW_WIDTH, ROW_HEIGHT, FILL, ACTIVE_FILL) - .setInteractive() - .setOrigin(0); - - row.on('pointerdown', () => { - list.displaySkills(cryp); - }); - - const selectFn = () => { - list.game.events.emit('CRYP_ACTIVE', cryp); - }; - - if (KEY_MAP[i]) { - this.keyboard.on(KEY_MAP[i], selectFn, this); - } - - row.cryp = cryp; - this.add(row); - - const crypStat = (stat, j) => { - const STAT_X = ROW_X; - const STAT_Y = (j * TEXT_MARGIN) + ROW_Y + TEXT_MARGIN; - - const text = list.add.text(STAT_X, STAT_Y, `${stat.stat}: ${stat.base}`, TEXT.NORMAL); - this.add(text); - }; - - const CRYP_STATS = [cryp.stamina, cryp.phys_dmg, cryp.spell_dmg]; - CRYP_STATS.forEach(crypStat); - - const selectBtn = list.add - .rectangle(ROW_WIDTH - 50, ROW_Y, 50, ROW_HEIGHT, FILL, 0.5) - .setInteractive() - .setOrigin(0); - - selectBtn.on('pointerdown', selectFn); - - this.add(selectBtn); - - this.add(list.add.text(ROW_WIDTH - 20, ROW_Y, i + 1, TEXT.HEADER)); - this.add(list.add.text(ROW_X, ROW_Y + (TEXT_MARGIN * 0), cryp.name, TEXT.HEADER)); - }); - return true; - } - - cleanup() { - KEY_MAP.forEach(k => this.keyboard.removeListener(k)); - } -} - -module.exports = CrypRows; diff --git a/client/src/scenes/cryps.js b/client/src/scenes/cryps.js index aad27933..0baf09e6 100644 --- a/client/src/scenes/cryps.js +++ b/client/src/scenes/cryps.js @@ -1,6 +1,6 @@ const Phaser = require('phaser'); -const CrypList = require('./cryp.list'); +const Header = require('./header'); const Menu = require('./menu'); function renderCryps() { @@ -19,13 +19,13 @@ function renderCryps() { }, }, scene: [ + Header, Menu, - CrypList, ], }; const game = new Phaser.Game(config); - game.scene.sleep('Combat'); + // game.scene.sleep('Combat'); function resize() { const canvas = document.querySelector('canvas'); diff --git a/client/src/scenes/header.js b/client/src/scenes/header.js new file mode 100644 index 00000000..8913f597 --- /dev/null +++ b/client/src/scenes/header.js @@ -0,0 +1,15 @@ +const Phaser = require('phaser'); + +const { TEXT } = require('./constants'); + +class Header extends Phaser.Scene { + constructor() { + super({ key: 'Header', active: true }); + } + + create() { + this.add.text(0, 0, 'cryps.gg', TEXT.HEADER); + } +} + +module.exports = Header; diff --git a/client/src/scenes/menu.cryps.list.js b/client/src/scenes/menu.cryps.list.js new file mode 100644 index 00000000..09423bcb --- /dev/null +++ b/client/src/scenes/menu.cryps.list.js @@ -0,0 +1,98 @@ +const Phaser = require('phaser'); + +const { TEXT, COLOURS, POSITIONS: { CRYP_LIST, MENU } } = require('./constants'); + +const TEXT_MARGIN = 24; + +const KEY_MAP = [ + 'keydown_ONE', + 'keydown_TWO', + 'keydown_THREE', +]; + +class MenuCrypList extends Phaser.Scene { + constructor() { + super({ key: 'MenuCrypList' }); + } + + create() { + this.registry.events.on('changedata', this.updateData, this); + this.registry.events.on('setdata', this.updateData, this); + this.addCrypRows(this.registry.get('cryps')); + + } + + updateData(parent, key, data) { + if (key === 'cryps') { + KEY_MAP.forEach(k => this.input.keyboard.removeListener(k)); + this.addCrypRows(data); + } + } + + addCrypRows(cryps) { + if (!cryps) return true; + if (this.crypRows) this.crypRows.destroy(true); + this.crypRows = this.add.group(); + const ROW_HEIGHT = CRYP_LIST.rowHeight(cryps); + const ROW_WIDTH = CRYP_LIST.rowWidth(); + + cryps.forEach((cryp, i) => { + const ROW_X = CRYP_LIST.x(); + const ROW_Y = (i * CRYP_LIST.rowHeight(cryps)) + MENU.height(); + + const ACTIVE_FILL = cryp.active + ? 1 + : 0; + + const FILL = Object.values(COLOURS)[i]; + + const row = this.add.rectangle(ROW_X, ROW_Y, ROW_WIDTH, ROW_HEIGHT, FILL, ACTIVE_FILL) + .setInteractive() + .setOrigin(0) + .on('pointerdown', () => { + this.scene.get('Menu').displaySkills(cryp); + }); + + const selectFn = () => { + this.game.events.emit('CRYP_ACTIVE', cryp); + }; + + if (KEY_MAP[i]) { + this.input.keyboard.on(KEY_MAP[i], selectFn, this); + } + + row.cryp = cryp; + this.crypRows.add(row); + + const crypStat = (stat, j) => { + const STAT_X = ROW_X; + const STAT_Y = (j * TEXT_MARGIN) + ROW_Y + TEXT_MARGIN; + + this.crypRows.add(this.add.text(STAT_X, STAT_Y, `${stat.stat}: ${stat.base}`, TEXT.NORMAL)); + }; + + const CRYP_STATS = [cryp.stamina, cryp.phys_dmg, cryp.spell_dmg]; + CRYP_STATS.forEach(crypStat); + + const selectBtn = this.add + .rectangle(ROW_WIDTH - 50, ROW_Y, 50, ROW_HEIGHT, FILL, 0.5) + .setInteractive() + .setOrigin(0); + + selectBtn.on('pointerdown', selectFn); + + this.crypRows.add(this.add.text(ROW_WIDTH - 20, ROW_Y, i + 1, TEXT.HEADER)); + this.crypRows.add(this.add.text(ROW_X, ROW_Y + (TEXT_MARGIN * 0), cryp.name, TEXT.HEADER)); + }); + return true; + } + + cleanUp() { + KEY_MAP.forEach(k => this.input.keyboard.removeListener(k)); + this.registry.events.off('changedata', this.updateData, this); + this.registry.events.off('setdata', this.updateData, this); + this.scene.remove(); + } +} + +module.exports = MenuCrypList; diff --git a/client/src/scenes/game.list.js b/client/src/scenes/menu.game.list.js similarity index 63% rename from client/src/scenes/game.list.js rename to client/src/scenes/menu.game.list.js index d68a26c0..f1ef325f 100644 --- a/client/src/scenes/game.list.js +++ b/client/src/scenes/menu.game.list.js @@ -1,4 +1,5 @@ const Phaser = require('phaser'); +const Missions = require('./missions'); const { TEXT, @@ -6,60 +7,80 @@ const { POSITIONS: { GAME_LIST }, } = require('./constants'); -class GameList extends Phaser.GameObjects.Group { - constructor(args) { - super(args.list); +class MenuGameList extends Phaser.Scene { + constructor() { + super({ key: 'MenuGameList' }); + } - const { list, events, ws, cryps, gameList } = args; + create() { + this.registry.events.on('changedata', this.updateData, this); + this.registry.events.on('setdata', this.updateData, this); + this.addGameList(this.registry.get('gameList')); + } + + updateData(parent, key, data) { + if (key === 'gameList') { + this.addGameList(data); + } + } + + addGameList(gameList) { + if (gameList.length === 0) return true; + if (this.gameList) this.gameList.destroy(true); + this.gameList = this.add.group(); + + const ws = this.registry.get('ws'); + const cryps = this.registry.get('cryps'); + const { events } = this.game; const X = GAME_LIST.x(); const WIDTH = Math.floor(GAME_LIST.width() / 2); const HEIGHT = GAME_LIST.height(); const TEXT_MARGIN = 24; - const spawn = list.add + const spawn = this.add .rectangle(X, GAME_LIST.y(0), WIDTH, HEIGHT, 0x888888) .setInteractive() .setOrigin(0); - this.add(list.add + this.gameList.add(this.add .text(spawn.getCenter().x, spawn.getCenter().y, 'spawn\ncryp', TEXT.HEADER) .setOrigin(0.5, 0.5)); - const pvp = list.add + const pvp = this.add .rectangle(X + WIDTH, GAME_LIST.y(0), WIDTH, HEIGHT, 0x440000) .setInteractive() .setOrigin(0); - this.add(list.add + this.gameList.add(this.add .text(pvp.getCenter().x, pvp.getCenter().y, 'new PVP\ngame', TEXT.HEADER) .setOrigin(0.5, 0.5)); - const pve = list.add + const pve = this.add .rectangle(X, GAME_LIST.y(1), WIDTH, HEIGHT, 0x004400) .setInteractive() .setOrigin(0); - this.add(list.add + this.gameList.add(this.add .text(pve.getCenter().x, pve.getCenter().y, 'new PVE\ngame', TEXT.HEADER) .setOrigin(0.5, 0.5)); - const boss = list.add + const boss = this.add .rectangle(X, GAME_LIST.y(2), WIDTH, HEIGHT, 0x441122) .setInteractive() .setOrigin(0); - this.add(list.add + this.gameList.add(this.add .text(boss.getCenter().x, boss.getCenter().y, 'new Boss\ngame', TEXT.HEADER) .setOrigin(0.5, 0.5)); - const refresh = list.add + const refresh = this.add .rectangle(X + WIDTH, GAME_LIST.y(1), WIDTH, HEIGHT, 0x000044) .setInteractive() .setOrigin(0); - this.add(list.add + this.gameList.add(this.add .text(refresh.getCenter().x, refresh.getCenter().y, 'refresh\ngame list', TEXT.HEADER) .setOrigin(0.5, 0.5)); @@ -68,15 +89,15 @@ class GameList extends Phaser.GameObjects.Group { const GAME_X = GAME_LIST.x(); const GAME_Y = GAME_LIST.rowY(i); - const gameBox = list.add + const gameBox = this.add .rectangle(GAME_X, GAME_Y, WIDTH * 2, HEIGHT, 0x111111) .setInteractive() .setOrigin(0); const TITLE = game.teams[0].cryps.map(c => c.name).join(', '); - this.add(list.add.text(GAME_X, GAME_Y, TITLE, TEXT.NORMAL)); - this.add(list.add.text(GAME_X, GAME_Y + TEXT_MARGIN, `${game.team_size}v${game.team_size}`, TEXT.NORMAL)); + this.gameList.add(this.add.text(GAME_X, GAME_Y, TITLE, TEXT.NORMAL)); + this.gameList.add(this.add.text(GAME_X, GAME_Y + TEXT_MARGIN, `${game.team_size}v${game.team_size}`, TEXT.NORMAL)); gameBox.on('pointerdown', () => { const team = cryps.filter(c => c.active).map(c => c.id); @@ -104,6 +125,9 @@ class GameList extends Phaser.GameObjects.Group { 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.scene.stop(); return ws.sendGamePve(team, 'Boss'); }); @@ -115,9 +139,12 @@ class GameList extends Phaser.GameObjects.Group { return true; } - cleanup() { - return true; + cleanUp() { + this.registry.events.off('changedata', this.updateData, this); + this.registry.events.off('setdata', this.updateData, this); + this.scene.remove(); } + } -module.exports = GameList; +module.exports = MenuGameList; diff --git a/client/src/scenes/menu.js b/client/src/scenes/menu.js index 122d11ce..0ccda427 100644 --- a/client/src/scenes/menu.js +++ b/client/src/scenes/menu.js @@ -1,18 +1,88 @@ const Phaser = require('phaser'); -const { TEXT } = require('./constants'); +const MenuCrypList = require('./menu.cryps.list'); +const MenuGameList = require('./menu.game.list'); + +const Combat = require('./combat'); +// const ItemList = require('./item.list'); +const StatSheet = require('./statsheet'); class Menu extends Phaser.Scene { - constructor(props) { + constructor() { super({ key: 'Menu', active: true }); } create() { - this.add.text(0, 0, 'cryps.gg', TEXT.HEADER); - // this.scene.sleep('Passives'); - this.input.keyboard.on('keydown_F', () => { - this.scene.wake('Passives'); - }, 0, this); + + this.registry.events.on('changedata', this.updateData, this); + this.registry.events.on('setdata', this.updateData, this); + this.scene.add('MenuCrypList', MenuCrypList, true); + this.scene.add('MenuGameList', MenuGameList, true); + this.sys.events.on('wake', () => { + this.wakeMenuScenes(); + }); + return true; + } + + wakeMenuScenes() { + this.registry.events.on('changedata', this.updateData, this); + this.registry.events.on('setdata', this.updateData, this); + this.scene.add('MenuCrypList', MenuCrypList, true); + this.scene.add('MenuGameList', MenuGameList, true); + + console.log(this.scene.isActive()); + } + + updateData(parent, key, data) { + if (key === 'itemList') { + // return this.renderItemList(); + } + + if (key === 'game' && this.scene.isActive()) { + this.cleanUp(); + this.scene.add('Combat', Combat); + this.scene.run('Combat', data); + this.scene.sleep(); + } + + return true; + } + + // Scene switch to statsheet called by MenuCrypRows scene + displaySkills(cryp) { + if (cryp) { + this.cleanUp(); + + this.scene.add('StatSheet', StatSheet); + this.scene.run('StatSheet', cryp); + this.scene.sleep(); + } + return true; + } + + renderItemList() { + const ws = this.registry.get('ws'); + const itemList = this.registry.get('itemList'); + + if (this.itemList) { + this.itemList.cleanup(); + this.itemList.destroy(true); + } + + // this.itemList = new ItemList({ list: this, ws, itemList, events: this.game.events }); + } + + cleanUp() { + // Remove all the scenes except header and this scene (menu) + this.registry.events.off('changedata', this.updateData, this); + this.registry.events.off('setdata', this.updateData, this); + const ACTIVE_SCENES = ['Header', 'Menu']; + Object.keys(this.scene.manager.keys).forEach((key) => { + if (!ACTIVE_SCENES.includes(key)) { + // Remove listeners and scene + this.scene.get(key).cleanUp(); + } + }); } } diff --git a/client/src/scenes/missions.js b/client/src/scenes/missions.js new file mode 100644 index 00000000..58797868 --- /dev/null +++ b/client/src/scenes/missions.js @@ -0,0 +1,145 @@ +const Phaser = require('phaser'); +const Node = require('./passive.node'); +const nodeData = require('./passive.data.node'); +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() { + this.load.image('eye', 'https://labs.phaser.io/assets/particles/green-orb.png'); + } + + create() { + 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(); + this.drawEdges(); + } + + addNodes() { + this.nodes = []; + this.nodeData.forEach((n) => { + this.nodes[n.id] = this.add.existing( + new Node(this, n.x, n.y, n.id, n.alloc, n.text) + ).setInteractive(); + }); + } + + addCameraControl() { + this.controls = new Phaser.Cameras.Controls.SmoothedKeyControl({ + camera: this.cameras.main, + zoomIn: this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.Q), + zoomOut: this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.E), + acceleration: 0.005, + drag: 0.0005, + maxSpeed: 0.001, + }); + } + + addEvents() { + this.input.on('pointerover', (pointer, gameObjects) => { + if (gameObjects[0] instanceof Node) { + if (!gameObjects[0].alloc) { + gameObjects[0].setTint(0xffffff); + } + this.displayNodeText(gameObjects[0], pointer); + } + }); + this.input.on('pointerout', (pointer, gameObjects) => { + if (gameObjects[0] instanceof Node) { + if (!gameObjects[0].alloc) gameObjects[0].clearTint(); + this.nodeText.destroy(); + } + }); + this.input.on('pointerup', (pointer, gameObjects) => { + if (Math.abs(pointer.upX - pointer.downX) < 5 + && Math.abs(pointer.upY - pointer.downY) < 5) { + // Check cursor hasn't significantly moved during point allocation + // If panning and mouse release is on node it won't allocate + if (gameObjects[0] instanceof Node) { + gameObjects[0].allocate(); + } + } + }); + this.input.on('pointermove', (pointer) => { + const zoomFactor = 2 / this.cameras.main.zoom; + if (this.registry.get('pan')) { + const points = pointer.getInterpolatedPosition(2); + this.cameras.main.scrollX -= zoomFactor * (points[1].x - points[0].x); + 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() { + this.graphics.clear(); + this.edgeData.forEach((e) => { + const drawEdge = this.nodeData.filter(n => ( + e[0] === n.id || e[1] === n.id + )); + if (drawEdge[0].alloc && drawEdge[1].alloc) { + 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); + }); + } + + displayNodeText(node, pointer) { + if (this.nodeText) this.nodeText.destroy(); + this.nodeText = this.add.text(node.x, node.y, node.text, { + fontSize: '16px', + fontFamily: 'Arial', + color: '#ffffff', + backgroundColor: '#222222', + }).setPadding(32); + this.nodeText.setAlpha(0.8); + this.nodeText.setOrigin(pointer.x >= COMBAT.width() * 0.6 ? 1 : 0, + pointer.y >= COMBAT.height() * 0.5 ? 1 : 0); + this.nodeText.setWordWrapWidth(450); + 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; + } + + update(delta) { + this.controls.update(delta); + } +} + +module.exports = Missions; diff --git a/client/src/scenes/statsheet.js b/client/src/scenes/statsheet.js index 71fc66be..389d51b4 100644 --- a/client/src/scenes/statsheet.js +++ b/client/src/scenes/statsheet.js @@ -15,8 +15,8 @@ class StatSheet extends Phaser.Scene { super({ key: 'StatSheet' }); } - create(props) { - const { cryp } = props; + create(cryp) { + console.log(cryp); this.cryp = cryp; this.stats = new Stats(this, cryp); this.addControls(cryp); @@ -27,7 +27,8 @@ class StatSheet extends Phaser.Scene { addControls(cryp) { const menuCback = () => { this.registry.events.off('changedata', this.updateData, this); - this.scene.run('CrypList'); + this.registry.set('game', null); + this.scene.switch('Menu'); // Switch back to menu this.scene.remove('Skills'); this.scene.remove('Passives'); this.scene.remove(); From e3dd8cfad77b3117af7e9700294ed2dc03963991 Mon Sep 17 00:00:00 2001 From: Mashy Date: Fri, 21 Dec 2018 20:53:04 +1000 Subject: [PATCH 2/2] fixed some stuff and really basic mission selection --- client/src/scenes/menu.game.list.js | 11 ++++---- client/src/scenes/menu.js | 42 +++++++++++++++++++---------- client/src/scenes/missions.js | 9 +++++-- 3 files changed, 40 insertions(+), 22 deletions(-) diff --git a/client/src/scenes/menu.game.list.js b/client/src/scenes/menu.game.list.js index f1ef325f..5b965f6c 100644 --- a/client/src/scenes/menu.game.list.js +++ b/client/src/scenes/menu.game.list.js @@ -3,7 +3,6 @@ const Missions = require('./missions'); const { TEXT, - // COLOURS, POSITIONS: { GAME_LIST }, } = require('./constants'); @@ -25,7 +24,7 @@ class MenuGameList extends Phaser.Scene { } addGameList(gameList) { - if (gameList.length === 0) return true; + if (!gameList) return true; if (this.gameList) this.gameList.destroy(true); this.gameList = this.add.group(); @@ -66,12 +65,12 @@ class MenuGameList extends Phaser.Scene { .setOrigin(0.5, 0.5)); const boss = this.add - .rectangle(X, GAME_LIST.y(2), WIDTH, HEIGHT, 0x441122) + .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, 'new Boss\ngame', TEXT.HEADER) + .text(boss.getCenter().x, boss.getCenter().y, 'MISSIONS\n', TEXT.HEADER) .setOrigin(0.5, 0.5)); @@ -127,8 +126,8 @@ class MenuGameList extends Phaser.Scene { if (team.length === 0) return false; this.scene.add('Missions', Missions); this.scene.run('Missions'); - this.scene.stop(); - return ws.sendGamePve(team, 'Boss'); + this.cleanUp(); + // return ws.sendGamePve(team, 'Boss'); }); diff --git a/client/src/scenes/menu.js b/client/src/scenes/menu.js index 0ccda427..42e6440a 100644 --- a/client/src/scenes/menu.js +++ b/client/src/scenes/menu.js @@ -4,7 +4,7 @@ const MenuCrypList = require('./menu.cryps.list'); const MenuGameList = require('./menu.game.list'); const Combat = require('./combat'); -// const ItemList = require('./item.list'); +const ItemList = require('./item.list'); const StatSheet = require('./statsheet'); class Menu extends Phaser.Scene { @@ -13,18 +13,15 @@ class Menu extends Phaser.Scene { } create() { - this.registry.events.on('changedata', this.updateData, this); - this.registry.events.on('setdata', this.updateData, this); - this.scene.add('MenuCrypList', MenuCrypList, true); - this.scene.add('MenuGameList', MenuGameList, true); + this.registry.events.on('setdata', this.setData, this); this.sys.events.on('wake', () => { - this.wakeMenuScenes(); + this.addMenuScenes(); }); return true; } - wakeMenuScenes() { + addMenuScenes() { this.registry.events.on('changedata', this.updateData, this); this.registry.events.on('setdata', this.updateData, this); this.scene.add('MenuCrypList', MenuCrypList, true); @@ -33,15 +30,27 @@ class Menu extends Phaser.Scene { console.log(this.scene.isActive()); } + setData(parent, key, data) { + if (key === 'cryps') { + this.scene.add('MenuCrypList', MenuCrypList, true); + this.scene.add('MenuGameList', MenuGameList, true); + } + + if (key === 'game') { + this.cleanUp(); + this.scene.manager.add('Combat', Combat, true, data); + this.scene.sleep(); + } + } + updateData(parent, key, data) { if (key === 'itemList') { - // return this.renderItemList(); + return this.renderItemList(data); } if (key === 'game' && this.scene.isActive()) { this.cleanUp(); - this.scene.add('Combat', Combat); - this.scene.run('Combat', data); + this.scene.manager.add('Combat', Combat, true, data); this.scene.sleep(); } @@ -60,16 +69,16 @@ class Menu extends Phaser.Scene { return true; } - renderItemList() { + renderItemList(itemList) { const ws = this.registry.get('ws'); - const itemList = this.registry.get('itemList'); - if (this.itemList) { this.itemList.cleanup(); this.itemList.destroy(true); } - // this.itemList = new ItemList({ list: this, ws, itemList, events: this.game.events }); + console.log(itemList); + + this.itemList = new ItemList({ list: this, ws, itemList, events: this.game.events }); } cleanUp() { @@ -84,6 +93,11 @@ class Menu extends Phaser.Scene { } }); } + + update() { + // console.log(this.registry.get('itemList')); + + } } module.exports = Menu; diff --git a/client/src/scenes/missions.js b/client/src/scenes/missions.js index 58797868..5cbc6a42 100644 --- a/client/src/scenes/missions.js +++ b/client/src/scenes/missions.js @@ -74,7 +74,8 @@ class Missions extends Phaser.Scene { // Check cursor hasn't significantly moved during point allocation // If panning and mouse release is on node it won't allocate if (gameObjects[0] instanceof Node) { - gameObjects[0].allocate(); + const team = this.registry.get('cryps').filter(c => c.active).map(c => c.id); + this.registry.get('ws').sendGamePve(team, 'Boss'); } } }); @@ -111,7 +112,7 @@ class Missions extends Phaser.Scene { displayNodeText(node, pointer) { if (this.nodeText) this.nodeText.destroy(); - this.nodeText = this.add.text(node.x, node.y, node.text, { + this.nodeText = this.add.text(node.x, node.y, 'Going on a mission', { fontSize: '16px', fontFamily: 'Arial', color: '#ffffff', @@ -140,6 +141,10 @@ class Missions extends Phaser.Scene { update(delta) { this.controls.update(delta); } + + cleanUp() { + this.scene.remove(); + } } module.exports = Missions;