From 21d2f5c7e43a6546a385b22a46083e99893e1867 Mon Sep 17 00:00:00 2001 From: Mashy Date: Sun, 18 Nov 2018 01:47:55 +1000 Subject: [PATCH 1/6] Legit as fuck hover text --- client/src/components/cryp.list.jsx | 8 +-- client/src/components/game.jsx | 8 +-- client/src/components/passive.node.js | 8 +-- client/src/components/passive.phaser.js | 81 +++++++++++++--------- client/src/components/phaser.container.jsx | 8 +-- 5 files changed, 62 insertions(+), 51 deletions(-) diff --git a/client/src/components/cryp.list.jsx b/client/src/components/cryp.list.jsx index a3f094ff..aeae2ffc 100755 --- a/client/src/components/cryp.list.jsx +++ b/client/src/components/cryp.list.jsx @@ -27,8 +27,8 @@ function CrypList({ -
{cryp.hp.value} / {cryp.stamina.value} HP
- +
{cryp.hp.base} / {cryp.stamina.base} HP
+
{cryp.xp} / {Math.pow(2, cryp.lvl + 1)} XP
@@ -37,7 +37,7 @@ function CrypList({ @@ -45,7 +45,7 @@ function CrypList({ diff --git a/client/src/components/game.jsx b/client/src/components/game.jsx index c1944f18..87465d75 100755 --- a/client/src/components/game.jsx +++ b/client/src/components/game.jsx @@ -78,8 +78,8 @@ function GamePanel(props) { -
{cryp.hp.value} / {cryp.stamina.value} HP
- +
{cryp.hp.base} / {cryp.stamina.base} HP
+
{cryp.xp} / {Math.pow(2, cryp.lvl + 1)} XP
@@ -120,8 +120,8 @@ function GamePanel(props) { -
{cryp.hp.value} / {cryp.stamina.value} HP
- +
{cryp.hp.base} / {cryp.stamina.base} HP
+
{cryp.xp} / {Math.pow(2, cryp.lvl + 1)} XP
diff --git a/client/src/components/passive.node.js b/client/src/components/passive.node.js index b44f0b63..1a806d37 100755 --- a/client/src/components/passive.node.js +++ b/client/src/components/passive.node.js @@ -6,7 +6,7 @@ class PassiveNode extends Phaser.GameObjects.Sprite { this.setTexture('eye'); this.scene = scene; this.alloc = alloc; - this.text = text; + this.text = (text.indexOf(',') > -1) ? text.split(',') : text; this.id = id; this.setPosition(x, y); @@ -30,11 +30,7 @@ class PassiveNode extends Phaser.GameObjects.Sprite { } allocate(alloc) { - if (alloc !== undefined) { - this.alloc = alloc; - } else { - this.alloc = !this.alloc; - } + this.alloc = (alloc !== undefined) ? alloc : !this.alloc; this.updateNode(); } diff --git a/client/src/components/passive.phaser.js b/client/src/components/passive.phaser.js index 0ba2fb38..b6407b16 100755 --- a/client/src/components/passive.phaser.js +++ b/client/src/components/passive.phaser.js @@ -14,22 +14,22 @@ class PhaserPassives extends Phaser.Scene { } create() { + this.init(); + this.addPassiveNodes(); + this.addCameraControl(); + this.addEvents(); + this.drawPassiveEdges(); + } + + init() { this.background = this.add.image(0, 0, 'background'); this.background.setScale(5); this.background.setInteractive(); this.graphics = this.add.graphics(); - this.nodeText = this.add.text(10000, 10000, 'grep', { - fontSize: '32px', - fontFamily: 'Arial', - color: '#ffffff', - backgroundColor: '#000000', - }).setPadding(32); - + this.textGraphic = new Phaser.GameObjects.Graphics(this); + this.add.existing(this.textGraphic); this.passiveNodeData = passiveDataNode; this.passiveEdgeData = passiveDataEdge; - this.addPassiveNodes(); - this.drawPassiveEdges(); - this.addCanmeraControl(); } addPassiveNodes() { @@ -39,15 +39,28 @@ class PhaserPassives extends Phaser.Scene { new PassiveNode(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 PassiveNode) { - if (!gameObjects[0].alloc) gameObjects[0].setTint(0xff00ff); - this.nodeText.x = pointer.x + this.cameras.main.scrollX; - this.nodeText.y = pointer.y + this.cameras.main.scrollY; - this.nodeText.text = gameObjects[0].text; - } else { - this.nodeText.text = ''; + if (!gameObjects[0].alloc) { + gameObjects[0].setTint(0xff00ff); + } + this.displayPassiveText(gameObjects[0], pointer); + } else if (this.nodeText) { + this.nodeText.destroy(); } }); this.input.on('pointerout', (pointer, gameObjects) => { @@ -65,7 +78,13 @@ class PhaserPassives extends Phaser.Scene { } } }); - + this.input.on('pointermove', (pointer) => { + if (this.pan) { + const points = pointer.getInterpolatedPosition(2); + this.cameras.main.scrollX -= (points[1].x - points[0].x) * 2; + this.cameras.main.scrollY -= (points[1].y - points[0].y) * 2; + } + }, this); this.input.keyboard.on('keydown_A', () => { this.updatePassives(); // Will update nodes from state }, 0, this); @@ -87,22 +106,18 @@ class PhaserPassives extends Phaser.Scene { }); } - addCanmeraControl() { - this.input.on('pointermove', (pointer) => { - if (this.pan) { - const points = pointer.getInterpolatedPosition(2); - this.cameras.main.scrollX -= (points[1].x - points[0].x) * 2; - this.cameras.main.scrollY -= (points[1].y - points[0].y) * 2; - } - }, this); - 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, - }); + displayPassiveText(node, pointer) { + this.nodeText = this.add.text(0, 0, '', { + fontSize: '20px', + fontFamily: 'Arial', + color: '#ffffff', + backgroundColor: '#222222', + }).setPadding(32); + this.nodeText.setScale(1 / this.cameras.main.zoom); + this.nodeText.setWordWrapWidth(450); + this.nodeText.setPosition(node.x, node.y); + this.nodeText.setOrigin(pointer.x >= 600 ? 1 : 0, pointer.y >= 450 ? 1 : 0); + this.nodeText.text = node.text; } updatePassives() { diff --git a/client/src/components/phaser.container.jsx b/client/src/components/phaser.container.jsx index 75460513..dbb384a0 100755 --- a/client/src/components/phaser.container.jsx +++ b/client/src/components/phaser.container.jsx @@ -25,13 +25,13 @@ class PhaserInstance extends preact.Component { const otherTeams = nextProps.game.teams.filter(t => t.id !== nextProps.account.id); if (playerTeam && otherTeams[0] && this.PhaserCombat.loaded) { - this.PhaserCombat.setPlayerOneHp(`${playerTeam.cryps[0].hp.value.toString()} / ${playerTeam.cryps[0].stamina.value.toString()} HP`); - this.PhaserCombat.setPlayerTwoHp(`${otherTeams[0].cryps[0].hp.value.toString()} / ${otherTeams[0].cryps[0].stamina.value.toString()} HP`); + this.PhaserCombat.setPlayerOneHp(`${playerTeam.cryps[0].hp.base.toString()} / ${playerTeam.cryps[0].stamina.base.toString()} HP`); + this.PhaserCombat.setPlayerTwoHp(`${otherTeams[0].cryps[0].hp.base.toString()} / ${otherTeams[0].cryps[0].stamina.base.toString()} HP`); - if (playerTeam.cryps[0].hp.value === 0) { + if (playerTeam.cryps[0].hp.base === 0) { // this.PhaserCombat.skills('blast', 400, -150); this.PhaserCombat.skills('chargeBall', 'green', 400, -250); - } else if (otherTeams[0].cryps[0].hp.value === 0) { + } else if (otherTeams[0].cryps[0].hp.base === 0) { // this.PhaserCombat.skills('blast', 180, 150); this.PhaserCombat.skills('chargeBall', 'green', 180, 250); } From 3dc6baf2b93e8a09ce410ae61bd3128c298be408 Mon Sep 17 00:00:00 2001 From: Mashy Date: Sun, 18 Nov 2018 01:54:09 +1000 Subject: [PATCH 2/6] woops --- client/src/components/passive.phaser.js | 1 + 1 file changed, 1 insertion(+) diff --git a/client/src/components/passive.phaser.js b/client/src/components/passive.phaser.js index b6407b16..32fff296 100755 --- a/client/src/components/passive.phaser.js +++ b/client/src/components/passive.phaser.js @@ -107,6 +107,7 @@ class PhaserPassives extends Phaser.Scene { } displayPassiveText(node, pointer) { + if (this.nodeText) this.nodeText.destroy(); this.nodeText = this.add.text(0, 0, '', { fontSize: '20px', fontFamily: 'Arial', From e3277c3478614983fee242a7470fff448dcdb130 Mon Sep 17 00:00:00 2001 From: Mashy Date: Sun, 18 Nov 2018 10:20:35 +1000 Subject: [PATCH 3/6] text alpha (see through) --- client/src/components/passive.phaser.js | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/client/src/components/passive.phaser.js b/client/src/components/passive.phaser.js index 32fff296..699bb1bf 100755 --- a/client/src/components/passive.phaser.js +++ b/client/src/components/passive.phaser.js @@ -108,17 +108,16 @@ class PhaserPassives extends Phaser.Scene { displayPassiveText(node, pointer) { if (this.nodeText) this.nodeText.destroy(); - this.nodeText = this.add.text(0, 0, '', { + this.nodeText = this.add.text(node.x, node.y, node.text, { fontSize: '20px', fontFamily: 'Arial', color: '#ffffff', backgroundColor: '#222222', }).setPadding(32); - this.nodeText.setScale(1 / this.cameras.main.zoom); - this.nodeText.setWordWrapWidth(450); - this.nodeText.setPosition(node.x, node.y); + this.nodeText.setAlpha(0.8); this.nodeText.setOrigin(pointer.x >= 600 ? 1 : 0, pointer.y >= 450 ? 1 : 0); - this.nodeText.text = node.text; + this.nodeText.setWordWrapWidth(450); + this.nodeText.setScale(1 / this.cameras.main.zoom); } updatePassives() { From e304f801d56f1820ebb3f9e2ef7cf2215b1f38c1 Mon Sep 17 00:00:00 2001 From: Mashy Date: Sun, 18 Nov 2018 10:35:29 +1000 Subject: [PATCH 4/6] remove background, scroll zoom compensation --- client/src/components/passive.phaser.js | 12 ++++-------- 1 file changed, 4 insertions(+), 8 deletions(-) diff --git a/client/src/components/passive.phaser.js b/client/src/components/passive.phaser.js index 699bb1bf..ed705c28 100755 --- a/client/src/components/passive.phaser.js +++ b/client/src/components/passive.phaser.js @@ -10,7 +10,6 @@ const passiveDataEdge = require('./passive.data.edge'); class PhaserPassives extends Phaser.Scene { preload() { this.load.image('eye', 'https://labs.phaser.io/assets/particles/green-orb.png'); - this.load.image('background', 'http://labs.phaser.io/assets/skies/nebula.jpg'); } create() { @@ -22,9 +21,6 @@ class PhaserPassives extends Phaser.Scene { } init() { - this.background = this.add.image(0, 0, 'background'); - this.background.setScale(5); - this.background.setInteractive(); this.graphics = this.add.graphics(); this.textGraphic = new Phaser.GameObjects.Graphics(this); this.add.existing(this.textGraphic); @@ -59,13 +55,12 @@ class PhaserPassives extends Phaser.Scene { gameObjects[0].setTint(0xff00ff); } this.displayPassiveText(gameObjects[0], pointer); - } else if (this.nodeText) { - this.nodeText.destroy(); } }); this.input.on('pointerout', (pointer, gameObjects) => { if (gameObjects[0] instanceof PassiveNode) { if (!gameObjects[0].alloc) gameObjects[0].clearTint(); + this.nodeText.destroy(); } }); this.input.on('pointerup', (pointer, gameObjects) => { @@ -79,10 +74,11 @@ class PhaserPassives extends Phaser.Scene { } }); this.input.on('pointermove', (pointer) => { + const zoomFactor = 2 / this.cameras.main.zoom; if (this.pan) { const points = pointer.getInterpolatedPosition(2); - this.cameras.main.scrollX -= (points[1].x - points[0].x) * 2; - this.cameras.main.scrollY -= (points[1].y - points[0].y) * 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', () => { From fae49d3376b40a0fca058ab944522e877dfcc7df Mon Sep 17 00:00:00 2001 From: Mashy Date: Mon, 19 Nov 2018 17:52:55 +1000 Subject: [PATCH 5/6] misc phaser --- client/src/components/cryp.ui.js | 30 ++++++++++++++++ client/src/components/passive.container.jsx | 3 +- client/src/components/passive.phaser.js | 19 +++++----- client/src/components/phaser.combat.js | 40 ++++++++++++++------- client/src/components/phaser.container.jsx | 20 +++-------- 5 files changed, 74 insertions(+), 38 deletions(-) create mode 100755 client/src/components/cryp.ui.js diff --git a/client/src/components/cryp.ui.js b/client/src/components/cryp.ui.js new file mode 100755 index 00000000..901d1b94 --- /dev/null +++ b/client/src/components/cryp.ui.js @@ -0,0 +1,30 @@ +const Phaser = require('phaser'); +const fs = require('fs'); + +class CrypUi extends Phaser.Scene { + constructor() { + super('combat'); + } + + preload() { + /* Static Images */ + this.textures.addBase64('alk', `data:image/png;base64,${new Buffer.from(fs.readFileSync('./assets/alakazam-f.png')).toString('base64')}`); + } + + create() { + this.createPlayers(); + this.input.keyboard.on('keydown_S', () => { + this.scene.switch('passives'); // Switch to passive scene + }, 0, this); + } + + createPlayers() { + this.players = this.physics.add.staticGroup(); + const img = this.players.create(100, 300, 'alk'); + img.setScale(1); + this.playerOneHp = this.add.text(20, 200, 'HP', { fontFamily: 'Arial', fontSize: 24, color: '#00ff00' }); + this.loaded = true; + } +} + +module.exports = CrypUi; diff --git a/client/src/components/passive.container.jsx b/client/src/components/passive.container.jsx index f0fd037a..bfd85dcf 100755 --- a/client/src/components/passive.container.jsx +++ b/client/src/components/passive.container.jsx @@ -2,6 +2,7 @@ const preact = require('preact'); const { connect } = require('preact-redux'); const Phaser = require('phaser'); const PhaserPassives = require('./passive.phaser'); +const PhaserCombat = require('./phaser.combat'); const addState = connect( function receiveState(state) { @@ -38,7 +39,7 @@ class PhaserInstance extends preact.Component { gravity: { y: 0 }, }, }, - scene: this.PhaserPassives, + scene: [this.PhaserPassives, PhaserCombat], }; const game = new Phaser.Game(config); game.canvas.addEventListener('mousedown', () => this.PhaserPassives.camPan(true)); diff --git a/client/src/components/passive.phaser.js b/client/src/components/passive.phaser.js index ed705c28..6893d6f3 100755 --- a/client/src/components/passive.phaser.js +++ b/client/src/components/passive.phaser.js @@ -8,26 +8,24 @@ const passiveDataEdge = require('./passive.data.edge'); // Press 'A' to reset allocated passive nodes class PhaserPassives extends Phaser.Scene { + constructor() { + super('passives'); + } + preload() { this.load.image('eye', 'https://labs.phaser.io/assets/particles/green-orb.png'); } create() { - this.init(); + this.graphics = this.add.graphics(); + this.passiveNodeData = passiveDataNode; + this.passiveEdgeData = passiveDataEdge; this.addPassiveNodes(); this.addCameraControl(); this.addEvents(); this.drawPassiveEdges(); } - init() { - this.graphics = this.add.graphics(); - this.textGraphic = new Phaser.GameObjects.Graphics(this); - this.add.existing(this.textGraphic); - this.passiveNodeData = passiveDataNode; - this.passiveEdgeData = passiveDataEdge; - } - addPassiveNodes() { this.passiveNodes = []; this.passiveNodeData.forEach((n) => { @@ -84,6 +82,9 @@ 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'); + }, 0, this); } drawPassiveEdges() { diff --git a/client/src/components/phaser.combat.js b/client/src/components/phaser.combat.js index 98afa3be..893b3116 100755 --- a/client/src/components/phaser.combat.js +++ b/client/src/components/phaser.combat.js @@ -2,6 +2,10 @@ const Phaser = require('phaser'); const fs = require('fs'); class PhaserCombat extends Phaser.Scene { + constructor() { + super('combat'); + } + preload() { /* Static Images */ this.textures.addBase64('alk', `data:image/png;base64,${new Buffer.from(fs.readFileSync('./assets/alakazam-f.png')).toString('base64')}`); @@ -30,6 +34,11 @@ class PhaserCombat extends Phaser.Scene { this.createAnim(); this.cursors = this.input.keyboard.createCursorKeys(); this.combat = false; + this.registry.events.on('changedata', this.updateData, this); + + this.input.keyboard.on('keydown_S', () => { + this.scene.switch('passives'); // Switch to battle scene + }, 0, this); } createPlayers() { @@ -38,9 +47,8 @@ class PhaserCombat extends Phaser.Scene { const imgTwo = this.players.create(500, 300, 'magmar'); img.setScale(0.5); imgTwo.setScale(0.5); - this.playerOneHp = this.add.text(20, 200, 'HP', { fontFamily: 'Arial', fontSize: 24, color: '#00ff00' }); - this.playerTwoHp = this.add.text(450, 200, 'HP', { fontFamily: 'Arial', fontSize: 24, color: '#00ff00' }); - this.loaded = true; + this.playerOneHp = this.add.text(20, 200, '', { fontFamily: 'Arial', fontSize: 24, color: '#00ff00' }); + this.playerTwoHp = this.add.text(450, 200, '', { fontFamily: 'Arial', fontSize: 24, color: '#00ff00' }); } createAnim() { @@ -53,21 +61,29 @@ class PhaserCombat extends Phaser.Scene { this.anims.create(config); } - setPlayerOneHp(health) { - this.playerOneHp.text = health; - } - - setPlayerTwoHp(health) { - this.playerTwoHp.text = health; - } - - explode(proj) { this.proj.disableBody(true, true); this.emitter.stop(); const sprite = this.add.sprite(proj.x, proj.y, 'explosion').play('explodeAnimation'); sprite.setScale(3); } + + updateData(parent, key, data) { + if (key === 'playerCryps') { + this.playerOneHp.text = (`${data.cryps[0].hp.base.toString()} / ${data.cryps[0].stamina.base.toString()} HP`); + if (data.cryps[0].hp.base === 0) { + // this.PhaserCombat.skills('blast', 400, -150); + this.skills('wall', 'green', 400, -250); + } + } + if (key === 'enemyCryps') { + this.playerTwoHp.text = `${data.cryps[0].hp.base.toString()} / ${data.cryps[0].stamina.base.toString()} HP`; + if (data.cryps[0].hp.base === 0) { + // this.PhaserCombat.skills('blast', 180, 150); + this.skills('wall', 'green', 180, 250); + } + } + } } PhaserCombat.prototype.skills = require('./phaser.skills.js'); diff --git a/client/src/components/phaser.container.jsx b/client/src/components/phaser.container.jsx index dbb384a0..87c9255d 100755 --- a/client/src/components/phaser.container.jsx +++ b/client/src/components/phaser.container.jsx @@ -2,6 +2,7 @@ const preact = require('preact'); const { connect } = require('preact-redux'); const Phaser = require('phaser'); const PhaserCombat = require('./phaser.combat'); +const PhaserPassives = require('./passive.phaser'); const addState = connect( function receiveState(state) { @@ -21,21 +22,8 @@ class PhaserInstance extends preact.Component { } componentWillReceiveProps(nextProps) { - const playerTeam = nextProps.game.teams.find(t => t.id === nextProps.account.id); - const otherTeams = nextProps.game.teams.filter(t => t.id !== nextProps.account.id); - - if (playerTeam && otherTeams[0] && this.PhaserCombat.loaded) { - this.PhaserCombat.setPlayerOneHp(`${playerTeam.cryps[0].hp.base.toString()} / ${playerTeam.cryps[0].stamina.base.toString()} HP`); - this.PhaserCombat.setPlayerTwoHp(`${otherTeams[0].cryps[0].hp.base.toString()} / ${otherTeams[0].cryps[0].stamina.base.toString()} HP`); - - if (playerTeam.cryps[0].hp.base === 0) { - // this.PhaserCombat.skills('blast', 400, -150); - this.PhaserCombat.skills('chargeBall', 'green', 400, -250); - } else if (otherTeams[0].cryps[0].hp.base === 0) { - // this.PhaserCombat.skills('blast', 180, 150); - this.PhaserCombat.skills('chargeBall', 'green', 180, 250); - } - } + this.PhaserCombat.registry.set('playerCryps', nextProps.game.teams.find(t => t.id === nextProps.account.id)); + this.PhaserCombat.registry.set('enemyCryps', nextProps.game.teams.filter(t => t.id !== nextProps.account.id)[0]); } componentDidMount() { @@ -52,7 +40,7 @@ class PhaserInstance extends preact.Component { gravity: { y: 0 }, }, }, - scene: this.PhaserCombat, + scene: [this.PhaserCombat, PhaserPassives], }; const game = new Phaser.Game(config); } From 3c5199d7100a5cd9afaa14e2d2e54b56938a33a7 Mon Sep 17 00:00:00 2001 From: Mashy Date: Mon, 19 Nov 2018 22:09:47 +1000 Subject: [PATCH 6/6] grep --- client/src/scenes/cryp.info.js | 23 ----------------------- 1 file changed, 23 deletions(-) delete mode 100755 client/src/scenes/cryp.info.js diff --git a/client/src/scenes/cryp.info.js b/client/src/scenes/cryp.info.js deleted file mode 100755 index 7679e1df..00000000 --- a/client/src/scenes/cryp.info.js +++ /dev/null @@ -1,23 +0,0 @@ -const Phaser = require('phaser'); - -const ROW_WIDTH = 400; -const ROW_HEIGHT = 200; -const ROW_FILL = 0x888888; - -const TOP_MARGIN = 50; -const ROW_MARGIN = 50; -const TEXT_MARGIN = 24; - - -class CrypInfo extends Phaser.GameObjects.Rectangle { - constructor(scene, cryp, i) { - const X_ORIGIN = 0; - const Y_ORIGIN = (i * ROW_HEIGHT + ROW_MARGIN) + TOP_MARGIN; - super(scene, X_ORIGIN, Y_ORIGIN, ROW_WIDTH, ROW_HEIGHT, ROW_FILL * Math.random()); - this.setOrigin(0); - this.cryp = cryp; - scene.add.text(X_ORIGIN, Y_ORIGIN + (TEXT_MARGIN * 0), cryp.name, { fontFamily: 'Arial', fontSize: 24, color: '#ffffff', fontStyle: 'bold' }); - scene.add.text(X_ORIGIN, Y_ORIGIN + (TEXT_MARGIN * 1), cryp.stamina.base, { fontFamily: 'Arial', fontSize: 24, color: '#ffffff', fontStyle: 'bold' }) - } -} -module.exports = CrypInfo;