backline counter

javascript:
var populationPerHC = 4;
var packetSize = 1000;
var villageIDs = [];
var rallyPointURLS = [];
var availableUnits = [];
var backgroundColor = "#36393f";
var borderColor = "#3e4147";
var headerColor = "#202225";
var titleColor = "#ffffdf";
var totalPackets = 0;
if ($("#popup")[0]) $("#popup")[0].remove();
$.getAll = function (
    urls, // array of URLs
    onLoad, // called when any URL is loaded, params (index, data)
    onDone, // called when all URLs successfully loaded, no params
    onError // called when a URL load fails or if onLoad throws an exception, params (error)
) {
    var numDone = 0;
    var lastRequestTime = 0;
    var minWaitTime = 200; // ms between requests
    loadNext();
    function loadNext() {
        if (numDone == urls.length) {
            onDone();
            return;
        }

        let now = Date.now();
        let timeElapsed = now - lastRequestTime;
        if (timeElapsed < minWaitTime) {
            let timeRemaining = minWaitTime - timeElapsed;
            setTimeout(loadNext, timeRemaining);
            return;
        }

        console.log('Getting ', urls[numDone]);
        lastRequestTime = now;
        $.get(urls[numDone])
            .done((data) => {
                try {
                    onLoad(numDone, data);
                    ++numDone;
                    loadNext();
                } catch (e) {
                    onError(e);
                }
            })
            .fail((xhr) => {
                onError(xhr);
            })
    }
};

if (window.location.href.indexOf('screen=overview_villages&mode=combined') < 0) {
    //relocate
    window.location.assign(game_data.link_base_pure + "overview_villages&mode=combined");
}
else {
    //right page
    console.log("Right");
    villageIDs = grabVillageIDs();
    grabVillageAvailableUnits(villageIDs);

}


function popupSophie(html) {
    var popup = `<div id="popup" class="ui-widget-content" style="position:absolute;height: 500px; width: 950px;overflow-y: auto;overflow-x: hidden;z-index:50;background-color:${backgroundColor};cursor:move">
    <table id="tableBarbShaper" class="vis" border="1" style="width: 100%;background-color:${backgroundColor};border-color:${borderColor}">
    <tr>
        <tr>
            <td colspan="10" id="BLpacketCounter" style="text-align:center; width:auto; background-color:${headerColor}">
            <h2>
                <center style="margin:10px"><u>
                        <font color="${titleColor}">Backline packet counter</font>
                    </u>
                </center>
            </h2>
            </td>
        </tr>
        <tr>
            <td colspan="10" id="titlePackets" style="text-align:center; width:auto; background-color:${headerColor}">
            <h2>
                <font color="${titleColor}">Total packets found: ${totalPackets}</font>
                </u>
            </h2>
            </td>
        </tr>
        <tr style="background-color:${backgroundColor}">
        <td id="pasteHere"></td>
        </tr>
    </table>
    <hr>
    <center><img class="tooltip-delayed" title="Sophie -Shinko to Kuma-" src="https://dl.dropboxusercontent.com/s/0do4be4rzef4j30/sophie2.gif" style="cursor:help; position: relative"></center>
    <br>
    <center>
    <p><font color="${titleColor}">Creator: </font><a href="https://forum.tribalwars.net/index.php?members/shinko-to-kuma.121220/" style="text-shadow:-1px -1px 0 ${titleColor},1px -1px 0 ${titleColor},-1px 1px 0 ${titleColor},1px 1px 0 ${titleColor};" title="Sophie profile" target="_blank">Sophie "Shinko to Kuma"</a>
    </p>
    </center>
    </div>`;
    $("#contentContainer").before(popup);
    $("#popup").draggable();
    $("#pasteHere").eq(0).append(html);
    //$("#totalPackets")[0].innerHTML=totalPackets;
}

function grabVillageIDs() {
    var IDs = [];
    /*
    for (var j = 0; j < villageIds.length; j++) {
        targetUrls.push(`${window.location.origin}/game.php?village=${villageIds[j]}&screen=place`);
    }*/
    for (var j = 0; j < $(".quickedit-vn").length; j++) {
        IDs.push($(".quickedit-vn").eq(j).attr("data-id"));
    }
    console.log(IDs);
    return IDs;
}

function grabVillageAvailableUnits(id) {
    //grab rally point for each village /game.php?village=id&screen=place

    for (var i = 0; i < id.length; i++) {
        if (get_sitter_player() == false) {
            rallyPointURLS.push("/game.php?village=" + id[i] + "&screen=place");
        }
        else {
            rallyPointURLS.push("/game.php?t=" + get_sitter_player() + "&village=" + id[i] + "&screen=place");
        }
    }
    console.log(rallyPointURLS);
    $.getAll(rallyPointURLS,
        (i, blabla) => {
            var troopCounts = {};
            $(blabla).find(('a[id^=units_entry_all_]')).each(function (i, el) {
                var id = $(el).attr('id');
                var unit = id.match(/units_entry_all_(\w+)/)[1];
                var count = $(el).text();
                count = count.match(/\((\d+)\)/)[1];
                troopCounts[unit] = parseInt(count);
            });
            availableUnits.push(troopCounts);
        },
        () => {
            console.log("Total available");
            console.table(availableUnits);
            //header section
            var html = `<font color="${titleColor}"><table id="troops" class="vis" border="1" style="width: 100%;background-color:${backgroundColor};border-color:${borderColor}">
        <tr><td style="text-align:center; width:auto; background-color:${headerColor}">ID</td><td align="center" style="background-color:${headerColor}">Village link</td><td align="center" style="background-color:${headerColor}">Packets</td>`;
            //header for each unit available
            for (var o = 0; o < game_data.units.length - 1; o++) {
                html += `<td align="center" style="background-color:${headerColor}">${game_data.units[o]}</td>`
            }
            html += `</tr>`;

            //troops section
            for (var k = 0; k < id.length; k++) {
                html += `<tr><td align="center" style="background-color:${backgroundColor}">${id[k]}</td><td align="center" style="background-color:${backgroundColor}"><a href=${$(".quickedit-content")[k].children[0].href} style="color:#40D0E0;"><div style="height:100%;width:100%">${$(".quickedit-content")[k].innerText}</div></td>`;
                //calc population of def units
                localDefPackets = availableUnits[k]["spear"] + availableUnits[k]["sword"];
                if (game_data.units[3] == "archer") {
                    localDefPackets += availableUnits[k]["archer"]
                }
                heavyNr = game_data.units.indexOf("heavy");
                localDefPackets += availableUnits[k]["heavy"] * populationPerHC;
                localDefPackets = Math.floor(localDefPackets / packetSize);
                totalPackets+=localDefPackets;
                html += `<td align="center" style="background-color:${backgroundColor}">${localDefPackets}</td>`
                for (var unit = 0; unit < game_data.units.length - 1; unit++) {
                    html += `<td align="center" style="background-color:${backgroundColor}">${availableUnits[k][game_data.units[unit]]}</td>`
                }
                html += `</tr>`
            }
            html += `</table></font>`
            popupSophie(html);
        },
        (error) => {
            console.error(error);
        });
}