diff --git a/client/src/scenes/combat.js b/client/src/scenes/combat.js index 4992645c..44586879 100755 --- a/client/src/scenes/combat.js +++ b/client/src/scenes/combat.js @@ -1,10 +1,12 @@ const Phaser = require('phaser'); const fs = require('fs'); + +const { POSITIONS, TEXT } = require('./constants'); const { DrawCrypTeam, CrypAvatar, CrypSkill } = require('./combat.cryps'); -class PhaserCombat extends Phaser.Scene { - constructor() { - super('Combat'); +class Combat extends Phaser.Scene { + constructor(props) { + super({ key: 'Combat' }); } preload() { @@ -30,8 +32,6 @@ class PhaserCombat extends Phaser.Scene { } create() { - this.add.image(400, 300, 'sky');// Background image - this.createAnim(); this.cursors = this.input.keyboard.createCursorKeys(); this.combat = false; this.registry.events.on('changedata', this.updateData, this); @@ -48,6 +48,13 @@ class PhaserCombat extends Phaser.Scene { console.log(gameObjects[0].skill.skill); } }); + + const logX = POSITIONS.COMBAT.LOG.x(); + const logY = POSITIONS.COMBAT.LOG.y(); + const logWidth = POSITIONS.COMBAT.LOG.width(); + this.log = this.add.text(logX, logY, 'loading', TEXT.NORMAL); + this.log.setWordWrapWidth(logWidth); + return true; } updateData(parent, key, data) { @@ -62,30 +69,21 @@ class PhaserCombat extends Phaser.Scene { if (this.CrypSkillsTwo) { this.CrypSkillsTwo.destroy(true); } - this.CrypSkillsOne = new DrawCrypTeam(this, 0, playerOneCryp); this.CrypSkillsTwo = new DrawCrypTeam(this, 1, playerTwoCryp); + + this.renderCombat(data); } + return true; } - createAnim() { - const config = { - key: 'explodeAnimation', - frames: this.anims.generateFrameNumbers('explosion', { start: 0, end: 23, first: 23 }), - frameRate: 20, - repeat: 0, - }; - this.anims.create(config); + renderCombat(game) { + if (!game) return false; + console.log('combat render'); + this.log.setText(game.log.reverse()); + return true; } - - 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); - } - } -PhaserCombat.prototype.skills = require('./combat.skills.js'); +Combat.prototype.skills = require('./combat.skills.js'); -module.exports = PhaserCombat; +module.exports = Combat; diff --git a/client/src/scenes/combat.old.js b/client/src/scenes/combat.old.js new file mode 100644 index 00000000..76e3fa5a --- /dev/null +++ b/client/src/scenes/combat.old.js @@ -0,0 +1,90 @@ +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')}`); + 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('green', 'http://labs.phaser.io/assets/particles/green.png'); + this.load.image('red', 'http://labs.phaser.io/assets/particles/red.png'); + this.load.image('white', 'http://labs.phaser.io/assets/particles/white.png'); + this.load.image('yellow', 'http://labs.phaser.io/assets/particles/yellow.png'); + + + /* Spritesheets */ + this.load.spritesheet({ + key: 'explosion', + url: 'http://labs.phaser.io/assets/sprites/explosion.png', + frameConfig: { frameWidth: 64, frameHeight: 64, endFrame: 23 }, + }); + } + + create() { + this.add.image(400, 300, 'sky');// Background image + this.createPlayers(); + 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() { + this.players = this.physics.add.staticGroup(); + const img = this.players.create(100, 300, 'alk'); + 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(450, 200, '', { fontFamily: 'Arial', fontSize: 24, color: '#00ff00' }); + } + + createAnim() { + const config = { + key: 'explodeAnimation', + frames: this.anims.generateFrameNumbers('explosion', { start: 0, end: 23, first: 23 }), + frameRate: 20, + repeat: 0, + }; + this.anims.create(config); + } + + 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'); + +module.exports = PhaserCombat; diff --git a/client/src/scenes/constants.js b/client/src/scenes/constants.js index 80dd2f0d..b373ac7f 100644 --- a/client/src/scenes/constants.js +++ b/client/src/scenes/constants.js @@ -1,9 +1,44 @@ +// POSITIONING FNS +const menuWidth = () => window.innerWidth; +const menuHeight = () => window.innerHeight * 0.1; + +const combatWidth = () => window.innerWidth; +const combatHeight = () => window.innerHeight - menuHeight(); +const combatY = () => menuHeight(); +const combatX = () => 0; + +const logWidth = () => combatWidth() * 0.2; +const logHeight = () => combatHeight(); +const logY = () => menuHeight(); +const logX = () => combatWidth() - logWidth(); + module.exports = { TEXT: { NORMAL: { fontFamily: 'monospace', fontSize: 16, color: '#ffffff' }, HEADER: { fontFamily: 'monospace', fontSize: 24, color: '#ffffff', fontStyle: 'bold' }, }, + POSITIONS: { + MENU: { + width: menuWidth, + height: menuHeight, + }, + + COMBAT: { + x: combatX, + y: combatY, + width: combatWidth, + height: combatHeight, + + LOG: { + x: logX, + y: logY, + width: logWidth, + height: logHeight, + }, + }, + }, + COLOURS: { BLUE: 0x004bfe, CYAN: 0x27e7c0,