From 22dbf5f893eba20cddc45c100bea543ba0bf5fd5 Mon Sep 17 00:00:00 2001 From: Mashy Date: Tue, 11 Dec 2018 15:29:22 +1000 Subject: [PATCH] Added cryp status text for attacking and blocking --- client/src/events.js | 10 ++- client/src/scenes/combat.cryps.js | 132 ++++++++++++++++++----------- client/src/scenes/combat.hitbox.js | 2 +- client/src/scenes/combat.skills.js | 2 +- 4 files changed, 92 insertions(+), 54 deletions(-) diff --git a/client/src/events.js b/client/src/events.js index 6b773ce3..b5e37746 100644 --- a/client/src/events.js +++ b/client/src/events.js @@ -31,14 +31,20 @@ function registerEvents(registry, events) { registry.set('gameList', gameList); } + function setCrypStatusUpdate(id, skill, target) { + registry.set('crypStatusUpdate', { id, skill, target }); + } + events.on('SEND_SKILL', function skillActive(gameId, crypId, targetTeamId, skill) { const ws = registry.get('ws'); ws.sendGameSkill(gameId, crypId, targetTeamId, skill); + setCrypStatusUpdate(crypId, skill, targetTeamId); }); - events.on('SEND_TARGET', function skillActive(gameId, crypId, skillId) { + events.on('SEND_TARGET', function skillActive(gameId, crypId, skill) { const ws = registry.get('ws'); - ws.sendGameTarget(gameId, crypId, skillId); + ws.sendGameTarget(gameId, crypId, skill.id); + setCrypStatusUpdate(crypId, skill, null); }); events.on('CRYP_ACTIVE', function crypActiveCb(cryp) { diff --git a/client/src/scenes/combat.cryps.js b/client/src/scenes/combat.cryps.js index 13117d48..86e1b993 100644 --- a/client/src/scenes/combat.cryps.js +++ b/client/src/scenes/combat.cryps.js @@ -2,17 +2,11 @@ const Phaser = require('phaser'); const { DELAYS, TEXT, POSITIONS: { COMBAT }, COLOURS } = require('./constants'); -const calcMargin = () => { - const CRYP_MARGIN = COMBAT.height() / 5; - const TEXT_MARGIN = COMBAT.height() / 35; - const TEAM_MARGIN = COMBAT.width() * 0.7; - const X_PADDING = COMBAT.width() / 10; - const Y_PADDING = COMBAT.height() / 7; - return { CRYP_MARGIN, TEXT_MARGIN, TEAM_MARGIN, X_PADDING, Y_PADDING }; -}; +const CRYP_MARGIN = COMBAT.height() / 5; +const TEXT_MARGIN = COMBAT.height() / 35; +const TEAM_MARGIN = COMBAT.width() * 0.7; const healthBarDimensions = (team, iter) => { - const { TEAM_MARGIN, TEXT_MARGIN, CRYP_MARGIN } = calcMargin(); const healthBarX = 1.25 * TEAM_MARGIN * team; const healthBarY = COMBAT.y() + TEXT_MARGIN + CRYP_MARGIN * iter + COMBAT.height() * 0.07; const healthBarWidth = TEAM_MARGIN / 10; @@ -21,41 +15,21 @@ const healthBarDimensions = (team, iter) => { }; const crypAvatarText = (team, iter) => { - const { TEAM_MARGIN, CRYP_MARGIN, TEXT_MARGIN } = calcMargin(); - const nameTextX = 1.25 * TEAM_MARGIN * team; - const nameTextY = COMBAT.y() + CRYP_MARGIN * iter + COMBAT.height() * 0.07; - const healthTextX = 1.25 * TEAM_MARGIN * team; - const healthTextY = COMBAT.y() + TEXT_MARGIN * 2 + CRYP_MARGIN * iter + COMBAT.height() * 0.07; - return { nameTextX, nameTextY, healthTextX, healthTextY }; + const nameX = 1.25 * TEAM_MARGIN * team; + const nameY = COMBAT.y() + CRYP_MARGIN * iter + COMBAT.height() * 0.07; + const healthX = 1.25 * TEAM_MARGIN * team; + const healthY = COMBAT.y() + TEXT_MARGIN * 2 + CRYP_MARGIN * iter + COMBAT.height() * 0.07; + const statusX = 1.25 * TEAM_MARGIN * team; + const statusY = COMBAT.y() + TEXT_MARGIN * 3 + CRYP_MARGIN * iter + COMBAT.height() * 0.07; + return { statusX, statusY, nameX, nameY, healthX, healthY }; }; const crypPosition = (team, iter) => { - const { CRYP_MARGIN, TEAM_MARGIN, Y_PADDING } = calcMargin(); const crypAvatarX = COMBAT.width() / 7.5 + TEAM_MARGIN * team; - const crypAvatarY = Y_PADDING * 1.25 + CRYP_MARGIN * iter; + const crypAvatarY = TEXT_MARGIN * 5 + CRYP_MARGIN * iter; return { crypAvatarX, crypAvatarY }; }; -class CrypImage extends Phaser.GameObjects.Image { - constructor(scene, team, iter, avatar, cryp, healthBar) { - // Avatar will be a property of cryp - const { crypAvatarX, crypAvatarY } = crypPosition(team, iter); - super(scene, crypAvatarX, crypAvatarY, avatar); - this.scene = scene; - this.cryp = cryp; - this.healthBar = healthBar; - this.iter = iter; - this.team = team; - } - - takeDamage(damage) { - this.setTint(0xff0000); - this.healthBar.takeDamage(damage); - this.scene.time.delayedCall(DELAYS.DAMAGE_TICK, () => { - this.clearTint(); - }); - } -} class HealthBar extends Phaser.GameObjects.Graphics { constructor(scene, cryp, team, iter, crypHpText) { @@ -100,6 +74,47 @@ class HealthBar extends Phaser.GameObjects.Graphics { } } +class CrypImage extends Phaser.GameObjects.Image { + constructor(scene, team, iter, cryp) { + // Get coords + const { crypAvatarX, crypAvatarY } = crypPosition(team, iter); + const { + statusX, statusY, nameX, nameY, healthX, healthY, + } = crypAvatarText(team, iter); + + // Cryp display + const avatar = team ? 'magmar' : 'alk'; + super(scene, crypAvatarX, crypAvatarY, avatar); + this.setScale(0.5); + + // Save position and cryp details + this.scene = scene; + this.iter = iter; + this.team = team; + this.cryp = cryp; + + // Add cryp name + scene.add.text(nameX, nameY, cryp.name, TEXT.NORMAL); + // Add cryp hp + const healthText = scene.add.text(healthX, healthY, '', TEXT.NORMAL); + this.healthBar = scene.add.existing(new HealthBar(scene, cryp, team, iter, healthText)); + this.statusText = scene.add.text(statusX, statusY, 'grep', TEXT.NORMAL); + } + + clearStatus() { + this.statusText.text = ''; + } + + takeDamage(damage) { + if (damage > 0) this.setTint(0xff0000); + else this.setTint(0x00bb00); + this.healthBar.takeDamage(damage); + this.scene.time.delayedCall(DELAYS.DAMAGE_TICK, () => { + this.clearTint(); + }); + } +} + class CombatCryps extends Phaser.Scene { constructor() { super({ key: 'CombatCryps' }); @@ -107,41 +122,58 @@ class CombatCryps extends Phaser.Scene { create(game) { this.cryps = this.add.group(); + this.phase = game.phase; this.account = this.registry.get('account'); this.drawCryps(game); this.registry.events.on('changedata', this.updateData, this); this.registry.set('crypLoaded', true); + this.registry.set('crypStatusUpdate', false); } updateData(parent, key, data) { - if (key === 'game') { - if (!data) return false; + if (key === 'game' && data) { const isAnimating = this.registry.get('gameAnimating'); if (isAnimating) return false; this.drawCryps(data); } + + if (key === 'gamePhase' && data) { + const shouldUpdate = data !== this.phase; + this.phase = data; + if (shouldUpdate) this.cryps.children.entries.forEach(c => c.clearStatus()); + } + + if (key === 'crypStatusUpdate' && data) { + const targetCryp = this.cryps.children.entries + .find(c => c.cryp.id === data.id); + + if (this.phase === 'Skill') { + targetCryp.statusText.text = data.target === targetCryp.cryp.account + ? `${data.skill} on ally team` + : `${data.skill} on enemy team`; + } + + if (this.phase === 'Target') { + const sourceCryp = this.cryps.children.entries + .find(c => c.cryp.id === data.skill.source_cryp_id); + targetCryp.statusText.text = `${sourceCryp.cryp.name} ${data.skill.skill} ${targetCryp.cryp.name}`; + } + } + return true; } drawCryps(game) { const renderCryp = (cryp, iter, team) => { // Add Image Avatar Class - const avatar = team ? 'magmar' : 'alk'; - // Add cryp hp - const { nameTextX, nameTextY, healthTextX, healthTextY } = crypAvatarText(team, iter); - this.add.text(nameTextX, nameTextY, cryp.name, TEXT.NORMAL); - const crypHpText = this.add.text(healthTextX, healthTextY, '', TEXT.NORMAL); - const healthBar = this.add.existing(new HealthBar(this, cryp, team, iter, crypHpText)); - // Add cryp name - const crypObj = new CrypImage(this, team, iter, avatar, cryp, healthBar); - this.cryps.add(this.add.existing(crypObj) - .setScale(0.5)); + const crypObj = new CrypImage(this, team, iter, cryp); + this.add.existing(crypObj); + this.cryps.add(crypObj); return crypObj; }; const renderTeam = (cryp, iter, team) => { const crypObj = this.cryps.children.entries - .filter(obj => obj instanceof CrypImage) .find(c => c.cryp.id === cryp.id) || renderCryp(cryp, iter, team); crypObj.healthBar.hp = cryp.hp.base; diff --git a/client/src/scenes/combat.hitbox.js b/client/src/scenes/combat.hitbox.js index a1acd60c..c633b599 100644 --- a/client/src/scenes/combat.hitbox.js +++ b/client/src/scenes/combat.hitbox.js @@ -105,7 +105,7 @@ class CombatHitBox extends Phaser.Scene { if (activeTarget) { activeTarget.activate(); skillScene.activeTarget = null; - this.game.events.emit('SEND_TARGET', game.id, c.id, activeTarget.skill.id); + this.game.events.emit('SEND_TARGET', game.id, c.id, activeTarget.skill); } }; diff --git a/client/src/scenes/combat.skills.js b/client/src/scenes/combat.skills.js index 30bff97b..528ff7a2 100644 --- a/client/src/scenes/combat.skills.js +++ b/client/src/scenes/combat.skills.js @@ -267,7 +267,7 @@ class CombatSkills extends Phaser.Scene { keyboard.on( CRYP_KEY_MAP[j], () => { - this.game.events.emit('SEND_TARGET', gameId, cryp.id, button.skill.id); + this.game.events.emit('SEND_TARGET', gameId, cryp.id, button.skill); button.activate(); this.activeTarget = null; },