Greasy Fork is available in English.
Quality of life improvements for Skribbl.io
目前为
// ==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 http://greasyfork.icu/users/784494
// ==/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);
};
});
})();