Display top % next to rank on Minesweeper Online PvP page

minesweeper-top-percent.user.js

// ==UserScript==
// @name         Minesweeper Online Top % Rank
// @namespace    https://minesweeper.online/
// @version      1.0
// @description  Display top % next to rank on Minesweeper Online PvP page
// @author       You
// @match        https://minesweeper.online/*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    function updateRankPercent() {
        const rankElem = document.querySelector('#stat_my_rank');
        if (!rankElem) return;

        // Check if it's already added
        if (rankElem.dataset.modified === 'true') return;

        const match = rankElem.textContent.match(/(\d+)\s*\/\s*(\d+)/);
        if (!match) return;

        const rank = parseInt(match[1]);
        const total = parseInt(match[2]);

        if (isNaN(rank) || isNaN(total) || total === 0) return;

        const topPercent = (rank / total) * 100;
        const formatted = topPercent.toFixed(2);

        // Create and append the new span
        const span = document.createElement('span');
        span.textContent = ` (Top ${formatted}%)`;
        span.style.marginLeft = '6px';
        span.style.color = '#888';

        rankElem.appendChild(span);
        rankElem.dataset.modified = 'true'; // Mark as modified
    }

    // Run initially and observe for changes
    const observer = new MutationObserver(updateRankPercent);
    observer.observe(document.body, { childList: true, subtree: true });

    // Also run directly after load
    window.addEventListener('load', () => {
        setTimeout(updateRankPercent, 1000); // Give time for content to load
    });
})();