NALTP Jerseys

// ==UserScript==
// @name         TagPro NewJerseys
// @version      1.0.3
// @description  Set and change ball jerseys directly from the group page
// @author       zeeres
// @include      http://tagpro-*.koalabeast.com*
// @grant        GM_setValue
// @grant        GM_getValue
// @grant        GM_deleteValue
// @grant        GM_log
// ==/UserScript==

//==   This script is based on Some Ball -1's "TagPro Jerseys" script   ==\\

var spinJerseys = true; //true or false

// Add your own imgur album links here inside quotes with commas between quoted album links
// For example: var customAlbums = ["http://imgur.com/a/0zBNw", "http://imgur.com/a/1abcD"]; (do not include comma if only 1 album)
// Images should have titles that match team names and a single digit numerical description that matches team color (0 for either/both, 1 for red, 2 for blue)
var Albums = ["https://imgur.com/a/tEXAp", "https://imgur.com/a/DSl3a"];

// Add your own imgur image links here inside quotes with commas between quoted image links, it must links to the png file
// For example: var customImages = ["http://i.imgur.com/17aAwABc.png", "http://i.imgur.com/abc123DEF.png"]; (do not include comma if only 1 image)
// Images should have titles that match team names and a single digit numerical description that matches team color (0 for either/both, 1 for red, 2 for blue)
var Images = ["http://i.imgur.com/s5qMtnL.png"];  // not implemented atm

var client_id = 'c638f51525edea6';  // don't steal my client-id. get your own very quickly from here: https://api.imgur.com/oauth2/addclient

var default_data = {stored: true, active: true, isPrivate: false, lastRedTeam: false, lastRedTeamName: 'Red', lastBlueTeam: false, lastBlueTeamName: 'Blue', leagues: [], showLeagues: [], known_teams: {}};  // default data

class Settings {
    constructor(data) {
        this.prefix = 'TPNJ_';
        if (GM_getValue(this.prefix+'stored') === undefined) {   // never stored values yet
            this.data = data;
            this.store_all();
        } else {
            this.data = {};
            for (var d in default_data) {
                this.data[d] = GM_getValue(this.prefix+d);
            }
        }
    }
    set(variable, value) {
        this.data[variable] = value;
        GM_setValue(this.prefix+variable, value);
    }
    delete(variable) {
        delete this.data[variable];
        GM_deleteValue(this.prefix+variable);
    }
    get(variable) {
        var value = GM_getValue(this.prefix+variable);
        var keys = Object.keys(default_data);
        var found = false;
        for(var i = 0; i < keys.length; i++) {
            if (keys[i] === variable) found = true;
        }
        if (value === undefined && !found) {
            this.set(variable, default_data[variable]);
            return default_data[variable];
        } else return value;
    }
    store_all() {
        for (var d in this.data) {
            GM_setValue(this.prefix+d, this.data[d]);
        }
    }
    log_all() {
        for (var d in this.data) {
            console.log(d + ': ' + this.data[d]);
        }
    }
    delete_all() {
        for (var d in this.data) {
            GM_deleteValue(this.prefix+d);
        }
    }
}

function ObjectIndexOf(myArray, property, searchTerm) {  // searches for a property in a {}-object
    for(var i = 0, len = myArray.length; i < len; i++) {
        if (myArray[i][property] === searchTerm) return i;
    }
    return -1;
}


function ajax_read_albums() {
    for (var a = 0; a < Albums.length; a++) {
        var match = /([A-Za-z]+)\|([0-9])/;  // imgur description will be matched for this
        var id = Albums[a].match(/http[s]?:\/\/imgur\.com\/a\/(.+)[\/]?/)[1];  // [0] is the whole string, [1] only the matched group (.+);
        $.ajax({
            url: 'https://api.imgur.com/3/album/'+id+'/images',
            headers: {
                'Authorization': 'Client-ID '+client_id  // don't steal my client-id. get your own very quickly from here: https://api.imgur.com/oauth2/addclient
            },
            type: 'GET',
            success: function(ajax) {
                var data = settings.get('leagues');
                ajax.data.forEach(function(curr) {
                    if(curr.description && curr.title)
                    {
                        var descriptor = curr.description.match(match);
                        var league_index = ObjectIndexOf(data, "league", descriptor[1]);
                        if (league_index === -1)  // new league
                        {
                            data.push({"league": descriptor[1], "teams": []});
                            league_index = data.length-1;
                        }
                        var team_index = ObjectIndexOf(data[league_index].teams, "team", curr.title);
                        var jersey_type = parseInt(descriptor[2]);
                        var jersey = (jersey_type === 1)?'red':((jersey_type === 2)?'blue':'neutral');
                        if(team_index === -1)  // new team
                        {
                            data[league_index].teams.push({"team": curr.title, "jerseys": {jersey: curr.id}});
                        } else {
                            data[league_index].teams[team_index].jerseys[jersey] = curr.id;
                        }
                    }
                });
                settings.set('leagues', data);
            }
        });
    }
}

function inactive_hide() {
    $("#tpnj-ul").hide();
    $("#tpnj-header").css('background', '#54752d');
    $("label#tpnj-league").hide();
}

function create_html() {
    var data = settings.get('leagues');
    var $spectators = $('#spectators');
    $('<div id="tpnj" class="col-md-12 private-game"><div id="tpnj_group" class="player-group"><div id="tpnj-header" class="player-group-header" style="background: #8bc34a; color: #fff;"><div class="team-name">TagPro NewJerseys</div><div class="pull-right"><label class="btn btn-default" id="tnjp_switch"><input type="checkbox" name="tpnj_active"> active</label></div><div class="clearfix"></div></div><ul id="tpnj-ul" style="background: #353535; border-radius: 0 0 3px 3px; border: 1px solid #404040; border-top: 1px solid #2b2b2b; padding: 10px; overflow-y: auto;"><div id="redselect" class="col-md-6 private-game"></div><div id="blueselect" class="col-md-6 private-game"></div></ul></div></div>').insertBefore('#spectators');
    $('input[name="tpnj_active"]').prop('checked', settings.get('active'));
    $('input[name="tpnj_active"]').change(function() {
        settings.set('active', this.checked);
        if (this.checked) {
            settings.set('active', true);
            $("#tpnj-ul").show();
            $("#tpnj-header").css('background', '#8bc34a');
            $("label#tpnj-league").show();
            html_data();
        } else {
            settings.set('active', false);
            inactive_hide();
        }
    });

    var $playerGroup = $('#tpnj_group');
    var showLeagues = settings.get('showLeagues');
    for (var league = 0; league < data.length; league++) {  // button for each league
        $playerGroup.append('<label class="btn btn-default" id="tpnj-league"><input type="checkbox" name="tpnj_league_' + league + '"> ' + data[league].league + '</label>');
        if (showLeagues.indexOf(league) !== -1) {
            $('input[name="tpnj_league_' + league + '"]').prop('checked', true);
        }
        $('input[name="tpnj_league_' + league + '"]').change(function() {
            var id = parseInt(this.name.match(/tpnj_league_([0-9]*)/)[1]);
            var index = showLeagues.indexOf(id);
            if (this.checked) {
                if (index === -1) {
                    showLeagues.push(id);
                    settings.set('showLeagues', showLeagues);
                }
            } else {
                if (index !== -1) {
                    showLeagues.splice(index, 1);
                    settings.set('showLeagues', showLeagues);
                }
            }
            html_data();
        });
    }

    var $redselect = $('#redselect');
    $redselect.append('<select id="redTeamJerseys" class="form-control" style="width: 100%"><option value="none">Choose Jersey</option></select></br><div class="player-group small" style="text-align: center;"><img id="redjersey-preview" src=""></div>');
    $("#redjersey-preview").hide();
    $('#redTeamJerseys').on('change', function() {
        var val = $('option:selected', this).attr('value');
        settings.set('lastRedTeam', val);
        if (val !== 'none') {
            var d = val.split('.');
            var img = data[d[0]].teams[d[1]].jerseys[d[2]];
            $("#redjersey-preview").attr("src", "http://i.imgur.com/" + img + ".png").show();
            update_known_teams(val, 'red');
            html_data();
        } else $("#redjersey-preview").hide();
    });

    var $blueselect = $('#blueselect');
    $blueselect.append('<select id="blueTeamJerseys" class="form-control" style="width: 100%"><option value="none">Choose Jersey</option></select></br><div class="player-group small" style="text-align: center;"><img id="bluejersey-preview" src=""></div>');
    $("#bluejersey-preview").hide();
    $('#blueTeamJerseys').on('change', function() {
        var val = $('option:selected', this).attr('value');
        settings.set('lastBlueTeam', val);
        if (val !== 'none') {
            var d = val.split('.');
            var img = data[d[0]].teams[d[1]].jerseys[d[2]];
            $("#bluejersey-preview").attr("src", "http://i.imgur.com/" + img + ".png").show();
            update_known_teams(val, 'blue');
        } else $("#bluejersey-preview").hide();
    });
    if (!settings.get('active')) inactive_hide();
}

function update_known_teams(val, teamcolor) {
    var known_teams = settings.get('known_teams');
    var teamName = (teamcolor === 'red')?settings.get('redTeamName'):settings.get('blueTeamName');
    if (teamName !== 'Red' && teamName !== 'Blue') {
        known_teams[teamName] = val;
    }
    settings.set('known_teams', known_teams);
}

function convert_known_team(team_name, teamcolor) {  // convert known_team ("league.team.jersey") to appropriate teamcolor
    var ltj = settings.get('known_teams')[team_name];
    if (ltj === undefined) return false;  // if not found
    var d = ltj.split('.');
    var color = d[3];
    if (d[2] !== 'neutral') color = teamcolor;
    return d[0]+'.'+d[1]+'.'+color;
}

function html_data() {
    var data = settings.get('leagues');
    $('#redTeamJerseys').children().remove();  // remove all teams from select box
    $('#blueTeamJerseys').children().remove();  // remove all teams from select box
    // add teams to select box again
    var showLeagues = settings.get('showLeagues');
    for (var l in showLeagues) {
        var li = showLeagues[l];
        var $groupRed = $('<optgroup label="'+data[li].league+'">');
        var $groupBlue = $('<optgroup label="'+data[li].league+'">');
        for(var t = 0; t < data[li].teams.length; t++)
        {
            var team = data[li].teams[t].team;
            var jerseys = data[li].teams[t].jerseys;
            var option = '';
            if (jerseys.red) $groupRed.append('<option value="'+li+'.'+t+'.red">'+team+'</option>');  // value format: "league_index.team_index.jersey_type
            if (jerseys.blue) $groupBlue.append('<option value="'+li+'.'+t+'.blue">'+team+'</option>');  // value format: "league_index.team_index.jersey_type
            if (jerseys.neutral) {
                $groupRed.append('<option value="'+li+'.'+t+'.neutral">'+team+' (n)</option>');  // value format: "league_index.team_index.jersey_type
                $groupBlue.append('<option value="'+li+'.'+t+'.neutral">'+team+' (n)</option>');  // value format: "league_index.team_index.jersey_type
            }
        }
        $('#redTeamJerseys')[0].add($groupRed[0]);
        $('#blueTeamJerseys')[0].add($groupBlue[0]);
    }

    var lastRedTeam = settings.get('lastRedTeam');
    var d, img;
    var known_teams = settings.get('known_teams');
    if(lastRedTeam) {
        $('#redTeamJerseys').val(lastRedTeam);
        d = lastRedTeam.split('.');
    } else {
        $('#redTeamJerseys').val(known_teams[settings.get('redTeamName')]);
    }
    if (d !== undefined) {  // if lastRedTeam is not of the format "league.team.jersey"
        img = data[d[0]].teams[d[1]].jerseys[d[2]];
        $("#redjersey-preview").attr("src", "http://i.imgur.com/" + img + ".png").show();
    }

    var db, imgb;
    var lastBlueTeam = settings.get('lastBlueTeam');
    if(lastBlueTeam) {
        $('#blueTeamJerseys').val(lastBlueTeam);
        db = lastBlueTeam.split('.');
    } else {
        $('#blueTeamJerseys').val(known_teams[settings.get('blueTeamName')]);
    }
    if (db !== undefined) {
        imgb = data[db[0]].teams[db[1]].jerseys[db[2]];
        $("#bluejersey-preview").attr("src", "http://i.imgur.com/" + imgb + ".png").show();
    }
}

function sort_data() {
    // sort data
    var data = settings.get('leagues');
    data.sort(function(a, b) {  // sort data by league name:
        var nameA = a.league.toUpperCase();
        var nameB = b.league.toUpperCase();
        return nameA.localeCompare(nameB);
    });
    for (var l = 0; l < data.length; l++) {  // sort teams in each league
        data[l].teams.sort(function(a, b) {
            var nameA = a.team.toUpperCase();
            var nameB = b.team.toUpperCase();
            return nameA.localeCompare(nameB);
        });
    }
    settings.set('leagues', data);
}

var WhereAmI = function(){
    if (window.location.port) {
        return('game');
    } else if (window.location.pathname.startsWith('/groups/')) {
        return('group');
    } else {
        return('elsewhere');
    }
};

var IAmIn = WhereAmI();
var settings = new Settings(default_data);
//settings.delete_all();
//settings = new Settings();

if(IAmIn === 'group')  // group page
{
    var init = false;
    tagpro.group.socket.on('private',function(priv) {
        if (!priv.isPrivate) settings.set('isPrivate', false);
        if (priv.isPrivate && !init)
        {
            ajax_read_albums();
            sort_data();
            settings.store_all();
            create_html();
            html_data();
            settings.set('isPrivate', true);
            init = true;
            tagpro.group.socket.on('setting',function(setting) {
                var data = settings.get('leagues');
                var known_teams = settings.get('known_teams');
                var known_teams_ltj;
                if (setting.name === 'redTeamName') {
                    known_teams_ltj = known_teams[setting.value];
                    settings.set('redTeamName', setting.value);
                    if (setting.value !== 'Red' && known_teams_ltj) {
                        var ltjr = convert_known_team(setting.value, 'red');
                        if (ltjr) {
                            $('#redTeamJerseys').val(convert_known_team(setting.value, 'red'));
                            var d = ltjr.split('.');
                            if (d !== undefined) {  // if ltjr is not of the format "league.team.jersey"
                                var img = data[d[0]].teams[d[1]].jerseys[d[2]];
                                $("#redjersey-preview").attr("src", "http://i.imgur.com/" + img + ".png").show();
                                settings.set('lastRedTeam', ltjr);
                            }
                        }
                    }
                } else if (setting.name === 'blueTeamName') {
                    known_teams_ltj = settings.get('known_teams')[setting.value];
                    settings.set('blueTeamName', setting.value);
                    if (setting.value !== 'Blue' && known_teams_ltj) {
                        var ltjb = convert_known_team(setting.value, 'blue');
                        if (ltjb) {
                            $('#blueTeamJerseys').val(ltjb);
                            var db = ltjb.split('.');
                            if (db !== undefined) {  // if ltjb is not of the format "league.team.jersey"
                                var imgb = data[db[0]].teams[db[1]].jerseys[db[2]];
                                $("#bluejersey-preview").attr("src", "http://i.imgur.com/" + imgb + ".png").show();
                                settings.set('lastBlueTeam', ltjb);
                            }
                        }
                    }
                }
            });
        }
    });
}
else if (IAmIn === 'game') {  // ingame, draw jersey if there is one
    tagpro.ready(function() {
        if (tagpro.group.socket && settings.get('isPrivate') && settings.get('active'))  // if script is activated and group is private
        {
            var ltjr = settings.get('lastRedTeam');
            var ltjb = settings.get('lastBlueTeam');
            if ((ltjr && ltjr !== undefined) || (ltjb && ltjb !== undefined)) {  // one of red or blue is not false => at least one jersey was set
                var leagues = settings.get('leagues');
                var dr = ltjr.split('.'), db = ltjb.split('.');
                var imgr = leagues[dr[0]].teams[dr[1]].jerseys[dr[2]], imgb = leagues[db[0]].teams[db[1]].jerseys[db[2]];
                var tr = tagpro.renderer,
                    oldUPSP = tr.updatePlayerSpritePosition;

                tr.createJersey = function(player) {
                    var img = (player.team === 1)?imgr:imgb;
                    if(!img)  // make empty container if one team doesn't have a jersey
                    {
                        if(player.sprites.jersey) player.sprites.ball.removeChild(player.sprites.jersey);
                        player.sprites.jersey = new PIXI.DisplayObjectContainer();
                        player.sprites.jersey.team = player.team;
                        player.sprites.ball.addChildAt(player.sprites.jersey,1);
                    }
                    else
                    {
                        if(player.sprites.jersey) player.sprites.ball.removeChild(player.sprites.jersey);
                        player.sprites.jersey = new PIXI.Sprite(PIXI.Texture.fromImage('http://i.imgur.com/' + img + '.png'));
                        player.sprites.jersey.team = player.team;
                        player.sprites.ball.addChildAt(player.sprites.jersey, 1); // add on top of ball, below other stuff
                        player.sprites.jersey.anchor.x = 0.5;
                        player.sprites.jersey.anchor.y = 0.5;
                        player.sprites.jersey.x = 20;
                        player.sprites.jersey.y = 20;
                    }
                };
                tr.updatePlayerSpritePosition = function(player) {
                    if(!player.sprites.jersey) tr.createJersey(player);
                    if(player.sprites.jersey.team!==player.team) tr.createJersey(player);
                    var index = player.sprites.ball.getChildIndex(player.sprites.actualBall)+1;
                    if(index!==player.sprites.ball.getChildIndex(player.sprites.jersey)) player.sprites.ball.setChildIndex(player.sprites.jersey,index);
                    if(spinJerseys) player.sprites.jersey.rotation = player.angle;
                    oldUPSP(player);
                };
            }
        } else {  // if not in group, reset the last teams
            settings.set('lastRedTeam', false);
            settings.set('lastBlueTeam', false);
            settings.set('isPrivate', false);
        }
    });
}