From 02a7a799e2206ecc09dd84e1d6c595475871fad2 Mon Sep 17 00:00:00 2001 From: Florrie Date: Sun, 12 Aug 2018 14:37:43 -0300 Subject: Grayscale entire UI after win --- index.js | 14 ++++++++++---- 1 file 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) -- cgit 1.3.0-6-gf8a5