twitch-chat/static/main.js

const timeout = 120000;

class Message {
    constructor(object, onDestroy) {
        this.target = object.target;
        this.context = object.context;
        this.message = object.message;
        this.self = object.self;
    }

    createEl() {
        this.element = document.createElement('li');
        this.element.className = "item";
        this.element.style.position = "relative";

        let badges = document.createElement('span');
        for (let key in this.context.badges) {
            let badge = document.createElement('span');
            badge.className = "badge";
            badge.innerHTML = '<img src="/static/' + key + '.png">';
            badges.appendChild(badge);
        }
        this.element.appendChild(badges);

        let name = document.createElement('span');
        name.className = "text name";
        name.style.color = this.context.color;
        name.innerHTML = escapeHtml(this.context["display-name"]);
        this.element.appendChild(name);

        let message = document.createElement('span');
        let text = escapeHtml(this.message);
        for (let key in emotes) {
            text = replaceAll(text, escapeHtml(key), '<img src="' + emotes[key].url + '">');;
        }
        message.innerHTML = text;
        message.className = "text message";
        this.element.appendChild(message);

        setTimeout(() => this.destroy(), timeout);
        return this.element;
    }

    destroy() {
        this.element.className += ' destroy';
    }
}

function escapeHtml(unsafe) {
    return unsafe
        .replace(/&/g, "&amp;")
        .replace(/</g, "&lt;")
        .replace(/>/g, "&gt;")
        .replace(/"/g, "&quot;")
        .replace(/'/g, "&#039;");
}

function replaceAll(input, from, to) {
    const fromLen = from.length;
    let output = "";
    let pos = 0;
    for (;;) {
        let matchPos = input.indexOf(from, pos);
        if (matchPos === -1) {
            output += input.slice(pos);
            break;
        }
        output += input.slice(pos, matchPos);
        output += to;
        pos = matchPos + fromLen;
    }
    return output;
}

function addMessage(object) {
    messages .className = "";
    let message = new Message(object);
    messages.appendChild(message.createEl());
    messages.style.bottom = '-' + message.element.offsetHeight + 'px';
    messages.className = "slide";
};

let messages = document.getElementById('messages');
let emotes = {};
let socket = io();
socket.on('message', addMessage);

let xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
        emotes = JSON.parse(xhr.responseText);
    }
}

xhr.open('GET', '/static/emotes.json', true);
xhr.send();