Quality of life improvements for Skribbl.io
当前为
// ==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
// ==/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)
};
});
})();