diff --git a/client/src/scenes/combat.cryps.js b/client/src/scenes/combat.cryps.js index 86e1b993..7e6241b0 100644 --- a/client/src/scenes/combat.cryps.js +++ b/client/src/scenes/combat.cryps.js @@ -24,6 +24,12 @@ const crypAvatarText = (team, iter) => { return { statusX, statusY, nameX, nameY, healthX, healthY }; }; +const crypEffects = (team, iter) => { + const crypEffectsX = COMBAT.width() / 7.5 + TEAM_MARGIN * team; + const crypEffectsY = TEXT_MARGIN * 2 + CRYP_MARGIN * iter; + return { crypEffectsX, crypEffectsY }; +}; + const crypPosition = (team, iter) => { const crypAvatarX = COMBAT.width() / 7.5 + TEAM_MARGIN * team; const crypAvatarY = TEXT_MARGIN * 5 + CRYP_MARGIN * iter; @@ -74,6 +80,40 @@ class HealthBar extends Phaser.GameObjects.Graphics { } } +class Effects extends Phaser.GameObjects.Group { + constructor(scene, team, iter) { + super(scene); + this.scene = scene; + const { crypEffectsX, crypEffectsY } = crypEffects(team, iter); + this.x = crypEffectsX; this.y = crypEffectsY; + this.effectCount = 0; + } + + addEffect(effect) { + const y = this.y + this.effectCount * TEXT_MARGIN; + const text = `${effect.effect} for ${effect.duration} turn`; + const e = this.scene.add.text(this.x, y, text, TEXT.NORMAL); + e.effect = effect.effect; + this.add(e); + this.effectCount += 1; + } + + removeEffect(effect) { + this.children.entries.forEach((e) => { + if (e.effect === effect) e.destroy(); + }); + } + + update(effects) { + this.effectCount = 0; + this.children.entries.forEach(e => e.destroy()); + effects.forEach((effect) => { + this.addEffect(effect); + }); + return true; + } +} + class CrypImage extends Phaser.GameObjects.Image { constructor(scene, team, iter, cryp) { // Get coords @@ -98,7 +138,8 @@ class CrypImage extends Phaser.GameObjects.Image { // 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); + this.effects = scene.add.existing(new Effects(scene, team, iter)); + this.statusText = scene.add.text(statusX, statusY, '', TEXT.NORMAL); } clearStatus() { @@ -126,13 +167,12 @@ class CombatCryps extends Phaser.Scene { 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' && data) { - const isAnimating = this.registry.get('gameAnimating'); + const isAnimating = this.phase === 'animating'; if (isAnimating) return false; this.drawCryps(data); } @@ -178,6 +218,7 @@ class CombatCryps extends Phaser.Scene { || renderCryp(cryp, iter, team); crypObj.healthBar.hp = cryp.hp.base; crypObj.healthBar.drawHealthBar(); + crypObj.effects.update(cryp.effects); }; const allyTeam = game.teams.find(t => t.id === this.account.id); diff --git a/client/src/scenes/combat.js b/client/src/scenes/combat.js index 6f6e2f3a..73221253 100644 --- a/client/src/scenes/combat.js +++ b/client/src/scenes/combat.js @@ -56,6 +56,7 @@ class Combat extends Phaser.Scene { this.scene.manager.add('CombatSkills', CombatSkills, true, game.phase); this.scene.manager.add('CombatHitBox', CombatHitBox, true, game.phase); this.registry.set('gamePhase', game.phase); + this.phase = game.phase; return true; } @@ -93,17 +94,18 @@ class Combat extends Phaser.Scene { checkAnimation(game) { // Check cryps are loaded and whether game is animating - const cantAnimate = this.registry.get('gameAnimating') || !this.registry.get('crypLoaded'); + const cantAnimate = this.registry.get('gamePhase') === 'animating'; if (cantAnimate) return false; if (game.resolved.length !== this.renderedResolves) { - this.registry.set('gamePhase', 'animating'); - this.registry.set('gameLog', this.registry.get('gameLog') + 1); const newResolutions = game.resolved.slice(this.renderedResolves); renderResolutions(this, game, newResolutions); this.renderedResolves = game.resolved.length; return true; } - this.registry.set('gamePhase', game.phase); + if (this.phase !== game.phase) { + this.phase = game.phase; + this.registry.set('gamePhase', game.phase); + } if (this.registry.get('gameLog') !== game.log.length) { this.registry.set('gameLog', game.log.length); } diff --git a/client/src/scenes/combat.render.resolutions.js b/client/src/scenes/combat.render.resolutions.js index 27b4745c..3d600704 100644 --- a/client/src/scenes/combat.render.resolutions.js +++ b/client/src/scenes/combat.render.resolutions.js @@ -94,11 +94,13 @@ function animatePhase(scene, game, resolution, cb) { return setTimeout(tickCb, DAMAGE_TICK); } if (resultType === 'Effect') { + targetSpawn.effects.addEffect(values); console.log('target has new effect', values.effect); return setTimeout(tickCb, DAMAGE_TICK); } if (resultType === 'Removal') { + targetSpawn.effects.removeEffect(values.effect); console.log('target effect removed', values.effect); return setTimeout(tickCb, DAMAGE_TICK); } @@ -122,13 +124,15 @@ function animatePhase(scene, game, resolution, cb) { } function renderResolutions(scene, game, resolutions) { - scene.registry.set('gameAnimating', true); + scene.registry.set('gamePhase', 'animating'); + scene.registry.set('gameLog', scene.registry.get('gameLog') + 1); + eachSeries( resolutions, (resolution, cb) => animatePhase(scene, game, resolution, cb), (err) => { if (err) return console.error(err); - scene.registry.set('gameAnimating', false); + scene.registry.set('gamePhase', 'Skill'); return true; } );