TagPro In-Game Flair Selector.user.js

// ==UserScript==
// @name         TagPro In-Game Flair Selector
// @version      0.1.1
// @description  Lets you change your flair in-game from a dropdown menu on the scoreboard
// @author       Some Ball -1
// @include      http://tagpro-*.koalabeast.com/
// @include      http://tagpro-*.koalabeast.com:*
// @grant        GM_setValue
// @grant        GM_getValue
// @grant        GM_xmlhttpRequest
// ==/UserScript==
/* jshint -W097 */
'use strict';

if(!window.location.port) { //main page
    if($('a[href^="/profile/"]').length) { //logged in
        $.ajax({
            url: $('a[href^="/profile/"]')[0].href,
            type: 'GET',
            success: function(e) {
                if(e.error) return console.log('Flair Selector Error:',e.error);
                let rows = $($.parseHTML(e)).find('table.board:last > tbody tr').not('.fade');
                let flairs = [];
                for(let i = 1;i < rows.length;i++) { //skip table header
                    let pos = $('div.flair',rows[i]).css('background-position');
                    let name = $(rows[i]).children().eq(1).text().trim();
                    let id = $('input[name="selectedFlair"]',rows[i]).val();
                    flairs.push([name,id,pos]);
                }
                GM_setValue('flairs',JSON.stringify(flairs));
            }
        });
    }
} else { //in-game
    tagpro.ready(function wait() {
        unsafeWindow.GM_xmlhttpRequest = GM_xmlhttpRequest;
        if(!tagpro.players || !tagpro.playerId || !tagpro.players[tagpro.playerId]) return setTimeout(wait,10);
        let flairs = JSON.parse(GM_getValue('flairs','[]'));
        if(flairs.length) {
            let $dd = $('<div id="dropdown" style="display: inline-block; -webkit-appearance: menulist; width: 225px; height: 25px; margin-left: 50px;"><div id="flairHeader" style="padding: 2px; padding-left: 10px; text-align: left;"></div>'+
                        '<div id="flairContainer" style="display: table-caption; overflow-y: auto; border-radius: 4px; max-height: 500px; margin-top: 15px;"><table style="display: none; background: #ddd; border-spacing: 1px; width: 100%; font-size: 100%;"><tbody>'+
                        '<tr id="noneFlair"><td>None</td></tr></tbody></table></div></div>'); //display: table-caption oddly works best for width, height, not disturbing other elements, and overflow
            let $row = $('<tr><td style="text-align: left; padding-left: 10px; padding-right: 10px;"><div class="first" style="display: inline-block; width: 16px; height: 16px; background-image: url(\'http://static.koalabeast.com/images/flair.png\'); background-repeat: no-repeat;"></div>'+
                        '<div class="second" style="display: inline-block; margin-left: 5px; vertical-align: super;"></div></td></tr>');
            var me = tagpro.players[tagpro.playerId];
            for(let i = 0;i < flairs.length;i++) {
                let $newrow = $row.clone();
                $newrow.mouseenter(function() {
                    $('td',this).css('background-color','#ddd');
                }).mouseleave(function() {
                    $('td',this).css('background-color','rgba(0,0,0,0.25)');
                }).click(function() {
                    let $clone = $(this).clone();
                    GM_xmlhttpRequest({
                        method: 'POST',
                        url: 'http://'+location.hostname+'/profile/selectedFlair',
                        data: 'flair='+$clone.attr('name'), //have to form-encode as string for GM_xmlhttpRequest
                        headers: { 'Content-Type': 'application/x-www-form-urlencoded'},
                        onload: function(e) {
                            if(e.error) return console.log('Flair Selector Error:',e.error);
                            //unfortunately it doesn't seem like an error is given if something fails, so assume it works
                            $('#flairHeader').children().remove();
                            $('#flairHeader').append($('td',$clone).children());
                            $('#flairContainer').css('margin-top','0');
                        },
                        onerror: function(e) { //don't think this is ever called
                            console.log('Flair Selector Error:',e.error);
                        }
                    });
                });
                $newrow.attr('name',flairs[i][1]);
                $('.first',$newrow).css('background-position',flairs[i][2]);
                $('.second',$newrow).text(flairs[i][0]);
                if(me.flair && me.flair.description===flairs[i][0]) {
                    let $start = $row.clone();
                    $('.first',$start).css('background-position',flairs[i][2]);
                    $('.second',$start).text(flairs[i][0]);
                    $('#flairHeader',$dd).append($('td',$start).children());
                    $('#flairContainer').css('margin-top','0');
                }
                $('tbody',$dd).append($newrow);
            }
            $('#optionsName').append($dd);
            $('#dropdown').click(function() {
                $('table',this).toggle();
            });
            $('#noneFlair').mouseenter(function() {
                $('td',this).css('background-color','#ddd');
            }).mouseleave(function() {
                $('td',this).css('background-color','rgba(0,0,0,0.25)');
            }).click(function() {
                GM_xmlhttpRequest({
                    method: 'POST',
                    url: 'http://'+location.hostname+'/profile/selectedFlair',
                    data: 'flair=',
                    headers: { 'Content-Type': 'application/x-www-form-urlencoded'},
                    onload: function(e) {
                        //unfortunately it doesn't seem like an error is given if something fails, so assume it works
                        $('#flairHeader').children().remove();
                        $('#flairContainer').css('margin-top','17px');
                    },
                    onerror: function(e) { //don't think this is ever called
                        console.log('Flair Selector Error: '+e.error);
                    }
                });
            });
        }
    });
}