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); }