mirror of
https://github.com/nuttylmao/nutty.gg.git
synced 2026-09-18 19:50:58 -04:00
Implemented more settings
This commit is contained in:
@@ -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');
|
||||||
|
|||||||
@@ -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);
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -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",
|
||||||
|
|||||||
@@ -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;
|
||||||
|
|||||||
Reference in New Issue
Block a user