Draw labels about actions being executed

1 files changed, 32 insertions, 2 deletions

diff --git a/index.js b/index.js
index 0dedbb1..2a2f074 100644
--- a/index.js
+++ b/index.js
@@ -553,6 +553,7 @@ class BattleCharacter extends Sprite {
     this.isExecutingChain = false
     this.isExecutingAction = false
     this.actionExecuteTime = 0
+    this.actionBeingExecuted = null
 
     this.targetType = null // ally or enemy
     this.targetCharacter = null
@@ -632,6 +633,7 @@ class BattleCharacter extends Sprite {
       if (this.actionExecuteTime <= 0) {
         this.actionExecuteTime = 0
         this.isExecutingAction = false
+        this.actionBeingExecuted = null
       }
     }
   }
@@ -664,6 +666,7 @@ class BattleCharacter extends Sprite {
     this.isExecutingChain = true
     this.isExecutingAction = true
     this.actionExecuteTime = 0.4 + 0.2 * action.size
+    this.actionBeingExecuted = action
 
     if (this.targetCharacter) {
       this.battle.animationEntities.push(new MagicProjectile(this, this.targetCharacter, action))
@@ -799,7 +802,7 @@ class Battle {
       }
     }
 
-    ctx.save()
+    ctx.save() // Begin camera-translated drawing
     ctx.translate(Math.round(-camera.x), Math.round(-camera.y))
     for (const sprite of [this.backdrop, ...this.getAllBattleCharacters(), ...this.animationEntities]) {
       const x = Math.round(sprite.x - sprite.canvas.width / 2)
@@ -813,7 +816,34 @@ class Battle {
         overlayHPBar.y = y - camera.y
       }
     }
-    ctx.restore()
+
+    for (const battleCharacter of this.getAllBattleCharacters()) {
+      if (battleCharacter.isExecutingAction) {
+        const sprite = battleCharacter
+        const { label } = battleCharacter.actionBeingExecuted
+
+        ctx.font = '5px pixel-font'
+        const width = ctx.measureText(label).width + 4
+        const x = Math.round(sprite.x - sprite.canvas.width / 2 - width / 2)
+        const y = Math.round(sprite.y - sprite.canvas.height / 2)
+
+        let textFillStyle
+        if (battleCharacter.team === this.playerCharacter.team) {
+          ctx.fillStyle = 'rgba(45, 128, 255, 0.3)'
+          ctx.strokeStyle = 'rgb(30, 85, 170)'
+        } else {
+          ctx.fillStyle = 'rgba(255, 45, 45, 0.3)'
+          ctx.strokeStyle = 'rgb(170, 30, 30)'
+        }
+        ctx.fillRect(x, y, width, 9)
+        ctx.strokeRect(x + 0.5, y + 0.5, width, 8)
+        ctx.font = '5px pixel-font' // It gets reset for some reason?
+        ctx.fillStyle = 'white'
+        ctx.textAlign = 'left'
+        ctx.fillText(label, x + 3, y + 7)
+      }
+    }
+    ctx.restore() // End camera-translated drawing
 
     const { atbBar } = this.playerCharacter