asdf

// ==UserScript==
// @name         caasinehc's Skribbl tool
// @namespace    http://tampermonkey.net/
// @version      1.1
// @description  Useful tools for skribbl.io
// @author       Isaac Chen
// @match        https://skribbl.io/*
// @grant        none
// ==/UserScript==

(function() {
// Elems on the skribbl page
let elems = {};

// Current wordlist
let currentTemplate = "";
let possibleWordList = [];
let possibleWordListText = "";

// Set the color (red, white, green, black, blue, etc)
var setColor = (function() {
	function getColorElem(row, column) {
		return document.querySelector(
			  "#containerBoard "
			+ "> div.containerToolbar "
			+ "> div.containerColorbox "
			+ "> div:nth-child(" + row + ") "
			+ "> div:nth-child(" + column + ")"
		);
	}
	let colors = {
		"white":   getColorElem(1, 1),
		"silver":  getColorElem(1, 2),
		"red":     getColorElem(1, 3),
		"orange":  getColorElem(1, 4),
		"yellow":  getColorElem(1, 5),
		"lime":    getColorElem(1, 6),
		"sky":     getColorElem(1, 7),
		"blue":    getColorElem(1, 8),
		"purple":  getColorElem(1, 9),
		"pink":    getColorElem(1, 10),
		"tan":     getColorElem(1, 11),
		"black":   getColorElem(2, 1),
		"gray":    getColorElem(2, 2),
		"maroon":  getColorElem(2, 3),
		"scarlet": getColorElem(2, 4),
		"gold":    getColorElem(2, 5),
		"green":   getColorElem(2, 6),
		"teal":    getColorElem(2, 7),
		"navy":    getColorElem(2, 8),
		"plum":    getColorElem(2, 9),
		"mauve":   getColorElem(2, 10),
		"brown":   getColorElem(2, 11)
	}
	return function(color) {
		colors[color].click();
	}
})();

// Set the tool (pen, eraser, fill)
var setTool = (function() {
	function getTool(n) {
		return document.querySelector(
			  "#containerBoard "
			+ "> div.containerToolbar "
			+ "> div.containerTools "
			+ "> div:nth-child(" + n + ")"
		);
	}
	let tools = {
		"pen":    getTool(1),
		"eraser": getTool(2),
		"fill":   getTool(3)
	}
	return function(tool) {
		tools[tool].click();
	}
})();

// Set the pen size (1, 2, 3, 4)
var setSize = (function() {
	function getSize(n) {
		return document.querySelector(
			  "#containerBoard "
			+ "> div.containerToolbar "
			+ "> div.containerBrushSizes "
			+ "> div:nth-child(" + n + ") "
			+ "> div "
			+ "> div"
		);
	}
	let sizes = {
		1: getSize(1),
		2: getSize(2),
		3: getSize(3),
		4: getSize(4)
	}
	return function(size) {
		sizes[size].click();
	}
})();

// Clear the canvas
var clearCanvas = (function() {
	let clearCanvasButton = document.querySelector("#buttonClearCanvas");

	return function() {
		clearCanvasButton.click();
	}
})();

// Votekick
var voteKick = (function() {
	let voteKickButton = document.querySelector("#votekickCurrentplayer");

	return function() {
		voteKickButton.click();
	}
})();

// Thumbs up or down
var rate = (function() {
	let ratings = {
		"good": document.querySelector("#rateDrawing > div:nth-child(1) > div"),
		"bad":  document.querySelector("#rateDrawing > div:nth-child(2) > div")
	}

	return function(rating) {
		ratings[rating].click();
	}
})();

// Choose which word to draw
var chooseWord = function(word) {
	document.querySelector(
		  "#overlay "
		+ "> div "
		+ "> div.wordContainer "
		+ "> div:nth-child(" + word + ")"
	).click();
};

function isDrawing() {
	return document.querySelector("#containerBoard > div.containerToolbar").style.display != "none";
}











// Color wheel
(function() {
	let canvas = document.createElement("canvas");
	document.body.appendChild(canvas);
	canvas.width                 = window.innerWidth;
	canvas.height                = window.innerHeight;
	canvas.style.position        = "absolute";
	canvas.style.backgroundColor = "transparent";
	canvas.style.zIndex          = 10;
	canvas.style.top             = 0;
	canvas.style.left            = 0;
	canvas.style.pointerEvents   = "none";

	let ctx = canvas.getContext("2d");

	let colorTable = [0, 1, 12, 11, 21, 13, 10, 14, 2, 3, 15, 4, 5, 16, 18, 17, 7, 6, 19, 8, 20, 9];
	let colorCount = colorTable.length;
	let sliceAngle = 360 / colorCount;
	let width      = canvas.width;
	let height     = canvas.height;

	let mousePos      = {x: 0, y: 0};
	let palettePos    = {x: 0, y: 0};
	let showPalette   = false;
	let selectedColor = 0;

	function colorDecoder(color) {
		return ["white", "gray", "silver", "gray", "red", "maroon", "orange", "scarlet", "yellow", "gold", "lime", "green", "sky", "teal", "blue", "navy", "purple", "eggplant", "pink", "mauve", "tan", "brown"][color];
	}

	function renderPalette() {
		let selectedAngle = (450 - Math.atan2(palettePos.x - mousePos.x, palettePos.y - mousePos.y) * 180 / Math.PI) % 360;
		selectedColor = Math.floor(selectedAngle / sliceAngle);

		ctx.clearRect(0, 0, width, height);

		ctx.shadowBlur = 50;
		ctx.shadowColor = "black";
		ctx.beginPath();
		ctx.fillStyle = document.getElementsByClassName("colorItem")[colorTable[selectedColor]].style.backgroundColor;
		ctx.arc(mousePos.x, mousePos.y, 180, 0, Math.PI * 2);
		ctx.lineTo(mousePos.x, mousePos.y);
		ctx.closePath;
		ctx.fill();
		for(let i = 0; i < colorCount; i++) {
			ctx.shadowBlur = 5;
			ctx.shadowColor = "black";
			ctx.beginPath();
			ctx.moveTo(mousePos.x, mousePos.y);
			ctx.fillStyle = document.getElementsByClassName("colorItem")[colorTable[i]].style.backgroundColor;
			ctx.arc(mousePos.x, mousePos.y, 160, Math.PI / 180 * i * sliceAngle, Math.PI / 180 * i * sliceAngle + (Math.PI / 180 * sliceAngle));
			ctx.lineTo(mousePos.x, mousePos.y);
			ctx.closePath();
			ctx.fill();
			ctx.stroke();
		}
		ctx.shadowBlur = 40;
		ctx.shadowColor = "white";
		ctx.beginPath();
		ctx.moveTo(mousePos.x, mousePos.y);
		ctx.fillStyle = document.getElementsByClassName("colorItem")[colorTable[selectedColor]].style.backgroundColor; // might have to be wrapped in a try-catch?
		ctx.arc(mousePos.x, mousePos.y, 200, Math.PI / 180 * selectedColor * sliceAngle, Math.PI / 180 * selectedColor * sliceAngle + (Math.PI / 180 * sliceAngle));
		ctx.lineTo(mousePos.x, mousePos.y);
		ctx.closePath();
		ctx.fill();
		ctx.stroke();
	}

	document.addEventListener("mousedown", function(e) {
		if(e.button == 2) {
			showPalette = true;
			canvas.width = window.innerWidth;
			width = canvas.width;
			canvas.height = window.innerHeight;
			height = canvas.height;
			renderPalette();
		}
	}, false);

	document.addEventListener("mouseup", function(e) {
		if(showPalette) {
			showPalette = false;
			ctx.clearRect(0, 0, width, height);
			document.getElementsByClassName("colorItem")[colorTable[selectedColor]].click();
		}
	}, false);

	document.addEventListener("mousemove", function(e) {
		let rect = e.target.getBoundingClientRect();
		if(!showPalette) {
			mousePos.x = e.pageX;
			mousePos.y = e.pageY;
		}
		else {
			palettePos.x = e.pageX;
			palettePos.y = e.pageY;
			renderPalette();
		}
	}, false)

	document.addEventListener("contextmenu", function(e) {
		e.preventDefault();
		return false;
	}, false);
})();

// All the wordList stuff
(function() {
	let wordList = JSON.parse(localStorage.getItem("wordList") || "[]");
	let saveWords = true;
	let showWordListP = true;

	// Turns a skribbl template into a regex
	function templateToRegex(template) {
		return new RegExp("^" + template.split("_").join("[A-Za-z]") + "$");
	}

	// Save the wordlist to localStorage
	function saveWordList() {
		cleanWordList();
		localStorage.setItem("wordList", JSON.stringify(wordList));
	}

	// Remove duplicate words (also sorts)
	function cleanWordList() {
		let words = {};
		let newWordList = wordList.filter(function(item) {
			return words.hasOwnProperty(item) ? false : (words[item] = true);
		});
		wordList = newWordList.sort();
	}

	// Save the wordList on unload
	window.addEventListener("unload", saveWordList, false);

	// When the word is revealed, save the word
	function theWordWasCallback() {
		let text = theWordWasTarget.innerText;
		if(saveWords && text.startsWith("The word was: ")) {
			wordList.push(text.replace("The word was: ", ""));
			cleanWordList();
		}
	}
	let theWordWasTarget = document.querySelector("#overlay > div > div.text");
	let theWordWasObserver = new MutationObserver(theWordWasCallback);
	theWordWasObserver.observe(theWordWasTarget, {attributes: true, childList: true, characterData: true, subtree: true});

	// When choosing a word, save the three options
	function chooseAWordCallback() {
		if(saveWords) {
			wordList.push(chooseAWordTarget.children[0].innerText);
			wordList.push(chooseAWordTarget.children[1].innerText);
			wordList.push(chooseAWordTarget.children[2].innerText);
			cleanWordList();
		}
	}
	let chooseAWordTarget = document.querySelector("#overlay > div > div.wordContainer");
	let chooseAWordObserver = new MutationObserver(chooseAWordCallback);
	chooseAWordObserver.observe(chooseAWordTarget, {attributes: true, childList: true, characterData: true, subtree: true});

	// Update the list of possible words from template
	function updatePossibleWords() {
		currentTemplate = templateToRegex(document.querySelector("#currentWord").innerText);
		possibleWordList = [];
		for(let word of wordList) {
			if(currentTemplate.test(word)) possibleWordList.push(word.toLowerCase());
		}
		// possibleWordList.sort(); // Shouldn't be necessary?
		possibleWordListText = possibleWordList.length > 0 ? "Possible words: \n" + possibleWordList.join(", ") : "No matches found in your database!";
		possibleWordsP.innerText = possibleWordListText;
	}

	// The text display of possible words
	let possibleWordsP = document.createElement("P");
	possibleWordsP.appendChild(document.createTextNode(""));
	document.querySelector("#screenGame").appendChild(possibleWordsP);
	possibleWordsP.style.margin = "4px";
	possibleWordsP.style.background = "white";

	// When the list of possible words changes, do stuff
	let observer = new MutationObserver(mutations => {
		updatePossibleWords();

		// If guessing and showing box, show the box
		if(!isDrawing() && showWordListP) {
			possibleWordsP.style.display = "initial";
		}
		// If drawing or hiding box, hide the box
		else {
			possibleWordsP.style.display = "none";
		}
	});
	observer.observe(document.querySelector("#currentWord"), {attributes: true, childList: true, characterData: true, subtree: true});

	// turn the chatbox green if the guess matches the hint
	(function() {
		function templateToRegex(template) {
			return new RegExp("^" + template.split("_").join("[A-Za-z]") + "$");
		}

		let inputBox    = document.querySelector("#inputChat");
		let hintDisplay = document.querySelector("#currentWord");
		setInterval(function() {
			let text = inputBox.value.toLowerCase();
			let regex = templateToRegex(hintDisplay.innerText);
			if(regex.test(text) && text.length) {
				if(possibleWordList.includes(text)) {
					inputBox.style.backgroundColor = "lime";
				}
				else inputBox.style.backgroundColor = "#80FF80";
			}
			else {
				inputBox.style.backgroundColor = "white";
			}
		}, 1000 / 60)
	})();

	document.addEventListener("keydown", function(e) {
		if(e.altKey) {
			// Toggle word list box
			if(e.key == "l") {
				if(showWordListP) {
					showWordListP = false;
					possibleWordsP.style.display = "none";
				}
				else {
					showWordListP = true;
					possibleWordsP.style.display = "initial";
				}
			}
			// Toggle saving words
			else if(e.key == "s") {
				if(saveWords) {
					alert("Stopped saving words to database!");
					saveWords = false;
				}
				else {
					alert("Resumed saving words to database!");
					saveWords = true;
				}
			}
			// Clear canvas
			else if(e.key == "c") {
				clearCanvas();
			}
			// Rate good
			else if(e.key == "g") {
				rate("good");
			}
			// Rate bad
			else if(e.key == "b") {
				rate("bad");
			}
			// Vote kick
			else if(e.key == "v") {
				voteKick();
			}
		}
	}, false);
})();

function wordScrape() {
	function startGame() {
		document.querySelector("#modalIdle > div > div > div.modal-header > button").click();
		if(document.querySelector("#screenLogin").style.display != "none") {
			document.querySelector("#modalKicked > div > div > div.modal-footer > button").click();
			document.querySelector("#modalDisconnect > div > div > div.modal-footer > button").click();
			document.querySelector("#inputName").value = "Word Scraper";
			document.querySelector("#formLogin > button").click();
		}
	}
	setInterval(startGame, 1000);
}

})();