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 healthBarWidth = X_PADDING / 1.5;
const healthBarHeight = TEXT_MARGIN / 1.5; const healthBarHeight = TEXT_MARGIN / 1.5;
return { healthBarX, healthBarY, healthBarWidth, healthBarHeight }; return { healthBarX, healthBarY, healthBarWidth, healthBarHeight };
} };
class CrypImage extends Phaser.GameObjects.Image { 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 // Avatar will be a property of cryp
const { const {
CRYP_MARGIN, TEAM_MARGIN, X_PADDING, Y_PADDING, 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); super(scene, X_PADDING + TEAM_MARGIN * team, Y_PADDING * 1.25 + CRYP_MARGIN * j, avatar);
this.scene = scene; this.scene = scene;
this.cryp = cryp; this.cryp = cryp;
this.healthbar = healthbar;
} }
clickHandler() { clickHandler() {
@ -80,28 +81,44 @@ class CrypSkill extends Phaser.GameObjects.Text {
} }
} }
function drawHealthBar(scene, cryp, team, iter) { class HealthBar extends Phaser.GameObjects.Graphics {
const healthBar = scene.add.graphics(); constructor(scene, cryp, team, iter, crypHpText) {
const { healthBarX, healthBarY, healthBarWidth, healthBarHeight } = healthBarDimensions(team, iter); super(scene);
this.team = team;
// Draw Black Border this.iter = iter;
healthBar.fillStyle(COLOURS.BLACK); this.hp = cryp.hp.base;
healthBar.fillRect(healthBarX, healthBarY, healthBarWidth, healthBarHeight); this.stam = cryp.stamina.base;
// White fill this.hpText = crypHpText;
healthBar.fillStyle(COLOURS.WHITE); this.drawHealthBar();
healthBar.fillRect(healthBarX + 2, healthBarY + 2, healthBarWidth - 4, healthBarHeight - 4); }
const healthPercentage = cryp.hp.base / cryp.stamina.base; drawHealthBar() {
if (healthPercentage < 0.3) { const { healthBarX, healthBarY, healthBarWidth, healthBarHeight } = healthBarDimensions(this.team, this.iter);
healthBar.fillStyle(COLOURS.RED); // Draw Black Border
} else if (healthPercentage < 0.65) { this.fillStyle(COLOURS.BLACK);
healthBar.fillStyle(COLOURS.YELLOW); this.fillRect(healthBarX, healthBarY, healthBarWidth, healthBarHeight);
} else { // White fill
healthBar.fillStyle(0x00ff00); // str8 up green 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) { function renderCryp(scene, group, cryp, game, team, iter) {
@ -110,21 +127,21 @@ function renderCryp(scene, group, cryp, game, team, iter) {
} = calcMargin(); } = calcMargin();
// Add Image Avatar Class // Add Image Avatar Class
const avatar = team ? 'magmar' : 'alk'; 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) .setScale(0.5)
.setInteractive(); .setInteractive();
group.add(crypSpawn); 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, const crypName = scene.add.text(X_PADDING / 2 + TEAM_MARGIN * team,
Y_PADDING / 2 + TEXT_MARGIN + CRYP_MARGIN * iter, cryp.name, TEXT.HEADER); Y_PADDING / 2 + TEXT_MARGIN + CRYP_MARGIN * iter, cryp.name, TEXT.HEADER);
group.add(crypName); group.add(crypName);
return [crypSpawn, healthBar]; return crypSpawn;
} }
function renderSkills(scene, group, cryp, game, team, iter) { 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 { class DrawCrypTeams extends Phaser.GameObjects.Group {
constructor(scene, game) { constructor(scene, game) {
super(scene); super(scene);
let allyCount = 0;
let enemyCount = 0;
const account = scene.registry.get('account'); 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); renderCryp(scene, this, cryp, game, team, iter);
renderSkills(scene, this, cryp, game, team, iter); renderSkills(scene, this, cryp, game, team, iter);
}; allyCount = cryp.account === account.id ? allyCount += 1 : enemyCount += 1;
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));
} }
} }

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

@ -61,20 +61,23 @@ class Combat extends Phaser.Scene {
renderLog(game) { renderLog(game) {
if (!game) return false; if (!game) return false;
// Check game status first
if (this.crypTeamRender) {
this.crypTeamRender.destroy(true);
} this.crypTeamRender = new DrawCrypTeams(this, game);
while (game.log.length !== this.logIter) { while (game.log.length !== this.logIter) {
if (game.log[this.logIter] === '<Resolve Phase>') { if (game.log[this.logIter] === '<Resolve Phase>') {
this.registry.set('resolve', true); this.registry.set('resolve', true);
this.crypTeamRender.destroy(true); this.crypTeamRender.destroy(true);
this.logIter += 1; this.logIter += 1;
combatRender(this, game); combatRender(this, game);
break; return true;
} this.logIter += 1; } 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 // shallow copy because reverse mutates
this.log.setText(Array.from(game.log).slice(0, this.logIter).reverse()); this.log.setText(Array.from(game.log).slice(0, this.logIter).reverse());
return true; 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) { function animatePhase(scene, group, game, account, delay) {
const resolved = game.resolved[scene.resolvedIter]; 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 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 c => c.id === resolved.source_cryp_id || c.id === resolved.target_cryp_id
); );
const allySpawn = renderCryp(scene, group, allyCryp, game, 0, 1); const allySpawn = renderCryp(scene, group, allyCryp, game, 0, 1);
const enemySpawn = renderCryp(scene, group, enemyCryp, game, 1, 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, () => { scene.time.delayedCall(delay, () => {
targetCrypData.hp.base -= 100; // Mutates stored cryp data
target.healthbar.takeDamage(100);
target.setTint(0xff0000); target.setTint(0xff0000);
}); });
} }