Basic menu animations

1 files changed, 29 insertions, 3 deletions

diff --git a/index.js b/index.js
index 9553b52..25c7570 100644
--- a/index.js
+++ b/index.js
@@ -506,6 +506,7 @@ class Battle {
     // State
 
     this.currentMenu = this.actionMenu
+    this.changeMenuAnim = {time: 1, direction: 1, old: null}
   }
 
   draw() {
@@ -532,12 +533,28 @@ class Battle {
 
     const { atbBar } = this.playerCharacter
 
+    // TODO: transition y for menus.. let targetY
     let y = canvas.height - 20
+    if (this.changeMenuAnim && this.changeMenuAnim.old) {
+      const { old: oldMenu, time, direction } = this.changeMenuAnim
+      oldMenu.draw()
+      ctx.save()
+      ctx.translate(Math.floor(10 * (time - 1) * direction), 0)
+      ctx.filter = `opacity(${time * 100}%)`
+      ctx.drawImage(oldMenu.canvas, 20, y - oldMenu.canvas.height)
+      ctx.restore()
+    }
     if (this.currentMenu) {
       this.currentMenu.draw()
-      y -= this.currentMenu.canvas.height
-      ctx.drawImage(this.currentMenu.canvas, 20, y)
-      y -= 2
+      ctx.save()
+      if (this.changeMenuAnim) {
+        const { time, direction } = this.changeMenuAnim
+        ctx.translate(Math.floor(10 * time * direction), 0)
+        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()
     }
     atbBar.draw()
     y -= atbBar.canvas.height
@@ -566,6 +583,13 @@ class Battle {
     }
 
     this.camera.update(dt)
+
+    if (this.changeMenuAnim) {
+      this.changeMenuAnim.time -= 5 * dt
+      if (this.changeMenuAnim.time <= 0) {
+        this.changeMenuAnim = null
+      }
+    }
   }
 
   getAllBattleCharacters() {
@@ -679,6 +703,7 @@ canvas.addEventListener('keypress', evt => {
       } else if (evt.keyCode === 13 || evt.key.toLowerCase() === 'e') {
         if (battle.playerCharacter.atbBar.queuedActions.length) {
           battle.currentMenu = targetMenu
+          battle.changeMenuAnim = {old: actionMenu, direction: 1, time: 1}
           targetMenu.buildOptions(battle)
         }
       }
@@ -688,6 +713,7 @@ canvas.addEventListener('keypress', evt => {
         atbBar.activate()
       } else if (evt.keyCode === 8) {
         battle.currentMenu = actionMenu
+        battle.changeMenuAnim = {old: targetMenu, direction: -1, time: 1}
       }
     }
   } else {