// ==UserScript==
// @name         Skribbl / Skribbl.io QOL
// @version      0.5
// @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';
    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");
        var currentWordLength = null;
        qol_setup();
        qol_info();
        qol_buttons();
        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})`;
                    };
                }, 100);
            });
        };
        function qol_info() {
            document.title = "Skribbl.io";
            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_buttons() {
            const qolButtonsList = document.createElement("div");
            const qolWordToggle = document.createElement("button");
            const qolClearChat = document.createElement("button");
            qolButtonsList.id = "qol-buttons-list";
            qolButtonsList.style = `display: flex; justify-content: center; flex-direction: row`;
            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_style() {
        var qolStyle = document.createElement("style");
        qolStyle.innerHTML = `.qol-button {background-color: #f0ad4e; border-color: #eea236; color: #fff;}
        #currentWord {display: flex !important; justify-content: center !important; flex-direction: row !important;}
        #formChat {display: flex !important; flex-direction: row !important;}`;
        document.head.appendChild(qolStyle)
    };
    });
})();