☰

ClopoStars Navigation Menu

A simple script to enhance the ClopoStars.com navigation menu for a smoother, more intuitive experience.This script is shared with the hope that it helps, but please remember—use it at your own risk. I’m not responsible for any unexpected issues, data loss, or account problems. Tinker wisely, stay safe, and happy browsing!

目前為 2025-02-06 提交的版本，檢視 最新版本。

// ==UserScript==
// @name         ClopoStars Navigation Menu
// @namespace    http://tampermonkey.net/
// @version      1.4
// @description  A simple script to enhance the ClopoStars.com navigation menu for a smoother, more intuitive experience.This script is shared with the hope that it helps, but please remember—use it at your own risk. I’m not responsible for any unexpected issues, data loss, or account problems. Tinker wisely, stay safe, and happy browsing!
// @author       ChatGPT-4-turbo
// @match        https://clopostars.com/*
// @grant        none
// @license MIT
// ==/UserScript==

(function() {
    'use strict';

    const menus = [
        {
            name: 'MY BASE',
            selector: '.dropdown-base ul',
            items: [
                { name: 'My Cards', url: 'https://clopostars.com/base', icon: '../../../../assets/icons/heroicons/outline/credit-card.svg' },
                { name: 'My Profile', url: 'https://clopostars.com/base/profile', icon: '../../../../assets/icons/heroicons/outline/user-circle.svg' }
            ]
        },
        {
            name: 'COMPETITIONS',
            selector: '.dropdown-competition ul',
            items: [
                { name: 'UpComing', url: 'https://clopostars.com/competitions/upcoming', icon: '../../../../assets/icons/heroicons/outline/forward.svg' },
                { name: 'In Progress', url: 'https://clopostars.com/competitions/progress', icon: '../../../../assets/icons/heroicons/outline/cupe-transparent.svg' },
                { name: 'Finished', url: 'https://clopostars.com/competitions/finished', icon: '../../../../assets/icons/heroicons/outline/check.svg' }
            ]
        },
        {
            name: 'ALLIES',
            selector: '.dropdown-allies ul',
            items: [
                { name: 'Prestige ranking', url: 'https://clopostars.com/allies/prestige', icon: '../../../../assets/icons/heroicons/outline/academic-cap.svg' },
                { name: 'Cards', url: 'https://clopostars.com/allies/cards', icon: '../../../../assets/icons/heroicons/outline/swatch.svg' },
                { name: 'Yesterday Scores', url: 'https://clopostars.com/allies/yesterday-scores', icon: '../../../../assets/icons/heroicons/outline/swatch.svg' },
                { name: 'Statistics', url: 'https://clopostars.com/allies/statistics', icon: '../../../../assets/icons/heroicons/outline/swatch.svg' },
                { name: 'Card Comparison', url: 'https://clopostars.com/allies/cards-comparison', icon: '../../../../assets/icons/heroicons/outline/swatch.svg' },
                { name: 'Help', url: 'https://clopostars.com/allies/help', icon: '../../../../assets/icons/heroicons/outline/question-mark-circle.svg' }
            ]
        },
        {
            name: 'SHOP',
            selector: '.dropdown-base ul',
            findByText: 'SHOP',
            items: [
                { name: 'Offers', url: 'https://clopostars.com/shop/offers', icon: '../../../../assets/icons/heroicons/outline/shopping-bag.svg' }
            ]
        }
    ];

    function waitForElement(selector, callback) {
        const interval = setInterval(() => {
            const element = document.querySelector(selector);
            if (element) {
                clearInterval(interval);
                callback(element);
            }
        }, 500);
    }

    function initializeMenus() {
        menus.forEach(menu => {
            const menuElement = menu.findByText
                ? [...document.querySelectorAll('.dropdown-nav')].find(nav => nav.textContent.includes(menu.findByText))?.querySelector(menu.selector)
                : document.querySelector(menu.selector);

            if (menuElement) {
                menuElement.innerHTML = '';

                menu.items.forEach(item => {
                    const li = document.createElement('li');
                    li.className = 'flex font-semibold text-gray-600';
                    li.innerHTML = `
                        <div class="dropdown relative flex w-full">
                            <a href="${item.url}" class="mx-3 flex w-full items-center justify-start rounded-md py-2 px-2 text-xs font-semibold text-gray-600 hover:bg-gray-100 hover:text-primary-500">
                                <span class="mr-2 text-gray-400">
                                    <img src="${item.icon}" class="w-5 h-5">
                                </span>
                                <span class="ml-1">${item.name}</span>
                            </a>
                        </div>
                    `;
                    menuElement.appendChild(li);
                });
            }
        });

        // Special handling for 'MARKETPLACE' menu
        GM_addStyle(`.menu-btn[href="https://clopostars.com/market"]:hover {color: rgb(78, 253, 107) !important;}`);
        const marketplaceMenu = [...document.querySelectorAll('.dropdown')].find(nav => nav.textContent.includes('MARKETPLACE'));

        if (marketplaceMenu) {
            const wrapperDiv = document.createElement('div');
            wrapperDiv.className = 'dropdown-nav relative inline-block'; // Same as other menus

            const link = document.createElement('a');
            link.href = 'https://clopostars.com/market';
            link.className = 'menu-btn text-gray-600 hover:text-primary-500 px-3 py-2 text-xs font-semibold flex items-center justify-start';
            link.style.textDecoration = 'none'; // Prevent underline
            link.innerHTML = '<span>MARKETPLACE</span>';

            wrapperDiv.appendChild(link);
            marketplaceMenu.replaceWith(wrapperDiv); // Replace original button with formatted version
        }
    }

    waitForElement('.dropdown-nav', initializeMenus);
})();