111 lines
3.1 KiB
JavaScript
111 lines
3.1 KiB
JavaScript
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);
|
|
}); |