diff --git a/client/src/events.js b/client/src/events.js index 85ce2e0e..b1692fcd 100644 --- a/client/src/events.js +++ b/client/src/events.js @@ -36,6 +36,23 @@ function registerEvents(registry, events) { return setActiveSkill(skill); }); + events.on('SEND_ACTIVE_SKILL', function skillActive(cryp) { + const activeSkill = registry.get('activeSkill'); + const game = registry.get('game'); + if (activeSkill) { + if (activeSkill.cryp.account !== cryp.account) { + const ws = registry.get('ws'); + if (game.phase === 'Skill') { + 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); + } + } + activeSkill.clearTint(); + registry.set('activeSkill', null); + } + }); + events.on('CRYP_ACTIVE', function crypActiveCb(cryp) { const cryps = registry.get('cryps'); diff --git a/client/src/scenes/combat.cryps.js b/client/src/scenes/combat.cryps.js index e5698e1c..38b320a0 100644 --- a/client/src/scenes/combat.cryps.js +++ b/client/src/scenes/combat.cryps.js @@ -22,7 +22,6 @@ 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; @@ -49,28 +48,12 @@ class CrypImage extends Phaser.GameObjects.Image { // 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.skills = skills; + this.scene = scene; this.cryp = cryp; this.skills = skills; this.healthbar = healthbar; } clickHandler() { - const activeSkill = this.scene.registry.get('activeSkill'); - const game = this.scene.registry.get('game'); - if (activeSkill) { - 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.cryp.account, activeSkill.skill.skill); - } else if (game.phase === 'Target') { - ws.sendGameTarget(game.id, this.cryp.id, activeSkill.skill.id); - } - } - activeSkill.clearTint(); - this.scene.registry.set('activeSkill', null); - this.scene.registry.set('activeCryp', null); - } + this.scene.game.events.emit('SEND_ACTIVE_SKILL', this.cryp); } takeDamage(damage) { @@ -86,41 +69,35 @@ class CrypSkill extends Phaser.GameObjects.Text { constructor(scene, x, y, team, skill, cryp) { // Avatar will be a property of cryp super(scene, x, y, skill.skill, TEXT.NORMAL); - this.cryp = cryp; - this.skill = skill; + this.cryp = cryp; this.skill = skill; this.scene = scene; this.setInteractive(); } clickHandler() { - const activeSkill = this.scene.registry.get('activeSkill'); - if (activeSkill) { - activeSkill.clearTint(); - } - this.scene.registry.set('activeSkill', this); - this.setTint(COLOURS.BLUE); + this.scene.game.events.emit('SET_ACTIVE_SKILL', this); } } class HealthBar extends Phaser.GameObjects.Graphics { constructor(scene, cryp, team, iter, crypHpText) { super(scene); - this.team = team; - this.iter = iter; - this.hp = cryp.hp.base; - this.stam = cryp.stamina.base; - this.hpText = crypHpText; + this.team = team; this.iter = iter; this.hp = cryp.hp.base; + this.stam = cryp.stamina.base; this.hpText = crypHpText; this.drawHealthBar(); } drawHealthBar() { - const { healthBarX, healthBarY, healthBarWidth, healthBarHeight } = healthBarDimensions(this.team, this.iter); + const { + healthBarX, healthBarY, healthBarWidth, healthBarHeight, + } = healthBarDimensions(this.team, this.iter); + this.hpText.text = `${this.hp.toString()} / ${this.stam.toString()} HP`; // Draw Black Border this.fillStyle(COLOURS.BLACK); this.fillRect(healthBarX, healthBarY, healthBarWidth, healthBarHeight); // White fill this.fillStyle(COLOURS.WHITE); this.fillRect(healthBarX + 2, healthBarY + 2, healthBarWidth - 4, healthBarHeight - 4); - + // Fill the health bar const healthPercentage = this.hp / this.stam; if (healthPercentage < 0.3) { this.fillStyle(COLOURS.RED); @@ -135,7 +112,6 @@ class HealthBar extends Phaser.GameObjects.Graphics { takeDamage(damage) { this.hp -= damage; - this.hpText.text = `${this.hp.toString()} / ${this.stam.toString()} HP`; this.clear(); this.drawHealthBar(); } @@ -147,7 +123,7 @@ function renderCryp(scene, group, cryp, skills, game, team, iter) { // 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, `${cryp.hp.base.toString()} / ${cryp.stamina.base.toString()} HP`, 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 = scene.add.existing(new CrypImage(scene, team, iter, skills, avatar, cryp, healthBar)) @@ -189,19 +165,15 @@ function renderSkills(scene, group, cryp, account, game, team, iter) { class DrawCrypTeams extends Phaser.GameObjects.Group { constructor(scene, game) { super(scene); - this.scene = scene; - this.keyboard = scene.input.keyboard; - let allyCount = 0; let enemyCount = 0; const account = scene.registry.get('account'); - scene.cryps.forEach((cryp) => { - const team = cryp.account === account.id ? 0 : 1; - const iter = cryp.account === account.id ? allyCount : enemyCount; + const renderTeam = (cryp, iter, team) => { const skillsObj = renderSkills(scene, this, cryp, account, game, team, iter); const crypObj = renderCryp(scene, this, cryp, skillsObj, game, team, iter); - allyCount = cryp.account === account.id ? allyCount += 1 : enemyCount += 1; const addKeys = (game.phase === 'Skill' && !team) || (game.phase === 'Target' && team); if (addKeys) scene.crypKeyHandler(crypObj, iter); - }); + }; + scene.allyTeam.cryps.forEach((cryp, i) => renderTeam(cryp, i, 0)); + scene.enemyTeam.cryps.forEach((cryp, i) => renderTeam(cryp, i, 1)); } } diff --git a/client/src/scenes/combat.js b/client/src/scenes/combat.js index a98fe285..9f57a0b2 100644 --- a/client/src/scenes/combat.js +++ b/client/src/scenes/combat.js @@ -48,6 +48,7 @@ class Combat extends Phaser.Scene { this.skills = new CombatSkills(this); this.logIter = 0; this.resolvedIter = 0; this.registry.set('resolve', false); + this.account = this.registry.get('account'); this.log = this.add.text(logX, logY, '', TEXT.NORMAL); this.log.setWordWrapWidth(logWidth); return true; @@ -76,8 +77,13 @@ class Combat extends Phaser.Scene { return true; } this.logIter += 1; } - this.cryps = []; - game.teams.forEach(t => t.cryps.forEach(cryp => this.cryps.push(cryp))); + game.teams.forEach((t) => { + if (this.account.id === t.id) { + this.allyTeam = t; + } else { + this.enemyTeam = t; + } + }); // If not animating render static skill / block phase if (this.crypTeamRender) { this.crypTeamRender.destroy(true); @@ -99,8 +105,6 @@ class Combat extends Phaser.Scene { this.input.keyboard.removeListener(CRYP_KEY_MAP[iter]); if (cryp.skills.length > 0) { // check there are cryp skills this.input.keyboard.on(CRYP_KEY_MAP[iter], () => { - this.registry.set('activeCryp', cryp); - console.log(cryp.cryp.name); SKILL_KEY_MAP.forEach(k => this.input.keyboard.removeListener(k)); cryp.skills.forEach((skill, i) => { this.input.keyboard.on(SKILL_KEY_MAP[i], () => { diff --git a/client/src/scenes/combat.render.js b/client/src/scenes/combat.render.js index b0730f9d..e0caad95 100644 --- a/client/src/scenes/combat.render.js +++ b/client/src/scenes/combat.render.js @@ -1,9 +1,6 @@ const { CrypImage } = require('./combat.cryps'); const { DELAYS, POSITIONS: { COMBAT } } = require('./constants'); -const MOVE_CREEP = 1000; -const DAMAGE_TICK = 750; - const randomSkill = () => { const skills = ['wall', 'spit', 'gravBlast', 'gravBomb', 'chargeBall']; return skills[Math.floor(Math.random() * 5)]; @@ -12,10 +9,10 @@ const randomSkill = () => { function animatePhase(scene, group, game, account, delay) { // Find cryps and targets const resolved = game.resolved[scene.resolvedIter]; - const allyCryp = scene.cryps.filter(c => c.account === account.id).find( + const allyCryp = scene.allyTeam.cryps.find( c => c.id === resolved.source_cryp_id || c.id === resolved.target_cryp_id ); - const enemyCryp = scene.cryps.filter(c => c.account !== account.id).find( + const enemyCryp = scene.enemyTeam.cryps.find( c => c.id === resolved.source_cryp_id || c.id === resolved.target_cryp_id ); const allySpawn = group.children.entries @@ -34,7 +31,7 @@ function animatePhase(scene, group, game, account, delay) { x: COMBAT.x() + COMBAT.width() * 0.3, y: COMBAT.height() * 13.25 / 35, ease: 'Power1', - duration: MOVE_CREEP, + duration: DELAYS.MOVE_CREEP, }); scene.tweens.add({ @@ -42,7 +39,7 @@ function animatePhase(scene, group, game, account, delay) { x: COMBAT.x() + COMBAT.width() * 0.7, y: COMBAT.height() * 13.25 / 35, ease: 'Power1', - duration: MOVE_CREEP, + duration: DELAYS.MOVE_CREEP, }); // Target cryp takes damage into posistion scene.time.delayedCall(delay + DELAYS.MOVE_CREEP, () => { @@ -55,7 +52,7 @@ function animatePhase(scene, group, game, account, delay) { x: allyCrypX, y: allyCrypY, ease: 'Power1', - duration: MOVE_CREEP, + duration: DELAYS.MOVE_CREEP, }); scene.tweens.add({ @@ -63,7 +60,7 @@ function animatePhase(scene, group, game, account, delay) { x: enemyCrypX, y: enemyCrypY, ease: 'Power1', - duration: MOVE_CREEP, + duration: DELAYS.MOVE_CREEP, }); }); } @@ -81,13 +78,13 @@ function combatRender(scene, game, group) { animatePhase(scene, group, game, account, delay[0]); if (scene.iterateLog(game)) { - scene.time.delayedCall(delay[1] + DELAYS.MOVE_CREEP * 2 + DELAYS.DAMAGE_TICK, () => { + scene.time.delayedCall(delay[1] + DELAYS.MOVE_CREEP * 2, () => { scene.registry.set('resolve', false); scene.skills.cleanup(); scene.renderLog(game); }); } else { - scene.time.delayedCall(delay[1] + DELAYS.MOVE_CREEP * 2 + DELAYS.DAMAGE_TICK, () => { + scene.time.delayedCall(delay[1] + DELAYS.MOVE_CREEP * 2, () => { scene.skills.cleanup(); combatRender(scene, game, group); }); diff --git a/client/src/scenes/combat.skills.js b/client/src/scenes/combat.skills.js index a90df64f..c6893110 100644 --- a/client/src/scenes/combat.skills.js +++ b/client/src/scenes/combat.skills.js @@ -58,7 +58,7 @@ class CombatSkills extends Phaser.GameObjects.Group { gravBomb(target) { const { spawnLocation, img } = animationParams(!target); const particles = this.scene.add.particles(img); - const location = target ? COMBAT.width() * 0.6 : COMBAT.width() * 0.1; + const location = target ? COMBAT.width() * 0.65 : COMBAT.width() * 0.35; const well = particles.createGravityWell({ x: location, y: COMBAT.height() * 0.25,