health bars

client/src/scenes/combat.cryps.js

@@ -11,6 +11,15 @@ const calcMargin = () => {
     return { CRYP_MARGIN, TEXT_MARGIN, TEAM_MARGIN, X_PADDING, Y_PADDING };
 };
 
+const healthBarDimensions = (team, iter) => {
+    const { CRYP_MARGIN, TEAM_MARGIN, TEXT_MARGIN, X_PADDING, Y_PADDING } = calcMargin();
+    const healthBarX = X_PADDING / 2 + TEAM_MARGIN * team;
+    const healthBarY = Y_PADDING / 3 + CRYP_MARGIN * 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) {
@@ -71,6 +80,30 @@ 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
+    }
+    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) {
     const {
         CRYP_MARGIN, TEXT_MARGIN, TEAM_MARGIN, X_PADDING, Y_PADDING,
@@ -82,6 +115,8 @@ function renderCryp(scene, group, cryp, game, team, iter) {
         .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);
@@ -89,7 +124,7 @@ function renderCryp(scene, group, cryp, game, team, iter) {
     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;
+    return [crypSpawn, healthBar];
 }
 
 function renderSkills(scene, group, cryp, game, team, iter) {

client/src/scenes/combat.render.js

@@ -17,7 +17,7 @@ function animatePhase(scene, group, game, account, delay) {
     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 : enemySpawn;
+    const target = allyCryp.id === resolved.target_cryp_id ? allySpawn[0] : enemySpawn[0];
     scene.time.delayedCall(delay, () => {
         target.setTint(0xff0000);
     });

client/src/scenes/constants.js

@@ -98,6 +98,9 @@ module.exports = {
         LBLUE: 0x87c6f2,
         GREEN: 0x166c4f,
         BROWN: 0x583108,
+        BLACK: 0x000000,
+        RED: 0xff0000,
+        WHITE: 0xffffff,
     },
 
     SKILLS: {