Y-direction menu animation

1 files changed, 7 insertions, 3 deletions

diff --git a/index.js b/index.js
index 25c7570..42aed58 100644
--- a/index.js
+++ b/index.js
@@ -124,6 +124,7 @@ class ATBBar {
         this.progress -= 1 / this.segmentCount * action.size
       } else {
         this.battleCharacter.isExecutingChain = false
+        this.battle.changeMenuAnim = {old: null, direction: 1, time: 1}
         this.battle.currentMenu = this.battle.actionMenu
       }
     }
@@ -147,6 +148,7 @@ class ATBBar {
       }
       this.queuedActions.splice(cutoff)
 
+      this.battle.changeMenuAnim = {old: this.battle.currentMenu, direction: 1, time: 1}
       this.battle.currentMenu = null
       this.battleCharacter.isExecutingChain = true
     }
@@ -553,12 +555,14 @@ class Battle {
         ctx.filter = `opacity(${(1 - time) * 100}%)`
       }
       ctx.drawImage(this.currentMenu.canvas, 20, y - this.currentMenu.canvas.height)
-      y -= this.currentMenu.canvas.height + 2
       ctx.restore()
     }
+    const targetOffset = this.currentMenu ? this.currentMenu.canvas.height : 0
+    const oldOffset = (this.changeMenuAnim && this.changeMenuAnim.old) ? this.changeMenuAnim.old.canvas.height : 0
     atbBar.draw()
-    y -= atbBar.canvas.height
-    ctx.drawImage(atbBar.canvas, 20, y)
+    y -= oldOffset + (targetOffset - oldOffset) * (this.changeMenuAnim ? 1 - this.changeMenuAnim.time : 1)
+    y -= 2
+    ctx.drawImage(atbBar.canvas, 20, y - atbBar.canvas.height)
 
     y = canvas.height - 20
     for (const { hpBar } of this.playerCharacter.team.characters) {