reconnections sorted

src/script.js

@@ -49,8 +49,8 @@ document.addEventListener("DOMContentLoaded", async () => {
     gainNode.gain.linearRampToValueAtTime(1, audioContext.currentTime + 2); // Fade to full volume
   }
   function fadeOutVolume() {
-    gainNode.gain.setValueAtTime(1, audioContext.currentTime); // Start at 0
+    gainNode.gain.setValueAtTime(1, audioContext.currentTime); // Start at 1
-    gainNode.gain.linearRampToValueAtTime(0, audioContext.currentTime + 2); // Fade to full volume
+    gainNode.gain.linearRampToValueAtTime(0, audioContext.currentTime + 2); // Fade to 0
   }
 
   function showMainContent() {
@@ -106,13 +106,68 @@ document.addEventListener("DOMContentLoaded", async () => {
   const socketFactory = new BrowserSocketFactory();
   let client = new Client(socketFactory);
   client.connect();
+  let connectionTimeout; // Timeout for detecting inactivity
+  let lastReceived = Date.now(); // Tracks the last time data was received
 
-  // set icon size
+  function resetTimeout() {
-  let iconSize;
+    clearTimeout(connectionTimeout);
+    connectionTimeout = setTimeout(() => {
+      // 15 seconds of inactivity
+      console.log("No data received in 15 seconds, reconnecting...");
+      reconnectWebSocket();
+    }, 15000);
+  }
 
-  const documentSize = document.documentElement.clientWidth;
+  function reconnectWebSocket() {
-  if (documentSize > 800) {
+    console.log("Reconnecting WebSocket...");
-    iconSize = 1;
+
+    // Clean up the existing WebSocket connection
+    if (client) {
+      client.close(); // Ensure the current connection is closed
+    }
+
+    // Create a new client instance and re-establish the connection
+    client = new Client(new BrowserSocketFactory());
+    setupWebSocketListeners(); // Set up listeners for the new WebSocket
+    client.connect(); // Reconnect
+
+    // Reset timeout after reconnecting
+    resetTimeout(); // Ensure timeout is re-established after reconnection
+  }
+
+  function setupWebSocketListeners() {
+    client.removeAllListeners("data");
+    client.removeAllListeners("error");
+    client.removeAllListeners("close");
+
+    client.on("data", (strike) => {
+      lastReceived = Date.now(); // Update the last received timestamp
+      resetTimeout(); // Reset the timeout on any data received
+
+      // Process the strike (existing logic from your original code)
+      strikeNumber++;
+      if (strikeNumber == 1) {
+        const randomInstrumentNumber = Math.floor(
+          Math.random() * (Object.keys(instruments).length - 1)
+        );
+        const selectedInstrumentName =
+          Object.keys(instruments)[randomInstrumentNumber];
+
+        placeIcon(instruments[selectedInstrumentName]);
+        playSound(instruments[selectedInstrumentName]);
+        strikeNumber = 0;
+      }
+    });
+
+    client.on("error", (message) => {
+      console.log("WebSocket error:", message);
+      reconnectWebSocket();
+    });
+
+    client.on("close", () => {
+      console.log("WebSocket closed, attempting to reconnect...");
+      reconnectWebSocket();
+    });
   }
 
   let currStaveNumber = 1;
@@ -124,8 +179,7 @@ document.addEventListener("DOMContentLoaded", async () => {
   showMainContent();
 
   /***
-   * add the instrument images and names into the about section
+   * Add the instrument images and names into the about section
-   *
    */
 
   const instrumentsKey = document.getElementById("instrument-key-div");
@@ -183,20 +237,16 @@ document.addEventListener("DOMContentLoaded", async () => {
     if (reload) location.reload();
   };
 
-  window.addEventListener("orientationchange", () => {
-    cleanUpAndRestart(true);
-  });
-
   const playSound = (instrument) => {
     if (interacted) {
       const source = audioContext.createBufferSource();
       const samples = instrument.samples;
       const sampleKeys = Object.keys(samples);
       const numSamples = sampleKeys.length;
-      const ramdomKey =
+      const randomKey =
         sampleKeys[Math.floor(Math.random() * (numSamples - 1))];
 
-      source.buffer = samples[`${ramdomKey}`];
+      source.buffer = samples[`${randomKey}`];
       source.connect(gainNode);
       source.start();
     }
@@ -204,7 +254,7 @@ document.addEventListener("DOMContentLoaded", async () => {
 
   const placeIcon = (instrument) => {
     if (currStaveNumber > numStaves) currStaveNumber = 1;
-    // select the staveWrapper in which to place the div
+    // Select the staveWrapper in which to place the div
     const staveWrapper = document.getElementById(
       `stave-wrapper-${currStaveNumber}`
     );
@@ -223,40 +273,20 @@ document.addEventListener("DOMContentLoaded", async () => {
     }px`;
     newObject.style.top = `${instrument.yPos}`;
 
-    // create the icon
+    // Create the icon
     const eventIcon = document.createElement("object");
     eventIcon.type = "image/svg+xml";
     eventIcon.data = instrument.image;
 
-    // append icon to div
+    // Append icon to div
     newObject.appendChild(eventIcon);
 
-    // append the div to the staveWrapper
+    // Append the div to the staveWrapper
     staveWrapper.appendChild(newObject);
   };
 
   let strikeNumber = 0;
 
-  client.on("error", (message) => {
+  setupWebSocketListeners(); // Setup the WebSocket listeners
-    console.log(message);
+  resetTimeout(); // Start the timeout timer
-    client.close();
-    client = new Client(socketFactory);
-    console.log("attempting reconnect...");
-    client.connect();
-  });
-
-  client.on("data", (strike) => {
-    strikeNumber++;
-    if (strikeNumber == 1) {
-      const randomInstrumentNumber = Math.floor(
-        Math.random() * (Object.keys(instruments).length - 1)
-      );
-      const selectedInstrumentName =
-        Object.keys(instruments)[randomInstrumentNumber];
-
-      placeIcon(instruments[selectedInstrumentName]);
-      playSound(instruments[selectedInstrumentName]);
-      strikeNumber = 0;
-    }
-  });
 });