Save Player Drawings

Click on a user and then click Track to automatically download their drawings after their turn.

K instalaci tototo skriptu si budete muset nainstalovat rozšíření jako Tampermonkey, Greasemonkey nebo Violentmonkey.

K instalaci tohoto skriptu si budete muset nainstalovat rozšíření jako Tampermonkey nebo Violentmonkey.

K instalaci tohoto skriptu si budete muset nainstalovat rozšíření jako Tampermonkey nebo Violentmonkey.

K instalaci tohoto skriptu si budete muset nainstalovat rozšíření jako Tampermonkey nebo Userscripts.

You will need to install an extension such as Tampermonkey to install this script.

K instalaci tohoto skriptu si budete muset nainstalovat manažer uživatelských skriptů.

(Už mám manažer uživatelských skriptů, nechte mě ho nainstalovat!)

You will need to install an extension such as Stylus to install this style.

You will need to install an extension such as Stylus to install this style.

You will need to install an extension such as Stylus to install this style.

You will need to install a user style manager extension to install this style.

You will need to install a user style manager extension to install this style.

You will need to install a user style manager extension to install this style.

(Už mám manažer uživatelských stylů, nechte mě ho nainstalovat!)

// ==UserScript==
// @name        Save Player Drawings
// @namespace   https://greasyfork.org/users/281093
// @match       https://sketchful.io/
// @grant       none
// @version     1.0
// @author      Bell
// @license     MIT
// @copyright   2020, Bell
// @description Click on a user and then click Track to automatically download their drawings after their turn.
// ==/UserScript==
/* jshint esversion: 6 */

const trackedPlayers = JSON.parse(localStorage.getItem('trackedPlayers')) || [];
const userModalHeader = document.querySelector('#userModal div.modal-header');
const chat = document.querySelector('#gameChatList');
const buttonTextOff = 'Track';
const buttonTextOn = 'Untrack';
const buttonStyle = `width: 100px; top: 70px; margin-right:
					 16px; position: absolute; right: 0px`;

(function addButton() {
	const modalBody = document.querySelector('#userModal div.modal-body');
	const button = document.createElement('button');
	button.setAttribute('class', 'btn btn-primary');
	button.setAttribute('style', buttonStyle);
	button.textContent = buttonTextOff;
	button.id = 'trackButton';
	button.onclick = toggleTrackedPlayer;
	modalBody.appendChild(button);
})();

function toggleTrackedPlayer() {
	const player = document.querySelector('#userModal h3').textContent;
	const button = document.querySelector('#trackButton');
	const tracked = trackedPlayers.includes(player);

	if (tracked) {
		trackedPlayers.splice(trackedPlayers.indexOf(player), 1);
		button.textContent = buttonTextOff;
	}
	else {
		trackedPlayers.push(player);
		button.textContent = buttonTextOn;
	}

	localStorage.setItem('trackedPlayers', JSON.stringify(trackedPlayers));
}

const updateHeader = (mutations) => {
	mutations.forEach(mutation => {
		const newNodes = mutation.addedNodes;
		if (!newNodes.length) return;
		updateButtonState(newNodes[0]);
	});
};

new MutationObserver(updateHeader)
	.observe(userModalHeader, { childList: true, subtree: true });

function updateButtonState(nameNode) {
	const player = nameNode.textContent;
	const button = document.querySelector('#trackButton');
	const tracked = trackedPlayers.includes(player);
	button.textContent = tracked ? buttonTextOn : buttonTextOff;
}

const checkChat = (mutations) => {
	mutations.forEach(mutation => {
		const msgNode = mutation.addedNodes[0];
		if (!msgNode || !msgNode.classList.contains('chatAdmin')) return;
		parseSystemMessage(msgNode.textContent);
	});
};

new MutationObserver(checkChat).observe(chat, { childList: true });

function downloadDrawing(name) {
	const a = document.createElement('a');
	a.download = name + '.png';
	a.href = document.querySelector('#canvas').toDataURL();
	a.click();
}

function parseSystemMessage(message) {
	if (message.startsWith('The word was')) {
		const word = /: ([a-zA-Z0-9 -]+)/.exec(message)[1];
		const drawerNode = document.querySelector('.gameDrawing').parentElement;
		let drawerName = drawerNode.querySelector('.gameAvatarName').textContent;

		if (!trackedPlayers.includes(drawerName)) return;

		drawerName = drawerName.replaceAll(/[\/\\*:>?<|"]/, '');
		if (!drawerName.length) drawerName = 'anon';
		downloadDrawing(`${word} by ${drawerName}`);
	}
}