HP bar labels

1 files changed, 23 insertions, 2 deletions

diff --git a/index.js b/index.js
index 294f2b4..db2beed 100644
--- a/index.js
+++ b/index.js
@@ -239,6 +239,10 @@ class HPBar {
     this.canvas = document.createElement('canvas')
     this.canvas.width = 80
     this.canvas.height = 5
+
+    this.labelCanvas = document.createElement('canvas')
+    this.labelCanvas.height = 7
+    // Label canvas width is determined during draw
   }
 
   draw() {
@@ -260,6 +264,20 @@ class HPBar {
     ctx.restore()
     ctx.strokeStyle = '#000'
     ctx.strokeRect(0.5, 0.5, this.canvas.width - 1, this.canvas.height - 1)
+
+    this.drawLabel()
+  }
+
+  drawLabel() {
+    const text = this.battleCharacter.name
+    const ctx = this.labelCanvas.getContext('2d')
+    ctx.font = '5px pixel-font'
+    this.labelCanvas.width = ctx.measureText(text).width + 2
+    ctx.fillStyle = 'rgba(128, 128, 128, 0.2)'
+    ctx.fillRect(0, 0, this.labelCanvas.width, this.labelCanvas.height)
+    ctx.font = '5px pixel-font' // It gets reset for some reason??
+    ctx.fillStyle = 'white'
+    ctx.fillText(text, 1, 6)
   }
 
   update(dt) {
@@ -665,8 +683,10 @@ class Battle {
     for (const { hpBar } of this.playerCharacter.team.characters) {
       y -= hpBar.canvas.height
       hpBar.draw()
-      ctx.drawImage(hpBar.canvas, canvas.width - 20 - hpBar.canvas.width, y)
-      y -= 2
+      const x = canvas.width - 20 - hpBar.canvas.width
+      ctx.drawImage(hpBar.canvas, x, y)
+      ctx.drawImage(hpBar.labelCanvas, x - hpBar.labelCanvas.width - 2, y - 1)
+      y -= 4
     }
 
     if (targetCharacter) {
@@ -675,6 +695,7 @@ class Battle {
       const y = targetY - hpBar.canvas.height
       hpBar.draw()
       ctx.drawImage(hpBar.canvas, x, y)
+      ctx.drawImage(hpBar.labelCanvas, x - hpBar.labelCanvas.width - 2, y - 1)
     }
 
     ctx.restore()