From f54e2432dd98b7b050457c8c283149e44687dfcd Mon Sep 17 00:00:00 2001 From: Mashy Date: Wed, 21 Nov 2018 17:23:23 +1000 Subject: [PATCH] Updated battle UI --- client/src/events.js | 2 + client/src/scenes/combat.cryps.js | 63 +++++++++++++++++++++++++++++++ client/src/scenes/combat.js | 57 ++++++++++++++-------------- client/src/scenes/cryps.js | 3 ++ client/src/scenes/lobbies.js | 1 + 5 files changed, 98 insertions(+), 28 deletions(-) mode change 100644 => 100755 client/src/events.js create mode 100755 client/src/scenes/combat.cryps.js mode change 100644 => 100755 client/src/scenes/combat.js mode change 100644 => 100755 client/src/scenes/cryps.js mode change 100644 => 100755 client/src/scenes/lobbies.js diff --git a/client/src/events.js b/client/src/events.js old mode 100644 new mode 100755 index 80e62562..919fdecd --- a/client/src/events.js +++ b/client/src/events.js @@ -6,6 +6,8 @@ function registerEvents(store, registry, events) { const state = store.getState(); registry.set('cryps', state.cryps); registry.set('ws', state.ws); + registry.set('game', state.game); + registry.set('account', state.account); }); events.on('CRYP_ACTIVE', (cryp) => { diff --git a/client/src/scenes/combat.cryps.js b/client/src/scenes/combat.cryps.js new file mode 100755 index 00000000..96c2bca2 --- /dev/null +++ b/client/src/scenes/combat.cryps.js @@ -0,0 +1,63 @@ +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 + super(scene, 100 + TEAM_MARGIN * team, 150 + CRYP_MARGIN * j, avatar); + this.setScale(0.5); + this.setInteractive(); + this.cryp = cryp; + } +} + +class CrypSkill extends Phaser.GameObjects.Text { + constructor(scene, i, j, team, skill) { + // Avatar will be a property of cryp + super(scene, 200 + TEAM_MARGIN * team, 50 + TEXT_MARGIN * (i + 2) + CRYP_MARGIN * j, skill.skill, TEXT.NORMAL); + this.setInteractive(); + this.skill = skill; + } +} + +class DrawCrypTeam extends Phaser.GameObjects.Group { + constructor(scene, team, cryps, x, y) { + super(scene); + // this.id = cryp.id; + this.scene = scene; + this.ws = scene.registry.get('ws'); + // Cryp Avatar + const avatar = team ? 'magmar' : 'alk'; + + const renderCryp = (cryp, j) => { + 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`; + this.add(scene.add.text(50 + TEAM_MARGIN * team, 50 + CRYP_MARGIN * j, crypHp, TEXT.NORMAL)); + this.add(scene.add.text(50 + TEAM_MARGIN * team, 50 + TEXT_MARGIN + CRYP_MARGIN * j, cryp.name, TEXT.HEADER)); + // Cryp Skills + const knownSkill = (skill, i) => { + this.add(scene.add.existing(new CrypSkill(scene, i, j, team, skill))); + }; + cryp.skills.forEach(knownSkill); + }; + cryps.forEach(renderCryp); + } +} + +module.exports = { DrawCrypTeam, CrypAvatar, CrypSkill }; diff --git a/client/src/scenes/combat.js b/client/src/scenes/combat.js old mode 100644 new mode 100755 index 893b3116..4992645c --- a/client/src/scenes/combat.js +++ b/client/src/scenes/combat.js @@ -1,9 +1,10 @@ const Phaser = require('phaser'); const fs = require('fs'); +const { DrawCrypTeam, CrypAvatar, CrypSkill } = require('./combat.cryps'); class PhaserCombat extends Phaser.Scene { constructor() { - super('combat'); + super('Combat'); } preload() { @@ -30,25 +31,41 @@ class PhaserCombat extends Phaser.Scene { 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 + 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); + } + if (gameObjects[0] instanceof CrypSkill) { + console.log(gameObjects[0].skill.skill); + } + }); } - 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' }); + 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); + } } createAnim() { @@ -68,23 +85,7 @@ class PhaserCombat extends Phaser.Scene { 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'); +PhaserCombat.prototype.skills = require('./combat.skills.js'); module.exports = PhaserCombat; diff --git a/client/src/scenes/cryps.js b/client/src/scenes/cryps.js old mode 100644 new mode 100755 index 0920063a..bdeaf7ca --- a/client/src/scenes/cryps.js +++ b/client/src/scenes/cryps.js @@ -2,6 +2,7 @@ const Phaser = require('phaser'); const CrypList = require('./cryp.list'); const Menu = require('./menu'); +const Combat = require('./combat'); // const Passives = require('./passives'); function renderCryps(store, socket) { @@ -22,10 +23,12 @@ function renderCryps(store, socket) { scene: [ Menu, CrypList, + Combat, ], }; const game = new Phaser.Game(config); + game.scene.sleep('Combat'); window.addEventListener('mouseup', () => game.registry.set('pan', false)); window.addEventListener('mousedown', () => game.registry.set('pan', true)); diff --git a/client/src/scenes/lobbies.js b/client/src/scenes/lobbies.js old mode 100644 new mode 100755 index 76b99400..baa3452c --- a/client/src/scenes/lobbies.js +++ b/client/src/scenes/lobbies.js @@ -44,6 +44,7 @@ class Lobbies extends Phaser.GameObjects.Group { pve.on('pointerdown', () => { const team = cryps.filter(c => c.active).map(c => c.id); + list.scene.switch('Combat'); return ws.sendGamePve(team); });