Show My Location on the Joiner World Map

Show_My_Location_on_the_Joiner_World_Map.user.js

// ==UserScript==
// @name            Show My Location on the Joiner World Map
// @description     Shows your geo-location on the World Map based on your IP address (which may not be accurate!)
// @version         0.0.4
// @match           https://tagpro.koalabeast.com/games/find*
// @connect         ip-api.com
// @updateURL       https://gist.github.com/nabbynz/58dd6b0187290f1b5a4d71bb499121b3/raw/Show_My_Location_on_the_Joiner_World_Map.user.js
// @downloadURL     https://gist.github.com/nabbynz/58dd6b0187290f1b5a4d71bb499121b3/raw/Show_My_Location_on_the_Joiner_World_Map.user.js
// @license         GPL version 3 or any later version; http://www.gnu.org/copyleft/gpl.html
// @grant           GM_addStyle
// @grant           GM_xmlhttpRequest
// @author          nabby
// ==/UserScript==

'use-strict'

console.log('START: ' + GM_info.script.name + ' (v' + GM_info.script.version + ' by ' + GM_info.script.author + ')');
console.time();

/* eslint-env jquery */
/* globals tagpro, tagproConfig, io */
/* eslint-disable no-multi-spaces */
/* eslint-disable dot-notation */

// Options...
const WORLDMAP_COLOR = 'random'; // blue, red, green, pink, sepia, black, default or random
const EXCLUDE_DEFAULT_FROM_RANDOM = true; // excludes the default map style from the random pool
const USE_MILES = true; // true to show server distances in Miles rather than Kilometers



function getDistanceFromLatLonInKm(lat1, lon1, lat2, lon2) {
	const R = USE_MILES ? 3959 : 6371; // Radius of the earth (6371 for km or 3959 for mi)
	let dLat = deg2rad(lat2 - lat1);
	let dLon = deg2rad(lon2 - lon1);
	let a =
		Math.sin(dLat / 2) * Math.sin(dLat / 2) +
		Math.cos(deg2rad(lat1)) * Math.cos(deg2rad(lat2)) *
		Math.sin(dLon / 2) * Math.sin(dLon / 2);
	let c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));

	return R * c;
}

function deg2rad(deg) {
	return deg * (Math.PI / 180)
}

let styles = {
    'blue':{
        mapfilter: 'drop-shadow(#fff 0px 0px 1px) drop-shadow(#079 0px 0px 20px) drop-shadow(rgba(50, 10, 150, 0.5) 0px 0px 40px) contrast(160%)',
        selected: 'margin:1px 0 0 1px; background:#88ff88; width:12px; height:12px; border:1px solid #222;',
        unselected: 'margin:1px 0 0 1px; border:2px solid #aaa;',
        mylocation: 'background:radial-gradient(#f0f,#000,#fff,#f0f); box-shadow:0 0 2px 2px #f0f; width:15px; height:15px;',
    },
    'red': {
        mapfilter: 'drop-shadow(#f00 0px 0px 1px) drop-shadow(#ff0 0px 0px 20px) drop-shadow(rgba(250, 10, 10, 0.5) 0px 0px 40px) contrast(200%)',
        selected: 'margin:1px 0 0 1px; background:#88ff88; width:12px; height:12px; border:1px solid #222;',
        unselected: 'margin:1px 0 0 1px; border:2px solid #aaa;',
        mylocation: 'background:radial-gradient(#f0f,#000,#fff,#f0f); box-shadow:0 0 2px 2px #f0f; width:15px; height:15px;',
    },
    'green': {
        mapfilter: 'drop-shadow(#0e0 0px 0px 5px) drop-shadow(#030 0px 0px 30px) drop-shadow(rgba(0, 210, 100, 0.5) 0px 0px 20px) contrast(160%)',
        selected: 'margin:1px 0 0 1px; background:#88ff88; width:12px; height:12px; border:1px solid #222;',
        unselected: 'margin:1px 0 0 1px; border:2px solid #aaa;',
        mylocation: 'background:radial-gradient(#f0f,#000,#fff,#f0f); box-shadow:0 0 2px 2px #f0f; width:15px; height:15px;',
    },
    'whitepink': {
        mapfilter: 'drop-shadow(#0ff 0px 0px 2px) invert(100%) drop-shadow(#f0f 0px 0px 5px) drop-shadow(rgba(250, 10, 210, 0.5) 0px 0px 50px) contrast(200%)',
        selected: 'margin:1px 0 0 1px; background:#00ff00; width:12px; height:12px; border:1px solid #222;',
        unselected: 'margin:1px 0 0 1px; border:2px solid #555;',
        mylocation: 'background:radial-gradient(#00a1ff,#000,#fff,#00a1ff); box-shadow:0 0 2px 2px #00a1ff; width:15px; height:15px;',
    },
    'blackpink': {
        mapfilter: 'drop-shadow(#0ff 0px 0px 2px) drop-shadow(#f0f 0px 0px 5px) drop-shadow(rgba(250, 10, 210, 0.5) 0px 0px 50px) contrast(200%)',
        selected: 'margin:1px 0 0 1px; background:#88ff88; width:12px; height:12px; border:1px solid #222;',
        unselected: 'margin:1px 0 0 1px; border:2px solid #aaa;',
        mylocation: 'background:radial-gradient(#f0f,#000,#fff,#f0f); box-shadow:0 0 2px 2px #f0f; width:15px; height:15px;',
    },
    'sepia': {
        mapfilter: 'drop-shadow(#fff 0px -1px 3px) drop-shadow(#fff 0px 0px 5px) contrast(200%) sepia(100%)',
        selected: 'margin:1px 0 0 1px; background:#88ff88; width:12px; height:12px; border:1px solid #222;',
        unselected: 'margin:1px 0 0 1px; border:2px solid #aaa;',
        mylocation: 'background:radial-gradient(#f0f,#000,#fff,#f0f); box-shadow:0 0 2px 2px #f0f; width:15px; height:15px;',
    },
    'ice': {
        mapfilter: 'drop-shadow(rgb(255, 255, 255) -1px -1px 2px) drop-shadow(rgb(255, 255, 255) 1px 1px 2px) drop-shadow(rgb(127, 64, 64) 0px 0px 2px) invert(100%) drop-shadow(rgba(205, 155, 205, 0.5) 0px 0px 5px) drop-shadow(rgba(010, 20, 10, 0.5) 0px 0px 5px) contrast(180%)',
        selected: 'margin:1px 0 0 1px; background:#88ff88; width:12px; height:12px; border:1px solid #222;',
        unselected: 'margin:1px 0 0 1px; background:#222; border:2px solid #d53636;',
        mylocation: 'background:radial-gradient(#f0f,#000,#fff,#f0f); box-shadow:0 0 2px 2px #f0f; width:15px; height:15px;',
    },
    'black': {
        mapfilter: 'contrast(300%)',
        unselected: 'margin:1px 0 0 1px; border:2px solid #aaa; width:12px; height:12px; border:1px solid #222;',
        selected: 'margin:1px 0 0 1px; background:#88ff88;',
        mylocation: 'background:radial-gradient(#f0f,#000,#fff,#f0f); box-shadow:0 0 2px 2px #f0f; width:15px; height:15px;',
    },
    'default': {
        mapfilter: 'none',
        unselected: 'margin:1px 0 0 1px; border:2px solid #aaa;',
        selected: 'margin:1px 0 0 1px; background:#88ff88;',
        mylocation: 'background:radial-gradient(#f0f,#000,#fff,#f0f); box-shadow:0 0 2px 2px #f0f; width:15px; height:15px;',
    },
};


let serverCoords = [];
let style;

if (WORLDMAP_COLOR === 'random') {
    const keys = Object.keys(styles);

    style = styles[keys[Math.floor(keys.length * Math.random())]];

} else {
    style = styles.hasOwnProperty(WORLDMAP_COLOR) ? styles[WORLDMAP_COLOR] : null;
}


function showMyLocation(lon, lat, location) {
    $('#worldmap').css('opacity', 1);

    GM_addStyle('.joiner .worldmap-target.worldmap-target-white { ' + style.selected + ' }');
    GM_addStyle('.joiner .worldmap-target.worldmap-target-gray { ' + style.unselected + ' }');

    if (!$('#MIPL_My_Location').length) {
        const mapWidth = 1024;
        const mapHeight = 512;
        let posX = (lon + 180) / 360 * mapWidth - 32;
        let posY = (lat - 90) / -180 * mapHeight;
        let mapImage = $('#worldmap')[0].getBoundingClientRect();

        posX *= mapImage.width / mapWidth;
        posY *= mapImage.height / mapHeight;

        if (posX && posY) {
            $("#worldmap-targets").append('<div class="worldmap-target" id="#MIPL_My_Location" style="left:' + (posX - 5) + 'px; top:' + (posY - 5) + 'px; ' + style.mylocation + '" title="My Location: ' + location + '"></div>');
        }

        $('#worldmap-on').attr('id', 'worldmap-onn');
        $('#worldmap-off').attr('id', 'worldmap-offf').css({ 'font-size':'56px', 'font-weight':'bold' });
        $('#worldmap-offf').show();
        $('.joiner .spinner').css({ 'margin':'5px auto 15px', 'font-size':'24px' })
        
        setTimeout(function() {
            $('#worldmap').css({ 'filter': (style.mapfilter || 'none'), 'margin': '-50px 0 -80px' });
            $('#worldmap-container').css({'scale':'0.75' });
        }, 500);
    }
}


let pingTest = function(serverList) {
    let table = $('#MIPL_Server_Distances table tbody');

    serverList.forEach(function(e) {
        var t = io.connect("wss://" + e.host, {
            transports: ["websocket"]
        });
        t.on("connect_error", function() {
            console.log('MIPL:: connect error: ', e.host, e.id);
        });
        t.on("connect", function() {
            var serverId = e.id;
            var n = Date.now();
            var i = 9999;
            var s = 0;
            var o = function() {
                s++;
                if (s === 0) {
                    t.disconnect();
                }
            }
            var u = function() {
                s--;
                var e = setTimeout(o, 5e3);
                t.emit("pingg", {}, function(t) {
                    clearTimeout(e);
                    var r = Date.now() - n;
                    i = Math.min(i, r);
                    $(table).find('td[data-serverid="' + serverId + '"]').text(i + 'ms');
                    o();
                });
            };
            u();
            u();
            u();
        })
    })
};



let doneOnce = false;

$('#worldmap').css('opacity', 0.01);
$('#worldmap-message').remove();

tagpro.rawJoinerSocket.on('ServerList', function(serverList) {
    if (doneOnce || !serverList) {
        return;
    }

    for (let value of serverList) {
        let coord = value.coords.split(',');

        serverCoords.push({ id:value.id, name:value.name, lat:coord[0], lon:coord[1] });
    }

    GM_xmlhttpRequest({
        method: 'GET',
        url: 'http://ip-api.com/json/?fields=status,message,lat,lon,city,regionName,country', // the endpoint for getting our IP Geolocation JSON data
        onload: function(xhr) {
            if (xhr.status === 200) {
                let data = JSON.parse(xhr.responseText);

                $('#settings').after('<div id="MIPL_Server_Distances" style="position:relative; margin:20px 0; padding:2px; width:100%; font-size:12px; border:1px outset #555; border-radius:5px;"><table style="width:100%; text-align:center;"><thead><tr><th>Server</th><th>' + (USE_MILES ? 'Mi' : 'KM') + '</th><th>Ping</th></tr><tbody></tbody></table></div>');

                for (let i = 0; i < serverCoords.length; i++) {
                    let diff = getDistanceFromLatLonInKm(serverCoords[i].lat, serverCoords[i].lon, data.lat, data.lon);
                    $('#MIPL_Server_Distances table tbody').append('<tr data-sortby="' + diff + '"><td>' + serverCoords[i].name + '</td><td style="text-align:right;">' + Number(diff.toFixed(0)).toLocaleString() + '</td><td data-serverid="' + serverCoords[i].id + '">-</td></tr>');
                }

                pingTest(serverList);

                $('#MIPL_Server_Distances table tbody tr').sort(function(a, b) {
                    return a.dataset.sortby - b.dataset.sortby;
                }).appendTo( $('#MIPL_Server_Distances table tbody') );

                setTimeout(function() {
                    showMyLocation(data.lon, data.lat, data.city + ', ' + data.regionName + ', ' + data.country);
                }, 400);
            }
        },
        onerror: function(data) {
            console.log('ERROR! ' + GM_info.script.name + ' - XHR Error (4)', data);
        }
    });

    doneOnce = true;
});