diff --git a/horizontal-chat/index.html b/horizontal-chat/index.html
index 12121ad..9d87171 100644
--- a/horizontal-chat/index.html
+++ b/horizontal-chat/index.html
@@ -14,8 +14,8 @@
-
-
+
diff --git a/horizontal-chat/script.js b/horizontal-chat/script.js
index 8d9218d..f4c4590 100644
--- a/horizontal-chat/script.js
+++ b/horizontal-chat/script.js
@@ -1061,11 +1061,13 @@ async function GetPronouns(platform, username) {
function AddMessageItem(element, elementID, platform, userId) {
// Calculate the height of the div before inserting
const tempDiv = document.getElementById('IPutThisHereSoICanCalculateHowBigEachMessageIsSupposedToBeBeforeIAddItToTheMessageList');
- tempDiv.appendChild(element);
+ const tempDivTwoElectricBoogaloo = document.createElement('div');
+ tempDivTwoElectricBoogaloo.style.display = 'inline';
+ tempDivTwoElectricBoogaloo.appendChild(element);
+ tempDiv.appendChild(tempDivTwoElectricBoogaloo);
setTimeout(function () {
- const calculatedWidth = tempDiv.offsetWidth + "px";
- //console.log(calculatedWidth);
+ const calculatedWidth = tempDivTwoElectricBoogaloo.offsetWidth + "px";
// Create a new line item to add to the message list later
var lineItem = document.createElement('li');
@@ -1074,9 +1076,7 @@ function AddMessageItem(element, elementID, platform, userId) {
lineItem.dataset.userId = userId;
// Move the element from the temp div to the new line item
- while (tempDiv.firstChild) {
- lineItem.appendChild(tempDiv.firstChild);
- }
+ lineItem.appendChild(tempDiv.firstElementChild);
// Add the line item to the list and animate it
// We need to manually set the height as straight CSS can't animate on "height: auto"
@@ -1090,8 +1090,6 @@ function AddMessageItem(element, elementID, platform, userId) {
while (messageList.clientWidth > 10 * window.innerWidth) {
messageList.removeChild(messageList.firstChild);
}
-
- tempDiv.innerHTML = '';
if (hideAfter > 0)
{
diff --git a/horizontal-chat/style.css b/horizontal-chat/style.css
index 812921d..747c458 100644
--- a/horizontal-chat/style.css
+++ b/horizontal-chat/style.css
@@ -5,6 +5,10 @@
--border-radius: 20px;
}
+body {
+ overflow: hidden;
+}
+
html {
width: 100vw;
height: 100vh;
@@ -57,7 +61,7 @@ html {
transform: translateX(50%);
overflow: hidden;
white-space: nowrap;
-
+
font-weight: 700;
line-height: 1.7em;
width: 100%;
@@ -80,6 +84,7 @@ html {
0% {
bottom: calc(-1 * var(--margin) - 1.7em);
}
+
100% {
bottom: 0px;
}
@@ -89,6 +94,7 @@ html {
0% {
bottom: 0px;
}
+
100% {
bottom: calc(-1 * var(--margin) - 1.7em);
}
@@ -111,7 +117,7 @@ li {
}
#IPutThisHereSoICanCalculateHowBigEachMessageIsSupposedToBeBeforeIAddItToTheMessageList {
- /* margin-top: 10px; */
+ /* margin-top: 10px; */
background: #2FB774;
display: inline;
opacity: 0;
diff --git a/multichat-overlay/index.html b/multichat-overlay/index.html
index 75c8c38..568e076 100644
--- a/multichat-overlay/index.html
+++ b/multichat-overlay/index.html
@@ -12,8 +12,8 @@
diff --git a/multichat-overlay/script.js b/multichat-overlay/script.js
index ab1d8e0..b217b36 100644
--- a/multichat-overlay/script.js
+++ b/multichat-overlay/script.js
@@ -1786,10 +1786,12 @@ function IsImageUrl(url) {
function AddMessageItem(element, elementID, platform, userId) {
// Calculate the height of the div before inserting
const tempDiv = document.getElementById('IPutThisHereSoICanCalculateHowBigEachMessageIsSupposedToBeBeforeIAddItToTheMessageList');
- tempDiv.appendChild(element);
+ const tempDivTwoElectricBoogaloo = document.createElement('div');
+ tempDivTwoElectricBoogaloo.appendChild(element);
+ tempDiv.appendChild(tempDivTwoElectricBoogaloo);
setTimeout(function () {
- const calculatedHeight = tempDiv.clientHeight + "px";
+ const calculatedHeight = tempDivTwoElectricBoogaloo.offsetHeight + "px";
// Create a new line item to add to the message list later
var lineItem = document.createElement('li');
@@ -1802,9 +1804,7 @@ function AddMessageItem(element, elementID, platform, userId) {
lineItem.classList.add('reverseLineItemDirection');
// Move the element from the temp div to the new line item
- while (tempDiv.firstChild) {
- lineItem.appendChild(tempDiv.firstChild);
- }
+ lineItem.appendChild(tempDiv.firstElementChild);
// Add the line item to the list and animate it
// We need to manually set the height as straight CSS can't animate on "height: auto"
@@ -1819,8 +1819,6 @@ function AddMessageItem(element, elementID, platform, userId) {
messageList.removeChild(messageList.firstChild);
}
- tempDiv.innerHTML = '';
-
if (hideAfter > 0) {
setTimeout(function () {
lineItem.style.opacity = 0;
@@ -1830,7 +1828,7 @@ function AddMessageItem(element, elementID, platform, userId) {
}, hideAfter * 1000);
}
- }, 100);
+ }, 200);
}
function DecodeHTMLString(html) {
@@ -1985,127 +1983,4 @@ function SetConnectionStatus(connected) {
statusContainer.style.transition = "";
statusContainer.style.opacity = 1;
}
-}
-
-// let data = `{
-// "bits": 1,
-// "cheerEmotes": [
-// {
-// "bits": 1,
-// "color": "#979797",
-// "type": "CheerEmote",
-// "name": "Cheer",
-// "startIndex": 0,
-// "endIndex": 5,
-// "imageUrl": "https://d3aqoihi2n8ty8.cloudfront.net/actions/cheer/dark/animated/1/4.gif"
-// }
-// ],
-// "message": {
-// "internal": false,
-// "msgId": "ac304b97-35fd-4623-9ab3-2e68f24e770a",
-// "userId": "24586202",
-// "username": "cookievscookie",
-// "role": 1,
-// "subscriber": true,
-// "subscriptionTier": "1000",
-// "displayName": "CookieVsCookie",
-// "color": "#DEC27A",
-// "channel": "nutty",
-// "message": "Cheer1 wasting all of my money 1 bit at time",
-// "isHighlighted": false,
-// "isMe": false,
-// "isCustomReward": false,
-// "isAnonymous": false,
-// "isReply": false,
-// "bits": 1,
-// "firstMessage": false,
-// "returningChatter": false,
-// "hasBits": true,
-// "emotes": [],
-// "cheerEmotes": [
-// {
-// "bits": 1,
-// "color": "#979797",
-// "type": "CheerEmote",
-// "name": "Cheer",
-// "startIndex": 0,
-// "endIndex": 5,
-// "imageUrl": "https://d3aqoihi2n8ty8.cloudfront.net/actions/cheer/dark/animated/1/4.gif"
-// }
-// ],
-// "badges": [
-// {
-// "name": "subscriber",
-// "version": "3",
-// "imageUrl": "https://static-cdn.jtvnw.net/badges/v1/c2d0acb4-a706-43a1-9d2b-0458cde2ba93/3",
-// "info": "4"
-// },
-// {
-// "name": "share-the-love",
-// "version": "1",
-// "imageUrl": "https://static-cdn.jtvnw.net/badges/v1/2de71f4f-b152-4308-a426-127a4cf8003a/3",
-// "info": ""
-// }
-// ],
-// "monthsSubscribed": 4,
-// "isTest": false,
-// "sharedChat": false,
-// "sourceBadges": []
-// },
-// "user": {
-// "role": 1,
-// "badges": [
-// {
-// "name": "subscriber",
-// "version": "3",
-// "imageUrl": "https://static-cdn.jtvnw.net/badges/v1/c2d0acb4-a706-43a1-9d2b-0458cde2ba93/3",
-// "info": "4"
-// },
-// {
-// "name": "share-the-love",
-// "version": "1",
-// "imageUrl": "https://static-cdn.jtvnw.net/badges/v1/2de71f4f-b152-4308-a426-127a4cf8003a/3",
-// "info": ""
-// }
-// ],
-// "color": "#DEC27A",
-// "subscribed": true,
-// "subscriptionTier": "1000",
-// "monthsSubscribed": 4,
-// "id": "24586202",
-// "login": "cookievscookie",
-// "name": "CookieVsCookie",
-// "type": "twitch"
-// },
-// "messageId": "ac304b97-35fd-4623-9ab3-2e68f24e770a",
-// "meta": {
-// "internal": false,
-// "firstMessage": false,
-// "returningChatter": false,
-// "isHighlighted": false,
-// "isMe": false,
-// "isCustomReward": false,
-// "isTest": false
-// },
-// "anonymous": false,
-// "text": "Cheer1 wasting all of my money 1 bit at time",
-// "emotes": [],
-// "parts": [
-// {
-// "bits": 1,
-// "color": "#979797",
-// "imageUrl": "https://d3aqoihi2n8ty8.cloudfront.net/actions/cheer/dark/animated/1/4.gif",
-// "type": "cheer",
-// "text": "Cheer"
-// },
-// {
-// "type": "text",
-// "text": " wasting all of my money 1 bit at time"
-// }
-// ],
-// "isReply": false,
-// "isSharedChat": false,
-// "isTest": false
-// }`;
-
-// TwitchChatMessage(JSON.parse(data));
\ No newline at end of file
+}
\ No newline at end of file
diff --git a/multichat-overlay/style.css b/multichat-overlay/style.css
index 6a376ba..0a7b81a 100644
--- a/multichat-overlay/style.css
+++ b/multichat-overlay/style.css
@@ -6,6 +6,10 @@
/* --line-spacing: 1.7em; */
}
+body {
+ overflow: hidden;
+}
+
html {
width: 100vw;
height: 100vh;
@@ -58,9 +62,10 @@ li {
list-style: none;
overflow: hidden;
height: 0;
- margin-top: 10px;
+ margin: 10px 0px 0px 0px;
transition: all 1s ease-in-out;
}
+
.reverseLineItemDirection {
display: flex;
flex-direction: column;
@@ -77,7 +82,6 @@ li {
}
#IPutThisHereSoICanCalculateHowBigEachMessageIsSupposedToBeBeforeIAddItToTheMessageList {
- margin-top: 10px;
opacity: 0;
}