Bug Fix

Changes:
- Only update if the target progress is different from the current progress
- fix anim loop binding logic
- Comment and warning clarifications
- delay animation start to let websocket connect

BookBar.js

@@ -38,8 +38,10 @@ 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 {
       console.warn("Progress update failed.")
     }
@@ -76,7 +78,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 +94,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 +115,7 @@ class ProgressBar {
     this.animating = false;
   }
 
-  //TEST ANIMATION
+  //TEST SIMULATION
   simProgress() {
     //sim
     if (this.simming == true) {
@@ -179,7 +181,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 +234,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 +262,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 +273,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}.`)