startng to make classs - Socket class not okay

src/conductor.js

@@ -1,12 +1,100 @@
-class Conductor {
+import { loadInstruments } from "./instruments.js";
+
+export class Conductor {
   constructor() {}
 
   showingWhichContent;
   interacted = true;
+  cleanUpAndRestart(reload = false) {
+    const icons = document.querySelectorAll(".event-icon");
+    const timeIndicator = document.getElementById("time-indicator");
+    icons.forEach((icon) => {
+      icon.classList.add("fade-out");
+      icon.addEventListener("transitionend", () => {
+        icon.remove();
+      });
+    });
+    currStaveNumber = 1;
+    setTitle();
+    if (reload) location.reload();
+  }
 
-  init() {
+  setTitle() {
+    const now = new Date();
+    const future = new Date(now.getTime() + 59 * 1000); // 59 seconds later
+
+    const formattedDate = `${this.padZero(now.getDate())}.${this.padZero(
+      now.getMonth() + 1
+    )}.${now.getFullYear()}`;
+    const formattedTime = `${this.padZero(now.getHours())}:${this.padZero(
+      now.getMinutes()
+    )}:${this.padZero(now.getSeconds())}`;
+    const formattedFutureTime = `${this.padZero(
+      future.getHours()
+    )}:${this.padZero(future.getMinutes())}:${this.padZero(
+      future.getSeconds()
+    )}`;
+
+    title.innerHTML = `${formattedDate}<span class="tab-space"></span>${formattedTime} - ${formattedFutureTime} UTC`;
+  }
+
+  showMainContent() {
+    this.setTitle();
+    const mute = document.getElementById("mute");
+
+    mute.addEventListener("click", () => {
+      const mutedSrc = "/assets/svg/sound-on.svg";
+      const unMutedSrc = "/assets/svg/mute.svg";
+      interacted = !interacted;
+      interacted ? unMute() : muter();
+      mute.src = interacted ? mutedSrc : unMutedSrc;
+
+      startAudio();
+      fadeInVolume();
+    });
+
+    this.fadeAndReplaceADiv("main-content", "loading-screen");
+    this.fadeAndReplaceADiv("buttons", "buttons");
+    this.showingWhichContent = "main-content";
+
+    document.getElementById("menu-button").onclick = function () {
+      toggleInfo();
+    };
+  }
+
+  toggleInfo() {
+    if (this.showingWhichContent === "main-content") {
+      this.fadeAndReplaceADiv("about-content", "main-content");
+      cleanUpAndRestart();
+      this.showingWhichContent = "about-content";
+    } else {
+      this.fadeAndReplaceADiv("main-content", "about-content");
+      this.showingWhichContent = "main-content";
+    }
+  }
+
+  fadeAndReplaceADiv(innyDivId, outtyDivId) {
+    const outty = document.getElementById(outtyDivId);
+    const inny = document.getElementById(innyDivId);
+    outty.classList.remove("fade-in");
+    outty.classList.add("fade-out");
+
+    outty.style.display = "none";
+    inny.style.display = "flex";
+    inny.style.opacity = "0";
+    void inny.offsetWidth;
+    inny.classList.add("fade-in");
+    inny.style.opacity = "1";
+  }
+
+  padZero(num) {
+    return num.toString().padStart(2, "0");
+  }
+
+  async init() {
     const instrumentsKey = document.getElementById("instrument-key-div");
-
+    const instruments = await loadInstruments();
+    const instNames = Object.keys(instruments);
     for (const instrument of instNames) {
       const keyDiv = document.createElement("div");
       const keySvg = document.createElement("object");
@@ -46,88 +134,4 @@ class Conductor {
       }
     });
   }
-
-  cleanUpAndRestart(reload = false) {
-    const icons = document.querySelectorAll(".event-icon");
-    const timeIndicator = document.getElementById("time-indicator");
-    icons.forEach((icon) => {
-      icon.classList.add("fade-out");
-      icon.addEventListener("transitionend", () => {
-        icon.remove();
-      });
-    });
-    currStaveNumber = 1;
-    setTitle();
-    if (reload) location.reload();
-  }
-
-  setTitle() {
-    const now = new Date();
-    const future = new Date(now.getTime() + 59 * 1000); // 59 seconds later
-
-    const formattedDate = `${padZero(now.getDate())}.${padZero(
-      now.getMonth() + 1
-    )}.${now.getFullYear()}`;
-    const formattedTime = `${padZero(now.getHours())}:${padZero(
-      now.getMinutes()
-    )}:${padZero(now.getSeconds())}`;
-    const formattedFutureTime = `${padZero(future.getHours())}:${padZero(
-      future.getMinutes()
-    )}:${padZero(future.getSeconds())}`;
-
-    title.innerHTML = `${formattedDate}<span class="tab-space"></span>${formattedTime} - ${formattedFutureTime} UTC`;
-  }
-
-  showMainContent() {
-    setTitle();
-    const mute = document.getElementById("mute");
-
-    mute.addEventListener("click", () => {
-      const mutedSrc = "/assets/svg/sound-on.svg";
-      const unMutedSrc = "/assets/svg/mute.svg";
-      interacted = !interacted;
-      interacted ? unMute() : muter();
-      mute.src = interacted ? mutedSrc : unMutedSrc;
-
-      startAudio();
-      fadeInVolume();
-    });
-
-    fadeAndReplaceADiv("main-content", "loading-screen");
-    fadeAndReplaceADiv("buttons", "buttons");
-    this.showingWhichContent = "main-content";
-
-    document.getElementById("menu-button").onclick = function () {
-      toggleInfo();
-    };
-  }
-
-  toggleInfo() {
-    if (this.showingWhichContent === "main-content") {
-      fadeAndReplaceADiv("about-content", "main-content");
-      cleanUpAndRestart();
-      this.showingWhichContent = "about-content";
-    } else {
-      fadeAndReplaceADiv("main-content", "about-content");
-      this.showingWhichContent = "main-content";
-    }
-  }
-
-  fadeAndReplaceADiv(innyDivId, outtyDivId) {
-    const outty = document.getElementById(outtyDivId);
-    const inny = document.getElementById(innyDivId);
-    outty.classList.remove("fade-in");
-    outty.classList.add("fade-out");
-
-    outty.style.display = "none";
-    inny.style.display = "flex";
-    inny.style.opacity = "0";
-    void inny.offsetWidth;
-    inny.classList.add("fade-in");
-    inny.style.opacity = "1";
-  }
-
-  padZero(num) {
-    return num.toString().padStart(2, "0");
-  }
 }

src/script.js

@@ -1,19 +1,21 @@
-import { Client, BrowserSocketFactory } from "./blitz.js";
-import { loadInstruments } from "./instruments.js";
 import { sendMidiMessage } from "./midi.js";
+import { Conductor } from "./conductor.js";
+import { DataStream } from "./socket.js";
 
 document.addEventListener("DOMContentLoaded", async () => {
   sendMidiMessage();
 
+  const conductor = new Conductor();
+  const dataStream = new DataStream();
+  conductor.init();
+  dataStream.init();
+
   let currStaveNumber = 1;
 
-  const instruments = await loadInstruments();
+  conductor.showMainContent();
-  const instNames = Object.keys(instruments);
-
-  showMainContent();
 
   let strikeNumber = 0;
 
-  setupWebSocketListeners(); // Setup the WebSocket listeners
+  //  setupWebSocketListeners(); // Setup the WebSocket listeners
-  resetTimeout(); // Start the timeout timer
+  //  resetTimeout(); // Start the timeout timer
 });

src/socket.js

@@ -1,19 +1,31 @@
-const socketFactory = new BrowserSocketFactory();
+import { Client, BrowserSocketFactory } from "./blitz.js";
-let client = new Client(socketFactory);
+export class DataStream {
-client.connect();
+  socketFactory;
-let connectionTimeout; // Timeout for detecting inactivity
+  connectionTimeout;
-let lastReceived = Date.now(); // Tracks the last time data was received
+  lastReceived;
+  client;
 
-function resetTimeout() {
+  constructor() {}
+
+  async init() {
+    this.socketFactory = new BrowserSocketFactory();
+    this.lastReceived = Date.now(); // Tracks the last time data was received
+    this.client = new Client(socketFactory);
+    client.connect();
+    setupWebSocketListeners();
+    resetTimeout();
+  }
+
+  resetTimeout() {
     clearTimeout(connectionTimeout);
     connectionTimeout = setTimeout(() => {
       // 14 seconds of inactivity
       console.log("No data received in 14 seconds, reconnecting...");
       reconnectWebSocket();
     }, 14999);
-}
+  }
 
-function reconnectWebSocket() {
+  reconnectWebSocket() {
     console.log("Reconnecting WebSocket...");
 
     // Clean up the existing WebSocket connection
@@ -28,9 +40,9 @@ function reconnectWebSocket() {
 
     // Reset timeout after reconnecting
     resetTimeout(); // Ensure timeout is re-established after reconnection
-}
+  }
 
-function setupWebSocketListeners() {
+  setupWebSocketListeners() {
     client.removeAllListeners("data");
     client.removeAllListeners("error");
     client.removeAllListeners("close");
@@ -63,4 +75,5 @@ function setupWebSocketListeners() {
       console.log("WebSocket closed, attempting to reconnect...");
       reconnectWebSocket();
     });
+  }
 }