From 1b9653b44f572d21b2da916dea69192f2b5fff4a Mon Sep 17 00:00:00 2001
From: nuttylmao <nuttylmao@gmail.com>
Date: Tue, 29 Jul 2025 07:44:03 +1000
Subject: [PATCH] Added a basic connector page

---
 receipt-printer/index.html | 13 ++++++-
 receipt-printer/script.js  | 74 +++++++++++++++++++++-----------------
 receipt-printer/style.css  | 73 ++++++++++++++++++++++++++++++++++---
 3 files changed, 122 insertions(+), 38 deletions(-)
diff --git a/receipt-printer/index.html b/receipt-printer/index.html
index ecae6ea..15abcca 100644
--- a/receipt-printer/index.html
+++ b/receipt-printer/index.html
@@ -9,7 +9,18 @@
 </head>
 
 <body>
-	<div id="statusContainer">Connecting...</div>
+	<div id="connect-box">
+		<div class="field">
+			<label for="ip">IP Address</label>
+			<input type="text" id="ip" name="ip" placeholder="127.0.0.1" value="127.0.0.1">
+		</div>
+		<div class="field">
+			<label for="port">Port</label>
+			<input type="text" id="port" name="port" placeholder="8080" value="8080">
+		</div>
+		<button id="connect-button" onclick="Connect()">Connect</button>
+
+	</div>
 </body>
 
 <template id="receipt-template">
diff --git a/receipt-printer/script.js b/receipt-printer/script.js
index 1aa23e8..34474d4 100644
--- a/receipt-printer/script.js
+++ b/receipt-printer/script.js
@@ -1,15 +1,3 @@
-////////////////
-// PARAMETERS //
-////////////////
-
-const queryString = window.location.search;
-const urlParams = new URLSearchParams(queryString);
-
-const sbServerAddress = urlParams.get("address") || "127.0.0.1";
-const sbServerPort = urlParams.get("port") || "8080";
-
-
-
 ///////////////////
 // PAGE ELEMENTS //
 ///////////////////
@@ -37,19 +25,32 @@ const avatarMap = new Map();
 // STREAMER.BOT CLIENT //
 /////////////////////////
 
-const client = new StreamerbotClient({
+// Check local storage
+if (localStorage.getItem('sbServerAddress') === null)
+    localStorage.setItem('sbServerAddress', '127.0.0.1');
+if (localStorage.getItem('sbServerPort') === null)
+    localStorage.setItem('sbServerPort', '8080');
+
+document.getElementById('ip').value = localStorage.getItem('sbServerAddress');
+document.getElementById('port').value = localStorage.getItem('sbServerPort');
+
+let sbServerAddress = document.getElementById('ip').value;
+let sbServerPort = document.getElementById('port').value;
+
+let client = new StreamerbotClient({
     host: sbServerAddress,
     port: sbServerPort,
 
     onConnect: (data) => {
         console.log(`Streamer.bot successfully connected to ${sbServerAddress}:${sbServerPort}`)
         console.debug(data);
-        SetConnectionStatus(true);
+
+        SetConnectionState(true);
     },
 
     onDisconnect: () => {
         console.error(`Streamer.bot disconnected from ${sbServerAddress}:${sbServerPort}`)
-        SetConnectionStatus(false);
+        SetConnectionState(false);
     }
 });
 
@@ -59,7 +60,6 @@ client.on('General.Custom', (response) => {
 })
 
 
-
 ////////////////////
 // STREAM PRINTER //
 ////////////////////
@@ -552,8 +552,7 @@ async function CustomEvent(data) {
         // Custom Code Events
         case ('CustomCodeEvent'):
             {
-                switch (data.triggerCustomCodeEventName)
-                {
+                switch (data.triggerCustomCodeEventName) {
                     case ('kickIncomingRaid'):
                         {
                             avatarEl.src = ConvertWEBPToPNG(await GetAvatar(data.user, 'kick'));
@@ -764,22 +763,31 @@ function SetPlatformIcon(el, platform) {
 // STREAMER.BOT WEBSOCKET STATUS //
 ///////////////////////////////////
 
-// This function sets the visibility of the Streamer.bot status label on the overlay
-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);
+function SetConnectionState(isConnected) {
+    if (isConnected) {
+        document.getElementById('ip').disabled = true;
+        document.getElementById('port').disabled = true;
+        document.getElementById('connect-button').style.backgroundColor = '#e43b3b';
+        document.getElementById('connect-button').innerText = 'Disconnect';
+
+        localStorage.setItem('sbServerAddress', document.getElementById('ip').value);
+        localStorage.setItem('sbServerPort', document.getElementById('port').value);
     }
     else {
-        statusContainer.style.background = "#D12025";
-        statusContainer.innerText = "Connecting...";
-        statusContainer.style.transition = "";
-        statusContainer.style.opacity = 1;
+        document.getElementById('ip').disabled = false;
+        document.getElementById('port').disabled = false;
+        document.getElementById('connect-button').style.backgroundColor = '#3be477';
+        document.getElementById('connect-button').innerText = 'Connect';
+    }
+}
+
+function Connect() {
+    if (document.getElementById('ip').disabled)
+        client.disconnect();
+    else
+    {
+        client.options.host = document.getElementById('ip').value;
+        client.options.port = document.getElementById('port').value;
+        client.connect();
     }
 }
\ No newline at end of file
diff --git a/receipt-printer/style.css b/receipt-printer/style.css
index ea55bb0..d39304b 100644
--- a/receipt-printer/style.css
+++ b/receipt-printer/style.css
@@ -2,12 +2,78 @@ body {
 	font-size: 16px;
 	font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
 	text-align: center;
+	color: white;
+
+	background-color: #282828;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	height: 100vh;
 }
 
-#header {
-
+label {
+	font-weight: 600;
 }
 
+button {
+	font-size: 1em;
+	font-weight: 500;
+	background-color: #3be477;
+	color: white;
+	opacity: 0.8;
+	border-width: 0;
+	border-radius: 0.25em;
+	padding: 0.25em 0.5em;
+	width: 100%;
+}
+
+button:hover {
+	opacity: 1;
+	cursor: pointer;
+}
+
+button:disabled {
+	opacity: 0.5;
+	cursor: inherit;
+}
+
+input {
+	border-radius: 0.5em;
+	width: calc(100% - 20px);
+	margin: 10px 0px;
+	padding: 10px 10px;
+	background-color: #ffffff05;
+	border-width: 0px;
+	color: white;
+	font-size: 1em;
+}
+
+input:disabled {
+	opacity: 0.5;
+}
+
+textarea:focus, input:focus {
+    outline: none;
+}
+
+#connect-box {
+	font-size: 24px;
+	background-color: #181818;
+	text-align: left;
+	display: flex;
+	flex-direction: column;
+	gap: 1em;
+	padding: 2em;
+	border-radius: 0.5em;
+}
+
+.field {
+	display: flex;
+	flex-direction: column;
+}
+
+#header {}
+
 #avatar {
 	height: 6em;
 	border-radius: 50%;
@@ -49,8 +115,7 @@ body {
 	text-transform: uppercase;
 }
 
-#footer {
-}
+#footer {}
 
 .emote {
 	height: 1em;
