initial commit of v1

script.js

@@ -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);
+});