TagPro-LiveScoreboardRB.user.js

// ==UserScript==
// @name         TagPro LiveScoreboard RB
// @version      1.7.0
// @description  Live Scoreboard that plays along with TagPro NewJerseys script (but can be used as standalone)
// @author       zeeres
// @include      http://tagpro-*.koalabeast.com*
// @grant        GM_setValue
// @grant        GM_getValue
// @grant        GM_deleteValue
// @grant        GM_log
// @require      https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js
// @require      https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js
// @resource     jqUI_CSS  https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css
// ==/UserScript==

// 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/hDzri', 'https://imgur.com/a/mTiFb', 'https://imgur.com/a/JcPvD', 'https://imgur.com/a/RyADS', 'https://imgur.com/a/pHdyx', 'https://imgur.com/a/V2xiP', 'https://imgur.com/a/Wr8k7', 'https://imgur.com/a/0eiwx', 'https://imgur.com/a/JHQ6e', 'https://imgur.com/a/sP92eOl', 'https://imgur.com/a/O8gP6QG'];

// 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 = [];  // not implemented atm

var LiveScoreboardRB_ImagesAlbum = 'http://imgur.com/a/K0sIZ';

var fix_position_x = 'mid';  // can be either false, mid, left, right, mid-left, mid-right
var fix_position_y = 'top';  // can be either false, top, mid, bot, top-mid, mid-bot

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, games: 2, offsets: [[0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0]], overtime: [false, false], selectedhalf: 0, leagues: [], scoreboard_images: []};  // default data

var debug = false;

function logd(message) {
    if (debug) console.log(message);
}

class Settings {
    constructor(data) {
        this.prefix = 'TPLS_';
        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);
        logd('have set ' + variable + ' to: ');
        logd(value);
        logd('check ' + this.prefix + variable + ' was set to:');
        logd(GM_getValue(this.prefix+variable));
    }
    delete(variable) {
        delete this.data[variable];
        GM_deleteValue(this.prefix+variable);
    }
    get(variable, share_prefix) {
        share_prefix = share_prefix || false;
        var value = (share_prefix)?(JSON.parse(window.localStorage.getItem(share_prefix+variable))):GM_getValue(this.prefix+variable);
        logd((share_prefix)?(variable + ' (from localStorage) is:'):(variable + ' is:'));
        logd(value);
        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;
    }
    share(variable) {
        window.localStorage.setItem(this.prefix+variable, JSON.stringify(this.data[variable]));
    }
    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-z0-9_]+)\|([A-Za-z0-9]+)/;  // imgur description will be matched for this
        logd('Albums['+a+']: ' + Albums[a]);
        var id = Albums[a].match(/http[s]?:\/\/imgur\.com\/a\/(.+)[\/]?/)[1];  // [0] is the whole string, [1] only the matched group (.+);
        logd('id: ' + id);
        $.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]);
                        logd('descriptor[1]:');
                        logd(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 logo = descriptor[2];
                        if(team_index === -1)  // new team
                        {
                            data[league_index].teams.push({"team": curr.title, logos: {}});
                            team_index = data[league_index].teams.length-1;
                        }
                        logd('league_index:');
                        logd(league_index);
                        logd('team_index:');
                        logd(team_index);
                        data[league_index].teams[team_index].logos[logo] = curr.id;
                    }
                });
                logd('ajax2 data: ' + data);
                settings.set('leagues', data);
            }
        });
    }
}

function ajax_read_livescoreboard_images() {
    var id = LiveScoreboardRB_ImagesAlbum.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 images = [];  // settings.get('scoreboard_images');
            ajax.data.forEach(function(curr) {
                if(curr.title)
                {
                    var zpos = 0;
                    if (curr.description) zpos = curr.description.match(/([0-9]+)/)[1] || 0;  // if no description or description is not a number, use default z-position 0
                    logd('zpos: ' + zpos);
                    images.push({"id": curr.id, "name": curr.title, "width": curr.width, "height": curr.height, "zpos": zpos});
                }
            });
            images.sort(function(a, b) {
                if (a.zpos > b.zpos) return 1;
                else return -1;
            });
            logd(images);
            settings.set('scoreboard_images', images);
        }
    });
}

function inactive_hide() {
    $("#tpls-ul").hide();
    $("#tpls-header").css('background', '#cb6100');
}

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

    var $playerGroup = $('#tpls-ul');
    $playerGroup.append('<div id="tpls_games">Games: </div>');
    for (var i = 1; i <= 3; i++) {
        $('#tpls_games').append('<label class="btn btn-default"><input type="radio" name="tpls_games" value="' + i + '"> ' + i + '</label>');
    }
    $('input[name="tpls_games"][value="' + settings.get('games') + '"]').attr('checked', true);
    $('input[name="tpls_games"]').change(function() {  // when one of the "games" buttons is pushed
        var games = $(this).prop('value'),
            offsets = settings.get('offsets');
        settings.set('games', games);
        while (offsets.length < games) offsets.push([0, 0, 0, 0, 0, 0]);
        while (games < offsets.length) offsets.pop();
        settings.set('offsets', offsets);
        settings.log_all();
        html_data();
    });
    html_data();

    if (!settings.get('active')) inactive_hide();
}

function html_data() {
    var data = settings.get('leagues'),
        games = settings.get('games'),
        offsets = settings.get('offsets'),
        overtime = settings.get('overtime'),
        $playerGroup = $('#tpls-ul');
    $('#tpls_offsets_div').remove();
    $playerGroup.append('<div id="tpls_offsets_div">Offsets: <table id="tpls_offsets"></table></div>');
    logd(offsets);
    for (var i = 0; i < games; i++) {
        $('#tpls_offsets').append('<tr><td>Game ' + parseInt(i+1) + '&nbsp;</td><td>H1</td><td><input type="text" name="tpls_offset_' + i + '_0_0" class="form-control" style="width:40px" value="' + offsets[i][0] + '"></td><td><input type="text" name="tpls_offset_' + i + '_0_1" class="form-control" style="width:40px" value="' + offsets[i][1] + '"></td><td>H2</td><td><input type="text" name="tpls_offset_' + i + '_1_0" class="form-control" style="width:40px" value="' + offsets[i][2] + '"></td><td><input type="text" name="tpls_offset_' + i + '_1_1" class="form-control" style="width:40px" value="' + offsets[i][3] + '"></td><td>OT <input type="checkbox" name="tpls_overtime_' + i + '"></td><td><input type="text" name="tpls_offset_' + i + '_2_0" class="form-control" style="width:40px" value="' + offsets[i][4] + '"></td><td><input type="text" name="tpls_offset_' + i + '_2_1" class="form-control" style="width:40px" value="' + offsets[i][5] + '"></td></tr>');
        $('input[name="tpls_overtime_' + i + '"]').prop('checked', overtime[i]);
    }
    /*$(".offset-buttons svg").click(function(e) {
        var r = $(this).data("name"),
            i = parseInt($(this).data("value"), 10);
        console.log(r, i);
    });*/
    function change_offset(elem, dvalue = 0) {  // changes the offset by dvalue
        if (elem[0].type) {
            var value = parseInt(elem.prop('value'));
            if (elem[0].type === "text") {
                var offsets = settings.get('offsets'),
                    newvalue = (dvalue!==0)?value+dvalue:value,
                    match = elem.prop('name').match(/tpls_offset_([0-9]+)_([0-9]+)_([0-9]+)/),
                    game = match[1],
                    half = match[2],
                    lr = match[3];
                logd(game + "|" + half + "|" + lr);
                if (newvalue >= 0) {
                    elem.prop('value', newvalue);
                    offsets[game][parseInt(2*half)+parseInt(lr)] = newvalue;
                    settings.set('offsets', offsets);
                }
            } else if (elem[0].type == "checkbox") {
                var overtime = settings.get('overtime'),
                    match = elem.prop('name').match(/tpls_overtime_([0-9]+)/),
                    game = match[1];
                overtime[game] = elem.prop('checked') ? true : false;
                settings.set('overtime', overtime);
            }
        }
    }

    $('#tpls_offsets input').keydown(function (e) {
        var keyCode = e.keyCode || e.which,
            arrow = {left: 37, up: 38, right: 39, down: 40 };
        if (keyCode == arrow.up) change_offset($(this), +1);
        else if (keyCode == arrow.down) change_offset($(this), -1);
    });
    $('#tpls_offsets input').bind('mousewheel DOMMouseScroll', function (event) {
        event.preventDefault();  // disables scrolling temporarily
        if (event.originalEvent.wheelDelta > 0 || event.originalEvent.detail < 0) change_offset($(this), +1);
        else change_offset($(this), -1);
    });

    $('#tpls_offsets input').change(function () {
        change_offset($(this));
    });

    $('#tpls_half').remove();
    $playerGroup.append('<div id="tpls_half">Half: </div>');
    for (i = 0; i < settings.get('games')*2; i++) {
        $('#tpls_half').append('<label class="btn btn-default"><input type="radio" name="tpls_selected_half" value="' + i + '"> ' + parseInt(i+1) + '</label>');
    }
    $('input[name="tpls_selected_half"][value="' + settings.get('selectedhalf') + '"]').attr('checked', true);
    $('input[name="tpls_selected_half"]').change(function() {  // when one of the "half" buttons is pushed
        var half = $(this).prop('value');
        settings.set('selectedhalf', half);
    });
}

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);
}

function get_default_position(axis, maxdim) {
    if (axis == 'l' || axis == 'x') {
        var posl = false;
        switch(fix_position_x) {
            case 'left':
                posl = 0;
                break;
            case 'mid':
                posl = Math.floor((window.innerWidth-maxdim)/2);
                break;
            case 'right':
                posl = window.innerWidth-maxdim;
                break;
            case 'left-mid':
                posl = Math.floor((window.innerWidth-maxdim)/4);
                break;
            case 'mid-right':
                posl = Math.floor((window.innerWidth-maxdim)/4*3);
                break;
        }
        return posl;
    } else if (axis == 't' || axis == 'y') {
        var post;
        switch(fix_position_y) {
            case 'top':
                post = 0;
                break;
            case 'mid':
                post = Math.floor((window.innerHeight-maxdim)/2);
                break;
            case 'bot':
                post = window.innerHeight-maxdim;
                break;
            case 'top-mid':
                post = Math.floor((window.innerHeight-maxdim)/4);
                break;
            case 'mid-bot':
                post = Math.floor((window.innerHeight-maxdim)/4*3);
                break;
        }
        return post;
    }
}

function getTime(show_milli) {
    var millis = Math.max(0, tagpro.gameEndsAt - Date.now());
    var min = (millis/1000/60) << 0;
    var sec = (((millis/1000) % 60 << 0));
    var mil = millis % 10 << 0;
    sec = (sec<10)?'0'+sec:sec;
    var ret = min + ":" + sec;
    if (show_milli) ret += "." + mil;
    return (millis>0)?ret:'end';
}

function hideSprite(sprite) {
    if (tagpro.ui.sprites[sprite] !== undefined) {
        setTimeout(function() {tagpro.ui.sprites[sprite].visible = false;}, 0);
    } else {
        setTimeout(hideSprite, 100);
    }
}

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(default_data);
// settings.log_all();

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();
            ajax_read_livescoreboard_images();
            sort_data();
            settings.store_all();
            create_html();
            html_data();
            settings.set('isPrivate', true);
            init = true;
            tagpro.group.socket.on('setting',function(setting) {
                if (setting.name === 'redTeamName') {
                    settings.set('redTeamName', setting.value);
                } else if (setting.name === 'blueTeamName') {
                    var redTeamName = settings.get('redTeamName'),
                        blueTeamName = settings.get('blueTeamName');
                    logd(redTeamName);
                    logd(blueTeamName);
                    logd(setting.value);
                    if (redTeamName === blueTeamName) {  //  || setting.value === 'Blue' && blueTeamName === 'Blue'  // TODO: also triggers when refreshing/coming back from game, workaround?
                        var games = settings.get('games'),
                            offsets = settings.get('offsets');
                        for (var i = 0; i < games; i++ ){
                            var $offset00 = $('input[name="tpls_offset_' + i + '_0_0"]'),
                                $offset01 = $('input[name="tpls_offset_' + i + '_0_1"]'),
                                offset00val = $('input[name="tpls_offset_' + i + '_0_0"]').val(),
                                offset01val = $('input[name="tpls_offset_' + i + '_0_1"]').val(),
                                $offset10 = $('input[name="tpls_offset_' + i + '_1_0"]'),
                                $offset11 = $('input[name="tpls_offset_' + i + '_1_1"]'),
                                offset10val = $('input[name="tpls_offset_' + i + '_1_0"]').val(),
                                offset11val = $('input[name="tpls_offset_' + i + '_1_1"]').val(),
                                $offset20 = $('input[name="tpls_offset_' + i + '_2_0"]'),
                                $offset21 = $('input[name="tpls_offset_' + i + '_2_1"]'),
                                offset20val = $('input[name="tpls_offset_' + i + '_2_0"]').val(),
                                offset21val = $('input[name="tpls_offset_' + i + '_2_1"]').val();
                            $offset00.val(offset01val);
                            $offset01.val(offset00val);
                            $offset10.val(offset11val);
                            $offset11.val(offset10val);
                            $offset20.val(offset21val);
                            $offset21.val(offset20val);
                            offsets[i] = [offset01val, offset00val, offset11val, offset10val, offset21val, offset20val];
                        }
                        settings.set('offsets', offsets);
                    }
                    settings.set('blueTeamName', setting.value);
                }
            });
        }
    });
}
else if (IAmIn === 'game') {
    tagpro.ready(function() {
        var leagues = settings.get('leagues'),
            shared_leagues = settings.get('leagues', 'TPNJ_'),
            lastRedTeam = settings.get('lastRedTeam', 'TPNJ_'),
            lastBlueTeam = settings.get('lastBlueTeam', 'TPNJ_'),
            known_teams = settings.get('known_teams', 'TPNJ_');

        function set_offset() {  // make some space
            console.log($('#viewport').css('top'));
            if ($('#viewport').css('top') !== '20px') {
                $('#viewport').offset({top:20});
                setTimeout(set_offset, 1000);
            }
        }

        set_offset();
        $(window).resize(set_offset());

        logd('leaguesies:');
        logd(leagues);
        logd('shared_leaguesies:');
        logd(shared_leagues);
        for (var i = 0; i < leagues.length; i++) {  // add logos to the shared_leagues object
            var index1 = ObjectIndexOf(shared_leagues, 'league', leagues[i].league);
            for (var j = 0; j < leagues[i].teams.length; j++) {
                var index2 = ObjectIndexOf(shared_leagues[index1].teams, 'team', leagues[i].teams[j].team);
                logd('team:');
                logd(leagues[i].teams[j].team);
                logd('index1: ' + index1 + ', index2: ' + index2);
                logd('shared_leagues[' + index1 + ']:');
                logd(shared_leagues[index1]);
                logd('leagues[' + i + ']:');
                logd(leagues[i]);
                // if (!shared_leagues[index1].teams[index2].logos) shared_leagues[index1].teams[index2]["logos"] = {};
                if (index1 >= 0 && index2 >= 0) shared_leagues[index1].teams[index2].logos = leagues[i].teams[j].logos;
            }
        }

        if (tagpro.group.socket && settings.get('isPrivate') && settings.get('active'))  // if script is activated and group is private
        {
            var offsets = settings.get('offsets'),
                overtime = settings.get('overtime'),
                selectedhalf = settings.get('selectedhalf'),
                index = Math.floor(selectedhalf/2),
                images = settings.get('scoreboard_images'),
                position = settings.get('position'),
                maxwidth = 0,
                maxheight = 0,
                window_height = window.innerHeight,
                window_width = window.innerWidth;
            for (i = 0; i < images.length; i++) {
                if (images[i].width > maxwidth) maxwidth = images[i].width;
                if (images[i].height > maxheight) maxheight = images[i].height;
            }
            logd(maxwidth, maxheight, window_width, window_height);
            var posl = get_default_position('l', maxwidth),
                post = get_default_position('t', maxheight);
            $('body').append('<div id="LiveScoreboardRB_Container"><div id="LiveScoreboardRB" style="display: table; position:absolute; width: ' + maxwidth + 'px; height: ' + maxheight + 'px; left: ' + posl + 'px; top: ' + post + 'px;"></div></div>');

            // hideSprite('redScore');
            // hideSprite('blueScore');
            // hideSprite('redFlag');
            // hideSprite('blueFlag');
            // hideSprite('timer');
            tagpro.ui.scores = function() {};
            tagpro.ui.updateFlags = function(e, t, n) {};
            tagpro.ui.timer = function(e, t, n, r) {
                var i = tagpro.ui.sprites.timer;
                i || (i = tagpro.ui.sprites.timer = new PIXI.Text("",{
                    fill: "#FFFFFF",
                    strokeThickness: 4,
                    stroke: "#000000",
                    font: "bold 30pt Arial"
                }),
                      i.alpha = 0.0,
                      i.anchor.x = 0.5,
                      e.addChild(tagpro.ui.sprites.timer)),
                    i.text != r && i.setText(r),
                    i.visible = !!tagpro.settings.ui.matchState;
            };
            var $LiveScoreboardRB_Container = $('#LiveScoreboardRB_Container'),
                $LiveScoreboardRB = $('#LiveScoreboardRB');
            for (i = 0; i < images.length; i++) {
                logd(images[i].zpos);
                if (images[i].name !== 'GRed' && images[i].name !== 'GBlue') {
                    $LiveScoreboardRB.append('<div id="' + images[i].name + '" style="position:absolute; height: ' + images[i].height + 'px; width: ' + images[i].width + 'px; background-image: url(http://i.imgur.com/' + images[i].id + '.png); z-index: ' + images[i].zpos + ';"></div>');
                }
            }
            $LiveScoreboardRB_Container.draggable({
                delay: 100,
                snap: true,
                grid: [5, 5],
                // axis: "x",  // restricts dragging in the y-axis
                containment: 'document',
                scroll: false,
                drag: function(event, ui) {
                },
                stop: function(event, ui) {
                    settings.set('position', {'top': ui.position.top, 'left': ui.position.left});
                    // $LiveScoreboardRB_Container.css('border', 'none');
                }
            });

            // add time
            $LiveScoreboardRB.append('<div id="timer" style="position:absolute; left:343px; top:107px; width:58px; height:19px; text-align:center; vertical-align: middle; z-index: 3;"></div>');
            $("#timer").append('<div id="timerText" style="text-align:center; font-weight:normal; color:black; font-family:\'Sans\'; font-size:18px">00:00</div>');
            // add scores
            $LiveScoreboardRB.append('<div id="redScoreContainer" style="position:absolute; left:287px; width:85px; height:60px; z-index: 11;"><div id="redScoreOuter" style="display: table; position: absolute; height: 100%; width: 100%;"><div id="redScoreMiddle" style="display: table-cell; vertical-align: middle;"></div></div></div>');  // Nested divs to center horizontal and vertical
            $LiveScoreboardRB.append('<div id="blueScoreContainer" style="position:absolute; left:372px; width:85px; height:60px; z-index: 11;"><div id="blueScoreOuter" style="display: table; position: absolute; height: 100%; width: 100%;"><div id="blueScoreMiddle" style="display: table-cell; vertical-align: middle;"></div></div></div>');
            rhalfindex = (selectedhalf % 2 === 0?0:2);
            bhalfindex = (selectedhalf % 2 === 0?1:3);
            logd('offset:');
            logd(offsets[Math.floor(selectedhalf/2)]);
            $("#redScoreMiddle").append('<div id="redScoreText" style="position:relative; top:1px; margin-left: auto; margin-right: auto; margin-top: auto; margin-bottom: auto; text-align: center; font-weight:bold; color:#d80013; font-family:\'Sans\'; font-size:41px;">' + offsets[index][rhalfindex] + '</div>');
            $("#blueScoreMiddle").append('<div id="blueScoreText" style="position:relative; top:1px; margin-left: auto; margin-right: auto; margin-top: auto; margin-bottom: auto; text-align:center; font-weight:bold; color:#006dcf; font-family:\'Sans\'; font-size:41px;">' + offsets[index][bhalfindex] + '</div>');
            // add cumulative scores if in half 2
            $LiveScoreboardRB.append('<div id="redScore2Container" style="position:absolute; left:331px; top:13px; width:41px; height:28px; z-index: 7;"><div id="redScore2Outer" style="display: table; position: absolute; height: 100%; width: 100%;"><div id="redScore2Middle" style="display: table-cell; vertical-align: middle;"></div></div></div>');
            $LiveScoreboardRB.append('<div id="blueScore2Container" style="position:absolute; left:372px; top:13px; width:41px; height:28px; z-index: 7;"><div id="blueScore2Outer" style="display: table; position: absolute; height: 100%; width: 100%;"><div id="blueScore2Middle" style="display: table-cell; vertical-align: middle;"></div></div></div>');
            $("#redScore2Middle").append('<div id="redScore2Text" style="margin-left: auto; margin-right: auto; margin-top: auto; margin-bottom: auto; text-align:center; font-weight:bold; color:#8c000d; font-family:\'Sans\'; font-size:20px;">' + parseInt(offsets[index][0] + offsets[index][2] + (tagpro.score.r || 0)) + (overtime[index] ? offsets[index][4] : 0) + '</div>');
            $("#blueScore2Middle").append('<div id="blueScore2Text" style="margin-left: auto; margin-right: auto; margin-top: auto; margin-bottom: auto; text-align:center; font-weight:bold; color:#004482; font-family:\'Sans\'; font-size:20px;">' + parseInt(offsets[index][1] + offsets[index][3] + (tagpro.score.b || 0)) + (overtime[index] ? offsets[index][5] : 0) + '</div>');

            if (selectedhalf%2===0) {
                $('#redScoreContainer').css({top: '27px'});
                $('#blueScoreContainer').css({top: '27px'});
                $('#CScoreBG').hide();
                $('#CScoreHighlight').hide();
                $('#redScore2Container').hide();
                $('#blueScore2Container').hide();
                $('#ScoreBG').css({top: '-15px'});  // move images 15px up (absolute)
                $('#ScoreHighlight').css({top: '-15px'});
            } else {
                $('#redScoreContainer').css({top: '43px'});
                $('#blueScoreContainer').css({top: '43px'});
            }

            // add game/half description
            $LiveScoreboardRB.append('<div id="gameNumContainer" style="position:absolute; left:' + parseInt(212+(selectedhalf%2===0?90:0)) + 'px; top:90px; width:65px; height:0px; z-index: 20;"><div id="gameNumText" style="margin-top: auto; text-align:right; font-weight:bold; color:#ffffff; font-family:\'Sans\'; font-size:12px;">Game ' + Math.floor(selectedhalf/2+1) + '</div>');
            $LiveScoreboardRB.append('<div id="gameNumContainer" style="position:absolute; left:' + parseInt(467-(selectedhalf%2===0?90:0)) + 'px; top:90px; width:65px; height:0px; z-index: 20;"><div id="gameNumText" style="margin-top: auto; text-align:left; font-weight:bold; color:#ffffff; font-family:\'Sans\'; font-size:12px;">' + (overtime[index] ? 'Overtime' : ('Half ' + parseInt(selectedhalf%2+1))) + '</div>');

            var gredOi = ObjectIndexOf(images, 'name', 'GRed'),
                 gblueOi = ObjectIndexOf(images, 'name', 'GBlue');
            if (selectedhalf > 1 && gredOi !== -1 && gredOi !== -1) {  // show results on GRed or GBlue images
                var gredO = images[gredOi],
                    gblueO = images[gblueOi];
                logd('images:');
                logd(images);
                logd('gredO:');
                logd(gredO);
                logd('gblueO:');
                logd(gblueO);
                var g = 1,
                    rwins = 0,
                    bwins = 0;
                while (g < selectedhalf) {
                    var rs2 = parseInt(parseInt(offsets[Math.floor(g/2)][0]) + parseInt(offsets[Math.floor(g/2)][2])),
                        bs2 = parseInt(parseInt(offsets[Math.floor(g/2)][1]) + parseInt(offsets[Math.floor(g/2)][3]));
                    logd('rs2:');
                    logd(rs2);
                    logd('bs2:');
                    logd(bs2);
                    if (rs2 > bs2) {
                        $LiveScoreboardRB.append('<div id="gred' + g + 'Container" style="position:absolute; background-image: url(http://i.imgur.com/' + gredO.id + '.png); left:' + (0 - rwins*67) +'px; top: 0px; width:' + gredO.width + 'px; height:' + gredO.height + 'px; z-index: ' + gredO.zpos + ';"></div>');
                        $("#gred" + g + "Container").append('<div style="position:absolute; left:29px; top: 14px; width:38px; height:28px; z-index: 11;"><div style="display: table; position: absolute; height: 100%; width: 100%;"><div id="gred' + g + 'MiddleTitle" style="display: table-cell; vertical-align: middle;"><div id="gred' + g + 'TitleText" style="position:relative; margin-left: auto; margin-right: auto; margin-top: auto; margin-bottom: auto; text-align: center; color:#a88a8d; font-family:\'Sans\'; font-size:19px;">G' + parseInt(g/2+1) + '</div></div></div></div>');  // Nested divs to center horizontal and vertical
                        $("#gred" + g + "Container").append('<div style="position:absolute; left:35px; top: 43px; width:38px; height:28px; z-index: 11;"><div style="display: table; position: absolute; height: 100%; width: 100%;"><div id="gred' + g + 'MiddleRS" style="display: table-cell; vertical-align: middle;"><div id="gred' + g + 'RSText" style="position:relative; margin-left: auto; margin-right: auto; margin-top: auto; margin-bottom: auto; text-align: center; color:#bf0012; font-family:\'Sans\'; font-size:23px;">' + rs2 + '</div></div></div></div>');
                        $("#gred" + g + "Container").append('<div style="position:absolute; left:41px; top: 74px; width:38px; height:28px; z-index: 11;"><div style="display: table; position: absolute; height: 100%; width: 100%;"><div id="gred' + g + 'MiddleBS" style="display: table-cell; vertical-align: middle;"><div id="gred' + g + 'BSText" style="position:relative; margin-left: auto; margin-right: auto; margin-top: auto; margin-bottom: auto; text-align: center; color:#004280; font-family:\'Sans\'; font-size:23px;">' + bs2 + '</div></div></div></div>');
                        rwins++;
                    } else if (rs2 < bs2) {
                        $LiveScoreboardRB.append('<div id="gblue' + g + 'Container" style="position:absolute; background-image: url(http://i.imgur.com/' + gblueO.id + '.png); left:' + (636 + bwins*67) +'px; top: 0px; width:' + gblueO.width + 'px; height:' + gblueO.height + 'px; z-index: ' + gblueO.zpos + ';"></div>');
                        $("#gblue" + g + "Container").append('<div style="position:absolute; left:41px; top: 14px; width:38px; height:28px; z-index: 11;"><div style="display: table; position: absolute; height: 100%; width: 100%;"><div id="gred' + g + 'MiddleTitle" style="display: table-cell; vertical-align: middle;"><div id="gblue' + g + 'TitleText" style="position:relative; margin-left: auto; margin-right: auto; margin-top: auto; margin-bottom: auto; text-align: center; color:#8a99a6; font-family:\'Sans\'; font-size:19px;">G' + parseInt(g/2+1) + '</div></div></div>');
                        $("#gblue" + g + "Container").append('<div style="position:absolute; left:35px; top: 43px; width:38px; height:28px; z-index: 11;"><div style="display: table; position: absolute; height: 100%; width: 100%;"><div id="gblue' + g + 'MiddleBS" style="display: table-cell; vertical-align: middle;"><div id="gblue' + g + 'BSText" style="position:relative; margin-left: auto; margin-right: auto; margin-top: auto; margin-bottom: auto; text-align: center; color:#0063bf; font-family:\'Sans\'; font-size:23px;">' + bs2 + '</div></div></div></div>');
                        $("#gblue" + g + "Container").append('<div style="position:absolute; left:29px; top: 74px; width:38px; height:28px; z-index: 11;"><div style="display: table; position: absolute; height: 100%; width: 100%;"><div id="gblue' + g + 'MiddleRS" style="display: table-cell; vertical-align: middle;"><div id="gblue' + g + 'RSText" style="position:relative; margin-left: auto; margin-right: auto; margin-top: auto; margin-bottom: auto; text-align: center; color:#80000c; font-family:\'Sans\'; font-size:23px;">' + rs2 + '</div></div></div></div>');
                        bwins++;
                    }
                    g += 2;
                }
            }

            tagpro.socket.on('score', function(score) {
                var selectedhalf = settings.get('selectedhalf'),
                    overtime = settings.get('overtime'),
                    offsets = settings.get('offsets'),
                    index = Math.floor(selectedhalf/2),
                    rhalfindex = (selectedhalf % 2 === 0?0:2),
                    bhalfindex = (selectedhalf % 2 === 0?1:3),
                    rs = parseInt(score.r) + (overtime[index] && selectedhalf % 2 === 1 ? parseInt(offsets[index][4]) : parseInt(offsets[index][rhalfindex])),
                    bs = parseInt(score.b) + (overtime[index] && selectedhalf % 2 === 1 ? parseInt(offsets[index][5]) : parseInt(offsets[index][bhalfindex])),
                    rs2 = parseInt(offsets[index][0]) + (selectedhalf % 2 === 1?parseInt(offsets[index][2]):0) + parseInt(score.r) + (overtime[index] && selectedhalf % 2 === 1 ? parseInt(offsets[index][4]) : 0),
                    bs2 = parseInt(offsets[index][1]) + (selectedhalf % 2 === 1?parseInt(offsets[index][3]):0) + parseInt(score.b) + (overtime[index] && selectedhalf % 2 === 1 ? parseInt(offsets[index][5]) : 0);
                $("#redScoreText").html(rs);
                $("#blueScoreText").html(bs);
                $("#redScore2Text").html(rs2);
                $("#blueScore2Text").html(bs2);
            });

            var d, img;
            if(lastRedTeam) d = lastRedTeam.split('.');
            if (d !== undefined) {
                try {
                    img = shared_leagues[d[0]].teams[d[1]].logos.L440;  // if lastRedTeam is not of the format "league.team.jersey"
                } catch(e) {
                    logd('L440 Logo for red team not found!');
                    img = 'SViDkXM';  // blank image
                }
            }
            var db, imgb;
            if(lastBlueTeam) db = lastBlueTeam.split('.');
            if (db !== undefined) {
                try {
                    imgb = shared_leagues[db[0]].teams[db[1]].logos.L440;
                } catch(e) {
                    logd('L440 Logo for blue team not found!');
                    imgb = 'SViDkXM';
                }
            }
            $LiveScoreboardRB.append('<div id="redlogo" style="position:absolute; left:112px; top:12px; width:90px; height:90px; z-index:6;"><img width="100%" height="100%" src="http://i.imgur.com/' + img + '.png"><svg width="0" height="0"><defs><clipPath id="clipRed"><circle cx="90" cy="170" r="170"/></clipPath></defs></svg></div>');
            $LiveScoreboardRB.append('<div id="bluelogo" style="position:absolute; left:542px; top:12px; width:90px; height:90px; z-index:6;"><img width="100%" height="100%" src="http://i.imgur.com/' + imgb + '.png"><svg width="0" height="0"><defs><clipPath id="clipBlue"><circle cx="-10" cy="170" r="170"/></clipPath></defs></svg></div>');
            $(window).resize(function() {
                $LiveScoreboardRB_Container.css('top', post || parseInt(position.top*(window.innerHeight/window_height)));
                $LiveScoreboardRB_Container.css('left', posl || parseInt(position.left*(window.innerWidth/window_width)));
                settings.set('position', {'top': $LiveScoreboardRB_Container.css('top'), 'left': $LiveScoreboardRB_Container.css('left')});
            });

             tagpro.socket.on('end', function(data) {
                 var selectedhalf = parseInt(settings.get('selectedhalf')),
                     offsets = settings.get('offsets'),
                     overtime = settings.get('overtime'),
                     index = Math.floor(selectedhalf/2),
                     ofs = offsets[index],
                     games = settings.get('games');
                 logd('endoffsets:');
                 logd(offsets);
                 logd('ofs:');
                 logd(ofs);
                 logd('new half: ' + parseInt(selectedhalf+1));
                 logd('selectedhalf%2===' + selectedhalf%2);
                 if(selectedhalf%2===0) {
                     offsets[index] = [parseInt(ofs[0]+parseInt(tagpro.score.r)), parseInt(ofs[1] + parseInt(tagpro.score.b)), ofs[2], ofs[3], ofs[4], ofs[5]];
                 } else {
                     if (overtime[index]) {
                         offsets[index] = [ofs[0], ofs[1], ofs[2], ofs[3], parseInt(tagpro.score.r), parseInt(tagpro.score.b)];
                     } else {
                         offsets[index] = [ofs[0], ofs[1], parseInt(ofs[2]+parseInt(tagpro.score.r)), parseInt(ofs[3]+parseInt(tagpro.score.b)), 0, 0];
                     }
                 }
                 if (selectedhalf < games*2) settings.set('selectedhalf', parseInt(selectedhalf+1));
                 settings.set('offsets', offsets);
             });

            (function update_time() {
                var time = getTime(false);
                $("#timerText").html(time);
                setTimeout(update_time, 100);
            })();
        } else {  // if not in group
            settings.set('isPrivate', false);
        }
    });
}