// ==UserScript==
// @name         Shredsauce dark Theme
// @namespace    stylish
// @version      1.7.1
// @description  All-black dark theme for Shredsauce website by Gheat
// @match        *://shredsauce.com/*
// @run-at       document-start
// @grant        none
// @license      All Rights Reserved
// @downloadURL none
// ==/UserScript==

(function() {
    const style = document.createElement('style');
    style.innerText = `
        body, html {
            background-color: #000 !important;
            color: #fff !important;
        }

        mobileContainer, #webContainer, .scroll-section, .carousel, .navbar, footer, #contentContainer, #playerContainerOverlay {
            background-color: #000 !important;
            color: #fff !important;
        }

        button, .btn, .flickity-button, .playButton, #playButton {
            background-color: #333 !important;
            color: #fff !important;
            border: 1px solid #555 !important;
        }

        button:hover, .btn:hover, .flickity-button:hover, .playButton:hover, #playButton:hover {
            background-color: #444 !important;
        }

        .navbar, .navbar nav ul li a, .social-icons a, .dropdown-content a, .logoContainer img, .videoOverlayLogo {
            filter: brightness(0) invert(1) !important;
        }

        #playContainerInfoBox, .updateTitle, .text, .leaderboardContainer, .skyscraperContainer, .pull-right, .clearfix {
            background-color: #000 !important;
            color: #fff !important;
        }

        img, video, .carousel img, .flickity-button svg, .videoOverlayLogo {
            filter: brightness(0.8) !important;
        }

        #playIcon path {
            fill: #fff !important;
        }

        a, a:link, a:visited {
            color: #66ccff !important;
        }

        a:hover {
            color: #00aaff !important;
        }

        .adContainer, .adsbygoogle, iframe, [class*="ad"], .ad-container, #div-gpt-ad, .banner-ad, .myAds {
            display: none !important;
        }

        * {
            background-color: transparent !important;
        }

        #gheat-message {
            position: fixed;
            bottom: 10px;
            right: 20px;
            font-size: 12px;
            color: #aaa;
            font-family: monospace;
            z-index: 99999;
        }
        #leaderboardContainer,
        #skyscraperContainer,
        div[class*="8p7p6pdb282"] {
            display: none !important;
        }
    `;
    document.head.appendChild(style);

    window.addEventListener('load', () => {
        const msg = document.createElement('div');
        msg.id = 'gheat-message';
        msg.innerText = 'https://sites.google.com/view/shredhub/home - Gheat';
        document.body.appendChild(msg);

        const allowedIds = ['webContainer', 'mobileContainer', 'gheat-message', 'gheat-menu', 'slvsh-hud', 'slvsh-p1-bg', 'slvsh-p2-bg'];

        function nukeUnwanted() {
            [...document.body.children].forEach(el => {
                const isAllowed = allowedIds.includes(el.id);
                if (!isAllowed) el.remove();
            });
        }

        setTimeout(() => {
            allowedIds.push('gheat-menu');
            nukeUnwanted();

            const observer = new MutationObserver(() => nukeUnwanted());
            observer.observe(document.body, { childList: true, subtree: true });
        }, 5000);
    });
})();

window.addEventListener('load', () => {
    const titleDiv = document.querySelector('.updateTitle');
    if (titleDiv) titleDiv.textContent = '';

    const msgContainer = document.querySelector('.text');
    if (msgContainer) {
        msgContainer.innerHTML = `
            <em>sites.google.com/view/shredhub</em><br>
            <em>April 6 2025</em><br><br>
            Thank you for using my theme<br><br>
            - Gheat
        `;
    }
});

window.addEventListener('load', () => {
    const menu = document.createElement('div');
    menu.id = 'gheat-menu';
    menu.innerHTML = `
    <div style="position: fixed; top: 50%; right: 20px; transform: translateY(-50%); background: rgba(0,0,0,0.75); color: white; font-family: Arial, sans-serif; padding: 20px; border-radius: 12px; z-index: 99999; box-shadow: 0 0 10px rgba(0,0,0,0.5); text-align: center; width: max-content;">
        <div style="display: flex; flex-direction: column; align-items: center;">
            <div style="font-weight: bold; font-size: 16px; margin-bottom: 12px;">Gheat Menu</div>
            <button id="cheatBtn" style="margin: 5px; padding: 6px 12px; width: 140px; border: none; border-radius: 6px; background: #444; color: white; cursor: pointer;">Cheat Sheet</button>
            <button id="toolsBtn" style="margin: 5px; padding: 6px 12px; width: 140px; border: none; border-radius: 6px; background: #444; color: white; cursor: pointer;">Tools</button>
            <button id="betaBtn" style="margin: 5px; padding: 6px 12px; width: 140px; border: none; border-radius: 6px; background: #444; color: white; cursor: pointer;">Beta</button>
            <button id="slvshBtn" style="margin: 5px; padding: 6px 12px; width: 140px; border: none; border-radius: 6px; background: #444; color: white; cursor: pointer;">SLVSH</button>
            <div id="slvshMenu" style="display:none; margin-top: 6px; flex-wrap: wrap; justify-content: center; gap: 4px;">
                <div style="display: flex; gap: 4px;">
                    <button style="width: 65px; padding: 4px; border: none; border-radius: 4px; background: #555; color: white; cursor: pointer;">P1 +</button>
                    <button style="width: 65px; padding: 4px; border: none; border-radius: 4px; background: #555; color: white; cursor: pointer;">P1 -</button>
                </div>
                <div style="display: flex; gap: 4px;">
                    <button style="width: 65px; padding: 4px; border: none; border-radius: 4px; background: #555; color: white; cursor: pointer;">P2 +</button>
                    <button style="width: 65px; padding: 4px; border: none; border-radius: 4px; background: #555; color: white; cursor: pointer;">P2 -</button>
                </div>
            </div>
        </div>
    </div>`;

    document.body.appendChild(menu);

    document.getElementById('cheatBtn').onclick = () => {
        window.open('https://sites.google.com/view/shredhub/cheats', '_blank');
    };

    document.getElementById('toolsBtn').onclick = () => {
        alert('Tools menu coming soon 😎');
    };

    document.getElementById('betaBtn').onclick = () => {
        window.location.href = 'https://shredsauce.com/beta';
    };

    document.getElementById('slvshBtn').onclick = () => {
        const menu = document.getElementById('slvshMenu');
        const hud = document.getElementById('slvsh-hud');
        const isNowOpen = menu.style.display !== 'flex';
        menu.style.display = isNowOpen ? 'flex' : 'none';
        menu.style.flexDirection = 'column';
        menu.style.alignItems = 'center';

        if (isNowOpen && !hud) {
            const newHud = document.createElement('div');
            newHud.id = 'slvsh-hud';
            newHud.style.position = 'fixed';
            newHud.style.top = '20px';
            newHud.style.left = '26px';
            newHud.style.display = 'flex';
            newHud.style.flexDirection = 'column';
            newHud.style.gap = '16px';
            newHud.style.fontFamily = 'Arial, sans-serif';
            newHud.style.fontSize = '20px';
            newHud.style.color = '#fff';
            newHud.style.textShadow = '1px 1px 2px rgba(0,0,0,0.7)';
            newHud.style.zIndex = '100000';
            newHud.style.pointerEvents = 'none';
            newHud.innerHTML = `
                <div><strong>P1 - </strong> <span id="p1Letters"></span></div>
                <div><strong>P2 - </strong> <span id="p2Letters"></span></div>
            `;
            document.body.appendChild(newHud);

            newHud.querySelectorAll('*').forEach(el => {
                el.style.textShadow = '1px 1px 2px rgba(0, 0, 0, 0.7)';
            });

            const slvshBtns = document.querySelectorAll('#slvshMenu button');
            const p1Letters = document.getElementById('p1Letters');
            const p2Letters = document.getElementById('p2Letters');

            slvshBtns[0].onclick = () => {
                if (p1Letters.textContent.length < 5) {
                    p1Letters.textContent += 'SLVSH'[p1Letters.textContent.length];
                }
            };
            slvshBtns[1].onclick = () => {
                p1Letters.textContent = p1Letters.textContent.slice(0, -1);
            };
            slvshBtns[2].onclick = () => {
                if (p2Letters.textContent.length < 5) {
                    p2Letters.textContent += 'SLVSH'[p2Letters.textContent.length];
                }
            };
            slvshBtns[3].onclick = () => {
                p2Letters.textContent = p2Letters.textContent.slice(0, -1);
            };
        } else if (!isNowOpen && hud) {
            hud.remove();
        }
    };
});