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>
<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">
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 //
///////////////////
@@ -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();
}
}
receipt-printer/style.css
+69 -4
View File
@@ -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;