Map/Coord Map Village Highlight

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();

})();