wip

src/kaplus.js

@@ -2,6 +2,36 @@ const AUTHORIZED_ALLIANCES = {
     "s58": ["NAZGUL"]
 };
 
+const BUILDINGS = {
+    "main": "Château",
+    "stone": "Carrière",
+    "wood": "Scierie",
+    "iron": "Mine de minerai",
+    "storage": "Entrepôt",
+    "hide": "Cachette",
+    "farm": "Moulin",
+    "barracks": "Caserne",
+    "wall": "Remparts",
+    "stable": "Élevage d'ânes",
+    "snob": "Résidence",
+    "smith": "Orfèvrerie",
+    "statue": "Mémorial",
+}
+
+const UNITS = {
+    "farmer": "Milice de paysans",
+    "sword": "Templier",
+    "spear": "Écuyer",
+    "axe": "Sauvage",
+    "bow": "Grand Arc",
+    "spy": "Éclaireur",
+    "light": "Croisé",
+    "heavy": "Chevalier Noir",
+    "ram": "Bélier",
+    "kata": "Trébuchet",
+    "snob": "Comte",
+}
+
 function num(s) {
 	return parseInt(s.replace(".", ""));
 }
@@ -72,6 +102,144 @@ function searchPoint(text) {
     return {x: point[0], y: point[1]}
 }
 
+function selectVillage(selectRef, inputXRef, inputYRef) {
+    let select = document.getElementById(selectRef);
+    let inputX = document.getElementById(inputXRef);
+    let inputY = document.getElementById(inputYRef);
+    if (select.selectedIndex === 0) {
+        inputX.value = "";
+        inputY.value = "";
+    } else {
+        let xy = select.value.split("|");
+        inputX.value = xy[0];
+        inputY.value = xy[1];
+    }
+}
+
+function storeOrderToken(ownVillages, targetVillage) {
+    let orderToken = sessionStorage.getItem("orderToken");
+    if (orderToken !== null) {
+        return;
+    }
+
+    let breakLoop = false;
+    for (let villageId in ownVillages) {
+        if (breakLoop === true) {
+            return;
+        }
+        let xhrOrder = new XMLHttpRequest();
+        xhrOrder.addEventListener("readystatechange", function () {
+            if (xhrOrder.readyState === xhrOrder.DONE) {
+                let parser = new DOMParser();
+                let doc = parser.parseFromString(xhrOrder.responseText, "text/html");
+                let quantityDivs = doc.getElementsByClassName("quantity");
+                let unit = null;
+                for (let i = 0; i < quantityDivs.length; i ++) {
+                    let quantityInput = quantityDivs[i].getElementsByTagName("input")[0];
+                    let quantityClick = quantityDivs[i].getElementsByClassName("click")[0];
+                    if (quantityClick.textContent !== "(0)") {
+                        unit = quantityInput.getAttribute("name");
+                        break;
+                    }
+                }
+                if (unit === null) {
+                    return;
+                }
+
+                let xhrSend = new XMLHttpRequest();
+                let formData = new FormData();
+                formData.set(unit, "1");
+                formData.set("send_x", targetVillage.x);
+                formData.set("send_y", targetVillage.y);
+                formData.set("support", "Envoyer du renfort");
+                let formParams = new URLSearchParams(formData);
+                xhrSend.addEventListener("readystatechange", function () {
+                    if (xhrSend.readyState === xhrSend.DONE) {
+                        let parser = new DOMParser();
+                        let doc = parser.parseFromString(xhrSend.responseText, "text/html");
+                        let form = doc.getElementsByTagName("form")[0];
+                        let action = form.getAttribute("action");
+                        let orderToken = action.replace(/^.*p=([a-z0-9]+).*$/, "$1");
+                        sessionStorage.setItem("orderToken", orderToken);
+                        breakLoop = true;
+                    }
+                });
+                xhrSend.open("POST", "/?village=" + villageId + "&s=build_barracks&m=command&sub=send");
+                xhrSend.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
+                xhrSend.send(formParams.toString());
+            }
+        });
+        xhrOrder.open("GET", "/?village=" + villageId + "&s=build_barracks");
+        xhrOrder.send();
+    }
+}
+
+function storeTargetVillage(ownVillages) {
+    let targetVillage = sessionStorage.getItem("targetVillage");
+    if (targetVillage !== null) {
+        storeOrderToken(ownVillages, JSON.parse(targetVillage));
+        return;
+    }
+
+    let xhr = new XMLHttpRequest();
+    targetVillage = {};
+    xhr.addEventListener("readystatechange", function () {
+        if (xhr.readyState === xhr.DONE) {
+            let parser = new DOMParser();
+            let doc = parser.parseFromString(xhr.responseText, "text/html");
+            let cells = doc.getElementsByClassName("occupied range");
+            for (let i = 0; i < cells.length; i ++) {
+                let links = cells[i].getElementsByTagName("a");
+                if (links.length === 0) {
+                    continue;
+                }
+                let villageId = links[0].getAttribute("href").replace(/^.*id=(\d{4}).*$/, "$1");
+                if (villageId in ownVillages) {
+                    continue;
+                }
+                let villageXY = links[0].getAttribute("onmouseover").replace(/^.*(\d{3}\|\d{3}).*$/, "$1").split("|");
+                targetVillage = {x: parseInt(villageXY[0]), y: parseInt(villageXY[1])};
+                sessionStorage.setItem("targetVillage", JSON.stringify(targetVillage));
+                storeOrderToken(ownVillages, targetVillage);
+                break;
+            }
+        }
+    });
+    xhr.open("GET", "/?s=map");
+    xhr.send();
+}
+
+function storeOwnVillages() {
+    let ownVillages = sessionStorage.getItem("ownVillages");
+    if (ownVillages !== null) {
+        storeTargetVillage(JSON.parse(ownVillages));
+        return;
+    }
+
+    let xhr = new XMLHttpRequest();
+    xhr.addEventListener("readystatechange", function () {
+        if (xhr.readyState === xhr.DONE) {
+            let parser = new DOMParser();
+            let doc = parser.parseFromString(xhr.responseText, "text/html");
+            let mainContentPane = doc.getElementsByClassName("contentpane")[1];
+            let table = mainContentPane.getElementsByClassName("borderlist")[1];
+            let rows = table.getElementsByTagName("tr");
+            let ownVillages = {};
+            for (let i = 1; i < rows.length; i ++) {
+                let cells = rows[i].getElementsByTagName("td");
+                let link = cells[0].getElementsByTagName("a")[0];
+                let villageId = link.getAttribute("href").replace(/^.*id=(\d{4}).*$/, "$1");
+                let villageXY = cells[1].textContent.split("|");
+                ownVillages[villageId] = {x: parseInt(villageXY[0]), y: parseInt(villageXY[1]), name: link.textContent};
+            }
+            sessionStorage.setItem("ownVillages", JSON.stringify(ownVillages));
+            storeTargetVillage(ownVillages);
+        }
+    });
+    xhr.open("GET", "/?s=info_player");
+    xhr.send();
+}
+
 function shortcutElementReplace(elt, img, text) {
     // If more than one hyperlink element found,
     // then keep the last one but with href of the first one.
@@ -234,254 +402,344 @@ function showPlayerUnitPointsAndId() {
     playerPropertiesTbody.insertBefore(createKeyValueRow("Id:", playerId), playerPropertiesRows[2]);
 }
 
-function showPlanerAutonomous() {
+function showAutoPlanerMenu(village, module) {
-    // Exit if no attack is planed
     let mainContentPane = document.getElementsByClassName("contentpane")[1];
-    let planTable = mainContentPane.getElementsByClassName("borderlist")[2];
+    let navTable = mainContentPane.getElementsByTagName("table")[0];
-    let planRows = planTable.getElementsByTagName("tr");
+    let navRow = navTable.getElementsByTagName("tr")[0];
+    let navCells = navRow.getElementsByTagName("td");
+    let separatorCell = createCustomElement("td");
+    let separatorImg = createCustomElement("img");
+    separatorCell.appendChild(separatorImg);
+    let autonomousCell = createCustomElement("td");
+    let autonomousLink = createCustomElement(
+        "a", {"href": "/?village=" + village + "&s=tools&m=auto_planer"}, "Planificateur autonome d'attaques"
+    );
+    let rightImg = navCells[6].getElementsByTagName("img")[0];
+    switch (module) {
+        case "runtime_calculator":
+            separatorImg.setAttribute("src", "/img/tabs/menue_sn_center.png");
+            autonomousCell.setAttribute("background", "/img/tabs/menue_n_back.png");
+            rightImg.setAttribute("src", "/img/tabs/menue_n_right.png");
+            break;
+        case "auto_planer":
+            separatorImg.setAttribute("src", "/img/tabs/menue_ns_center.png");
+            autonomousCell.setAttribute("background", "/img/tabs/menue_s_back.png");
+            rightImg.setAttribute("src", "/img/tabs/menue_s_right.png");
+            break;
+        default:
+            separatorImg.setAttribute("src", "/img/tabs/menue_nn_center.png");
+            autonomousCell.setAttribute("background", "/img/tabs/menue_n_back.png");
+            rightImg.setAttribute("src", "/img/tabs/menue_n_right.png");
+            break;
+    }
+    autonomousCell.appendChild(autonomousLink);
+    navRow.insertBefore(autonomousCell, navCells[6]);
+    navRow.insertBefore(separatorCell, navCells[6]);
+}
 
-    setInterval(function() {
+function showAutoPlanerPage(village) {
-        for (let i = 0; i < planRows.length; i ++) {
+    let mainContentPane = document.getElementsByClassName("contentpane")[1];
-            let planCells = planRows[i].getElementsByTagName("td");
+    for (let i = mainContentPane.childNodes.length - 1; i >= 5; i --) {
-            if (planCells.length < 9) {
+        mainContentPane.childNodes[i].remove();
+    }
+
+    let autoPlanerForm = createCustomElement("form", {"name": "kingsage"});
+    let borderList = createCustomElement("table", {"class": "borderlist", "width": "820"});
+    let titleRow = createCustomElement("tr");
+    let titleCell = createCustomElement("th", {"colspan": "7"}, "Nouvel ordre autonome");
+    titleRow.appendChild(titleCell);
+    borderList.appendChild(titleRow);
+
+    let startRow = createCustomElement("tr");
+    startRow.appendChild(createCustomElement("td", null, "Village originel:"));
+    startRow.appendChild(createCustomElement("td", null, "x:"));
+    let startXCell = createCustomElement("td");
+    let startXInput = createCustomInput(
+        "number",
+        "start_x",
+        null,
+        {"id": "start_x", "required": "required", "min": "1", "max": "999"},
+        {"width": "50px"},
+    );
+    startXCell.appendChild(startXInput);
+    startRow.appendChild(startXCell);
+    startRow.appendChild(createCustomElement("td", null, "y:"));
+    let startYCell = createCustomElement("td");
+    let startYInput = createCustomInput(
+        "number",
+        "start_y",
+        null,
+        {"id": "start_y", "required": "required", "min": "1", "max": "999"},
+        {"width": "50px"},
+    );
+    startYCell.appendChild(startYInput);
+    startRow.appendChild(startYCell);
+    let startClickCell = createCustomElement("td");
+    let startClickSpan = createCustomElement(
+        "span",
+        {
+            "class": "click",
+            "onclick": "popup_mod('popup.php?s=targets&m=own_villages&build=attack_planer', 690, 400);return false;",
+        },
+    )
+    let startClickImg = createCustomElement("img", {"src": "/img/arrow_right_raquo.png"});
+    let startClickText = document.createTextNode(" Propre");
+    startClickSpan.appendChild(startClickImg);
+    startClickSpan.appendChild(startClickText);
+    startClickCell.appendChild(startClickSpan);
+    startRow.appendChild(startClickCell);
+    let startSelectCell = createCustomElement("td");
+    let startSelect = createCustomElement("select", {"id": "ownlist"}, null, {"width": "300px"});
+    startSelect.addEventListener("change", function () { selectVillage("ownlist", "start_x", "start_y") });
+    startSelect.appendChild(createCustomElement("option", {"value": ""}, "Sélectionner village"));
+    startSelectCell.appendChild(startSelect);
+    startRow.appendChild(startSelectCell);
+    borderList.appendChild(startRow);
+    let startIntervalId = setInterval(function () {
+        let ownVillages = sessionStorage.getItem("ownVillages");
+        if (ownVillages === null) {
+            return;
+        }
+        ownVillages = JSON.parse(ownVillages);
+        for (let ownVillageId in ownVillages) {
+            let ownVillage = ownVillages[ownVillageId];
+            let startValue = ownVillage.x.toString() + "|" + ownVillage.y.toString()
+            let startOption = createCustomElement(
+                "option", {"value": startValue}, ownVillage.name + " (" + startValue + ")",
+            );
+            startSelect.appendChild(startOption);
+            if (ownVillageId === village) {
+                startXInput.value = ownVillage.x;
+                startYInput.value = ownVillage.y;
+                startSelect.value = startValue;
+            }
+        }
+        clearInterval(startIntervalId);
+    }, 500);
+
+    let targetRow = createCustomElement("tr");
+    targetRow.appendChild(createCustomElement("td", null, "Village cible:"));
+    targetRow.appendChild(createCustomElement("td", null, "x:"));
+    let targetXCell = createCustomElement("td");
+    let targetXInput = createCustomInput(
+        "number",
+        "target_x",
+        null,
+        {"id": "target_x", "required": "required", "min": "1", "max": "999"},
+        {"width": "50px"},
+    );
+    targetXCell.appendChild(targetXInput);
+    targetRow.appendChild(targetXCell);
+    targetRow.appendChild(createCustomElement("td", null, "y:"));
+    let targetYCell = createCustomElement("td");
+    let targetYInput = createCustomInput(
+        "number",
+        "target_y",
+        null,
+        {"id": "target_y", "required": "required", "min": "1", "max": "999"},
+        {"width": "50px"},
+    );
+    targetYCell.appendChild(targetYInput);
+    targetRow.appendChild(targetYCell);
+    let targetClickCell = createCustomElement("td", {"colspan": "2"});
+    let targetClickSpan = createCustomElement(
+        "span",
+        {
+            "class": "click",
+            "onclick": "popup_mod('popup.php?s=targets&m=favorites&build=attack_planer', 690, 400);return false;",
+        },
+    )
+    let targetClickImg = createCustomElement("img", {"src": "/img/arrow_right_raquo.png"});
+    let targetClickText = document.createTextNode(" Favoris");
+    targetClickSpan.appendChild(targetClickImg);
+    targetClickSpan.appendChild(targetClickText);
+    targetClickCell.appendChild(targetClickSpan);
+    targetRow.appendChild(targetClickCell);
+    borderList.appendChild(targetRow);
+
+    let dateRow = createCustomElement("tr");
+    dateRow.appendChild(createCustomElement("td", null, "Arrivée:"));
+    let dateCell = createCustomElement("td", {"colspan": "6"});
+    let now = new Date();
+    dateCell.appendChild(createCustomInput(
+        "number",
+        "day",
+        now.getDate().toString(),
+        {"required": "required", "min": "1", "max": "31"},
+        {"width": "40px"},
+    ));
+    dateCell.appendChild(document.createTextNode(". "))
+    dateCell.appendChild(createCustomInput(
+        "number",
+        "month",
+        now.getMonth().toString(),
+        {"required": "required", "min": "1", "max": "12"},
+        {"width": "40px"},
+    ));
+    dateCell.appendChild(document.createTextNode(". "))
+    dateCell.appendChild(createCustomInput(
+        "number",
+        "year",
+        now.getFullYear().toString(),
+        {"required": "required", "min": "2025"},
+        {"width": "50px"},
+    ));
+    dateCell.appendChild(document.createTextNode(" - "))
+    dateCell.appendChild(createCustomInput(
+        "number",
+        "hour",
+        now.getHours().toString(),
+        {"required": "required", "min": "0", "max": "23"},
+        {"width": "40px"},
+    ));
+    dateCell.appendChild(document.createTextNode(": "))
+    dateCell.appendChild(createCustomInput(
+        "number",
+        "minute",
+        now.getMinutes().toString(),
+        {"required": "required", "min": "0", "max": "59"},
+        {"width": "40px"},
+    ));
+    dateCell.appendChild(document.createTextNode(": "))
+    dateCell.appendChild(createCustomInput(
+        "number",
+        "second",
+        now.getSeconds().toString(),
+        {"required": "required", "min": "0", "max": "59"},
+        {"width": "40px"},
+    ));
+    dateCell.appendChild(document.createTextNode(". "))
+    dateCell.appendChild(createCustomInput(
+        "number",
+        "tenth",
+        Math.floor(now.getMilliseconds()/100).toString(),
+        {"required": "required", "min": "0", "max": "9"},
+        {"width": "40px"},
+    ));
+    dateRow.appendChild(dateCell);
+    borderList.appendChild(dateRow);
+
+    let unitBorderList = createCustomElement("table", {"class": "borderlist"});
+    let unitTitleRow = createCustomElement("tr");
+    for (let unit in UNITS) {
+        let unitTitleCell = createCustomElement("th", null, null, {"text-align": "center"});
+        let unitTitleImg = createCustomElement(
+            "img", {"src": "/img/units/unit_"+unit+".png", "alt": UNITS[unit], "title": UNITS[unit]}
+        );
+        unitTitleCell.appendChild(unitTitleImg);
+        unitTitleRow.appendChild(unitTitleCell);
+    }
+
+    unitBorderList.appendChild(unitTitleRow);
+    let unitInputRow = createCustomElement("tr");
+    for (let unit in UNITS) {
+        let unitInputCell = createCustomElement("td");
+        let unitInput = createCustomInput("number", unit, null, {"min": "0"}, {"width": "61px"});
+        switch (unit) {
+            case "spy": case "light": case "heavy": case "ram": case "snob":
+                unitInput.style.width = "62px";
+                break;
+            case "kata":
+                unitInput.addEventListener("change", function () {
+                    if (autoPlanerForm.kata.value !== "0" && autoPlanerForm.genre.value === "attack") {
+                        autoPlanerForm.building.removeAttribute("disabled");
+                    } else {
+                        autoPlanerForm.building.setAttribute("disabled", "disabled");
+                    }
+                });
                 break;
-            }
-            let startCell = planCells[4];
-            let endCell = planCells[5];
-            let countdownCell = planCells[6];
-            let countdownSpan = countdownCell.firstChild;
-            if (countdownSpan.textContent === "0:00:00") {
-                countdownSpan.textContent = "en retard";
-                startCell.style.color = "red";
-                endCell.style.color = "red";
-            }
         }
-    }, 1000);
+        unitInputCell.appendChild(unitInput);
-
+        unitInputRow.appendChild(unitInputCell);
-    if (planRows.length < 2) {
-        return;
     }
+    unitBorderList.appendChild(unitInputRow);
 
-    // Get an existing target from plan table
+    let additionalBorderList = createCustomElement("table", {"class": "borderlist", "width": "820"});
-    let targetCell = planRows[1].getElementsByTagName("td")[2];
+    let additionalTitleRow = createCustomElement("tr");
-    let targetXY = targetCell.getElementsByTagName("a")[1].textContent.split("|");
+    additionalTitleRow.appendChild(createCustomElement("th", {"colspan": "7"}, "Données additionnelles"));
+    additionalBorderList.appendChild(additionalTitleRow);
 
-    // Get token by submitting a fake support
+    let labelRow = createCustomElement("tr");
-    let urlParams = new URLSearchParams(window.location.search);
+    labelRow.appendChild(createCustomElement("td", null, "Étiquette:"));
-    let villageId = urlParams.get("village");
+    let labelCell = createCustomElement("td", {"colspan": "6"});
-    let xhr = new XMLHttpRequest();
+    let labelInput = createCustomInput(
-    let troopToken = null;
+        "text", "label", null, {"maxlength": "10"}, {"width": "100px"}
-    xhr.addEventListener("readystatechange", function () {
+    );
-        if (xhr.readyState === xhr.DONE) {
+    labelCell.appendChild(labelInput);
-            let parser = new DOMParser();
+    labelRow.appendChild(labelCell);
-            let doc = parser.parseFromString(xhr.responseText, "text/html");
+    additionalBorderList.appendChild(labelRow);
-            let quantityDivs = doc.getElementsByClassName("quantity");
-            let unit = null;
-            for (let i = 0; i < quantityDivs.length; i ++) {
-                let quantityInput = quantityDivs[i].getElementsByTagName("input")[0];
-                let quantityClick = quantityDivs[i].getElementsByClassName("click")[0];
-                if (quantityClick.textContent !== "(0)") {
-                    unit = quantityInput.getAttribute("name");
-                    break;
-                }
-            }
-            if (unit === null) {
-                alert("Il faut avoir au moins une unité dans le village actuel pour déterminer le jeton de sécurité!");
-            }
 
-            let xhrSend = new XMLHttpRequest();
+    let occurrencesRow = createCustomElement("tr");
-            let formData = new FormData();
+    occurrencesRow.appendChild(createCustomElement("td", null, "Occurrences:"));
-            formData.set(unit, "1");
+    let occurrencesCell = createCustomElement("td", {"colspan": "6"});
-            formData.set("send_x", targetXY[0]);
+    let occurrencesInput = createCustomInput(
-            formData.set("send_y", targetXY[1]);
+        "number", "occurrences", "1", {"required": "required", "min": "1"}, {"width": "50px"}
-            formData.set("support", "Envoyer du renfort");
+    );
-            xhrSend.addEventListener("readystatechange", function () {
+    occurrencesCell.appendChild(occurrencesInput);
-                if (xhrSend.readyState === xhrSend.DONE) {
+    occurrencesRow.appendChild(occurrencesCell);
-                    let parser = new DOMParser();
+    additionalBorderList.appendChild(occurrencesRow);
-                    let doc = parser.parseFromString(xhrSend.responseText, "text/html");
+
-                    let form = doc.getElementsByTagName("form")[0];
+    let genreRow = createCustomElement("tr");
-                    let action = form.getAttribute("action");
+    genreRow.appendChild(createCustomElement("td", null, "Type:"));
-                    troopToken = action.replace(/^.*(p=([a-z0-9]+)).*$/, "$2");
+    let genreCell = createCustomElement("td", {"colspan": "6"});
-                }
+    let genreSelect = createCustomElement(
-            });
+        "select", {"name": "genre", "value": "attack"}, {"required": "required"}, {"width": "200px"}
-            xhrSend.open("POST", "/?village=" + villageId + "&s=build_barracks&m=command&sub=send");
+    );
-            xhrSend.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
+    genreSelect.appendChild(createCustomElement("option", {"value": "attack"}, "Attaque"));
-            let formParams = new URLSearchParams(formData);
+    genreSelect.appendChild(createCustomElement("option", {"value": "support"}, "Renfort"));
-            xhrSend.send(formParams.toString());
+    genreSelect.appendChild(createCustomElement("option", {"value": "spy"}, "Espionnage"));
+    genreSelect.addEventListener("change", function () {
+        if (autoPlanerForm.kata.value !== "0" && autoPlanerForm.genre.value === "attack") {
+            autoPlanerForm.building.removeAttribute("disabled");
+        } else {
+            autoPlanerForm.building.setAttribute("disabled", "disabled");
         }
+    });
+    genreCell.appendChild(genreSelect);
+    genreRow.appendChild(genreCell);
+    additionalBorderList.appendChild(genreRow);
+
+    let buildingRow = createCustomElement("tr");
+    buildingRow.appendChild(createCustomElement("td", null, "Bâtiment visé:"));
+    let buildingCell = createCustomElement("td", {"colspan": "6"});
+    let buildingSelect = createCustomElement(
+        "select", {"name": "building", "disabled": "disabled"}, null, {"width": "200px"}
+    );
+    buildingSelect.appendChild(createCustomElement("option", null, "Sélectionner bâtiment"));
+    for (let building in BUILDINGS) {
+        buildingSelect.appendChild(createCustomElement("option", {"value": building}, BUILDINGS[building]));
+    }
+    buildingCell.appendChild(buildingSelect);
+    buildingRow.appendChild(buildingCell);
+    additionalBorderList.appendChild(buildingRow);
+
+    autoPlanerForm.addEventListener("submit", function (event) {
+        event.preventDefault();
+        let formData = new FormData(this);
+        let autoPlanedAttacks = localStorage.getItem("autoPlanedAttacks");
+        if (autoPlanedAttacks === null) {
+            autoPlanedAttacks = [];
+        } else {
+            autoPlanedAttacks = JSON.parse(autoPlanedAttacks);
+        }
+        autoPlanedAttacks.push(Object.fromEntries(formData));
+        localStorage.setItem("autoPlanedAttacks", JSON.stringify(autoPlanedAttacks));
     })
-    xhr.open("GET", "/?village=" + villageId + "&s=build_barracks");
-    xhr.send();
 
-    // Display autonomous cell for each planed attack
+    autoPlanerForm.appendChild(borderList);
-    let planHeaderCells = planRows[0].getElementsByTagName("th");
+    autoPlanerForm.appendChild(createCustomElement("br"));
-    planHeaderCells[6].textContent = "Manuel";
+    autoPlanerForm.appendChild(unitBorderList);
-    planRows[0].insertBefore(createCustomElement("th", null, "Autonome"), planHeaderCells[6]);
+    autoPlanerForm.appendChild(createCustomElement("br"));
-    planRows[0].insertBefore(createCustomElement("th", null, null, {"width": "18px"}), planHeaderCells[0]);
+    autoPlanerForm.appendChild(additionalBorderList);
-    for (let i = 1; i < planRows.length; i ++) {
+    autoPlanerForm.appendChild(createCustomElement("br"));
-        let planCells = planRows[i].getElementsByTagName("td");
+    autoPlanerForm.appendChild(createCustomInput(
-
+        "submit",
-        let autonomousMarkerCell = createCustomElement("td");
+        null,
-        planRows[i].insertBefore(autonomousMarkerCell, planCells[0]);
+        "> Ajouter une nouvelle entrée",
-
+        null,
-        let startCell = planCells[4];
+        {"font-weight": "bold", "padding": "5px 20px", "cursor": "pointer"}
-        let timeCounterCell = planCells[6];
+    ));
-        let timeCounterSpan = timeCounterCell.getElementsByTagName("span")[0];
+    mainContentPane.appendChild(autoPlanerForm);
-        timeCounterSpan.setAttribute("reload", "false");
-
-        let autonomousCell = createCustomElement("td");
-        let autonomousForm = createCustomElement("form", null, null, {"white-space": "nowrap"});
-
-        let attackLink = planCells[7].getElementsByTagName("a")[0]
-        let attackParams = new URLSearchParams(attackLink.getAttribute("href").replace(/^\/\?(.*)$/, "$1"));
-        for (let [key, value] of attackParams) {
-            switch (key) {
-                case "s": case "m":
-                    break;
-                default:
-                    let autonomousHidden = createCustomInput("hidden", key, value);
-                    autonomousForm.appendChild(autonomousHidden);
-                    break;
-            }
-        }
-        
-        let autonomousOccurrencesBox = createCustomElement(
-            "div",
-            {"title": "Préciser le nombre d'occurrences souhaité"},
-            null,
-            {"display": "inline-block", "border": "1px solid grey", "vertical-align": "text-bottom", "margin": "0 3px"},
-        );
-        let autonomousOccurrencesPrefix = createCustomElement("span", null, "x", {"margin": "0 3px", "color": "grey"});
-        let autonomousOccurrencesInput = createCustomInput(
-            "number",
-            "occurrences",
-            "1",
-            {"class": "autonoumous occurrences"},
-            {"display": "inline-block", "width": "35px", "border": "none"},
-        );
-        autonomousOccurrencesBox.appendChild(autonomousOccurrencesPrefix);
-        autonomousOccurrencesBox.appendChild(autonomousOccurrencesInput);
-        autonomousForm.appendChild(autonomousOccurrencesBox);
-        
-        let autonomousAttack = createCustomInput(
-            "image",
-            null,
-            null,
-            {"src": "/img/command/attack.png", "title": "Pogrammer une attaque autonome", "class": "autonomous attack"},
-            {"display": "inline-block", "margin": "0 3px", "border": "none"},
-        );
-        autonomousForm.appendChild(autonomousAttack);
-        let autonomousSupport = createCustomInput(
-            "image",
-            null,
-            null,
-            {
-                "src": "/img/command/support.png",
-                "title": "Programmer un renfort autonome",
-                "class": "autonomous support",
-            },
-            {"display": "inline-block", "margin": "0 3px", "border": "none"},
-        );
-        autonomousForm.appendChild(autonomousSupport);
-        let autonomousCancel = createCustomInput(
-            "image",
-            null,
-            null,
-            {
-                "src": "/img/ico_delete.png",
-                "title": "Annuler la programmation autonome",
-                "class": "autonomous cancel",
-                "disabled": "disabled",
-            },
-            {"display": "inline-block", "margin": "0 3px", "border": "none"},
-        );
-        autonomousForm.appendChild(autonomousCancel);
-
-        let timeoutID = null;
-        autonomousForm.addEventListener("submit", function (event) {
-            event.preventDefault();
-
-            // Handle cancel button
-            if (event.submitter.classList.contains("cancel")) {
-                if (timeoutID !== null) {
-                    clearTimeout(timeoutID);
-                    timeoutID = null;
-                    autonomousMarkerCell.firstChild.remove();
-                    autonomousOccurrencesInput.removeAttribute("disabled");
-                    autonomousAttack.removeAttribute("disabled");
-                    autonomousSupport.removeAttribute("disabled");
-                    autonomousCancel.setAttribute("disabled", "disabled");
-                }
-                return;
-            }
-
-            // Exit now if too late
-            if (timeCounterSpan.textContent === "en retard" || timeCounterSpan.textContent === "0:00:00") {
-                alert("Impossible de programmer le lancement autonome car l'heure de départ est déjà dépassée!");
-                return;
-            }
-
-            // Exit now if already programed
-            if (timeoutID !== null) {
-                return;
-            }
-
-            // Parse form data
-            let formData = new FormData(this);
-            let occurrences = parseInt(formData.get("occurrences").toString())
-            formData.delete("occurrences");
-            if (event.submitter.classList.contains("attack")) {
-                formData.set("attack", "Attaquer");
-            }
-
-            // Program autonomous attack or support
-            let ms = countdownMS(startCell.textContent);
-            console.log("setTimeout", ms);
-            timeoutID = setTimeout(function() {
-                for (let i = 0; i < occurrences; i ++) {
-                    let xhrTimeout = new XMLHttpRequest();
-                    xhrTimeout.open("POST", "/?s=build_barracks&m=command&a=sendTroop&p=" + troopToken);
-                    xhrTimeout.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
-                    let formParams = new URLSearchParams(formData);
-                    xhrTimeout.send(formParams.toString());
-                }
-                autonomousMarkerCell.firstChild.classList.remove("blink");
-                autonomousOccurrencesInput.setAttribute("disabled", "disabled");
-                autonomousAttack.setAttribute("disabled", "disabled");
-                autonomousSupport.setAttribute("disabled", "disabled");
-                autonomousCancel.setAttribute("disabled", "disabled");
-            }, ms);
-
-            // Add blinking marker
-            if (event.submitter.classList.contains("attack")) {
-                let attackImg = createCustomElement(
-                    "img",
-                    {
-                        "src": "/img/command/attack.png",
-                        "title": "Attaque autonome programmée",
-                        "class": "autonomous blink",
-                    }
-                )
-                autonomousMarkerCell.appendChild(attackImg);
-            } else {
-                let supportImg = createCustomElement(
-                    "img",
-                    {
-                        "src": "/img/command/support.png",
-                        "title": "Renfort autonome programmé",
-                        "class": "autonomous blink",
-                    }
-                )
-                autonomousMarkerCell.appendChild(supportImg);
-            }
-            autonomousOccurrencesInput.setAttribute("disabled", "disabled");
-            autonomousAttack.setAttribute("disabled", "disabled");
-            autonomousSupport.setAttribute("disabled", "disabled");
-            autonomousCancel.removeAttribute("disabled");
-        })
-        autonomousCell.appendChild(autonomousForm);
-        planRows[i].insertBefore(autonomousCell, planCells[7]);
-    }
 }
 
 function showVillageUnitPoints() {
@@ -673,20 +931,12 @@ function showOccurrencesInput() {
 }
 
 function fixSelectVillageBug() {
-    let select = document.getElementsByName("village_name")[0];
+    let selects = document.getElementsByName("village_name");
-    select.removeAttribute("onchange");
+    if (selects.length === 0) {
-    select.addEventListener("change", function () {
+        return;
-        let sendX = document.getElementById("send_x");
+    }
-        let sendY = document.getElementById("send_y");
+    selects[0].removeAttribute("onchange");
-        if (this.selectedIndex === 0) {
+    selects[0].addEventListener("change", function () { selectVillage("TODO", "send_x", "send_y") });
-            sendX.value = "";
-            sendY.value = "";
-        } else {
-            let xy = this.value.split("|");
-            sendX.value = xy[0];
-            sendY.value = xy[1];
-        }
-    });
 }
 
 function showThousandInputs() {
@@ -806,7 +1056,6 @@ function showSecondsAndCalculator() {
 }
 
 function main() {
-
     /* Exit immediately if not on game page */
     let layCastleTopElements = document.getElementsByClassName("lay_castle_top");
     if (layCastleTopElements.length === 0) {
@@ -846,10 +1095,14 @@ function main() {
     /* Customize navbar */
     customizeNavbar(layCastleTopElements[0]);  // test: OK
 
+    /* Store session storage values */
+    storeOwnVillages();
+
     /* Parse url params and switch case */
     let urlParams = new URLSearchParams(window.location.search);
     let section = urlParams.get("s");
     let module = urlParams.get("m");
+    let village = urlParams.get("village");
 
     /* Choose action according to section, module and sub */
     switch (section) {
@@ -873,9 +1126,10 @@ function main() {
             break;
 
         case "tools":
+            showAutoPlanerMenu(village, module);
             switch (module) {
-                case "attack_planer":
+                case "auto_planer":
-                    showPlanerAutonomous();
+                    showAutoPlanerPage(village);
                     break;
             }
             break;