Lots of stuff, can't remember lol

This commit is contained in:
nuttylmao
2025-04-18 22:13:18 +10:00
parent ddc3dd10e7
commit 75658f89d3
10 changed files with 519 additions and 116 deletions
+13 -3
View File
@@ -4,17 +4,26 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="../../.resources/logo.png" type="image/png">
<title>Settings</title>
<link rel="stylesheet" href="style.css">
<script type="text/javascript" src="https://unpkg.com/@streamerbot/client/dist/streamerbot-client.js"></script>
</head>
<body>
<div id="pinned-header">
<div style="display: flex; align-items: center; padding-bottom: 20px;">
<img src="../../.resources/logo.png" style="height: 40px;"/>
<button style="display: flex; width: auto; margin-left: auto; background: var(--accent-color);" onclick="OpenMembershipPage()">Check out my premium widgets</button>
</div>
<h2>Widget URL</h2>
<input id="widget-url" type="text" readonly>
<button id="save-settings">Click to copy URL</button>
<button onclick="OpenMembershipPage()">💎 Member Exclusive Widgets</button>
<div style="display: flex; gap: 10px;">
<button id="save-settings">Click to copy URL</button>
<button onclick="OpenLoadSettingsPopup()">Load Settings</button>
</div>
<!-- <button onclick="OpenMembershipPage()">💎 Member Exclusive Widgets</button> -->
</div>
<div id="settings-container">
@@ -24,7 +33,8 @@
<div id="mommy-milkers">
<div id="load-settings-container">
<h2>Load Settings From Widget URL</h2>
<h2>Load Settings</h2>
<label style="font-size: 0.8em;">Paste in your existing widget URL</label>
<input id="load-url" type="text">
<div style="display: flex;">
<button id="cancel-settings" onclick="CloseSettings()">Cancel</button>
+117 -21
View File
@@ -1,14 +1,52 @@
// Search paramaters
const queryString = window.location.search;
const urlParams = new URLSearchParams(queryString);
const settingsJson = urlParams.get("settingsJson") || "";
// Connect to Streamer.bot and get list of actions
const sbServerAddress = '127.0.0.1';
const sbServerPort = '8080';
const client = new StreamerbotClient({
host: sbServerAddress,
port: sbServerPort,
onConnect: (data) => {
console.log(`Streamer.bot successfully connected to ${sbServerAddress}:${sbServerPort}`)
console.debug(data);
// Get list of actions
GetSBActions();
},
onDisconnect: () => {
console.error(`Streamer.bot disconnected from ${sbServerAddress}:${sbServerPort}`)
}
});
async function GetSBActions() {
const response = await client.getActions();
console.debug(response);
const datalistElement = document.createElement('datalist');
datalistElement.id = 'streamer-bot-actions';
for (const action of response.actions)
{
const option = document.createElement('option');
option.value = action.name;
datalistElement.appendChild(option);
}
document.body.appendChild(datalistElement);
}
document.addEventListener('DOMContentLoaded', () => {
const settingsContent = document.getElementById('settings-content');
const saveButton = document.getElementById('save-settings');
fetch(settingsJson)
//fetch('../../multichat-overlay/settings/settings.json')
.then(response => response.json())
.then(data => {
const groupedSettings = {};
@@ -33,12 +71,15 @@ document.addEventListener('DOMContentLoaded', () => {
groupedSettings[groupName].forEach(setting => {
const settingItem = document.createElement('div');
settingItem.classList.add('setting-item');
settingItem.id = `item-${setting.id}`;
const labelDescriptionDiv = document.createElement('div');
const label = document.createElement('label');
label.textContent = setting.label;
labelDescriptionDiv.appendChild(label);
if (setting.label) {
const label = document.createElement('label');
label.textContent = setting.label;
labelDescriptionDiv.appendChild(label);
}
if (setting.description) {
const description = document.createElement('p');
@@ -74,6 +115,7 @@ document.addEventListener('DOMContentLoaded', () => {
// Add event listener to the switchDiv
labelDiv.addEventListener('click', () => {
checkBoxElement.checked = !checkBoxElement.checked;
UpdateSettingItemVisibility();
});
inputElement = labelDiv;
break;
@@ -106,6 +148,37 @@ document.addEventListener('DOMContentLoaded', () => {
inputElement.max = setting.max;
inputElement.step = setting.step;
break;
case 'sb-actions':
inputElement = document.createElement('input');
inputElement.type = 'text';
inputElement.placeholder = 'Type to search...';
inputElement.id = setting.id; //Added setting ID
inputElement.value = setting.defaultValue;
inputElement.setAttribute('list', 'streamer-bot-actions');
inputElement.autocomplete = 'off';
break;
case 'button':
inputElement = document.createElement('button');
inputElement.id = setting.id; //Added setting ID
inputElement.textContent = setting.label;
inputElement.addEventListener('click', () => {
window.parent.callFunction(setting.callFunction);
const defaultBackgroundColor = "#2e2e2e";
const defaultTextColor = "white";
inputElement.style.transitionDuration = '0s'
inputElement.style.backgroundColor = "#2196f3"
inputElement.style.color = "#ffffff";
setTimeout(() => {
inputElement.style.transitionDuration = '0.2s'
inputElement.style.backgroundColor = defaultBackgroundColor;
inputElement.style.color = defaultTextColor;
}, 100);
});
break;
default:
inputElement = document.createElement('input');
inputElement.type = 'text';
@@ -114,30 +187,53 @@ document.addEventListener('DOMContentLoaded', () => {
}
inputElement.addEventListener('input', function (event) {
SendDateToParent(data);
SendDataToParent(data);
});
settingItemContent.appendChild(inputElement);
settingItem.appendChild(labelDescriptionDiv);
settingItem.appendChild(settingItemContent);
if (setting.type == 'button')
{
settingItem.style.display = 'block'
settingItem.appendChild(settingItemContent);
}
else
{
settingItem.appendChild(labelDescriptionDiv);
settingItem.appendChild(settingItemContent);
}
groupDiv.appendChild(settingItem);
});
settingsContent.appendChild(groupDiv);
}
function UpdateSettingItemVisibility() {
data.settings.forEach(setting => {
if (setting.hideIf)
{
if (!document.getElementById(setting.hideIf).checked)
document.getElementById(`item-${setting.id}`).style.display = 'none'
else
document.getElementById(`item-${setting.id}`).style.display = 'flex'
}
});
}
UpdateSettingItemVisibility();
// saveButton.addEventListener('click', () => {
// SendDateToParent(data);
// SendDataToParent(data);
// });
SendDateToParent(data);
SendDataToParent(data);
})
.catch(error => console.error('Error loading settings:', error));
});
// In the iframe's JavaScript:
function SendDateToParent(data) {
function SendDataToParent(data) {
const settings = {};
data.settings.forEach(setting => {
let inputElement = document.getElementById(setting.id);
@@ -183,12 +279,6 @@ saveButton.addEventListener('click', () => {
}, 3000);
});
widgetURLBox.addEventListener('click', () => {
let loadSettingsBox = document.getElementById('mommy-milkers');
loadSettingsBox.style.visibility = 'visible';
loadSettingsBox.style.opacity = 1;
});
function CloseSettings() {
let loadSettingsBox = document.getElementById('mommy-milkers');
loadSettingsBox.style.visibility = 'hidden';
@@ -198,12 +288,11 @@ function CloseSettings() {
function LoadSettings() {
let loadURLBox = document.getElementById('load-url');
const url = new URL(loadURLBox.value);
url.searchParams.forEach((value, key) => {
const inputElement = document.getElementById(key);
if (inputElement != null)
{
if (inputElement != null) {
if (inputElement.type == 'checkbox')
inputElement.checked = value.toLocaleLowerCase() == 'true';
else
@@ -230,8 +319,15 @@ function GetWidgetURL() {
}
return result;
//return 'D:/Projects/GitHub Projects/nutty.gg/multistream-alerts/index.html'
}
function OpenMembershipPage() {
window.open("https://nutty.gg/supporters/sign_in", '_blank').focus();
window.open("https://nutty.gg/supporters/sign_in", '_blank').focus();
}
function OpenLoadSettingsPopup() {
let loadSettingsBox = document.getElementById('mommy-milkers');
loadSettingsBox.style.visibility = 'visible';
loadSettingsBox.style.opacity = 1;
}
+9 -6
View File
@@ -2,10 +2,12 @@
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
font-size: 16px;
color: white;
--accent-color: #2196f3;
}
body {
background-color: #181818;
margin: 0px 20px;
}
body::-webkit-scrollbar {
@@ -63,7 +65,7 @@ body::-webkit-scrollbar-thumb:hover {
.setting-group {
margin-bottom: 20px;
/* border: 1px solid #ddd; */
padding: 15px;
padding-bottom: 15px;
border-radius: 5px;
}
@@ -97,7 +99,7 @@ h2 {
font-weight: 300;
/* color: #666; */
opacity: 0.6;
margin-bottom: 0;
margin: 0;
}
a {
@@ -126,6 +128,7 @@ input[type="number"] {
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#widget-url:hover {
cursor: pointer;
}
@@ -195,11 +198,11 @@ input:focus {
}
input:checked+.slider {
background-color: #2196F3;
background-color: var(--accent-color);
}
input:focus+.slider {
box-shadow: 0 0 1px #2196F3;
box-shadow: 0 0 1px var(--accent-color);
}
input:checked+.slider:before {
@@ -227,7 +230,7 @@ button {
border-radius: 0.5em;
padding: 10px 20px;
width: 100%;
transition: all 0.2s ease;
transition: all 0.2s ease-in-out;
}
button:hover {
@@ -270,5 +273,5 @@ button:hover {
}
#load-settings {
background-color: #2196F3;
background-color: var(--accent-color);
}