Greasy Fork is available in English.

TagPro Groups on Homepage

Show available groups *of all servers* on the homepage, joiner page and inside a group

// ==UserScript==
// @name         TagPro Groups on Homepage
// @version      2.4
// @description  Show available groups *of all servers* on the homepage, joiner page and inside a group
// @author       Ko
// @supportURL   https://www.reddit.com/message/compose/?to=Wilcooo
// @website      https://redd.it/no-post-yet
// @download     https://raw.githubusercontent.com/wilcooo/TagPro-GroupsOnHomepage/master/tpgoh.user.js
// @match        http://*.koalabeast.com*
// @match        http://tagpro.gg/
// @grant        GM_xmlhttpRequest
// @grant        GM_getValue
// @grant        GM_setValue
// @license      MIT
// @icon         https://raw.githubusercontent.com/wilcooo/TagPro-GroupsOnHomepage/master/icon.png
// @require      https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.1.0/socket.io.slim.js
// @require      https://greasyfork.org/scripts/371240/code/TagPro%20Userscript%20Library.js
// @connect      koalabeast.com
// @namespace https://greasyfork.org/users/152992
// ==/UserScript==



/* global tagpro, io, tpul */



var short_name = 'groups_on_homepage'; // An alphabetic (no spaces/numbers, preferably lowercase) distinctive name for the script.
var version = GM_info.script.version; // The version number is automatically fetched from the metadata.
tagpro.ready(function(){ tagpro.scripts = Object.assign( tagpro.scripts || {}, {short_name:{version:version}} ); });
console.log('START: ' + GM_info.script.name + ' (v' + version + ' by ' + GM_info.script.author + ')');


// Userscripts load in the order that they appear in Tamermonkey.
// Set this option to true if you want this script to be inserted to
// the page above than previously load scripts, instead of below.
const insertBefore = false;


var settings = tpul.settings.addSettings({
    id: short_name,
    title: "Configure Groups on Homepage",
    tooltipText: "Groups on Homepage",
    icon: "https://raw.githubusercontent.com/wilcooo/TagPro-GroupsOnHomepage/master/icon.png",

    fields: {
        groups_on_home: {
            label: 'Show all public groups (worldwide) on the homepage',
            type: 'checkbox',
            default: true,
        },
        groups_on_find: {
            label: 'Show all public groups (worldwide) while finding a game',
            type: 'checkbox',
            default: true,
        },
        groups_on_groups: {
            label: 'Show all public groups (worldwide) on the /groups page, instead of just the current server\'s groups',
            type: 'checkbox',
            default: true,
        },
        groups_in_group: {
            label: 'Show all public groups (worldwide) while in a group',
            type: 'checkbox',
            default: true,
        },
        position: {
            label: 'Position of the groups on the homepage',
            type: 'select',
            options: ['top','bottom'],
            default: 'top',
        },
        interval: {
            label: 'How often should this script update the groups, so you don\'t have to F5 all the time? Choose an amount of seconds, or set to 0 to never update',
            type: 'int',
            min: 0,
            max: 600,
            default: 60
        },
    },

    events: {
        open: function () {

            // Changing the layout a bit after the config panel is opened...

            [...this.frame.getElementsByClassName('field_label')].forEach( function(el) {
                el.classList.remove('col-xs-4');
                el.classList.add('col-xs-8');
                el.nextElementSibling.classList.remove('col-xs-8');
                el.nextElementSibling.classList.add('col-xs-4');
            } );
        },
        save: function() {

            // Making sure (most) options take effect immediately after a save...

            position = settings.get("position");
            groups_on_home = settings.get("groups_on_home");
            groups_on_find = settings.get("groups_on_find");
            groups_on_groups = settings.get("groups_on_groups");
            groups_in_group = settings.get("groups_in_group");
            interval = settings.get("interval");


            // Update the position of the groups if necessary:

            var groups_div = document.getElementById('GroPro-groups');

            update_groups();

            groups_div.classList.remove('hidden');

            if (window.location.pathname === '/' && !groups_on_home ||
                window.location.pathname.match(/^\/groups\/[a-z]{8}$/) && !groups_in_group ||
                window.location.pathname === '/groups' && !groups_on_groups ||
                window.location.pathname === '/games/find' && !groups_on_find ) {

                groups_div.classList.add('hidden');
            }

        }
    }
});


var position = settings.get("position"),
    groups_on_home = settings.get("groups_on_home"),
    groups_on_find = settings.get("groups_on_find"),
    groups_on_groups = settings.get("groups_on_groups"),
    groups_in_group = settings.get("groups_in_group"),
    interval = settings.get("interval");






const servers = ['centra','pi','chord','diameter','origin','sphere','radius','orbit'];

// We don't use this api anymore, since anonymous xmlhttpRequests are now possible.
//const groups_api = 'https://script.google.com/macros/s/AKfycbxF5kcVoFbqmLlbHB2_nJ_dCRoh2iOXDpFyzAq0Kw2UDjM7qEHf/exec';


var warned = false;

function get_groups() {return new Promise(function(resolve,reject) {

    var parser = new DOMParser(),
        groups = [],
        pending = 0;

    servers.forEach(function(server) {

        pending ++;

        GM_xmlhttpRequest({
            url: 'http://tagpro-'+server+'.koalabeast.com/groups/',
            anonymous: true,
            onload: done,
            onerror: done,
            timeout: 5000,
            context: server,
        });
    });

    function done(response){

        pending --;

        if (response.finalUrl.includes('groupAuth')) {
            //if (!warned) warned = tagpro.helpers.displayError("Sorry, your IP address has been flagged - so the GroupsOnHome script can't yet show you the groups. No worries though, I'm working on a fix for this.");
            console.error("Sorry, your IP address has been flagged - so the GroupsOnHome script can't yet show you the groups. No worries though, I'm working on a fix for this.");
            groups.flagged = true;
        }

        if (response.response) {

            var groups_doc = parser.parseFromString(response.response, "text/html");
            for (var group_item of groups_doc.getElementsByClassName('group-item')) {

                var group = { server: response.context };
                groups.push(group);

                for (var el of group_item.querySelectorAll("*") ) {
                    if (el.classList.contains('group-type')) {
                        group.type = el.innerText.trim();
                    } else if (el.classList.contains('group-name')) {
                        group.name = el.innerText.trim();
                    } else if (el.tagName == "A") {
                        if (el.href.startsWith("http")) group.link = el.href;
                        else group.link = "http://tagpro-"+group.server+".koalabeast.com"+el.href;
                    } else if (el.innerText.trim().startsWith('Leader')) {
                        group.leader = el.innerText.slice(el.innerText.indexOf(":")+1);
                    } else if (el.innerText.trim().startsWith('Players')) {
                        group.players = el.innerText.slice(el.innerText.indexOf(":")+1);
                    }
                }
            }
        }

        else console.error("Couldn't get groups on "+response.context, response);

        if (pending === 0) resolve(groups);
    }
});}



function update_groups() {


    if (!(window.location.pathname === '/groups' && groups_on_groups || // If we are on the groups selection page
    window.location.pathname.match(/^\/groups\/[a-z]{8}$/) && groups_in_group || // If we are in a group
    window.location.pathname === '/games/find' && groups_on_find || // In the process of joining a game
    window.location.pathname === '/' && groups_on_home )) // If we are on the homepage
    { return; }


    // Relocate the groups container
    // Add the container to the userscript-div and make unhide that
    if (groups_list.parentElement.id == "GroPro-groups") {
        var pos =
            document.getElementById('userscript-'+position) ||
            document.getElementById('userscript-home') ||
            document.getElementById('userscript-top') ||
            (location.host.startsWith("tagpro.") && document.getElementsByClassName('header')[0]);
        if (!pos) return tagpro.helpers.displayError('Sorry, something went wrong while trying to show you the groups of all servers. Error code: Giraffe (inform /u/Wilcooo if you want me to fix it)');
        if (insertBefore) pos.insertBefore(container, pos.firstChild);
        else pos.append(container);
        pos.classList.remove('hidden');
    }

    groups_list.className = 'row groups-list';

    var groups_list_cache = GM_getValue('groups-list-cache',{});

    groups_list.innerHTML = '<div class=spinner align=center> <div class=spinner-item></div> <div class=spinner-item></div> <div class=spinner-item></div> <div class=spinner-item></div>';

    if (Date.now() - groups_list_cache.time < 65e3) groups_list.innerHTML += groups_list_cache.html;

    // Get ping and server stats for each server
    window.addEventListener('load',function(){

        servers.forEach( function(server) {
            var host = 'http://tagpro-'+server+'.koalabeast.com:80';

            var connection = io.connect(host, {transports: ["websocket"]});

            connection.on('connect',function(){
                var ping = -Date.now();
                connection.emit('stats',{},function(stats) {
                    ping += Date.now();

                    styleSheet.insertRule('.'+server+'-stats:after { content:"(ping: '+ping+', '+stats.players+' players in '+stats.games+' games)"; color:#868686; font-style:italic; font-size:small; }');
                    styleSheet.insertRule('.'+server+'-stats .spinner { display:none !important; }');
                });
            });
        });
    });


    get_groups().then(function(groups) {

        groups_list.innerHTML = '';

        for (var group of groups) {
            var group_html =
                    `<div class="col-sm-6 col-md-4">
                        <div class="group-item">
                            <div class="row">
                                <div class="col-md-12">
                                    <div class="pull-right group-type"> `+group.type+` </div>
                                    <div class="group-name ellipsis"> `+group.name+` </div>
                                </div>
                                <div class="col-xs-6">
                                    <div class="ellipsis"> Leader: `+group.leader+` </div>
                                    <div class="ellipsis"> Players: `+group.players+` </div>
                                </div>
                                <div class="col-xs-6">
                                    <a class="btn btn-primary pull-right ellipsis" href="`+group.link+`"> Join Group </a>
                                </div>
                                <div class="col-xs-12 ellipsis `+group.server+`-stats">
                                    Server: `+group.server[0].toUpperCase() + group.server.slice(1)+`
                                    <div class=spinner style="display:inline">
                                        <div class=spinner-item></div>
                                        <div class=spinner-item></div>
                                        <div class=spinner-item></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>`;
            groups_list.innerHTML += group_html;
        }

        if (groups.flagged) {
            groups_list.innerHTML = `
                    <div class="col-sm-6 col-md-4">
                        <div class="group-item" style="height:118px; font-size:smaller; color:lightgray">
                            Sorry, your IP address has been flagged by TagPro - so the GroupsOnHome script can't yet show you the groups. No worries though, I'm working on a fix for this.
                        </div>
                    </div>`;
        } else if (groups.length === 0) {
            groups_list.innerHTML = `
                    <div class="col-sm-6 col-md-4">
                        <div class="group-item" style="height:118px">
                            <div class="row">
                                <div class="col-md-12">
                                    <div class="group-name">No public groups available. Create one!</div>
                                </div>
                            </div>
                        </div>
                    </div>`;
        }

        if (window.location.pathname !== '/groups') {
            groups_list.innerHTML +=
                `<div class="col-sm-6 col-md-4">
                     <div class="group-item">
                         <div class="row">
                             <form method="post" action="/groups/create">
                                 <div class="col-md-12">
                                     <input name="name" class="group-name" style="background:0;border:0;width:100%;height:27px" value="Your group">
                                 </div>
                                 <div class="col-md-12"><br></div>
                                 <div class="col-xs-6">
                                     <label tabindex="0" class="btn btn-default input-label ellipsis">
                                         <input tabindex="-1" type="checkbox" name="public"> Public Group
                                     </label>
                                 </div><div class="col-xs-6">
                                     <button class="btn btn-primary ellipsis pull-right" style="">Create Group</button>
                                 </div>
                             </form>
                         </div>
                     </div>
                 </div>`;
        }

        for (var label of document.getElementsByClassName('input-label')) {
            label.onkeydown = function(keydown) {
                if (keydown.code == 'Space') {
                    keydown.preventDefault();
                    keydown.target.firstElementChild.checked ^= true;
                }
                if (keydown.code == 'Enter') {
                    keydown.preventDefault();
                    keydown.target.closest('form').submit();
                }
            };
        }

        GM_setValue('groups-list-cache', {'html': groups_list.innerHTML, 'time': Date.now()});
    });


    clearTimeout(timeout);
    if (interval) timeout = setTimeout(update_groups, 1000*interval);
}


var timeout = -1,
    groups_list = document.querySelector(".groups-list") || document.createElement('div');

// Create a container for the groups
if (!groups_list.parentElement) {
    var container = document.createElement('div');
    container.id = 'GroPro-groups';
    container.className = 'container';

    container.appendChild(groups_list);
}

update_groups();


document.head.appendChild( document.createElement('style' ));
var styleSheet = document.styleSheets[ document.styleSheets.length -1 ];

styleSheet.insertRule( '.ellipsis { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }' );