Animate!

Changes:
- re-enabled reconnecting websocket
- restructured goal progress update logic
- separated test sim and animation logic
- set animation to loop from zero to current progress
- set default goal progress to 25 for clearer troubleshooting

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/campaigns/partnerplus2026/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");
@@ -26,39 +31,116 @@ class ProgressBar {
       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)) {
+      this.current_progress = val;
+    } else {
+      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)";
       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;
+    //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 update 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(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 ANIMATION
   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 {
@@ -98,8 +180,7 @@ class ReconnectingWebSocket {
         console.log('Closing Websocket.')
       } {
         console.warn('WebSocket closed. Reconnecting... (disabled for now)');
-        //this.reconnect();
-        //TODO turn that back on ^
+        this.reconnect();
       }
     };
 
@@ -151,7 +232,9 @@ function communicate(websocket, book_bar) {
   console.log("Communicating");
   const params = new URLSearchParams(window.location.search);
   // INITIALIZE CLASS HERE
-  book_bar.simProgress();
+  book_bar.animStart();
+  //setTimeout(() => book_bar.animEnd(), 30000);
+  //book_bar.simStart();
 
   websocket.onopen = () => {
     websocket.send(