Added support for Fourthwall alerts

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}`;
+	}
+}
+
 
 
 ///////////////////////////////////

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;
 }
 
 /****************/

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 += `<span style="background: #0042ff; padding: 0px 0.5em">${user}</span> 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 += `<span style="background: #0042ff; padding: 0px 0.5em">${user}</span> 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