diff --git a/client/src/components/phaser.combat.js b/client/src/components/phaser.combat.js index bee93ba8..4904e9b6 100755 --- a/client/src/components/phaser.combat.js +++ b/client/src/components/phaser.combat.js @@ -1,13 +1,15 @@ const Phaser = require('phaser'); +const fs = require('fs'); class PhaserCombat extends Phaser.Scene { preload() { /* Static Images */ + this.textures.addBase64('alk', `data:image/png;base64,${new Buffer.from(fs.readFileSync('./assets/alakazam-f.png')).toString('base64')}`); + this.textures.addBase64('magmar', `data:image/png;base64,${new Buffer.from(fs.readFileSync('./assets/magmar.png')).toString('base64')}`); + this.load.image('sky', 'http://labs.phaser.io/assets/skies/nebula.jpg'); this.load.image('proj', 'http://labs.phaser.io/assets/sprites/bullet.png'); this.load.image('blue', 'http://labs.phaser.io/assets/particles/blue.png'); - this.load.image('alk', 'https://i.imgur.com/RFP8Pfz.png'); - this.load.image('magmar', 'https://i.imgur.com/CBNokzR.png'); /* Spritesheets */ this.load.spritesheet({ key: 'explosion', @@ -27,24 +29,12 @@ class PhaserCombat extends Phaser.Scene { createPlayers() { this.players = this.physics.add.staticGroup(); const img = this.players.create(100, 300, 'alk'); - const imgTwo = this.players.create(450, 300, 'magmar'); + const imgTwo = this.players.create(500, 300, 'magmar'); img.setScale(0.5); imgTwo.setScale(0.5); - this.playerOneHp = this.add.text(20, 200, '', { fontFamily: 'Arial', fontSize: 24, color: '#00ff00' }); - this.playerTwoHp = this.add.text(420, 200, '', { fontFamily: 'Arial', fontSize: 24, color: '#00ff00' }); - } - - createProj() { - this.combat = true; - this.proj = this.physics.add.image(-100, 300, 'proj'); - const particles = this.add.particles('blue'); - this.emitter = particles.createEmitter({ - speed: 25, - scale: { start: 1, end: 0 }, - blendMode: 'ADD', - }); - this.emitter.startFollow(this.proj); - this.physics.add.overlap(this.proj, this.players, this.explode, null, this); + 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; } createAnim() { @@ -65,21 +55,6 @@ class PhaserCombat extends Phaser.Scene { this.playerTwoHp.text = health; } - shootRight() { - if (!this.combat) { - this.createProj(); - this.proj.x = 180; - this.proj.setVelocity(250, 0); - } - } - - shootLeft() { - if (!this.combat) { - this.createProj(); - this.proj.x = 400; - this.proj.setVelocity(-250, 0); - } - } explode(proj) { this.proj.disableBody(true, true); @@ -89,6 +64,6 @@ class PhaserCombat extends Phaser.Scene { this.combat = false; } } - +PhaserCombat.prototype.skills = require('./phaser.skills.js'); module.exports = PhaserCombat; diff --git a/client/src/components/phaser.container.jsx b/client/src/components/phaser.container.jsx index 29946187..61a740ae 100755 --- a/client/src/components/phaser.container.jsx +++ b/client/src/components/phaser.container.jsx @@ -7,7 +7,7 @@ const addState = connect( function receiveState(state) { const { game, activeSkill, activeIncoming, account } = state; return {game, activeSkill, activeIncoming, account }; - } + } ); class PhaserInstance extends preact.Component { @@ -19,14 +19,15 @@ 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 !== null && otherTeams !== null) { + + if (playerTeam && otherTeams[0] && this.PhaserCombat.loaded) { this.PhaserCombat.setPlayerOneHp(`${playerTeam.cryps[0].hp.value.toString()} / ${playerTeam.cryps[0].stam.value.toString()} HP`); this.PhaserCombat.setPlayerTwoHp(`${otherTeams[0].cryps[0].hp.value.toString()} / ${otherTeams[0].cryps[0].stam.value.toString()} HP`); if (playerTeam.cryps[0].hp.value === 0) { - this.PhaserCombat.shootLeft(); + this.PhaserCombat.skills('blast', 400, -250); //Left Blast } else if (otherTeams[0].cryps[0].hp.value === 0) { - this.PhaserCombat.shootRight(); + this.PhaserCombat.skills('blast', 180, 250); //Right Blast } } } diff --git a/client/src/components/phaser.skills.js b/client/src/components/phaser.skills.js new file mode 100755 index 00000000..2f2902dc --- /dev/null +++ b/client/src/components/phaser.skills.js @@ -0,0 +1,27 @@ +// Skill function called by phaser combat + +function skills(skill, speed, location) { + if (this.combat) { + return; + } + this.combat = true; + + switch (skill) { + case 'blast': + this.proj = this.physics.add.image(-100, 300, 'proj'); + this.emitter = this.add.particles('blue').createEmitter({ + speed: 25, + scale: { start: 1, end: 0 }, + blendMode: 'ADD', + }); + this.emitter.startFollow(this.proj); + this.physics.add.overlap(this.proj, this.players, this.explode, null, this); + this.proj.x = speed; + this.proj.setVelocity(location, 0); + break; + default: + break; + } +} + +module.exports = skills;