Bug Fix

Changes:
- If an out of range update is received, set the current progress to zero or max to avoid getting stuck on the default value when the page is loaded after exceeding the goal.

BookBar.css

@@ -81,7 +81,7 @@ p {
     background-size: contain;
     background-repeat: no-repeat;
     background-size: contain;
-    background-image: url("src/Books/BookBar_v8_f0000.png");
+    background-image: url("src/Books/BookBar_f0000.png");
   }
   .barFlashHelper {
     position: absolute;
@@ -91,7 +91,7 @@ p {
     height: 100%;
     background-repeat: no-repeat;
     background-size: contain;
-    background-image: url("src/Books/BookBar_v8_f0000.png");
+    background-image: url("src/Books/BookBar_f0000.png");
   }
   #barBack {
   }

BookBar.js

@@ -1,16 +1,21 @@
 window.addEventListener("DOMContentLoaded", () => {
   //Create progress bar
   const book_bar = new ProgressBar();
+
   //Pat Lilac
   const websocket = new ReconnectingWebSocket("wss://lilac.thewisewolf.dev/tracker/timer/ws");
   communicate(websocket, book_bar);
+
 });
 
 
 class ProgressBar {
   constructor() {
-    this.current_progress = 0;
+    this.current_progress = 25;
     this.max_progress = 45;
+    this.anim_progress = 0;
+    this.animating = false;
+    this.simming = false;
     this.target_element = document.getElementById("progressBar");
     this.bar_back = document.getElementById("barBack");
     this.bar_front = document.getElementById("barFront");
@@ -22,43 +27,136 @@ class ProgressBar {
       if (index_string.length < 2) {
         index_string = "0" + index_string;
       }
-      img_fetcher.src = "src/Books/BookBar_v8_f00" + index_string + ".png";
+      img_fetcher.src = "src/Books/BookBar_f00" + index_string + ".png";
       image_cache.push(img_fetcher);
     };
   }
+
   //SET NUMBER OF COLORED BOOKS
+
+  //Set current campaign progress
   setProgress(val) {
-    if (Number.isInteger(val) && (this.target_element != null) && (this.bar_back != null) && (this.bar_front != null)) {
+    if (Number.isInteger(val)
+        && (val >= 0)
+        && (val <= this.max_progress)
+        && (val != this.current_progress)) {
+      this.current_progress = val;
+      this.anim_progress = 0;
+    } else {
+      if (Number.isInteger(val)
+          && (val >= this.max_progress)
+          && (val != this.current_progress)) {
+        this.current_progress = this.max_progress;
+        this.anim_progress = 0;
+        console.warn("Progress update: Goal Exceeded.")
+      }
+      if (Number.isInteger(val)
+          && (val <= 0)
+          && (val != this.current_progress)) {
+        this.current_progress = 0;
+        this.anim_progress = 0;
+        console.warn("Progress update: Goal Subceeded.")
+      }
+      console.warn("Progress update failed.")
+    }
+  }
+
+  //Render current animation state to the screen
+  renderProgress(val) {
+    if (Number.isInteger(val)
+        && (this.target_element != null)
+        && (this.bar_back != null)
+        && (this.bar_front != null)
+        && (val >= 0)
+        && (val <= this.current_progress)
+        && (val <= this.max_progress)) {
       let val_string = val.toString();
       if (val_string.length < 2) {
         val_string = "0" + val_string;
       }
-      this.bar_back.style.backgroundImage = "url(src/Books/BookBar_v8_f00" + val_string + ".png)";
+      this.bar_back.style.backgroundImage = "url(src/Books/BookBar_f00" + val_string + ".png)";
       setTimeout(this.antiFlash.bind(this), 150, val_string, val);
+    } else {
+      console.warn("Progress render failed.")
     }
   }
+
+  //Prevent image flicker by pre-loading a version of the image then rendering the top image with a delay
   antiFlash(val_string, new_val) {
-    this.bar_front.style.backgroundImage = "url(src/Books/BookBar_v8_f00" + val_string + ".png)";
-    if ((new_val >= 0) && (new_val <= this.max_progress)) {
-      this.current_progress = new_val;
+    this.bar_front.style.backgroundImage = "url(src/Books/BookBar_f00" + val_string + ".png)";
+    //Increment the animation ticker (plus an extra round of safety checks)
+    if ((new_val >= 0)
+        && (new_val <= this.current_progress)
+        && (this.anim_progress <= this.max_progress)
+        && (new_val <= this.max_progress)) {
+      this.anim_progress = new_val;
     }
     else {
-      console.warn("Progress update is out of range.");
+      console.warn("Anim antiFlash render is out of range.");
     }
   }
-  //TEST ANIMATION
 
+  //Progress Animation
+  animProgress() {
+    //animate
+    if (this.animating == true) {
+      if ((this.anim_progress >= 0)
+        && (this.anim_progress < this.current_progress)
+        && (this.anim_progress < this.max_progress)) {
+      this.renderProgress(this.anim_progress + 1);
+      setTimeout(this.animProgress.bind(this), 500);
+      }
+      //loop
+      if (this.anim_progress == this.current_progress) {
+        setTimeout(this.renderProgress.bind(this, 0), 5000);
+        setTimeout(this.animProgress.bind(this), 5500);
+      }
+    }
+  }
+
+  //Toggle animation on
+  animStart() {
+    if (this.animating != true){
+      this.animating = true;
+      this.animProgress();
+    } else {
+      console.warn("Animation already running");
+    }
+  }
+
+  //Toggle animation off
+  animEnd() {
+    this.animating = false;
+  }
+
+  //TEST SIMULATION
   simProgress() {
-    if (this.current_progress < this.max_progress) {
+    //sim
+    if (this.simming == true) {
+      if (this.current_progress < this.max_progress) {
       this.setProgress(this.current_progress + 1);
-      setTimeout(this.simProgress.bind(this), 500);
-    }
-    if (this.current_progress == this.max_progress) {
-      setTimeout(() => this.setProgress(0), 5000);
-      setTimeout(this.simProgress.bind(this), 5500);
+      setTimeout(this.simProgress.bind(this), 38500);
+      }
+      //loop
+      if (this.current_progress == this.max_progress) {
+        setTimeout(() => this.setProgress(0), 10000);
+        setTimeout(this.simProgress.bind(this), 95500);
+      }
     }
   }
 
+  simStart() {
+    console.log("starting");
+    this.simming = true;
+    this.simProgress();
+    console.log("started");
+  }
+
+  simEnd() {
+    console.log("ending");
+    this.simming = false;
+  }
+  
 }
 
 class ReconnectingWebSocket {
@@ -97,9 +195,8 @@ class ReconnectingWebSocket {
       if (this.closing) {
         console.log('Closing Websocket.')
       } {
-        console.warn('WebSocket closed. Reconnecting... (disabled for now)');
-        //this.reconnect();
-        //TODO turn that back on ^
+        console.warn('WebSocket closed. Reconnecting...');
+        this.reconnect();
       }
     };
 
@@ -151,7 +248,8 @@ function communicate(websocket, book_bar) {
   console.log("Communicating");
   const params = new URLSearchParams(window.location.search);
   // INITIALIZE CLASS HERE
-  book_bar.simProgress();
+  //queue animation start after a few seconds to allow for initial status from server
+  setTimeout(book_bar.animStart.bind(book_bar),5000);
 
   websocket.onopen = () => {
     websocket.send(
@@ -176,16 +274,23 @@ function communicate(websocket, book_bar) {
         switch (event.method) {
           case "setTimer":
             //do something with the new data
-            console.log("set timer: " + event);
-            book_bar.setProgress(event.reward_progress);
+            console.log("set timer: " + args.reward_progress);
+            book_bar.setProgress(args.reward_progress);
+            //animEnd();
+            //setTimeout(book_bar.setProgress(args.reward_progress), 7500);
+            //setTimeout(book_bar.animStart, 7800);
             break;
           case "noTimer":
             //do something default
-            console.log("no timer: " + event);
+            console.log("no timer: " + args);
             break;
           case "endTimer":
             //do something for the final time
-            console.log("end timer: " + event);
+            console.log("end timer: " + args);
+            //book_bar.renderProgress(args.reward_progress);
+            //book_bar.animEnd();
+            //setTimeout(book_bar.renderProgress(args.reward_progress), 7500);
+            //setTimeout(book_bar.animStart, 7800);
             break
           default:
             throw new Error(`Unsupported method requested: ${event.method}.`)