ShowSpinnerCount

Adds spinner count to beatmapset pages
当前为 2022-03-09 提交的版本，查看最新版本。
换行
// ==UserScript==
// @name         ShowSpinnerCount
// @namespace    https://github.com/Magnus-Cosmos
// @version      1.0.0
// @description  Adds spinner count to beatmapset pages
// @author       Magnus Cosmos
// @match        https://osu.ppy.sh/beatmapsets/*
// @require      https://greasyfork.org/scripts/441010-osupageobserver/code/OsuPageObserver.js
// ==/UserScript==

const countSpinnerSvg = `url(data:image/svg+xml;base64,PHN2ZyB4bWxuczpkYz0iaHR0cDovL3B1cmwub3JnL2RjL2VsZW1lbnRzLzEuMS8iIHhtbG5zOmNjPSJodHRwOi8vY3JlYXRpdmVjb21tb25zLm9yZy9ucyMiIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2aWV3Qm94PSIwIDAgNTYyLjUgNTYyLjUiIGhlaWdodD0iNTYyLjUiIHdpZHRoPSI1NjIuNSIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgdmVyc2lvbj0iMS4xIiBpZD0ic3ZnNDE1NSI+PG1ldGFkYXRhIGlkPSJtZXRhZGF0YTQxNjEiPjxyZGY6UkRGPjxjYzpXb3JrIHJkZjphYm91dD0iIj48ZGM6Zm9ybWF0PmltYWdlL3N2Zyt4bWw8L2RjOmZvcm1hdD48ZGM6dHlwZSByZGY6cmVzb3VyY2U9Imh0dHA6Ly9wdXJsLm9yZy9kYy9kY21pdHlwZS9TdGlsbEltYWdlIi8+PGRjOnRpdGxlLz48L2NjOldvcms+PC9yZGY6UkRGPjwvbWV0YWRhdGE+PGRlZnMgaWQ9ImRlZnM0MTU5Ii8+PGcgdHJhbnNmb3JtPSJtYXRyaXgoMS4yNSwwLDAsLTEuMjUsMCw1NjIuNSkiIGlkPSJnNDE2MyI+PGcgaWQ9Imc0MTY1Ii8+PGcgaWQ9Imc0MTY3Ij48cGF0aCBpZD0icGF0aDQxNjkiIHN0eWxlPSJmaWxsOiM0NDExODg7ZmlsbC1vcGFjaXR5OjE7ZmlsbC1ydWxlOmV2ZW5vZGQ7c3Ryb2tlOm5vbmUiIGQ9Im0gNDEwLjg2MzEsMTQ1LjY5OCBjIDQzLjc5NzIsNDMuNzk3MyA0My43OTcyLDExNC44MDY3IDAsMTU4LjYwNCAwLDAgLTEwNi41NjExLDEwNi41NjExIC0xMDYuNTYxMSwxMDYuNTYxMSAtNDMuNzk3Myw0My43OTcyIC0xMTQuODA2Nyw0My43OTcyIC0xNTguNjA0LDAgMCwwIC0xMDYuNTYxMDksLTEwNi41NjExIC0xMDYuNTYxMDksLTEwNi41NjExIC00My43OTcyNTksLTQzLjc5NzMgLTQzLjc5NzI1OSwtMTE0LjgwNjcgMCwtMTU4LjYwNCAwLDAgMTA2LjU2MTA5LC0xMDYuNTYxMDkgMTA2LjU2MTA5LC0xMDYuNTYxMDkgNDMuNzk3MywtNDMuNzk3MjU5IDExNC44MDY3LC00My43OTcyNTkgMTU4LjYwNCwwIDAsMCAxMDYuNTYxMSwxMDYuNTYxMDkgMTA2LjU2MTEsMTA2LjU2MTA5IHoiLz48cGF0aCBpZD0icGF0aDQxNzEiIHN0eWxlPSJmaWxsOiNmZmRkNTU7ZmlsbC1vcGFjaXR5OjE7ZmlsbC1ydWxlOm5vbnplcm87c3Ryb2tlOm5vbmUiIGQ9Im0gMzMxLjI1LDIyNSBjIDAsLTU4LjU5MzggLTQ3LjY1NjMsLTEwNi4yNSAtMTA2LjI1LC0xMDYuMjUgLTU4LjU5MzgsMCAtMTA2LjI1LDQ3LjY1NjIgLTEwNi4yNSwxMDYuMjUgMCw1OC41OTM4IDQ3LjY1NjIsMTA2LjI1IDEwNi4yNSwxMDYuMjUgNTguNTkzNywwIDEwNi4yNSwtNDcuNjU2MiAxMDYuMjUsLTEwNi4yNSB6IE0gMzc1LDIyNSBDIDM3NSwzMDcuODEyNSAzMDcuODEyNSwzNzUgMjI1LDM3NSAxNDIuMTg3NSwzNzUgNzUsMzA3LjgxMjUgNzUsMjI1IDc1LDE0Mi4xODc1IDE0Mi4xODc1LDc1IDIyNSw3NSBjIDgyLjgxMjUsMCAxNTAsNjcuMTg3NSAxNTAsMTUwIHoiLz48ZyB0cmFuc2Zvcm09Im1hdHJpeCgwLjc1LDAsMCwtMC43NSwwLDQ1MCkiIGlkPSJnNDE3MyI+PHBhdGggaWQ9InBhdGg0MTc1IiBzdHlsZT0iZmlsbDogI2ZmZGQ1NTsiIGQ9Im0gMzAwLDIxOC43NTk4IGMgNDQuODY3NywwIDgxLjI0MDIsMzYuMzcyNSA4MS4yNDAyLDgxLjI0MDIgMCw0NC44Njc3IC0zNi4zNzI1LDgxLjI0MDIgLTgxLjI0MDIsODEuMjQwMiAtNDQuODY3NywwIC04MS4yNDAyLC0zNi4zNzI1IC04MS4yNDAyLC04MS4yNDAyIDAsLTQ0Ljg2NzcgMzYuMzcyNSwtODEuMjQwMiA4MS4yNDAyLC04MS4yNDAyIHoiLz48L2c+PC9nPjwvZz48L3N2Zz4=)`;

function staticPage() {
    [this.type, this.id] = location.pathname.split("/").slice(1).map(val => {
        const int = parseInt(val);
        return val == int ? int : val;
    });
}

function getJson(name) {
    const json = document.querySelector(`#json-${name}`);
    if (json?.textContent != null) {
        return JSON.parse(json.textContent);
    }
    return null;
}

function beatmapHandler(beatmapset) {
    const [currMode, currBeatmap] = location.hash.replace("#", "").split("/").map(val => {
        const int = parseInt(val);
        return val == int ? int : val;
    });
    const beatmap = beatmapset.beatmaps.find((b) => {
        if (b.id === currBeatmap) {
            return b;
        }
    });
    $(".beatmap-basic-stats__entry span").last().text(beatmap.count_spinners);
}

const osuWebObserver = new OsuWebObserver(staticPage, function() {
    switch(this.type) {
        case "beatmapsets": {
            const beatmapset = getJson("beatmapset");
            $(".beatmapset-stats").css("width", "300px");
            $(".beatmapset-info__box--success-rate").css("width", "300px");
            $(".beatmap-basic-stats").append(
                `<div class="beatmap-basic-stats__entry" title="Spinner Count">
                    <div class="beatmap-basic-stats__entry-icon" style="background-image: ${countSpinnerSvg};"></div>
                    <span>-</span>
                </div>`
            );
            beatmapHandler(beatmapset);
            const beatmapObserver = new MutationObserver(() => {
                beatmapHandler(beatmapset);
            });
            const beatmapsetStats = document.querySelector(".beatmapset-stats");
            if (beatmapsetStats) {
                beatmapObserver.observe(beatmapsetStats, {attributes: true, subtree: true});
            }
        }
    }
});