☰

Connected Users

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

  1. // ==UserScript==
  2. // @name         Connected Users
  3. // @namespace    http://tampermonkey.net/
  4. // @version      1.1.1
  5. // @description  Shows the amount of connected users next to the amount of all users
  6. // @author       guildedbird & azti
  7. // @match        https://pixelplace.io/*
  8. // @grant        none
  9. // @license      MIT
  10. // ==/UserScript==
  11.  
  12. (function () {
  13.     'use strict';
  14.  
  15.     let canvasTotal = null;
  16.     let lastUserTotal = null;
  17.     let lastDisplay = '';
  18.  
  19.     function update(force = false) {
  20.         const value1 = document.querySelector('#chat .online span.value');
  21.         const value2 = document.querySelector('span.sub-value');
  22.  
  23.         if (!value1 || !value2) return;
  24.  
  25.         const titleText = value1.title;
  26.         const matchUserTotal = titleText.match(/^\d+/);
  27.         const matchCanvasTotal = titleText.match(/\s\d+/);
  28.  
  29.         if (!matchUserTotal) return;
  30.  
  31.         const currentUserTotal = parseInt(matchUserTotal[0]);
  32.  
  33.         if (canvasTotal === null && matchCanvasTotal) {
  34.             canvasTotal = parseInt(matchCanvasTotal[0].trim());
  35.         }
  36.  
  37.         const newDisplay = (() => {
  38.             let result = `${currentUserTotal}`;
  39.             if (canvasTotal && canvasTotal > 0) {
  40.                 result += ` & ${canvasTotal}`;
  41.             }
  42.             return `(${result})`;
  43.         })();
  44.  
  45.         if (force || currentUserTotal !== lastUserTotal || newDisplay !== lastDisplay) {
  46.             value2.textContent = newDisplay;
  47.             value2.style.setProperty('display', 'inline', 'important');
  48.             value2.style.setProperty('color', '#b3b3b3', 'important');
  49.  
  50.             lastUserTotal = currentUserTotal;
  51.             lastDisplay = newDisplay;
  52.         }
  53.     }
  54.  
  55.     function updateCanvasTotal() {
  56.         const players = document.querySelectorAll('.players-list .player');
  57.         const newTotal = players.length;
  58.  
  59.         if (newTotal !== canvasTotal) {
  60.             canvasTotal = newTotal;
  61.             update(true);
  62.         }
  63.     }
  64.  
  65.     function observeSubValue() {
  66.         const value2 = document.querySelector('span.sub-value');
  67.         if (value2) {
  68.             const observer = new MutationObserver(() => {
  69.                 value2.style.setProperty('display', 'inline', 'important');
  70.                 value2.style.setProperty('color', '#b3b3b3', 'important');
  71.             });
  72.             observer.observe(value2, { attributes: true, attributeFilter: ['style'] });
  73.         }
  74.     }
  75.  
  76.     update();
  77.     observeSubValue();
  78.  
  79.     const chatElement = document.querySelector('#chat .online');
  80.     if (chatElement) {
  81.         const observer = new MutationObserver(() => {
  82.             const value1 = document.querySelector('#chat .online span.value');
  83.             if (value1) update();
  84.         });
  85.         observer.observe(chatElement, { childList: true, subtree: true, attributes: true });
  86.     }
  87.  
  88.     const playerListElement = document.querySelector('.players-list');
  89.     if (playerListElement) {
  90.         const observer2 = new MutationObserver(() => {
  91.             updateCanvasTotal();
  92.         });
  93.         observer2.observe(playerListElement, { childList: true, subtree: true, attributes: true });
  94.     }
  95. })();