initial commit of v1
This commit is contained in:
@@ -0,0 +1,3 @@
|
|||||||
|
{
|
||||||
|
"channel": "siskeldev"
|
||||||
|
}
|
||||||
+14
@@ -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;
|
||||||
|
}
|
||||||
Vendored
+1
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user