// ==UserScript==
// @name         Skribbl / Skribbl.io QOL
// @version      0.8
// @description  Quality of life improvements for Skribbl.io
// @author       4TSOS
// @match        http*://skribbl.io/*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=skribbl.io
// @namespace    https://greasyfork.org/users/784494
// @downloadURL none
// ==/UserScript==

(function() {
    'use strict';
    document.title = "Skribbl.io";
    window.addEventListener('load', function() {
        const inputChat = document.querySelector("#inputChat");
        const inputName = document.querySelector("#inputName");
        const currentWord = document.querySelector("#currentWord");
        const header = document.querySelector("body > div.container-fluid > div.header");
        const timer = document.querySelector("#timer");
        const chatBox = document.querySelector("#boxMessages");
        const customWords = document.querySelector("#lobbySetCustomWords");
        var currentWordLength = null;
        qol_setup();
        qol_info();
        qol_fixes();
        qol_saved_avatars();
        qol_header();
        qol_avatars();
        qol_style();
        function qol_setup() {
            document.body.addEventListener('keydown', function() {
                inputChat.focus();
                inputName.focus();
                setTimeout(function() {
                    if (document.querySelector("#formChat > h4")) {
                        document.querySelector("#formChat > h4").innerHTML = `(${inputChat.value.trim().length}/${currentWord.innerHTML.length})`;
                        if (inputChat.value.trim().length > currentWord.innerHTML.length || inputChat.value.trim().length < currentWord.innerHTML.length) {
                            document.querySelector("#formChat > h4").style.color = "red";
                        };
                        if (inputChat.value.trim().length == 0) {
                            document.querySelector("#formChat > h4").style.color = "black";
                        };
                        if (inputChat.value.trim().length == currentWord.innerHTML.length) {
                            document.querySelector("#formChat > h4").style.color = "green";
                        };
                    };
                }, 100);
            });
            if (!localStorage.getItem("avatars")) {
                localStorage.setItem("avatars", JSON.stringify([]))
            };
            if (!localStorage.getItem("wordlists")) {
                localStorage.setItem("wordlists", JSON.stringify([]))
            };
        };
        function qol_info() {
            const gameTimerObserver = new MutationObserver(function() {
                document.title = `(${timer.innerHTML}s) Skribbl.io`;
            });
            const gameWordObserver = new MutationObserver(function() {
                currentWordLength = currentWord.innerHTML.length;
                if (!document.querySelector("#formChat > h4")) {
                    var inputTracker = document.createElement("h4");
                    inputTracker.innerHTML = `(${inputChat.value.length}/${currentWordLength})`;
                    document.querySelector("#formChat").appendChild(inputTracker)
                }
                else {
                    document.querySelector("#currentWord > h4").innerHTML = `(${inputChat.value.trim().length}/${currentWordLength})`;
                };
            });
            gameTimerObserver.observe(document.querySelector("#timer"), {childList: true, subtree: false, attributes: false});
            gameWordObserver.observe(document.querySelector("#currentWord"), {childList: true, subtree: false, attributes: false});
        };
        function qol_fixes() {
            const gameChatObserver = new MutationObserver(function() {
                chatBox.scrollTop = chatBox.scrollHeight;
            });
            gameChatObserver.observe(chatBox, {childList: true, subtree: false, attributes: false})
        };
        function qol_saved_avatars() {
            var avatarHolder = document.createElement("div");
            var marker = 0;
            avatarHolder.id = "qol-saved-avatars";
            JSON.parse(localStorage.getItem("avatars")).forEach(function(item) {
                marker += 1
                var avatarLink = document.createElement("button");
                avatarLink.innerHTML = `#${marker} - ${item}`;
                avatarLink.onclick = function() {
                    localStorage.setItem("avatar", JSON.stringify(item));
                    window.location.reload();
                };
                avatarLink.id = `qol-saved-avatar-${marker}`;
                avatarHolder.appendChild(avatarLink);
            });
            document.querySelector("#loginAvatarCustomizeContainer").appendChild(avatarHolder)
        };
        function qol_header() {
            const qolButtonsList = document.createElement("div");
            const qolWordToggle = document.createElement("button");
            const qolClearChat = document.createElement("button");
            qolButtonsList.id = "qol-header-buttons-list";
            qolWordToggle.id = "qol-word-toggle";
            qolWordToggle.className = "qol-button";
            qolWordToggle.innerHTML = "Hide Word";
            qolWordToggle.onclick = function() {
                if (!document.querySelector("#currentWord").style.visibility) {
                    document.querySelector("#currentWord").style.visibility = "hidden";
                    document.querySelector("#qol-word-toggle").innerHTML = "Show Word";
                    return
                }
                else {
                    document.querySelector("#currentWord").removeAttribute("style");
                    document.querySelector("#qol-word-toggle").innerHTML = "Hide Word";
                    return
                };
            };
            qolClearChat.id = "qol-clear-chat";
            qolClearChat.className = "qol-button";
            qolClearChat.innerHTML = "Clear Chat";
            qolClearChat.onclick = function() {
                var chatMessages = document.querySelectorAll("#boxMessages > *");
            chatMessages.forEach(function(message) {
                message.remove();
            });
        };
        qolButtonsList.appendChild(qolWordToggle);
        qolButtonsList.appendChild(qolClearChat);
        document.querySelector("body > div.container-fluid > div.header").appendChild(qolButtonsList);
    };
    function qol_avatars() {
        const qolButtonsList = document.createElement("div");
        const qolSetAvatar = document.createElement("button");
        const qolSaveAvatar = document.createElement("button");
        const qolClearAvatars = document.createElement("button");
        const qolRemoveAvatar = document.createElement("button");
        qolButtonsList.id = "qol-avatar-buttons-list";
        qolSetAvatar.id = "qol-set-avatar";
        qolSetAvatar.className = "qol-button";
        qolSetAvatar.innerHTML = "Set Avatar";
        qolSetAvatar.onclick = function() {
            var newAvatar = prompt("Input the array for your new avatar.");
            try {
                if (newAvatar.trim().length >= 3 && newAvatar.includes(",")) {
                    if (newAvatar.includes("[", "]")) {
                        localStorage.setItem("avatar", newAvatar);
                        window.location.reload();
                    }
                    else {
                        newAvatar = `[${newAvatar}]`
                        localStorage.setItem("avatar", newAvatar);
                        window.location.reload();
                    };
                }
                else {
                setInterval(function() {
                    window.location.reload()
                }, 250);
            };
        }
            catch {
                setInterval(function() {window.location.reload()}, 250);
            };
        };
        qolSaveAvatar.id = "qol-save-avatar";
        qolSaveAvatar.className = "qol-button";
        qolSaveAvatar.innerHTML = "Save Avatar";
        qolSaveAvatar.onclick = function() {
            if (!localStorage.getItem("avatars").includes(JSON.parse(localStorage.getItem("avatar")))) {
                var avatars = JSON.parse(localStorage.getItem("avatars"));
                var saveAvatar = JSON.parse(localStorage.getItem("avatar"));
                avatars.push(saveAvatar);
                var avatarsRaw = JSON.stringify(avatars)
                localStorage.setItem("avatars", avatarsRaw)
                setInterval(function() {window.location.reload()}, 250)
            }
            else {
                setInterval(function() {window.location.reload()}, 250)
            };
        };
        qolClearAvatars.id = "qol-clear-avatars";
        qolClearAvatars.className = "qol-button";
        qolClearAvatars.innerHTML = "Clear Avatars";
        qolClearAvatars.onclick = function() {
            localStorage.setItem("avatars", []);
            window.location.reload();
        };
        qolRemoveAvatar.id = "qol-remove-avatar";
        qolRemoveAvatar.className = "qol-button";
        qolRemoveAvatar.innerHTML = "Remove Avatar";
        qolRemoveAvatar.onclick = function() {
            var avatarRemove = prompt("Input the number of the avatar you want to remove.");
            try {
                if (!isNaN(avatarRemove) && avatarRemove.length > 0 && avatarRemove !== null) {
                    var avatarRemoveParsed = parseInt(avatarRemove);
                    var avatarRemoveFinal = avatarRemoveParsed - 1;
                    var avatars = JSON.parse(localStorage.getItem("avatars"));
                    avatars.splice(avatarRemoveFinal);
                    var avatarsRaw = JSON.stringify(avatars);
                    localStorage.setItem("avatars", avatarsRaw);
                    window.location.reload();
                }
                else {
                    setInterval(function() {window.location.reload()}, 250)
                };
            }
            catch {
                setInterval(function() {window.location.reload()}, 250)
            };
        };
        qolButtonsList.appendChild(qolSaveAvatar);
        qolButtonsList.appendChild(qolSetAvatar);
        qolButtonsList.appendChild(qolClearAvatars);
        qolButtonsList.appendChild(qolRemoveAvatar)
        document.querySelector("#loginAvatarCustomizeContainer").appendChild(qolButtonsList)
    };
    function qol_private_lobby() {
    };
    function qol_style() {
        var qolStyle = document.createElement("style");
        qolStyle.innerHTML = `.qol-button {background-color: #f0ad4e !important; border-color: #eea236 !important; color: #fff !important; height: fit-content !important;}
        #currentWord {display: flex !important; justify-content: center !important; flex-direction: row !important;}
        #formChat {display: flex !important; flex-direction: row !important;}
        #qol-header-buttons-list {display: flex !important; justify-content: center !important; flex-direction: row !important}
        #qol-avatar-buttons-list {display: flex !important; flex-direction: column !important;}
        #qol-saved-avatars {display: flex !important; flex-direction: column !important;}`;
        document.head.appendChild(qolStyle);
    };
    });
})();