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

@@ -27,7 +27,7 @@ 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);
     };
   }
@@ -38,9 +38,25 @@ class ProgressBar {
   setProgress(val) {
     if (Number.isInteger(val)
         && (val >= 0)
-        && (val <= this.max_progress)) {
+        && (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.")
     }
   }
@@ -58,7 +74,7 @@ class ProgressBar {
       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.")
@@ -67,7 +83,7 @@ class ProgressBar {
 
   //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)";
+    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)
@@ -76,7 +92,7 @@ class ProgressBar {
       this.anim_progress = new_val;
     }
     else {
-      console.warn("Anim update is out of range.");
+      console.warn("Anim antiFlash render is out of range.");
     }
   }
 
@@ -92,7 +108,7 @@ class ProgressBar {
       }
       //loop
       if (this.anim_progress == this.current_progress) {
-        setTimeout(() => this.renderProgress(0), 5000);
+        setTimeout(this.renderProgress.bind(this, 0), 5000);
         setTimeout(this.animProgress.bind(this), 5500);
       }
     }
@@ -113,7 +129,7 @@ class ProgressBar {
     this.animating = false;
   }
 
-  //TEST ANIMATION
+  //TEST SIMULATION
   simProgress() {
     //sim
     if (this.simming == true) {
@@ -179,7 +195,7 @@ class ReconnectingWebSocket {
       if (this.closing) {
         console.log('Closing Websocket.')
       } {
-        console.warn('WebSocket closed. Reconnecting... (disabled for now)');
+        console.warn('WebSocket closed. Reconnecting...');
         this.reconnect();
       }
     };
@@ -232,7 +248,8 @@ function communicate(websocket, book_bar) {
   console.log("Communicating");
   const params = new URLSearchParams(window.location.search);
   // INITIALIZE CLASS HERE
-  book_bar.animStart();
+  //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(
@@ -259,6 +276,9 @@ function communicate(websocket, book_bar) {
             //do something with the new data
             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
@@ -267,6 +287,10 @@ function communicate(websocket, book_bar) {
           case "endTimer":
             //do something for the final time
             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}.`)