diff --git a/client/src/scenes/combat.cryps.js b/client/src/scenes/combat.cryps.js index 96c2bca2..16af77ce 100755 --- a/client/src/scenes/combat.cryps.js +++ b/client/src/scenes/combat.cryps.js @@ -2,20 +2,10 @@ const Phaser = require('phaser'); const { TEXT } = require('./constants'); -const ROW_HEIGHT = 200; -const ROW_WIDTH = 400; -const ROW_FILL = 0x888888; - -const TOP_MARGIN = 50; -const ROW_MARGIN = 50; const TEXT_MARGIN = 24; - const CRYP_MARGIN = 250; const TEAM_MARGIN = 450; -const xPos = i => 0; -const yPos = i => (i * ROW_HEIGHT + ROW_MARGIN) + TOP_MARGIN; - class CrypAvatar extends Phaser.GameObjects.Image { constructor(scene, j, team, cryp, avatar) { // Avatar will be a property of cryp @@ -35,16 +25,16 @@ class CrypSkill extends Phaser.GameObjects.Text { } } -class DrawCrypTeam extends Phaser.GameObjects.Group { - constructor(scene, team, cryps, x, y) { +class DrawCrypTeams extends Phaser.GameObjects.Group { + constructor(scene, game) { super(scene); // this.id = cryp.id; this.scene = scene; this.ws = scene.registry.get('ws'); + let team = 0; // Cryp Avatar - const avatar = team ? 'magmar' : 'alk'; - const renderCryp = (cryp, j) => { + const avatar = team ? 'magmar' : 'alk'; this.add(scene.add.existing(new CrypAvatar(scene, j, team, cryp, avatar))); // Cryp HP and Name const crypHp = `${cryp.hp.base.toString()} / ${cryp.stamina.base.toString()} HP`; @@ -56,8 +46,11 @@ class DrawCrypTeam extends Phaser.GameObjects.Group { }; cryp.skills.forEach(knownSkill); }; - cryps.forEach(renderCryp); + const account = scene.registry.get('account'); + game.teams.find(t => t.id === account.id).cryps.forEach(renderCryp); + team = 1; + game.teams.filter(t => t.id !== account.id)[0].cryps.forEach(renderCryp); } } -module.exports = { DrawCrypTeam, CrypAvatar, CrypSkill }; +module.exports = { DrawCrypTeams, CrypAvatar, CrypSkill }; diff --git a/client/src/scenes/combat.js b/client/src/scenes/combat.js index 58401de8..7504f324 100755 --- a/client/src/scenes/combat.js +++ b/client/src/scenes/combat.js @@ -2,7 +2,7 @@ const Phaser = require('phaser'); const fs = require('fs'); const { POSITIONS, TEXT } = require('./constants'); -const { DrawCrypTeam, CrypAvatar, CrypSkill } = require('./combat.cryps'); +const { DrawCrypTeams, CrypAvatar, CrypSkill } = require('./combat.cryps'); class Combat extends Phaser.Scene { constructor(props) { @@ -13,7 +13,6 @@ class Combat extends Phaser.Scene { /* 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'); @@ -21,8 +20,6 @@ class Combat extends Phaser.Scene { 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', @@ -32,14 +29,10 @@ class Combat extends Phaser.Scene { } create() { - 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('CrypList'); // Switch back to cryp list }, 0, this); - this.input.on('pointerup', (pointer, gameObjects) => { if (gameObjects[0] instanceof CrypAvatar) { console.log(gameObjects[0].cryp.id); @@ -58,25 +51,20 @@ class Combat extends Phaser.Scene { } updateData(parent, key, data) { - if (key === 'game' && data !== this.gameData) { - const account = this.registry.get('account'); - const playerOneCryp = data.teams.find(t => t.id === account.id).cryps; - const playerTwoCryp = data.teams.filter(t => t.id !== account.id)[0].cryps; - - if (this.CrypSkillsOne && this.CrypSkillsTwo) { - this.CrypSkillsOne.destroy(true); - } - if (this.CrypSkillsTwo) { - this.CrypSkillsTwo.destroy(true); - } - this.CrypSkillsOne = new DrawCrypTeam(this, 0, playerOneCryp); - this.CrypSkillsTwo = new DrawCrypTeam(this, 1, playerTwoCryp); - + if (key === 'game') { + this.renderCryps(data); this.renderCombat(data); } return true; } + renderCryps(game) { + if (this.crypTeamRender) { + this.crypTeamRender.destroy(true); + } + this.crypTeamRender = new DrawCrypTeams(this, game); + } + renderCombat(game) { if (!game) return false; // shallow copy because reverse mutates