NEW! custom upgrade builds update! Your upgrade builds will save now! This is still in beta!
// ==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
// ==/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.org/scripts/416440/Diepio%20Custom%20Points%20Upgrader%20Beta.user.js
// @updateURL https://update.greasyfork.org/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);
}
})();