Slideacross message, 'leader changed'

1 files changed, 56 insertions, 6 deletions

diff --git a/index.js b/index.js
index a27872e..2c4ed29 100644
--- a/index.js
+++ b/index.js
@@ -606,10 +606,11 @@ class Battle {
     this.camera = new Camera()
     this.camera.follow(this.playerCharacter)
 
-    this.canvas = document.createElement('canvas')
+    this.slideacrossMessage = new SlideacrossMessage()
 
     this.animationEntities = []
 
+    this.canvas = document.createElement('canvas')
     // State
 
     this.gameState = 'battle' // battle, pre-win, win, pre-lose, lose
@@ -698,6 +699,11 @@ class Battle {
       ctx.drawImage(hpBar.labelCanvas, x - hpBar.labelCanvas.width - 2, y - 1)
     }
 
+    this.slideacrossMessage.canvas.width = this.canvas.width
+    this.slideacrossMessage.canvas.height = this.canvas.height
+    this.slideacrossMessage.draw()
+    ctx.drawImage(this.slideacrossMessage.canvas, 0, 0)
+
     ctx.restore()
   }
 
@@ -731,6 +737,8 @@ class Battle {
 
     this.animationEntities = this.animationEntities.filter(e => !e.discarded)
 
+    this.slideacrossMessage.update(dt)
+
     // Assign a new player character if the current one died
     if (this.playerCharacter.dead) {
       const newCharacter = this.playerCharacter.team.characters.find(c => !c.dead)
@@ -740,7 +748,7 @@ class Battle {
         newCharacter.atbBar.queuedActions.splice(0)
         newCharacter.isExecutingChain = false
         this.showTargetTypeMenu()
-        // TODO: "Leader changed" message
+        this.slideacrossMessage.showMessage('Leader changed: ' + newCharacter.name)
       }
     }
 
@@ -892,6 +900,52 @@ class MagicProjectile {
   }
 }
 
+class SlideacrossMessage {
+  constructor() {
+    this.text = null
+    this.anim = null
+
+    this.canvas = document.createElement('canvas')
+    // Width/height should be set externally!
+  }
+
+  update(dt) {
+    if (this.anim) {
+      this.anim.time -= 0.5 * dt
+
+      if (this.anim.time <= 0) {
+        this.anim = null
+      }
+    }
+  }
+
+  draw() {
+    const ctx = this.canvas.getContext('2d')
+    ctx.clearRect(0, 0, this.canvas.width, this.canvas.height)
+
+    if (this.anim) {
+      let x = 0
+      if (this.anim.time <= 0.5) {
+        x = this.canvas.width + 0.5 * this.canvas.width * Math.sin(-(this.anim.time * Math.PI))
+      } else {
+        x = 0.5 * this.canvas.width * Math.sin(this.anim.time * Math.PI)
+      }
+      ctx.fillStyle = 'rgba(0, 0, 0, 0.5)'
+      ctx.fillRect(0, this.canvas.height / 2 - 8, this.canvas.width, 16)
+
+      ctx.font = '5px pixel-font'
+      ctx.fillStyle = 'white'
+      ctx.textAlign = 'center'
+      ctx.fillText(this.text, x, this.canvas.height / 2)
+    }
+  }
+
+  showMessage(text) {
+    this.text = text
+    this.anim = {time: 1}
+  }
+}
+
 const battle = new Battle()
 
 for (let ti = 0; ti < battle.teams.length; ti++) {
@@ -909,10 +963,6 @@ for (let ti = 0; ti < battle.teams.length; ti++) {
         {x: 40, y: 200, name: 'Flaprat'}
       ]
     ][ti][ci])
-
-    if (ti === 0) {
-      team.characters[ci].takeDamage(300)
-    }
   }
 }