Userscript for /r/osugame

osugame_func+.user.js

// ==UserScript==
// @name        osugame_func+
// @namespace   /r/osugame
// @author      /u/N3G4
// @description Adds osu! related functionality to /r/osugame
// @include     *reddit.com/r/osugame*
// @version     1.2.2
// @run-at      document-end
// @grant       GM_xmlhttpRequest
// ==/UserScript==

// ~ ~~ Features ~~ ~
// * Turns URLs in user flairs to clickable links
// * Displays player name and pp/rank on flair hover
//
// ~      ~~~~      ~

// take sum of offsets up the node tree
function getXYPos(element) {
    var leftval = 0;
    var topval = 0;
    while(element) {
        leftval += element.offsetLeft;
        topval += element.offsetTop;
        element = element.offsetParent;
    }
    
    return {
        x: leftval,
        y: topval
    };
}

function Flairbox() {
    var waiting = false;

    var clickify = function(flair) {
        var flairtext = flair.innerHTML;
        flair.innerHTML = flairtext.link(flairtext);
        flair.firstChild.title = ""; // prevent tooltip getting in the way
    };

    // Create DOM from string by inserting into new element, then append to html body
    var createInfoBox = function() {
        var pophtml = "<div id='ofp-infobox' " +
            "style='display:none; position:absolute; top:0px; left:0px; "  +
            "padding: 2px 5px; background-color:#A9A9FF; opacity:0.9; " +
            "color: #FFF; font-size: 11px;'></div>";
        var popelement = document.createElement("div"); 
        popelement.innerHTML = pophtml;
        document.getElementsByTagName("body")[0].appendChild(popelement.firstChild);
    };

    var setHover = function(flair) {
        var box = document.getElementById("ofp-infobox");
        flair.firstChild.onmouseover = function(){ showInfoBox(box, flair); };
        flair.firstChild.onmouseout = function(){ hideInfoBox(box, flair); };
    };

    var showInfoBox = function(box, flair) {
        if( flair.firstChild.innerHTML.search("^https?://osu\.ppy\.sh/u/") !== -1 ) {
            waiting = true;

            GM_xmlhttpRequest({
                method: "GET",
                url: flair.firstChild.innerHTML,
                onload: function(response){ onUserpageLoad(response, box, flair); },
                onerror: function(){ console.error("Error on HTTP GET request."); }
            });
            reposInfoBox(box, flair); 
        }
    };

    var hideInfoBox = function(box) {
        waiting = false;
        box.style.display = "none"; // hide info box
    };

    var onUserpageLoad = function(response, box, flair) {
        var resdom = document.createElement("html");
        resdom.innerHTML = response.responseText;

        var playername = resdom.getElementsByClassName("profile-username")[0]
            .innerHTML;

        var userid = flair.firstChild.innerHTML.split("/").pop();
        // need userId to grab rank data
        if(userid.search("[a-z]") !== -1) {
            // grab from friend button
            userid = resdom.getElementsByClassName("centrep")[1]
                .firstElementChild.getAttribute("href").split(/\/|\?/)[2];

            // The following routes are left from previous versions,
            // if the first route fails the script will probably break
            if(userid.search("[a-z]") !== -1) {
                // grab from avatar filename
                var avatar = resdom.getElementsByClassName("avatar-holder")[0];
                if(avatar) {
                    userid = avatar.firstChild.src.split("_")[0].split("/").pop();
                }

                // try third route
                if(!avatar || userid.search("[a-z]") !== -1) {
                    // grab from javascript variable
                    userid = resdom.children[1].getElementsByTagName("script")[0]
                        .innerHTML.split(";\n")[0].split("= ")[1];
                }
            }
        }

        var statsurl = "https://osu.ppy.sh/pages/include/profile-general.php?u=" +
            userid + "&m=0";

        if(waiting) {
            GM_xmlhttpRequest({
                method: "GET",
                url: statsurl,
                onload: function(response){ onStatsLoad(response, box, playername); },
                onerror: function(){ console.error("Error on HTTP GET request"); }
            });
        }
    };

    var onStatsLoad = function(response, box, infostring) {
        if(waiting) {
            var resdom = document.createElement("html");
            resdom.innerHTML = response.responseText;

            var playerrank = resdom.getElementsByClassName("profileStatLine")[0]
                .firstElementChild.innerHTML.split(": ")[1];

            infostring = infostring + " | " + playerrank;
            setInfoBoxContent(box, infostring);
            box.style.display = "block"; // display info box
        }
    };

    var reposInfoBox = function(box, element) {
        const { x, y } = getXYPos(element);
        box.style.left = x+"px";
        box.style.top = y+20+"px";
    };

    var setInfoBoxContent = function(box, data) {
        box.innerHTML = data;
    };

    createInfoBox();

    var allflairs = document.getElementsByClassName("flair");
    console.log("Found " + allflairs.length + " flairs.");

    var flairs = [];
    for(let i=allflairs.length-1; i>0; i--) {
        var flairtext = allflairs[i].innerHTML;

        // select only flairs with valid URLs
        if( flairtext.search("^https?://") !== -1 ) {
            console.log("Found URL: " + flairtext);
            flairs.push(allflairs[i]);
            clickify(allflairs[i]);
            setHover(allflairs[i]);
        }
    }

}

Flairbox();