Map/Coord Map Village Highlight

[nik12111]

Author : Nik12111
Contributors : N/A
Quickbar Entry : 

Code:

javascript:(function () {
   if (window.location.href.indexOf('screen=map') < 0) {
       UI.ErrorMessage('Please run this script on the map page.', 3000);
       return;
   }

   if (game_data?.isActive) {
       UI.ErrorMessage('Script is already active.', 3000);
       return;
   }

   const currentUrl = window.location.href;
   const serverMatch = currentUrl.match(/w\d+/);
   let highlightGroups = JSON.parse(localStorage.getItem(serverMatch + '-HighlightGroups')) ?? [];
   let highlightVillages = JSON.parse(localStorage.getItem(serverMatch + '-HighlightVillages')) ?? [];
   let colorGroupOptions = JSON.parse(localStorage.getItem(serverMatch + '-HighlightOptions')) ?? {};

   function fetchVariables() {
       highlightGroups = JSON.parse(localStorage.getItem(serverMatch + '-HighlightGroups')) ?? [];
       highlightVillages = JSON.parse(localStorage.getItem(serverMatch + '-HighlightVillages')) ?? [];
       colorGroupOptions = JSON.parse(localStorage.getItem(serverMatch + '-HighlightOptions')) ?? {};
   }

   function clearData() {
       localStorage.removeItem(serverMatch + '-HighlightGroups');
       localStorage.removeItem(serverMatch + '-HighlightVillages');
       localStorage.removeItem(serverMatch + '-HighlightOptions');

       SECmap.map.reload(!0);
       updateColorGroupRows();

       UI.SuccessMessage('Data has been reset', 3000);
   }

   function addNewGroupOptions() {
       createAddGroupOptions();
       if (document.getElementById('addGroupOptions').length) {
           document.getElementById('addGroup').style.display = "block";
           UI.Draggable(document.getElementById('addGroup'));
       } else {
           UI.ErrorMessage('No Groups to add.');
       }
   }

   function addColorGroup() {
       let selectedGroup = document.getElementById('addGroupOptions').value;
       const highlightGroup = highlightGroups.find(highlightGroup => highlightGroup.groupId === selectedGroup);

       if (!colorGroupOptions.options) {
           colorGroupOptions.options = {};
       }

       if (!colorGroupOptions.options[selectedGroup]) {
           colorGroupOptions.options[selectedGroup] = {};
       }

       colorGroupOptions.options[selectedGroup] = {
           groupId: highlightGroup.groupId,
           groupName: highlightGroup.groupName,
           r: 0,
           g: 0,
           b: 0,
           t: false,
           icon: '',
           checked: true
       };

       localStorage.setItem(serverMatch + '-HighlightOptions', JSON.stringify(colorGroupOptions));
       updateColorGroupRows();
       document.getElementById("addGroup").style.display = "none";
       UI.SuccessMessage('Group has been added.', 5000);
   }

   function deleteColorGroup(groupId) {
       delete colorGroupOptions.options[groupId];

       localStorage.setItem(serverMatch + '-HighlightOptions', JSON.stringify(colorGroupOptions));
       updateColorGroupRows();
       createAddGroupOptions();
       UI.SuccessMessage('Group has been removed', 3000);
   }

   function updateColorGroupRows() {
       fetchVariables();
       let ownColorGroups = document.getElementById('ownColorGroups');

       if (colorGroupOptions.options) {
           if (colorGroupOptions) {
               if (Object.keys(colorGroupOptions.options).length > 0) {
                   ownColorGroups.innerHTML = '';
                   for (const [key, colorGroupRow] of Object.entries(colorGroupOptions.options)) {
                       ownColorGroups.appendChild(createColorGroupRow(colorGroupRow));
                   }
               } else {
                   ownColorGroups.innerText = "No groups setup";
               }
           } else {
               ownColorGroups.innerText = "No groups setup";
           }
       } else {
           ownColorGroups.innerText = "No groups setup";
       }

       SECmap.villageIcons = [];
       highlightGroups.forEach(function (highlightGroup) {
           let villageIdList;
           if (highlightVillages[highlightGroup.groupId]) {
               if (colorGroupOptions.options) {
                   if (colorGroupOptions.options[highlightGroup.groupId]) {
                       if (colorGroupOptions.options[highlightGroup.groupId].checked) {
                           villageIdList = highlightVillages[highlightGroup.groupId].split(' ');
                           villageIdList.forEach(function (villageId) {
                               if (!SECmap.villageIcons[villageId]) {
                                   SECmap.villageIcons[villageId] = {};
                               }
                               if (colorGroupOptions.options[highlightGroup.groupId]) {
                                   let colorGroupOption = colorGroupOptions.options[highlightGroup.groupId];
                                   SECmap.villageIcons[villageId]['group_' + highlightGroup.groupId] = {
                                       img: colorGroupOption.icon,
                                       c: colorGroupOption.t ? 'none' : `rgb(${colorGroupOption.r}, ${colorGroupOption.g}, ${colorGroupOption.b})`,
                                       name: colorGroupOption.name
                                   };
                               }
                           });
                       }
                   }
               }
           }
       });

       SECmap.map.reload(!0);
   }

   function activateColorGroup(groupId) {
       let colorGroupRow = document.querySelector(`[data-id="${groupId}"]`);
       if (colorGroupRow) {
           let checkbox = colorGroupRow.querySelector('input[type=checkbox]');
           if (checkbox) {
               if (colorGroupOptions.options[groupId]) {
                   let colorObject = colorGroupOptions.options[groupId];
                   colorObject.checked = checkbox.checked;
                   colorGroupOptions.options[groupId] = colorObject;
                   localStorage.setItem(serverMatch + '-HighlightOptions', JSON.stringify(colorGroupOptions));
                   updateColorGroupRows();
                   UI.SuccessMessage(checkbox.checked ? 'Group Tag activated.' : 'Group Tag disabled.')
               } else {
                   UI.ErrorMessage('Something went wrong');
               }
           }
       }
   }

   function createColorGroupRow(colorGroupRow) {
       let tr = document.createElement("tr");
       tr.dataset.id = colorGroupRow.groupId;
       tr.style.minHeight = '20px';

       let tdCheck = document.createElement("td");
       let inputCheck = document.createElement("input");
       inputCheck.type = "checkbox";
       inputCheck.checked = colorGroupRow.checked;
       inputCheck.onclick = function () {
           activateColorGroup(colorGroupRow.groupId);
       };
       tdCheck.appendChild(inputCheck);

       let tdText = document.createElement("td");
       tdText.style.paddingRight = "10px";
       tdText.style.lineHeight = "20px";
       tdText.className = "small";
       tdText.textContent = colorGroupRow.groupName;

       let td2 = document.createElement("td");
       td2.className = "small";
       let colorLink = document.createElement("a");
       colorLink.href = "#";
       colorLink.style.display = "block";
       colorLink.style.width = "18px";
       colorLink.style.height = "18px";
       colorLink.onclick = function () {
           updateGroupEditPopup(colorGroupRow);
       };

       let marker = document.createElement("span");
       marker.className = "marker";
       marker.style.display = "block";
       marker.style.position = "relative";
       marker.style.borderStyle = "solid";
       marker.style.borderWidth = "thin";
       marker.style.left = "3px";
       marker.style.top = "3px";
       marker.style.width = "12px";
       marker.style.height = "12px";
       marker.style.backgroundColor = colorGroupRow.t ? 'none' : `rgb(${colorGroupRow.r}, ${colorGroupRow.g}, ${colorGroupRow.b})`;
       marker.style.backgroundImage = `url('${colorGroupRow.icon}')`;
       marker.style.backgroundSize = `12px`;
       colorLink.appendChild(marker);
       td2.appendChild(colorLink);

       let td3 = document.createElement("td");
       let deleteLink = document.createElement("a");
       deleteLink.href = "#";
       deleteLink.style.display = "block";
       deleteLink.style.width = "20px";
       deleteLink.style.height = "20px";

       deleteLink.onclick = function () {
           deleteColorGroup(colorGroupRow.groupId);
       };

       let deleteImage = document.createElement("img");
       deleteImage.src = "https://cdn.infernal-wars.com/graphic/delete.png";
       deleteImage.dataset.title = "Delete";
       deleteLink.appendChild(deleteImage);

       td3.appendChild(deleteLink);

       tr.appendChild(tdCheck);
       tr.appendChild(tdText);
       tr.appendChild(td2);
       tr.appendChild(td3);

       return tr;
   }

   function createHighlightManagement() {
       let villageColors = document.createElement("div");
       villageColors.style.cssText = "float: left; clear: both;";
       villageColors.id = "villageColors";

       let mainTable = document.createElement("table");
       mainTable.style.cssText = "background-color: #f4e4bc; border: solid 1px #8c5f0d;";

       let tbodyMain = document.createElement("tbody");
       let trMain = document.createElement("tr");
       let tdMain = document.createElement("td");
       tdMain.style.verticalAlign = "top";

       let h5 = document.createElement("h5");
       h5.innerText = "My Groups";

       let groupsTable = document.createElement("table");
       groupsTable.className = "vis";

       let tbodyGroups = document.createElement("tbody");
       tbodyGroups.id = "ownColorGroups";
       tbodyGroups.innerText = "No groups setup";

       groupsTable.appendChild(tbodyGroups);

       let br = document.createElement("br");

       let highlightLink = document.createElement("a");
       highlightLink.href = "#";
       highlightLink.innerText = "» Highlight a new group";
       highlightLink.onclick = function () {
           addNewGroupOptions();
       };

       let addGroupDiv = document.createElement("div");
       addGroupDiv.id = "addGroup";
       addGroupDiv.style.left = "700px";
       addGroupDiv.style.top = "200px";
       addGroupDiv.style.borderWidth = '2px';
       addGroupDiv.style.borderStyle = 'solid';
       addGroupDiv.style.borderColor = '#804000';
       addGroupDiv.style.backgroundColor = '#DED3B9';
       addGroupDiv.style.position = 'absolute';
       addGroupDiv.style.padding = '0';
       addGroupDiv.style.width = '200px';
       addGroupDiv.style.zIndex = '9999';
       addGroupDiv.style.display = 'none';

       let popupMenu = document.createElement("div");
       popupMenu.id = "edit_color_popup_menu";
       popupMenu.className = "popup_menu";
       let closeLink = document.createElement("a");
       closeLink.href = "#";
       closeLink.onclick = function () {
           document.getElementById("addGroup").style.display = "none";
           return false;
       };
       closeLink.textContent = "Close";
       popupMenu.appendChild(closeLink);
       addGroupDiv.appendChild(popupMenu);

       let contentDiv = document.createElement("div");
       contentDiv.style.padding = "10px";

       let title = document.createElement("strong");
       title.textContent = "Select Group";
       contentDiv.appendChild(title);
       contentDiv.appendChild(document.createElement("br"));
       contentDiv.appendChild(document.createElement("br"));

       let select = document.createElement("select");
       select.id = "addGroupOptions";

       contentDiv.appendChild(select);

       let addButton = document.createElement("button");
       addButton.className = "btn";
       addButton.type = "button";
       addButton.innerText = "Add";
       addButton.onclick = function () {
           addColorGroup();
       };
       contentDiv.appendChild(addButton);

       addGroupDiv.appendChild(contentDiv);

       tdMain.append(h5, groupsTable, br, addGroupDiv, highlightLink);

       let brActions = document.createElement('br');
       let tdActions = document.createElement('td');
       tdActions.style.verticalAlign = "top";

       let h5Actions = document.createElement("h5");
       h5Actions.innerText = "Actions";

       tdActions.append(h5Actions);

       const actionButtons = [
           {text: 'Update Groups', handler: fetchAllUserGroups},
           {text: 'Update Villages', handler: fetchAllUserVillageGroupCoordinates},
           {text: 'Reset', handler: clearData},
       ];

       actionButtons.forEach(({text, handler}) => {
           let brAction = document.createElement('br');
           tdActions.append(createActionButton(text, handler), brAction);
       });

       trMain.append(tdMain, brActions, tdActions);
       tbodyMain.appendChild(trMain);
       mainTable.appendChild(tbodyMain);
       villageColors.appendChild(mainTable);

       let mapBig = document.getElementById('map_big');
       mapBig.append(villageColors);
   }

   function createActionButton(text, onClick) {
       let btn = document.createElement('button');
       btn.className = 'btn';
       btn.style.marginBottom = '10px';
       btn.innerText = text;
       btn.onclick = onClick;
       return btn;
   }

   function createAddGroupOptions() {
       let select = document.getElementById('addGroupOptions');
       select.innerHTML = '';
       if (highlightGroups.length > 0) {
           highlightGroups.forEach(function (group) {
               if (colorGroupOptions) {
                   if (colorGroupOptions.options) {
                       if (colorGroupOptions.options[group.groupId]) {
                           return;
                       }
                   }
               }
               let option = document.createElement("option");
               option.value = group.groupId;
               option.textContent = group.groupName;
               select.appendChild(option);
           });
       }
   }

   function extractDataFromUrl() {
       console.log('Extracting data from URL...');
       const playerId = game_data.player.id;
       const worldMatch = window.location.hostname.match(/(w\d+)\.infernal-wars\.com/);
       const world = worldMatch ? worldMatch[1] : null;
       const villageIdMatch = window.location.search.match(/village=(\d+)/);
       const villageId = villageIdMatch ? villageIdMatch[1] : null;

       console.log(`Extracted - Player ID: ${playerId}, World: ${world}, Village ID: ${villageId}`);
       return {playerId, world, villageId};
   }

   function color_picker_choose(r, g, b, ignore_transparency) {
       $("#color_picker_r").val(r);
       $("#color_picker_g").val(g);
       $("#color_picker_b").val(b);
       color_picker_change(ignore_transparency);
   }

   function color_picker_change(ignore_transparency) {
       var r = $("#color_picker_r").val();
       var g = $("#color_picker_g").val();
       var b = $("#color_picker_b").val();
       $("#color").css('background-color', "rgb(" + r + ", " + g + ", " + b + ")");
       $("#color").css('background-image', 'none');
       if (ignore_transparency !== true) {
           $('#trans_color_input').attr('checked', false);
       }
   }

   function createGroupEditPopup() {
       const popupDiv = document.createElement('div');
       popupDiv.classList.add('popup');

       const editColorPopup = document.createElement('div');
       editColorPopup.id = 'edit_color_popup';
       editColorPopup.classList.add('popup_style', 'ui-draggable');
       editColorPopup.style.display = 'none';
       editColorPopup.style.width = 'auto';
       editColorPopup.style.position = 'fixed';
       editColorPopup.style.top = '317px';
       editColorPopup.style.left = '767px';

       const popupMenu = document.createElement('div');
       popupMenu.classList.add('popup_menu', 'ui-draggable-handle');
       popupMenu.innerHTML = 'Edit<a href="#" onclick="document.getElementById(\'edit_color_popup\').style.display = \'none\'; return false;">X</a>';

       const popupContent = document.createElement('div');
       popupContent.id = 'edit_color_popup_content';
       popupContent.classList.add('popup_content');
       popupContent.style.height = 'auto';
       popupContent.style.overflowY = 'auto';

       const colorPickerSection = document.createElement('div');
       colorPickerSection.id = 'color_picker_popup';
       const colorPickerSectionStrong = document.createElement('strong');
       colorPickerSectionStrong.innerText = 'Change Tag';


       const colorTransparentTable = document.createElement('table');
       colorTransparentTable.style.marginTop = '5px';

       const colorTransparentTbody = document.createElement('tbody');
       const colorTransparentTr = document.createElement('tr');
       const colorTransparentTdText = document.createElement('td');
       colorTransparentTdText.style.width = '10px';
       colorTransparentTdText.innerHTML = "Color";

       const colorTransparentTdColor = document.createElement('td');
       colorTransparentTdColor.id = 'color';
       colorTransparentTdColor.style.width = '20px';
       colorTransparentTdColor.style.backgroundColor = 'rgb(0, 0, 0)';

       const colorTransparentInputTd = document.createElement('td');
       const colorTransparentInputSpan = document.createElement('span');
       colorTransparentInputSpan.id = "trans_color";

       const colorTransparentInputLabel = document.createElement('label');
       const colorTransparentInputInput = document.createElement('input');
       colorTransparentInputInput.type = "checkbox";
       colorTransparentInputInput.name = "transparent";
       colorTransparentInputInput.value = "1";
       colorTransparentInputInput.id = "trans_color_input";
       colorTransparentInputInput.onchange = function () {
           this.checked ? document.getElementById('color').style.backgroundColor = 'transparent' : color_picker_change();
       };

       colorPickerSection.appendChild(colorPickerSectionStrong);
       colorPickerSection.appendChild(colorTransparentTable);
       colorTransparentTable.appendChild(colorTransparentTbody);
       colorTransparentTbody.appendChild(colorTransparentTr);
       colorTransparentTr.appendChild(colorTransparentTdText);
       colorTransparentTr.appendChild(colorTransparentTdColor);
       colorTransparentTr.appendChild(colorTransparentInputTd);
       colorTransparentInputTd.appendChild(colorTransparentInputSpan);
       colorTransparentInputSpan.appendChild(colorTransparentInputLabel);
       colorTransparentInputLabel.appendChild(colorTransparentInputInput);

       colorTransparentInputLabel.append(' Transparent');

       const colorPickerTable = document.createElement('table');
       const colorPickerTbody = document.createElement('tbody');

       colorPickerSection.appendChild(colorPickerTable);
       colorPickerTable.appendChild(colorPickerTbody);

       const colorPickerData = {
           'Red': [[0, 0, 0], [0, 0, 127], [0, 0, 254], [0, 127, 0], [0, 127, 127], [0, 127, 254], [0, 254, 0], [0, 254, 127], [0, 254, 254]],
           'Green': [[127, 0, 0], [127, 0, 127], [127, 0, 254], [127, 127, 0], [127, 127, 127], [127, 127, 254], [127, 254, 0], [127, 254, 127], [127, 254, 254]],
           'Blue': [[254, 0, 0], [254, 0, 127], [254, 0, 254], [254, 127, 0], [254, 127, 127], [254, 127, 254], [254, 254, 0], [254, 254, 127], [254, 254, 254]]
       };
       for (const [key, colorPicker] of Object.entries(colorPickerData)) {
           const colorPickerTr = document.createElement('tr');
           const colorPickerColorTd = document.createElement('td');
           colorPickerColorTd.innerHTML = key;
           const colorPickerInputTd = document.createElement('td');
           const colorPickerInput = document.createElement('input');
           colorPickerInput.id = `color_picker_${key.substring(0, 1).toLowerCase()}`;
           colorPickerInput.style.fontSize = `10px`;
           colorPickerInput.onchange = function () {
               color_picker_change();
           };
           colorPickerInput.onkeyup = function () {
               color_picker_change();
           };
           colorPickerInput.size = 4;
           colorPickerInput.type = 'text';
           colorPickerInput.value = '0';


           colorPickerTbody.appendChild(colorPickerTr);
           colorPickerTr.appendChild(colorPickerColorTd);
           colorPickerTr.appendChild(colorPickerInputTd);
           colorPickerInputTd.appendChild(colorPickerInput);

           colorPicker.forEach(function (color) {
               const colorPickerColorChoose = document.createElement('td');
               colorPickerColorChoose.style.backgroundColor = `rgb(${color.join(',')})`;
               colorPickerColorChoose.style.width = '15px';
               colorPickerColorChoose.onclick = function () {
                   color_picker_choose(...color);
               };
               colorPickerColorChoose.innerHTML = ' ';

               colorPickerTr.appendChild(colorPickerColorChoose);
           });

           colorPickerTbody.appendChild(colorPickerTr);
       }

       colorPickerSection.appendChild(colorPickerTable);

       const iconPicker = document.createElement('table');
       iconPicker.id = 'icon_picker';
       iconPicker.style.borderSpacing = '0px';

       const iconPickerTbody = document.createElement('tbody');
       const iconPickerTrMain = document.createElement('tr');
       const iconPickerTdMain = document.createElement('td');
       iconPickerTdMain.innerHTML = '';
       iconPickerTdMain.innerHTML = 'Symbol-URL: ';
       const iconPickerInput = document.createElement('input');
       iconPickerInput.id = 'icon_url';
       iconPickerInput.name = 'icon_url';

       iconPicker.appendChild(iconPickerTbody);
       iconPickerTbody.appendChild(iconPickerTrMain);
       iconPickerTrMain.appendChild(iconPickerTdMain);
       iconPickerTdMain.appendChild(iconPickerInput);

       const unitArray = ['spear', 'sword', 'archer', 'axe', 'spy', 'light', 'marcher', 'heavy', 'ram', 'catapult', 'knight', 'snob'];

       const iconPickerTrBody = document.createElement('tr');
       const iconPickerTdBody = document.createElement('td');
       unitArray.forEach(function (unit) {
           const iconPickerImage = document.createElement('img');
           iconPickerImage.src = `https://cdn.infernal-wars.com/graphic/unit/unit_${unit}.png`;
           iconPickerImage.style.cursor = `pointer`;
           iconPickerImage.onclick = function () {
               document.getElementById('icon_url').value = `https://cdn.infernal-wars.com/graphic/unit/unit_${unit}.png`;
           };
           iconPickerTdBody.appendChild(iconPickerImage);
       });

       iconPickerTbody.appendChild(iconPickerTrBody);
       iconPickerTrBody.appendChild(iconPickerTdBody);

       const groupIdInput = document.createElement('input');
       groupIdInput.type = 'hidden';
       groupIdInput.id = 'group_id';

       const submitButton = document.createElement('input');
       submitButton.onclick = function () {
           updateColorGroup();
       };
       submitButton.classList.add('btn');
       submitButton.type = 'submit';
       submitButton.value = 'Save';
       submitButton.style.marginTop = '5px';

       popupContent.appendChild(colorPickerSection);
       popupContent.appendChild(iconPicker);
       popupContent.appendChild(groupIdInput);
       popupContent.appendChild(submitButton);

       editColorPopup.appendChild(popupMenu);
       editColorPopup.appendChild(popupContent);
       popupDiv.appendChild(editColorPopup);

       UI.Draggable(editColorPopup);
       document.body.appendChild(popupDiv);
   }

   function updateColorGroup() {
       let colorObject = {};
       let groupId = $("#group_id").val();
       if (colorGroupOptions.options[groupId]) {
           colorObject = colorGroupOptions.options[groupId];
           colorObject.r = $("#color_picker_r").val();
           colorObject.g = $("#color_picker_g").val();
           colorObject.b = $("#color_picker_b").val();
           colorObject.icon = $("#icon_url").val();
           colorObject.t = document.getElementById("trans_color_input").checked;
       }

       colorGroupOptions.options[groupId] = colorObject;
       localStorage.setItem(serverMatch + '-HighlightOptions', JSON.stringify(colorGroupOptions));
       updateColorGroupRows();
       document.getElementById('edit_color_popup').style.display = 'none';
   }

   function updateGroupEditPopup(colorGroup) {
       $("#group_id").val(colorGroup.groupId);
       document.getElementById('color').style.backgroundColor = `rgb(${colorGroup.r},${colorGroup.g},${colorGroup.b})`;
       $("#color_picker_r").val(colorGroup.r);
       $("#color_picker_g").val(colorGroup.g);
       $("#color_picker_b").val(colorGroup.b);
       $("#icon_url").val(colorGroup.icon);

       if (colorGroup.t !== true)
           document.getElementById('trans_color_input').checked = false;
       else
           document.getElementById('color').style.backgroundColor = 'transparent';

       document.getElementById('edit_color_popup').style.display = 'block';
   }

   async function fetchWithRetry(url, retries = 3) {
       for (let attempt = 1; attempt <= retries; attempt++) {
           try {
               console.log(`Attempting to fetch ${url}, attempt ${attempt}`);
               const response = await fetch(url);
               if (!response.ok && attempt < retries) {
                   console.warn(`Retry attempt ${attempt} for URL: ${url}`);
                   continue;
               }
               return response;
           } catch (error) {
               console.error(`Error on attempt ${attempt} for URL: ${url}`, error);
               if (attempt === retries) throw error;
           }
       }
   }

   async function fetchAllUserVillageGroupCoordinates() {
       try {
           UI.InfoMessage('Loading Village Data');
           let allGroupCoordinates = [];
           console.log('Starting fetchAllUserVillageGroupCoordinates...');
           const {playerId, world, villageId} = extractDataFromUrl();
           console.log(`Extracted data - Player ID: ${playerId}, World: ${world}, Village ID: ${villageId}`);

           if (!playerId || !world || !villageId) {
               throw new Error('Required parameters (player ID, world, or village ID) not found in URL');
           }

           let index = 0;
           while (index < highlightGroups.length) {
               const groupUrl = `https://${world}.infernal-wars.com/game.php?village=${villageId}&screen=train&mode=mass&group=${highlightGroups[index].groupId}`;

               console.log(`Fetching URL: ${groupUrl}`);

               const response = await fetchWithRetry(groupUrl);
               console.log(`Response status for ${groupUrl}: ${response.status}`);

               if (!response.ok) {
                   throw new Error(`HTTP error! Status: ${response.status}`);
               }

               const html = await response.text();
               console.log(`Fetched HTML length: ${html.length}`);

               const parser = new DOMParser();
               const doc = parser.parseFromString(html, 'text/html');
               const pageLinks = doc.querySelectorAll('a[href*="page="]');

               let pages = 0;
               if (pageLinks.length === 0) {
                   pages = 1;
               } else {
                   pages = Math.max(
                       ...Array.from(pageLinks).map(link => {
                           const pageMatch = link.href.match(/page=(\d+)/);
                           return pageMatch ? parseInt(pageMatch[1]) : 1;
                       })
                   );
               }

               let currentPage = 1;
               while (currentPage < pages + 1) {
                   let villageList = [];
                   const groupPageUrl = `https://${world}.infernal-wars.com/game.php?village=${villageId}&screen=train&mode=mass&group=${highlightGroups[index].groupId}&page=${currentPage}`;

                   console.log(`Fetching URL: ${groupPageUrl}`);

                   const response = await fetchWithRetry(groupPageUrl);
                   console.log(`Response status for ${groupPageUrl}: ${response.status}`);

                   if (!response.ok) {
                       throw new Error(`HTTP error! Status: ${response.status}`);
                   }

                   const html = await response.text();
                   const docPage = parser.parseFromString(html, 'text/html');
                   let pageRows = docPage.querySelectorAll('.overview_table tr[class^="row"]');
                   pageRows.forEach(function (row) {
                       let aVillage = row.querySelector('td a');
                       const villageIdMatch = aVillage.href.match(/village=(\d+)/);
                       const villageId = villageIdMatch ? villageIdMatch[1] : null;
                       villageList.push(villageId);
                   });

                   if (villageList.length > 0)
                       allGroupCoordinates[highlightGroups[index].groupId] += ' ' + villageList.join(' ');

                   currentPage++;
               }
               index++;
           }
           highlightVillages = allGroupCoordinates;
           localStorage.setItem(serverMatch + '-HighlightVillages', JSON.stringify(allGroupCoordinates));

           updateColorGroupRows();

           UI.SuccessMessage('Villages have been updated', 5000);
       } catch (error) {
           console.log(error)
       }
   }

   async function fetchAllUserGroups() {
       UI.InfoMessage('Loading Group Data');
       try {
           console.log('Starting fetchAllUserGroups...');
           const {playerId, world, villageId} = extractDataFromUrl();
           console.log(`Extracted data - Player ID: ${playerId}, World: ${world}, Village ID: ${villageId}`);

           if (!playerId || !world || !villageId) {
               throw new Error('Required parameters (player ID, world, or village ID) not found in URL');
           }

           const initialUrl = `https://${world}.infernal-wars.com/game.php?village=${villageId}&screen=overview_villages&mode=groups`;
           console.log(`Groups URL: ${initialUrl}`);

           console.log(`Fetching URL: ${initialUrl}`);

           const response = await fetchWithRetry(initialUrl);
           console.log(`Response status for ${initialUrl}: ${response.status}`);

           if (!response.ok) {
               throw new Error(`HTTP error! Status: ${response.status}`);
           }

           const html = await response.text();
           console.log(`Fetched HTML length: ${html.length}`);

           const parser = new DOMParser();
           const doc = parser.parseFromString(html, 'text/html');
           const groupTable = doc.querySelector('table table table table table table table');

           let groupRows;
           highlightGroups = [];
           if (groupTable) {
               groupRows = groupTable.querySelectorAll('tr');
           }

           groupRows.forEach(function (group) {
               let a = group.querySelector('a');
               const urlParams = new URLSearchParams(a.href);
               let groupId = urlParams.get('group');
               let groupName = a.innerText;

               highlightGroups.push({
                   'groupId': groupId,
                   'groupName': groupName
               });

               localStorage.setItem(serverMatch + '-HighlightGroups', JSON.stringify(highlightGroups));

               updateColorGroupRows();
               UI.SuccessMessage('Groups have been updated', 5000);
           })
       } catch (error) {

       }
   }

   function init() {
       createHighlightManagement();
       updateColorGroupRows();
       createGroupEditPopup();

       game_data['isActive'] = true;
       SECmap.map.reload(!0);
       UI.SuccessMessage('Map Highlight has been loaded.', 3000);
   }

   init();
})();

Description: Allows you you to add tags villages on the map. 
1. For every group an tag can be created. This tag can be customised with colors and icons.
2. Tags can easely be actived/deactivated.

[Carbon]

super excited about this one! shot you a message to get a more throughough guide on how to use. but it is functioning and working like a boss this is an awesome! script.