startng to make classs - Socket class not okay
This commit is contained in:
Joe
parent
1393acdc42
commit
ac58c0e8c3
178
src/conductor.js
178
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");
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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
|
||||
});
|
||||
|
|
|
|||
125
src/socket.js
125
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();
|
||||
});
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue