☰

Connected Users

Shows the amount of connected users next to the amount of all users

// ==UserScript==
// @name         Connected Users
// @namespace    http://tampermonkey.net/
// @version      1.1
// @description  Shows the amount of connected users next to the amount of all users
// @author       guildedbird & azti
// @match        https://pixelplace.io/*
// @grant        none
// @license      MIT
// ==/UserScript==

(function() {
    'use strict';

    let canvasTotal = 0
    function update() {
        let value1 = document.querySelector('#chat .online span.value');
        let value2 = document.querySelector('span.sub-value');

        if (value1 && value2) {
            let titleText = value1.title;
            let matchUserTotal = titleText.match(/^\d+/);
            let matchCanvasTotal = titleText.match(/\s\d+/);
            if (matchCanvasTotal) canvasTotal = matchCanvasTotal
            if (matchUserTotal) {
                let result = matchUserTotal
                if (canvasTotal > 0) {
                    result += ` & ${canvasTotal}`
                }
                value2.textContent = `(${result})`;
                value2.style.display = 'inline';
                value2.style.color = '#b3b3b3';
            }
        }
    }

    update();

    let observer = new MutationObserver(update);
    let chatElement = document.querySelector('#chat .online');
    if (chatElement) {
        observer.observe(chatElement, { childList: true, subtree: true, attributes: true });
    }

    function updateCanvasTotal() {
        const playerList = document.querySelectorAll('.players-list .player')
        canvasTotal = 0
        playerList.forEach(() => {
            canvasTotal += 1
        })
        update()
    }

    let observer2 = new MutationObserver(updateCanvasTotal)
    let playerListElement = document.querySelector('.players-list');
    if (playerListElement)
    observer2.observe(playerListElement, { childList: true, subtree: true, attributes: true });
})();