From f8c722a5101aefa2f033984fcc5118cf950b3ba1 Mon Sep 17 00:00:00 2001 From: nuttylmao Date: Sun, 30 Mar 2025 10:47:57 +1100 Subject: [PATCH] Added support for Fourthwall alerts --- horizontal-chat/script.js | 113 +++++++++++++++++++++++++++++++++++- horizontal-chat/style.css | 12 ++-- multichat-overlay/script.js | 16 ++--- 3 files changed, 124 insertions(+), 17 deletions(-) diff --git a/horizontal-chat/script.js b/horizontal-chat/script.js index 45670d2..7fbc483 100644 --- a/horizontal-chat/script.js +++ b/horizontal-chat/script.js @@ -243,9 +243,9 @@ client.on('Fourthwall.GiftDrawStarted', (response) => { FourthwallGiftDrawStarted(response.data); }) -client.on('Fourthwall.GiftDrawEnd', (response) => { +client.on('Fourthwall.GiftDrawEnded', (response) => { console.debug(response.data); - FourthwallGiftDrawEnd(response.data); + FourthwallGiftDrawEnded(response.data); }) @@ -836,36 +836,126 @@ function FourthwallOrderPlaced(data) { if (!showFourthwallAlerts) return; + let user = data.username; + const orderTotal = data.total; + const currency = data.currency; + const item = data.variants[0].name; + const itemsOrdered = data.variants.length; + + let message = ""; + + // If there user did not provide a username, just say "Someone" + if (user == undefined) + user = "Someone" + + // If the user ordered more than one item, write how many items they ordered + message += `${user} ordered ${item}`; + if (itemsOrdered > 1) + message += ` and ${itemsOrdered - 1} other item(s)!` + + // If the user spent money, put the order total + if (orderTotal == 0) + message += ``; + else if (currency == "USD") + message += ` ($${orderTotal})`; + else + message += ` (${orderTotal} ${currency})`; + + ShowAlert(message, 'fourthwall'); } function FourthwallDonation(data) { if (!showFourthwallAlerts) return; + let user = data.username; + const amount = data.amount; + const currency = data.currency; + + let message = ""; + if (currency == "USD") + message = `${user} donated $${amount}`; + else + message = `${user} donated ${currency} ${amount}`; + + ShowAlert(message, 'fourthwall'); } function FourthwallSubscriptionPurchased(data) { if (!showFourthwallAlerts) return; + let user = data.nickname; + const amount = data.amount; + const currency = data.currency; + + let message = ""; + if (currency == "USD") + message = `${user} subscribed $${amount}`; + else + message = `${user} donsubscribedated ${currency} ${amount}`; + + ShowAlert(message, 'fourthwall'); } function FourthwallGiftPurchase(data) { if (!showFourthwallAlerts) return; + let user = data.username; + const total = data.total; + const currency = data.currency; + const gifts = data.gifts.length; + const itemName = data.offer.name; + + let message = ""; + + // If the user ordered more than one item, write how many items they ordered + message += `${user} gifted`; + + // If there is more than one gifted item, display the number of gifts + if (gifts > 1) + message += ` ${gifts} x `; + + // The name of the item to be given away + message += ` ${itemName}`; + + // If the user spent money, put the order total + if (currency == "USD") + message += ` ($${total})`; + else + message += ` (${currency}${total})`; + + ShowAlert(message, 'fourthwall'); } function FourthwallGiftDrawStarted(data) { if (!showFourthwallAlerts) return; + const durationSeconds = data.durationSeconds; + const itemName = data.offer.name; + + let message = ""; + message += `${user} gifted`; + + // If the user ordered more than one item, write how many items they ordered + message += `🎁 ${itemName} Giveaway! • Type !join in the next ${durationSeconds} seconds for your chance to win!`; + + ShowAlert(message, 'fourthwall'); } -function FourthwallGiftDrawEnd(data) { +function FourthwallGiftDrawEnded(data) { if (!showFourthwallAlerts) return; + let message = `🥳 GIVEAWAY ENDED 🥳`; + + ShowAlert(message, 'fourthwall'); + + message = `Congratulations ${GetWinnersList(data.gifts)}!`; + + ShowAlert(message, 'fourthwall'); } @@ -1075,6 +1165,23 @@ function ShowAlert(message, background = null, duration = animationDuration) { }, duration); // Remove after 5 seconds } +function GetWinnersList(gifts) { + const winners = gifts.map(gift => gift.winner); + const numWinners = winners.length; + + if (numWinners === 0) { + return ""; + } else if (numWinners === 1) { + return winners[0]; + } else if (numWinners === 2) { + return `${winners[0]} and ${winners[1]}`; + } else { + const lastWinner = winners.pop(); + const secondLastWinner = winners.pop(); + return `${winners.join(", ")}, ${secondLastWinner} and ${lastWinner}`; + } +} + /////////////////////////////////// diff --git a/horizontal-chat/style.css b/horizontal-chat/style.css index ed7a0e6..e92d038 100644 --- a/horizontal-chat/style.css +++ b/horizontal-chat/style.css @@ -242,19 +242,23 @@ li { } .patreon { - background: linear-gradient(#c76633, #fd5e0a) !important; + background: linear-gradient(#c76633bf, #fd5e0abf) !important; } .kofi { - background: linear-gradient(#54c7ee, #08c2ff) !important; + background: linear-gradient(#54c7eebf, #08c2ffbf) !important; } .tipeeeStream { - background: linear-gradient(#120e23, #5d192a) !important; + background: linear-gradient(#120e23bf, #5d192abf) !important; } .fourthwall { - background: linear-gradient(#405eb3, #0d3cb9) !important; + background: linear-gradient(#466edbbf, #1c56f5bf) !important; +} + +.blank { + background: #adadad00 !important; } /****************/ diff --git a/multichat-overlay/script.js b/multichat-overlay/script.js index 484a09c..c8d3464 100644 --- a/multichat-overlay/script.js +++ b/multichat-overlay/script.js @@ -1191,7 +1191,7 @@ function KofiDonation(data) { if (currency == "USD") titleDiv.innerHTML = `${kofiIcon} ${user} donated $${amount}`; else - titleDiv.innerHTML = `${kofiIcon} ${user} donated ${currency}${amount}`; + titleDiv.innerHTML = `${kofiIcon} ${user} donated ${currency} ${amount}`; if (message != null) contentDiv.innerHTML = `${message}`; @@ -1452,13 +1452,13 @@ function FourthwallDonation(data) { let contents = ""; // If the user ordered more than one item, write how many items they ordered - contents += `${user} donated`; + contents += `${user} donated`; // If the user spent money, put the order total if (currency == "USD") contents += ` $${amount}`; else - contents += ` ${currency}${amount}`; + contents += ` ${currency} ${amount}`; titleDiv.innerHTML = contents; @@ -1500,13 +1500,13 @@ function FourthwallSubscriptionPurchased(data) { let contents = ""; // If the user ordered more than one item, write how many items they ordered - contents += `${user} subscribed`; + contents += `${user} subscribed`; // If the user spent money, put the order total if (currency == "USD") contents += ` ($${amount})`; else - contents += ` (${currency}${amount})`; + contents += ` (${currency} ${amount})`; titleDiv.innerHTML = contents; contentDiv.style.display = 'none' @@ -1605,7 +1605,7 @@ function FourthwallGiftDrawStarted(data) { contentDiv.classList.add('centerThatShitHomie'); // Set the text - let durationSeconds = data.durationSeconds; + const durationSeconds = data.durationSeconds; const itemName = data.offer.name; let contents = ""; @@ -1643,10 +1643,6 @@ function FourthwallGiftDrawEnded(data) { titleDiv.classList.add('centerThatShitHomie'); contentDiv.classList.add('centerThatShitHomie'); - // Set the text - let durationSeconds = data.durationSeconds; - const itemName = data.offer.name; - let contents = ""; // If the user ordered more than one item, write how many items they ordered