Noise's 2016 Website UI Tweaks

Greasy Fork is available in English.
Noise's 2016 Website UI Tweaks

Multiple UI Tweaks to make the website look more accurate to how it was back in 2016!
שאל שאלה, פרסם ביקורת, או דווח על הסקריפט.
Wrap lines
// ==UserScript==
// @name         Noise's 2016 Website UI Tweaks
// @namespace    http://tampermonkey.net/
// @version      2.3
// @description  Multiple UI Tweaks to make the website look more accurate to how it was back in 2016!
// @author       The Noise!
// @match        https://*.roblox.com/*
// @icon        data:image/png;base64,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
// @license MIT
// ==/UserScript==
 
(function () {
    'use strict';
 
    // Define replaceAvatarImages function at the top level
    const replaceAvatarImages = () => {
        // Only run on specified pages
        if (!window.location.href.includes('roblox.com/home') &&
            !window.location.href.includes('roblox.com/communities/') &&
            !window.location.href.includes('roblox.com/users/') &&
            !window.location.href.includes('roblox.com/search/users')) {
            return;
        }
 
        // First, ensure header avatars are always headshots
        const headerAvatars = [
            '#home-header img.avatar-card-image',
            '.container-header img[src*="AvatarHeadshot"]'
        ];
 
        headerAvatars.forEach(selector => {
            const headerAvatar = document.querySelector(selector);
            if (headerAvatar && headerAvatar.src.includes('30DAY-Avatar-')) {
                headerAvatar.src = headerAvatar.src.replace('30DAY-Avatar-', '30DAY-AvatarHeadshot-');
                console.log('Restored header avatar to headshot');
            }
        });
 
        // Handle user search page
        if (window.location.href.includes('roblox.com/search/users')) {
            const searchResultImages = document.querySelectorAll('.avatar-card-container img[src^="https://tr.rbxcdn.com/30DAY-AvatarHeadshot-"]');
            searchResultImages.forEach(image => {
                if (image.closest('.container-header')) return; // Skip container-header images
                const newSrc = image.src.replace("30DAY-AvatarHeadshot-", "30DAY-Avatar-");
                image.src = newSrc;
                console.log(`Updated search result image source to: ${newSrc}`);
            });
            return;
        }
 
        // Handle friends/followers/following pages
        if (window.location.href.includes('roblox.com/users/') && window.location.href.includes('#!/')) {
            const userListImages = document.querySelectorAll('.list-item img[src^="https://tr.rbxcdn.com/30DAY-AvatarHeadshot-"]');
            userListImages.forEach(image => {
                if (image.closest('.container-header')) return; // Skip container-header images
                const newSrc = image.src.replace("30DAY-AvatarHeadshot-", "30DAY-Avatar-");
                image.src = newSrc;
                console.log(`Updated user list image source to: ${newSrc}`);
            });
            return;
        }
 
        // Handle avatars in friends carousel on user profile pages
        if (window.location.href.includes('roblox.com/users/')) {
            const friendsCarouselImages = document.querySelectorAll('.friends-carousel-container img[src^="https://tr.rbxcdn.com/30DAY-AvatarHeadshot-"]');
            friendsCarouselImages.forEach(image => {
                if (image.closest('.container-header')) return; // Skip container-header images
                const newSrc = image.src.replace("30DAY-AvatarHeadshot-", "30DAY-Avatar-");
                image.src = newSrc;
                console.log(`Updated friends carousel image source to: ${newSrc}`);
            });
            return;
        }
 
        // Handle other pages (home and communities)
        const avatarImages = document.querySelectorAll('img[src^="https://tr.rbxcdn.com/30DAY-AvatarHeadshot-"]');
        avatarImages.forEach(image => {
            if (image.closest('#home-header') || image.closest('.container-header')) {
                return;
            }
 
            if (image.id === "home-avatar-thumb") {
                console.log('Skipped updating home avatar image.');
                return;
            }
 
            const newSrc = image.src.replace("30DAY-AvatarHeadshot-", "30DAY-Avatar-");
            image.src = newSrc;
            console.log(`Updated image source to: ${newSrc}`);
        });
    };
 
    const modifyUI = () => {
        // Remove "Money" navigation element
        const moneyNav = document.querySelector('a#nav-money');
        if (moneyNav) {
            moneyNav.remove();
            console.log('Removed "Money" navigation element.');
        }
 
        // Remove "Premium" navigation element
        const premiumNav = document.querySelector('a#nav-premium');
        if (premiumNav) {
            premiumNav.remove();
            console.log('Removed "Premium" navigation element.');
        }
 
        // Add Message button to user profile pages
        if (window.location.href.includes('roblox.com/users/')) {
            const addFriendButton = document.querySelector('.details-actions.desktop-action .btn-friends');
            if (addFriendButton && !document.querySelector('.btn-message')) {
                const messageButtonLi = document.createElement('li');
                messageButtonLi.className = 'btn-message';
                messageButtonLi.innerHTML = `
                    <button class="btn-control-md" ng-disabled="!profileHeaderLayout.canMessage || profileHeaderLayout.userId == 0" ng-click="sendMessage()" disabled="disabled">
                        Message
                    </button>
                `;
                addFriendButton.insertAdjacentElement('afterend', messageButtonLi);
                console.log('Added Message button next to Add Friend button');
            }
        }
 
        // Replace "Communities" with "Groups"
        document.querySelectorAll('span.font-header-2.dynamic-ellipsis-item[title="Communities"]').forEach(element => {
            if (element.textContent.trim() === "Communities") {
                element.textContent = "Groups";
                console.log('Replaced "Communities" with "Groups".');
            }
        });
 
        // Replace "Communities" in visible text nodes
        document.querySelectorAll('*:not(script):not(style)').forEach(node => {
            if (node.childNodes.length) {
                node.childNodes.forEach(child => {
                    if (child.nodeType === Node.TEXT_NODE && child.nodeValue.includes("Communities")) {
                        child.nodeValue = child.nodeValue.replace(/Communities/g, "Groups");
                    }
                });
            }
        });
 
        // Replace group-related text
        const elements = {
            'button#group-join-button': 'Join Community|Join Group',
            'button.ng-binding': 'Leave Community|Leave Group',
            'a.ng-binding': 'Configure Community|Configure Group'
        };
 
        for (const [selector, replacement] of Object.entries(elements)) {
            const [oldText, newText] = replacement.split('|');
            document.querySelectorAll(selector).forEach(element => {
                if (element.textContent.trim() === oldText) {
                    element.textContent = newText;
                    console.log(`Replaced "${oldText}" with "${newText}"`);
                }
            });
        }
    };
 
    // Comments section functionality - only runs on game pages
    if (window.location.href.includes('roblox.com/games/')) {
        const addCommentsSection = (forceFallback = false) => {
            if (document.getElementById('AjaxCommentsContainer')) return true;
 
            const commentsHTML = `
                <div id="AjaxCommentsContainer" class="comments-container" data-asset-id="32990482" data-total-collection-size="" data-is-user-authenticated="False" data-signin-url="https://www.roblox.com/newlogin?returnUrl=%2Fgames%2F32990482%2FFlood-Escape">
                    <h3>Comments</h3>
                    <div class="section-content AddAComment">
                        <div class="comment-form">
                            <form class="form-horizontal ng-pristine ng-valid" role="form">
                                <div class="form-group">
                                    <textarea class="form-control input-field rbx-comment-input blur" placeholder="Write a comment!" rows="1"></textarea>
                                    <div class="rbx-comment-msgs">
                                        <span class="rbx-comment-error text-error" style="display: none;"> </span>
                                        <span class="rbx-comment-count small"></span>
                                    </div>
                                </div>
                                <button type="button" class="btn-secondary-md rbx-post-comment">Post Comment</button>
                            </form>
                        </div>
                        <div class="comments vlist">
                            <div class="empty">No comments found.</div>
                        </div>
                    </div>
                </div>
            `;
 
            if (!forceFallback) {
                const badgesList = document.querySelector('.stack.badge-container.game-badges-list');
                if (badgesList) {
                    badgesList.insertAdjacentHTML('afterend', commentsHTML);
                    setupCommentButton();
                    return true;
                }
                return false;
            }
 
            const recommendedSection = document.querySelector('.container-list.games-detail');
            if (recommendedSection) {
                recommendedSection.insertAdjacentHTML('beforebegin', commentsHTML);
                setupCommentButton();
                return true;
            }
 
            return false;
        };
 
        const setupCommentButton = () => {
            const postCommentButton = document.querySelector('.rbx-post-comment');
            if (postCommentButton) {
                postCommentButton.addEventListener('click', (event) => {
                    event.preventDefault();
                });
            }
        };
 
        const init = () => {
            let badgeAttempts = 0;
            const maxBadgeAttempts = 15;
 
            const badgeInterval = setInterval(() => {
                badgeAttempts++;
                if (addCommentsSection(false)) {
                    clearInterval(badgeInterval);
                } else if (badgeAttempts >= maxBadgeAttempts) {
                    clearInterval(badgeInterval);
                    addCommentsSection(true);
                }
            }, 1000);
 
            addCommentsSection(false);
        };
 
        init();
    }
 
    // Run initial modifications
    modifyUI();
    replaceAvatarImages();
 
    // Observe the DOM for dynamic changes with both functions
    const observer = new MutationObserver(() => {
        modifyUI();
        replaceAvatarImages();
    });
 
    observer.observe(document.body, { childList: true, subtree: true });
})();