skelbon
/
conductor
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

refactored - still some renedering issue

This commit is contained in:
Joe 2025-04-14 05:06:59 +01:00
parent ac58c0e8c3
commit 17f1cbfa9b
5 changed files with 142 additions and 125 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/audio.js
View File

@ -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;

49
src/conductor.js
View File

@ -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");
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();
get instruments() {
return this.instruments;
}
setTitle() {
@ -93,45 +86,19 @@ export class Conductor {
async init() {
const instrumentsKey = document.getElementById("instrument-key-div");
const instruments = await loadInstruments();
const instNames = Object.keys(instruments);
this.instruments = await loadInstruments();
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();
}
});
}
}

81
src/render.js
View File

@ -1,32 +1,83 @@
const placeIcon = (instrument) => {
if (currStaveNumber > numStaves) currStaveNumber = 1;
// Select the staveWrapper in which to place the div
const staveWrapper = document.getElementById(
`stave-wrapper-${currStaveNumber}`
export class Renderer {
timeIndicator;
currStaveNumber;
numStaves;
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 sheetLeft = sheetWindow.getBoundingClientRect().left;
const rect = this.timeIndicator.getBoundingClientRect();
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);
// Append the div to the staveWrapper
staveWrapper.appendChild(newObject);
targetWrapper.appendChild(newObject); // ✅ Append to local reference
};
cleanUpAndRestart(reload = false) {
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();
}
}

22
src/script.js
View File

@ -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

89
src/socket.js
View File

@ -1,79 +1,62 @@
import { Client, BrowserSocketFactory } from "./blitz.js";
export class DataStream {
socketFactory;
connectionTimeout;
lastReceived;
client;
import { BrowserSocketFactory, Client } from "./blitz";
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(socketFactory);
client.connect();
setupWebSocketListeners();
resetTimeout();
this.client = new Client(this.socketFactory);
this.lastReceived = Date.now();
this.setupWebSocketListeners();
this.client.connect();
this.resetTimeout();
}
resetTimeout() {
clearTimeout(connectionTimeout);
connectionTimeout = setTimeout(() => {
// 14 seconds of inactivity
clearTimeout(this.connectionTimeout);
this.connectionTimeout = setTimeout(() => {
console.log("No data received in 14 seconds, reconnecting...");
reconnectWebSocket();
this.reconnectWebSocket();
}, 14999);
}
reconnectWebSocket() {
console.log("Reconnecting WebSocket...");
// Clean up the existing WebSocket connection
if (client) {
client.close(); // Ensure the current connection is closed
if (this.client) {
this.client.close();
}
// 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
this.client = new Client(new BrowserSocketFactory());
this.setupWebSocketListeners();
this.client.connect();
this.resetTimeout();
}
setupWebSocketListeners() {
client.removeAllListeners("data");
client.removeAllListeners("error");
client.removeAllListeners("close");
this.client.removeAllListeners?.("data");
this.client.removeAllListeners?.("error");
this.client.removeAllListeners?.("close");
client.on("data", (strike) => {
lastReceived = Date.now(); // Update the last received timestamp
resetTimeout(); // Reset the timeout on any data received
this.client.on("data", (data) => {
this.lastReceived = Date.now();
this.resetTimeout();
// 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;
}
this.dispatchEvent(new CustomEvent("strike", { detail: data }));
});
client.on("error", (message) => {
console.log("WebSocket error:", message);
reconnectWebSocket();
this.client.on("error", (err) => {
console.error("WebSocket error:", err);
this.reconnectWebSocket();
});
client.on("close", () => {
this.client.on("close", () => {
console.log("WebSocket closed, attempting to reconnect...");
reconnectWebSocket();
this.reconnectWebSocket();
});
}
}