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

Added the first basic slide in/slide out animations

Browse Source
This commit is contained in:
nuttylmao
2025-04-10 06:42:17 +10:00
parent 0fba080ecb
commit 6ae6575a0d
3 changed files with 189 additions and 103 deletions
Download Patch File Download Diff File Expand all files Collapse all files
multistream-alerts/index.html
+5
View File
@@ -11,6 +11,7 @@
<div id="statusContainer">Connecting...</div>
<div id="mainContainer" class="slide-fade">
<div id="alertBox" class="highlightMessage">
<div id="theContentThatShowsFirstInsteadOfSecond">
<img id="avatar" src="https://static-cdn.jtvnw.net/jtv_user_pictures/272e643e-4d43-415f-9ee1-18916e825411-profile_image-300x300.png" class="square">
<div id="contents">
<span id="username">hotarubi_TA</span>
@@ -20,6 +21,10 @@
<span id="attribute">to nutty</span>
</div>
</div>
<div id="message">
I drink cum I drink cum I drink cum I drink cum I drink cum I drink cum I drink cum I drink cum I drink cum I drink cum I drink cum I drink cum I drink cum I drink cum I drink cum I drink cum I drink cum I drink cum I drink cum I drink cum I drink cum I drink cum I drink cum I drink cum I drink cum I drink cum I drink cum I drink cum I drink cum I drink cum I drink cum I drink cum I drink cum I drink cum I drink cum
</div>
</div>
</div>
</div>
multistream-alerts/script.js
+120 -86
View File
@@ -14,6 +14,11 @@ const avatarElement = document.getElementById('avatar');
const usernameLabel = document.getElementById('username');
const descriptionLabel = document.getElementById('description');
const attributeLabel = document.getElementById('attribute');
const theContentThatShowsFirstInsteadOfSecond = document.getElementById('theContentThatShowsFirstInsteadOfSecond');
const messageLabel = document.getElementById('message');
let widgetLocked = false; // Needed to lock animation from overlapping
let alertQueue = [];
/////////////
// OPTIONS //
@@ -58,6 +63,8 @@ const showKofiDonations = GetBooleanParam("showKofiDonations", true);
const showTipeeeStreamDonations = GetBooleanParam("showTipeeeStreamDonations", true);
const showFourthwallAlerts = GetBooleanParam("showFourthwallAlerts", true);
const animationSpeed = GetIntParam("showTwitchSharedChat", 8000);
const furryMode = GetBooleanParam("furryMode", false);
// Set fonts for the widget
@@ -247,15 +254,12 @@ async function TwitchSub(data) {
const isPrime = data.is_prime;
// Render avatars
if (showAvatar) {
const avatarURL = await GetAvatar(username);
avatarElement.src = avatarURL;
}
if (!isPrime)
UpdateAlertBox('twitch', `${username}`, `subscribed with Tier ${subTier.charAt(0)}`);
UpdateAlertBox('twitch', avatarURL, `${username}`, `subscribed with Tier ${subTier.charAt(0)}`);
else
UpdateAlertBox('twitch', `${username}`, `used their Prime Sub`);
UpdateAlertBox('twitch', avatarURL, `${username}`, `used their Prime Sub`);
}
async function TwitchResub(data) {
@@ -270,14 +274,12 @@ async function TwitchResub(data) {
const message = data.text;
// Render avatars
if (showAvatar) {
const avatarURL = await GetAvatar(username);
avatarElement.src = avatarURL;
}
if (!isPrime)
UpdateAlertBox(
'twitch',
avatarURL,
`${username}`,
`resubscribed with Tier ${subTier.charAt(0)}`,
`${cumulativeMonths} months`,
@@ -286,13 +288,12 @@ async function TwitchResub(data) {
else
UpdateAlertBox(
'twitch',
avatarURL,
`${username}`,
`used their Prime Sub`,
`${cumulativeMonths} months`,
message
);
AddMessageItem(instance, data.messageId);
}
async function TwitchGiftSub(data) {
@@ -306,10 +307,7 @@ async function TwitchGiftSub(data) {
const cumlativeTotal = data.cumlativeTotal;
// Render avatars
if (showAvatar) {
const avatarURL = await GetAvatar(username);
avatarElement.src = avatarURL;
}
let messageText = '';
if (cumlativeTotal > 0)
@@ -317,6 +315,7 @@ async function TwitchGiftSub(data) {
UpdateAlertBox(
'twitch',
avatarURL,
`${username}`,
`gifted a Tier ${subTier.charAt(0)} subscription`,
`to ${recipient}`,
@@ -335,14 +334,11 @@ async function TwitchRewardRedemption(data) {
const channelPointIcon = `<img src="icons/badges/twitch-channel-point.png" class="platform" style="height: 1em"/>`;
// Render avatars
if (showAvatar) {
const username = data.user_login;
const avatarURL = await GetAvatar(username);
avatarElement.src = avatarURL;
}
const avatarURL = await GetAvatar(data.user_login);
UpdateAlertBox(
'twitch',
avatarURL,
`${username} redeemed`,
`${rewardName} ${channelPointIcon} ${cost}`,
'',
@@ -355,11 +351,7 @@ async function TwitchRaid(data) {
return;
// Render avatars
if (showAvatar) {
const username = data.from_broadcaster_user_login;
const avatarURL = await GetAvatar(username);
avatarElement.src = avatarURL;
}
const avatarURL = await GetAvatar(data.from_broadcaster_user_login);
// Set the text
const username = data.from_broadcaster_user_login;
@@ -367,6 +359,7 @@ async function TwitchRaid(data) {
UpdateAlertBox(
'twitch',
avatarURL,
`${username}`,
`is raiding with a party of ${viewers}`,
'',
@@ -379,12 +372,11 @@ function YouTubeSuperChat(data) {
return;
// Render avatars
if (showAvatar) {
avatar.src = data.user.profileImageUrl;
}
const avatarURL = data.user.profileImageUrl;
UpdateAlertBox(
'youtube',
avatarURL,
`🪙 ${data.user.name}`,
`sent a Super Chat (${data.amount})`,
'',
@@ -397,12 +389,11 @@ function YouTubeSuperSticker(data) {
return;
// Render avatars
if (showAvatar) {
avatar.src = FindFirstImageUrl(data);
}
const avatarURL = FindFirstImageUrl(data);
UpdateAlertBox(
'youtube',
avatarURL,
`${data.user.name}`,
`sent a Super Sticker (${data.amount})`,
'',
@@ -415,12 +406,11 @@ function YouTubeNewSponsor(data) {
return;
// Render avatars
if (showAvatar) {
avatar.src = data.user.profileImageUrl;
}
const avatarURL = data.user.profileImageUrl;
UpdateAlertBox(
'youtube',
avatarURL,
`⭐ New ${data.levelName}`,
`Welcome ${data.user.name}!`,
'',
@@ -433,12 +423,11 @@ function YouTubeGiftMembershipReceived(data) {
return;
// Render avatars
if (showAvatar) {
avatar.src = data.user.profileImageUrl;
}
const avatarURL = data.user.profileImageUrl;
UpdateAlertBox(
'youtube',
avatarURL,
`${data.gifter.name}`,
`gifted a membership`,
`to ${data.user.name} (${data.tier})!`,
@@ -456,13 +445,9 @@ async function StreamlabsDonation(data) {
const currency = data.currency;
const message = data.message;
// Render avatars
if (showAvatar) {
avatar.src = '';
}
UpdateAlertBox(
'streamlabs',
'',
`${donater}`,
`donated ${currency}${formattedAmount}`,
``,
@@ -480,13 +465,9 @@ async function StreamElementsTip(data) {
const currency = data.currency;
const message = data.message;
// Render avatars
if (showAvatar) {
avatar.src = '';
}
UpdateAlertBox(
'streamelements',
''
`${donater}`,
`donated ${currency}${formattedAmount}`,
``,
@@ -494,6 +475,27 @@ async function StreamElementsTip(data) {
);
}
function PatreonPledgeCreated(data) {
if (!showPatreonMemberships)
return;
const user = data.attributes.full_name;
const amount = (data.attributes.will_pay_amount_cents/100).toFixed(2);
const patreonIcon = `<img src="icons/platforms/patreon.png" class="platform"/>`;
// Render avatars
const avatarURL = 'icons/platforms/patreon.png';
UpdateAlertBox(
'patreon',
avatarURL,
`${user}`,
`joined Patreon ($${amount})`,
``,
``
);
}
function KofiDonation(data) {
if (!showKofiDonations)
return;
@@ -505,13 +507,12 @@ function KofiDonation(data) {
const message = data.message;
// Render avatars
if (showAvatar) {
avatar.src = "icons/platforms/kofi.png";
}
const avatarURL = 'icons/platforms/kofi.png';
if (currency == "USD")
UpdateAlertBox(
'kofi',
avatarURL,
`${user}`,
`donated $${amount}`,
``,
@@ -538,13 +539,12 @@ function KofiSubscription(data) {
const message = data.message;
// Render avatars
if (showAvatar) {
avatar.src = "icons/platforms/kofi.png";
}
const avatarURL = 'icons/platforms/kofi.png';
if (currency == "USD")
UpdateAlertBox(
'kofi',
avatarURL,
`${user}`,
`subscribed ($${amount})`,
``,
@@ -570,12 +570,11 @@ function KofiResubscription(data) {
const message = data.message;
// Render avatars
if (showAvatar) {
avatar.src = "icons/platforms/kofi.png";
}
const avatarURL = 'icons/platforms/kofi.png';
UpdateAlertBox(
'kofi',
avatarURL,
`${user}`,
`subscribed (${tier})`,
``,
@@ -603,12 +602,11 @@ function KofiShopOrder(data) {
formattedAmount = `${currency} ${amount}`;
// Render avatars
if (showAvatar) {
avatar.src = "icons/platforms/kofi.png";
}
const avatarURL = 'icons/platforms/kofi.png';
UpdateAlertBox(
'kofi',
avatarURL,
`${user}`,
`ordered ${itemTotal} item(s) on Ko-fi `,
`${formattedAmount}`,
@@ -627,13 +625,12 @@ function TipeeeStreamDonation(data) {
const message = data.message;
// Render avatars
if (showAvatar) {
avatar.src = "icons/platforms/tipeeeStream.png";
}
const avatarURL = 'icons/platforms/tipeeeStream.png';
if (currency == "USD")
UpdateAlertBox(
'tipeeeStream',
avatarURL,
`${user}`,
`donated $${amount}`,
``,
@@ -642,6 +639,7 @@ function TipeeeStreamDonation(data) {
else
UpdateAlertBox(
'tipeeeStream',
avatarURL,
`${user}`,
`donated ${currency} ${amount}`,
``,
@@ -666,11 +664,6 @@ function FourthwallOrderPlaced(data) {
if (user == undefined)
user = "Someone";
// Render avatars
if (showAvatar) {
avatar.src = itemImageUrl;
}
let attributeText = ""
// If the user ordered more than one item, write how many items they ordered
@@ -687,6 +680,7 @@ function FourthwallOrderPlaced(data) {
UpdateAlertBox(
'fourthwall',
itemImageUrl,
`${user}`,
`ordered ${item}`,
attributeText,
@@ -712,13 +706,9 @@ function FourthwallDonation(data) {
else
formattedAmount += ` ${currency} ${amount}`;
// Render avatars
if (showAvatar) {
avatar.src = '';
}
UpdateAlertBox(
'fourthwall',
'',
`${user}`,
`donated ${formattedAmount}`,
'',
@@ -743,13 +733,9 @@ function FourthwallSubscriptionPurchased(data) {
else
formattedAmount += ` (${currency} ${amount})`;
// Render avatars
if (showAvatar) {
avatar.src = '';
}
UpdateAlertBox(
'fourthwall',
'',
`${user}`,
`subscribed ${formattedAmount}`,
'',
@@ -787,13 +773,9 @@ function FourthwallGiftPurchase(data) {
else
attributesText = `${currency}${total}`;
// Render avatars
if (showAvatar) {
avatar.src = itemImageUrl;
}
UpdateAlertBox(
'fourthwall',
itemImageUrl,
`${user}`,
`gifted ${contents}`,
attributesText,
@@ -809,13 +791,9 @@ function FourthwallGiftDrawStarted(data) {
const durationSeconds = data.durationSeconds;
const itemName = data.offer.name;
// Render avatars
if (showAvatar) {
avatar.src = '';
}
UpdateAlertBox(
'fourthwall',
'',
`<span style="font-size: 1.2em">🎁 ${itemName} Giveaway!</span>`,
`Type !join in the next ${durationSeconds} seconds for your chance to win!`,
'',
@@ -1118,14 +1096,70 @@ function GetWinnersList(gifts) {
// return furryWords.join('');
// }
function UpdateAlertBox(platform, usernameText, descriptionText, attributeText, message) {
function UpdateAlertBox(platform, avatarURL, usernameText, descriptionText, attributeText, message) {
// Check if the widget is in the middle of an animation
// If any alerts are requested while the animation is playing, it should be added to the alert queue
if (widgetLocked) {
console.debug("Animation is progress, added alert to queue");
let data = { platform: platform, avatarURL: avatarURL, usernameText: usernameText, descriptionText: descriptionText, attributeText: attributeText, message: message };
alertQueue.push(data);
return;
}
// Start the animation
widgetLocked = true;
// Set the card background colors
alertBox.classList = '';
alertBox.classList.add(platform);
// Render avatars
if (showAvatar) {
avatarElement.src = avatarURL;
}
// Set labels
usernameLabel.innerHTML = usernameText != null ? usernameText : '';
descriptionLabel.innerHTML = descriptionText != null ? descriptionText : '';
attributeLabel.innerHTML = attributeText != null ? attributeText : '';
messageLabel.innerHTML = message != null ? `${message}` : '';
messageLabel.style.opacity = 0;
alertBox.style.height = theContentThatShowsFirstInsteadOfSecond.offsetHeight + 40 + "px";
alertBox.style.animation = 'slideInFromTop 0.5s ease-out forwards';
// (1) Set timeout (5 seconds)
// (2) Set the message label
// (3) Calculate the height of message label
// (4) Set the height of alertBox
// (a) Add in the CSS animation when this is working
setTimeout(() => {
alertBox.style.transition = 'all 0.5s ease-in-out';
alertBox.style.height = messageLabel.offsetHeight + 40 + "px";
theContentThatShowsFirstInsteadOfSecond.style.opacity = 0;
messageLabel.style.opacity = 1;
setTimeout(() => {
alertBox.style.animation = 'slideBackUp 0.5s ease-out forwards';
setTimeout(() => {
alertBox.style.transition = '';
theContentThatShowsFirstInsteadOfSecond.style.opacity = 1;
messageLabel.style.opacity = 0;
alertBox.style.height = '0px';
widgetLocked = false;
if (alertQueue.length > 0) {
console.debug("Pulling next alert from the queue");
let data = alertQueue.shift();
UpdateAlertBox(data.platform, data.avatarURL, data.usernameText, data.descriptionText, data.attributeText, data.message)
}
}, 1000);
}, messageLabel.innerText.trim() != '' ? animationSpeed : 0);
}, animationSpeed);
}
multistream-alerts/style.css
+52 -5
View File
@@ -1,7 +1,7 @@
* {
margin: 0;
padding: 0;
--margin: 40px;
--margin: 20px;
/* --border-radius: 20px; */
font-size: 30px;
/* --line-spacing: 1.7em; */
@@ -40,19 +40,22 @@ html {
display: block;
position: absolute;
width: 100%;
padding: var(--margin);
padding: calc(2 * var(--margin));
box-sizing: border-box;
}
#alertBox {
display: flex;
padding: 0.5em;
/* padding: 0.5em; */
border-radius: 0.75em;
filter: drop-shadow(15px 15px 7px rgba(0, 0, 0, 1));
position: relative;
align-items: center;
overflow: hidden;
box-sizing: border-box;
/* text-align: center; */
position: relative;
/* transition: all 1s ease-in-out; */
min-height: 0px;
height: 0px;
}
/* #alertBox::before {
@@ -71,6 +74,16 @@ html {
z-index: -1;
} */
#theContentThatShowsFirstInsteadOfSecond {
display: flex;
align-items: center;
z-index: 1;
position: absolute;
left: var(--margin);
top: var(--margin);
transition: inherit;
}
#avatar {
display: inline;
max-width: 100%;
@@ -107,6 +120,40 @@ html {
border-radius: 0.5em;
}
#message {
position: absolute;
width: calc(100% - 2 * var(--margin));
z-index: 0;
left: var(--margin);
top: var(--margin);
transition: inherit;
font-style: italic;
}
@keyframes slideInFromTop {
0% {
transform: translateY(-100%);
opacity: 0;
}
100% {
transform: translateY(0);
opacity: 1;
}
}
@keyframes slideBackUp {
0% {
transform: translateY(0);
opacity: 1;
}
100% {
transform: translateY(-100%);
opacity: 0;
}
}
/*****************/
/** CARD COLORS **/
/*****************/