Better overlay HP bars

1 files changed, 35 insertions, 13 deletions

diff --git a/index.js b/index.js
index 7eef526..37859c8 100644
--- a/index.js
+++ b/index.js
@@ -547,6 +547,7 @@ class BattleCharacter extends Sprite {
 
     this.targetType = null // ally or enemy
     this.targetCharacter = null
+    this.targetEnemyCharacter = null // Last enemy the character targeted, should never be set directly
 
     this.name = 'Unnamed'
 
@@ -604,6 +605,10 @@ class BattleCharacter extends Sprite {
   aliveUpdate(dt) {
     this.atbBar.update(dt)
 
+    if (this.targetCharacter && this.targetCharacter.team !== this.team) {
+      this.targetEnemyCharacter = this.targetCharacter
+    }
+
     if (this.isExecutingChain && !this.isExecutingAction) {
       // It's okay to be executing a chain but not any particular action if we
       // are significantly stunned.
@@ -761,10 +766,26 @@ class Battle {
 
   draw() {
     const ctx = canvas.getContext('2d')
-    let targetX = 0, targetY = 0
-    const targetCharacter = (
-      this.currentMenu === this.targetMenu && this.targetMenu.getCurrentOption() && this.targetMenu.getCurrentOption().battleCharacter ||
-      this.playerCharacter.targetCharacter)
+
+    const overlayHPBars = []
+
+    const addOverlayHPBarFor = battleCharacter => {
+      if (battleCharacter) {
+        if (!overlayHPBars.find(o => o.battleCharacter === battleCharacter)) {
+          overlayHPBars.push({x: 0, y: 0, battleCharacter})
+        }
+      }
+    }
+
+    addOverlayHPBarFor(this.playerCharacter.targetEnemyCharacter)
+    addOverlayHPBarFor(this.playerCharacter.targetCharacter)
+
+    if (this.currentMenu === this.targetMenu) {
+      const option = this.currentMenu.getCurrentOption()
+      if (option) {
+        addOverlayHPBarFor(option.battleCharacter)
+      }
+    }
 
     ctx.save()
     ctx.translate(Math.round(-camera.x), Math.round(-camera.y))
@@ -774,9 +795,10 @@ class Battle {
       sprite.draw()
       ctx.drawImage(sprite.canvas, x, y)
 
-      if (targetCharacter === sprite) {
-        targetX = sprite.x - camera.x
-        targetY = y - camera.y
+      const overlayHPBar = overlayHPBars.find(o => o.battleCharacter === sprite)
+      if (overlayHPBar) {
+        overlayHPBar.x = sprite.x - camera.x
+        overlayHPBar.y = y - camera.y
       }
     }
     ctx.restore()
@@ -829,13 +851,13 @@ class Battle {
       y -= 4
     }
 
-    if (targetCharacter) {
-      const hpBar = targetCharacter.hpBar
-      const x = targetX - hpBar.canvas.width / 2
-      const y = targetY - hpBar.canvas.height
+    for (const { x, y, battleCharacter } of overlayHPBars) {
+      const hpBar = battleCharacter.hpBar
+      const drawX = x - hpBar.canvas.width / 2
+      const drawY = y - hpBar.canvas.height
       hpBar.draw()
-      ctx.drawImage(hpBar.canvas, x, y)
-      ctx.drawImage(hpBar.labelCanvas, x - hpBar.labelCanvas.width - 2, y - 1)
+      ctx.drawImage(hpBar.canvas, drawX, drawY)
+      ctx.drawImage(hpBar.labelCanvas, drawX - hpBar.labelCanvas.width - 2, drawY - 1)
     }
 
     this.slideacrossMessage.canvas.width = this.canvas.width