Implemented more settings

This commit is contained in:
nuttylmao
2025-04-19 04:14:52 +10:00
parent 5167c17e49
commit 950d76bd10
4 changed files with 80 additions and 41 deletions
+1 -1
View File
@@ -129,9 +129,9 @@ document.addEventListener('DOMContentLoaded', () => {
if (option === setting.defaultValue) { if (option === setting.defaultValue) {
optionElement.selected = true; optionElement.selected = true;
} }
inputElement.value = setting.defaultValue;
inputElement.appendChild(optionElement); inputElement.appendChild(optionElement);
}); });
inputElement.value = setting.defaultValue;
break; break;
case 'color': case 'color':
inputElement = document.createElement('input'); inputElement = document.createElement('input');
+17 -8
View File
@@ -9,6 +9,7 @@ const sbServerAddress = urlParams.get("address") || "127.0.0.1";
const sbServerPort = urlParams.get("port") || "8080"; const sbServerPort = urlParams.get("port") || "8080";
const avatarMap = new Map(); const avatarMap = new Map();
const mainContainer = document.getElementById('mainContainer');
const alertBox = document.getElementById('alertBox'); const alertBox = document.getElementById('alertBox');
const avatarElement = document.getElementById('avatar'); const avatarElement = document.getElementById('avatar');
const avatarSmallElement = document.getElementById('avatarButItsSmallerThanTheOneFromBeforeForPrettinessPurposes'); const avatarSmallElement = document.getElementById('avatarButItsSmallerThanTheOneFromBeforeForPrettinessPurposes');
@@ -123,8 +124,10 @@ const showFourthwallAlerts = GetBooleanParam("showFourthwallAlerts", false);
const fourthwallAlertAction = urlParams.get("fourthwallAlertAction") || ""; const fourthwallAlertAction = urlParams.get("fourthwallAlertAction") || "";
// Set avatar visibility // Set avatar visibility
if (!showAvatar) if (!showAvatar) {
avatarElement.style.display = 'none'; avatarElement.style.display = 'none';
avatarSmallElement.style.display = 'none';
}
// Set fonts for the widget // Set fonts for the widget
document.body.style.fontFamily = font; document.body.style.fontFamily = font;
@@ -154,6 +157,10 @@ document.body.style.fontSize = `${fontSize}px`;
// break; // break;
// } // }
// Set the alignment of the alert box
if (alignment == "align-to-bottom")
mainContainer.style.justifyContent = 'flex-end';
@@ -304,7 +311,7 @@ client.on('Fourthwall.GiftDrawEnded', (response) => {
/////////////////////// ///////////////////////
async function TwitchCheer(data) { async function TwitchCheer(data) {
if (!showTwitchSubs) if (!showTwitchCheers)
return; return;
// Set the text // Set the text
@@ -352,7 +359,9 @@ async function TwitchCheer(data) {
`cheered ${bits} bits`, `cheered ${bits} bits`,
'', '',
username, username,
message message,
twitchCheerAction,
data
); );
} }
@@ -497,7 +506,7 @@ async function TwitchRaid(data) {
'', '',
username, username,
'', '',
twitchFollowAction, twitchRaidAction,
data data
); );
} }
@@ -1286,9 +1295,9 @@ async function UpdateAlertBox(platform, avatarURL, headerText, descriptionText,
theContentThatShowsFirstInsteadOfSecond.style.display = 'flex'; theContentThatShowsFirstInsteadOfSecond.style.display = 'flex';
alertBox.style.maxHeight = theContentThatShowsFirstInsteadOfSecond.offsetHeight + "px"; alertBox.style.maxHeight = theContentThatShowsFirstInsteadOfSecond.offsetHeight + "px";
alertBox.style.minHeight = theContentThatShowsFirstInsteadOfSecond.offsetHeight + "px"; alertBox.style.minHeight = theContentThatShowsFirstInsteadOfSecond.offsetHeight + "px";
alertBox.style.animation = 'slideInFromRight 0.5s ease-out forwards'; alertBox.style.animation = `${showAnimation} 0.5s ease-out forwards`;
// Run the Streamer.bot action if there is one // Run the Streamer.bot action if there is one
if (sbAction) { if (sbAction) {
console.debug('Running Streamer.bot action: ' + sbAction); console.debug('Running Streamer.bot action: ' + sbAction);
await client.doAction({name: sbAction}, sbData); await client.doAction({name: sbAction}, sbData);
@@ -1310,7 +1319,7 @@ async function UpdateAlertBox(platform, avatarURL, headerText, descriptionText,
theContentThatShowsLastInsteadOfFirst.style.opacity = 1; theContentThatShowsLastInsteadOfFirst.style.opacity = 1;
setTimeout(() => { setTimeout(() => {
alertBox.style.animation = 'slideOffRight 0.5s ease-out forwards'; alertBox.style.animation = `${hideAnimation} 0.5s ease-out forwards`;
setTimeout(() => { setTimeout(() => {
alertBox.style.maxHeight = '0px'; alertBox.style.maxHeight = '0px';
@@ -1325,7 +1334,7 @@ async function UpdateAlertBox(platform, avatarURL, headerText, descriptionText,
UpdateAlertBox(data.platform, data.avatarURL, data.headerText, data.descriptionText, data.attributeText, data.username, data.message, data.sbAction, data.sbData); UpdateAlertBox(data.platform, data.avatarURL, data.headerText, data.descriptionText, data.attributeText, data.username, data.message, data.sbAction, data.sbData);
} }
}, 1000); }, 1000);
}, message ? hideAfter * 1000 : 0); }, (message && showMesesages) ? hideAfter * 1000 : 0);
}, hideAfter * 1000); }, hideAfter * 1000);
} }
+22 -22
View File
@@ -82,23 +82,23 @@
"label": "Fade In" "label": "Fade In"
}, },
{ {
"value": "slide-from-top", "value": "slide-in-from-top",
"label": "Slide From Top" "label": "Slide Down From Top"
}, },
{ {
"value": "slide-from-bottom", "value": "slide-in-from-bottom",
"label": "Slide From Bottom" "label": "Slide Up From Bottom"
}, },
{ {
"value": "slide-from-left", "value": "slide-in-from-left",
"label": "Slide From Left" "label": "Slide In From Left"
}, },
{ {
"value": "slide-from-right", "value": "slide-in-from-right",
"label": "Slide From Right" "label": "Slide In From Right"
} }
], ],
"defaultValue": "fade-in", "defaultValue": "slide-in-from-bottom",
"group": "General" "group": "General"
}, },
{ {
@@ -112,23 +112,23 @@
"label": "Fade Out" "label": "Fade Out"
}, },
{ {
"value": "slide-top", "value": "slide-out-top",
"label": "Slide Top" "label": "Slide Up And Out"
}, },
{ {
"value": "slide-bottom", "value": "slide-out-bottom",
"label": "Slide Bottom" "label": "Slide Down And Out"
}, },
{ {
"value": "slide-left", "value": "slide-out-left",
"label": "Slide Left" "label": "Slide Out Left"
}, },
{ {
"value": "slide-right", "value": "slide-out-right",
"label": "Slide Right" "label": "Slide Out Right"
} }
], ],
"defaultValue": "fade-in", "defaultValue": "slide-out-bottom",
"group": "General" "group": "General"
}, },
{ {
@@ -137,13 +137,13 @@
"description": "", "description": "",
"type": "select", "type": "select",
"options": [ "options": [
{
"value": "align-to-bottom",
"label": "Align To Bottom"
},
{ {
"value": "align-to-top", "value": "align-to-top",
"label": "Align To Top" "label": "Align To Top"
},
{
"value": "align-to-bottom",
"label": "Align To Bottom"
} }
], ],
"defaultValue": "align-to-bottom", "defaultValue": "align-to-bottom",
+40 -10
View File
@@ -1,7 +1,7 @@
* { * {
margin: 0; margin: 0;
padding: 0; padding: 0;
--margin: 0.5em; --margin: 1em;
--border-radius: 1em; --border-radius: 1em;
/* font-size: 30px; */ /* font-size: 30px; */
/* --line-spacing: 1.7em; */ /* --line-spacing: 1.7em; */
@@ -44,7 +44,7 @@ html {
box-sizing: border-box; box-sizing: border-box;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: flex-end; /* justify-content: flex-end; */
} }
#alertBox { #alertBox {
@@ -174,7 +174,25 @@ html {
font-style: italic; font-style: italic;
} }
@keyframes slideInFromTop { @keyframes fade-in {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes fade-out {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}@keyframes slide-in-from-top {
0% { 0% {
transform: translateY(-100%); transform: translateY(-100%);
opacity: 0; opacity: 0;
@@ -186,7 +204,19 @@ html {
} }
} }
@keyframes slideOffUp { @keyframes slide-in-from-top {
0% {
transform: translateY(-100%);
opacity: 0;
}
100% {
transform: translateY(0);
opacity: 1;
}
}
@keyframes slide-out-top {
0% { 0% {
transform: translateY(0); transform: translateY(0);
opacity: 1; opacity: 1;
@@ -198,7 +228,7 @@ html {
} }
} }
@keyframes slideInFromBottom { @keyframes slide-in-from-bottom {
0% { 0% {
transform: translateY(100%); transform: translateY(100%);
opacity: 0; opacity: 0;
@@ -210,7 +240,7 @@ html {
} }
} }
@keyframes slideOffDown { @keyframes slide-out-bottom {
0% { 0% {
transform: translateY(0); transform: translateY(0);
opacity: 1; opacity: 1;
@@ -222,7 +252,7 @@ html {
} }
} }
@keyframes slideInFromLeft { @keyframes slide-in-from-left {
0% { 0% {
transform: translateX(-100%); transform: translateX(-100%);
opacity: 0; opacity: 0;
@@ -234,7 +264,7 @@ html {
} }
} }
@keyframes slideOffLeft { @keyframes slide-out-left {
0% { 0% {
transform: translateX(0); transform: translateX(0);
opacity: 1; opacity: 1;
@@ -246,7 +276,7 @@ html {
} }
} }
@keyframes slideInFromRight { @keyframes slide-in-from-right {
0% { 0% {
transform: translateX(100%); transform: translateX(100%);
opacity: 0; opacity: 0;
@@ -258,7 +288,7 @@ html {
} }
} }
@keyframes slideOffRight { @keyframes slide-out-right {
0% { 0% {
transform: translateX(0); transform: translateX(0);
opacity: 1; opacity: 1;