ntr/mnml
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Added dynamic health bar

Browse Source
This commit is contained in:
Mashy 2018-11-25 18:20:27 +10:00
parent e530dcf5f1
commit c677e90f42
3 changed files with 72 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

92
client/src/scenes/combat.cryps.js Normal file → Executable file
View File

@ -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;
});
}
}

15
client/src/scenes/combat.js Normal file → Executable file
View File

@ -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] === '<Resolve Phase>') {
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;

10
client/src/scenes/combat.render.js Normal file → Executable file
View File

@ -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);
});
}