diff --git a/client/src/scenes/cryp.list.js b/client/src/scenes/cryp.list.js old mode 100644 new mode 100755 index b7aa761c..ededf4d0 --- a/client/src/scenes/cryp.list.js +++ b/client/src/scenes/cryp.list.js @@ -1,6 +1,7 @@ const Phaser = require('phaser'); -const crypRow = require('./cryp.row'); +const CrypRow = require('./cryp.row'); +const CrypPage = require('./cryp.page'); class CrypList extends Phaser.Scene { constructor() { @@ -10,40 +11,31 @@ class CrypList extends Phaser.Scene { create() { this.registry.events.on('changedata', this.updateData, this); this.input.on('gameobjectup', this.clickHandler, this); + this.CrypPage = null; console.log('creating'); return true; } updateData(parent, key, data) { if (key === 'cryps') { - this.renderCryps(data); + this.clearCryps(); + this.CrypRow = new CrypRow(this, data); } + window.redraw = this.clearCryps.bind(this); return true; } - redraw() { - for (let i = this.children.list.length - 1; i >= 0; i--) { - this.children.list[i].destroy(); - } - } - - renderCryps(cryps) { - if (!cryps) return true; - console.log(JSON.stringify(this.children.list)); - console.log(this.children.length); - this.redraw(); - - cryps.forEach((cryp, i) => { - crypRow(this, cryp, i); - }); - - window.redraw = this.redraw.bind(this); - return true; + clearCryps() { + if (this.CrypRow) this.CrypRow.destroy(true); } clickHandler(pointer, crypBox) { - console.log(crypBox); - this.registry.set('activeCryp', Object.create(crypBox.cryp)); + if (this.CrypPage) { + this.CrypPage.destroy(true); + } + this.CrypPage = new CrypPage(this, crypBox.cryp); + return true; + // this.registry.get('ws').sendGamePve(crypBox.cryp.id); } } diff --git a/client/src/scenes/cryp.page.js b/client/src/scenes/cryp.page.js old mode 100644 new mode 100755 index b18443b6..f4cef355 --- a/client/src/scenes/cryp.page.js +++ b/client/src/scenes/cryp.page.js @@ -11,43 +11,17 @@ const TEXT_MARGIN = 24; const xPos = i => 0; const yPos = i => (i * ROW_HEIGHT + ROW_MARGIN) + TOP_MARGIN; -function crypSkill(scene, skill, i) { - scene.add.text(500, 500 + (TEXT_MARGIN * (i + 1)), skill.skill, { fontFamily: 'Arial', fontSize: 24, color: '#ffffff', fontStyle: 'bold' }); - return true; -} - - -class CrypPage extends Phaser.Scene { - constructor() { - super({ key: 'CrypPage', active: true }); - } - - create() { - this.registry.events.on('changedata', this.updateData, this); - return true; - } - - updateData(parent, key, data) { - if (key === 'activeCryp') { - this.renderCryp(data); - } - return true; - } - - redraw() { - for (let i = this.children.list.length - 1; i >= 0; i--) { - this.children.list[i].destroy(); - } - } - - renderCryp(cryp) { - if (!cryp) return true; - this.redraw(); - - this.add.text(500, 500, cryp.name, { fontFamily: 'Arial', fontSize: 24, color: '#ffffff', fontStyle: 'bold' }); - cryp.skills.forEach((skill, i) => crypSkill(this, skill, i)); - - return true; +class CrypPage extends Phaser.GameObjects.Group { + constructor(scene, cryp) { + super(scene); + this.add(scene.add.text(500, 500, cryp.name, { + fontFamily: 'Arial', fontSize: 24, color: '#ffffff', fontStyle: 'bold', + })); + cryp.skills.forEach((skill, i) => this.add( + scene.add.text(500, 500 + (TEXT_MARGIN * (i + 1)), skill.skill, { + fontFamily: 'Arial', fontSize: 24, color: '#ffffff', fontStyle: 'bold', + }) + )); } } diff --git a/client/src/scenes/cryp.row.js b/client/src/scenes/cryp.row.js old mode 100644 new mode 100755 index d8e3b77b..8a853c72 --- a/client/src/scenes/cryp.row.js +++ b/client/src/scenes/cryp.row.js @@ -11,20 +11,23 @@ const TEXT_MARGIN = 24; const xPos = i => 0; const yPos = i => (i * ROW_HEIGHT + ROW_MARGIN) + TOP_MARGIN; -function crypRow(list, cryp, i) { - console.log(i); - const X_ORIGIN = xPos(i); - const Y_ORIGIN = yPos(i); +class CrypRow extends Phaser.GameObjects.Group { + constructor(list, cryps) { + super(list); + cryps.forEach((cryp, i) => { + const X_ORIGIN = xPos(i); + const Y_ORIGIN = yPos(i); + const row = list.add.rectangle(X_ORIGIN, Y_ORIGIN, ROW_WIDTH, ROW_HEIGHT, ROW_FILL * Math.random()) + .setInteractive() + .setOrigin(0); - const row = list.add.rectangle(X_ORIGIN, Y_ORIGIN, ROW_WIDTH, ROW_HEIGHT, ROW_FILL * Math.random()) - .setInteractive() - .setOrigin(0); - - row.cryp = cryp; - list.add.text(X_ORIGIN, Y_ORIGIN + (TEXT_MARGIN * 0), cryp.name, { fontFamily: 'Arial', fontSize: 24, color: '#ffffff', fontStyle: 'bold' }); - list.add.text(X_ORIGIN, Y_ORIGIN + (TEXT_MARGIN * 1), cryp.stamina.base, { fontFamily: 'Arial', fontSize: 24, color: '#ffffff', fontStyle: 'bold' }); - - return true; + row.cryp = cryp; + this.add(row); + this.add(list.add.text(X_ORIGIN, Y_ORIGIN + (TEXT_MARGIN * 0), cryp.name, { fontFamily: 'Arial', fontSize: 24, color: '#ffffff', fontStyle: 'bold' })); + this.add(list.add.text(X_ORIGIN, Y_ORIGIN + (TEXT_MARGIN * 1), cryp.stamina.base, { fontFamily: 'Arial', fontSize: 24, color: '#ffffff', fontStyle: 'bold' })); + }); + return true; + } } -module.exports = crypRow; \ No newline at end of file +module.exports = CrypRow; \ No newline at end of file diff --git a/client/src/scenes/cryps.js b/client/src/scenes/cryps.js old mode 100644 new mode 100755 index 224b50dd..eadaee93 --- a/client/src/scenes/cryps.js +++ b/client/src/scenes/cryps.js @@ -23,7 +23,7 @@ function renderCryps(store) { scene: [ Menu, CrypList, - CrypPage, + // Passives, ], }; @@ -32,8 +32,10 @@ function renderCryps(store) { store.subscribe(() => { const state = store.getState(); game.registry.set('cryps', state.cryps); + game.registry.set('ws', state.ws); }); - + window.addEventListener('mouseup', () => game.registry.set('pan', false)); + window.addEventListener('mousedown', () => game.registry.set('pan', true)); window.addEventListener('resize', () => game.resize(window.innerWidth, window.innerHeight), false); return game; diff --git a/client/src/scenes/menu.js b/client/src/scenes/menu.js old mode 100644 new mode 100755 diff --git a/client/src/scenes/passives.js b/client/src/scenes/passives.js index 6d4bade1..94fffeb0 100755 --- a/client/src/scenes/passives.js +++ b/client/src/scenes/passives.js @@ -9,7 +9,7 @@ const passiveDataEdge = require('./passive.data.edge'); class PhaserPassives extends Phaser.Scene { constructor() { - super('passives'); + super({ key: 'Passives', active: true }); } preload() { @@ -73,7 +73,7 @@ class PhaserPassives extends Phaser.Scene { }); this.input.on('pointermove', (pointer) => { const zoomFactor = 2 / this.cameras.main.zoom; - if (this.pan) { + 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); @@ -82,8 +82,8 @@ class PhaserPassives extends Phaser.Scene { this.input.keyboard.on('keydown_A', () => { this.updatePassives(); // Will update nodes from state }, 0, this); - this.input.keyboard.on('keydown_S', () => { - this.scene.switch('combat'); + this.input.keyboard.on('keydown_G', () => { + this.scene.sleep('Passives'); }, 0, this); } @@ -98,7 +98,6 @@ class PhaserPassives extends Phaser.Scene { } else { this.graphics.lineStyle(2, 0xffffff, 0.2); } - // console.log(drawEdge); this.graphics.lineBetween(drawEdge[0].x, drawEdge[0].y, drawEdge[1].x, drawEdge[1].y); }); }