☰

ClopoStars Navigation Menu

A simple script to enhance the ClopoStars 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-04 提交的版本，查看 最新版本。

// ==UserScript==
// @name         ClopoStars Navigation Menu
// @namespace    http://tampermonkey.net/
// @version      1.0
// @description  A simple script to enhance the ClopoStars 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
        const marketplaceMenu = [...document.querySelectorAll('.dropdown')].find(nav => nav.textContent.includes('MARKETPLACE'));

        if (marketplaceMenu) {
            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';
            link.style.textDecoration = 'none';
            link.innerHTML = '<span>MARKETPLACE</span>';

            marketplaceMenu.innerHTML = '';
            marketplaceMenu.appendChild(link);
        }
    }

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