diff --git a/client/src/scenes/combat.cryps.js b/client/src/scenes/combat.cryps.js old mode 100644 new mode 100755 index 35dd315a..231430db --- a/client/src/scenes/combat.cryps.js +++ b/client/src/scenes/combat.cryps.js @@ -18,11 +18,11 @@ const healthBarDimensions = (team, iter) => { const healthBarWidth = X_PADDING / 1.5; const healthBarHeight = TEXT_MARGIN / 1.5; return { healthBarX, healthBarY, healthBarWidth, healthBarHeight }; -} +}; class CrypImage extends Phaser.GameObjects.Image { - constructor(scene, j, team, avatar, cryp) { + constructor(scene, j, team, avatar, cryp, healthbar) { // Avatar will be a property of cryp const { CRYP_MARGIN, TEAM_MARGIN, X_PADDING, Y_PADDING, @@ -30,6 +30,7 @@ class CrypImage extends Phaser.GameObjects.Image { super(scene, X_PADDING + TEAM_MARGIN * team, Y_PADDING * 1.25 + CRYP_MARGIN * j, avatar); this.scene = scene; this.cryp = cryp; + this.healthbar = healthbar; } clickHandler() { @@ -80,28 +81,44 @@ class CrypSkill extends Phaser.GameObjects.Text { } } -function drawHealthBar(scene, cryp, team, iter) { - const healthBar = scene.add.graphics(); - const { healthBarX, healthBarY, healthBarWidth, healthBarHeight } = healthBarDimensions(team, iter); - - // Draw Black Border - healthBar.fillStyle(COLOURS.BLACK); - healthBar.fillRect(healthBarX, healthBarY, healthBarWidth, healthBarHeight); - // White fill - healthBar.fillStyle(COLOURS.WHITE); - healthBar.fillRect(healthBarX + 2, healthBarY + 2, healthBarWidth - 4, healthBarHeight - 4); - - const healthPercentage = cryp.hp.base / cryp.stamina.base; - if (healthPercentage < 0.3) { - healthBar.fillStyle(COLOURS.RED); - } else if (healthPercentage < 0.65) { - healthBar.fillStyle(COLOURS.YELLOW); - } else { - healthBar.fillStyle(0x00ff00); // str8 up green +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.drawHealthBar(); + } + + drawHealthBar() { + const { healthBarX, healthBarY, healthBarWidth, healthBarHeight } = healthBarDimensions(this.team, this.iter); + // 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); + + const healthPercentage = this.hp / this.stam; + if (healthPercentage < 0.3) { + this.fillStyle(COLOURS.RED); + } else if (healthPercentage < 0.65) { + this.fillStyle(COLOURS.YELLOW); + } else { + this.fillStyle(0x00ff00); // str8 up green + } + const healthWidth = Math.floor(healthBarWidth * healthPercentage); + this.fillRect(healthBarX + 2, healthBarY + 2, healthWidth, healthBarHeight - 4); + } + + takeDamage(damage) { + this.hp -= damage; + this.hpText.text = `${this.hp.toString()} / ${this.stam.toString()} HP`; + this.clear(); + this.drawHealthBar(); } - const healthWidth = Math.floor(healthBarWidth * healthPercentage); - healthBar.fillRect(healthBarX + 2, healthBarY + 2, healthWidth, healthBarHeight - 4); - return healthBar; } function renderCryp(scene, group, cryp, game, team, iter) { @@ -110,21 +127,21 @@ function renderCryp(scene, group, cryp, game, team, iter) { } = calcMargin(); // Add Image Avatar Class const avatar = team ? 'magmar' : 'alk'; - const crypSpawn = scene.add.existing(new CrypImage(scene, iter, team, avatar, cryp)) + // Add cryp hp + const crypHpText = scene.add.text(X_PADDING / 2 + TEAM_MARGIN * team, Y_PADDING / 2 + CRYP_MARGIN * iter, + `${cryp.hp.base.toString()} / ${cryp.stamina.base.toString()} HP`, TEXT.NORMAL); + const healthBar = scene.add.existing(new HealthBar(scene, cryp, team, iter, crypHpText)); + group.add(crypHpText); + group.add(healthBar); + // Add cryp name + const crypSpawn = scene.add.existing(new CrypImage(scene, iter, team, avatar, cryp, healthBar)) .setScale(0.5) .setInteractive(); group.add(crypSpawn); - // Add cryp hp - const healthBar = drawHealthBar(scene, cryp, team, iter); - group.add(healthBar); - const crypHp = scene.add.text(X_PADDING / 2 + TEAM_MARGIN * team, Y_PADDING / 2 + CRYP_MARGIN * iter, - `${cryp.hp.base.toString()} / ${cryp.stamina.base.toString()} HP`, TEXT.NORMAL); - group.add(crypHp); - // Add cryp name const crypName = scene.add.text(X_PADDING / 2 + TEAM_MARGIN * team, Y_PADDING / 2 + TEXT_MARGIN + CRYP_MARGIN * iter, cryp.name, TEXT.HEADER); group.add(crypName); - return [crypSpawn, healthBar]; + return crypSpawn; } function renderSkills(scene, group, cryp, game, team, iter) { @@ -142,13 +159,16 @@ function renderSkills(scene, group, cryp, game, team, iter) { class DrawCrypTeams extends Phaser.GameObjects.Group { constructor(scene, game) { super(scene); + let allyCount = 0; + let enemyCount = 0; const account = scene.registry.get('account'); - const renderTeam = (cryp, team, iter) => { + scene.cryps.forEach((cryp) => { + const team = cryp.account === account.id ? 0 : 1; + const iter = cryp.account === account.id ? allyCount : enemyCount; renderCryp(scene, this, cryp, game, team, iter); renderSkills(scene, this, cryp, game, team, iter); - }; - game.teams.find(t => t.id === account.id).cryps.forEach((cryp, i) => renderTeam(cryp, 0, i)); - game.teams.filter(t => t.id !== account.id)[0].cryps.forEach((cryp, i) => renderTeam(cryp, 1, i)); + allyCount = cryp.account === account.id ? allyCount += 1 : enemyCount += 1; + }); } } diff --git a/client/src/scenes/combat.js b/client/src/scenes/combat.js old mode 100644 new mode 100755 index e51e666c..4098439c --- a/client/src/scenes/combat.js +++ b/client/src/scenes/combat.js @@ -61,20 +61,23 @@ class Combat extends Phaser.Scene { renderLog(game) { if (!game) return false; - - if (this.crypTeamRender) { - this.crypTeamRender.destroy(true); - } this.crypTeamRender = new DrawCrypTeams(this, game); - + // Check game status first while (game.log.length !== this.logIter) { if (game.log[this.logIter] === '') { this.registry.set('resolve', true); this.crypTeamRender.destroy(true); this.logIter += 1; combatRender(this, game); - break; + return true; } this.logIter += 1; } + this.cryps = []; + game.teams.forEach(t => t.cryps.forEach(cryp => this.cryps.push(cryp))); + console.log(this.cryps); + // If not animating render static skill / block phase + if (this.crypTeamRender) { + this.crypTeamRender.destroy(true); + } this.crypTeamRender = new DrawCrypTeams(this, game); // shallow copy because reverse mutates this.log.setText(Array.from(game.log).slice(0, this.logIter).reverse()); return true; diff --git a/client/src/scenes/combat.render.js b/client/src/scenes/combat.render.js old mode 100644 new mode 100755 index 911581be..37380b28 --- a/client/src/scenes/combat.render.js +++ b/client/src/scenes/combat.render.js @@ -8,17 +8,21 @@ const randomSkill = () => { function animatePhase(scene, group, game, account, delay) { const resolved = game.resolved[scene.resolvedIter]; - const allyCryp = game.teams.find(t => t.id === account.id).cryps.find( + const allyCryp = scene.cryps.filter(c => c.account === account.id).find( c => c.id === resolved.source_cryp_id || c.id === resolved.target_cryp_id ); - const enemyCryp = game.teams.filter(t => t.id !== account.id)[0].cryps.find( + const enemyCryp = scene.cryps.filter(c => c.account !== account.id).find( c => c.id === resolved.source_cryp_id || c.id === resolved.target_cryp_id ); const allySpawn = renderCryp(scene, group, allyCryp, game, 0, 1); const enemySpawn = renderCryp(scene, group, enemyCryp, game, 1, 1); - const target = allyCryp.id === resolved.target_cryp_id ? allySpawn[0] : enemySpawn[0]; + const target = allyCryp.id === resolved.target_cryp_id ? allySpawn : enemySpawn; + const targetCrypData = allyCryp.id === resolved.target_cryp_id ? allyCryp : enemyCryp; + scene.time.delayedCall(delay, () => { + targetCrypData.hp.base -= 100; // Mutates stored cryp data + target.healthbar.takeDamage(100); target.setTint(0xff0000); }); }