// ==UserScript==
// @name         Diep.io Custom Points Upgrader. Beta
// @namespace    http://tampermonkey.net/
// @version      10.07
// @homepage     https://greasyfork.org/scripts/416440
// @description  NEW! custom upgrade builds update! Your upgrade builds will save now! This is still in beta!
// @author       -{Abyss⌬}-ora
// @match        https://diep.io/*
// @grant        none
// @license      MIT
// @downloadURL https://update.greasyfork.icu/scripts/416440/Diepio%20Custom%20Points%20Upgrader%20Beta.user.js
// @updateURL https://update.greasyfork.icu/scripts/416440/Diepio%20Custom%20Points%20Upgrader%20Beta.meta.js
// ==/UserScript==

(function () {
    "use strict";

    function getScriptVersion() {
        const metadataBlock = `
// ==UserScript==
// @name         Diep.io Custom Points Upgrader. Beta
// @namespace    http://tampermonkey.net/
// @version      10.07
// @homepage     https://greasyfork.org/scripts/416440
// @description  NEW! custom upgrade builds update! Your upgrade builds will save now! This is still in beta!
// @author       -{Abyss⌬}-ora
// @match        https://diep.io/*
// @grant        none
// @license      MIT
// @downloadURL https://update.greasyfork.icu/scripts/416440/Diepio%20Custom%20Points%20Upgrader%20Beta.user.js
// @updateURL https://update.greasyfork.icu/scripts/416440/Diepio%20Custom%20Points%20Upgrader%20Beta.meta.js
// ==/UserScript==`;

        const versionMatch = metadataBlock.match(/@version\s+([\d.]+)/);
        return versionMatch ? versionMatch[1] : null;
    }

    function saveDataBeforeUpdate() {
        const dataToSave = {
            quickSpawnUsername: localStorage.getItem("quickSpawnUsername"),
            savedNames: localStorage.getItem("savedNames"),
            savedButtons: localStorage.getItem("savedButtons"),
            removedDefaults: localStorage.getItem("removedDefaults")
        };
        localStorage.setItem("backupData", JSON.stringify(dataToSave));
    }

    function retrieveDataAfterUpdate() {
        const backupData = JSON.parse(localStorage.getItem("backupData"));
        if (backupData) {
            localStorage.setItem("quickSpawnUsername", backupData.quickSpawnUsername);
            localStorage.setItem("savedNames", backupData.savedNames);
            localStorage.setItem("savedButtons", backupData.savedButtons);
            localStorage.setItem("removedDefaults", backupData.removedDefaults);
        }
    }

    function checkAndUpdateVersion() {
        const currentVersion = getScriptVersion();
        const savedVersion = localStorage.getItem("scriptVersion");

        if (!savedVersion || savedVersion < currentVersion) {
            retrieveDataAfterUpdate();
            localStorage.setItem("scriptVersion", currentVersion);
        }
    }

    saveDataBeforeUpdate();

    checkAndUpdateVersion();

    const hoverMenu = document.createElement("div");
    hoverMenu.id = "myhover";
    hoverMenu.className = "hover";

    const modMenu = document.createElement("a");
    modMenu.id = "modtab";

    const menuHeader = document.createElement("h1");
    const versionText = document.createElement("small");
    const smallerVersionText = document.createElement("small");
    smallerVersionText.textContent = `Version: ${getScriptVersion()}`;
    versionText.appendChild(smallerVersionText);
    menuHeader.appendChild(versionText);
    menuHeader.appendChild(document.createElement("br"));
    menuHeader.appendChild(document.createTextNode("-{Abyss⌬}-ora's Mod Menu beta"));
    modMenu.appendChild(menuHeader);

    const topRightButton = document.createElement("button");
    topRightButton.id = "topRightButton";
    topRightButton.textContent = "↻";

    const style = document.createElement("style");
    style.type = "text/css";
    style.textContent = `
        #myhover a {
            z-index: 999;
            position: absolute;
            top: 300px;
            right: -260px;
            transition: 0.3s;
            width: 250px;
            padding: 15px;
            background-image: url("https://media.tenor.com/images/f3f5354b7c304bc61882dbb1183885e7/tenor.gif");
            background-color: #555;
            text-decoration: none;
            font-size: 10px;
            font-family: 'Monoton', cursive;
            text-shadow: 1px 1px #000, 2px 2px #555;
            color: white;
            border: double thick white;
            border-radius: 20px;
        }
        #myhover a:hover {
            right: 0;
        }
        .button {
            display: block;
            margin: 5px auto;
            width: 90%;
            text-align: center;
            font-size: 18px;
            font-family: 'Jersey 10', sans-serif;
            color: black;
            background-color: white;
            border-radius: 5px;
            transition: 0.4s;
            cursor: pointer;
        }
        .button:hover {
            transform: translateX(-10px);
        }
        #userInput {
            margin: 5px auto;
            width: 90%;
            padding: 8px;
            font-family: 'Monoton', cursive;
            text-align: center;
        }
        #specialButton {
            display: block;
            margin: 5px auto;
            width: 90%;
            text-align: center;
            font-size: 18px;
            font-family: 'Jersey 10', sans-serif;
            color: white;
            background-color: black;
            border-radius: 5px;
            border-color: white;
            transition: 0.4s;
            cursor: pointer;
            opacity: 0.8;
        }
        #specialButton:hover {
            color: black;
            background-color: darkgray;
            transform: translateX(-10px);
        }
        .popup {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 300px;
            background-image: url("https://media.tenor.com/images/f3f5354b7c304bc61882dbb1183885e7/tenor.gif");
            background-color: white;
            border: double thick white;
            border-radius: 10px;
            padding: 20px;
            z-index: 1000;
            text-shadow: 1px 1px #000, 2px 2px #555;
        }
        .attribute {
            display: flex;
            align-items: center;
            margin-bottom: 10px;
        }
        .attribute div {
            width: 30px;
            height: 30px;
            border: 1px solid #000;
            margin: 0;
        }
        .attribute button {
            background-color: gray;
            border: none;
            color: black;
            font-size: 20px;
            cursor: pointer;
            width: 30px;
            height: 30px;
            margin: 0;
        }
        #pointsCounter {
            text-align: center;
            font-size: 16px;
            margin-bottom: 10px;
        }
        #createBuildButton {
            display: block;
            margin: 20px auto 0 auto;
            width: 80%;
            text-align: center;
            font-size: 18px;
            font-family: 'Jersey 10', sans-serif;
            color: black;
            background-color: white;
            border-radius: 5px;
            border: 2px solid black;
            cursor: pointer;
            padding: 10px;
        }
        #createBuildButton:hover {
            background-color: gray;
            color: white;
        }
        #codeString {
            text-align: center;
            font-size: 18px;
            margin: 10px 0;
        }
        .remove-button {
            background-color: gray;
            border: none;
            color: white;
            font-size: 18px;
            cursor: pointer;
            width: 30px;
            height: 30px;
            margin-right: 5px;
            transition: background-color 0.3s;
        }
        .remove-button:hover {
            background-color: red;
        }
        .edit-button {
            background-color: gray;
            border: none;
            color: white;
            font-size: 18px;
            cursor: pointer;
            width: 30px;
            height: 30px;
            margin-right: 5px;
            transition: background-color 0.3s;
        }
        .edit-button:hover {
            background-color: lightgray;
        }
        .close-btn {
            display: flex;
            justify-content: center;
            align-items: center;
            position: absolute;
            top: 1px;
            z-index: 10;
            right: 0px;
            width: 40px;
            height: 35px;
            color: white;
            cursor: pointer;
            font-size: 18px;
            line-height: 30px;
            text-align: center;
            transition: background-color 0.3s;
            text-shadow: 1px 1px #000, 2px 2px #555;
            border-radius: 10px;
            background-color: rgba(0, 0, 0, 0.8);
        }
        .close-btn:hover {
            background-color: red;
        }
        #topRightButton {
            position: absolute;
            top: 10px;
            right: 10px;
            width: 30px;
            height: 30px;
            background-color: black;
            color: white;
            border: none;
            border-radius: 10%;
            cursor: pointer;
            font-size: 18px;
            display: flex;
            justify-content: center;
            align-items: center;
            transition: background-color 0.3s;
            z-index: 1001;
            opacity: 0.8;
        }
        #topRightButton:hover {
            color: red;
        }
        #buildButtonsContainer {
            max-height: 400px;
            overflow-y: scroll;
            margin-left: 5px;
        }
        #buildButtonsContainer {
            -ms-overflow-style: none;
            scrollbar-width: none;
        }
        ::-webkit-scrollbar {
            width: 10px;
        }
        ::-webkit-scrollbar-track {
            background: #f1f1f1;
            border-radius: 10px;
        }
        ::-webkit-scrollbar-thumb {
            background: #888;
            border-radius: 10px;
        }
        ::-webkit-scrollbar-thumb:hover {
            background: #555;
        }
        .popup {
            position: fixed;
            z-index: 9;
            background-color: #f1f1f1;
            border: 1px solid #d3d3d3;
            text-align: center;
            padding-top: 40px;
        }
        .popup-header {
            display: flex;
            justify-content: center;
            align-items: center;
            position: absolute;
            top: 1px;
            left: 0px;
            right: 35px;
            height: 30px;
            cursor: grabbing;
            z-index: 10;
            background-color: rgba(5, 5,5, 0.8);
            color: #fff;
            font-size: 10px;
            font-family: 'Monoton', cursive;
            text-shadow: 1px 1px #000, 2px 2px #555;
            border-color:  white;
            border-radius: 10px;
        }
    `;
    document.head.appendChild(style);

    const inputContainer = document.createElement("div");
    inputContainer.style.position = "relative";
    inputContainer.style.width = "90%";
    inputContainer.style.margin = "5px auto";

    const heartIcon = document.createElement("span");
    heartIcon.textContent = "♥";
    heartIcon.style.position = "absolute";
    heartIcon.style.left = "10px";
    heartIcon.style.top = "50%";
    heartIcon.style.transform = "translateY(-50%)";
    heartIcon.style.cursor = "pointer";
    heartIcon.style.fontSize = "18px";
    heartIcon.style.color = "black";

    const userInput = document.createElement("input");
    userInput.id = "userInput";
    userInput.type = "text";
    userInput.placeholder = "Enter Username";
    userInput.value = localStorage.getItem("quickSpawnUsername") || "";
    userInput.style.width = "100%";
    userInput.style.padding = "8px 30px 8px 30px";
    userInput.style.border = "2px solid black";
    userInput.style.borderRadius = "5px";
    userInput.style.boxSizing = "border-box";
    userInput.style.fontFamily = "'Monoton', cursive";
    userInput.style.textAlign = "center";

    const dropdownArrow = document.createElement("span");
    dropdownArrow.textContent = "▼";
    dropdownArrow.style.position = "absolute";
    dropdownArrow.style.right = "10px";
    dropdownArrow.style.top = "50%";
    dropdownArrow.style.transform = "translateY(-50%)";
    dropdownArrow.style.cursor = "pointer";
    dropdownArrow.style.fontSize = "14px";
    dropdownArrow.style.color = "black";

    const dropdown = document.createElement("div");
    dropdown.id = "dropdownMenu";
    dropdown.style.position = "absolute";
    dropdown.style.width = "100%";
    dropdown.style.top = "100%";
    dropdown.style.left = "0";
    dropdown.style.backgroundImage = "url('https://media.tenor.com/images/f3f5354b7c304bc61882dbb1183885e7/tenor.gif')";
    dropdown.style.border = "4px double white";
    dropdown.style.borderTop = "none";
    dropdown.style.display = "none";
    dropdown.style.zIndex = "100";
    dropdown.style.maxHeight = "150px";
    dropdown.style.overflowY = "auto";

    dropdownArrow.addEventListener("click", () => {
        dropdown.style.display = dropdown.style.display === "block" ? "none" : "block";
    });

    document.addEventListener("click", (event) => {
        if (!inputContainer.contains(event.target)) {
            dropdown.style.display = "none";
        }
    });

    userInput.addEventListener("input", (event) => {
        localStorage.setItem("quickSpawnUsername", event.target.value);
        updateHeartIcon();
    });

    heartIcon.addEventListener("click", () => {
        const name = userInput.value.trim();
        if (name) {
            const savedNames = JSON.parse(localStorage.getItem("savedNames")) || [];
            const nameIndex = savedNames.indexOf(name);

            if (nameIndex === -1) {
                savedNames.push(name);
                heartIcon.style.color = "red";
            } else {
                savedNames.splice(nameIndex, 1);
                heartIcon.style.color = "black";
            }

            localStorage.setItem("savedNames", JSON.stringify(savedNames));
            updateDropdown(savedNames);
        }
    });

    function updateDropdown(names) {
        dropdown.innerHTML = "";
        names.forEach(name => {
            const optionContainer = document.createElement("div");
            optionContainer.style.display = "flex";
            optionContainer.style.alignItems = "center";
            optionContainer.style.justifyContent = "space-between";
            optionContainer.style.padding = "8px";
            optionContainer.style.cursor = "pointer";
            optionContainer.style.fontFamily = "'Monoton', cursive";
            optionContainer.style.textAlign = "center";
            optionContainer.style.fontSize = "18px";
            optionContainer.style.backgroundImage = "url('https://media.tenor.com/images/f3f5354b7c304bc61882dbb1183885e7/tenor.gif')";
            optionContainer.style.transition = "background 0.3s";

            const option = document.createElement("div");
            option.textContent = name;
            option.style.flexGrow = "1";
            option.style.textAlign = "left";

            option.addEventListener("mouseover", () => {
                optionContainer.style.backgroundColor = "rgba(169, 169, 169, 0.8)";
            });

            option.addEventListener("mouseout", () => {
                optionContainer.style.backgroundColor = "transparent";
            });

            option.addEventListener("click", () => {
                userInput.value = name;
                dropdown.style.display = "none";
                localStorage.setItem("quickSpawnUsername", name);
                updateHeartIcon();
            });

            optionContainer.appendChild(option);
            dropdown.appendChild(optionContainer);
        });
    }

    function updateHeartIcon() {
        const name = userInput.value.trim();
        const savedNames = JSON.parse(localStorage.getItem("savedNames")) || [];
        if (savedNames.includes(name)) {
            heartIcon.style.color = "red";
        } else {
            heartIcon.style.color = "black";
        }
    }

    const savedNames = JSON.parse(localStorage.getItem("savedNames")) || [];
    updateDropdown(savedNames);
    updateHeartIcon();

    inputContainer.appendChild(heartIcon);
    inputContainer.appendChild(userInput);
    inputContainer.appendChild(dropdownArrow);
    inputContainer.appendChild(dropdown);
    modMenu.appendChild(inputContainer);

    const buttons = [];

    buttons.forEach((buttonData) => {
        const buttonContainer = document.createElement("div");
        buttonContainer.style.display = "flex";
        buttonContainer.style.alignItems = "center";
        buttonContainer.style.justifyContent = "center";

        const button = document.createElement("button");
        button.className = "button";
        button.textContent = buttonData.name;
        button.style.backgroundColor = buttonData.color;
        button.onclick = () => {
            const spawnName = userInput.value.trim();
            window.input.execute(`game_spawn ${spawnName}`);
            window.input.execute(`game_stats_build ${buttonData.cmd}`);
            const hoverMenu = document.getElementById("myhover");
            if (hoverMenu) {
                hoverMenu.style.display = hoverMenu.style.display === "none" ? "block" : "none";
            }
        };
        buttonContainer.appendChild(button);

        modMenu.appendChild(buttonContainer);
    });

    const specialButton = document.createElement("button");
    specialButton.id = "specialButton";
    specialButton.textContent = "[+]";

    specialButton.onclick = () => {
        const popup = document.createElement("div");
        popup.className = "popup";
        popup.id = "resetPopup";
        popup.innerHTML = `<div class="popup-header" id="resetPopupHeader">Drag me</div> `;
        document.body.appendChild(popup);

        const closeButton = document.createElement("button");
        closeButton.className = "close-btn";
        closeButton.textContent = "X";
        closeButton.onclick = () => {
            document.body.removeChild(popup);
        };
        popup.appendChild(closeButton);

        const buildNameInput = document.createElement("input");
        buildNameInput.type = "text";
        buildNameInput.placeholder = "Build Name";
        buildNameInput.style.display = "block";
        buildNameInput.style.width = "80%";
        buildNameInput.style.margin = "0 auto 10px auto";
        popup.appendChild(buildNameInput);

        const pointsCounter = document.createElement("div");
        pointsCounter.id = "pointsCounter";
        pointsCounter.textContent = "Points: 33";
        popup.appendChild(pointsCounter);

        const codeString = document.createElement("input");
        codeString.id = "codeString";
        codeString.type = "text";
        codeString.value = "";
        codeString.style.display = "block";
        codeString.style.width = "80%";
        codeString.style.margin = "0 auto 10px auto";
        popup.appendChild(codeString);

        let totalPoints = 33;
        let code = "";

        const attributes = [
            { name: "Health Regen", color: "rgb(232, 188, 157)" },
            { name: "Max Health", color: "rgb(230, 128, 234)" },
            { name: "Body Damage", color: "rgb(165, 128, 234)" },
            { name: "Bullet Speed", color: "rgb(128, 162, 234)" },
            { name: "Bullet Penetration", color: "rgb(234, 215, 128)" },
            { name: "Bullet Damage", color: "rgb(234, 128, 128)" },
            { name: "Reload", color: "rgb(164, 234, 128)" },
            { name: "Movement Speed", color: "rgb(128, 234, 230)" },
        ];

        function updateAttributes() {
            totalPoints = 33;
            attributes.forEach((attribute, index) => {
                const attributeRow = document.getElementById(`attributeRow-${index}`);
                const attributeCount = Math.min((code.match(new RegExp(index + 1, "g")) || []).length, 7);
                for (let i = 0; i < 7; i++) {
                    const graySquare = attributeRow.children[i + 1];
                    if (i < attributeCount) {
                        graySquare.style.backgroundColor = attribute.color;
                        graySquare.style.border = "1px solid black";
                        totalPoints--;
                    } else {
                        graySquare.style.backgroundColor = "gray";
                        graySquare.style.border = "0";
                    }
                }
            });
            pointsCounter.textContent = `Points: ${totalPoints}`;
        }

        attributes.forEach((attribute, index) => {
            const attributeRow = document.createElement("div");
            attributeRow.className = "attribute";
            attributeRow.id = `attributeRow-${index}`;
            attributeRow.style.position = "relative";

            const minusButton = document.createElement("button");
            minusButton.style.padding = "0 5px";
            minusButton.style.border = "1px solid black";
            minusButton.style.borderTopLeftRadius = "50px";
            minusButton.style.borderBottomLeftRadius = "50px";
            minusButton.style.borderTopRightRadius = "0";
            minusButton.style.borderBottomRightRadius = "0";
            minusButton.style.width = "32px";
            minusButton.style.height = "32px";
            minusButton.textContent = "-";
            minusButton.onclick = () => {
                const coloredSquares = Array.from(attributeRow.children).filter(child => child !== plusButton && child.style.backgroundColor === attribute.color);
                if (coloredSquares.length > 0) {
                    const square = coloredSquares[coloredSquares.length - 1];
                    square.style.backgroundColor = "gray";
                    square.style.border = "0";
                    totalPoints++;
                    pointsCounter.textContent = `Points: ${totalPoints}`;
                    code = code.slice(0, -1);
                    codeString.value = code;
                    updateAttributes();
                }
            };
            attributeRow.appendChild(minusButton);

            for (let i = 0; i < 7; i++) {
                const colorDiv = document.createElement("div");
                colorDiv.style.border = "0";
                colorDiv.style.backgroundColor = "gray";
                colorDiv.style.width = "30px";
                colorDiv.style.height = "30px";
                colorDiv.style.display = "inline-block";
                colorDiv.style.position = "relative";
                colorDiv.style.padding = "0 5px";

                if (i === 3) {
                    const textSpan = document.createElement("span");
                    textSpan.textContent = attribute.name;
                    textSpan.style.position = "absolute";
                    textSpan.style.top = "50%";
                    textSpan.style.left = "50%";
                    textSpan.style.transform = "translate(-50%, -50%)";
                    textSpan.style.color = "white";
                    textSpan.style.pointerEvents = "none";
                    textSpan.style.whiteSpace = "nowrap";
                    textSpan.style.zIndex = "1";
                    textSpan.style.display = "inline-block";
                    textSpan.style.textShadow =
                        "1px 1px 1px black, -1px -1px 1px black, -1px 1px 1px black, 1px -1px 1px black";

                    colorDiv.appendChild(textSpan);
                }

                attributeRow.appendChild(colorDiv);
            }

            const plusButton = document.createElement("button");
            plusButton.style.padding = "0 5px";
            plusButton.style.border = "1px solid black";
            plusButton.style.borderTopLeftRadius = "0";
            plusButton.style.borderBottomLeftRadius = "0";
            plusButton.style.borderTopRightRadius = "50px";
            plusButton.style.borderBottomRightRadius = "50px";
            plusButton.style.width = "32px";
            plusButton.style.height = "32px";
            plusButton.style.color = "Black";
            plusButton.style.fontWeight = "bold";
            plusButton.textContent = "+";
            plusButton.style.backgroundColor = attribute.color;

            plusButton.onclick = () => {
                const graySquares = Array.from(attributeRow.children).filter(child => child.style.backgroundColor === "gray" && child !== plusButton);
                if (graySquares.length > 0) {
                    const square = graySquares[0];
                    square.style.backgroundColor = attribute.color;
                    square.style.border = "1px solid black";
                    totalPoints--;
                    pointsCounter.textContent = `Points: ${totalPoints}`;
                    code += (index + 1).toString();
                    codeString.value = code;
                    updateAttributes();
                }
            };
            attributeRow.appendChild(plusButton);

            popup.appendChild(attributeRow);
        });

        codeString.addEventListener("input", (event) => {
            code = event.target.value;
            updateAttributes();
        });

        const createBuildButton = document.createElement("button");
        createBuildButton.id = "createBuildButton";
        createBuildButton.textContent = "Create Build";
        createBuildButton.onclick = () => {
            const buildName = buildNameInput.value.trim();
            if (buildName === "") {
                alert("Please enter a build name.");
                return;
            }

            let savedButtons = JSON.parse(localStorage.getItem("savedButtons")) || [];
            const newButtonData = { name: buildName, color: "#C0C0C0", cmd: code };
            savedButtons.push(newButtonData);
            localStorage.setItem("savedButtons", JSON.stringify(savedButtons));

            const buttonContainer = document.createElement("div");
            buttonContainer.style.display = "flex";
            buttonContainer.style.alignItems = "center";
            buttonContainer.style.justifyContent = "center";

            const editButton = document.createElement("button");
            editButton.className = "edit-button";
            editButton.textContent = "🖉";
            editButton.style.width = "30px";
            editButton.style.height = "30px";
            editButton.onclick = () => {
                createEditPopup(buttonContainer, newButtonData);
            };
            buttonContainer.appendChild(editButton);

            const newButton = document.createElement("button");
            newButton.className = "button";
            newButton.textContent = buildName;
            newButton.style.backgroundColor = "#C0C0C0";
            newButton.style.width = "100px";
            newButton.style.height = "30px";
            newButton.onclick = () => {
                const spawnName = userInput.value.trim();
                window.input.execute(`game_spawn ${spawnName}`);
                window.input.execute(`game_stats_build ${code}`);
                const hoverMenu = document.getElementById("myhover");
                if (hoverMenu) {
                    hoverMenu.style.display = hoverMenu.style.display === "none" ? "block" : "none";
                }
            };
            buttonContainer.appendChild(newButton);

            buildButtonsContainer.appendChild(buttonContainer);

            document.body.removeChild(popup);
        };
        popup.appendChild(createBuildButton);

        document.body.appendChild(popup);
        dragElement(document.getElementById("resetPopup"));
    };

    modMenu.appendChild(specialButton);
    modMenu.appendChild(topRightButton);
    hoverMenu.appendChild(modMenu);
    document.body.appendChild(hoverMenu);

    document.addEventListener("keydown", (event) => {
        if ((event.key === "r" || event.key === "R") && !["INPUT", "TEXTAREA"].includes(event.target.tagName)) {
            const hoverMenu = document.getElementById("myhover");
            if (hoverMenu) {
                hoverMenu.style.display = hoverMenu.style.display === "none" ? "block" : "none";
            }
        }
    });

    window.onload = () => {
        const userInput = document.getElementById("userInput");
        const specialButton = document.getElementById("specialButton");
        const modMenu = document.getElementById("modtab");
        const topRightButton = document.getElementById("topRightButton");

        const savedButtons = JSON.parse(localStorage.getItem("savedButtons")) || [];

        const buildButtonsContainer = document.createElement("div");
        buildButtonsContainer.id = "buildButtonsContainer";
        buildButtonsContainer.style.maxHeight = "400px";
        buildButtonsContainer.style.overflowY = "scroll";
        buildButtonsContainer.style.color = "black";
        modMenu.insertBefore(buildButtonsContainer, specialButton);

        function createButton(buttonData) {
            const buttonContainer = document.createElement("div");
            buttonContainer.style.display = "flex";
            buttonContainer.style.alignItems = "center";
            buttonContainer.style.justifyContent = "center";

            const editButton = document.createElement("button");
            editButton.className = "edit-button";
            editButton.textContent = "🖉";
            editButton.onclick = () => {
                createEditPopup(buttonContainer, buttonData);
            };
            buttonContainer.appendChild(editButton);

            const button = document.createElement("button");
            button.className = "button";
            button.textContent = buttonData.name;
            button.style.backgroundColor = buttonData.color;
            button.onclick = () => {
                const spawnName = userInput.value.trim();
                window.input.execute(`game_spawn ${spawnName}`);
                window.input.execute(`game_stats_build ${buttonData.cmd}`);
                const hoverMenu = document.getElementById("myhover");
                if (hoverMenu) {
                    hoverMenu.style.display = hoverMenu.style.display === "none" ? "block" : "none";
                }
            };
            buttonContainer.appendChild(button);

            buildButtonsContainer.appendChild(buttonContainer);
        }

        savedButtons.forEach(buttonData => createButton(buttonData));

        const createBuildButton = document.getElementById("createBuildButton");
        createBuildButton.onclick = () => {
            const buildNameInput = document.getElementById("buildNameInput");
            const buildName = buildNameInput.value.trim();
            if (buildName === "") {
                alert("Please enter a build name.");
                return;
            }

            const code = "some_code_here";

            let savedButtons = JSON.parse(localStorage.getItem("savedButtons")) || [];
            savedButtons.push({ name: buildName, color: "#C0C0C0", cmd: code });
            localStorage.setItem("savedButtons", JSON.stringify(savedButtons));

            const buttonContainer = document.createElement("div");
            buttonContainer.style.display = "flex";
            buttonContainer.style.alignItems = "center";
            buttonContainer.style.justifyContent = "center";

            const editButton = document.createElement("button");
            editButton.className = "edit-button";
            editButton.textContent = "🖉";
            editButton.onclick = () => {
                createEditPopup(buttonContainer, { name: buildName, color: "#C0C0C0", cmd: code });
            };
            buttonContainer.appendChild(editButton);

            const newButton = document.createElement("button");
            newButton.className = "button";
            newButton.textContent = buildName;
            newButton.style.backgroundColor = "#C0C0C0";
            newButton.onclick = () => {
                const spawnName = userInput.value.trim();
                window.input.execute(`game_spawn ${spawnName}`);
                window.input.execute(`game_stats_build ${code}`);
                const hoverMenu = document.getElementById("myhover");
                if (hoverMenu) {
                    hoverMenu.style.display = hoverMenu.style.display === "none" ? "block" : "none";
                }
            };
            buttonContainer.appendChild(newButton);

            buildButtonsContainer.appendChild(buttonContainer);

            document.body.removeChild(popup);
        };
    };

    document.getElementById("userInput").addEventListener("input", (event) => {
        localStorage.setItem("quickSpawnUsername", event.target.value);
    });

    topRightButton.addEventListener("click", () => {
        const resetPopup = document.createElement("div");
        resetPopup.className = "popup";

        const closeButton = document.createElement("button");
        closeButton.className = "close-btn";
        closeButton.textContent = "X";
        closeButton.onclick = () => {
            document.body.removeChild(resetPopup);
        };
        resetPopup.appendChild(closeButton);

        const confirmationMessage = document.createElement("div");
        confirmationMessage.textContent = "Do you really want to reset to default builds?";
        confirmationMessage.style.textAlign = "center";
        confirmationMessage.style.marginBottom = "20px";
        resetPopup.appendChild(confirmationMessage);

        const buttonsContainer = document.createElement("div");
        buttonsContainer.style.display = "flex";
        buttonsContainer.style.justifyContent = "space-between";

        const noButton = document.createElement("button");
        noButton.className = "button";
        noButton.textContent = "NO";
        noButton.onclick = () => {
            document.body.removeChild(resetPopup);
        };
        buttonsContainer.appendChild(noButton);

        const yesButton = document.createElement("button");
        yesButton.className = "button";
        yesButton.textContent = "YES";
        yesButton.onclick = () => {
            localStorage.removeItem("savedButtons");
            localStorage.removeItem("removedDefaults");
            location.reload();
        };
        buttonsContainer.appendChild(yesButton);

        resetPopup.appendChild(buttonsContainer);
        document.body.appendChild(resetPopup);
        dragElement(document.getElementById("resetPopup"));
        dragElementVertical(document.getElementById("mainMenu"));
    });

    function dragElement(elmnt) {
        var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
        if (document.getElementById(elmnt.id + "Header")) {
            document.getElementById(elmnt.id + "Header").onmousedown = dragMouseDown;
        } else {
            elmnt.onmousedown = dragMouseDown;
        }

        function dragMouseDown(e) {
            e = e || window.event;
            e.preventDefault();
            pos3 = e.clientX;
            pos4 = e.clientY;
            document.onmouseup = closeDragElement;
            document.onmousemove = elementDrag;
        }

        function elementDrag(e) {
            e = e || window.event;
            e.preventDefault();
            pos1 = pos3 - e.clientX;
            pos2 = pos4 - e.clientY;
            pos3 = e.clientX;
            pos4 = e.clientY;
            elmnt.style.top = (elmnt.offsetTop - pos2) + "px";
            elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";
        }

        function closeDragElement() {
            document.onmouseup = null;
            document.onmousemove = null;
        }
    }

    function dragElementVertical(elmnt) {
        var pos2 = 0, pos4 = 0;
        if (document.getElementById(elmnt.id + "Header")) {
            document.getElementById(elmnt.id + "Header").onmousedown = dragMouseDown;
        } else {
            elmnt.onmousedown = dragMouseDown;
        }

        function dragMouseDown(e) {
            e = e || window.event;
            e.preventDefault();
            pos4 = e.clientY;
            document.onmouseup = closeDragElement;
            document.onmousemove = elementDrag;
        }

        function elementDrag(e) {
            e = e || window.event;
            e.preventDefault();
            pos2 = pos4 - e.clientY;
            pos4 = e.clientY;
            elmnt.style.top = (elmnt.offsetTop - pos2) + "px";
        }

        function closeDragElement() {
            document.onmouseup = null;
            document.onmousemove = null;
        }
    }

    function createRemovePopup(buttonContainer, buttonData) {
        const popup = document.createElement("div");
        popup.className = "popup";
        popup.id = "removePopup";
        popup.innerHTML = `<div class="popup-header" id="removePopupHeader">Drag me</div> `;
        document.body.appendChild(popup);

        const closeButton = document.createElement("button");
        closeButton.className = "close-btn";
        closeButton.textContent = "X";
        closeButton.onclick = () => {
            document.body.removeChild(popup);
        };
        popup.appendChild(closeButton);

        const buildNameInput = document.createElement("input");
        buildNameInput.type = "text";
        buildNameInput.placeholder = "Build Name";
        buildNameInput.style.display = "block";
        buildNameInput.style.width = "80%";
        buildNameInput.style.margin = "0 auto 10px auto";
        buildNameInput.value = buttonData.name;
        popup.appendChild(buildNameInput);

        const pointsCounter = document.createElement("div");
        pointsCounter.id = "pointsCounter";
        pointsCounter.textContent = "Points: 33";
        popup.appendChild(pointsCounter);

        const codeString = document.createElement("input");
        codeString.id = "codeString";
        codeString.type = "text";
        codeString.value = buttonData.cmd;
        codeString.style.display = "block";
        codeString.style.width = "80%";
        codeString.style.margin = "0 auto 10px auto";
        popup.appendChild(codeString);

        let totalPoints = 33;
        let code = buttonData.cmd;

        const attributes = [
            { name: "Health Regen", color: "rgb(232, 188, 157)" },
            { name: "Max Health", color: "rgb(230, 128, 234)" },
            { name: "Body Damage", color: "rgb(165, 128, 234)" },
            { name: "Bullet Speed", color: "rgb(128, 162, 234)" },
            { name: "Bullet Penetration", color: "rgb(234, 215, 128)" },
            { name: "Bullet Damage", color: "rgb(234, 128, 128)" },
            { name: "Reload", color: "rgb(164, 234, 128)" },
            { name: "Movement Speed", color: "rgb(128, 234, 230)" },
        ];

        function updateAttributes() {
            totalPoints = 33;
            attributes.forEach((attribute, index) => {
                const attributeRow = document.getElementById(`attributeRow-${index}`);
                const attributeCount = Math.min((code.match(new RegExp(index + 1, "g")) || []).length, 7);
                for (let i = 0; i < 7; i++) {
                    const graySquare = attributeRow.children[i + 1];
                    if (i < attributeCount) {
                        graySquare.style.backgroundColor = attribute.color;
                        graySquare.style.border = "1px solid black";
                        totalPoints--;
                    } else {
                        graySquare.style.backgroundColor = "gray";
                        graySquare.style.border = "0";
                    }
                }
            });
            pointsCounter.textContent = `Points: ${totalPoints}`;
        }

        attributes.forEach((attribute, index) => {
            const attributeRow = document.createElement("div");
            attributeRow.className = "attribute";
            attributeRow.id = `attributeRow-${index}`;
            attributeRow.style.position = "relative";

            const minusButton = document.createElement("button");
            minusButton.style.padding = "0 5px";
            minusButton.style.border = "1px solid black";
            minusButton.style.borderTopLeftRadius = "50px";
            minusButton.style.borderBottomLeftRadius = "50px";
            minusButton.style.borderTopRightRadius = "0";
            minusButton.style.borderBottomRightRadius = "0";
            minusButton.style.width = "32px";
            minusButton.style.height = "32px";
            minusButton.textContent = "-";
            minusButton.onclick = () => {
                const coloredSquares = Array.from(attributeRow.children).filter(child => child !== plusButton && child.style.backgroundColor === attribute.color);
                if (coloredSquares.length > 0 && totalPoints < 33) {
                    const square = coloredSquares[coloredSquares.length - 1];
                    square.style.backgroundColor = "gray";
                    square.style.border = "0";
                    totalPoints++;
                    pointsCounter.textContent = `Points: ${totalPoints}`;
                    code = code.slice(0, -1);
                    codeString.value = code;
                    updateAttributes();
                }
            };
            attributeRow.appendChild(minusButton);

            for (let i = 0; i < 7; i++) {
                const colorDiv = document.createElement("div");
                colorDiv.style.border = "0";
                colorDiv.style.backgroundColor = "gray";
                colorDiv.style.width = "30px";
                colorDiv.style.height = "30px";
                colorDiv.style.display = "inline-block";
                colorDiv.style.position = "relative";
                colorDiv.style.padding = "0 5px";

                if (i === 3) {
                    const textSpan = document.createElement("span");
                    textSpan.textContent = attribute.name;
                    textSpan.style.position = "absolute";
                    textSpan.style.top = "50%";
                    textSpan.style.left = "50%";
                    textSpan.style.transform = "translate(-50%, -50%)";
                    textSpan.style.color = "white";
                    textSpan.style.pointerEvents = "none";
                    textSpan.style.whiteSpace = "nowrap";
                    textSpan.style.zIndex = "1";
                    textSpan.style.display = "inline-block";
                    textSpan.style.textShadow =
                        "1px 1px 1px black, -1px -1px 1px black, -1px 1px 1px black, 1px -1px 1px black";
                    textSpan.className = "attribute-text";

                    colorDiv.appendChild(textSpan);
                }

                attributeRow.appendChild(colorDiv);
            }

            const plusButton = document.createElement("button");
            plusButton.style.padding = "0 5px";
            plusButton.style.border = "1px solid black";
            plusButton.style.borderTopLeftRadius = "0";
            plusButton.style.borderBottomLeftRadius = "0";
            plusButton.style.borderTopRightRadius = "50px";
            plusButton.style.borderBottomRightRadius = "50px";
            plusButton.style.width = "32px";
            plusButton.style.height = "32px";
            plusButton.style.color = "Black";
            plusButton.style.fontWeight = "bold";
            plusButton.textContent = "+";
            plusButton.style.backgroundColor = attribute.color;

            plusButton.onclick = () => {
                const graySquares = Array.from(attributeRow.children).filter(child => child.style.backgroundColor === "gray" && child !== plusButton);
                if (graySquares.length > 0 && totalPoints > 0) {
                    const square = graySquares[0];
                    square.style.backgroundColor = attribute.color;
                    square.style.border = "1px solid black";
                    totalPoints--;
                    pointsCounter.textContent = `Points: ${totalPoints}`;
                    code += (index + 1).toString();
                    codeString.value = code;
                    updateAttributes();
                }
            };
            attributeRow.appendChild(plusButton);

            popup.appendChild(attributeRow);
        });

        codeString.addEventListener("input", (event) => {
            code = event.target.value;
            updateAttributes();
            adjustFontSize(codeString);
        });

        updateAttributes();
        adjustFontSize(codeString);

        const deleteButton = document.createElement("button");
        deleteButton.id = "deleteButton";
        deleteButton.textContent = "Delete Build";
        deleteButton.style.display = "block";
        deleteButton.style.margin = "10px auto";
        deleteButton.style.width = "80%";
        deleteButton.style.textAlign = "center";
        deleteButton.style.fontSize = "14px";
        deleteButton.style.color = "black";
        deleteButton.style.backgroundColor = "white";
        deleteButton.style.border = "2px solid black";
        deleteButton.style.borderRadius = "5px";
        deleteButton.style.cursor = "pointer";
        deleteButton.onclick = () => {
            const confirmationPopup = document.createElement("div");
            confirmationPopup.className = "popup";
            confirmationPopup.id = "confirmationPopup";
            confirmationPopup.innerHTML = `<div class="popup-header" id="confirmationPopupHeader">Drag Me</div> `;
            document.body.appendChild(confirmationPopup);

            const confirmationMessage = document.createElement("div");
            confirmationMessage.textContent = "Are you sure you want to delete this build?";
            confirmationMessage.style.textAlign = "center";
            confirmationMessage.style.marginBottom = "20px";
            confirmationPopup.appendChild(confirmationMessage);

            const buttonsContainer = document.createElement("div");
            buttonsContainer.style.display = "flex";
            buttonsContainer.style.justifyContent = "space-between";

            const noButton = document.createElement("button");
            noButton.className = "button";
            noButton.textContent = "NO";
            noButton.onclick = () => {
                document.body.removeChild(confirmationPopup);
            };
            buttonsContainer.appendChild(noButton);

            const yesButton = document.createElement("button");
            yesButton.className = "button";
            yesButton.textContent = "YES";
            yesButton.onclick = () => {
                buttonContainer.remove();
                const updatedButtons = JSON.parse(localStorage.getItem("savedButtons")) || [];
                const newSavedButtons = updatedButtons.filter(b => b.name !== buttonData.name);
                localStorage.setItem("savedButtons", JSON.stringify(newSavedButtons));
                document.body.removeChild(confirmationPopup);
                document.body.removeChild(popup);
            };
            buttonsContainer.appendChild(yesButton);

            confirmationPopup.appendChild(buttonsContainer);
            document.body.appendChild(confirmationPopup);
            dragElement(document.getElementById("confirmationPopup"));
        };
        popup.appendChild(deleteButton);

        const saveChangesButton = document.createElement("button");
        saveChangesButton.id = "saveChangesButton";
        saveChangesButton.textContent = "Save Changes";
        saveChangesButton.style.display = "block";
        saveChangesButton.style.margin = "10px auto";
        saveChangesButton.style.width = "80%";
        saveChangesButton.style.textAlign = "center";
        saveChangesButton.style.fontSize = "14px";
        saveChangesButton.style.color = "black";
        saveChangesButton.style.backgroundColor = "white";
        saveChangesButton.style.border = "2px solid black";
        saveChangesButton.style.borderRadius = "5px";
        saveChangesButton.style.cursor = "pointer";
        saveChangesButton.onclick = () => {
            const buildName = buildNameInput.value.trim();
            if (buildName === "") {
                alert("Please enter a build name.");
                return;
            }

            buttonData.name = buildName;
            buttonData.cmd = codeString.value;

            const button = buttonContainer.querySelector(".button");
            button.textContent = buildName;

            const savedButtons = JSON.parse(localStorage.getItem("savedButtons")) || [];
            const updatedButtons = savedButtons.map(b => b.name === buttonData.name ? buttonData : b);
            localStorage.setItem("savedButtons", JSON.stringify(updatedButtons));

            document.body.removeChild(popup);
        };
        popup.appendChild(saveChangesButton);

        document.body.appendChild(popup);
        dragElement(document.getElementById("removePopup"));
    }

    function adjustFontSize(element) {
        let fontSize = 16;
        element.style.fontSize = fontSize + "px";
        while (element.scrollWidth > element.clientWidth && fontSize > 6) {
            fontSize--;
            element.style.fontSize = fontSize + "px";
        }
    }

    function createEditPopup(buttonContainer, buttonData) {
        const popupId = `editPopup-${Date.now()}`;
        const popup = document.createElement("div");
        popup.className = "popup";
        popup.id = popupId;
        popup.innerHTML = `<div class="popup-header" id="${popupId}Header">Drag me</div> `;
        document.body.appendChild(popup);

        const closeButton = document.createElement("button");
        closeButton.className = "close-btn";
        closeButton.textContent = "X";
        closeButton.onclick = () => {
            document.body.removeChild(popup);
        };
        popup.appendChild(closeButton);

        const buildNameInput = document.createElement("input");
        buildNameInput.type = "text";
        buildNameInput.placeholder = "Build Name";
        buildNameInput.style.display = "block";
        buildNameInput.style.width = "80%";
        buildNameInput.style.margin = "0 auto 10px auto";
        buildNameInput.value = buttonData.name;
        popup.appendChild(buildNameInput);

        const pointsCounter = document.createElement("div");
        pointsCounter.id = `pointsCounter-${popupId}`;
        pointsCounter.textContent = "Points: 33";
        popup.appendChild(pointsCounter);

        const codeString = document.createElement("input");
        codeString.id = `codeString-${popupId}`;
        codeString.type = "text";
        codeString.value = buttonData.cmd;
        codeString.style.display = "block";
        codeString.style.width = "80%";
        codeString.style.margin = "0 auto 10px auto";
        popup.appendChild(codeString);

        let totalPoints = 33;
        let code = buttonData.cmd;

        const attributes = [
            { name: "Health Regen", color: "rgb(232, 188, 157)" },
            { name: "Max Health", color: "rgb(230, 128, 234)" },
            { name: "Body Damage", color: "rgb(165, 128, 234)" },
            { name: "Bullet Speed", color: "rgb(128, 162, 234)" },
            { name: "Bullet Penetration", color: "rgb(234, 215, 128)" },
            { name: "Bullet Damage", color: "rgb(234, 128, 128)" },
            { name: "Reload", color: "rgb(164, 234, 128)" },
            { name: "Movement Speed", color: "rgb(128, 234, 230)" },
        ];

        function updateAttributes() {
            totalPoints = 33;
            attributes.forEach((attribute, index) => {
                const attributeRow = document.getElementById(`attributeRow-${popupId}-${index}`);
                const attributeCount = Math.min((code.match(new RegExp(index + 1, "g")) || []).length, 7);
                for (let i = 0; i < 7; i++) {
                    const graySquare = attributeRow.children[i + 1];
                    if (i < attributeCount) {
                        graySquare.style.backgroundColor = attribute.color;
                        graySquare.style.border = "1px solid black";
                        totalPoints--;
                    } else {
                        graySquare.style.backgroundColor = "gray";
                        graySquare.style.border = "0";
                    }
                }
            });
            pointsCounter.textContent = `Points: ${totalPoints}`;
        }

        attributes.forEach((attribute, index) => {
            const attributeRow = document.createElement("div");
            attributeRow.className = "attribute";
            attributeRow.id = `attributeRow-${popupId}-${index}`;
            attributeRow.style.position = "relative";

            const minusButton = document.createElement("button");
            minusButton.style.padding = "0 5px";
            minusButton.style.border = "1px solid black";
            minusButton.style.borderTopLeftRadius = "50px";
            minusButton.style.borderBottomLeftRadius = "50px";
            minusButton.style.borderTopRightRadius = "0";
            minusButton.style.borderBottomRightRadius = "0";
            minusButton.style.width = "32px";
            minusButton.style.height = "32px";
            minusButton.textContent = "-";
            minusButton.onclick = () => {
                const coloredSquares = Array.from(attributeRow.children).filter(child => child !== plusButton && child.style.backgroundColor === attribute.color);
                if (coloredSquares.length > 0) {
                    const square = coloredSquares[coloredSquares.length - 1];
                    square.style.backgroundColor = "gray";
                    square.style.border = "0";
                    totalPoints++;
                    pointsCounter.textContent = `Points: ${totalPoints}`;
                    code = code.slice(0, -1);
                    codeString.value = code;
                    updateAttributes();
                }
            };
            attributeRow.appendChild(minusButton);

            for (let i = 0; i < 7; i++) {
                const colorDiv = document.createElement("div");
                colorDiv.style.border = "0";
                colorDiv.style.backgroundColor = "gray";
                colorDiv.style.width = "30px";
                colorDiv.style.height = "30px";
                colorDiv.style.display = "inline-block";
                colorDiv.style.position = "relative";
                colorDiv.style.padding = "0 5px";

                if (i === 3) {
                    const textSpan = document.createElement("span");
                    textSpan.textContent = attribute.name;
                    textSpan.style.position = "absolute";
                    textSpan.style.top = "50%";
                    textSpan.style.left = "50%";
                    textSpan.style.transform = "translate(-50%, -50%)";
                    textSpan.style.color = "white";
                    textSpan.style.pointerEvents = "none";
                    textSpan.style.whiteSpace = "nowrap";
                    textSpan.style.zIndex = "1";
                    textSpan.style.display = "inline-block";
                    textSpan.style.textShadow =
                        "1px 1px 1px black, -1px -1px 1px black, -1px 1px 1px black, 1px -1px 1px black";

                    colorDiv.appendChild(textSpan);
                }

                attributeRow.appendChild(colorDiv);
            }

            const plusButton = document.createElement("button");
            plusButton.style.padding = "0 5px";
            plusButton.style.border = "1px solid black";
            plusButton.style.borderTopLeftRadius = "0";
            plusButton.style.borderBottomLeftRadius = "0";
            plusButton.style.borderTopRightRadius = "50px";
            plusButton.style.borderBottomRightRadius = "50px";
            plusButton.style.width = "32px";
            plusButton.style.height = "32px";
            plusButton.style.color = "Black";
            plusButton.style.fontWeight = "bold";
            plusButton.textContent = "+";
            plusButton.style.backgroundColor = attribute.color;

            plusButton.onclick = () => {
                const graySquares = Array.from(attributeRow.children).filter(child => child.style.backgroundColor === "gray" && child !== plusButton);
                if (graySquares.length > 0) {
                    const square = graySquares[0];
                    square.style.backgroundColor = attribute.color;
                    square.style.border = "1px solid black";
                    totalPoints--;
                    pointsCounter.textContent = `Points: ${totalPoints}`;
                    code += (index + 1).toString();
                    codeString.value = code;
                    updateAttributes();
                }
            };
            attributeRow.appendChild(plusButton);

            popup.appendChild(attributeRow);
        });

        codeString.addEventListener("input", (event) => {
            code = event.target.value;
            updateAttributes();
        });

        updateAttributes();

        const saveChangesButton = document.createElement("button");
        saveChangesButton.id = `saveChangesButton-${popupId}`;
        saveChangesButton.textContent = "Save Changes";
        saveChangesButton.style.display = "block";
        saveChangesButton.style.margin = "10px auto";
        saveChangesButton.style.width = "80%";
        saveChangesButton.style.textAlign = "center";
        saveChangesButton.style.fontSize = "14px";
        saveChangesButton.style.color = "black";
        saveChangesButton.style.backgroundColor = "white";
        saveChangesButton.style.border = "2px solid black";
        saveChangesButton.style.borderRadius = "5px";
        saveChangesButton.style.cursor = "pointer";
        saveChangesButton.onclick = () => {
            const buildName = buildNameInput.value.trim();
            if (buildName === "") {
                alert("Please enter a build name.");
                return;
            }

            buttonData.name = buildName;
            buttonData.cmd = codeString.value;

            const button = buttonContainer.querySelector(".button");
            button.textContent = buildName;

            const savedButtons = JSON.parse(localStorage.getItem("savedButtons")) || [];
            const updatedButtons = savedButtons.map(b => b.name === buttonData.name ? buttonData : b);
            localStorage.setItem("savedButtons", JSON.stringify(updatedButtons));

            document.body.removeChild(popup);
        };
        popup.appendChild(saveChangesButton);

        const deleteButton = document.createElement("button");
        deleteButton.id = `deleteButton-${popupId}`;
        deleteButton.textContent = "Delete Build";
        deleteButton.style.display = "block";
        deleteButton.style.margin = "10px auto";
        deleteButton.style.width = "80%";
        deleteButton.style.textAlign = "center";
        deleteButton.style.fontSize = "14px";
        deleteButton.style.color = "black";
        deleteButton.style.backgroundColor = "white";
        deleteButton.style.border = "2px solid black";
        deleteButton.style.borderRadius = "5px";
        deleteButton.style.cursor = "pointer";
        deleteButton.onclick = () => {
            const confirmationPopup = document.createElement("div");
            confirmationPopup.className = "popup";
            confirmationPopup.id = `confirmationPopup-${popupId}`;
            confirmationPopup.innerHTML = `<div class="popup-header" id="confirmationPopupHeader-${popupId}">Drag Me</div> `;
            document.body.appendChild(confirmationPopup);

            const confirmationMessage = document.createElement("div");
            confirmationMessage.textContent = "Are you sure you want to delete this build?";
            confirmationMessage.style.textAlign = "center";
            confirmationMessage.style.marginBottom = "20px";
            confirmationPopup.appendChild(confirmationMessage);

            const buttonsContainer = document.createElement("div");
            buttonsContainer.style.display = "flex";
            buttonsContainer.style.justifyContent = "space-between";

            const noButton = document.createElement("button");
            noButton.className = "button";
            noButton.textContent = "NO";
            noButton.onclick = () => {
                document.body.removeChild(confirmationPopup);
            };
            buttonsContainer.appendChild(noButton);

            const yesButton = document.createElement("button");
            yesButton.className = "button";
            yesButton.textContent = "YES";
            yesButton.onclick = () => {
                buttonContainer.remove();
                const updatedButtons = JSON.parse(localStorage.getItem("savedButtons")) || [];
                const newSavedButtons = updatedButtons.filter(b => b.name !== buttonData.name);
                localStorage.setItem("savedButtons", JSON.stringify(newSavedButtons));
                document.body.removeChild(confirmationPopup);
                document.body.removeChild(popup);
            };
            buttonsContainer.appendChild(yesButton);

            confirmationPopup.appendChild(buttonsContainer);
            document.body.appendChild(confirmationPopup);
            dragElement(document.getElementById(`confirmationPopup-${popupId}`));
        };
        popup.appendChild(deleteButton);

        document.body.appendChild(popup);
        dragElement(document.getElementById(popupId));
    }

    function createButton(buttonData) {
        const buttonContainer = document.createElement("div");
        buttonContainer.style.display = "flex";
        buttonContainer.style.alignItems = "center";
        buttonContainer.style.justifyContent = "center";

        const editButton = document.createElement("button");
        editButton.className = "edit-button";
        editButton.textContent = "🖉";
        editButton.onclick = () => {
            createEditPopup(buttonContainer, buttonData);
        };
        buttonContainer.appendChild(editButton);

        const button = document.createElement("button");
        button.className = "button";
        button.textContent = buttonData.name;
        button.style.backgroundColor = buttonData.color;
        button.onclick = () => {
            const spawnName = userInput.value.trim();
            window.input.execute(`game_spawn ${spawnName}`);
            window.input.execute(`game_stats_build ${buttonData.cmd}`);
            const hoverMenu = document.getElementById("myhover");
            if (hoverMenu) {
                hoverMenu.style.display = hoverMenu.style.display === "none" ? "block" : "none";
            }
        };
        buttonContainer.appendChild(button);

        buildButtonsContainer.appendChild(buttonContainer);
    }
})();