diff --git a/client/src/scenes/combat.cryps.js b/client/src/scenes/combat.cryps.js index e16d6e5c..8ca49097 100644 --- a/client/src/scenes/combat.cryps.js +++ b/client/src/scenes/combat.cryps.js @@ -100,23 +100,6 @@ class HealthBar extends Phaser.GameObjects.Graphics { } } -function renderCryp(scene, group, cryp, game, team, iter) { - // Add Image Avatar Class - const avatar = team ? 'magmar' : 'alk'; - // Add cryp hp - const { nameTextX, nameTextY, healthTextX, healthTextY } = crypAvatarText(team, iter); - const crypName = scene.add.text(nameTextX, nameTextY, cryp.name, TEXT.NORMAL); - const crypHpText = scene.add.text(healthTextX, healthTextY, '', TEXT.NORMAL); - const healthBar = scene.add.existing(new HealthBar(scene, cryp, team, iter, crypHpText)); - // Add cryp name - const crypSpawn = new CrypImage(scene, team, iter, avatar, cryp, healthBar); - scene.add.existing(crypSpawn) - .setScale(0.5) - .setInteractive(); - group.addMultiple([crypHpText, healthBar, crypSpawn, crypName]); - return crypSpawn; -} - const CRYP_KEY_MAP = ['keydown_ONE', 'keydown_TWO', 'keydown_THREE']; class CombatCryps extends Phaser.Scene { @@ -134,6 +117,7 @@ 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); } updateData(parent, key, data) { @@ -147,12 +131,27 @@ class CombatCryps extends Phaser.Scene { } 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 + this.cryps.add( + this.add.existing(new CrypImage(this, team, iter, avatar, cryp, healthBar)) + .setScale(0.5) + .setInteractive() + ); + }; + const renderTeam = (cryp, iter, team) => { - const crypObj = - this.cryps.children.entries - .filter(obj => obj instanceof CrypImage) - .find(c => c.cryp.id === cryp.id) - || renderCryp(this, this.cryps, cryp, game, team, iter); + const crypObj = this.cryps.children.entries + .filter(obj => obj instanceof CrypImage) + .find(c => c.cryp.id === cryp.id); + if (!crypObj) renderCryp(cryp, iter, team); }; 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 8d3f8159..643258bc 100644 --- a/client/src/scenes/combat.js +++ b/client/src/scenes/combat.js @@ -43,7 +43,7 @@ class Combat extends Phaser.Scene { return ws.sendGameState(game.id); } return false; - }, 1000); + }, 2000); return true; } @@ -80,7 +80,7 @@ class Combat extends Phaser.Scene { this.checkAnimation(data); // Game over? if (data.phase === 'Finish') { - this.time.delayedCall(5000, () => { + this.time.delayedCall(10000, () => { this.endGame(); }); } @@ -89,16 +89,19 @@ class Combat extends Phaser.Scene { } checkAnimation(game) { - // do we need to render resolution animations? - const isAnimating = this.registry.get('gameAnimating'); - if (isAnimating) return false; + // Check cryps are loaded and whether game is animating + const cantAnimate = this.registry.get('gameAnimating') || !this.registry.get('crypLoaded'); + if (cantAnimate) return false; if (game.resolved.length !== this.renderedResolves) { + this.registry.set('gameLog', this.registry.get('gameLog') + 1); const newResolutions = game.resolved.slice(this.renderedResolves); - renderResolutions(this, game, this.combatCryps, newResolutions); + renderResolutions(this, game, newResolutions); this.renderedResolves = game.resolved.length; - this.combatCryps.clearSkills(); return true; } + if (this.registry.get('gameLog') !== game.log.length) { + this.registry.set('gameLog', game.log.length); + } return true; } } diff --git a/client/src/scenes/combat.log.js b/client/src/scenes/combat.log.js index 0ce11b31..221a0854 100644 --- a/client/src/scenes/combat.log.js +++ b/client/src/scenes/combat.log.js @@ -9,20 +9,37 @@ class CombatLog extends Phaser.Scene { create(game) { this.registry.events.on('changedata', this.updateData, this); this.log = this.add.text(COMBAT.LOG.x(), COMBAT.LOG.y(), '', TEXT.NORMAL); + this.logIndex = game.log.length; + this.logData = game.log; this.log.setWordWrapWidth(COMBAT.LOG.width()); this.log.setText(Array.from(game.log).reverse()); } updateData(parent, key, data) { - if (key === 'game') { - if (!data) return false; - // update log - // shallow copy because reverse mutates - this.log.setText(Array.from(data.log).reverse()); + const UPDATE_KEYS = ['game', 'gameLog']; + if (UPDATE_KEYS.includes(key) && data) { + if (key === 'game') { + this.logData = data.log; + } + if (key === 'gameLog') { + this.logIndex = data; + } + this.updateLog(); } return true; } + updateLog() { + // shallow copy because reverse mutates + if (this.logData.length > this.logIndex + 1 + && Array.from(this.logData)[this.logIndex].slice(-2) === 'KO') { + this.logIndex += 1; + this.registry.set('gameLog', this.logIndex); + } + // } + this.log.setText(Array.from(this.logData).slice(0, this.logIndex).reverse()); + } + cleanUp() { this.registry.events.off('changedata', this.updateData); this.scene.remove(); diff --git a/client/src/scenes/combat.render.resolutions.js b/client/src/scenes/combat.render.resolutions.js index 3d920b87..b87ccde8 100644 --- a/client/src/scenes/combat.render.resolutions.js +++ b/client/src/scenes/combat.render.resolutions.js @@ -1,7 +1,6 @@ const { eachSeries } = require('async'); const CombatAnimations = require('./combat.animations'); -const { CrypImage } = require('./combat.cryps'); const { DELAYS: { ANIMATION_DURATION, MOVE_CREEP, DAMAGE_TICK }, POSITIONS: { COMBAT }, @@ -17,25 +16,23 @@ function findResolutionCryps(scene, group, resolution, allyTeam, enemyTeam) { c => c.id === resolution.source_cryp_id || c.id === resolution.target_cryp_id ); const allySpawn = group.children.entries - .filter(obj => obj instanceof CrypImage) .find(c => c.cryp.id === allyCryp.id); const enemyCryp = enemyTeam.cryps.find( c => c.id === resolution.source_cryp_id || c.id === resolution.target_cryp_id ); const enemySpawn = group.children.entries - .filter(obj => obj instanceof CrypImage) .find(c => c.cryp.id === enemyCryp.id); const target = allyCryp.id === resolution.target_cryp_id ? allySpawn : enemySpawn; return { allySpawn, enemySpawn, target }; } -function animatePhase(scene, group, game, resolution, cb) { - +function animatePhase(scene, game, resolution, cb) { + // Iterate the log // return early for disabled skills if (resolution.resolution.disable.disabled) return cb(); - + const group = scene.scene.get('CombatCryps').cryps; const animations = new CombatAnimations(scene); // Find cryps and targets const tweenParams = (targets, centreSpot, enemy) => { @@ -72,6 +69,7 @@ function animatePhase(scene, group, game, resolution, cb) { scene.time.delayedCall(ANIMATION_DURATION, () => { const damage = resolution.resolution.results[0][1].amount; target.takeDamage(damage); + scene.registry.set('gameLog', scene.registry.get('gameLog') + 1); // Move cryps back scene.time.delayedCall(DAMAGE_TICK, () => { @@ -88,12 +86,11 @@ function animatePhase(scene, group, game, resolution, cb) { }); } -function renderResolutions(scene, game, group, resolutions) { +function renderResolutions(scene, game, resolutions) { scene.registry.set('gameAnimating', true); - eachSeries( resolutions, - (resolution, cb) => animatePhase(scene, group, game, resolution, cb), + (resolution, cb) => animatePhase(scene, game, resolution, cb), (err) => { if (err) return console.error(err); scene.registry.set('gameAnimating', false);