diff --git a/client/src/events.js b/client/src/events.js old mode 100644 new mode 100755 index 333b8391..9029738a --- a/client/src/events.js +++ b/client/src/events.js @@ -47,7 +47,6 @@ function registerEvents(registry, events) { // const friendlyTarget = activeSkill.cryp.account === cryp.account; // if (!friendlyTarget) { if (game.phase === 'Skill') { - console.log(cryp.account); ws.sendGameSkill(game.id, activeSkill.cryp.id, cryp.account, activeSkill.skill.skill); } else if (game.phase === 'Target') { ws.sendGameTarget(game.id, cryp.id, activeSkill.skill.id); diff --git a/client/src/scenes/combat.cryps.js b/client/src/scenes/combat.cryps.js old mode 100644 new mode 100755 index e16d6e5c..0ca1b9c0 --- 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 { @@ -147,12 +130,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 old mode 100644 new mode 100755 index fc384c82..fe80bbc1 --- a/client/src/scenes/combat.js +++ b/client/src/scenes/combat.js @@ -79,7 +79,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(); }); } @@ -92,12 +92,13 @@ class Combat extends Phaser.Scene { const isAnimating = this.registry.get('gameAnimating'); if (isAnimating) 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, this.scene.get('CombatCryps').cryps, newResolutions); this.renderedResolves = game.resolved.length; - this.combatCryps.clearSkills(); return true; } + 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 old mode 100644 new mode 100755 index 0ce11b31..0999d755 --- a/client/src/scenes/combat.log.js +++ b/client/src/scenes/combat.log.js @@ -9,20 +9,31 @@ 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 + 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 old mode 100644 new mode 100755 index 3d920b87..6f905a02 --- 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,14 +16,12 @@ 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; @@ -32,7 +29,7 @@ function findResolutionCryps(scene, group, resolution, allyTeam, enemyTeam) { } function animatePhase(scene, group, game, resolution, cb) { - + // Iterate the log // return early for disabled skills if (resolution.resolution.disable.disabled) return cb(); @@ -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, () => { diff --git a/client/src/scenes/combat.skills.js b/client/src/scenes/combat.skills.js old mode 100644 new mode 100755 index 5509948d..e52e1469 --- a/client/src/scenes/combat.skills.js +++ b/client/src/scenes/combat.skills.js @@ -49,9 +49,15 @@ class CombatSkills extends Phaser.Scene { super({ key: 'CombatSkills' }); } - create() { + create(game) { + this.input.on('pointerup', (pointer, obj) => { + if (obj[0] instanceof CrypSkill) { + obj[0].clickHandler(); + } + }); this.registry.events.on('changedata', this.updateData, this); this.account = this.registry.get('account'); + this.renderSkills(game); return true; } @@ -66,22 +72,23 @@ class CombatSkills extends Phaser.Scene { const shouldUpdate = game.phase !== this.phase; if (!shouldUpdate) return false; - this.phase = game.phase; + this.children.list + .filter(obj => obj instanceof CrypSkill || obj instanceof CrypName) + .forEach(s => s.destroy()); if (game.phase === 'Skill') return this.renderSkillPhase(game); - if (game.phase === 'Target') return this.renderTargetPhase(game); + if (game.phase === 'Target') return this.renderBlockPhase(game); + return true; } renderSkillPhase(game) { - const { account, scene } = this; - const addSkill = (i, j, skill, cryp) => { const skillTextPos = skillTextPosition(i, j + 2); const skillObj = new CrypSkill(this, skillTextPos[0], skillTextPos[1], skill, cryp); this.add.existing(skillObj); }; - const team = game.teams.find(t => t.id === account.id); + const team = game.teams.find(t => t.id === this.account.id); team.cryps.forEach((cryp, i) => { const namePos = skillTextPosition(i, 0); @@ -102,13 +109,11 @@ class CombatSkills extends Phaser.Scene { } renderBlockPhase(game) { - const { account, scene } = this; - - const skills = game.stack.find(skill => skill.target_team_id === account.id); - + const skills = game.stack.filter(skill => skill.target_team_id === this.account.id); skills.forEach((skill, i) => { - const cryp = game.teams.find(t => t.cryps.find(c => c.id === skill.source_cryp_id)); - + const cryp = game.teams + .find(t => t.cryps.find(c => c.id === skill.source_cryp_id)).cryps + .find(c => c.id === skill.source_cryp_id); // Draw the cryp name const namePos = skillTextPosition(i, 0); this.add.existing(new CrypName(this, namePos[0], namePos[1], cryp)); @@ -138,6 +143,12 @@ class CombatSkills extends Phaser.Scene { } return true; } + + cleanUp() { + this.registry.events.off('changedata', this.updateData); + this.scene.remove(); + } + } module.exports = CombatSkills;