Added Fourthwall support for Order Placed

horizontal-chat/script.js

@@ -218,11 +218,6 @@ client.on('TipeeeStream.Donation', (response) => {
 	TipeeeStreamDonation(response.data);
 })
 
-client.on('Fourthwall.GiftPurchase', (response) => {
-	console.debug(response.data);
-	FourthwallGiftPurchase(response.data);
-})
-
 client.on('Fourthwall.OrderPlaced', (response) => {
 	console.debug(response.data);
 	FourthwallOrderPlaced(response.data);
@@ -238,6 +233,11 @@ client.on('Fourthwall.SubscriptionPurchased', (response) => {
 	FourthwallSubscriptionPurchased(response.data);
 })
 
+client.on('Fourthwall.GiftPurchase', (response) => {
+	console.debug(response.data);
+	FourthwallGiftPurchase(response.data);
+})
+
 client.on('Fourthwall.GiftDrawStarted', (response) => {
 	console.debug(response.data);
 	FourthwallGiftDrawStarted(response.data);
@@ -832,12 +832,6 @@ function TipeeeStreamDonation(data) {
 	ShowAlert(message, 'tipeeeStream');
 }
 
-function FourthwallGiftPurchase(data) {
-	if (!showFourthwallAlerts)
-		return;
-
-}
-
 function FourthwallOrderPlaced(data) {
 	if (!showFourthwallAlerts)
 		return;
@@ -856,6 +850,12 @@ function FourthwallSubscriptionPurchased(data) {
 
 }
 
+function FourthwallGiftPurchase(data) {
+	if (!showFourthwallAlerts)
+		return;
+
+}
+
 function FourthwallGiftDrawStarted(data) {
 	if (!showFourthwallAlerts)
 		return;

multichat-overlay/script.js

@@ -232,11 +232,6 @@ client.on('TipeeeStream.Donation', (response) => {
 	TipeeeStreamDonation(response.data);
 })
 
-client.on('Fourthwall.GiftPurchase', (response) => {
-	console.debug(response.data);
-	FourthwallGiftPurchase(response.data);
-})
-
 client.on('Fourthwall.OrderPlaced', (response) => {
 	console.debug(response.data);
 	FourthwallOrderPlaced(response.data);
@@ -252,6 +247,11 @@ client.on('Fourthwall.SubscriptionPurchased', (response) => {
 	FourthwallSubscriptionPurchased(response.data);
 })
 
+client.on('Fourthwall.GiftPurchase', (response) => {
+	console.debug(response.data);
+	FourthwallGiftPurchase(response.data);
+})
+
 client.on('Fourthwall.GiftDrawStarted', (response) => {
 	console.debug(response.data);
 	FourthwallGiftDrawStarted(response.data);
@@ -1356,16 +1356,70 @@ function TipeeeStreamDonation(data) {
 	AddMessageItem(instance, data.id);
 }
 
-function FourthwallGiftPurchase(data) {
-	if (!showFourthwallAlerts)
-		return;
-
-}
-
 function FourthwallOrderPlaced(data) {
 	if (!showFourthwallAlerts)
 		return;
 
+	// Get a reference to the template
+	const template = document.getElementById('cardTemplate');
+
+	// Create a new instance of the template
+	const instance = template.content.cloneNode(true);
+
+	// Get divs
+	const cardDiv = instance.querySelector("#card");
+	const headerDiv = instance.querySelector("#header");
+	const avatarDiv = instance.querySelector("#avatar");
+	const iconDiv = instance.querySelector("#icon");
+	const titleDiv = instance.querySelector("#title");
+	const contentDiv = instance.querySelector("#content");
+
+	// Set the card background colors
+	cardDiv.classList.add('fourthwall');
+	titleDiv.classList.add('centerThatShitHomie');
+	contentDiv.classList.add('centerThatShitHomie');
+
+	// Set the text
+	let user = data.username;
+	const orderTotal = data.total;
+	const currency = data.currency;
+	const item = data.variants[0].name;
+	const itemsOrdered = data.variants.length;
+	const message = DecodeHTMLString(data.statmessageus);
+	const itemImageUrl = data.variants[0].image;
+	const fourthwallProductImage = `<img src="${itemImageUrl}" class="productImage"/>`;
+	
+	let contents = "";
+
+	contents += fourthwallProductImage;
+
+	contents += "<br><br>"
+
+	// 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
+	contents += `${user} ordered ${item}`;
+	if (itemsOrdered > 1)
+		contents += ` and ${itemsOrdered - 1} other item(s)!`
+
+	// If the user spent money, put the order total
+	if (orderTotal == 0)
+		contents += ``;
+	else if (currency == "USD")
+		contents = ` ($${orderTotal})`;
+	else
+		contents = ` (${orderTotal} ${currency})`;
+
+		console.log(contents);
+
+	titleDiv.innerHTML = contents;
+
+	if (message != null)
+		contentDiv.innerHTML = `${message}`;
+
+	AddMessageItem(instance, data.id);
 }
 
 function FourthwallDonation(data) {
@@ -1380,6 +1434,13 @@ function FourthwallSubscriptionPurchased(data) {
 
 }
 
+function FourthwallGiftPurchase(data) {
+	console.log(data);
+	if (!showFourthwallAlerts)
+		return;
+
+}
+
 function FourthwallGiftDrawStarted(data) {
 	if (!showFourthwallAlerts)
 		return;
@@ -1538,6 +1599,12 @@ function AddMessageItem(element, elementID, platform, userId) {
 	}, 100);
 }
 
+function DecodeHTMLString(html) {
+    var txt = document.createElement("textarea");
+    txt.innerHTML = html;
+    return txt.value;
+}
+
 // I used Gemini for this shit so if it doesn't work, blame Google
 function FindFirstImageUrl(jsonObject) {
 	if (typeof jsonObject !== 'object' || jsonObject === null) {

multichat-overlay/style.css

@@ -125,6 +125,18 @@ li {
 	transform: translate(0px, 0.25em);
 }
 
+.productImage {
+	height: 10em;
+	border-radius: 0.25em;
+	transform: translate(0px, 0.25em);
+}
+
+.centerThatShitHomie {
+	display: inline-block;
+	width: 100%;
+	text-align: center;
+}
+
 #badgeList {
 	margin: 0px 5px;
 }
@@ -221,6 +233,7 @@ li {
 
 .fourthwall {
 	background: linear-gradient(#405eb3, #0d3cb9) !important;
+	/* background: linear-gradient(#241b75, #080442) !important; */
 }
 
 /****************/