Merge pull request #15 from nuttylmao/beta

Beta
2026-09-18 19:50:58 -04:00 · 2025-09-30 12:24:30 +10:00
parent 9906f6d265 243a93fb23
commit 8922d83375
49 changed files with 772 additions and 717 deletions
@@ -12,7 +12,7 @@
 <body>
    <!-- Header -->
    <div id="header">
-        <img src="../../.resources/logo.png" style="height: 40px;" />
+        <img src="../../resources/logo.png" style="height: 40px;" />
        <button id="membershipsButton" onclick="OpenMembershipPage()">Check out my member exclusive widgets!</button>
        <div id="widgetUrlInputWrapper">
            <span id="urlLabel">Click to copy URL</span>
@@ -64,4 +64,5 @@

 </html>

+<script src="../../../.common/utils/helpers.js"></script>
 <script src="script.js"></script>
@@ -460,45 +460,6 @@ function OpenLoadSettingsPopup() {
 // HELPER FUNCTIONS //
 //////////////////////

-function GetBooleanParam(paramName, defaultValue) {
-	const urlParams = new URLSearchParams(window.location.search);
-	const paramValue = urlParams.get(paramName);
-
-	if (paramValue === null) {
-		return defaultValue; // Parameter not found
-	}
-
-	const lowercaseValue = paramValue.toLowerCase(); // Handle case-insensitivity
-
-	if (lowercaseValue === 'true') {
-		return true;
-	} else if (lowercaseValue === 'false') {
-		return false;
-	} else {
-		return paramValue; // Return original string if not 'true' or 'false'
-	}
-}
-
-function GetIntParam(paramName, defaultValue) {
-	const urlParams = new URLSearchParams(window.location.search);
-	const paramValue = urlParams.get(paramName);
-
-	if (paramValue === null) {
-		return defaultValue; // or undefined, or a default value, depending on your needs
-	}
-
-	console.log(paramValue);
-
-	const intValue = parseInt(paramValue, 10); // Parse as base 10 integer
-
-	if (isNaN(intValue)) {
-		return null; // or handle the error in another way, e.g., throw an error
-	}
-
-	return intValue;
-}
-
-
 // Handle first window interaction
 window.addEventListener('message', (event) => {
 	if (event.origin === new URL(widgetPreview.src).origin && event.data === 'iframe-interacted') {
@@ -0,0 +1,242 @@
+//////////////////////
+// GLOBAL VARIABLES //
+//////////////////////
+
+const avatarMap = new Map();
+const pronounMap = new Map();
+
+
+
+//////////////////////
+// HELPER FUNCTIONS //
+//////////////////////
+
+function GetBooleanParam(paramName, defaultValue) {
+	const urlParams = new URLSearchParams(window.location.search);
+	const paramValue = urlParams.get(paramName);
+
+	if (paramValue === null) {
+		return defaultValue; // Parameter not found
+	}
+
+	const lowercaseValue = paramValue.toLowerCase(); // Handle case-insensitivity
+
+	if (lowercaseValue === 'true') {
+		return true;
+	} else if (lowercaseValue === 'false') {
+		return false;
+	} else {
+		return paramValue; // Return original string if not 'true' or 'false'
+	}
+}
+
+function GetIntParam(paramName, defaultValue) {
+	const urlParams = new URLSearchParams(window.location.search);
+	const paramValue = urlParams.get(paramName);
+
+	if (paramValue === null) {
+		return defaultValue; // or undefined, or a default value, depending on your needs
+	}
+
+	const intValue = parseInt(paramValue, 10); // Parse as base 10 integer
+
+	if (isNaN(intValue)) {
+		return null; // or handle the error in another way, e.g., throw an error
+	}
+
+	return intValue;
+}
+
+async function GetKickIds(username) {
+    // First attempt with the original username
+    let url = `https://kick.com/api/v2/channels/${username}`;
+
+    try {
+        let response = await fetch(url);
+        if (!response.ok) {
+            // Retry with underscores replaced by dashes
+            const altUsername = username.replace(/_/g, "-");
+            url = `https://kick.com/api/v2/channels/${altUsername}`;
+            response = await fetch(url);
+            if (!response.ok) {
+                throw new Error(`HTTP error ${response.status}`);
+            }
+        }
+
+        const data = await response.json();
+        if (data.chatroom && data.chatroom.id) {
+            return { chatroomId: data.chatroom.id, channelId: data.chatroom.channel_id };
+        } else {
+            throw new Error("Chatroom ID not found in response.");
+        }
+    } catch (error) {
+        console.error("Failed to fetch chatroom ID:", error.message);
+        return null;
+    }
+}
+
+async function GetKickSubBadges(username) {
+    let url = `https://kick.com/api/v2/channels/${username}`;
+
+    try {
+        let response = await fetch(url);
+        if (!response.ok) {
+            // Retry with underscores replaced by dashes
+            const altUsername = username.replace(/_/g, "-");
+            url = `https://kick.com/api/v2/channels/${altUsername}`;
+            response = await fetch(url);
+            if (!response.ok) {
+                throw new Error(`HTTP error ${response.status}`);
+            }
+        }
+
+        const data = await response.json();
+        return data.subscriber_badges || [];
+    } catch (error) {
+        console.error("Failed to fetch subscriber badges:", error.message);
+        return [];
+    }
+}
+
+async function GetAvatar(username, platform) {
+    // First, check if the username is hashed already
+    if (avatarMap.has(`${username}-${platform}`)) {
+        console.debug(`Avatar found for ${username} (${platform}). Retrieving from hash map.`);
+        return avatarMap.get(`${username}-${platform}`);
+    }
+
+    // If code reaches this point, the username hasn't been hashed, so retrieve avatar
+    switch (platform) {
+        case 'twitch': {
+            console.debug(`No avatar found for ${username} (${platform}). Retrieving from Decapi.`);
+            let response = await fetch('https://decapi.me/twitch/avatar/' + username);
+            let data = await response.text();
+            avatarMap.set(`${username}-${platform}`, data);
+            return data;
+        }
+        case 'kick': {
+            console.debug(`No avatar found for ${username} (${platform}). Retrieving from Kick.`);
+
+            let url = `https://kick.com/api/v2/channels/${username}`;
+            try {
+                let response = await fetch(url);
+                if (!response.ok) {
+                    // Retry with underscores replaced by dashes
+                    const altUsername = username.replace(/_/g, "-");
+                    url = `https://kick.com/api/v2/channels/${altUsername}`;
+                    response = await fetch(url);
+                    if (!response.ok) {
+                        throw new Error(`HTTP error ${response.status}`);
+                    }
+                }
+
+                let data = await response.json();
+                let avatarURL = data.user?.profile_pic || 'https://kick.com/img/default-profile-pictures/default2.jpeg';
+                avatarMap.set(`${username}-${platform}`, avatarURL);
+                return avatarURL;
+            } catch (error) {
+                console.error("Failed to fetch avatar:", error.message);
+                return 'https://kick.com/img/default-profile-pictures/default2.jpeg';
+            }
+        }
+    }
+}
+
+async function GetPronouns(platform, username) {
+	if (pronounMap.has(username)) {
+		console.debug(`Pronouns found for ${username}. Retrieving from hash map.`)
+		return pronounMap.get(username);
+	}
+	else {
+		console.debug(`No pronouns found for ${username}. Retrieving from alejo.io.`)
+		const response = await client.getUserPronouns(platform, username);
+		const userFound = response.pronoun.userFound;
+		const pronouns = userFound ? `${response.pronoun.pronounSubject}/${response.pronoun.pronounObject}` : '';
+
+		pronounMap.set(username, pronouns);
+
+		return pronouns;
+	}
+}
+
+function GetCurrentTimeFormatted() {
+	const now = new Date();
+	let hours = now.getHours();
+	const minutes = String(now.getMinutes()).padStart(2, '0');
+	const ampm = hours >= 12 ? 'PM' : 'AM';
+
+	hours = hours % 12;
+	hours = hours ? hours : 12; // the hour '0' should be '12'
+
+	const formattedTime = `${hours}:${minutes} ${ampm}`;
+	return formattedTime;
+}
+
+function DecodeHTMLString(html) {
+	var txt = document.createElement("textarea");
+	txt.innerHTML = html;
+	return txt.value;
+}
+
+function TranslateToFurry(sentence) {
+	const words = sentence.toLowerCase().split(/\b/);
+
+	const furryWords = words.map(word => {
+		if (/\w+/.test(word)) {
+			let newWord = word;
+
+			// Common substitutions
+			newWord = newWord.replace(/l/g, 'w');
+			newWord = newWord.replace(/r/g, 'w');
+			newWord = newWord.replace(/th/g, 'f');
+			newWord = newWord.replace(/you/g, 'yous');
+			newWord = newWord.replace(/my/g, 'mah');
+			newWord = newWord.replace(/me/g, 'meh');
+			newWord = newWord.replace(/am/g, 'am');
+			newWord = newWord.replace(/is/g, 'is');
+			newWord = newWord.replace(/are/g, 'are');
+			newWord = newWord.replace(/very/g, 'vewy');
+			newWord = newWord.replace(/pretty/g, 'pwetty');
+			newWord = newWord.replace(/little/g, 'wittle');
+			newWord = newWord.replace(/nice/g, 'nyce');
+
+			// Random additions
+			if (Math.random() < 0.15) {
+				newWord += ' nya~';
+			} else if (Math.random() < 0.1) {
+				newWord += ' >w<';
+			} else if (Math.random() < 0.05) {
+				newWord += ' owo';
+			}
+
+			return newWord;
+		}
+		return word;
+	});
+
+	return furryWords.join('');
+}
+
+function EscapeRegExp(string) {
+	return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'); // $& means the whole matched string
+}
+
+// Given a string, return a random hex code. The same input always results in the same output
+function StringToHex(str) {
+    // Simple hash function to convert string to a number
+    let hash = 0;
+    for (let i = 0; i < str.length; i++) {
+        hash = str.charCodeAt(i) + ((hash << 5) - hash);
+        hash |= 0; // Convert to 32bit integer
+    }
+
+    // Convert hash to a hex color
+    let color = '#';
+    for (let i = 0; i < 3; i++) {
+        // Extract each byte and convert to 2-digit hex
+        const value = (hash >> (i * 8)) & 0xFF;
+        color += value.toString(16).padStart(2, '0');
+    }
+
+    return color;
+}
@@ -2,7 +2,7 @@
 <head>
    <meta charset="UTF-8">
 	<link rel="stylesheet" href="../.common/styles/global.css" />
-    <link rel="icon" href="../../.resources/logo.png" type="image/png">
+    <link rel="icon" href="../../.common/resources/logo.png" type="image/png">
    <title>nutty</title>
    <style>
        #dock-wrapper {
@@ -4,7 +4,7 @@
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="icon" href="../../.resources/logo.png" type="image/png">
+    <link rel="icon" href="../../.common/resources/logo.png" type="image/png">
    <title>nutty</title>
    <style>
        body {
@@ -1,6 +1,6 @@
 const widgetContainer = document.getElementById('widgetContainer');

-const settingsPageURL = '../../.utilities/settings-page-builder';
+const settingsPageURL = '../../.common/core/settings-core';

 const currentURL = window.location.href;

@@ -38,4 +38,5 @@
 	</template>
 </body>

+<script src="../.common/utils/helpers.js"></script>
 <script src="./script.js"></script>
@@ -8,8 +8,6 @@ const urlParams = new URLSearchParams(queryString);
 const sbServerAddress = urlParams.get("address") || "127.0.0.1";
 const sbServerPort = urlParams.get("port") || "8080";
 const minimumRole = 2;							// 1 - Viewer, 2 - VIP, 3 - Moderator, 4 - Broadcaster
-const avatarMap = new Map();
-const pronounMap = new Map();
 const animationDuration = 8000;
 let widgetLocked = false;						// Needed to lock animation from overlapping
 let alertQueue = [];
@@ -21,8 +19,6 @@ let alertQueue = [];
 const kickPusherWsUrl = 'wss://ws-us2.pusher.com/app/32cbd69e4b950bf97679?protocol=7&client=js&version=7.6.0&flash=false';
 let kickSubBadges = [];

-
-
 /////////////
 // OPTIONS //
 /////////////
@@ -52,12 +48,13 @@ const showTwitchChannelPointRedemptions = GetBooleanParam("showTwitchChannelPoin
 const showTwitchRaids = GetBooleanParam("showTwitchRaids", true);
 const showTwitchSharedChat = GetBooleanParam("showTwitchSharedChat", true);

-let kickUsername = urlParams.get("kickUsername") || "";
+const kickUsername = urlParams.get("kickUsername") || "";
 const showKickMessages = GetBooleanParam("showKickMessages", true);
 // const showKickFollows = GetBooleanParam("showKickFollows", false);
 const showKickSubs = GetBooleanParam("showKickSubs", true);
 const showKickChannelPointRedemptions = GetBooleanParam("showKickChannelPointRedemptions", true);
 const showKickHosts = GetBooleanParam("showKickHosts", true);
+const showKickGifts = GetBooleanParam("showKickGifts", true);

 const showYouTubeMessages = GetBooleanParam("showYouTubeMessages", true);
 const showYouTubeSuperChats = GetBooleanParam("showYouTubeSuperChats", true);
@@ -79,10 +76,20 @@ const showFourthwallAlerts = GetBooleanParam("showFourthwallAlerts", true);

 const furryMode = GetBooleanParam("furryMode", false);

-const animationSpeed = GetIntParam("animationSpeed", 0.5);
+////////////////////
+// HIDDEN OPTIONS //
+////////////////////

-// Kick is stupid and turns underscores into dashes which fuck everything up, therefore do a find/replace to make it work good
-kickUsername = kickUsername.replace(/_/g, "-");
+const animationSpeed = GetIntParam("animationSpeed", 0.5);
+const randomYouTubeColors = GetBooleanParam("randomYouTubeColors", false);
+const youtubeColor = urlParams.get("youtubeColor") || "#f70000";
+const youtubeCustomSubIcon = urlParams.get("youtubeCustomSubIcon") || "";
+
+
+
+////////////////
+// PAGE SETUP //
+////////////////

 // Set fonts for the widget
 document.body.style.fontFamily = font;
@@ -301,7 +308,9 @@ async function KickConnect() {
 		return;

 	// Channel to subscribe to (you'll need the correct channel name here)
-	const chatroomId = await GetKickChatroomId(kickUsername);
+    const kickIds = await GetKickIds(kickUsername);
+    const chatroomId = kickIds.chatroomId;
+    const channelId = kickIds.channelId;

 	// Cache subscriber badges
 	kickSubBadges = await GetKickSubBadges(kickUsername);
@@ -334,6 +343,7 @@ async function KickConnect() {
                websocket.send(JSON.stringify({ event: 'pusher:subscribe', data: { channel: `chatrooms.${chatroomId}` } }));
                websocket.send(JSON.stringify({ event: 'pusher:subscribe', data: { channel: `chatrooms.${chatroomId}.v2` } }));
                websocket.send(JSON.stringify({ event: 'pusher:subscribe', data: { channel: `predictions-channel-${chatroomId}` } }));
+                websocket.send(JSON.stringify({ event: 'pusher:subscribe', data: { channel: `channel_${channelId}` } }));
 				console.log(`[Pusher] Sent subscription request to channel: ${chatroomId}`);
 			}

@@ -365,6 +375,9 @@ async function KickConnect() {
 				case 'UserBannedEvent':
 					KickUserBanned(eventArgs);
 					break;
+				case 'KicksGifted':
+					KickKicksGifted(eventArgs);
+					break;
 			}
 		}
 		catch (error) {
@@ -504,6 +517,7 @@ async function TwitchChatMessage(data) {
 	// Set the message data
 	let message = data.message.message;
 	const messageColor = data.message.color;
+	const role = data.message.role;

 	// Set furry mode
 	if (furryMode)
@@ -578,6 +592,17 @@ async function TwitchChatMessage(data) {
 		avatarDiv.appendChild(avatar);
 	}

+	// Custom styling for subs
+	if (data.message.subscriber) {
+		usernameDiv.classList.add('sub-glow')
+	}
+
+	// Custom styling for mods
+	// 3 = Moderator
+	if (role == 3) {
+		usernameDiv.classList.add('moderator-glow')
+	}
+
 	// Hide the header if the same username sends a message twice in a row
 	const messageList = document.getElementById("messageList");
 	if (groupConsecutiveMessages && messageList.children.length > 0) {
@@ -852,7 +877,10 @@ function YouTubeMessage(data) {
 	// Set the message data
 	if (showUsername) {
 		usernameDiv.innerText = data.user.name;
-		usernameDiv.style.color = "#f70000";	// YouTube users do not have colors, so just set it to red
+		if (randomYouTubeColors)
+			usernameDiv.style.color = StringToHex(data.user.name);
+		else
+			usernameDiv.style.color = youtubeColor;	// YouTube users do not have colors, so just set it to red
 	}

 	if (showMessage) {
@@ -890,7 +918,10 @@ function YouTubeMessage(data) {

 	if (data.user.isSponsor && showBadges) {
 		const badge = new Image();
-		badge.src = `icons/badges/youtube-member.svg`;
+		if (youtubeCustomSubIcon)
+			badge.src = youtubeCustomSubIcon;
+		else
+			badge.src = `icons/badges/youtube-member.svg`;
 		badge.style.filter = `invert(100%)`;
 		badge.style.opacity = 0.8;
 		badge.classList.add("badge");
@@ -920,6 +951,17 @@ function YouTubeMessage(data) {
 		avatarDiv.appendChild(avatar);
 	}

+	// Custom styling for subs
+	if (data.user.isSponsor) {
+		usernameDiv.classList.add('sub-glow')
+	}
+
+	// Custom styling for mods
+	// 3 = Moderator
+	if (data.user.isModerator) {
+		usernameDiv.classList.add('moderator-glow')
+	}
+
 	// Hide the header if the same username sends a message twice in a row
 	const messageList = document.getElementById("messageList");
 	if (groupConsecutiveMessages && messageList.children.length > 0) {
@@ -1425,6 +1467,18 @@ function KickUserBanned(data) {
 	});
 }

+function KickKicksGifted(data) {
+	if (!showKickGifts)
+		return;
+
+	const kicksImg = `<img src=icons/badges/kick-kicks.svg class="platform"/>`;
+	const giftImg = `<img src=https://files.kick.com/kicks/gifts/${data.gift.gift_id.replace('_', '-')}.webp class="platform"/>`;
+
+	const message = ` ${giftImg} ${data.sender.username} sent ${data.gift.name} ${kicksImg} ${data.gift.amount}`;
+
+	ShowAlert(message, 'kick');
+}
+
 async function TikTokChat(data) {
 	if (!showTikTokMessages)
 		return;
@@ -1572,105 +1626,6 @@ function TikTokSubscribe(data) {
 // HELPER FUNCTIONS //
 //////////////////////

-function GetBooleanParam(paramName, defaultValue) {
-	const urlParams = new URLSearchParams(window.location.search);
-	const paramValue = urlParams.get(paramName);
-
-	if (paramValue === null) {
-		return defaultValue; // Parameter not found
-	}
-
-	const lowercaseValue = paramValue.toLowerCase(); // Handle case-insensitivity
-
-	if (lowercaseValue === 'true') {
-		return true;
-	} else if (lowercaseValue === 'false') {
-		return false;
-	} else {
-		return paramValue; // Return original string if not 'true' or 'false'
-	}
-}
-
-function GetIntParam(paramName, defaultValue) {
-	const urlParams = new URLSearchParams(window.location.search);
-	const paramValue = urlParams.get(paramName);
-
-	if (paramValue === null) {
-		return defaultValue; // or undefined, or a default value, depending on your needs
-	}
-
-	const intValue = parseInt(paramValue, 10); // Parse as base 10 integer
-
-	if (isNaN(intValue)) {
-		return null; // or handle the error in another way, e.g., throw an error
-	}
-
-	return intValue;
-}
-
-function GetCurrentTimeFormatted() {
-	const now = new Date();
-	let hours = now.getHours();
-	const minutes = String(now.getMinutes()).padStart(2, '0');
-	const ampm = hours >= 12 ? 'PM' : 'AM';
-
-	hours = hours % 12;
-	hours = hours ? hours : 12; // the hour '0' should be '12'
-
-	const formattedTime = `${hours}:${minutes} ${ampm}`;
-	return formattedTime;
-}
-
-async function GetAvatar(username, platform) {
-
-	// First, check if the username is hashed already
-	if (avatarMap.has(`${username}-${platform}`)) {
-		console.debug(`Avatar found for ${username} (${platform}). Retrieving from hash map.`)
-		return avatarMap.get(`${username}-${platform}`);
-	}
-
-	// If code reaches this point, the username hasn't been hashed, so retrieve avatar
-	switch (platform) {
-		case 'twitch':
-			{
-				console.debug(`No avatar found for ${username} (${platform}). Retrieving from Decapi.`)
-				let response = await fetch('https://decapi.me/twitch/avatar/' + username);
-				let data = await response.text();
-				avatarMap.set(`${username}-${platform}`, data);
-				return data;
-			}
-		case 'kick':
-			{
-				console.debug(`No avatar found for ${username} (${platform}). Retrieving from Kick.`)
-				let response = await fetch('https://kick.com/api/v2/channels/' + username);
-				console.log('https://kick.com/api/v2/channels/' + username)
-				let data = await response.json();
-				let avatarURL = data.user.profile_pic;
-				if (!avatarURL)
-					avatarURL = 'https://kick.com/img/default-profile-pictures/default2.jpeg';
-				avatarMap.set(`${username}-${platform}`, avatarURL);
-				return avatarURL;
-			}
-	}
-}
-
-async function GetPronouns(platform, username) {
-	if (pronounMap.has(username)) {
-		console.debug(`Pronouns found for ${username}. Retrieving from hash map.`)
-		return pronounMap.get(username);
-	}
-	else {
-		console.debug(`No pronouns found for ${username}. Retrieving from alejo.io.`)
-		const response = await client.getUserPronouns(platform, username);
-		const userFound = response.pronoun.userFound;
-		const pronouns = userFound ? `${response.pronoun.pronounSubject}/${response.pronoun.pronounObject}` : '';
-
-		pronounMap.set(username, pronouns);
-
-		return pronouns;
-	}
-}
-
 function AddMessageItem(element, elementID, platform, userId) {
 	// Calculate the height of the div before inserting
 	const tempDiv = document.getElementById('IPutThisHereSoICanCalculateHowBigEachMessageIsSupposedToBeBeforeIAddItToTheMessageList');
@@ -1820,77 +1775,6 @@ function GetWinnersList(gifts) {
 	}
 }

-function TranslateToFurry(sentence) {
-	const words = sentence.toLowerCase().split(/\b/);
-
-	const furryWords = words.map(word => {
-		if (/\w+/.test(word)) {
-			let newWord = word;
-
-			// Common substitutions
-			newWord = newWord.replace(/l/g, 'w');
-			newWord = newWord.replace(/r/g, 'w');
-			newWord = newWord.replace(/th/g, 'f');
-			newWord = newWord.replace(/you/g, 'yous');
-			newWord = newWord.replace(/my/g, 'mah');
-			newWord = newWord.replace(/me/g, 'meh');
-			newWord = newWord.replace(/am/g, 'am');
-			newWord = newWord.replace(/is/g, 'is');
-			newWord = newWord.replace(/are/g, 'are');
-			newWord = newWord.replace(/very/g, 'vewy');
-			newWord = newWord.replace(/pretty/g, 'pwetty');
-			newWord = newWord.replace(/little/g, 'wittle');
-			newWord = newWord.replace(/nice/g, 'nyce');
-
-			// Random additions
-			if (Math.random() < 0.15) {
-				newWord += ' nya~';
-			} else if (Math.random() < 0.1) {
-				newWord += ' >w<';
-			} else if (Math.random() < 0.05) {
-				newWord += ' owo';
-			}
-
-			return newWord;
-		}
-		return word;
-	});
-
-	return furryWords.join('');
-}
-
-function EscapeRegExp(string) {
-	return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'); // $& means the whole matched string
-}
-
-async function GetKickChatroomId(username) {
-	const url = `https://kick.com/api/v2/channels/${username}`;
-
-	try {
-		const response = await fetch(url);
-		if (!response.ok) {
-			throw new Error(`HTTP error ${response.status}`);
-		}
-
-		const data = await response.json();
-		if (data.chatroom && data.chatroom.id) {
-			return data.chatroom.id;
-		} else {
-			throw new Error("Chatroom ID not found in response.");
-		}
-	} catch (error) {
-		console.error("Failed to fetch chatroom ID:", error.message);
-		return null;
-	}
-}
-
-async function GetKickSubBadges(username) {
-	const response = await fetch(`https://kick.com/api/v2/channels/${username}`);
-	const data = await response.json();
-
-	return data.subscriber_badges || [];
-}
-
 function GetKickBadgeURL(data) {
 	switch (data.type) {
 		case 'subscriber':
@@ -4,7 +4,7 @@
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="icon" href="../../.resources/logo.png" type="image/png">
+    <link rel="icon" href="../../.common/resources/logo.png" type="image/png">
    <title>nutty</title>
    <style>
        body {
@@ -1,6 +1,6 @@
 const widgetContainer = document.getElementById('widgetContainer');

-const settingsPageURL = '../../.utilities/settings-page-builder';
+const settingsPageURL = '../../.common/core/settings-core';

 const currentURL = window.location.href;

@@ -255,6 +255,14 @@
 			"defaultValue": true,
 			"group": "Which Kick messages do you want to see?"
 		},
+		{
+			"id": "showKickGifts",
+			"label": "Gifts",
+			"description": "",
+			"type": "checkbox",
+			"defaultValue": true,
+			"group": "Which Kick messages do you want to see?"
+		},
 		{
 			"id": "enableTikTokSupport",
 			"label": "Enable TikTok Support",
@@ -2,7 +2,7 @@
 	margin: 0;
 	padding: 0;
 	--margin: 0px;
-	--border-radius: 20px;
+	--border-radius: 0.5em;
 }

 body {
@@ -76,6 +76,10 @@ html {
 	/* background-color: red; */
 }

+#alertBoxContent img {
+  height: 1.2em;
+}
+
 #background {
 	position: absolute;
 	bottom: 0;
@@ -110,7 +114,7 @@ html {

 li {
 	list-style: none;
-	overflow: hidden;
+	/* overflow: hidden; */
 	max-width: 0px;
 	transition: all 1s ease-in-out;
 }
@@ -66,7 +66,7 @@
 	</template>

 	<template id="tiktok-gift-template">
-		<div class="tiktok-gift">
+		<div class="tiktok-gift tiktok">
 			<img class="tiktok-gift-avatar"
 				src="https://static-cdn.jtvnw.net/jtv_user_pictures/f632e0c6-38e2-4065-a29e-6ba9b3e8cacf-profile_image-300x300.png" />
 			<div class="tiktok-gift-message">
@@ -84,6 +84,28 @@
 			</div>
 		</div>
 	</template>
+
+	<template id="kick-gift-template">
+		<div class="kick-gift kick">
+			<img class="kick-gift-avatar"
+				src="" />
+			<div class="kick-gift-contents">
+				<span id="kick-gift-username" style="font-weight: 700;">
+				</span>
+				<br>
+				<div style="display: flex; flex-direction: row; align-items: center;">
+					<span>sent <span id="kick-gift-name"></span></span>
+					<img src="icons/badges/kick-kicks.svg" style="height: 1em; padding-left: 0.5em; padding-right: 0.25em;">
+					<span id="kick-gift-amount">13</span>
+				</div>
+				<div id="kick-gift-message">
+				</div>
+			</div>
+			<img class="kick-gift-sticker"
+				src="" />
+		</div>
+	</template>
 </body>

+<script src="../.common/utils/helpers.js"></script>
 <script src="./script.js"></script>
@@ -7,8 +7,6 @@ const urlParams = new URLSearchParams(queryString);

 const sbServerAddress = urlParams.get("address") || "127.0.0.1";
 const sbServerPort = urlParams.get("port") || "8080";
-const avatarMap = new Map();
-const pronounMap = new Map();

 /////////////////
 // GLOBAL VARS //
@@ -55,12 +53,13 @@ const showTwitchChannelPointRedemptions = GetBooleanParam("showTwitchChannelPoin
 const showTwitchRaids = GetBooleanParam("showTwitchRaids", true);
 const showTwitchSharedChat = GetIntParam("showTwitchSharedChat", 2);

-let kickUsername = urlParams.get("kickUsername") || "";
+const kickUsername = urlParams.get("kickUsername") || "";
 const showKickMessages = GetBooleanParam("showKickMessages", true);
 // const showKickFollows = GetBooleanParam("showKickFollows", false);
 const showKickSubs = GetBooleanParam("showKickSubs", true);
 const showKickChannelPointRedemptions = GetBooleanParam("showKickChannelPointRedemptions", true);
 const showKickHosts = GetBooleanParam("showKickHosts", true);
+const showKickGifts = GetBooleanParam("showKickGifts", true);

 const showYouTubeMessages = GetBooleanParam("showYouTubeMessages", true);
 const showYouTubeSuperChats = GetBooleanParam("showYouTubeSuperChats", true);
@@ -83,10 +82,20 @@ const showFourthwallAlerts = GetBooleanParam("showFourthwallAlerts", true);

 const furryMode = GetBooleanParam("furryMode", false);

-const animationSpeed = GetIntParam("animationSpeed", 0.1);
+////////////////////
+// HIDDEN OPTIONS //
+////////////////////

-// Kick is stupid and turns underscores into dashes which fuck everything up, therefore do a find/replace to make it work good
-kickUsername = kickUsername.replace(/_/g, "-");
+const animationSpeed = GetIntParam("animationSpeed", 0.1);
+const randomYouTubeColors = GetBooleanParam("randomYouTubeColors", false);
+const youtubeColor = urlParams.get("youtubeColor") || "#f70000";
+const youtubeCustomSubIcon = urlParams.get("youtubeCustomSubIcon") || "";
+
+
+
+////////////////
+// PAGE SETUP //
+////////////////

 // Set fonts for the widget
 document.body.style.fontFamily = font;
@@ -121,7 +130,6 @@ document.documentElement.style.setProperty('--animation-speed', `${animationSpee



-
 /////////////////////////
 // STREAMER.BOT CLIENT //
 /////////////////////////
@@ -322,6 +330,11 @@ client.on('Fourthwall.GiftDrawEnded', (response) => {
 	FourthwallGiftDrawEnded(response.data);
 })

+client.on('Fourthwall.GiftDrawEnded', (response) => {
+	console.debug(response.data);
+	FourthwallGiftDrawEnded(response.data);
+})
+


 ///////////////////////////
@@ -334,18 +347,20 @@ async function KickConnect() {
 		return;

 	// Channel to subscribe to (you'll need the correct channel name here)
-	const chatroomId = await GetKickChatroomId(kickUsername);
+	const kickIds = await GetKickIds(kickUsername);
+	const chatroomId = kickIds.chatroomId;
+	const channelId = kickIds.channelId;

 	// Cache subscriber badges
 	kickSubBadges = await GetKickSubBadges(kickUsername);

 	const websocket = new WebSocket(kickPusherWsUrl);

-    // Reconnect
-    websocket.onclose = function () {
-        console.log(`Reconnecting to ${kickUsername}...`);
-        setTimeout(connectPusher, 5000);
-    };
+	// Reconnect
+	websocket.onclose = function () {
+		console.log(`Reconnecting to ${kickUsername}...`);
+		setTimeout(connectPusher, 5000);
+	};

 	websocket.onopen = function () {
 		console.log(`Kick successfully conntected to ${kickUsername}.`);
@@ -363,10 +378,11 @@ async function KickConnect() {
 				console.log(`[Pusher] Socket established with ID: ${socketData.socket_id}`);

 				// Now subscribe to a channel
-                websocket.send(JSON.stringify({ event: 'pusher:subscribe', data: { channel: `chatroom_${chatroomId}` } }));
-                websocket.send(JSON.stringify({ event: 'pusher:subscribe', data: { channel: `chatrooms.${chatroomId}` } }));
-                websocket.send(JSON.stringify({ event: 'pusher:subscribe', data: { channel: `chatrooms.${chatroomId}.v2` } }));
-                websocket.send(JSON.stringify({ event: 'pusher:subscribe', data: { channel: `predictions-channel-${chatroomId}` } }));
+				websocket.send(JSON.stringify({ event: 'pusher:subscribe', data: { channel: `chatroom_${chatroomId}` } }));
+				websocket.send(JSON.stringify({ event: 'pusher:subscribe', data: { channel: `chatrooms.${chatroomId}` } }));
+				websocket.send(JSON.stringify({ event: 'pusher:subscribe', data: { channel: `chatrooms.${chatroomId}.v2` } }));
+				websocket.send(JSON.stringify({ event: 'pusher:subscribe', data: { channel: `predictions-channel-${chatroomId}` } }));
+				websocket.send(JSON.stringify({ event: 'pusher:subscribe', data: { channel: `channel_${channelId}` } }));
 				console.log(`[Pusher] Sent subscription request to channel: ${chatroomId}`);
 			}

@@ -398,6 +414,9 @@ async function KickConnect() {
 				case 'UserBannedEvent':
 					KickUserBanned(eventArgs);
 					break;
+				case 'KicksGifted':
+					KickKicksGifted(eventArgs);
+					break;
 			}
 		}
 		catch (error) {
@@ -537,8 +556,7 @@ async function TwitchChatMessage(data) {
 	// Set Shared Chat
 	const isFromSharedChatGuest = data.isFromSharedChatGuest;
 	if (isFromSharedChatGuest) {
-		switch (showTwitchSharedChat)
-		{
+		switch (showTwitchSharedChat) {
 			// 2 = Show & Highlight
 			case 2:
 				let sharedChatChannel = data.sharedChatSource.name;		// Twitch removed the source channel for some reason?!?!
@@ -672,6 +690,17 @@ async function TwitchChatMessage(data) {
 		avatarDiv.appendChild(avatar);
 	}

+	// Custom styling for subs
+	if (data.message.subscriber) {
+		usernameDiv.classList.add('sub-glow')
+	}
+
+	// Custom styling for mods
+	// 3 = Moderator
+	if (role == 3) {
+		usernameDiv.classList.add('moderator-glow')
+	}
+
 	// Hide the header if the same username sends a message twice in a row
 	// EXCEPT when the scroll direction is set to reverse (scrollDirection == 2)
 	const messageList = document.getElementById("messageList");
@@ -1234,7 +1263,10 @@ async function YouTubeMessage(data) {
 	// Set the message data
 	if (showUsername) {
 		usernameDiv.innerText = data.user.name;
-		usernameDiv.style.color = "#f70000";	// YouTube users do not have colors, so just set it to red
+		if (randomYouTubeColors)
+			usernameDiv.style.color = StringToHex(data.user.name);
+		else
+			usernameDiv.style.color = youtubeColor;	// YouTube users do not have colors, so just set it to red
 	}

 	if (showMessage) {
@@ -1279,7 +1311,10 @@ async function YouTubeMessage(data) {

 	if (data.user.isSponsor && showBadges) {
 		const badge = new Image();
-		badge.src = `icons/badges/youtube-member.svg`;
+		if (youtubeCustomSubIcon)
+			badge.src = youtubeCustomSubIcon;
+		else
+			badge.src = `icons/badges/youtube-member.svg`;
 		badge.style.filter = `invert(100%)`;
 		badge.style.opacity = 0.8;
 		badge.classList.add("badge");
@@ -1310,6 +1345,16 @@ async function YouTubeMessage(data) {
 		avatarDiv.appendChild(avatar);
 	}

+	// Custom styling for subs
+	if (data.user.isSponsor) {
+		usernameDiv.classList.add('sub-glow')
+	}
+
+	// Custom styling for mods
+	// 3 = Moderator
+	if (data.user.isModerator) {
+		usernameDiv.classList.add('moderator-glow')
+	}

 	// Hide the header if the same username sends a message twice in a row
 	// EXCEPT when the scroll direction is set to reverse (scrollDirection == 2)
@@ -2518,6 +2563,35 @@ function KickMessageDeleted(data) {
 	}, 500);
 }

+async function KickKicksGifted(data) {
+	if (!showKickGifts)
+		return;
+
+	// Get a reference to the template
+	const template = document.getElementById('kick-gift-template');
+
+	// Create a new instance of the template
+	const instance = template.content.cloneNode(true);
+
+	// Get divs
+	const avatarImg = instance.querySelector('.kick-gift-avatar');
+	const usernameSpan = instance.querySelector('#kick-gift-username');
+	const giftNameSpan = instance.querySelector('#kick-gift-name');
+	const stickerImg = instance.querySelector('.kick-gift-sticker');
+	const amountDiv = instance.querySelector('#kick-gift-amount');
+	const messageDiv = instance.querySelector('#kick-gift-message');
+
+	avatarImg.src = await GetAvatar(data.sender.username, 'kick');			// Set the card header
+	usernameSpan.innerText = data.sender.username;							// Set the username
+	usernameSpan.style.color = data.sender.username_color;
+	giftNameSpan.innerText = data.gift.name;								// Set the gift name
+	stickerImg.src = `https://files.kick.com/kicks/gifts/${data.gift.gift_id.replace('_', '-')}.webp`;		// Set the sticker image URL
+	amountDiv.innerText = data.gift.amount;									// Set the number of gifts sent
+	messageDiv.innerText = data.message										// Set the message
+
+	AddMessageItem(instance, null, 'kick', data.senderId);
+}
+
 function KickUserBanned(data) {
 	const messageList = document.getElementById("messageList");

@@ -2725,42 +2799,63 @@ function TikTokLikes(data) {


 	// Get the total number of likes
-	var likeCountTotal = parseInt(data.likeCount);
+	let likeCount = parseInt(data.likeCount);

 	// Search for Previous Likes from the Same User
-    const previousLikeContainer = document.querySelector(`li[data-user-id="${data.userId}"]`);
+	const previousLikeContainer = document.querySelector(`.likes[data-user-identifier="${data.userId}"]`);

 	// If found, fetches the previous likes, deletes the element
-    // and then creates a new count with a sum of the like count
-    if (previousLikeContainer) {
-        const likeCountElem = previousLikeContainer.querySelector('#tiktok-gift-repeat-count');
-        if (likeCountElem) {
-            var likeCountPrev = parseInt(likeCountElem.textContent.replace('x', ''));
-            likeCountTotal = Math.floor(likeCountPrev + likeCountTotal);
-            previousLikeContainer.remove();
-        }
-    }
+	// and then creates a new count with a sum of the like count
+	if (previousLikeContainer) {
+		const likeCountElem = previousLikeContainer.querySelector('#tiktok-gift-repeat-count');
+		if (likeCountElem) {
+			const liLikeContainer = previousLikeContainer.parentElement?.parentElement;
+			if (liLikeContainer) {
+				let prevLikeCount = parseInt(likeCountElem.textContent.replace('x', ''), 10);
+				let likeCountUpdate = Math.floor(prevLikeCount + likeCount);
+				let likeCountDiv = previousLikeContainer.querySelector('#tiktok-gift-repeat-count');

-	// Get a reference to the template
-	const template = document.getElementById('tiktok-gift-template');
+				likeCountDiv.innerText = `x${likeCountUpdate}`;

-	// Create a new instance of the template
-	const instance = template.content.cloneNode(true);
+				const parent = liLikeContainer.parentElement;
+				if (parent) {
+					parent.appendChild(liLikeContainer);
+				}
+			}
+		}
+	}

-	// Get divs
-	const avatarImg = instance.querySelector('.tiktok-gift-avatar');
-	const usernameSpan = instance.querySelector('#tiktok-gift-username');
-	const giftNameSpan = instance.querySelector('#tiktok-gift-name');
-	const stickerImg = instance.querySelector('.tiktok-gift-sticker');
-	const repeatCountDiv = instance.querySelector('#tiktok-gift-repeat-count');
+	else {
+		// Get a reference to the template
+		const template = document.getElementById('tiktok-gift-template');

-	avatarImg.src = data.profilePictureUrl;
-	usernameSpan.innerText = data.nickname;
-	giftNameSpan.innerText = 'Likes';
-	stickerImg.src = '';
-	repeatCountDiv.innerText = `x${likeCountTotal}`;
+		// Create a new instance of the template
+		const instance = template.content.cloneNode(true);

-	AddMessageItem(instance, data.msgId, 'tiktok', data.userId);
+		// gets the GiftElement
+		const giftElement = instance.querySelector('.tiktok-gift');
+
+		// adds the like class
+		giftElement.classList.add('likes');
+
+		// and assigns the user id
+		giftElement.dataset.userIdentifier = data.userId;
+
+		// Get divs
+		const avatarImg = instance.querySelector('.tiktok-gift-avatar');
+		const usernameSpan = instance.querySelector('#tiktok-gift-username');
+		const giftNameSpan = instance.querySelector('#tiktok-gift-name');
+		const stickerImg = instance.querySelector('.tiktok-gift-sticker');
+		const repeatCountDiv = instance.querySelector('#tiktok-gift-repeat-count');
+
+		avatarImg.src = data.profilePictureUrl;
+		usernameSpan.innerText = data.nickname;
+		giftNameSpan.innerText = 'Likes';
+		stickerImg.src = '';
+		repeatCountDiv.innerText = `x${likeCount}`;
+
+		AddMessageItem(instance, data.msgId, 'tiktok', data.userId);
+	}
 }

 function TikTokGift(data) {
@@ -2871,111 +2966,6 @@ function YouTubeThumbnailPreview(data) {
 // HELPER FUNCTIONS //
 //////////////////////

-function GetBooleanParam(paramName, defaultValue) {
-	const urlParams = new URLSearchParams(window.location.search);
-	const paramValue = urlParams.get(paramName);
-
-	if (paramValue === null) {
-		return defaultValue; // Parameter not found
-	}
-
-	const lowercaseValue = paramValue.toLowerCase(); // Handle case-insensitivity
-
-	if (lowercaseValue === 'true') {
-		return true;
-	} else if (lowercaseValue === 'false') {
-		return false;
-	} else {
-		return paramValue; // Return original string if not 'true' or 'false'
-	}
-}
-
-function GetIntParam(paramName, defaultValue) {
-	const urlParams = new URLSearchParams(window.location.search);
-	const paramValue = urlParams.get(paramName);
-
-	if (paramValue === null) {
-		return defaultValue; // or undefined, or a default value, depending on your needs
-	}
-
-	console.log(paramValue);
-
-	const intValue = parseInt(paramValue, 10); // Parse as base 10 integer
-
-	if (isNaN(intValue)) {
-		return null; // or handle the error in another way, e.g., throw an error
-	}
-
-	return intValue;
-}
-
-function GetCurrentTimeFormatted() {
-	const now = new Date();
-	let hours = now.getHours();
-	const minutes = String(now.getMinutes()).padStart(2, '0');
-	const ampm = hours >= 12 ? 'PM' : 'AM';
-
-	hours = hours % 12;
-	hours = hours ? hours : 12; // the hour '0' should be '12'
-
-	const formattedTime = `${hours}:${minutes} ${ampm}`;
-	return formattedTime;
-}
-
-async function GetAvatar(username, platform) {
-
-	// First, check if the username is hashed already
-	if (avatarMap.has(`${username}-${platform}`)) {
-		console.debug(`Avatar found for ${username} (${platform}). Retrieving from hash map.`)
-		return avatarMap.get(`${username}-${platform}`);
-	}
-
-	// If code reaches this point, the username hasn't been hashed, so retrieve avatar
-	switch (platform) {
-		case 'twitch':
-			{
-				console.debug(`No avatar found for ${username} (${platform}). Retrieving from Decapi.`)
-				let response = await fetch('https://decapi.me/twitch/avatar/' + username);
-				let data = await response.text();
-				avatarMap.set(`${username}-${platform}`, data);
-				return data;
-			}
-		case 'kick':
-			{
-				console.debug(`No avatar found for ${username} (${platform}). Retrieving from Kick.`)
-				let response = await fetch('https://kick.com/api/v2/channels/' + username);
-				console.log('https://kick.com/api/v2/channels/' + username)
-				let data = await response.json();
-				let avatarURL = data.user.profile_pic;
-				if (!avatarURL)
-					avatarURL = 'https://kick.com/img/default-profile-pictures/default2.jpeg';
-				avatarMap.set(`${username}-${platform}`, avatarURL);
-				return avatarURL;
-			}
-	}
-}
-
-async function GetPronouns(platform, username) {
-	if (pronounMap.has(username)) {
-		console.debug(`Pronouns found for ${username}. Retrieving from hash map.`)
-		return pronounMap.get(username);
-	}
-	else {
-		console.debug(`No pronouns found for ${username}. Retrieving from alejo.io.`)
-		const response = await client.getUserPronouns(platform, username);
-		const userFound = response.pronoun.userFound;
-		const pronouns = userFound ? `${response.pronoun.pronounSubject}/${response.pronoun.pronounObject}` : '';
-
-		pronounMap.set(username, pronouns);
-
-		return pronouns;
-	}
-}
-
-// function IsImageUrl(url) {
-// 	return url.match(/^http.*\.(jpeg|jpg|gif|png)$/) != null;
-// }
-
 function IsImageUrl(url) {
 	try {
 		const { pathname } = new URL(url);
@@ -3044,12 +3034,6 @@ function AddMessageItem(element, elementID, platform, userId) {
 	}, 200);
 }

-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) {
@@ -3145,77 +3129,6 @@ function GetWinnersList(gifts) {
 	}
 }

-function TranslateToFurry(sentence) {
-	const words = sentence.toLowerCase().split(/\b/);
-
-	const furryWords = words.map(word => {
-		if (/\w+/.test(word)) {
-			let newWord = word;
-
-			// Common substitutions
-			newWord = newWord.replace(/l/g, 'w');
-			newWord = newWord.replace(/r/g, 'w');
-			newWord = newWord.replace(/th/g, 'f');
-			newWord = newWord.replace(/you/g, 'yous');
-			newWord = newWord.replace(/my/g, 'mah');
-			newWord = newWord.replace(/me/g, 'meh');
-			newWord = newWord.replace(/am/g, 'am');
-			newWord = newWord.replace(/is/g, 'is');
-			newWord = newWord.replace(/are/g, 'are');
-			newWord = newWord.replace(/very/g, 'vewy');
-			newWord = newWord.replace(/pretty/g, 'pwetty');
-			newWord = newWord.replace(/little/g, 'wittle');
-			newWord = newWord.replace(/nice/g, 'nyce');
-
-			// Random additions
-			if (Math.random() < 0.15) {
-				newWord += ' nya~';
-			} else if (Math.random() < 0.1) {
-				newWord += ' >w<';
-			} else if (Math.random() < 0.05) {
-				newWord += ' owo';
-			}
-
-			return newWord;
-		}
-		return word;
-	});
-
-	return furryWords.join('');
-}
-
-function EscapeRegExp(string) {
-	return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'); // $& means the whole matched string
-}
-
-async function GetKickChatroomId(username) {
-	const url = `https://kick.com/api/v2/channels/${username}`;
-
-	try {
-		const response = await fetch(url);
-		if (!response.ok) {
-			throw new Error(`HTTP error ${response.status}`);
-		}
-
-		const data = await response.json();
-		if (data.chatroom && data.chatroom.id) {
-			return data.chatroom.id;
-		} else {
-			throw new Error("Chatroom ID not found in response.");
-		}
-	} catch (error) {
-		console.error("Failed to fetch chatroom ID:", error.message);
-		return null;
-	}
-}
-
-async function GetKickSubBadges(username) {
-	const response = await fetch(`https://kick.com/api/v2/channels/${username}`);
-	const data = await response.json();
-
-	return data.subscriber_badges || [];
-}
-
 function GetKickBadgeURL(data) {
 	switch (data.type) {
 		case 'subscriber':
@@ -3226,14 +3139,14 @@ function GetKickBadgeURL(data) {
 }

 function CalculateKickSubBadge(months) {
-  if (!Array.isArray(kickSubBadges)) return null;
+	if (!Array.isArray(kickSubBadges)) return null;

-  // Filter for eligible badges, then get the one with the highest 'months'
-  const badge = kickSubBadges
-    .filter(b => b.months <= months)
-    .sort((a, b) => b.months - a.months)[0];
+	// Filter for eligible badges, then get the one with the highest 'months'
+	const badge = kickSubBadges
+		.filter(b => b.months <= months)
+		.sort((a, b) => b.months - a.months)[0];

-  return badge?.badge_image?.src || `icons/badges/kick-subscriber.svg`;
+	return badge?.badge_image?.src || `icons/badges/kick-subscriber.svg`;
 }


@@ -4,7 +4,7 @@
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="icon" href="../../.resources/logo.png" type="image/png">
+    <link rel="icon" href="../../.common/resources/logo.png" type="image/png">
    <title>nutty</title>
    <style>
        body {
@@ -1,6 +1,6 @@
 const widgetContainer = document.getElementById('widgetContainer');

-const settingsPageURL = '../../.utilities/settings-page-builder';
+const settingsPageURL = '../../.common/core/settings-core';

 const currentURL = window.location.href;

@@ -376,6 +376,14 @@
 			"defaultValue": true,
 			"group": "Which Kick messages do you want to see?"
 		},
+		{
+			"id": "showKickGifts",
+			"label": "Gifts",
+			"description": "",
+			"type": "checkbox",
+			"defaultValue": true,
+			"group": "Which Kick messages do you want to see?"
+		},
 		{
 			"id": "enableTikTokSupport",
 			"label": "Enable TikTok Support",
@@ -3,7 +3,6 @@
 	padding: 0;
 	--margin: 20px;
 	--border-radius: 0.5em;
-	/* --line-spacing: 1.7em; */
 }

 body {
@@ -61,7 +60,7 @@ html {

 li {
 	list-style: none;
-	overflow: hidden;
+	/* overflow: hidden; */
 	max-height: 0;
 	margin: 10px 0px 0px 0px;
 	transition: all 1s ease-in-out;
@@ -224,17 +223,18 @@ li {
 	transform: translate(0px, 0.25em);
 }

+.kick-gift,
 .tiktok-gift {
 	display: flex;
 	flex-direction: row;
 	align-items: center;
 	gap: 1em;
-	padding: 0.5em 1em;
+	padding: 0.5em;
 	border-radius: var(--border-radius);
 	max-width: 100%;
-	background: linear-gradient(#262626BF, #000000BF) !important;
 }

+.kick-gift-avatar,
 .tiktok-gift-avatar {
 	height: 3em;
 	margin: 1px;
@@ -243,17 +243,37 @@ li {
 	flex-shrink: 0;
 }

+.kick-gift-contents,
 .tiktok-gift-message {
 	flex-grow: 1;
-	white-space: nowrap;		/* keeps text in a single line */
-	overflow: hidden;			/* hides overflowed content */
-	text-overflow: ellipsis;	/* adds the "..." at the end */
+	/* white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis; */
+	gap: 1em;
+}
+
+/* .kick-gift-contents {
+	text-align: center;
+} */
+
+#kick-gift-message {
+	font-size: 0.9em;
+}
+
+.kick-gift-sticker,
+.tiktok-gift-sticker {
+	flex-shrink: 0;
+	justify-content: flex-end;
+
+	filter: drop-shadow(5px 5px 5px #00000060);
 }

 .tiktok-gift-sticker {
 	height: 2.5em;
-	flex-shrink: 0;
-	justify-content: flex-end;
+}
+
+.kick-gift-sticker {
+	height: 5em;
 }

 #tiktok-gift-repeat-count {
@@ -292,7 +312,7 @@ li {
 }

 .kick {
-	background: linear-gradient(#53fc18, #005600) !important;
+	background: linear-gradient(#32b602, #005600) !important;
 }

 .streamlabs {
@@ -44,4 +44,5 @@
 	</div>
 </body>

+<script src="../.common/utils/helpers.js"></script>
 <script src="./script.js"></script>
@@ -7,7 +7,6 @@ const urlParams = new URLSearchParams(queryString);

 const sbServerAddress = urlParams.get("address") || "127.0.0.1";
 const sbServerPort = urlParams.get("port") || "8080";
-const avatarMap = new Map();

 const mainContainer = document.getElementById('mainContainer');
 const alertBox = document.getElementById('alertBox');
@@ -70,13 +69,15 @@ const showTwitchRaids = GetBooleanParam("showTwitchRaids", true);
 const twitchRaidAction = urlParams.get("twitchRaidAction") || "";

 // Which Kick alerts do you want to see?
-let kickUsername = urlParams.get("kickUsername") || "";
+const kickUsername = urlParams.get("kickUsername") || "";
 const showKickSubs = GetBooleanParam("showKickSubs", true);
 const kickSubAction = urlParams.get("kickSubAction") || "";
 const showKickChannelPointRedemptions = GetBooleanParam("showKickChannelPointRedemptions", true);
 const kickChannelPointRedemptionAction = urlParams.get("kickChannelPointRedemptionAction") || "";
 const showKickHosts = GetBooleanParam("showKickHosts", true);
 const kickHostAction = urlParams.get("kickHostAction") || "";
+const showKickGifts = GetBooleanParam("showKickGifts", true);
+const kickGiftAction = urlParams.get("kickGiftAction") || "";

 // Which YouTube alerts do you want to see?
 const showYouTubeSuperChats = GetBooleanParam("showYouTubeSuperChats", true);
@@ -107,9 +108,6 @@ const tipeeestreamDonationAction = urlParams.get("tipeeestreamDonationAction") |
 const showFourthwallAlerts = GetBooleanParam("showFourthwallAlerts", false);
 const fourthwallAlertAction = urlParams.get("fourthwallAlertAction") || "";

-// Kick is stupid and turns underscores into dashes which fuck everything up, therefore do a find/replace to make it work good
-kickUsername = kickUsername.replace(/_/g, "-");
-
 // Set avatar visibility
 if (!showAvatar) {
 	avatarElement.style.display = 'none';
@@ -315,7 +313,9 @@ async function KickConnect() {
 		return;

 	// Channel to subscribe to (you'll need the correct channel name here)
-	const chatroomId = await GetKickChatroomId(kickUsername);
+    const kickIds = await GetKickIds(kickUsername);
+    const chatroomId = kickIds.chatroomId;
+    const channelId = kickIds.channelId;

 	// Cache subscriber badges
 	kickSubBadges = await GetKickSubBadges(kickUsername);
@@ -348,6 +348,7 @@ async function KickConnect() {
                websocket.send(JSON.stringify({ event: 'pusher:subscribe', data: { channel: `chatrooms.${chatroomId}` } }));
                websocket.send(JSON.stringify({ event: 'pusher:subscribe', data: { channel: `chatrooms.${chatroomId}.v2` } }));
                websocket.send(JSON.stringify({ event: 'pusher:subscribe', data: { channel: `predictions-channel-${chatroomId}` } }));
+                websocket.send(JSON.stringify({ event: 'pusher:subscribe', data: { channel: `channel_${channelId}` } }));
 				console.log(`[Pusher] Sent subscription request to channel: ${chatroomId}`);
 			}

@@ -370,6 +371,9 @@ async function KickConnect() {
 				case 'StreamHostEvent':
 					KickStreamHost(eventArgs);
 					break;
+				case 'KicksGifted':
+					KickKicksGifted(eventArgs);
+					break;
 			}
 		}
 		catch (error) {
@@ -1365,6 +1369,32 @@ async function KickStreamHost(data) {
 	);
 }

+async function KickKicksGifted(data) {
+	if (!showKickGifts)
+		return;
+
+	// Set the text
+	const username = data.sender.username;
+	const tiktokIcon = `<img src="icons/platforms/kick.png" class="platform"/>`;
+	// const giftImg = `<img src=https://files.kick.com/kicks/gifts/${data.gift.gift_id.replace('_', '-')}.webp style="height: 1em"/>`;
+	const kickKicksIcon = `<img src=icons/badges/kick-kicks.svg style="height: 0.8em"/>`;
+	
+	// Render avatars
+	const avatarURL = `https://files.kick.com/kicks/gifts/${data.gift.gift_id.replace('_', '-')}.webp`;
+
+	UpdateAlertBox(
+		'kick',
+		avatarURL,
+		`${username}`,
+		`sent ${kickKicksIcon} ${data.gift.amount}`,
+		'',
+		username,
+		data.message,
+		kickGiftAction,
+		data
+	);
+}
+
 async function TikTokGift(data) {
 	if (!showTikTokGifts)
 		return;
@@ -1429,83 +1459,6 @@ async function TikTokSubscribe(data) {
 // HELPER FUNCTIONS //
 //////////////////////

-function GetBooleanParam(paramName, defaultValue) {
-	const urlParams = new URLSearchParams(window.location.search);
-	const paramValue = urlParams.get(paramName);
-
-	if (paramValue === null) {
-		return defaultValue; // Parameter not found
-	}
-
-	const lowercaseValue = paramValue.toLowerCase(); // Handle case-insensitivity
-
-	if (lowercaseValue === 'true') {
-		return true;
-	} else if (lowercaseValue === 'false') {
-		return false;
-	} else {
-		return paramValue; // Return original string if not 'true' or 'false'
-	}
-}
-
-function GetIntParam(paramName, defaultValue) {
-	const urlParams = new URLSearchParams(window.location.search);
-	const paramValue = urlParams.get(paramName);
-
-	if (paramValue === null) {
-		return defaultValue; // or undefined, or a default value, depending on your needs
-	}
-
-	console.log(paramValue);
-
-	const intValue = parseInt(paramValue, 10); // Parse as base 10 integer
-
-	if (isNaN(intValue)) {
-		return null; // or handle the error in another way, e.g., throw an error
-	}
-
-	return intValue;
-}
-
-async function GetAvatar(username, platform) {
-
-	// First, check if the username is hashed already
-	if (avatarMap.has(`${username}-${platform}`)) {
-		console.debug(`Avatar found for ${username} (${platform}). Retrieving from hash map.`)
-		return avatarMap.get(`${username}-${platform}`);
-	}
-
-	// If code reaches this point, the username hasn't been hashed, so retrieve avatar
-	switch (platform) {
-		case 'twitch':
-			{
-				console.debug(`No avatar found for ${username} (${platform}). Retrieving from Decapi.`)
-				let response = await fetch('https://decapi.me/twitch/avatar/' + username);
-				let data = await response.text();
-				avatarMap.set(`${username}-${platform}`, data);
-				return data;
-			}
-		case 'kick':
-			{
-				console.debug(`No avatar found for ${username} (${platform}). Retrieving from Kick.`)
-				let response = await fetch('https://kick.com/api/v2/channels/' + username);
-				console.log('https://kick.com/api/v2/channels/' + username)
-				let data = await response.json();
-				let avatarURL = data.user.profile_pic;
-				if (!avatarURL)
-					avatarURL = 'https://kick.com/img/default-profile-pictures/default2.jpeg';
-				avatarMap.set(`${username}-${platform}`, avatarURL);
-				return avatarURL;
-			}
-	}
-}
-
-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) {
@@ -1710,43 +1663,6 @@ function UpdateAlertBox(platform, avatarURL, headerText, descriptionText, attrib

 }

-async function GetKickChatroomId(username) {
-	const url = `https://kick.com/api/v2/channels/${username}`;
-
-	try {
-		const response = await fetch(url);
-		if (!response.ok) {
-			throw new Error(`HTTP error ${response.status}`);
-		}
-
-		const data = await response.json();
-		if (data.chatroom && data.chatroom.id) {
-			return data.chatroom.id;
-		} else {
-			throw new Error("Chatroom ID not found in response.");
-		}
-	} catch (error) {
-		console.error("Failed to fetch chatroom ID:", error.message);
-		return null;
-	}
-}
-
-async function GetKickSubBadges(username) {
-	const response = await fetch(`https://kick.com/api/v2/channels/${username}`);
-	const data = await response.json();
-
-	return data.subscriber_badges || [];
-}
-
-function GetKickBadgeURL(data) {
-	switch (data.type) {
-		case 'subscriber':
-			return CalculateKickSubBadge(data.count);
-		default:
-			return `icons/badges/kick-${data.type}.svg`;
-	}
-}
-
 function CalculateKickSubBadge(months) {
  if (!Array.isArray(kickSubBadges)) return null;

@@ -4,7 +4,7 @@
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="icon" href="../../.resources/logo.png" type="image/png">
+    <link rel="icon" href="../../.common/resources/logo.png" type="image/png">
    <title>nutty</title>
    <style>
        body {
@@ -1,6 +1,6 @@
 const widgetContainer = document.getElementById('widgetContainer');

-const settingsPageURL = '../../.utilities/settings-page-builder';
+const settingsPageURL = '../../.common/core/settings-core';

 const currentURL = window.location.href;

@@ -422,6 +422,23 @@
 			"showIf": "showKickHosts",
 			"group": "Which Kick alerts do you want to see?"
 		},
+		{
+			"id": "showKickGifts",
+			"label": "Gifts",
+			"description": "",
+			"type": "checkbox",
+			"defaultValue": true,
+			"group": "Which Kick alerts do you want to see?"
+		},
+		{
+			"id": "kickGiftAction",
+			"label": "",
+			"description": "Also run this Streamer.bot Action",
+			"type": "sb-actions",
+			"defaultValue": "",
+			"showIf": "showKickGifts",
+			"group": "Which Kick alerts do you want to see?"
+		},
 		{
 			"id": "enableTikTokSupport",
 			"label": "Enable TikTok Support",
@@ -25,6 +25,8 @@
            <div class="broadcast-info">
                <label class="setting-attribute">
                    <i>YouTube stream info can only be updated while live</i>
+                    <br>
+                    <i><span id="youtube-title-on-broadcast-start-label"></span></i>
                </label>
            </div>

@@ -59,6 +61,17 @@
            <input type="text" id="all-category-input" placeholder="Leave empty to keep current category">
        </div>

+        <div id="include-youtube-setting-wrapper" class="setting">
+            <div>
+                <div class="setting-label">Include YouTube</div>
+                <div class="setting-description">Update YouTube title as soon as broadcast starts</div>
+            </div>
+            <label class="switch" style="margin-left: auto;">
+                <input type="checkbox" id="include-youtube-setting" name="include-youtube-setting" checked>
+                <span class="slider round"></span>
+            </label>
+        </div>
+
        <button id="all-submit-button" onclick="UpdateAllSubmit()">Update All</button>
    </div>

@@ -211,7 +224,7 @@
        <div class="broadcast-info">
            <label id="broadcast-title"></label>
            <label id="broadcast-category" class="setting-description"></label>
-            <label id="kick-warning" class="setting-attribute"><br><i>Stream info only available when live — Showing
+            <label id="kick-warning" class="setting-attribute"><br><i>Most up to date stream info only available when live — Showing
                    last known stream title</i></label>
        </div>

@@ -8,6 +8,7 @@ const sbActionOpenUrl = '14da1d44-6e29-4582-92c3-2c59388be57e';

 let currentBroadcastId = '';
 let runningActionId = '';
+let youtubeTitleOnBroadcastStart = '';


 ///////////////////
@@ -21,6 +22,9 @@ const updateKickDialog = document.getElementById('update-kick-dialog');
 const updateYouTubeDialog = document.getElementById('update-youtube-dialog');
 const broadcastList = document.getElementById('broadcast-list');
 const youtubeWarning = document.getElementById('youtube-warning');
+const includeYouTubeSettingWrapper = document.getElementById('include-youtube-setting-wrapper');
+const includeYouTubeSetting = document.getElementById('include-youtube-setting');
+const youtubeTitleOnBroadcastStartLabel = document.getElementById('youtube-title-on-broadcast-start-label');



@@ -37,6 +41,21 @@ window.parent.sbClient.on('General.Custom', (response) => {
    GeneralCustom(response.data);
 })

+window.parent.sbClient.on('YouTube.BroadcastStarted', (response) => {
+    console.debug(response.data);
+    YouTubeBroadcastStarted(response.data);
+})
+
+window.parent.sbClient.on('Twitch.StreamUpdate', (response) => {
+    console.debug(response.data);
+    FetchBroadcasts();
+})
+
+window.parent.sbClient.on('YouTube.BroadcastUpdated', (response) => {
+    console.debug(response.data);
+    FetchBroadcasts();
+})
+


 ///////////////////////////////
@@ -64,9 +83,17 @@ async function GeneralCustom(data) {
                    // Only show the warning if there are 0 monitored broadcasts
                    const ytBroadcastCount = data.broadcastList.filter(b => b.platform === "youtube").length;
                    if (ytBroadcastCount <= 0)
+                    {
                        youtubeWarning.style.display = 'flex';
+                        includeYouTubeSettingWrapper.style.display = 'flex';
+                        includeYouTubeSetting.checked = true;
+                    }
                    else
+                    {
                        youtubeWarning.style.display = 'none';
+                        includeYouTubeSettingWrapper.style.display = 'none';
+                        includeYouTubeSetting.checked = false;
+                    }

                    // Set the URL to the livestreaming dashboard
                    const broadcastButton = youtubeWarning.querySelector('#broadcast-dashboard-button');
@@ -83,7 +110,7 @@ async function GeneralCustom(data) {
                const childDivs = broadcastList.querySelectorAll(":scope > div");
                childDivs.forEach(childDiv => {
                    var result = data.broadcastList.find(obj => {
-                        return obj.id === childDiv.id
+                        return `id-${obj.id}` === childDiv.id;
                    })
                    if (result == null)
                        childDiv.remove();
@@ -93,17 +120,58 @@ async function GeneralCustom(data) {
    }
 }

+function YouTubeBroadcastStarted(data) {
+    if (!includeYouTubeSetting.checked)
+        return;
+
+    setTimeout(async () => {
+        await window.parent.sbClient.doAction(
+            action = {
+                id: sbActionUpdateStreamInfo
+            },
+            args = {
+                platform: 'youtube',
+                title: youtubeTitleOnBroadcastStart,
+                broadcastId: data.id
+            }
+        );
+    }, 1000);
+}
+
 async function FetchBroadcasts() {
    // Fetch from Streamer.bot
    const response = await window.parent.sbClient.doAction({ id: sbActionFetchBroadcasts});
    runningActionId = response.args.runningActionId;
 }

+async function FetchKickInfo() {
+    // Fetch from Streamer.bot
+    const broadcasterInfo = await window.parent.sbClient.getBroadcaster();
+    
+    if (broadcasterInfo.platforms.kick) {
+        const userLogin = broadcasterInfo.platforms.kick.broadcasterLogin;
+
+        let kickData = {
+            platform: 'kick',
+            id: 'kick',
+            streamUrl: `https://www.kick.com/${userLogin.replaceAll('_', '-')}`,
+            dashboardUrl: 'https://dashboard.kick.com/stream',
+            userLogin: userLogin
+        }
+        AddBroadcast(kickData);
+    }
+    else {
+        const kickBroadcastDiv = document.getElementById('id-kick');
+        if (kickBroadcastDiv)
+            kickBroadcastDiv.remove();
+    }
+}
+
 async function AddBroadcast(data) {
    // Get a reference to the template
    const template = document.getElementById('broadcast-template');

-    const existingDiv = broadcastList.querySelector(`#${data.id}`);
+    const existingDiv = broadcastList.querySelector(`#id-${data.id}`);

    // Create a new instance of the template
    let instance;
@@ -112,7 +180,7 @@ async function AddBroadcast(data) {
        instance = existingDiv;
    else {
        instance = template.content.firstElementChild.cloneNode(true);
-        instance.id = data.id;
+        instance.id = `id-${data.id}`;
        broadcastList.appendChild(instance);
    }

@@ -284,6 +352,18 @@ async function UpdateAllSubmit() {
        }
    );

+    // Set the YouTube title for next broadcast start
+    if (includeYouTubeSetting.checked)
+    {
+        youtubeTitleOnBroadcastStart = document.getElementById('all-title-input').value;
+        if (youtubeTitleOnBroadcastStart)
+            youtubeTitleOnBroadcastStartLabel.textContent = `Title will be set to '${youtubeTitleOnBroadcastStart}' when broadcast starts.`;
+    }
+    else {
+        youtubeTitleOnBroadcastStart = '';
+        youtubeTitleOnBroadcastStartLabel.textContent = '';
+    }
+
    CloseUpdateAllDialog();
 }

@@ -543,4 +623,4 @@ ValidateYouTubeDialog();
 // REFRESH BROADCAST LIST //
 ////////////////////////////

-setInterval(FetchBroadcasts, 5000);
+setInterval(FetchKickInfo, 5000);
@@ -69,6 +69,13 @@ button {
 	color: yellow;
 }

+.setting {
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	gap: 0.5em;
+}
+
 #kick-warning {
 	display: none;
 }
@@ -2,7 +2,7 @@
 <head>
    <meta charset="UTF-8">
 	<link rel="stylesheet" href="../.common/styles/global.css" />
-    <link rel="icon" href="../../.resources/logo.png" type="image/png">
+    <link rel="icon" href="../../.common/resources/logo.png" type="image/png">
    <title>nutty</title>
    <style>
        #dock-wrapper {
@@ -4,7 +4,7 @@
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="icon" href="../../.resources/logo.png" type="image/png">
+    <link rel="icon" href="../../.common/resources/logo.png" type="image/png">
    <title>nutty</title>
    <style>
        body {
@@ -1,6 +1,6 @@
 const widgetContainer = document.getElementById('widgetContainer');

-const settingsPageURL = '../../.utilities/settings-page-builder';
+const settingsPageURL = '../../.common/core/settings-core';

 const currentURL = window.location.href;

@@ -73,4 +73,5 @@
 	</div>
 </template>

+<script src="../../../.common/utils/helpers.js"></script>
 <script src="script.js"></script>
@@ -3,7 +3,6 @@
 //////////////////////

 const sbActionPrintRoutine = '5c756513-a1d0-4285-9dbc-21ad34491310';
-const avatarMap = new Map();



@@ -533,6 +532,25 @@ async function CustomEvent(data) {
                            SetPlatformIcon(iconEl, 'kick');
                        }
                        break;
+                    case ('kickKicksGifted'):
+                        {
+                            if (data.giftType != 'LEVEL_UP')
+                                return;
+
+                            avatarEl.src = ConvertWEBPToPNG(`https://files.kick.com/kicks/gifts/${data.gift.toLowerCase().replace(/ /g, "-")}.webp`);
+                            avatarEl.style.borderRadius = '0px';
+                            titleEl.innerText = `${data.amount} KICKS`;
+                            subtitleEl.innerText = `${data.sender}`;
+
+                            const messageEl = document.createElement('div');
+                            messageEl.innerHTML = data.message;
+
+                            contentEl.appendChild(messageEl);
+
+                            // Set the platform icon
+                            SetPlatformIcon(iconEl, 'kick');
+                        }
+                        break;
                }
            }
            break;
@@ -582,45 +600,6 @@ async function CustomEvent(data) {
 // HELPER FUNCTIONS //
 //////////////////////

-async function GetAvatar(username, platform) {
-
-    // First, check if the username is hashed already
-    if (avatarMap.has(`${username}-${platform}`)) {
-        console.debug(`Avatar found for ${username} (${platform}). Retrieving from hash map.`)
-        return avatarMap.get(`${username}-${platform}`);
-    }
-
-    // If code reaches this point, the username hasn't been hashed, so retrieve avatar
-    switch (platform) {
-        case 'twitch':
-            {
-                console.debug(`No avatar found for ${username} (${platform}). Retrieving from Decapi.`)
-                let response = await fetch('https://decapi.me/twitch/avatar/' + username);
-                let data = await response.text();
-                avatarMap.set(`${username}-${platform}`, data);
-                return data;
-            }
-        case 'kick':
-            {
-                console.debug(`No avatar found for ${username} (${platform}). Retrieving from Kick.`)
-                try {
-                    let response = await fetch('https://kick.com/api/v2/channels/' + username);
-                    console.log('https://kick.com/api/v2/channels/' + username)
-                    let data = await response.json();
-                    let avatarURL = data.user.profile_pic;
-                    if (!avatarURL)
-                        avatarURL = 'https://kick.com/img/default-profile-pictures/default2.jpeg';
-                    avatarMap.set(`${username}-${platform}`, avatarURL);
-                    return avatarURL;
-                }
-                catch (error) {
-                    console.debug(error);
-                    return 'https://kick.com/img/default-profile-pictures/default2.jpeg';
-                }
-            }
-    }
-}
-
 async function GetRenderedHTML(fragment) {
    if (!(fragment instanceof DocumentFragment)) {
        throw new Error('Argument must be a DocumentFragment');
@@ -746,6 +725,22 @@ let data = {
    "userType": "twitch"
 }

+// let data = {
+//     "__source": "CustomCodeEvent",
+//     "actionName": "Printer Bot | Events",
+//     "triggerCustomCodeEventName": "kickKicksGifted",
+//     "amount": 100,
+//     "message": "Eat my ass",
+//     "gift": "Flex",
+//     "giftType": "LEVEL_UP",
+//     "giftTier": "LEVEL_UP",
+//     "sender": "DJSUSAN00",
+//     "senderId": "170168",
+//     "senderColor": "#1475E1",
+//     "eventSource": "kick",
+//     "fromKick": true
+// }
+
 async function TestPrint() {
    CustomEvent(data);
 }
@@ -2,7 +2,7 @@
 <head>
    <meta charset="UTF-8">
 	<link rel="stylesheet" href="../.common/styles/global.css" />
-    <link rel="icon" href="../../.resources/logo.png" type="image/png">
+    <link rel="icon" href="../../.common/resources/logo.png" type="image/png">
    <title>nutty</title>
    <style>
        #dock-wrapper {
@@ -4,7 +4,7 @@
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="icon" href="../../.resources/logo.png" type="image/png">
+    <link rel="icon" href="../../.common/resources/logo.png" type="image/png">
    <title>nutty</title>
    <style>
        body {
@@ -1,6 +1,6 @@
 const widgetContainer = document.getElementById('widgetContainer');

-const settingsPageURL = '../../.utilities/settings-page-builder';
+const settingsPageURL = '../../.common/core/settings-core';

 const currentURL = window.location.href;

@@ -4,7 +4,7 @@
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="icon" href="../../.resources/logo.png" type="image/png">
+    <link rel="icon" href="../../.common/resources/logo.png" type="image/png">
    <title>nutty</title>
    <style>
        body {
@@ -1,6 +1,6 @@
 const widgetContainer = document.getElementById('widgetContainer');

-const settingsPageURL = '../../.utilities/settings-page-builder';
+const settingsPageURL = '../../.common/core/settings-core';

 const currentURL = window.location.href;

@@ -25,4 +25,5 @@
 	</div>
 </body>

+<script src="../.common/utils/helpers.js"></script>
 <script src="./script.js"></script>
@@ -160,8 +160,7 @@ function TwitchAdRun(data) {
 }

 function TwitchUpcomingAd(data) {
-	if (upcomingAdWarningStartDelay != null)
-	{
+	if (upcomingAdWarningStartDelay != null) {
 		console.debug('Countdown already started, skipping...');
 		return;
 	}
@@ -307,44 +306,6 @@ function UpcomingAdWarning(warningSeconds) {
 // HELPER FUNCTIONS //
 //////////////////////

-function GetBooleanParam(paramName, defaultValue) {
-	const urlParams = new URLSearchParams(window.location.search);
-	const paramValue = urlParams.get(paramName);
-
-	if (paramValue === null) {
-		return defaultValue; // Parameter not found
-	}
-
-	const lowercaseValue = paramValue.toLowerCase(); // Handle case-insensitivity
-
-	if (lowercaseValue === 'true') {
-		return true;
-	} else if (lowercaseValue === 'false') {
-		return false;
-	} else {
-		return paramValue; // Return original string if not 'true' or 'false'
-	}
-}
-
-function GetIntParam(paramName, defaultValue) {
-	const urlParams = new URLSearchParams(window.location.search);
-	const paramValue = urlParams.get(paramName);
-
-	if (paramValue === null) {
-		return defaultValue; // or undefined, or a default value, depending on your needs
-	}
-
-	console.log(paramValue);
-
-	const intValue = parseInt(paramValue, 10); // Parse as base 10 integer
-
-	if (isNaN(intValue)) {
-		return null; // or handle the error in another way, e.g., throw an error
-	}
-
-	return intValue;
-}
-
 String.prototype.toHHMMSS = function () {
 	var sec_num = parseInt(this, 10); // don't forget the second param
 	var hours = Math.floor(sec_num / 3600);
@@ -358,24 +319,20 @@ String.prototype.toHHMMSS = function () {
 	return minutes + ':' + seconds;
 }

-function IsNullOrWhitespace(str) {
-	return /^\s*$/.test(str);
-}
-
 function formatTime(seconds) {
-  seconds = Math.floor(seconds); // Round down to nearest whole second
+	seconds = Math.floor(seconds); // Round down to nearest whole second

-  if (seconds < 60) {
-    return `${seconds}`;
-  }
+	if (seconds < 60) {
+		return `${seconds}`;
+	}

-  const mins = Math.floor(seconds / 60);
-  const secs = seconds % 60;
+	const mins = Math.floor(seconds / 60);
+	const secs = seconds % 60;

-  // Pad seconds with a leading zero if less than 10
-  const paddedSecs = secs.toString().padStart(2, '0');
+	// Pad seconds with a leading zero if less than 10
+	const paddedSecs = secs.toString().padStart(2, '0');

-  return `${mins}:${paddedSecs}`;
+	return `${mins}:${paddedSecs}`;
 }

 ////////////////////
@@ -4,7 +4,7 @@
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="icon" href="../../.resources/logo.png" type="image/png">
+    <link rel="icon" href="../../.common/resources/logo.png" type="image/png">
    <title>nutty</title>
    <style>
        body {
@@ -1,6 +1,6 @@
 const widgetContainer = document.getElementById('widgetContainer');

-const settingsPageURL = '../../.utilities/settings-page-builder';
+const settingsPageURL = '../../.common/core/settings-core';

 const currentURL = window.location.href;

@@ -4,7 +4,7 @@
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="icon" href="../../.resources/logo.png" type="image/png">
+    <link rel="icon" href="../../.common/resources/logo.png" type="image/png">
    <title>nutty</title>
    <style>
        body {
@@ -1,6 +1,6 @@
 const widgetContainer = document.getElementById('widgetContainer');

-const settingsPageURL = '../../.utilities/settings-page-builder';
+const settingsPageURL = '../../.common/core/settings-core';

 const currentURL = window.location.href;