Actual Initial Upload...

Simple bare-bones book progress bar with a test animation running.

Changes:
- Migrated to a new repo because the whole project was in the wrong local directory.. oops
- Removed remaining unrelated timer files and code.

TODO:
- Remove IMGUR hotlink
- Update book art
- Proper input value testing
- Get websocket connected and tested

BookBar.js

@@ -0,0 +1,187 @@
+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.max_progress = 45;
+    this.target_element = document.getElementById("progressBar");
+    this.bar_back = document.getElementById("barBack");
+    this.bar_front = document.getElementById("barFront");
+  }
+  //SET NUMBER OF COLORED BOOKS
+  setProgress(val) {
+    if (Number.isInteger(val) && (this.target_element != null) && (this.bar_back != null) && (this.bar_front != null)) {
+      let val_string = val.toString();
+      if (val_string.length < 2) {
+        val_string = "0" + val_string;
+      }
+      this.bar_back.style.backgroundImage = "url(src/Books/BookBar_v5_f00" + val_string + ".png)";
+      setTimeout(this.preLoad.bind(this), 150, val_string, val);
+    }
+  }
+  preLoad(val_string, new_val) {
+    this.bar_front.style.backgroundImage = "url(src/Books/BookBar_v5_f00" + val_string + ".png)";
+    if ((new_val >= 0) && (new_val <= this.max_progress)) {
+      this.current_progress = new_val;
+    }
+    else {
+      console.warn("Progress update is out of range.");
+    }
+  }
+  //TEST ANIMATION
+  
+  simProgress() {
+    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);
+    }
+  }
+  
+}
+
+class ReconnectingWebSocket {
+  constructor(url) {
+    this.url = url;
+    this.ws = null;
+    this.attempt = 0;
+    this.connect();
+
+    this.closing = false;
+    this.onopen = null;
+    this.onmessage = null;
+    this.onclose = null;
+    this.onerror = null;
+  }
+
+  connect() {
+    this.ws = new WebSocket(this.url);
+
+    this.ws.onopen = () => {
+      console.log('WebSocket connecting');
+      this.attempt = 0;
+      if (this.onopen != null) {
+        this.onopen();
+      }
+    };
+
+    this.ws.onmessage = (msg) => {
+      console.log('Received:', msg.data);
+      if (this.onmessage != null) {
+        this.onmessage(msg);
+      }
+    };
+
+    this.ws.onclose = () => {
+      if (this.closing) {
+        console.log('Closing Websocket.')
+      } {
+        console.warn('WebSocket closed. Reconnecting... (disabled for now)');
+        //this.reconnect();
+        //TODO turn that back on ^
+      }
+    };
+
+    this.ws.onerror = (err) => {
+      console.error('WebSocket error:', err);
+      if (this.onerror != null) {
+        this.onerror();
+      }
+      this.close();
+    };
+  }
+
+  reconnect() {
+    const delay = this.getBackoffDelay(this.attempt);
+    console.log(`Reconnecting in ${delay}ms`);
+
+    setTimeout(() => {
+      this.attempt++;
+      this.connect();
+    }, delay);
+  }
+
+  close() {
+    this.closing = true;
+    this.ws.close();
+    if (this.onclose != null) {
+      this.onclose();
+    }
+  }
+
+  getBackoffDelay(attempt) {
+    const base = 500; // 0.5 second
+    const max = 30000; // 30 seconds
+    const jitter = Math.random() * 1000;
+    return Math.min(base * 2 ** attempt + jitter, max);
+  }
+
+  send(data) {
+    if (this.ws.readyState === WebSocket.OPEN) {
+      this.ws.send(data);
+    } else {
+      console.warn('WebSocket not connected');
+    }
+  }
+}
+
+
+function communicate(websocket, book_bar) {
+  console.log("Communicating");
+  const params = new URLSearchParams(window.location.search);
+  // INITIALIZE CLASS HERE
+  book_bar.simProgress();
+
+  websocket.onopen = () => {
+    websocket.send(
+      JSON.stringify(
+        {
+          type: "init",
+          channel: "SubTimer",
+          community: params.get('community')
+        }
+      )
+    );
+  };
+
+  websocket.onmessage = ({ data }) => {
+    console.log("messaged");
+    const event = JSON.parse(data);
+    switch (event.type) {
+      case "DO":
+        let args = event.args;
+
+        // Call the specified method
+        switch (event.method) {
+          case "setTimer":
+            //do something with the new data
+            console.log("set timer: " + event);
+            book_bar.setProgress(event.reward_progress);
+            break;
+          case "noTimer":
+            //do something default
+            console.log("no timer: " + event);
+            break;
+          case "endTimer":
+            //do something for the final time
+            console.log("end timer: " + event);
+            break
+          default:
+            throw new Error(`Unsupported method requested: ${event.method}.`)
+        }
+        break;
+      default:
+        throw new Error(`Unsupported event type: ${event.type}.`);
+    }
+  };
+}