Add calculator form to new tab

CHANGELOG.md

@@ -1,5 +1,21 @@
 # Changelog
 
+## 1.11.3 (2026-11-21)
+
+- ajout du calculateur de trajet vers un nouvel onglet
+
+## 1.11.2 (2026-11-28)
+
+- correction du bug sur les multiples attaques avec comte
+- correction du bug sur le bouton pour sélectionner toutes les troupes
+- correction du bug sur l'envoi de ressources vers un village cible
+- ajout des ids dans la liste des joueurs d'une alliance
+- ajout de l'id sur le profil d'un joueur
+
+## 1.11.1 (2026-11-24)
+
+- ajout de l'id des joueurs dans le classement général et la liste des membres de l'alliance
+
 ## 1.10.1 (2026-11-20)
 
 - envoi des ressources par milliers sur le marché

images/blank.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><!--!Font Awesome Free v7.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path fill="#000000" d="M416.5 88L416.5 160L352.5 160C273 160 208.5 224.5 208.5 304C208.5 397.4 291.3 438.8 309.1 446.6C311.3 447.6 313.7 448 316.2 448L318.7 448C328.5 448 336.5 440 336.5 430.2C336.5 421.9 330.6 414.7 323.7 409.9C314.8 403.7 304.5 391.7 304.5 369.4C304.5 324.4 341 287.9 386 287.9L416.5 287.9L416.5 359.9C416.5 369.6 422.3 378.4 431.3 382.1C440.3 385.8 450.6 383.8 457.5 376.9L593.5 240.9C602.9 231.5 602.9 216.3 593.5 207L457.5 71C450.6 64.1 440.3 62.1 431.3 65.8C422.3 69.5 416.5 78.3 416.5 88zM144.5 160C100.3 160 64.5 195.8 64.5 240L64.5 496C64.5 540.2 100.3 576 144.5 576L400.5 576C444.7 576 480.5 540.2 480.5 496L480.5 464C480.5 446.3 466.2 432 448.5 432C430.8 432 416.5 446.3 416.5 464L416.5 496C416.5 504.8 409.3 512 400.5 512L144.5 512C135.7 512 128.5 504.8 128.5 496L128.5 240C128.5 231.2 135.7 224 144.5 224L160.5 224C178.2 224 192.5 209.7 192.5 192C192.5 174.3 178.2 160 160.5 160L144.5 160z"/></svg>

manifest.json

@@ -1,7 +1,7 @@
 {
   "manifest_version": 3,
   "name": "KAplus",
-  "version": "1.10.1",
+  "version": "1.11.3",
 
   "developer": {
     "name": "Samuel Campos",

metadata.json

@@ -5,8 +5,8 @@
       "firefox"
     ],
     "release_notes": {
-      "fr": "- envoi des ressources par milliers sur le marché",
-      "en-US": "- send resources by thousands in market"
+      "fr": "- ajout du calculateur de trajet vers un nouvel onglet",
+      "en-US": "- add travel calculator in new tab"
     }
   }
 }

src/kaplus.js

@@ -27,9 +27,11 @@ function createCustomElement(tag, attrs, text, style) {
     let elt = document.createElement(tag);
     if (attrs) {
         for (let [key, value] of Object.entries(attrs)) {
+            if (value !== null) {
                 elt.setAttribute(key, value.toString());
             }
         }
+    }
     if (text) {
         elt.textContent = text.toString();
     }
@@ -100,6 +102,23 @@ function shortcutElementReplace(elt, img, text) {
     }
 }
 
+function customizeNavbar(layCastleElement) {
+    /* Improve navbar icons */
+    let shortcutElements = layCastleElement.getElementsByClassName("shortcut_element");
+    shortcutElementReplace(shortcutElements[0], "ranking", shortcutElements[0].textContent.replace(/[^0-9]/g, ""));
+    shortcutElementReplace(shortcutElements[1], "ally", "");
+    shortcutElementReplace(shortcutElements[2], "profile", "");
+    shortcutElementReplace(shortcutElements[3], "premium", "");
+    shortcutElementReplace(shortcutElements[4], "messages", "");
+    shortcutElementReplace(shortcutElements[5], "tools", "");
+    shortcutElementReplace(shortcutElements[6], "favorites", "");
+
+    /* Center navbar */
+    let shortcutContainers = layCastleElement.getElementsByClassName("shortcut_container");
+    shortcutContainers[0].classList.add("shortcut_container_left");
+    shortcutContainers[2].classList.add("shortcut_container_right");
+}
+
 function countUpMs() {
     let arrivalDate = new Date(new Date().getTime() + movingDuration * 1000);
     let prefix = "";
@@ -119,56 +138,48 @@ function countUpMs() {
         + Math.floor(arrivalDate.getMilliseconds() / 100);
 }
 
-function handleDomContentLoaded() {
+function removeAdsBanner() {
     /* Remove iframe banner */
     document.getElementById("banner_skyscraper").remove();
 }
 
-function main() {
-    /* Exit immediately if extension has already been loaded */
-    let kaplus = document.getElementById("kaplus-marker");
-    if (kaplus) {
+function showPlayersId() {
+    /* Add a column with player id */
+    let mainContentPane = document.getElementsByClassName("contentpane")[1];
+    let borderListTable = mainContentPane.getElementsByClassName("borderlist")[0];
+    let playerRows = borderListTable.getElementsByTagName("tr");
+
+    let headerCells = playerRows[0].getElementsByTagName("th");
+    let nameCellIndex = -1;
+    for (let i = 0; i < headerCells.length; i ++) {
+        if (headerCells[i].textContent === "Nom") {
+            nameCellIndex = i;
+            break;
+        }
+    }
+    if (nameCellIndex === -1) {
+        /* Name column not found, so return */
+        console.log("Column 'Nom' not found, cannot show player ids :(");
         return;
     }
 
-    /* Exit immediately if not on game page */
-    let layCastleTopElements = document.getElementsByClassName("lay_castle_top");
-    if (layCastleTopElements.length === 0) {
-        return;
+    let idHeaderCell = createCustomElement("th", {"class": headerCells[0].getAttribute("class")}, "Id");
+    for (let i = 1; i < playerRows.length; i ++) {
+        let playerCells = playerRows[i].getElementsByTagName("td");
+        let playerProfileLink = playerCells[nameCellIndex].getElementsByTagName("a")[0].getAttribute("href");
+        let idValue = playerProfileLink.replace(/^.*id=(\d+)$/, "$1");
+        let idCell = createCustomElement("td", {"class": playerCells[0].getAttribute("class")}, idValue);
+        playerRows[i].insertBefore(idCell, playerCells[nameCellIndex]);
+    }
+    playerRows[0].insertBefore(idHeaderCell, headerCells[nameCellIndex]);
 }
-    window.addEventListener("DOMContentLoaded", handleDomContentLoaded);
 
-    /* Add extension marker */
-    document.body.appendChild(createCustomElement("div", {"id": "kaplus-marker"}, null, {"display": "none"}));
-
-    /* Improve navbar icons */
-    let shortcutElements = layCastleTopElements[0].getElementsByClassName("shortcut_element");
-    shortcutElementReplace(shortcutElements[0], "ranking", shortcutElements[0].textContent.replace(/[^0-9]/g, ""));
-    shortcutElementReplace(shortcutElements[1], "ally", "");
-    shortcutElementReplace(shortcutElements[2], "profile", "");
-    shortcutElementReplace(shortcutElements[3], "premium", "");
-    shortcutElementReplace(shortcutElements[4], "messages", "");
-    shortcutElementReplace(shortcutElements[5], "tools", "");
-    shortcutElementReplace(shortcutElements[6], "favorites", "");
-
-    /* Center navbar */
-    let shortcutContainers = layCastleTopElements[0].getElementsByClassName("shortcut_container");
-    shortcutContainers[0].classList.add("shortcut_container_left");
-    shortcutContainers[2].classList.add("shortcut_container_right");
-
-    /* Parse url params and switch case */
-    let urlParams = new URLSearchParams(window.location.search);
-    let section = urlParams.get("s");
-    let module = urlParams.get("m");
-    let sub = urlParams.get("sub");
-    let sendCommandForm = document.getElementById("sendCommandForm");
-
-    /* Display unit-points on user profile */
-    if (section === "info_player" && (module === "profile" || module === null)) {
+function showPlayerUnitPointsAndId() {
     let mainContentPane = document.getElementsByClassName("contentpane")[1];
     let borderLists = mainContentPane.getElementsByClassName("borderlist");
 
     let playerPropertiesTable = borderLists[0];
+    let playerPropertiesTbody = playerPropertiesTable.getElementsByTagName("tbody")[0];
     let playerPropertiesRows = playerPropertiesTable.getElementsByTagName("tr");
     let totalPoints = num(playerPropertiesRows[2].getElementsByTagName("td")[1].textContent);
     let villagesCount = num(playerPropertiesRows[4].getElementsByTagName("td")[1].textContent);
@@ -187,13 +198,22 @@ function main() {
         armyPercent = (Math.round(armyPoints / villagesCount) / 100).toString() + " %";
     }
 
-        playerPropertiesTable.appendChild(createKeyValueRow("Points troupes:", str(armyPoints)));
-        playerPropertiesTable.appendChild(createKeyValueRow("% points troupes:", armyPercent));
+    let moduleMenu = mainContentPane.getElementsByTagName("table")[0];
+    let moduleHyperlink = moduleMenu.getElementsByTagName("a")[0];
+    let playerId = moduleHyperlink.getAttribute("href").replace(/^.*[?&]id=(\d+).*$/, "$1");
+
+    playerPropertiesTbody.appendChild(createKeyValueRow("Points troupes:", str(armyPoints)));
+    playerPropertiesTbody.appendChild(createKeyValueRow("% points troupes:", armyPercent));
+    playerPropertiesTbody.insertBefore(createKeyValueRow("Id:", playerId), playerPropertiesRows[2]);
 }
 
-    /* Display unit-points on village overview */
-    if (section === "overview") {
-        let settlements = document.getElementById("settlement").textContent.split("|");
+function showVillageUnitPoints() {
+    let settlementElt = document.getElementById("settlement");
+    if (settlementElt === null) {
+        console.log("Settlement element not found => cannot show village points :(");
+        return;
+    }
+    let settlements = settlementElt.textContent.split("|");
     let noBorderRows = document.getElementsByClassName("noborder");
     let villagePointsRow = noBorderRows[0];
     for (let i = 0; i < noBorderRows.length; i++) {
@@ -208,31 +228,69 @@ function main() {
     villagePointsRow.after(unitPointsRow);
 }
 
-    /* Units order page */
-    if (section === "build_barracks" && (module === null || module === "command") && sendCommandForm !== null) {
+function showBarrackSelectAllUnits() {
+    let sendCommandForm = document.getElementById("sendCommandForm");
     let barracksCommands = sendCommandForm.getElementsByClassName("barracksCommand");
     let borderListTables = sendCommandForm.getElementsByClassName("borderlist");
 
-        let quantityLabel = createCustomElement("label");
-        let quantityInput = createCustomElement("input", {"type": "checkbox"});
-        quantityInput.addEventListener("change", function () {
-            let clickSpans = [];
+    let unitCountBoxes = [];
     if (barracksCommands.length === 1) {
-                clickSpans = barracksCommands[0].getElementsByClassName("click");
+        unitCountBoxes = barracksCommands[0].getElementsByClassName("box");
     } else if (borderListTables.length === 1) {
-                clickSpans = borderListTables[0].getElementsByClassName("click");
+        unitCountBoxes = borderListTables[0].getElementsByTagName("td");
     }
-            for (let i = 0; i < 12; i++) {
-                if (clickSpans[i].classList.contains("all")) {
+    for (let i = 0; i < unitCountBoxes.length; i ++) {
+        let unitCountInputs = unitCountBoxes[i].getElementsByTagName("input");
+        if (unitCountInputs.length === 0) {
             continue;
         }
-                clickSpans[i].click();
+        let unitCountInput = unitCountInputs[0];
+        if (unitCountInput.getAttribute("type") === null) {
+            unitCountInput.setAttribute("type", "number");
+            unitCountInput.style.width = "65px";
+        }
+    }
+
+    let sendXInput = document.getElementById("send_x");
+    sendXInput.setAttribute("type", "number");
+    if (sendXInput.value === "0") {
+        sendXInput.value = "";
+    }
+
+    let sendYInput = document.getElementById("send_y");
+    sendYInput.setAttribute("type", "number");
+    if (sendYInput.value === "0") {
+        sendYInput.value = "";
+    }
+
+    let selectAllLabel = createCustomElement("label");
+    let selectAllInput = createCustomElement("input", {"type": "checkbox"});
+    selectAllInput.addEventListener("change", function () {
+        for (let i = 0; i < unitCountBoxes.length; i ++) {
+            let unitCountBox = unitCountBoxes[i];
+            let unitCountClicks = unitCountBox.getElementsByClassName("click");
+            if (unitCountClicks.length === 0) {
+                continue;
+            }
+
+            let unitCountClick = unitCountClicks[0];
+            if (unitCountClick.classList.contains("all")) {
+                continue;
+            }
+
+            let unitCountInput = unitCountBox.getElementsByTagName("input")[0];
+            if (this.checked && unitCountClick.textContent !== "(0)") {
+                unitCountInput.value = unitCountClick.textContent.replace(/^\(([^.]*)(\.([^.]*))?\)$/, "$1$3");
+            } else {
+                unitCountInput.value = "";
+            }
         }
     })
-        quantityLabel.appendChild(quantityInput);
-        let quantitySpan = createCustomElement("span", {"class": "click all"}, "(Tout sélectionner)");
-        quantityLabel.appendChild(quantitySpan);
+    selectAllLabel.appendChild(selectAllInput);
+    let selectAllSpan = createCustomElement("span", {"class": "click all"}, "(Tout sélectionner)");
+    selectAllLabel.appendChild(selectAllSpan);
 
+    /* Modern style */
     if (barracksCommands.length === 1) {
         let boxCell = createCustomElement("div", {"class": "box"});
 
@@ -257,16 +315,17 @@ function main() {
         nameCell.appendChild(nameA);
         boxCell.appendChild(nameCell);
 
-            let quantityCell = createCustomElement("div", {"class": "quantity"});
-            quantityCell.appendChild(quantityLabel);
-            boxCell.appendChild(quantityCell);
+        let selectAllCell = createCustomElement("div", {"class": "quantity"});
+        selectAllCell.appendChild(selectAllLabel);
+        boxCell.appendChild(selectAllCell);
 
         let brTag = barracksCommands[0].getElementsByTagName("br")[1];
         barracksCommands[0].insertBefore(boxCell, brTag);
 
+    /* Classic style */
     } else if (borderListTables.length === 1) {
         let borderListRows = borderListTables[0].getElementsByTagName("tr");
-            let selectAllCell = borderListRows[1].getElementsByTagName("td")[3];
+        let selectAllCell = borderListRows[4].getElementsByTagName("td")[3];
 
         let imageA = createCustomElement("a", {"href": "help.php?m=units", "target": "_help"});
         let imageImg = createCustomElement(
@@ -275,13 +334,11 @@ function main() {
         imageA.appendChild(imageImg);
         selectAllCell.appendChild(imageA);
 
-            selectAllCell.appendChild(quantityLabel);
+        selectAllCell.appendChild(selectAllLabel);
     }
 }
 
-    /* Units sending page */
-    if (section === "build_barracks" && module === "command" && sub === "send" && sendCommandForm === null) {
-        /* Improve countup time cell */
+function showCountupTimeDecimals() {
     let oldCell = document.getElementById("countup-time");
     let hms = oldCell.parentElement.previousElementSibling.getElementsByTagName("td")[1].textContent.split(":");
     movingDuration = parseInt(hms[0]) * 3600 + parseInt(hms[1]) * 60 + parseInt(hms[2]) ;
@@ -293,8 +350,9 @@ function main() {
     oldCell.parentElement.parentElement.insertBefore(newRow, oldCell.parentElement);
     oldCell.parentElement.style.display = "none";
     setInterval(countUpMs, 100);
+}
 
-        /* Allow multiple occurrences of send */
+function showOccurrencesInput() {
     let table = createCustomElement("table", {"class": "borderlist"});
     let tbody = createCustomElement("tbody");
     let tr = createCustomElement("tr");
@@ -310,27 +368,28 @@ function main() {
     let firstInput = form.getElementsByTagName("input")[0];
     form.insertBefore(table, firstInput);
     form.addEventListener("submit", function (event) {
+        event.preventDefault();
         let formData = new FormData(this);
         let attackCount = parseInt(formData.get("occurrences").toString());
         formData.delete("occurrences");
         let sent = 0;
         for (let i = 0; i < attackCount; i ++) {
             let xhr = new XMLHttpRequest();
-                xhr.onload = function () {
+            xhr.addEventListener("readystatechange", function () {
+                if (this.readyState === this.DONE) {
                     sent ++;
+                }
                 if (sent === attackCount) {
                     window.location.replace(xhr.responseURL);
                 }
-                }
+            })
             xhr.open(this.method, this.action, true);
             xhr.send(formData);
         }
     });
 }
 
-    /* Market sending page */
-    if (section === "build_market" && (module === "send" || module === null)) {
-        /* Fix select bug in target village select */
+function fixSelectVillageBug() {
     let select = document.getElementsByName("village_name")[0];
     select.removeAttribute("onchange");
     select.addEventListener("change", function () {
@@ -345,8 +404,9 @@ function main() {
             sendY.value = xy[1];
         }
     });
+}
 
-        /* Add form to send resources by thousands */
+function showThousandInputs() {
     let sendForm = document.getElementsByTagName("form")[0]
     sendForm.addEventListener("submit", function () {
         let inputs = this.getElementsByTagName("input");
@@ -380,26 +440,30 @@ function main() {
     }
     sendForm.insertBefore(newTable, sendFormTables[0]);
     sendForm.insertBefore(createCustomElement("br"), sendFormTables[1]);
+}
 
-        /* Set inputs type=number */
-        let sendInputs = sendForm.getElementsByTagName("input");
+function fixSendResourcesInputsTypes() {
+    let contentPane = document.getElementsByClassName("contentpane")[1]
+    let sendCommandForm = contentPane.getElementsByTagName("form")[0];
+    let sendInputs = sendCommandForm.getElementsByTagName("input");
     for (let i = 0; i < sendInputs.length; i ++) {
         if (sendInputs[i].name.startsWith("send_")) {
             sendInputs[i].setAttribute("type", "number");
+            if (sendInputs[i].value === "0") {
                 sendInputs[i].value = "";
+            }
             sendInputs[i].style.width = "65px";
         }
     }
 }
 
-    /* Improve attacks display */
-    if (section === "ally" && module === "attacks") {
+function showSecondsAndCalculator() {
     let serverTime = parseInt(document.getElementById("servertime").getAttribute("time"));
     let contentPane = document.getElementsByClassName("contentpane")[1]
     let table = contentPane.getElementsByClassName("borderlist")[0];
     let rows = table.getElementsByTagName("tr");
 
-        let headCell = createCustomElement("th");
+    let headCell = createCustomElement("th", null, "Calcul");
     rows[0].appendChild(headCell);
 
     for (let i = 1; i < rows.length; i ++) {
@@ -416,7 +480,16 @@ function main() {
         let targetPoint = searchPoint(cells[1].textContent);
         let calculatorCell = createCustomElement("td");
         let calculatorForm = createCustomElement(
-                "form", {"method": "post", "action": "/?s=tools&m=runtime_calculator&inta=calculate"}
+            "form",
+            {
+                "method": "post",
+                "action": "/?s=tools&m=runtime_calculator&inta=calculate",
+                "title": "Calculateur de trajet",
+            },
+            null,
+            {
+                "display": "inline-block",
+            },
         );
         calculatorForm.appendChild(createCustomInput("hidden", "start_x", startPoint.x));
         calculatorForm.appendChild(createCustomInput("hidden", "start_y", startPoint.y));
@@ -431,9 +504,109 @@ function main() {
         );
         calculatorForm.appendChild(calculatorImg);
         calculatorCell.appendChild(calculatorForm);
+
+        let calculatorFormBlank = calculatorForm.cloneNode(true);
+        calculatorFormBlank.setAttribute("target", "_blank");
+        calculatorFormBlank.setAttribute("title", "Calculateur de trajet dans nouvel onglet");
+        let calculatorBlankImg = calculatorFormBlank.getElementsByTagName("input")[4]
+        calculatorBlankImg.setAttribute("src", chrome.runtime.getURL("images/blank.svg"));
+        calculatorCell.appendChild(calculatorFormBlank);
+
         rows[i].appendChild(calculatorCell);
     }
 }
+
+function main() {
+    /* Exit immediately if not on game page */
+    let layCastleTopElements = document.getElementsByClassName("lay_castle_top");
+    if (layCastleTopElements.length === 0) {
+        return;
+    }
+
+    /* Exit immediately if extension has already been loaded */
+    let kaplus = document.getElementById("kaplus-marker");
+    if (kaplus) {
+        return;
+    }
+
+    /* Set marker to prevent loading extension several times */
+    document.body.appendChild(createCustomElement("div", {"id": "kaplus-marker"}, null, {"display": "none"}));
+
+    /* Remove ads banner on dom content loaded */
+    window.addEventListener("DOMContentLoaded", removeAdsBanner);
+
+    /* Customize navbar */
+    customizeNavbar(layCastleTopElements[0]);  // test: OK
+
+    /* Parse url params and switch case */
+    let urlParams = new URLSearchParams(window.location.search);
+    let section = urlParams.get("s");
+    let module = urlParams.get("m");
+    let sub = urlParams.get("sub");
+
+    /* Choose action according to section, module and sub */
+    switch (section) {
+        case "ranking":
+            switch (module) {
+                case "player": case null:
+                    showPlayersId();  // test: OK
+                    break;
+            }
+            break;
+
+        case "ally":
+            switch (module) {
+                case "members":
+                    showPlayersId();  // test: OK
+                    break;
+                case "attacks":
+                    showSecondsAndCalculator();  // test: OK
+                    break;
+            }
+            break;
+
+        case "overview":
+            showVillageUnitPoints();  // test: FAILED because settlement element has been removed
+            break;
+
+        case "build_barracks":
+            switch (module) {
+                case "command": case null:
+                    switch (sub) {
+                        case null:
+                            showBarrackSelectAllUnits();  // test: OK
+                            break;
+                        case "send":
+                            showCountupTimeDecimals();  // test: OK
+                            showOccurrencesInput();  // test: OK
+                            break;
+                    }
+                    break;
+            }
+            break;
+
+        case "build_market":
+            switch (module) {
+                case "send": case null:
+                    fixSelectVillageBug();  // test: OK
+                    showThousandInputs();  // test: OK
+                    fixSendResourcesInputsTypes();  // test: OK
+                    break;
+            }
+            break;
+
+        case "info_player":
+            switch (module) {
+                case "profile": case null:
+                    showPlayerUnitPointsAndId();  // test: OK
+                    break;
+            }
+            break;
+
+        case "info_member":
+            showPlayersId();  // test: OK
+            break;
+    }
 }
 
 main();