Red bars acros screen when HP is low

1 files changed, 43 insertions, 0 deletions

diff --git a/index.js b/index.js
index ca01536..8162c01 100644
--- a/index.js
+++ b/index.js
@@ -877,12 +877,14 @@ class Battle {
     this.animationEntities = []
 
     this.canvas = document.createElement('canvas')
+
     // State
 
     this.gameState = 'battle' // battle, pre-win, win, pre-lose, lose
 
     this.currentMenu = this.targetTypeMenu
     this.changeMenuAnim = {time: 1, direction: 1, old: null}
+    this.nearlyDeadAnim = null
     this.preEndAnim = null
   }
 
@@ -955,6 +957,22 @@ class Battle {
     }
     ctx.restore() // End camera-translated drawing
 
+    if (this.nearlyDeadAnim) {
+      // TODO: Gradient
+      const height = Math.min(60, this.canvas.height / 4)
+      const opacity = (1 - this.nearlyDeadAnim.time) * (0.35 + Math.sin(Date.now() / 300) / 5)
+      const gradient = ctx.createLinearGradient(0, 0, 0, height)
+      gradient.addColorStop(0, `rgba(255, 0, 0, ${opacity})`)
+      gradient.addColorStop(1, 'transparent')
+      ctx.fillStyle = gradient
+      ctx.fillRect(0, 0, this.canvas.width, height)
+      const gradient2 = ctx.createLinearGradient(0, this.canvas.height - height, 0, this.canvas.height)
+      gradient2.addColorStop(0, 'transparent')
+      gradient2.addColorStop(1, `rgba(255, 0, 0, ${opacity})`)
+      ctx.fillStyle = gradient2
+      ctx.fillRect(0, this.canvas.height - height, this.canvas.width, height)
+    }
+
     const { atbBar } = this.playerCharacter
 
     ctx.save()
@@ -1046,6 +1064,31 @@ class Battle {
       }
     }
 
+    const mostHurtCharacter = this.playerCharacter.team.getMostHurtCharacter()
+    const deadCharacter = this.playerCharacter.team.characters.find(c => c.dead)
+    if (deadCharacter || mostHurtCharacter.hp / mostHurtCharacter.maxHP <= 0.3) {
+      if (!this.nearlyDeadAnim) {
+        this.nearlyDeadAnim = {time: 1, direction: -1}
+      }
+    } else {
+      if (this.nearlyDeadAnim && this.nearlyDeadAnim.direction === -1) {
+        this.nearlyDeadAnim = {time: 0, direction: 1}
+      }
+    }
+
+    if (this.nearlyDeadAnim) {
+      this.nearlyDeadAnim.time += 3 * dt * this.nearlyDeadAnim.direction
+      if (this.nearlyDeadAnim.direction === -1) {
+        if (this.nearlyDeadAnim.time < 0) {
+          this.nearlyDeadAnim.time = 0
+        }
+      } else {
+        if (this.nearlyDeadAnim.time > 1) {
+          this.nearlyDeadAnim = null
+        }
+      }
+    }
+
     for (const entity of this.animationEntities) {
       entity.update(dt)
     }