From ac58c0e8c329b4cd8b5f7053ec9d5f86ceabc490 Mon Sep 17 00:00:00 2001 From: Joe Date: Sun, 13 Apr 2025 14:26:24 +0100 Subject: [PATCH] startng to make classs - Socket class not okay --- src/conductor.js | 178 ++++++++++++++++++++++++----------------------- src/script.js | 18 ++--- src/socket.js | 125 ++++++++++++++++++--------------- 3 files changed, 170 insertions(+), 151 deletions(-) diff --git a/src/conductor.js b/src/conductor.js index 7f93875..7c114f2 100644 --- a/src/conductor.js +++ b/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}${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}${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"); - } } diff --git a/src/script.js b/src/script.js index ba591e4..eeb073d 100644 --- a/src/script.js +++ b/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(); - const instNames = Object.keys(instruments); - - showMainContent(); + conductor.showMainContent(); let strikeNumber = 0; - setupWebSocketListeners(); // Setup the WebSocket listeners - resetTimeout(); // Start the timeout timer + // setupWebSocketListeners(); // Setup the WebSocket listeners + // resetTimeout(); // Start the timeout timer }); diff --git a/src/socket.js b/src/socket.js index 0c3a1dc..70c7378 100644 --- a/src/socket.js +++ b/src/socket.js @@ -1,66 +1,79 @@ -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 +import { Client, BrowserSocketFactory } from "./blitz.js"; +export class DataStream { + socketFactory; + connectionTimeout; + lastReceived; + client; -function resetTimeout() { - clearTimeout(connectionTimeout); - connectionTimeout = setTimeout(() => { - // 14 seconds of inactivity - console.log("No data received in 14 seconds, reconnecting..."); - reconnectWebSocket(); - }, 14999); -} + constructor() {} -function reconnectWebSocket() { - console.log("Reconnecting WebSocket..."); - - // Clean up the existing WebSocket connection - if (client) { - client.close(); // Ensure the current connection is closed + 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(); } - // 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 + resetTimeout() { + clearTimeout(connectionTimeout); + connectionTimeout = setTimeout(() => { + // 14 seconds of inactivity + console.log("No data received in 14 seconds, reconnecting..."); + reconnectWebSocket(); + }, 14999); + } - // Reset timeout after reconnecting - resetTimeout(); // Ensure timeout is re-established after reconnection -} + reconnectWebSocket() { + console.log("Reconnecting WebSocket..."); -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 == 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; + // Clean up the existing WebSocket connection + if (client) { + client.close(); // Ensure the current connection is closed } - }); - client.on("error", (message) => { - console.log("WebSocket error:", message); - reconnectWebSocket(); - }); + // 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 - client.on("close", () => { - console.log("WebSocket closed, attempting to reconnect..."); - reconnectWebSocket(); - }); + // Reset timeout after reconnecting + resetTimeout(); // Ensure timeout is re-established after reconnection + } + + 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 == 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) => { + console.log("WebSocket error:", message); + reconnectWebSocket(); + }); + + client.on("close", () => { + console.log("WebSocket closed, attempting to reconnect..."); + reconnectWebSocket(); + }); + } }