Initial

overlay-core.js

@@ -0,0 +1,248 @@
+////////////////
+// PARAMETERS //
+////////////////
+const queryString = window.location.search;
+const urlParams = new URLSearchParams(queryString);
+
+const sbDebugMode = urlParams.get("debug") || false;
+const sbServerAddress = urlParams.get("address") || "127.0.0.1";
+const sbServerPort = urlParams.get("port") || "8080";
+const sbServerPassword = urlParams.get("password") || "VerySecretPassword";
+
+const avatarMap = new Map();
+
+/////////////////////////
+// STREAMER.BOT CLIENT //
+/////////////////////////
+
+const StreamerBot = new StreamerbotClient({
+	host: sbServerAddress,
+	port: sbServerPort,
+	password: sbServerPassword,
+
+	onConnect: (data) => {
+		console.log(`Streamer.bot successfully connected to ${sbServerAddress}:${sbServerPort}`)
+    if (sbDebugMode) 
+            console.debug(data);
+		SetConnectionStatus(true);
+	},
+
+	onDisconnect: () => {
+		console.error(`Streamer.bot disconnected from ${sbServerAddress}:${sbServerPort}`)
+		SetConnectionStatus(false);
+	}
+
+});
+
+/////////////////////////
+// STREAMER.BOT STATUS //
+/////////////////////////
+
+function SetConnectionStatus(connected) {
+	let statusContainer = document.getElementById("statusContainer");
+	if (connected) {
+		statusContainer.style.background = "#2FB774";
+		statusContainer.innerText = "Connected!";
+		statusContainer.style.opacity = 1;
+		setTimeout(() => {
+			statusContainer.style.transition = "all 2s ease";
+			statusContainer.style.opacity = 0;
+		}, 10);
+	}
+	else {
+		statusContainer.style.background = "#D12025";
+		statusContainer.innerText = "Connecting...";
+		statusContainer.style.transition = "";
+		statusContainer.style.opacity = 1;
+	}
+}
+
+/////////////////////////////
+// STREAMER.BOT DISPATCHER //
+/////////////////////////////
+const SBdispatcher = {
+  _handlers: {},
+  on(eventName, handler) {
+    if (!this._handlers[eventName]) this._handlers[eventName] = []
+    this._handlers[eventName].push(handler)
+  },
+  emit(eventName, data) {
+    (this._handlers[eventName] || []).forEach(h => {
+      try { h(data) }
+      catch(e) { console.error(`Error in handler for ${eventName}:`, e) }
+    })
+  }
+}
+
+window.SBdispatcher = SBdispatcher
+
+///////////////////////////////
+// STREAMER.BOT SUBSCRIPTION //
+///////////////////////////////
+StreamerBot.on('General.Custom', (data) => {
+	const d = data.data
+	if (sbDebugMode) console.log(d)
+	if (d.origin !== "antarex-overlay") return
+	SBdispatcher.emit(d.action, d)
+  if (d.type) {
+    SBdispatcher.emit(`${d.action}:${d.type}`, d)
+  }	
+});  
+
+///////////////////////
+// OVERLAY FUNCTIONS //
+///////////////////////
+function loadCSSModule(id, href) {
+  if (document.getElementById(id)) return;
+  const link = document.createElement('link');
+  link.id   = id;
+  link.rel  = 'stylesheet';
+  link.href = href;
+  document.head.appendChild(link);
+}
+
+function getModuleUrl() {
+  const thisScript = document.currentScript;
+  if (!thisScript) {
+    console.warn('getModuleUrl: document.currentScript non disponible');
+    return '';
+  }
+  const url = thisScript.src;
+  return url.substring(0, url.lastIndexOf('/'));
+}
+
+function getBooleanParam(paramName, defaultValue) {
+	const urlParams = new URLSearchParams(window.location.search);
+	const paramValue = urlParams.get(paramName);
+
+	if (paramValue === null) {
+		return defaultValue; // Parameter not found
+	}
+
+	const lowercaseValue = paramValue.toLowerCase(); // Handle case-insensitivity
+
+	if (lowercaseValue === 'true') {
+		return true;
+	} else if (lowercaseValue === 'false') {
+		return false;
+	} else {
+		return paramValue; // Return original string if not 'true' or 'false'
+	}
+}
+
+function getIntParam(paramName, defaultValue) {
+	const urlParams = new URLSearchParams(window.location.search);
+	const paramValue = urlParams.get(paramName);
+
+	if (paramValue === null) {
+		return defaultValue; // or undefined, or a default value, depending on your needs
+	}
+
+	console.log(paramValue);
+
+	const intValue = parseInt(paramValue, 10); // Parse as base 10 integer
+
+	if (isNaN(intValue)) {
+		return null; // or handle the error in another way, e.g., throw an error
+	}
+
+	return intValue;
+}
+
+function divShow(divId) {
+	const div = document.getElementById(divId);
+	if (div) {
+		div.style.transition = "all 1s ease";
+		div.style.opacity = 1;
+	} else {
+		console.error(`Element with ID ${divId} not found.`);
+	}
+}
+
+function divHide(divId) {
+	const div = document.getElementById(divId);	
+	if (div) {
+		div.style.transition = "all 1s ease";
+		div.style.opacity = 0;
+	} else {
+		console.error(`Element with ID ${divId} not found.`);
+	}
+}
+
+function divToggle(divId) {
+	const div = document.getElementById(divId);
+	if (div) {
+		div.style.transition = "all 1s ease";
+
+		const currentOpacity = window.getComputedStyle(div).opacity;
+
+		if (parseFloat(currentOpacity) === 0) {
+			div.style.opacity = 1;
+		} else {
+			div.style.opacity = 0;
+		}
+	} else {
+		console.error(`Element with ID ${divId} not found.`);
+	}
+}
+
+function divAnimate(divId, animationName) {
+	const div = document.getElementById(divId);
+	if (div) {
+		function positionDiv() {
+			finalizeTransformPosition(div);
+			div.removeEventListener('animationend', positionDiv);
+		}	
+		div.addEventListener('animationend', positionDiv);
+		div.style.animation = `${animationName} 2s ease forwards`;
+	} else {
+		console.error(`Element with ID ${divId} not found.`);
+	}
+}
+
+function finalizePosition(frame) {
+  const rect = frame.getBoundingClientRect();
+  const parentRect = frame.offsetParent
+    ? frame.offsetParent.getBoundingClientRect()
+    : { left: 0, top: 0, right: window.innerWidth, bottom: window.innerHeight };
+
+	const fromLeft = rect.left - parentRect.left;
+	const fromRight = parentRect.right - rect.right;		
+	const fromTop = rect.top - parentRect.top;
+	const fromBottom = parentRect.bottom - rect.bottom;
+
+	if (fromRight <= fromLeft) {
+		// Closer to right edge → use right
+		frame.style.right = `${fromRight}px`;
+		frame.style.left = '';
+	} else {
+		frame.style.left = `${fromLeft}px`;
+		frame.style.right = '';
+	}	
+
+	if (fromBottom <= fromTop) {
+		frame.style.bottom = `${fromBottom}px`;
+		frame.style.top = '';
+	} else {
+		frame.style.top = `${fromTop}px`;
+		frame.style.bottom = '';
+	}
+
+  frame.style.animation = "";
+}
+
+function finalizeTransformPosition(div) {
+  const computedStyle = window.getComputedStyle(div);
+  const transform = computedStyle.transform;
+  div.style.transform = transform;
+  div.style.animation = "";
+}
+
+function positionDiv(container) {
+	finalizePosition(container);
+	container.removeEventListener('animationend', container._positionDivHandler);
+}
+
+window.loadCSSModule 		= loadCSSModule;
+window.getModuleUrl   	= getModuleUrl;
+window.getBooleanParam 	= getBooleanParam;