Make ATB progress more animated

1 files changed, 5 insertions, 1 deletions

diff --git a/index.js b/index.js
index c3f6e6c..cc1f4e4 100644
--- a/index.js
+++ b/index.js
@@ -11,6 +11,7 @@ class ATBBar {
     // State
 
     this.progress = 0
+    this.visualProgress = 0
     this.segmentCount = 6
     this.queuedActions = []
 
@@ -27,7 +28,7 @@ class ATBBar {
     ctx.save()
 
     ctx.beginPath()
-    ctx.rect(0, 0, Math.round(this.canvas.width * this.progress), this.canvas.height)
+    ctx.rect(0, 0, Math.round(this.canvas.width * this.visualProgress), this.canvas.height)
     ctx.clip()
 
     ctx.fillStyle = '#77F'
@@ -79,6 +80,9 @@ class ATBBar {
       this.progress = Math.min(1, this.progress + dt / this.segmentCount)
     }
 
+    // ATB gauge visual update
+    this.visualProgress += 8 * dt * (this.progress - this.visualProgress)
+
     // Action chaining
     if (this.battleCharacter.isExecutingChain && !this.battleCharacter.isExecutingAction) {
       if (this.queuedActions.length) {