From 03f0d09cf9d6eb966ab3eab44a0f4d062395f3e9 Mon Sep 17 00:00:00 2001
From: nuttylmao <nuttylmao@gmail.com>
Date: Tue, 18 Nov 2025 00:32:43 +1100
Subject: [PATCH] Added support for Cheer alerts

---
 horizontal-chat/script.js                | 19 +++++++++-
 horizontal-chat/settings/settings.json   |  8 +++++
 multichat-overlay/script.js              | 46 +++++++++++++++++++++++-
 multichat-overlay/settings/settings.json |  8 +++++
 4 files changed, 79 insertions(+), 2 deletions(-)

diff --git a/horizontal-chat/script.js b/horizontal-chat/script.js
index 709a42b..93d4008 100644
--- a/horizontal-chat/script.js
+++ b/horizontal-chat/script.js
@@ -41,6 +41,7 @@ const ignoreChatters = urlParams.get("ignoreChatters") || "";
 const groupConsecutiveMessages = GetBooleanParam("groupConsecutiveMessages", true);
 
 const showTwitchMessages = GetBooleanParam("showTwitchMessages", true);
+const showTwitchCheers = GetBooleanParam("showTwitchCheers", false);
 const showTwitchAnnouncements = GetBooleanParam("showTwitchAnnouncements", true);
 const showTwitchFollows = GetBooleanParam("showTwitchFollows", false);
 const showTwitchSubs = GetBooleanParam("showTwitchSubs", true);
@@ -139,7 +140,7 @@ client.on('Twitch.ChatMessage', (response) => {
 
 client.on('Twitch.Cheer', (response) => {
 	console.debug(response.data);
-	TwitchChatMessage(response.data);
+	TwitchCheer(response.data);
 })
 
 client.on('Twitch.Announcement', (response) => {
@@ -621,6 +622,22 @@ async function TwitchChatMessage(data) {
 	AddMessageItem(instance, data.message.msgId, 'twitch', data.user.id);
 }
 
+async function TwitchCheer(data) {
+	TwitchChatMessage(data);
+	if (!showTwitchCheers)
+		return;
+	
+	// Set the text
+	let username = data.user.name;
+	if (data.user.name.toLowerCase() != data.user.login.toLowerCase())
+		username = `${data.user.name} (${data.user.login})`;
+	let bits = data.bits;
+	
+	const message = `${username} cheered ${bits} bits`;
+
+	ShowAlert(message, 'twitch');
+}
+
 async function TwitchAnnouncement(data) {
 	if (!showTwitchAnnouncements)
 		return;
diff --git a/horizontal-chat/settings/settings.json b/horizontal-chat/settings/settings.json
index b1eed16..7a21efc 100644
--- a/horizontal-chat/settings/settings.json
+++ b/horizontal-chat/settings/settings.json
@@ -135,6 +135,14 @@
 			"defaultValue": true,
 			"group": "Which Twitch messages do you want to see?"
 		},
+		{
+			"id": "showTwitchCheers",
+			"label": "Cheers",
+			"description": "",
+			"type": "checkbox",
+			"defaultValue": false,
+			"group": "Which Twitch messages do you want to see?"
+		},
 		{
 			"id": "showTwitchAnnouncements",
 			"label": "Announcements",
diff --git a/multichat-overlay/script.js b/multichat-overlay/script.js
index dc1a20d..f3cc5ee 100644
--- a/multichat-overlay/script.js
+++ b/multichat-overlay/script.js
@@ -46,6 +46,7 @@ const imageEmbedPermissionLevel = GetIntParam("imageEmbedPermissionLevel", 20);
 const showYouTubeLinkPreviews = GetBooleanParam("showYouTubeLinkPreviews", true);
 
 const showTwitchMessages = GetBooleanParam("showTwitchMessages", true);
+const showTwitchCheers = GetBooleanParam("showTwitchCheers", false);
 const showTwitchAnnouncements = GetBooleanParam("showTwitchAnnouncements", true);
 const showTwitchFollows = GetBooleanParam("showTwitchFollows", false);
 const showTwitchSubs = GetBooleanParam("showTwitchSubs", true);
@@ -158,7 +159,7 @@ client.on('Twitch.ChatMessage', (response) => {
 
 client.on('Twitch.Cheer', (response) => {
 	console.debug(response.data);
-	TwitchChatMessage(response.data);
+	TwitchCheer(response.data);
 })
 
 client.on('Twitch.AutomaticRewardRedemption', (response) => {
@@ -752,6 +753,49 @@ async function TwitchChatMessage(data) {
 	}
 }
 
+async function TwitchCheer(data) {
+	TwitchChatMessage(data);
+	if (!showTwitchCheers)
+		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("#contentDiv");
+
+	// Set the card background colors
+	cardDiv.classList.add('twitch');
+
+	if (showAvatar) {
+		// Render avatars
+		const username = data.user.login;
+		const avatarURL = await GetAvatar(username, 'twitch');
+		const avatar = new Image();
+		avatar.src = avatarURL;
+		avatar.classList.add("avatar");
+		avatarDiv.appendChild(avatar);
+	}
+
+	// Set the text
+	let username = data.user.name;
+	if (data.user.name.toLowerCase() != data.user.login.toLowerCase())
+		username = `${data.user.name} (${data.user.login})`;
+	let bits = data.bits;
+
+	titleDiv.innerText = `${username} cheered ${bits} bits`;
+
+	AddMessageItem(instance, data.messageId);
+}
+
 async function TwitchAutomaticRewardRedemption(data) {
 	// Get a reference to the template
 	const template = document.getElementById('messageTemplate');
diff --git a/multichat-overlay/settings/settings.json b/multichat-overlay/settings/settings.json
index 65ecd5a..47a812b 100644
--- a/multichat-overlay/settings/settings.json
+++ b/multichat-overlay/settings/settings.json
@@ -242,6 +242,14 @@
 			"defaultValue": true,
 			"group": "Which Twitch messages do you want to see?"
 		},
+		{
+			"id": "showTwitchCheers",
+			"label": "Cheers",
+			"description": "",
+			"type": "checkbox",
+			"defaultValue": false,
+			"group": "Which Twitch messages do you want to see?"
+		},
 		{
 			"id": "showTwitchAnnouncements",
 			"label": "Announcements",