BookBar/BookBar.js

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}.`);
    }
  };
}