Smartcraft-Media-Tech/nutty-tools
1
0
Fork 0
mirror of https://github.com/nuttylmao/nutty.gg.git synced 2026-09-18 19:50:58 -04:00
Code Issues Packages Projects Releases Wiki Activity

Added a basic connector page

Browse Source
This commit is contained in:
nuttylmao
2025-07-29 07:44:03 +10:00
parent 634a8ad547
commit 1b9653b44f
3 changed files with 122 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files
receipt-printer/index.html
+12 -1
View File
@@ -9,7 +9,18 @@
</head> </head>
<body> <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> </body>
<template id="receipt-template"> <template id="receipt-template">
receipt-printer/script.js
+41 -33
View File
@@ -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 // // PAGE ELEMENTS //
/////////////////// ///////////////////
@@ -37,19 +25,32 @@ const avatarMap = new Map();
// STREAMER.BOT CLIENT // // 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, host: sbServerAddress,
port: sbServerPort, port: sbServerPort,
onConnect: (data) => { onConnect: (data) => {
console.log(`Streamer.bot successfully connected to ${sbServerAddress}:${sbServerPort}`) console.log(`Streamer.bot successfully connected to ${sbServerAddress}:${sbServerPort}`)
console.debug(data); console.debug(data);
SetConnectionStatus(true);
SetConnectionState(true);
}, },
onDisconnect: () => { onDisconnect: () => {
console.error(`Streamer.bot disconnected from ${sbServerAddress}:${sbServerPort}`) console.error(`Streamer.bot disconnected from ${sbServerAddress}:${sbServerPort}`)
SetConnectionStatus(false); SetConnectionState(false);
} }
}); });
@@ -59,7 +60,6 @@ client.on('General.Custom', (response) => {
}) })
//////////////////// ////////////////////
// STREAM PRINTER // // STREAM PRINTER //
//////////////////// ////////////////////
@@ -552,8 +552,7 @@ async function CustomEvent(data) {
// Custom Code Events // Custom Code Events
case ('CustomCodeEvent'): case ('CustomCodeEvent'):
{ {
switch (data.triggerCustomCodeEventName) switch (data.triggerCustomCodeEventName) {
{
case ('kickIncomingRaid'): case ('kickIncomingRaid'):
{ {
avatarEl.src = ConvertWEBPToPNG(await GetAvatar(data.user, 'kick')); avatarEl.src = ConvertWEBPToPNG(await GetAvatar(data.user, 'kick'));
@@ -764,22 +763,31 @@ function SetPlatformIcon(el, platform) {
// STREAMER.BOT WEBSOCKET STATUS // // STREAMER.BOT WEBSOCKET STATUS //
/////////////////////////////////// ///////////////////////////////////
// This function sets the visibility of the Streamer.bot status label on the overlay function SetConnectionState(isConnected) {
function SetConnectionStatus(connected) { if (isConnected) {
let statusContainer = document.getElementById("statusContainer"); document.getElementById('ip').disabled = true;
if (connected) { document.getElementById('port').disabled = true;
statusContainer.style.background = "#2FB774"; document.getElementById('connect-button').style.backgroundColor = '#e43b3b';
statusContainer.innerText = "Connected!"; document.getElementById('connect-button').innerText = 'Disconnect';
statusContainer.style.opacity = 1;
setTimeout(() => { localStorage.setItem('sbServerAddress', document.getElementById('ip').value);
statusContainer.style.transition = "all 2s ease"; localStorage.setItem('sbServerPort', document.getElementById('port').value);
statusContainer.style.opacity = 0;
}, 10);
} }
else { else {
statusContainer.style.background = "#D12025"; document.getElementById('ip').disabled = false;
statusContainer.innerText = "Connecting..."; document.getElementById('port').disabled = false;
statusContainer.style.transition = ""; document.getElementById('connect-button').style.backgroundColor = '#3be477';
statusContainer.style.opacity = 1; 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();
} }
} }
receipt-printer/style.css
+69 -4
View File
@@ -2,12 +2,78 @@ body {
font-size: 16px; font-size: 16px;
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif; font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
text-align: center; 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 { #avatar {
height: 6em; height: 6em;
border-radius: 50%; border-radius: 50%;
@@ -49,8 +115,7 @@ body {
text-transform: uppercase; text-transform: uppercase;
} }
#footer { #footer {}
}
.emote { .emote {
height: 1em; height: 1em;