Smartcraft-Media-Tech/nutty-tools
1
0
Fork 0
mirror of https://github.com/nuttylmao/nutty.gg.git synced 2026-09-18 19:50:58 -04:00
Code Issues Packages Projects Releases Wiki Activity

Fixed up some of the slide animations

Browse Source
This commit is contained in:
nuttylmao
2025-03-30 22:29:01 +11:00
parent 0703d47985
commit 2bdb3805c3
6 changed files with 31 additions and 148 deletions
Download Patch File Download Diff File Expand all files Collapse all files
horizontal-chat/index.html
+2 -2
View File
@@ -14,8 +14,8 @@
</ul>
<div id="alertBox"></div>
<div id="background"></div>
<div id="IPutThisHereSoICanCalculateHowBigEachMessageIsSupposedToBeBeforeIAddItToTheMessageList">
</div>
<ul id="IPutThisHereSoICanCalculateHowBigEachMessageIsSupposedToBeBeforeIAddItToTheMessageList">
</ul>
</div>
</div>
horizontal-chat/script.js
+6 -8
View File
@@ -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)
{
horizontal-chat/style.css
+8 -2
View File
@@ -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;
multichat-overlay/index.html
+2 -2
View File
@@ -12,8 +12,8 @@
<div id="mainContainer" class="slide-fade">
<ul id="messageList">
</ul>
<div id="IPutThisHereSoICanCalculateHowBigEachMessageIsSupposedToBeBeforeIAddItToTheMessageList">
</div>
<ul id="IPutThisHereSoICanCalculateHowBigEachMessageIsSupposedToBeBeforeIAddItToTheMessageList">
</ul>
</div>
</div>
multichat-overlay/script.js
+7 -132
View File
@@ -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));
}
multichat-overlay/style.css
+6 -2
View File
@@ -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;
}