// ==UserScript==
// @name         Skrib-o-muter
// @version      1.0.0
// @description  Mute and unmute names on skribbl.io by clicking them in the player list on the left.
// @author       jancc
// @namespace    https://greasyfork.org/en/users/356726-jancc
// @license      AGPL-3.0-or-later - https://www.gnu.org/licenses/agpl-3.0.txt
// @match        https://*.skribbl.io/*
// @grant        none
// @downloadURL none
// ==/UserScript==

/* README:
 *   To mute a player, click their name on the left. When a player is muted, their name
 *     becomes crimson. To unmute, click their name again.
 *   In the chatbox it is impossible to distinguish two players who share a name,
 *     so this script really mutes names, not individual players. Keep this in mind
 *     in case player A leaves after their random name has been muted, and player B with
 *     the same name joins. Player B may or may not be the same player as player A.
 */

(function() {
    let players = new Set(),
        mutedNames = new Set();

    const watch = (id, callback) => {
        new MutationObserver((mutationList, observer) => {
            mutationList.forEach(mutation => callback(mutation));
        }).observe(document.getElementById(id), {
            childList: true,
        })
    };

    watch('boxMessages', mutation => {
        mutation.addedNodes.forEach(message => {
            message.firstChild.tagName === 'B' && mutedNames.has(message.firstChild.innerText.slice(0, -2)) && message.remove();
        });
    });

    watch('containerGamePlayers', mutation => {
        mutation.addedNodes.forEach(player => {
            player.name = player.childNodes[1].firstChild.textContent;
            player.fadein = function () {
                this.childNodes[1].style.color = '';
                this.lastChild.style.visibility = 'visible';
            };
            player.fadeout = function () {
                this.childNodes[1].style.color = 'crimson';
                this.lastChild.style.visibility = 'hidden';
            };
            player.onclick = function () {
                if (mutedNames.has(this.name)) {
                    mutedNames.delete(this.name);
                    players.forEach(player => {
                        player.name === this.name && player.fadein();
                    });
                } else {
                    mutedNames.add(this.name);
                    players.forEach(player => {
                        player.name === this.name && player.fadeout();
                    });
                }
            };
            mutedNames.has(player.name) ? player.fadeout() : player.fadein();
            players.add(player);
        });
        mutation.removedNodes.forEach(player => {
            players.delete(player);
        });
    });
})();