initial commit of v1

config.json

@@ -0,0 +1,3 @@
+{
+    "channel": "siskeldev"
+}

index.html

@@ -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>

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

style.css

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

tmi.min.js

@@ -0,0 +1 @@
+!function s(o,i,r){function a(t,e){if(!i[t]){if(!o[t]){var n="function"==typeof require&&require;if(!e&&n)return n(t,!0);if(c)return c(t,!0);throw(n=new Error("Cannot find module '"+t+"'")).code="MODULE_NOT_FOUND",n}n=i[t]={exports:{}},o[t][0].call(n.exports,function(e){return a(o[t][1][e]||e)},n,n.exports,s,o,i,r)}return i[t].exports}for(var c="function"==typeof require&&require,e=0;e<r.length;e++)a(r[e]);return a}({1:[function(e,t,n){"use strict";e=e("./lib/client");t.exports={client:e,Client:e}},{"./lib/client":3}],2:[function(e,t,n){"use strict";function i(t,e){var n,s=Object.keys(t);return Object.getOwnPropertySymbols&&(n=Object.getOwnPropertySymbols(t),e&&(n=n.filter(function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable})),s.push.apply(s,n)),s}function u(s){for(var e=1;e<arguments.length;e++){var o=null!=arguments[e]?arguments[e]:{};e%2?i(Object(o),!0).forEach(function(e){var t,n;t=s,e=o[n=e],n in t?Object.defineProperty(t,n,{value:e,enumerable:!0,configurable:!0,writable:!0}):t[n]=e}):Object.getOwnPropertyDescriptors?Object.defineProperties(s,Object.getOwnPropertyDescriptors(o)):i(Object(o)).forEach(function(e){Object.defineProperty(s,e,Object.getOwnPropertyDescriptor(o,e))})}return s}var l=e("node-fetch"),m=e("./utils");t.exports=function(e,t){var n=void 0!==e.url?e.url:e.uri;if(m.isURL(n)||(n="https://api.twitch.tv/kraken".concat("/"===n[0]?n:"/".concat(n))),m.isNode()){var s=Object.assign({method:"GET",json:!0},e);s.qs&&(o=new URLSearchParams(s.qs),n+="?".concat(o));var o={};"fetchAgent"in this.opts.connection&&(o.agent=this.opts.connection.fetchAgent);var o=l(n,u(u({},o),{},{method:s.method,headers:s.headers,body:s.body})),i={};o.then(function(e){return i={statusCode:e.status,headers:e.headers},s.json?e.json():e.text()}).then(function(e){return t(null,i,e)},function(e){return t(e,i,null)})}else{var r,a=Object.assign({method:"GET",headers:{}},e,{url:n}),c=new XMLHttpRequest;for(r in c.open(a.method,a.url,!0),a.headers)c.setRequestHeader(r,a.headers[r]);c.responseType="json",c.addEventListener("load",function(e){4===c.readyState&&(200!==c.status?t(c.status,null,null):t(null,null,c.response))}),c.send()}}},{"./utils":9,"node-fetch":10}],3:[function(p,d,e){!function(f){!function(){"use strict";function t(t,e){var n,s=Object.keys(t);return Object.getOwnPropertySymbols&&(n=Object.getOwnPropertySymbols(t),e&&(n=n.filter(function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable})),s.push.apply(s,n)),s}function i(s){for(var e=1;e<arguments.length;e++){var o=null!=arguments[e]?arguments[e]:{};e%2?t(Object(o),!0).forEach(function(e){var t,n;t=s,e=o[n=e],n in t?Object.defineProperty(t,n,{value:e,enumerable:!0,configurable:!0,writable:!0}):t[n]=e}):Object.getOwnPropertyDescriptors?Object.defineProperties(s,Object.getOwnPropertyDescriptors(o)):t(Object(o)).forEach(function(e){Object.defineProperty(s,e,Object.getOwnPropertyDescriptor(o,e))})}return s}function H(e){return function(e){if(Array.isArray(e))return s(e)}(e)||function(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}(e)||function(e,t){if(e){if("string"==typeof e)return s(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);return"Map"===(n="Object"===n&&e.constructor?e.constructor.name:n)||"Set"===n?Array.from(e):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?s(e,t):void 0}}(e)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function s(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,s=new Array(t);n<t;n++)s[n]=e[n];return s}function n(e){if(this instanceof n==!1)return new n(e);this.opts=V.get(e,{}),this.opts.channels=this.opts.channels||[],this.opts.connection=this.opts.connection||{},this.opts.identity=this.opts.identity||{},this.opts.options=this.opts.options||{},this.clientId=V.get(this.opts.options.clientId,null),this._globalDefaultChannel=V.channel(V.get(this.opts.options.globalDefaultChannel,"#tmijs")),this._skipMembership=V.get(this.opts.options.skipMembership,!1),this._skipUpdatingEmotesets=V.get(this.opts.options.skipUpdatingEmotesets,!1),this._updateEmotesetsTimer=null,this._updateEmotesetsTimerDelay=V.get(this.opts.options.updateEmotesetsTimer,6e4),this.maxReconnectAttempts=V.get(this.opts.connection.maxReconnectAttempts,1/0),this.maxReconnectInterval=V.get(this.opts.connection.maxReconnectInterval,3e4),this.reconnect=V.get(this.opts.connection.reconnect,!0),this.reconnectDecay=V.get(this.opts.connection.reconnectDecay,1.5),this.reconnectInterval=V.get(this.opts.connection.reconnectInterval,1e3),this.reconnecting=!1,this.reconnections=0,this.reconnectTimer=this.reconnectInterval,this.secure=V.get(this.opts.connection.secure,!this.opts.connection.server&&!this.opts.connection.port),this.emotes="",this.emotesets={},this.channels=[],this.currentLatency=0,this.globaluserstate={},this.lastJoined="",this.latency=new DatLine truncated

todo

@@ -0,0 +1,5 @@
+adding shoutout own message
+
+adding skins to the users
+
+adding transition that the chat is going up with an animation