reallife-gamemode/ReallifeGamemode.Client/assets/js/chat/main.js

let chat =
{
    size: 0,
    history_limit: 150,
    container: null,
    input: null,
    enabled: false,
    active: true,
    historyMsgs: [],
    currentIndex: 0
};

const MAX_MSG_HISTORY = 12;

function enableChatInput(enable) {
    if (chat.active == false
        && enable == true)
        return;

    if (enable != (chat.input != null)) {
        mp.invoke("focus", enable);

        if (enable) {
            chat.input = $("#chat").append('<div><input id="chat_msg" type="text" maxlength="375" /></div>').children(":last");
            chat.input.children("input").focus();
        } else {
            chat.input.fadeOut('fast', function () {
                chat.input.remove();
                chat.input = null;
            });
        }
    }
}

var chatAPI =
{
    push: (text) => {
        let colorPositions = [];
        let colors = [];
        let chatElement = "<li>";

        for (let i = 0; i < text.length; i++) {
            let colorCheck = `${text[i]}${text[i + 1]}${text[i + 2]}`;

            if (colorCheck === "!{#") {
                colorPositions.push(i);
            }
        }

        colorPositions.forEach(el => {
            let sub = text.slice(el, -1);
            colors.push(sub.slice(3, 9));
        });

        colorPositions.forEach((el, i) => {
            let sub = text.slice(colorPositions[i] + 10, colorPositions[i + 1]);
            chatElement += `<span style='color: ${colors[i]}'>${sub}</span>`;
        });

        var elmnt = document.getElementById("chat_messages");

        chatElement += "</li>";

        var today = new Date();

        if (chatElement === "<li></li>") {
            if (chat.input == null || elmnt.scrollTop == elmnt.scrollHeight - elmnt.clientHeight) {
                chat.container.append("<li>" + "<span class='timestamp'>[" + today.toLocaleTimeString('de-DE') + "]</span> " + text + "</li>");
                elmnt.scrollTop = elmnt.scrollHeight - elmnt.clientHeight;
            } else {
                chat.container.append("<li>" + "<span class='timestamp'>[" + today.toLocaleTimeString('de-DE') + "]</span> " + text + "</li>");
            }
        } else {
            chat.container.append(chatElement);
        }

        chat.size++;

        if (chat.size >= chat.history_limit) {
            chat.container.children(":first").remove();
        }
    },

    clear: () => {
        chat.container.html("");
    },

    activate: (toggle) => {
        if (toggle == false
            && (chat.input != null))
            enableChatInput(false);

        chat.active = toggle;
    },

    show: (toggle) => {
        if (toggle)
            $("#chat").show();
        else
            $("#chat").hide();

        chat.active = toggle;
    }
};

let api = { "chat:push": chatAPI.push, "chat:clear": chatAPI.clear, "chat:activate": chatAPI.activate, "chat:show": chatAPI.show };

for (let fn in api) {
    mp.events.add(fn, api[fn]);
}

$(document).ready(function () {
    chat.container = $("#chat ul#chat_messages");

    $(".ui_element").show();
    chatAPI.push("Multiplayer started");

    $("body").keyup(function (event) {
        if (event.which == 84 && chat.input == null
            && chat.active == true) {
            chat.currentIndex = 0;
            enableChatInput(true);
            event.preventDefault();
        } else if (event.which == 38) {
            if (chat.historyMsgs.length === 0)
                return;

            const previousMessages = chat.historyMsgs;

            if (previousMessages.length === chat.currentIndex)
                return;

            chat.input.children("input").val(previousMessages[chat.currentIndex]);

            setTimeout(() => {
                chat.input.children("input").setSelectionRange(previousMessages[chat.currentIndex].length, previousMessages[chat.currentIndex].length);
            }, 1);

            chat.currentIndex = chat.currentIndex + 1;
        } else if (event.which == 40) {
            if (chat.historyMsgs.length === 0)
                return;

            const previousMessages = chat.historyMsgs;

            if (chat.currentIndex === -1) {
                chat.input.children("input").val("")
                return;
            }

            chat.currentIndex = chat.currentIndex - 1;
            chat.input.children("input").val(previousMessages[chat.currentIndex]);

            setTimeout(() => {
                chat.input.children("input").setSelectionRange(previousMessages[chat.currentIndex].length, previousMessages[chat.currentIndex].length);
            }, 1);
        }
        else if (event.which == 13 && chat.input != null) {
            var value = chat.input.children("input").val();

            if (value.length > 0) {
                if (chat.historyMsgs.length >= MAX_MSG_HISTORY) {
                    chat.historyMsgs.pop();
                }

                if (value.toLowerCase().startsWith("/changepw") && value.length >= "/changepw ".length) {
                    chat.historyMsgs.unshift("/changepw * *");
                } else {
                    chat.historyMsgs.unshift(value);
                }

                chat.currentIndex = 0;
                var elmnt = document.getElementById("chat_messages");

                if (value[0] == "/") {
                    value = value.substr(1);

                    if (value.length > 0)
                        mp.invoke("command", value);
                    elmnt.scrollTop = elmnt.scrollHeight - elmnt.clientHeight;
                }
                else {
                    mp.invoke("chatMessage", value);

                    elmnt.scrollTop = elmnt.scrollHeight - elmnt.clientHeight;
                }
            }

            enableChatInput(false);
        }
    });
});