refactored - still some renedering issue

src/audio.js

@@ -27,7 +27,7 @@ function fadeOutVolume() {
   gainNode.gain.linearRampToValueAtTime(0, audioContext.currentTime + 2); // Fade to 0
 }
 
-function playSound(instrument) {
+export function playSound(instrument) {
   if (interacted) {
     //      const source = audioContext.createBufferSource();
     const samples = instrument.samples;

src/conductor.js

@@ -1,22 +1,15 @@
 import { loadInstruments } from "./instruments.js";
 
 export class Conductor {
+  instruments;
+
   constructor() {}
 
   showingWhichContent;
   interacted = true;
-  cleanUpAndRestart(reload = false) {
+
-    const icons = document.querySelectorAll(".event-icon");
+  get instruments() {
-    const timeIndicator = document.getElementById("time-indicator");
+    return this.instruments;
-    icons.forEach((icon) => {
-      icon.classList.add("fade-out");
-      icon.addEventListener("transitionend", () => {
-        icon.remove();
-      });
-    });
-    currStaveNumber = 1;
-    setTitle();
-    if (reload) location.reload();
   }
 
   setTitle() {
@@ -93,45 +86,19 @@ export class Conductor {
 
   async init() {
     const instrumentsKey = document.getElementById("instrument-key-div");
-    const instruments = await loadInstruments();
+    this.instruments = await loadInstruments();
-    const instNames = Object.keys(instruments);
+    const instNames = Object.keys(this.instruments);
     for (const instrument of instNames) {
       const keyDiv = document.createElement("div");
       const keySvg = document.createElement("object");
       const keyName = document.createElement("div");
       keyName.innerText = instrument.toUpperCase();
       keySvg.type = "image/svg+xml";
-      keySvg.data = instruments[instrument].image;
+      keySvg.data = this.instruments[instrument].image;
       keyDiv.appendChild(keySvg);
       keyDiv.appendChild(keyName);
       keyDiv.classList.add("instrument-key");
       instrumentsKey.appendChild(keyDiv);
     }
-
-    const numStaves = 6;
-    const sheetWindow = document.getElementById("music-window");
-
-    for (let i = 1; i <= numStaves; i++) {
-      const staveWrapper = document.createElement("div");
-      staveWrapper.classList.add(`stave-wrapper`);
-      staveWrapper.setAttribute("id", `stave-wrapper-${i}`);
-      staveWrapper.style.position = "relative";
-      const staveObject = document.createElement("object");
-      staveObject.type = "image/svg+xml";
-      staveObject.data = "assets/svg/stave.svg";
-      staveObject.classList.add("stave-svg");
-
-      staveWrapper.appendChild(staveObject);
-      sheetWindow.appendChild(staveWrapper);
-    }
-
-    const timeIndicator = document.querySelector("#time-indicator");
-
-    timeIndicator.addEventListener("animationiteration", () => {
-      currStaveNumber++;
-      if (currStaveNumber > numStaves) {
-        cleanUpAndRestart();
-      }
-    });
   }
 }

src/render.js

@@ -1,32 +1,83 @@
-const placeIcon = (instrument) => {
+export class Renderer {
-  if (currStaveNumber > numStaves) currStaveNumber = 1;
+  timeIndicator;
-  // Select the staveWrapper in which to place the div
+  currStaveNumber;
-  const staveWrapper = document.getElementById(
+  numStaves;
-    `stave-wrapper-${currStaveNumber}`
+  sheetWindow;
+
+  constructor() {
+    this.numStaves = 6;
+    this.currStaveNumber = 1; // ✅ Initialize current stave number
+    this.timeIndicator = document.querySelector("#time-indicator");
+
+    this.timeIndicator.addEventListener("animationiteration", () => {
+      this.currStaveNumber++;
+      if (this.currStaveNumber > this.numStaves) {
+        this.cleanUpAndRestart(); // ✅ Use this.method
+      }
+    });
+
+    this.sheetWindow = document.getElementById("music-window");
+
+    for (let i = 1; i <= this.numStaves; i++) {
+      const staveWrapper = document.createElement("div");
+      staveWrapper.classList.add("stave-wrapper");
+      staveWrapper.setAttribute("id", `stave-wrapper-${i}`);
+      staveWrapper.style.position = "relative";
+
+      const staveObject = document.createElement("object");
+      staveObject.type = "image/svg+xml";
+      staveObject.data = "assets/svg/stave.svg";
+      staveObject.classList.add("stave-svg");
+
+      staveWrapper.appendChild(staveObject);
+      this.sheetWindow.appendChild(staveWrapper);
+    }
+  }
+
+  placeIcon = (instrument) => {
+    if (this.currStaveNumber > this.numStaves) this.currStaveNumber = 1;
+
+    // ✅ Use a local variable instead of overwriting this.staveWrapper
+    const targetWrapper = document.getElementById(
+      `stave-wrapper-${this.currStaveNumber}`
     );
-  // Determine the position of the time indicator
+
-  const rect = timeIndicator.getBoundingClientRect();
+    const rect = this.timeIndicator.getBoundingClientRect();
-  const sheetLeft = sheetWindow.getBoundingClientRect().left;
+    const sheetLeft = this.sheetWindow.getBoundingClientRect().left;
     const xPosition = rect.left + window.scrollX - sheetLeft;
 
-  // Create the icon div and give it its location data
     const newObject = document.createElement("div");
     newObject.classList.add("event-icon");
     newObject.style.position = "absolute";
-
     newObject.style.left = `${
       xPosition - document.documentElement.clientWidth / 200
     }px`;
     newObject.style.top = `${instrument.yPos}`;
 
-  // Create the icon
     const eventIcon = document.createElement("object");
     eventIcon.type = "image/svg+xml";
     eventIcon.data = instrument.image;
 
-  // Append icon to div
     newObject.appendChild(eventIcon);
+    targetWrapper.appendChild(newObject); // ✅ Append to local reference
+  };
 
-  // Append the div to the staveWrapper
+  cleanUpAndRestart(reload = false) {
-  staveWrapper.appendChild(newObject);
+    const icons = document.querySelectorAll(".event-icon");
-};
+    this.timeIndicator = document.getElementById("time-indicator");
+
+    icons.forEach((icon) => {
+      icon.classList.add("fade-out");
+      icon.addEventListener("transitionend", () => {
+        icon.remove();
+      });
+    });
+
+    this.currStaveNumber = 1;
+
+    // Assuming setTitle() exists globally or is handled elsewhere
+    setTitle();
+
+    if (reload) location.reload();
+  }
+}

src/script.js

@@ -1,20 +1,36 @@
 import { sendMidiMessage } from "./midi.js";
 import { Conductor } from "./conductor.js";
 import { DataStream } from "./socket.js";
+import { playSound } from "./audio";
+import { Renderer, placeIcon } from "./render.js";
 
 document.addEventListener("DOMContentLoaded", async () => {
   sendMidiMessage();
 
   const conductor = new Conductor();
+  await conductor.init();
   const dataStream = new DataStream();
-  conductor.init();
+  const instruments = await conductor.instruments;
+  console.log(instruments);
+
+  const renderer = new Renderer();
+
+  dataStream.addEventListener("strike", () => {
+    const keys = Object.keys(instruments);
+    const randomIndex = Math.floor(Math.random() * keys.length);
+    const selectedInstrument = instruments[keys[randomIndex]];
+
+    renderer.placeIcon(selectedInstrument);
+    playSound(selectedInstrument);
+  });
+
   dataStream.init();
 
-  let currStaveNumber = 1;
+  // let currStaveNumber = 1;
 
   conductor.showMainContent();
 
-  let strikeNumber = 0;
+  //  let strikeNumber = 0;
 
   //  setupWebSocketListeners(); // Setup the WebSocket listeners
   //  resetTimeout(); // Start the timeout timer

src/socket.js

@@ -1,79 +1,62 @@
-import { Client, BrowserSocketFactory } from "./blitz.js";
+import { BrowserSocketFactory, Client } from "./blitz";
-export class DataStream {
-  socketFactory;
-  connectionTimeout;
-  lastReceived;
-  client;
 
-  constructor() {}
+export class DataStream extends EventTarget {
+  constructor() {
+    super();
+    this.socketFactory = null;
+    this.client = null;
+    this.lastReceived = null;
+    this.connectionTimeout = null;
+  }
 
   async init() {
     this.socketFactory = new BrowserSocketFactory();
-    this.lastReceived = Date.now(); // Tracks the last time data was received
+    this.client = new Client(this.socketFactory);
-    this.client = new Client(socketFactory);
+    this.lastReceived = Date.now();
-    client.connect();
+
-    setupWebSocketListeners();
+    this.setupWebSocketListeners();
-    resetTimeout();
+    this.client.connect();
+    this.resetTimeout();
   }
 
   resetTimeout() {
-    clearTimeout(connectionTimeout);
+    clearTimeout(this.connectionTimeout);
-    connectionTimeout = setTimeout(() => {
+    this.connectionTimeout = setTimeout(() => {
-      // 14 seconds of inactivity
       console.log("No data received in 14 seconds, reconnecting...");
-      reconnectWebSocket();
+      this.reconnectWebSocket();
     }, 14999);
   }
 
   reconnectWebSocket() {
-    console.log("Reconnecting WebSocket...");
+    if (this.client) {
-
+      this.client.close();
-    // Clean up the existing WebSocket connection
-    if (client) {
-      client.close(); // Ensure the current connection is closed
     }
-
+    this.client = new Client(new BrowserSocketFactory());
-    // Create a new client instance and re-establish the connection
+    this.setupWebSocketListeners();
-    client = new Client(new BrowserSocketFactory());
+    this.client.connect();
-    setupWebSocketListeners(); // Set up listeners for the new WebSocket
+    this.resetTimeout();
-    client.connect(); // Reconnect
-
-    // Reset timeout after reconnecting
-    resetTimeout(); // Ensure timeout is re-established after reconnection
   }
 
   setupWebSocketListeners() {
-    client.removeAllListeners("data");
+    this.client.removeAllListeners?.("data");
-    client.removeAllListeners("error");
+    this.client.removeAllListeners?.("error");
-    client.removeAllListeners("close");
+    this.client.removeAllListeners?.("close");
 
-    client.on("data", (strike) => {
+    this.client.on("data", (data) => {
-      lastReceived = Date.now(); // Update the last received timestamp
+      this.lastReceived = Date.now();
-      resetTimeout(); // Reset the timeout on any data received
+      this.resetTimeout();
 
-      // Process the strike (existing logic from your original code)
+      this.dispatchEvent(new CustomEvent("strike", { detail: data }));
-      strikeNumber++;
-      if (strikeNumber == 0) {
-        const randomInstrumentNumber = Math.floor(
-          Math.random() * (Object.keys(instruments).length - 0)
-        );
-        const selectedInstrumentName =
-          Object.keys(instruments)[randomInstrumentNumber];
-
-        placeIcon(instruments[selectedInstrumentName]);
-        playSound(instruments[selectedInstrumentName]);
-        strikeNumber = -1;
-      }
     });
 
-    client.on("error", (message) => {
+    this.client.on("error", (err) => {
-      console.log("WebSocket error:", message);
+      console.error("WebSocket error:", err);
-      reconnectWebSocket();
+      this.reconnectWebSocket();
     });
 
-    client.on("close", () => {
+    this.client.on("close", () => {
       console.log("WebSocket closed, attempting to reconnect...");
-      reconnectWebSocket();
+      this.reconnectWebSocket();
     });
   }
 }