Sorts matchat rooms by the number of users and displays the total user count in the upper right corner of the page in a box.
// ==UserScript==
// @name TaffyLunaRed
// @namespace http://tampermonkey.net/
// @version 0.1
// @description Sorts matchat rooms by the number of users and displays the total user count in the upper right corner of the page in a box.
// @author You
// @match *://*/*
// @grant none
// @license MIT
// ==/UserScript==
(function () {
'use strict';
// Helper function to parse the data from the webpage into a JSON object
function parseRawData(rawData) {
try {
return JSON.parse(rawData);
} catch (error) {
console.error('Error parsing JSON data:', error);
return null;
}
}
// Helper function to create and display the total user count box
function displayTotalUserCount(totalUsers) {
const totalCountBox = document.createElement('div');
totalCountBox.textContent = `Total Losers Online: ${totalUsers}`;
totalCountBox.style.position = 'fixed';
totalCountBox.style.top = '20px';
totalCountBox.style.right = '20px';
totalCountBox.style.backgroundColor = '#f1f1f1';
totalCountBox.style.padding = '10px';
totalCountBox.style.border = '1px solid #ddd';
totalCountBox.style.zIndex = '9999';
totalCountBox.style.textAlign = 'center'; // Center the text
document.body.appendChild(totalCountBox);
}
// Helper function to create a scrollable box for a room's user list
function createScrollableBox(roomData) {
const roomBoxContainer = document.createElement('div');
roomBoxContainer.style.maxHeight = '200px'; // Set a fixed height for the container
roomBoxContainer.style.overflow = 'auto'; // Enable scrolling
const roomBox = document.createElement('div');
roomBox.style.backgroundColor = 'black';
roomBox.style.color = 'pink';
roomBox.style.padding = '10px';
roomBox.style.border = '1px solid #ddd';
roomBox.style.textAlign = 'center'; // Center the text
const usersList = document.createElement('ul');
usersList.style.textAlign = 'center'; // Center the text
const sortedUsers = roomData.users.sort((a, b) => {
if (a.oper && !b.oper) return -1;
if (!a.oper && b.oper) return 1;
if (a.broadcasting && !b.broadcasting) return -1;
if (!a.broadcasting && b.broadcasting) return 1;
return 0;
});
sortedUsers.forEach((user) => {
const userItem = document.createElement('li');
const broadcastingStatus = user.broadcasting ? '📷' : '';
const broadcastingStatusElement = document.createElement('b');
broadcastingStatusElement.textContent = broadcastingStatus;
userItem.textContent = `${user.oper && roomData.room === 'bigchaos951' ? '❤' : '卐'}${user.nick}`;
userItem.appendChild(broadcastingStatusElement);
usersList.appendChild(userItem);
});
roomBox.appendChild(usersList);
roomBoxContainer.appendChild(roomBox);
return roomBoxContainer;
}
// Helper function to create a hyperlink element
function createHyperlink(url, text, roomData) {
const link = document.createElement('a');
link.href = url;
link.textContent = text;
link.style.textAlign = 'center'; // Center the text
link.addEventListener('click', function (event) {
event.preventDefault();
const roomBoxContainer = event.target.parentNode.parentNode.querySelector('div');
const iframe = roomBoxContainer.querySelector('iframe');
if (iframe) {
iframe.src = url;
iframe.style.display = 'block'; // Show the iframe
} else {
const newIframe = document.createElement('iframe');
newIframe.src = url;
newIframe.style.width = '100%';
newIframe.style.height = '100%';
newIframe.style.display = 'block';
roomBoxContainer.appendChild(newIframe);
}
});
return link;
}
// Main function to handle the userscript logic
function main() {
const rawDataElement = document.querySelector('body');
if (!rawDataElement) {
console.error('Raw data element not found in the body.');
return;
}
const rawData = rawDataElement.textContent.trim();
const data = parseRawData(rawData);
if (!data || !data.rooms) {
console.error('Invalid data format:', data);
return;
}
const sortedRooms = data.rooms.sort((a, b) => b.total_users - a.total_users);
// Clear existing content from the body
document.body.textContent = '';
// Calculate and display the total user count
const totalUsers = sortedRooms.reduce((total, room) => total + room.total_users, 0);
displayTotalUserCount(totalUsers);
// Display the sorted rooms in a grid layout
const gridContainer = document.createElement('div');
gridContainer.style.display = 'grid';
gridContainer.style.gridTemplateColumns = 'repeat(3, 1fr)';
gridContainer.style.gridGap = '10px';
gridContainer.style.marginTop = '50px';
gridContainer.style.marginLeft = '10px';
gridContainer.style.marginRight = '10px';
for (const roomData of sortedRooms) {
const roomContainer = document.createElement('div');
roomContainer.style.backgroundColor = 'white';
roomContainer.style.color = 'black';
roomContainer.style.padding = '10px';
roomContainer.style.border = '1px solid #ddd';
// Create a container for the room name and user count
const roomHeader = document.createElement('div');
roomHeader.style.display = 'fixed';
roomHeader.style.alignItems = 'center';
roomHeader.style.justifyContent = 'space-between';
roomHeader.style.marginBottom = '10px';
const roomName = roomData.room.replace('tinychat^', '');
const roomLink = `https://tinychat.com/room/${encodeURIComponent(roomName)}`;
const linkContainer = document.createElement('div');
linkContainer.style.flexGrow = '0';
linkContainer.style.textAlign = 'center'; // Center the text
const roomLinkElement = createHyperlink(roomLink, roomName, roomData);
linkContainer.appendChild(roomLinkElement);
roomHeader.appendChild(linkContainer);
const userCount = document.createElement('span');
userCount.style.fontWeight = 'bold';
userCount.textContent = `Users: ${roomData.total_users}`;
roomHeader.appendChild(userCount);
roomContainer.appendChild(roomHeader);
// Create a container for the iframe and the user list
const contentContainer = document.createElement('div');
contentContainer.style.textAlign = 'center'; // Center the content
// Create a scrollable box for the user list
const roomBox = createScrollableBox(roomData);
contentContainer.appendChild(roomBox);
// Create an iframe element
const iframe = document.createElement('iframe');
iframe.src = roomLink;
iframe.style.width = '100%';
iframe.style.height = '100%';
iframe.style.display = 'none'; // Hide the iframe initially
contentContainer.appendChild(iframe);
// Set iframes to be inactive until toggled on
const iframes = document.querySelectorAll('iframe');
iframes.forEach((iframe) => {
iframe.style.pointerEvents = 'none';
iframe.style.display = 'none';
});
// Add event listener to toggle iframe visibility
gridContainer.addEventListener('click', function(event) {
if (event.target.tagName === 'A') {
const contentContainer = event.target.parentNode.parentNode.querySelector('div');
const existingIframe = contentContainer.querySelector('iframe');
if (existingIframe) {
existingIframe.remove();
} else {
const newIframe = document.createElement('iframe');
newIframe.src = event.target.href;
newIframe.style.width = '100%';
newIframe.style.height = '100%';
contentContainer.appendChild(newIframe);
}
}
});
roomContainer.appendChild(contentContainer);
gridContainer.appendChild(roomContainer);
}
document.body.appendChild(gridContainer);
document.body.style.backgroundColor = 'black';
document.body.style.backgroundImage = 'url(https://i.imgur.com/CtA7X1R.gif)'; // Set the background image
}
// Execute the main function when the page is fully loaded
window.addEventListener('load', main);
})();