From e2a54c894ff2a9e92c756f6576f6d39f92c19906 Mon Sep 17 00:00:00 2001 From: nuttylmao Date: Thu, 10 Jul 2025 08:42:10 +1000 Subject: [PATCH] Added new Chat Bubbles option --- multichat-overlay/script.js | 92 +++++++++++++----------- multichat-overlay/settings/settings.json | 31 +++++++- multichat-overlay/style.css | 5 +- 3 files changed, 82 insertions(+), 46 deletions(-) diff --git a/multichat-overlay/script.js b/multichat-overlay/script.js index 2b607db..859c983 100644 --- a/multichat-overlay/script.js +++ b/multichat-overlay/script.js @@ -24,6 +24,9 @@ const showMessage = GetBooleanParam("showMessage", true); const font = urlParams.get("font") || ""; const fontSize = urlParams.get("fontSize") || "30"; const lineSpacing = urlParams.get("lineSpacing") || "1.7"; +const useChatBubbles = GetBooleanParam("useChatBubbles", false); +const bubbleColor = urlParams.get("bubbleColor") || "#000000"; +const bubbleOpacity = urlParams.get("bubbleOpacity") || "0.9"; const background = urlParams.get("background") || "#000000"; const opacity = urlParams.get("opacity") || "0"; @@ -423,7 +426,17 @@ async function TwitchChatMessage(data) { const usernameDiv = instance.querySelector("#username"); const messageDiv = instance.querySelector("#message"); - // messageContainerDiv.classList.add("bubble"); + // Render bubbles + if (useChatBubbles) + { + const opacity255 = Math.round(parseFloat(bubbleOpacity) * 255); + let hexOpacity = opacity255.toString(16); + if (hexOpacity.length < 2) { + hexOpacity = "0" + hexOpacity; + } + document.documentElement.style.setProperty('--bubble-color', `${bubbleColor}${hexOpacity}`); + messageContainerDiv.classList.add("bubble"); + } // Set First Time Chatter const firstMessage = data.message.firstMessage; @@ -1096,7 +1109,17 @@ function YouTubeMessage(data) { const usernameDiv = instance.querySelector("#username"); const messageDiv = instance.querySelector("#message"); - // messageContainerDiv.classList.add("bubble"); + // Render bubbles + if (useChatBubbles) + { + const opacity255 = Math.round(parseFloat(bubbleOpacity) * 255); + let hexOpacity = opacity255.toString(16); + if (hexOpacity.length < 2) { + hexOpacity = "0" + hexOpacity; + } + document.documentElement.style.setProperty('--bubble-color', `${bubbleColor}${hexOpacity}`); + messageContainerDiv.classList.add("bubble"); + } // Set timestamp if (showTimestamps) { @@ -1974,7 +1997,17 @@ async function KickChatMessage(data) { const usernameDiv = instance.querySelector("#username"); const messageDiv = instance.querySelector("#message"); - // messageContainerDiv.classList.add("bubble"); + // Render bubbles + if (useChatBubbles) + { + const opacity255 = Math.round(parseFloat(bubbleOpacity) * 255); + let hexOpacity = opacity255.toString(16); + if (hexOpacity.length < 2) { + hexOpacity = "0" + hexOpacity; + } + document.documentElement.style.setProperty('--bubble-color', `${bubbleColor}${hexOpacity}`); + messageContainerDiv.classList.add("bubble"); + } // Set First Time Chatter const firstMessage = data.firstMessage; @@ -2444,6 +2477,18 @@ function TikTokChat(data) { const pronounsDiv = instance.querySelector("#pronouns"); const usernameDiv = instance.querySelector("#username"); const messageDiv = instance.querySelector("#message"); + + // Render bubbles + if (useChatBubbles) + { + const opacity255 = Math.round(parseFloat(bubbleOpacity) * 255); + let hexOpacity = opacity255.toString(16); + if (hexOpacity.length < 2) { + hexOpacity = "0" + hexOpacity; + } + document.documentElement.style.setProperty('--bubble-color', `${bubbleColor}${hexOpacity}`); + messageContainerDiv.classList.add("bubble"); + } // Set timestamp if (showTimestamps) { @@ -2927,43 +2972,4 @@ function SetConnectionStatus(connected) { statusContainer.style.transition = ""; statusContainer.style.opacity = 1; } -} - -let data = { - "isTest": false, - "createdAt": "2025-07-09T20:08:00.285111Z", - "updatedAt": "2025-07-09T20:08:02.875157Z", - "orderId": "cf346240-4aec-4180-a934-c537da606d1d", - "shopId": "sh_52bd3cd7-9d2a-411f-a39d-b5f495d94b56", - "friendly": "C3A21GSN", - "checkoutId": "ch_OorLt1nmQSuaJ-7cuw4gpw", - "status": "DELIVERED", - "email": "soyyahirda@gmail.com", - "emailMarketingOptIn": true, - "statmessageus": "", - "currency": "USD", - "subtotal": 0, - "shipping": 0, - "tax": 0, - "donation": 0, - "discount": 0, - "total": 0, - "variants": [ - { - "id": "3615db93-4ee6-4e74-95da-423f6d269c5e", - "name": "Multichat Overlay", - "sku": "E6V8-M370000", - "image": "https://imgproxy.fourthwall.com/c8hzt6dcz8oRydfWZefs6SIE7XaHLb3nxdh2ffZx2MU/sm:1/enc/_E4zXgCjbueqrWEM/vAI0dpdr2NXEdZIv/hVgptGguJAG4x4v8/yqjRDCUeVomnpIvo/hhfJImiPC0CPAr4X/8185Z_nufxplf3mf/n9dRJ9OKofWADudx/e1PHg35vHZFqM1Fz/2-Bv0zKfGD44YSub/jVxvQNIZcEnEoXg2/YaudjZoENaKjwiaa/tzRZd55HVsXDx46P/838PRG1uTkIzmlej/zVnr_g", - "unitPrice": 0, - "currencyCode": "USD", - "quantity": 1, - "attributes": { - "description": "" - }, - "stock": 0 - } - ], - "source": "ORDER" - } - - FourthwallOrderPlaced(data); \ No newline at end of file +} \ No newline at end of file diff --git a/multichat-overlay/settings/settings.json b/multichat-overlay/settings/settings.json index e117758..31f8a69 100644 --- a/multichat-overlay/settings/settings.json +++ b/multichat-overlay/settings/settings.json @@ -84,6 +84,35 @@ "step": ".1", "group": "Appearance" }, + { + "id": "useChatBubbles", + "label": "Chat Bubbles", + "description": "", + "type": "checkbox", + "defaultValue": false, + "group": "Appearance" + }, + { + "id": "bubbleColor", + "label": "Bubble Color", + "description": "", + "type": "color", + "defaultValue": "#1d1d1d", + "showIf": "useChatBubbles", + "group": "Appearance" + }, + { + "id": "bubbleOpacity", + "label": "Bubble Opacity", + "description": "", + "type": "number", + "defaultValue": "0.90", + "min": 0, + "max": 1, + "step": ".01", + "showIf": "useChatBubbles", + "group": "Appearance" + }, { "id": "background", "label": "Background", @@ -97,7 +126,7 @@ "label": "Background Opacity", "description": "", "type": "number", - "defaultValue": "0.00", + "defaultValue": "00", "min": 0, "max": 1, "step": ".01", diff --git a/multichat-overlay/style.css b/multichat-overlay/style.css index 0a99972..fc7fc7f 100644 --- a/multichat-overlay/style.css +++ b/multichat-overlay/style.css @@ -94,14 +94,15 @@ li { } .bubble { - background: #000000bf !important; + background: var(--bubble-color) !important; padding: 0.5em 1em; border-radius: var(--border-radius); } .highlightMessage { /* background: #adadad46 !important; */ - background: #414141bf !important; + background: #414141e5 !important; + box-shadow: inset 0 0 0 0.1em rgb(94, 94, 94); padding: 0.5em 1em; border-radius: var(--border-radius); }