1 files changed, 62 insertions, 4 deletions

diff --git a/index.js b/index.js
index 33ea67b..f327163 100644
--- a/index.js
+++ b/index.js
@@ -52,10 +52,9 @@ class ATBBar {
   draw() {
     const ctx = this.canvas.getContext('2d')
     ctx.clearRect(0, 0, this.canvas.width, this.canvas.height)
-    ctx.save()
-
     ctx.fillStyle = 'rgba(255, 255, 255, 0.2)'
     ctx.fillRect(0, 0, this.canvas.width, this.canvas.height)
+    ctx.save()
 
     ctx.beginPath()
     ctx.rect(0, 0, Math.round(this.canvas.width * this.visualProgress), this.canvas.height)
@@ -155,6 +154,53 @@ class ATBBar {
   }
 }
 
+class HPBar {
+  // Unlike ATBBar, HPBar does not actually deal with any logic.
+
+  constructor(battleCharacter) {
+    // Parts
+
+    this.battleCharacter = battleCharacter
+
+    // State
+
+    this.progress = 0
+    this.visualProgress = 0
+
+    // Drawing
+
+    this.canvas = document.createElement('canvas')
+    this.canvas.width = 80
+    this.canvas.height = 5
+  }
+
+  draw() {
+    const ctx = this.canvas.getContext('2d')
+    ctx.clearRect(0, 0, this.canvas.width, this.canvas.height)
+    ctx.save()
+
+    ctx.fillStyle = 'rgba(255, 255, 255, 0.2)'
+    ctx.fillRect(0, 0, this.canvas.width, this.canvas.height)
+    ctx.save()
+
+    ctx.beginPath()
+    ctx.rect(0, 0, Math.round(this.canvas.width * this.visualProgress), this.canvas.height)
+    ctx.clip()
+
+    ctx.fillStyle = '#5E5'
+    ctx.fillRect(0, 0, this.canvas.width, this.canvas.height)
+
+    ctx.restore()
+    ctx.strokeStyle = '#000'
+    ctx.strokeRect(0.5, 0.5, this.canvas.width - 1, this.canvas.height - 1)
+  }
+
+  update(dt) {
+    this.progress = this.battleCharacter.hp / this.battleCharacter.maxHP
+    this.visualProgress += 8 * dt * (this.progress - this.visualProgress)
+  }
+}
+
 class ActionMenu {
   constructor() {
     this.canvas = document.createElement('canvas')
@@ -289,6 +335,10 @@ class BattleCharacter extends Sprite {
     this.isExecutingChain = false
     this.isExecutingAction = false
     this.actionExecuteTime = 0
+
+    this.hp = 500
+    this.maxHP = 500
+    this.hpBar = new HPBar(this)
   }
 
   executeAction(action) {
@@ -303,6 +353,7 @@ class BattleCharacter extends Sprite {
 
   update(dt) {
     this.atbBar.update(dt)
+    this.hpBar.update(dt)
 
     if (this.isExecutingChain && !this.isExecutingAction) {
       throw new Error('Executing chain but not action for more than one update.. ATB Bar should have queued an action or ended the chain')
@@ -349,6 +400,7 @@ enemyCharacter.x = 0
 enemyCharacter.y = 200
 
 const atbBar = battleCharacter.atbBar
+const hpBar = battleCharacter.hpBar
 //atbBar.queuedActions = [{label: 'Fire', size: 1}, {label: 'Blizz', size: 1}, {label: 'Zap', size: 1}, {label: 'Firaga', size: 3}]
 
 const actionMenu = new ActionMenu()
@@ -386,13 +438,19 @@ function drawLoop() {
 
   let y = canvas.height - 20
   if (!battleCharacter.isExecutingChain) {
-    y -= actionMenu.canvas.height
     actionMenu.draw()
+    y -= actionMenu.canvas.height
     ctx.drawImage(actionMenu.canvas, 20, y)
     y -= 2
   }
   atbBar.draw()
-  ctx.drawImage(atbBar.canvas, 20, y - atbBar.canvas.height)
+  y -= atbBar.canvas.height
+  ctx.drawImage(atbBar.canvas, 20, y)
+
+  y = canvas.height - 20
+  y -= hpBar.canvas.height
+  hpBar.draw()
+  ctx.drawImage(hpBar.canvas, canvas.width - 20 - hpBar.canvas.width, y)
 
   requestAnimationFrame(drawLoop)
 }