Show osu! BP Index numbers

Display your BP index on your osu! profile page.
Ask a question, post a review, or report the script.
Wrap lines
// ==UserScript==
// @name         Show osu! BP Index numbers
// @namespace    http://tampermonkey.net/
// @version      0.6
// @description  Display your BP index on your osu! profile page.
// @author       NaughtyChas
// @tag          osu
// @license      MIT
// @match        https://osu.ppy.sh/users/*
// @icon         https://github.com/ppy/osu/blob/master/assets/lazer.png
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    function addBpNumbers() {
        // Find all 'play-detail-list u-relative'
        const scoreListContainers = document.querySelectorAll('.play-detail-list.u-relative');

        let targetScoreListContainer = null;

        if (scoreListContainers.length >= 2) {
            // There will be three same containers
            // for pinned scores, best plays and #1 scores.
            // Here we are targeting to best plays (
            targetScoreListContainer = scoreListContainers[1];
        }

        if (targetScoreListContainer) {
            const scoreEntries = targetScoreListContainer.querySelectorAll('.play-detail.play-detail--highlightable');

            scoreEntries.forEach((entry, index) => {
                if (!entry.querySelector('.bp-number')) {
                    const bpNumberSpan = document.createElement('span');
                    bpNumberSpan.classList.add('bp-number');
                    bpNumberSpan.textContent = `${index + 1}`;

                    bpNumberSpan.style.marginLeft = '-17px';
                    bpNumberSpan.style.fontWeight = 'bold';
                    bpNumberSpan.style.fontSize = '14px';
                    bpNumberSpan.style.color = '#fff';
                    bpNumberSpan.style.minWidth = '40px';
                    bpNumberSpan.style.textAlign = 'center';

                    const firstGroup = entry.querySelector('.play-detail__group--top');

                    if (firstGroup) {
                        firstGroup.prepend(bpNumberSpan);
                    }
                }
            });
        }
    }

    setTimeout(addBpNumbers, 500);

    // For scores that are loaded dynamically. 
    // Bro is writing code with defensive measures.
    const observer = new MutationObserver(addBpNumbers);
    observer.observe(document.body, { childList: true, subtree: true });

})();