initial commit of v1

2025-05-20 12:23:38 +02:00
parent aeb884a786
commit 5f9ec4c03e
6 changed files with 207 additions and 0 deletions
@@ -0,0 +1,3 @@
+{
+    "channel": "siskeldev"
+}
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <link rel="stylesheet" href="style.css">
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Custom Twitch Chat</title>
+</head>
+<body>
+    <div id="chatbox"></div>
+    <script src="tmi.min.js"></script>
+    <script src="script.js"></script>
+</body>
+</html>
@@ -0,0 +1,111 @@
+function scrollToBottom() {
+    window.scrollTo(0, document.body.scrollHeight);
+}
+
+document.addEventListener('DOMSubtreeModified', function() {
+    scrollToBottom();
+}, false);
+
+var msgid = 0;
+
+function replaceEmojis(message, tags) {
+    var emotesToReplace = [];
+    var messageString = message;
+
+    if (tags["emotes"] != undefined) {
+        const tagsEmotesArray = Object.entries(tags["emotes"]);
+    
+        tagsEmotesArray.forEach(element => {
+            const emoteURLString = element[0];
+            emoteCoords = element[1][0];
+            let parts = emoteCoords.split("-");
+            var emoteString = message.substring(parts[0], Number(parts[1]) + 1);
+
+            // emote string has the twitch emote content
+            // emoteURLstring has the twitch emote url part
+
+            var emote = [emoteString, emoteURLString];
+
+            emotesToReplace.push(emote);
+        });
+
+        emotesToReplace.forEach(element => {
+            while (messageString.includes(element[0])) {
+                messageString = messageString.replace(element[0], "<img src=\"https://static-cdn.jtvnw.net/emoticons/v2/" + element[1] + "/default/dark/1.0\">");
+            }
+        });
+    }
+
+    return messageString;
+}
+
+const client = new tmi.Client({
+	channels: [ 'siskeldev' ]
+});
+
+client.connect();
+
+client.on('message', (channel, tags, message, self) => {
+    // ignore messages that came from these accounts
+    if (
+        tags["username"] == "streamelements" ||
+        tags["username"] == "nightbot" ||
+        tags["username"] == "siskeldevbot"
+    ) return;
+
+    // ignore if the first letter is a exclamation mark
+    if (
+        message.charAt(0) == '!'
+    ) return;
+
+
+    var chatBox = document.getElementById('chatbox');
+
+    var isModerator = tags['mod'] == '1' ? true : false;
+    var isSubscriber = tags['subscriber'] == '1'? true : false;
+    var isSubscriber = tags['subscriber'] == '1'? true : false;
+
+    var messageConainer = document.createElement('div');
+    var username = document.createElement('span');
+    var messageText = document.createElement('span');
+
+    messageConainer.className = 'message-fadein';
+    messageConainer.id = msgid;
+    
+
+    username.innerHTML = tags['display-name'];
+    username.className = 'username';
+    username.style.color = tags['color'];
+
+    messageText.className ='message';
+    messageText.innerHTML = replaceEmojis(message, tags);
+
+    messageConainer.appendChild(username);
+    messageConainer.appendChild(messageText);
+
+    chatBox.appendChild(messageConainer);
+    chatBox.appendChild(document.createElement('br'));
+
+    document.getElementById(msgid).classList.add('message-container');
+    
+    setTimeout(function() {
+        document.getElementById(msgid).classList.remove('message-fadein');
+    }, 1000, msgid);
+
+    setTimeout(function(msgid) {
+        console.log(msgid);
+        document.getElementById(msgid).classList.add('message-fadeout');
+        setTimeout(function(msgid) {
+            document.getElementById(msgid).remove();
+        }, 1000, msgid);
+    }, 10000, msgid);
+
+    msgid++;
+
+    //debug
+
+	console.log(`${tags['display-name']}: ${message}`);
+
+    console.log("tags:");
+    console.log(tags);
+});
@@ -0,0 +1,73 @@
+html, body {
+    margin: 0;
+    height: 100%;
+    font-family: 'Courier New', Courier, monospace;
+    width: 100%;
+    max-width: 100%;
+}
+
+.username {
+    font-size: 20px;
+    margin-right: 10px;
+}
+
+.message {
+    text-decoration: none !important;
+    font-size: 15px;
+    word-wrap: break-word;
+}
+
+.message-fadein {
+    margin-top: 20px;
+    background-color: rgba(0, 0, 0, 0.5);
+    display: inline-block;
+    align-self: flex-end;
+    opacity: 0;
+    transition: 1s;
+
+    place-self: baseline;
+    
+    max-width: 100%;
+
+    height: 0px;
+    max-height: 0px;
+    overflow: hidden;
+}
+
+.message-container {
+    margin-top: 20px;
+    background-color: rgba(0, 0, 0, 0.5);
+    color: white;
+    display: inline-block;
+    align-self: flex-end;
+    opacity: 1;
+    transition: 1s;
+
+    height: unset;
+    max-height: unset;
+    overflow: hidden;
+
+    place-self: baseline;
+
+    max-width: 100%;
+}
+
+.message-fadeout {
+    opacity: 0 !important;
+    transition: 1s !important;
+}
+
+#chatbox {
+    height: 100%;
+    align-content: end;
+    vertical-align: bottom;
+    display: flex;
+    
+    justify-content: end;
+    flex-wrap: nowrap;
+    flex-direction: column;
+}
+
+badge {
+    margin-right: 10px;
+}
@@ -0,0 +1,5 @@
+adding shoutout own message
+
+adding skins to the users
+
+adding transition that the chat is going up with an animation