From 1785877afec1b352bdf6afbf8915552a1c290795 Mon Sep 17 00:00:00 2001 From: Mashy Date: Fri, 23 Nov 2018 15:07:22 +1000 Subject: [PATCH] Refactor combat page --- client/src/scenes/combat.cryps.js | 121 +++++++++++++++--------------- client/src/scenes/combat.js | 13 ++-- 2 files changed, 68 insertions(+), 66 deletions(-) diff --git a/client/src/scenes/combat.cryps.js b/client/src/scenes/combat.cryps.js index 556f5b72..444169e2 100644 --- a/client/src/scenes/combat.cryps.js +++ b/client/src/scenes/combat.cryps.js @@ -11,51 +11,51 @@ const calcMargin = () => { return { CRYP_MARGIN, TEXT_MARGIN, TEAM_MARGIN, X_PADDING, Y_PADDING }; }; -class CrypAvatar extends Phaser.GameObjects.Image { - constructor(scene, j, team, avatar, cryp, teamId) { + +class CrypImage extends Phaser.GameObjects.Image { + constructor(scene, j, team, avatar, cryp) { // Avatar will be a property of cryp - const { CRYP_MARGIN, TEAM_MARGIN, X_PADDING, Y_PADDING } = calcMargin(); + const { + CRYP_MARGIN, TEAM_MARGIN, X_PADDING, Y_PADDING, + } = calcMargin(); super(scene, X_PADDING + TEAM_MARGIN * team, Y_PADDING * 1.25 + CRYP_MARGIN * j, avatar); this.scene = scene; - this.setScale(0.5); - this.setInteractive(); - this.id = cryp.id; - this.teamId = teamId; + this.cryp = cryp; } clickHandler() { const activeSkill = this.scene.registry.get('activeSkill'); const game = this.scene.registry.get('game'); if (activeSkill) { - if (activeSkill.cryp.teamId !== this.teamId) { + if (activeSkill.cryp.account !== this.cryp.account) { const ws = this.scene.registry.get('ws'); if (game.phase === 'Skill') { - ws.sendGameSkill(game.id, activeSkill.cryp.id, this.teamId, activeSkill.skill.skill); + ws.sendGameSkill(game.id, activeSkill.cryp.id, this.cryp.account, activeSkill.skill.skill); } else if (game.phase === 'Target') { - ws.sendGameTarget(game.id, this.id, activeSkill.skill.id); + ws.sendGameTarget(game.id, this.cryp.id, activeSkill.skill.id); } + } else { + activeSkill.clearTint(); + this.scene.registry.set('activeSkill', null); } } } } class CrypSkill extends Phaser.GameObjects.Text { - constructor(scene, i, j, team, skill, cryp) { + constructor(scene, row, iter, team, skill, cryp) { // Avatar will be a property of cryp - const { CRYP_MARGIN, TEXT_MARGIN, TEAM_MARGIN, X_PADDING, Y_PADDING } = calcMargin(); + const { + CRYP_MARGIN, TEXT_MARGIN, TEAM_MARGIN, X_PADDING, Y_PADDING, + } = calcMargin(); super(scene, X_PADDING * 2 + TEAM_MARGIN * team, - Y_PADDING / 2 + TEXT_MARGIN * (i + 2) + CRYP_MARGIN * j, skill.skill, TEXT.NORMAL); - this.setInteractive(); - this.scene = scene; + Y_PADDING / 2 + TEXT_MARGIN * (row + 2) + CRYP_MARGIN * iter, skill.skill, TEXT.NORMAL); this.cryp = cryp; this.skill = skill; - this.checkActive(); - } - - checkActive() { - const activeSkill = this.scene.registry.get('activeSkill'); + this.setInteractive(); + const activeSkill = scene.registry.get('activeSkill'); if (activeSkill) { - if (activeSkill.skill === this.skill && activeSkill.cryp.id === this.cryp.id) { + if (activeSkill.skill === skill && activeSkill.cryp.id === cryp.id) { this.setTint(COLOURS.BLUE); } } @@ -71,45 +71,48 @@ class CrypSkill extends Phaser.GameObjects.Text { } } -class DrawCrypTeams extends Phaser.GameObjects.Group { - constructor(scene, game) { - super(scene); - const { CRYP_MARGIN, TEXT_MARGIN, TEAM_MARGIN, X_PADDING, Y_PADDING } = calcMargin(); - const account = scene.registry.get('account'); - this.ws = scene.registry.get('ws'); - let team = 0; +function renderCryp(scene, group, cryp, game, team, iter) { + const { + CRYP_MARGIN, TEXT_MARGIN, TEAM_MARGIN, X_PADDING, Y_PADDING, + } = calcMargin(); + // Add Image Avatar Class + const avatar = team ? 'magmar' : 'alk'; + const crypSpawn = scene.add.existing(new CrypImage(scene, iter, team, avatar, cryp)) + .setScale(0.5) + .setInteractive(); + group.add(crypSpawn); + // Add cryp hp + const crypHp = scene.add.text(X_PADDING / 2 + TEAM_MARGIN * team, Y_PADDING / 2 + CRYP_MARGIN * iter, + `${cryp.hp.base.toString()} / ${cryp.stamina.base.toString()} HP`, TEXT.NORMAL); + group.add(crypHp); + // Add cryp name + const crypName = scene.add.text(X_PADDING / 2 + TEAM_MARGIN * team, + Y_PADDING / 2 + TEXT_MARGIN + CRYP_MARGIN * iter, cryp.name, TEXT.HEADER); + group.add(crypName); +} - // Cryp Avatar - const renderCryp = (cryp, j) => { - const avatar = team ? 'magmar' : 'alk'; - const teamId = team - ? game.teams.filter(t => t.id !== account.id)[0].id - : game.teams.find(t => t.id === account.id).id; - const crypSpawn = new CrypAvatar(scene, j, team, avatar, cryp, teamId); - this.add(scene.add.existing(crypSpawn)); - // Cryp HP and Name - const crypHp = `${cryp.hp.base.toString()} / ${cryp.stamina.base.toString()} HP`; - this.add(scene.add.text(X_PADDING / 2 + TEAM_MARGIN * team, - Y_PADDING / 2 + CRYP_MARGIN * j, crypHp, TEXT.NORMAL)); - this.add(scene.add.text(X_PADDING / 2 + TEAM_MARGIN * team, - Y_PADDING / 2 + TEXT_MARGIN + CRYP_MARGIN * j, cryp.name, TEXT.HEADER)); - // Cryp Skills - if (game.phase === 'Skill') { - cryp.skills.forEach((skill, i) => { - this.add(scene.add.existing(new CrypSkill(scene, i, j, team, skill, crypSpawn))); - }); - } else if (game.phase === 'Target') { - game.stack.forEach((skill) => { - if (skill.source_cryp_id === cryp.id) { - this.add(scene.add.existing(new CrypSkill(scene, 1, j, team, skill, crypSpawn))); - } - }); - } - }; - 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); +function renderSkills(scene, group, game, cryp, iter, team) { + if (game.phase === 'Skill') { + cryp.skills.forEach((skill, i) => { + group.add(scene.add.existing(new CrypSkill(scene, i, iter, team, skill, cryp))); + }); + } else if (game.phase === 'Target') { + const blockSkill = game.stack.find(skill => skill.source_cryp_id === cryp.id); + group.add(scene.add.existing(new CrypSkill(scene, 1, iter, team, blockSkill, cryp))); } } -module.exports = { CrypAvatar, CrypSkill, DrawCrypTeams }; +class DrawCrypTeams extends Phaser.GameObjects.Group { + constructor(scene, game) { + super(scene); + const account = scene.registry.get('account'); + const renderTeam = (cryp, iter, team) => { + renderCryp(scene, this, cryp, game, team, iter); + renderSkills(scene, this, game, cryp, iter, team); + }; + game.teams.find(t => t.id === account.id).cryps.forEach((cryp, i) => renderTeam(cryp, i, 0)); + game.teams.filter(t => t.id !== account.id)[0].cryps.forEach((cryp, i) => renderTeam(cryp, i, 1)); + } +} + +module.exports = { CrypImage, CrypSkill, DrawCrypTeams }; diff --git a/client/src/scenes/combat.js b/client/src/scenes/combat.js index 135dd499..3ec05bda 100644 --- a/client/src/scenes/combat.js +++ b/client/src/scenes/combat.js @@ -1,8 +1,8 @@ const Phaser = require('phaser'); const fs = require('fs'); -const { POSITIONS, TEXT, COLOURS } = require('./constants'); -const { DrawCrypTeams, CrypAvatar, CrypSkill } = require('./combat.cryps'); +const { POSITIONS, TEXT } = require('./constants'); +const { DrawCrypTeams, CrypImage, CrypSkill } = require('./combat.cryps'); class Combat extends Phaser.Scene { constructor(props) { @@ -43,12 +43,11 @@ class Combat extends Phaser.Scene { }, 0, this); this.input.on('pointerup', (pointer, obj) => { - const activeSkill = this.registry.get('activeSkill'); - if (obj[0] instanceof CrypAvatar || obj[0] instanceof CrypSkill) { + if (obj[0] instanceof CrypImage || obj[0] instanceof CrypSkill) { obj[0].clickHandler(); - } else if (activeSkill) { - activeSkill.clearTint(); - this.registry.set(null); + } else if (this.registry.get('activeSkill')) { + this.registry.get('activeSkill').clearTint(); + this.registry.set('activeSkill', null); } });