StumbleChat Alternate Directory View

StumbleChat Room Sorter

Sort and display rooms by number of broadcasters and users, with toggle functionality
目前為 2024-07-25 提交的版本，檢視最新版本。
安裝腳本 ?
換行
// ==UserScript==
// @name         StumbleChat Room Sorter
// @namespace    http://tampermonkey.net/
// @version      0.8
// @description  Sort and display rooms by number of broadcasters and users, with toggle functionality
// @author       You
// @match        https://stumblechat.com/*
// @exclude      https://stumblechat.com/room/*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    const button = document.createElement('button');
    button.innerHTML = 'Sort Rooms';
    button.style.position = 'fixed';
    button.style.top = '10px';
    button.style.right = '200px';
    button.style.zIndex = '1000';
    button.style.padding = '10px';
    button.style.backgroundColor = '#00ff0080';
    button.style.color = 'white';
    button.style.border = 'none';
    button.style.borderRadius = '5px';
    button.style.cursor = 'pointer';
    document.body.appendChild(button);

    let originalContent = '';

    function sortRooms() {
        const content = document.querySelector('.content');
        if (!originalContent) {
            originalContent = content.innerHTML;
        }

        const rooms = Array.from(document.querySelectorAll('.grid-item'));
        rooms.sort((a, b) => {
            const aBroadcasters = parseInt(a.querySelector('.detailbadge.broadcast').textContent);
            const bBroadcasters = parseInt(b.querySelector('.detailbadge.broadcast').textContent);
            const aUsers = parseInt(a.querySelector('.detailbadge.users').textContent);
            const bUsers = parseInt(b.querySelector('.detailbadge.users').textContent);

            if (aBroadcasters === bBroadcasters) {
                return bUsers - aUsers;
            }
            return bBroadcasters - aBroadcasters;
        });

        content.innerHTML = '';

        const sortedContainer = document.createElement('div');
        sortedContainer.style.display = 'flex';
        sortedContainer.style.flexDirection = 'column';
        sortedContainer.style.alignItems = 'center';
        sortedContainer.style.width = '60%';
        sortedContainer.style.margin = '0 auto';

        rooms.forEach(room => {
            const roomName = room.querySelector('.roomname h3').textContent;
            const broadcasters = room.querySelector('.detailbadge.broadcast').textContent;
            const users = room.querySelector('.detailbadge.users').textContent;
            const roomLink = room.querySelector('.slideshow a').getAttribute('href');

            const roomInfo = document.createElement('div');
            roomInfo.style.margin = '10px';
            roomInfo.style.padding = '10px';
            roomInfo.style.borderRadius = '1rem';
            roomInfo.style.backgroundColor = '#00000080';
            roomInfo.style.width = '100%';
            roomInfo.style.textAlign = 'center';
            roomInfo.style.color = 'white';
            roomInfo.style.boxShadow = '0 4px 8px rgba(0, 0, 0, 0.2)';
            roomInfo.style.border = '2px solid orange';
            roomInfo.style.cursor = 'pointer';
            roomInfo.addEventListener('click', () => {
                window.location.href = roomLink;
            });

            roomInfo.innerHTML = `
                <h3>${roomName}</h3>
                <p>Broadcasters: ${broadcasters}</p>
                <p>Users: ${users}</p>
            `;

            const slideshow = room.querySelector('.slideshow').cloneNode(true);
            const slides = slideshow.querySelectorAll('.slides');
            const gridContainer = document.createElement('div');
            gridContainer.style.display = 'grid';
            gridContainer.style.gridTemplateColumns = 'repeat(auto-fill, minmax(300px, 1fr))';
            gridContainer.style.gap = '5px';
            gridContainer.style.padding = '5px';
            gridContainer.style.justifyContent = 'center';
            gridContainer.style.borderRadius = '5px';

            slides.forEach(slide => {
                const img = slide.querySelector('img');
                if (img) {
                    const imgContainer = document.createElement('div');
                    imgContainer.style.borderRadius = '5px';
                    imgContainer.style.overflow = 'hidden';
                    img.style.width = '100%';
                    img.style.height = 'auto';
                    imgContainer.appendChild(img.cloneNode(true));
                    gridContainer.appendChild(imgContainer);
                }
            });

            roomInfo.appendChild(gridContainer);
            sortedContainer.appendChild(roomInfo);
        });

        content.appendChild(sortedContainer);

        button.innerHTML = 'Show Original View';
        button.style.backgroundColor = '#ff000080';
        button.removeEventListener('click', sortRooms);
        button.addEventListener('click', showOriginalView);
    }

    function showOriginalView() {
        const content = document.querySelector('.content');
        content.innerHTML = originalContent;

        button.innerHTML = 'Sort Rooms';
        button.style.backgroundColor = '#00ff0080';
        button.removeEventListener('click', showOriginalView);
        button.addEventListener('click', sortRooms);
    }

    button.addEventListener('click', sortRooms);
})();