Greasy Fork is available in English.
Adds a handy color wheel on holding down right-click, the option to mute and remove all messages issued by a specific player, a screenshot button with a toggle hotkey (~), as well as a checkbox to automatically save (download) and rename every drawing of a session.
当前为
// ==UserScript==
// @name Skribbl.io's first add-on
// @namespace http://tampermonkey.net/
// @version 0.4
// @description Adds a handy color wheel on holding down right-click, the option to mute and remove all messages issued by a specific player, a screenshot button with a toggle hotkey (~), as well as a checkbox to automatically save (download) and rename every drawing of a session.
// @author AllStorm
// @match https://skribbl.io/*
// @grant none
// ==/UserScript==
//AllStorm's attempt at a color wheel palette and a save image button.
var canvas = document.createElement('canvas');
var mousePosition = {
x: 0,
y: 0
};
var piePosition = {
x: 0,
y: 0
};
var pie = false;
var selectedColor = 0;
var lastColor = 0;
var selectedAngle = 0;
var colorCount = document.getElementsByClassName("colorItem").length;
var colorTable = [0, 1, 12, 11, 21, 13, 10, 14, 2, 3, 15, 4, 5, 16, 18, 17, 7, 6, 19, 8, 20, 9];
canvas.id = "PieMenu";
document.body.appendChild(canvas);
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
canvas.style.position = "absolute";
canvas.style.backgroundColor = "transparent";
canvas.style.zIndex = 8;
canvas.style.left = 0;
canvas.style.top = 0;
canvas.style.pointerEvents = "none";
pieAngle = 360 / (colorCount);
PieMenu = document.getElementById("PieMenu");
var ctx = canvas.getContext("2d");
var textBox;
var checkbox = document.createElement('input');
var muteArray = {};
function setupImageButton() {
let getImageBtn = document.createElement('a');
let buttonText = document.createTextNode("Save image");
getImageBtn.appendChild(buttonText);
getImageBtn.style.fontSize = "12px";
getImageBtn.style.cursor = "pointer";
getImageBtn.style.display = "block";
getImageBtn.style.padding = "10px";
getImageBtn.style.borderRadius = "2px";
getImageBtn.style.fontWeight = "bold";
getImageBtn.style.background = "#5cb85c";
getImageBtn.style.color = "white";
getImageBtn.style.textAlign = "center";
getImageBtn.style.textDecoration = "none";
getImageBtn.style.marginTop = "5px";
document.getElementsByClassName("tooltip-wrapper")[0].appendChild(getImageBtn);
textBox = document.createElement("textarea");
textBox.style.resize = "none";
textBox.style.height = "30px";
textBox.style.width = "159px";
textBox.style.fontWeight = "bold";
textBox.style.marginTop = "5px";
textBox.style.marginRight = "9px";
textBox.style.padding = "5px";
textBox.placeholder = "skribbl-Drawing";
textBox.style.textAlign = "center";
textBox.style.fontSize = "11px";
document.getElementsByClassName("tooltip-wrapper")[0].appendChild(textBox);
document.getElementsByClassName("tooltip-wrapper")[0].appendChild(checkbox);
checkbox.type = "checkbox";
getImageBtn.addEventListener('click', function () {
getImageFunction(getImageBtn);
}, false);
return getImageBtn;
};
var text = document.getElementById("overlay").getElementsByClassName("content")[0].getElementsByClassName("text")[0];
text.addEventListener('DOMSubtreeModified', function () {
if (checkbox.checked && text.textContent.includes("The word was: ")){
textBox.value = "skribbl-" + text.textContent.substring(text.textContent.indexOf(":") + 2);
getImageButton.click();
};
}, false);
PlayerList = document.getElementById("containerGamePlayers");
Messages = document.getElementById("boxMessages");
PlayerList.addEventListener('DOMSubtreeModified', function () {
muteArray = {};
for (let i = 0; i < PlayerList.childNodes.length; i++){
if (PlayerList.childNodes[i].getElementsByClassName("mute")[0]){
if (PlayerList.childNodes[i].getElementsByClassName("mute")[0].checked){
muteArray[i] = PlayerList.childNodes[i].getElementsByClassName("info")[0].getElementsByClassName("name")[0].textContent;
};
} else{
let checkbox = document.createElement('input');
checkbox.className = "mute";
checkbox.type = "checkbox";
checkbox.style.width = "30px";
checkbox.style.height = "30px";
checkbox.addEventListener('change', function() {
let name = this.parentElement.getElementsByClassName("info")[0].getElementsByClassName("name")[0];
flagMessage = this.parentElement.getElementsByClassName("message")[0]
if(this.checked) {
for (i = 0; i< Messages.childNodes.length; i++){
message = Messages.childNodes[i]
if(message.getElementsByTagName("b")[0]){
if(message.getElementsByTagName("b")[0].textContent.indexOf(name.textContent) !== -1) {
message.parentElement.removeChild(message);
};
};
};
name.style.visibility = "hidden";
flagMessage.style.visibility = "hidden";
} else {
name.style.visibility = "visible";
flagMessage.style.visibility = "visible";
};
});
PlayerList.childNodes[i].insertBefore(checkbox, PlayerList.childNodes[i].getElementsByClassName("message")[0]);
};
};
}, false);
Messages.addEventListener('DOMSubtreeModified', function () {
let message = Messages.childNodes[Messages.childNodes.length-1]
for (name in muteArray){
if(message.getElementsByTagName("b")[0]){
console.log(message.getElementsByTagName("b")[0].textContent + " " + name);
if(message.getElementsByTagName("b")[0].textContent.indexOf(muteArray[name]) !== -1) {
message.parentElement.removeChild(message);
};
};
};
});
function getImageFunction(button) {
var gameCanvas = document.getElementById("canvasGame")
button.href = gameCanvas.toDataURL();
console.log(textBox.value);
if (textBox.value){
button.download = textBox.value + '.png';
} else {
button.download = 'skribbl-Drawing.png';
};
};
function drawPie() {
selectedAngle = 360 - Math.atan2(piePosition.x - mousePosition.x, piePosition.y - mousePosition.y) * 180 / Math.PI;
if (selectedAngle >= 360) {
selectedAngle -= 360
};
selectedAngle += 90;
if (selectedAngle >= 360) {
selectedAngle -= 360
};
lastColor = selectedColor;
selectedColor = Math.floor(selectedAngle / pieAngle);
if (selectedColor != lastColor) {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.shadowBlur = 50;
ctx.shadowColor = "black";
ctx.beginPath();
ctx.fillStyle = document.getElementsByClassName("colorItem")[colorTable[selectedColor]].style.backgroundColor;
ctx.arc(mousePosition.x, mousePosition.y, 180, 0, Math.PI * 2);
ctx.lineTo(mousePosition.x, mousePosition.y);
ctx.closePath;
ctx.fill();
for (var colorNr = 0; colorNr < colorCount; colorNr++) {
ctx.shadowBlur = 5;
ctx.shadowColor = "black";
ctx.beginPath();
ctx.moveTo(mousePosition.x, mousePosition.y);
ctx.fillStyle = document.getElementsByClassName("colorItem")[colorTable[colorNr]].style.backgroundColor;
ctx.arc(mousePosition.x, mousePosition.y, 160, Math.PI / 180 * colorNr * pieAngle, Math.PI / 180 * colorNr * pieAngle + (Math.PI / 180 * pieAngle));
ctx.lineTo(mousePosition.x, mousePosition.y);
ctx.closePath;
ctx.fill();
ctx.stroke();
}
ctx.shadowBlur = 40;
ctx.shadowColor = "white";
ctx.beginPath();
ctx.moveTo(mousePosition.x, mousePosition.y);
try {
ctx.fillStyle = document.getElementsByClassName("colorItem")[colorTable[selectedColor]].style.backgroundColor;
} catch (err) {
console.log(selectedColor);
};
ctx.arc(mousePosition.x, mousePosition.y, 200, Math.PI / 180 * selectedColor * pieAngle, Math.PI / 180 * selectedColor * pieAngle + (Math.PI / 180 * pieAngle));
ctx.lineTo(mousePosition.x, mousePosition.y);
ctx.closePath;
ctx.fill();
ctx.stroke();
}
}
document.addEventListener('mousedown', function (mouseDownEvent) {
if (mouseDownEvent.button === 2){
pie = true;
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
drawPie();
}
}, false);
document.addEventListener('mouseup', function () {
if (pie) {
pie = false;
ctx.clearRect(0, 0, canvas.width, canvas.height);
document.getElementsByClassName("colorItem")[colorTable[selectedColor]].click();
}
}, false);
document.addEventListener('keydown', function (e) {
switch(e.keyCode || e.which) {
case 49:
document.getElementsByClassName("brushSize")[0].click();
break;
case 50:
document.getElementsByClassName("brushSize")[1].click();
break;
case 51:
document.getElementsByClassName("brushSize")[2].click();
break;
case 52:
document.getElementsByClassName("brushSize")[3].click();
break;
case 221:
case 192:
getImageButton.click();
break;
case 86 && 18:
document.getElementById("votekickCurrentplayer").click();
document.getElementById("inputChat").focus();
break;
case 71 && 18:
document.getElementsByClassName("thumbsUp")[0].click();
document.getElementById("inputChat").focus();
break;
case 18 && 78:
document.getElementsByClassName("thumbsDown")[0].click();
document.getElementById("inputChat").focus();
break;
case 13:
document.getElementById("inputChat").focus();
break;
default:
break;
}
}, false);
document.addEventListener('mousemove', function (mouseMoveEvent) {
var rect = mouseMoveEvent.target.getBoundingClientRect();
if (!pie) {
mousePosition.x = mouseMoveEvent.pageX;
mousePosition.y = mouseMoveEvent.pageY;
} else {
piePosition.x = mouseMoveEvent.pageX;
piePosition.y = mouseMoveEvent.pageY;
drawPie();
}
}, false);
document.addEventListener('contextmenu', function (contextMenuEvent) {
contextMenuEvent.preventDefault();
return false;
}, false);
getImageButton = setupImageButton();