1 files changed, 20 insertions, 1 deletions
diff --git a/index.js b/index.js
index f327163..f2c7412 100644
--- a/index.js
+++ b/index.js
@@ -399,6 +399,8 @@ const enemyCharacter = new BattleCharacter()
 enemyCharacter.x = 0
 enemyCharacter.y = 200
 
+const targetCharacter = enemyCharacter
+
 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}]
@@ -428,11 +430,20 @@ function drawLoop() {
   ctx.fillStyle = '#EEE'
   ctx.fillRect(0, 0, canvas.width, canvas.height)
 
+  let targetX = 0, targetY = 0
+
   ctx.save()
   ctx.translate(-camera.x, -camera.y)
   for (const sprite of [backdrop, enemyCharacter, battleCharacter]) {
+    const x = sprite.x - sprite.canvas.width / 2
+    const y = sprite.y - sprite.canvas.height / 2
     sprite.draw()
-    ctx.drawImage(sprite.canvas, sprite.x - sprite.canvas.width / 2, sprite.y - sprite.canvas.height / 2)
+    ctx.drawImage(sprite.canvas, x, y)
+
+    if (targetCharacter === sprite) {
+      targetX = sprite.x - camera.x
+      targetY = y - camera.y
+    }
   }
   ctx.restore()
 
@@ -452,6 +463,14 @@ function drawLoop() {
   hpBar.draw()
   ctx.drawImage(hpBar.canvas, canvas.width - 20 - hpBar.canvas.width, y)
 
+  if (targetCharacter) {
+    const hpBar = targetCharacter.hpBar
+    const x = targetX - hpBar.canvas.width / 2
+    const y = targetY - hpBar.canvas.height
+    hpBar.draw()
+    ctx.drawImage(hpBar.canvas, x, y)
+  }
+
   requestAnimationFrame(drawLoop)
 }