Click on a user and then click Track to automatically download their drawings after their turn.
// ==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}`);
}
}