Grayscale entire UI after win

1 files changed, 10 insertions, 4 deletions

diff --git a/index.js b/index.js
index c9cc7a9..7665129 100644
--- a/index.js
+++ b/index.js
@@ -528,7 +528,7 @@ class Battle {
 
     // State
 
-    this.gameState = 'battle' // battle, pre-win
+    this.gameState = 'battle' // battle, pre-win, win
 
     this.currentMenu = this.actionMenu
     this.changeMenuAnim = {time: 1, direction: 1, old: null}
@@ -586,8 +586,8 @@ class Battle {
     y -= oldOffset + (targetOffset - oldOffset) * (this.changeMenuAnim ? 1 - this.changeMenuAnim.time : 1)
     y -= 2
     ctx.save()
-    if (this.preWinAnim) {
-      const { time } = this.preWinAnim
+    if (this.preWinAnim || this.gameState === 'win') {
+      const { time } = this.preWinAnim || {time: 0}
       ctx.translate(0, Math.floor(-20 * (time - 1)))
       ctx.filter = `opacity(${time * 100}%)`
     }
@@ -643,7 +643,8 @@ class Battle {
   preWinUpdate(dt) {
     this.preWinAnim.time -= dt * 3
     if (this.preWinAnim.time <= 0) {
-      this.preWinAnim.time = null
+      this.preWinAnim = null
+      this.gameState = 'win'
     }
   }
 
@@ -744,6 +745,11 @@ function drawLoop() {
   ctx.fillRect(0, 0, canvas.width, canvas.height)
 
   battle.draw()
+  if (battle.preWinAnim) {
+    ctx.filter = `grayscale(${(1 - battle.preWinAnim.time) * 100}%)`
+  } else if (battle.gameState === 'win') {
+    ctx.filter = 'grayscale(100%)'
+  }
   ctx.drawImage(battle.canvas, 0, 0)
 
   requestAnimationFrame(drawLoop)