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

(function() {
    'use strict';
    qol_setup();
    qol_info();
    qol_buttons();
    const inputChat = document.querySelector("#inputChat");
    const inputName = document.querySelector("#inputName");
    const header = document.querySelector("body > div.container-fluid > div.header");
    const timer = document.querySelector("#timer");
    const _currentWord = document.querySelector("#currentWord");
    var currentWord = null;
    function qol_setup() {
        document.body.addEventListener('keydown', function() {
            inputChat.focus();
            inputName.focus();
        });
    };
    function qol_info() {
        setInterval(function() {
            document.title = `(${timer.innerHTML}s) Skribbl.io`;
        }, 500);
    };
    function qol_buttons() {
        const qolButtonsStyle = `background: #f0ad4e; border-color: #eea236; color: #fff;`;
        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.style = qolButtonsStyle
        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
            };
            if (document.querySelector("#currentWord").style.visibility) {
                document.querySelector("#currentWord").removeAttribute("style");
                document.querySelector("#qol-word-toggle").innerHTML = "Hide Word";
                return
            };
        };
        qolClearChat.id = "qol-clear-chat";
        qolClearChat.style = qolButtonsStyle
        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);
    };
})();