// ==UserScript==
// @name Themes for Diep.io
// @version 1.1.1
// @description Themes for diep.io i's a geat tool to edit diep.io to add, edit or get themes.
// @author ICE⁷⁷⁷#5838
// @namespace *://diep.io/
// @match *://diep.io/
// @grant GM_addStyle
// @license MIT
// ==/UserScript==
GM_addStyle(`
#potd {
position: absolute;
user-select: none;
width: 100%;
}
#dashboard {
right: 10px;
width: 444px;
padding: 0px 5px 0px 5px;
border-radius: 6px;
position: absolute;
border: 2px #00ffff solid;
box-shadow: 8px 7px 17px 1px black;
background: #25282be0;
color: white;
font-size: 20px;
}
#dashboard * {
font-family: "Montserrat", sans-serif;
font-weight: 600;
}
#dashboard input {
outline: none;
border: none;
margin: 0;
padding: 0;
cursor: pointer;
}
#dashboard input[type="color"],
#dashboard input[type="checkbox"] {
background: rgba(0, 0, 0, 0);
}
#dashboard ::-webkit-color-swatch {
border-radius: 50%;
}
#dashboard input[type="checkbox"] {
margin-top: 3px;
}
#dashboard input[type="number"] {
text-align: center;
width: 75px;
height: 10px;
border: rgba(0, 0, 0, 0) 2px solid;
color: white;
background: black;
padding: 3px 0px 3px 10px;
border-radius: 25px;
transition: border-color 0.3s;
}
#dashboard input[type="number"]:hover,
#dashboard input[type="number"]:focus {
border: #00ffffbf 2px solid;
}
#dashboard input::-webkit-color-swatch-wrapper {
margin-top: 2px;
outline: none;
padding: 0;
}
#dashboard__header {
padding: 10px 0px 20px 0px;
cursor: move;
display: flex;
justify-content: space-around;
}
#dashboard__body {
max-height: 500px;
overflow-y: auto;
overflow-x: hidden;
}
#dashboard__body::-webkit-scrollbar {
width: 7.5px;
}
#dashboard__body::-webkit-scrollbar-track {
background: #00ffff;
border-radius: 25px;
}
#dashboard__body::-webkit-scrollbar-thumb {
background: #070707;
border-radius: 25px;
}
#dashboard__body::-webkit-scrollbar-thumb:hover,
#dashboard::-webkit-scrollbar-thumb:active {
background: #101010;
transition: background 0.25s;
}
.section {
margin: 5px 5px 10px 5px;
}
.section__options {
margin-left: 20px;
font-size: 75%;
}
.section__header {
cursor: pointer;
user-select: none;
font-size: 110%;
display: inline-block;
margin-bottom: 5px;
font-weight: bold;
}
.section__header::before {
content: "- ";
}
.section__header.hidden::before {
content: "+ ";
}
.section__option {
height: 25px;
width: 300px;
padding: 5px 300px 0px 15px;
border-left: 3px #255cd8 solid;
transition: 0.2s;
}
.section__option span {
margin-right: 5px;
}
.section__option input[type="color"] {
width: 15px;
height: 15px;
border: none;
padding: 0;
}
.section__option:hover {
background: #ffffff12;
}
.section__option:focus-within {
background: #ffffff26;
border-left: 3px orange solid;
}
.option__value {
float: right;
display: inline-block;
}
.option__label {
user-select: none;
display: inline-block;
}
#dashboard__close {
user-select: none;
top: 12.5px;
right: 12.5px;
position: absolute;
padding: 7.5px;
width: 10px;
height: 10px;
display: flex;
flex-direction: row;
flex-wrap: wrap;
text-decoration: none;
align-content: space-around;
justify-content: space-around;
border: 2px grey solid;
background: #25282bb8;
border-radius: 50%;
cursor: pointer;
color: white;
font-size: 70%;
transition-property: background, color, border-color, transform;
transition-duration: 0.5s, 0.5s, 0.5s, 0.05s;
}
#dashboard__close:hover {
background: #00ffff;
border-color: black;
color: black;
}
#dashboard__close:active {
transform: translateY(3px);
}
.header__btn {
outline: none;
border: none;
padding: 10px 20px;
cursor: pointer;
color: white;
font-weight: bold;
transition-property: background-color;
transition-duration: 0.3s;
}
.header__btn:hover {
background-color: rgba(0, 0, 0, 0.33) !important;
}
#themes:hover {
opacity: 1;
transition: opacity 1s;
}
#themes {
transition: opacity 1s 3s;
opacity: 0.2;
}
#db_switcher::after,
#db_switcher::before {
content: " - ";
}
#db_switcher.hidden::after,
#db_switcher.hidden::before {
content: " + ";
}
#themes {
position: absolute;
width: 200px;
}
#themes button {
outline: none;
border: none;
cursor: pointer;
width: 75%;
word-break: break-word;
font-family: "Ubuntu";
color: white;
text-shadow: -0.1em -0.1em 0 #000000, 0 -0.1em 0 #000000,
0.1em -0.1em 0 #000000, 0.1em 0 0 #000000, 0.1em 0.1em 0 #000000,
0 0.1em 0 #000000, -0.1em 0.1em 0 #000000, -0.1em 0 0 #000000;
opacity: 0.8;
border: none;
padding: 0.3em 0.5em;
transition: filter 0.15s;
transition: transform 0.3s;
}
#themes button:active:not([disabled]) {
filter: brightness(0.75);
}
#themes button:hover:not([disabled]):not(:active) {
filter: brightness(1.25);
}
#themes .themes__theme:hover {
transform: translateX(15px);
}
#themes .themes__switcher {
width: 90%;
}
`);
(() => {
const USERS_BUTTONS = [];
class Input {
constructor(default_, cmd, isLast = false) {
this.default = default_;
this.cmd = cmd;
this.el = document.createElement("input");
this.isLast = isLast;
}
}
class ColorInput extends Input {
constructor(default_, cmd, isLast) {
super(default_, cmd, isLast);
this.el.type = "color";
this.el.value = this.default;
this.el.oninput = () => {
input.execute(`${this.cmd}${this.el.value.slice(1)}`);
};
this.el.getValue = () => {
return `${this.cmd}${this.el.value.slice(1)}`;
};
this.el.setValue = (values) => {
let found = false;
for (let value of values) {
if (value.includes(this.cmd)) {
found = true;
const RE = new RegExp(this.cmd);
const value_ = value.replace(RE, "");
this.el.value = "#" + value_;
break;
}
}
if (!found) this.el.value = this.default;
this.el.oninput();
};
}
}
class CheckBoxInput extends Input {
constructor(default_, cmd, isLast) {
super(default_, cmd, isLast);
this.el.type = "checkbox";
this.el.checked = this.default;
this.el.oninput = () => {
input.execute(`${this.cmd}${this.el.checked}`);
};
this.el.getValue = () => {
return `${this.cmd}${this.el.checked}`;
};
this.el.setValue = (values) => {
let found = false;
for (let value of values) {
if (value.includes(this.cmd)) {
found = true;
const RE = new RegExp(this.cmd);
const value_ = value.replace(RE, "");
if (value_ === "true") {
this.el.checked = true;
} else {
this.el.checked = false;
}
break;
}
}
if (!found) this.el.checked = this.default;
this.el.oninput();
};
}
}
class NumberInput extends Input {
constructor(default_, cmd, step, min, max, isLast) {
super(default_, cmd, isLast);
this.el.type = "number";
this.el.value = this.default;
this.el.step = step;
this.el.min = min;
this.el.max = max;
this.el.oninput = () => {
input.execute(`${this.cmd}${this.el.value}`);
};
this.el.getValue = () => {
return `${this.cmd}${this.el.value}`;
};
this.el.setValue = (values) => {
let found = false;
for (let value of values) {
if (value.includes(this.cmd)) {
found = true;
const RE = new RegExp(this.cmd);
this.el.value = value.replace(RE, "");
break;
}
}
if (!found) this.el.value = this.default;
this.el.oninput();
};
}
}
function hideEl(el) {
if (el.style.display != "none") {
el.style.display = "none";
} else {
el.style.display = "";
}
}
function setDrag(el, el_child) {
var newPosX = 0,
newPosY = 0,
MousePosX = 0,
MousePosY = 0;
if (el_child) {
el_child.addEventListener("mousedown", MouseDown);
} else el.addEventListener("mousedown", MouseDown);
function MouseDown(mouseDown) {
MousePosX = mouseDown.pageX;
MousePosY = mouseDown.pageY;
el.classList.add("dragableging");
document.addEventListener("mousemove", elementMove);
document.addEventListener("mouseup", stopElementMove);
}
function elementMove(mouseMove) {
newPosX = MousePosX - mouseMove.pageX;
newPosY = MousePosY - mouseMove.pageY;
MousePosX = mouseMove.pageX;
MousePosY = mouseMove.pageY;
el.style.top = el.offsetTop - newPosY + "px";
el.style.left = el.offsetLeft - newPosX + "px";
}
function stopElementMove() {
el.classList.remove("dragableging");
document.removeEventListener("mousemove", elementMove);
document.removeEventListener("mouseup", stopElementMove);
}
}
const OPTS_LIB = {
"Global colors": {
"Map background": new ColorInput("#cdcdcd", "ren_background_color 0x"),
"Map border": new ColorInput("#000000", "ren_border_color 0x"),
"Map border alpha": new NumberInput(
0.1,
"ren_border_color_alpha ",
0.01,
0,
1
),
"Map grid": new ColorInput("#000000", "ren_grid_color 0x"),
"Map grid alpha": new NumberInput(
0.1,
"ren_grid_base_alpha ",
0.01,
0,
1,
true
),
"Minimap background": new ColorInput(
"#cdcdcd",
"ren_minimap_background_color 0x"
),
"Minimap border": new ColorInput(
"#555555",
"ren_minimap_border_color 0x",
true
),
"Soft colors": new CheckBoxInput(true, "ren_stroke_soft_color "),
"Soft stroke intensity": new NumberInput(
0.25,
"ren_stroke_soft_color_intensity ",
0.05,
null,
1,
true
),
Squares: new ColorInput("#ffe869", "net_replace_color 8 0x"),
Triangles: new ColorInput("#fc7677", "net_replace_color 9 0x"),
Pentagons: new ColorInput("#768dfc", "net_replace_color 10 0x"),
"Shiny poligons": new ColorInput(
"#89ff69",
"net_replace_color 7 0x",
true
),
Crashers: new ColorInput("#ff77dc", "net_replace_color 11 0x"),
"Neutral team": new ColorInput("#ffe869", "net_replace_color 12 0x"),
"Fallen Bosses": new ColorInput(
"#c0c0c0",
"net_replace_color 17 0x",
true
),
"Health bar": new ColorInput("#85e37d", "ren_health_fill_color 0x"),
"Health bar background": new ColorInput(
"#555555",
"ren_health_background_color 0x"
),
"EXP bar": new ColorInput("#ffde43", "ren_xp_bar_fill_color 0x"),
"Score bar": new ColorInput("#43ff91", "ren_score_bar_fill_color 0x"),
"EXP/Score/Scoreboard backgrounds": new ColorInput(
"#000000",
"ren_bar_background_color 0x",
true
),
"Barrels & etc": new ColorInput("#999999", "net_replace_color 1 0x"),
"Smasher & dominator bases": new ColorInput(
"#555555",
"net_replace_color 0 0x"
),
},
"TDM colors": {
"Blue team": new ColorInput("#00b1de", "net_replace_color 3 0x"),
"Red Team": new ColorInput("#f14e54", "net_replace_color 4 0x"),
"Purple team": new ColorInput("#be7ff5", "net_replace_color 5 0x"),
"Green team": new ColorInput("#00f46c", "net_replace_color 6 0x"),
},
"FFA colors": {
"Your body": new ColorInput("#00b1de", "net_replace_color 2 0x"),
"Enemies' bodies": new ColorInput("#f14e56", "net_replace_color 15 0x"),
"Summoned squares": new ColorInput("#fbc477", "net_replace_color 16 0x"),
"Maze walls": new ColorInput("#bbbbbb", "net_replace_color 14 0x"),
"Scoreboard bar": new ColorInput("#44ffa0", "net_replace_color 13 0x"),
},
Other: {
FPS: new CheckBoxInput(false, "ren_fps "),
"Players' names": new CheckBoxInput(true, "ren_names "),
"Health bar": new CheckBoxInput(true, "ren_health_bars "),
"Show health bar values": new CheckBoxInput(
false,
"ren_raw_health_values "
),
"Scoreboar names": new CheckBoxInput(true, "ren_scoreboard_names "),
Scoreboard: new CheckBoxInput(true, "ren_scoreboard "),
"Minimap viewport": new CheckBoxInput(false, "ren_minimap_viewport "),
UI: new CheckBoxInput(true, "ren_ui "),
"UI scale": new NumberInput(1, "ren_ui_scale ", 0.01, 0, null, true),
"Pattern grid": new CheckBoxInput(true, "ren_pattern_grid "),
"Debug collisions": new CheckBoxInput(false, "ren_debug_collisions "),
},
};
const POTD = document.createElement("div");
POTD.id = "potd";
document.body.append(POTD);
const THEMES_MENU = document.createElement("div");
THEMES_MENU.id = "themes";
THEMES_MENU.innerHTML = `
<button class="themes__switcher" style="background: #00ffff;width: 100%;">Themes Menu</button>
<div id="main-content" style="display: none;">
<div id="global-themes"></div>
<button class="themes__switcher" style="background: rgb(255, 212, 0);" >My
themes</button>
<div id="users-themes">
</div>
<button id ="dbs" class="themes__switcher" style="background: #25282b">Dashboard</button>
</div>
`;
const DASHBOARD = document.createElement("div");
DASHBOARD.id = "dashboard";
DASHBOARD.style.display = "none";
DASHBOARD.innerHTML = `<div id="dashboard__header"><a id="dashboard__close">☓</a></div><div id="dashboard__body"></div>`;
POTD.append(THEMES_MENU, DASHBOARD);
// const CLOSE = document.createElement("a");
// CLOSE.id = "dashboard__close";
// CLOSE.innerText = "☓";
// CLOSE.onclick = () => {
// hideEl(DASHBOARD);
// };
// document.querySelector("#dashboard__header").append(CLOSE);
function init() {
const USERS_THEMES = JSON.parse(localStorage.getItem("users_themes"));
const SELECTED_THEME = JSON.parse(localStorage.getItem("selected_theme"));
for (let category in OPTS_LIB) {
const OPTIONS = document.createElement("div");
OPTIONS.className = "section__options";
const HEADER = createHeader(category);
for (let opt in OPTS_LIB[category]) {
const PLAN = OPTS_LIB[category][opt];
OPTIONS.append(createOption(opt, PLAN.el, PLAN.isLast));
}
addSection(HEADER, OPTIONS);
}
if (USERS_THEMES) {
USERS_THEMES.map((t) => {
createBthTheme(t.name, t.color, false, false);
});
[...THEMES_MENU.querySelectorAll(".themes__theme")].map((el) => {
if (el.innerText === SELECTED_THEME.name) el.onclick();
});
}
}
function addSection(header, options) {
const SECTION = document.createElement("div");
SECTION.className = "section";
SECTION.append(header, options);
document.querySelector("#dashboard__body").append(SECTION);
}
function createHeader(text) {
const HEADER = document.createElement("div");
HEADER.className = "section__header";
HEADER.innerText = text;
HEADER.onclick = function () {
const OPTIONS = HEADER.parentElement.querySelector(".section__options");
if (OPTIONS) {
if (OPTIONS.style.display != "none") {
HEADER.classList.add("hidden");
OPTIONS.style.display = "none";
} else {
HEADER.classList.remove("hidden");
OPTIONS.style.display = "";
}
}
};
return HEADER;
}
function createOption(text, html, isLast = false) {
const OPTION = document.createElement("div");
OPTION.className = "section__option";
const OPTION_LABEL = document.createElement("span");
OPTION_LABEL.className = "option__label";
OPTION_LABEL.innerText = text + ": ";
const OPTION_VALUE = document.createElement("div");
OPTION_VALUE.className = "option__value";
OPTION_VALUE.append(html);
OPTION.append(OPTION_LABEL, OPTION_VALUE);
if (isLast) {
OPTION.style.marginBottom = "10px";
}
return OPTION;
}
function initTheme(theme) {
const { values } = theme;
[
...document
.querySelector("#dashboard__body")
.querySelectorAll(".option__value *"),
].map((el) => el.setValue(values));
localStorage.setItem("selected_theme", JSON.stringify(theme));
}
function createBthTheme(text, color, data, isGlobal = true) {
const BUTTON = document.createElement("button");
BUTTON.className = "themes__theme";
BUTTON.style.backgroundColor = color;
BUTTON.innerText = text;
BUTTON.onclick = () => {
if (!data) {
initTheme(
JSON.parse(localStorage.getItem("users_themes")).find(
(el) => el.name === text
)
);
} else {
initTheme(data);
}
};
if (!isGlobal) {
document.querySelector("#users-themes").append(BUTTON);
USERS_BUTTONS.push(BUTTON);
} else document.querySelector("#global-themes").append(BUTTON);
return BUTTON;
}
function createDashHeadBtn(text, color, onclick) {
const BUTTON = document.createElement("button");
BUTTON.className = "header__btn";
BUTTON.style.backgroundColor = color;
BUTTON.innerText = text;
BUTTON.onclick = onclick;
document.querySelector("#dashboard__header").append(BUTTON);
}
function saveTheme() {
const THEME_NAME = prompt("Write your theme name.");
if (!THEME_NAME) {
return alert("Invalid value!");
}
const THEME = {};
var USERS_THEMES = JSON.parse(localStorage.getItem("users_themes"));
if (!USERS_THEMES) {
USERS_THEMES = [];
}
const isAdded = USERS_THEMES.find((t) => t.name === THEME_NAME);
if (isAdded) {
if (
!confirm(
"There is already the theme with the same name, that one will be updated, are you sure?"
)
)
return;
}
var THEME_COLOR = prompt(
"Write your theme button color or you can leave the current color if you click on 'Cancel'.\nExample: '#ff00ff' - pink."
);
if (THEME_COLOR !== null) {
if (!/#?[a-f\d]{6}/i.test(THEME_COLOR)) {
return alert("Invalid value! (a-f, 0-9)");
}
THEME_COLOR = THEME_COLOR.replace(/#/, "");
THEME_COLOR += "e6";
}
const VALUES = [
...document
.querySelector("#dashboard__body")
.querySelectorAll(".option__value *"),
].map((el) => el.getValue());
if (!isAdded) {
THEME.name = THEME_NAME;
THEME.color = "#" + THEME_COLOR;
THEME.values = VALUES;
USERS_THEMES.push(THEME);
createBthTheme(THEME.name, THEME.color, THEME, false);
} else {
if (THEME_COLOR !== null) isAdded.color = THEME_COLOR;
isAdded.values = VALUES;
if (
!updateTheme(isAdded.name, isAdded.color, () => {
isAdded.values.map((v) => input.execute(v));
})
) {
createBthTheme(
THEME.name,
THEME.color,
() => THEME.values.map((v) => input.execute(v)),
USERS_THEMES
);
}
}
localStorage.setItem("users_themes", JSON.stringify(USERS_THEMES));
}
function updateTheme(name, new_color, new_onclick) {
const BUTTON = USERS_BUTTONS.find((btn) => btn.innerText === name);
if (!BUTTON) {
return false;
}
BUTTON.innerText = name;
BUTTON.style.backgroundColor = new_color;
BUTTON.onclick = () => {
initTheme(
JSON.parse(localStorage.getItem("users_themes")).find(
(el) => el.name === name
)
);
new_onclick();
};
return true;
}
function deleteTheme() {
var USERS_THEMES = JSON.parse(localStorage.getItem("users_themes"));
const NAME = prompt("Write theme name.");
const INDX = USERS_THEMES.findIndex((el) => el.name === NAME);
if (INDX < 0) {
return alert("Theme with a such name wasn't found!");
}
if (confirm("Are you sure?")) {
USERS_THEMES.splice(INDX, 1);
localStorage.setItem("users_themes", JSON.stringify(USERS_THEMES));
const BUTTON = USERS_BUTTONS.find((btn) => btn.innerText === NAME);
if (BUTTON) {
BUTTON.remove();
}
}
}
createDashHeadBtn("Save theme", "green", saveTheme);
createDashHeadBtn("Delete theme", "red", deleteTheme);
createBthTheme("Classic", "a5a5a5e6", { name: "Classic", values: [] });
createBthTheme("Dark", "#222222e6", {
name: "Dark",
values: [
"ren_border_color 0x858585",
"ren_grid_color 0xffffff",
"ren_background_color 0x101010",
],
});
createBthTheme("Arras", "#8bbe3de6", {
name: "Arras",
values: [
"ren_score_bar_fill_color 0x8abc3f",
"ren_xp_bar_fill_color 0xefc74b",
"net_replace_color 0 0x484848",
"net_replace_color 1 0xa7a7af",
"net_replace_color 2 0x3ca4cb",
"net_replace_color 3 0x3ca4cb",
"net_replace_color 4 0xe03e41",
"net_replace_color 5 0xcc669c",
"net_replace_color 6 0x8abc3f",
"net_replace_color 8 0xefc74b",
"net_replace_color 9 0xe7896d",
"net_replace_color 10 0x8d6adf",
"net_replace_color 11 0xef99c3",
"net_replace_color 12 0xfdf380",
"net_replace_color 14 0xa7a7af",
"net_replace_color 15 0xe03e41",
"net_replace_color 17 0x726f6f",
],
});
createBthTheme("Neon", "#000000e6", {
name: "Neon",
values: [
"ren_stroke_soft_color_intensity -100",
"ren_solid_background true",
"ren_stroke_soft_color true",
"ren_background_color 0x000000",
"ren_border_color 0xFFFFFF",
"ren_border_alpha 100",
"net_replace_color 0 0xFFFFFF",
"net_replace_color 1 0x010101",
"net_replace_color 2 0x000102",
"net_replace_color 3 0x000102",
"net_replace_color 4 0x020000",
"net_replace_color 5 0x020002",
"net_replace_color 6 0x000200",
"net_replace_color 7 0x000100",
"net_replace_color 8 0x010101",
"net_replace_color 9 0x010101",
"net_replace_color 10 0x010101",
"net_replace_color 11 0x0e0e0e",
"net_replace_color 12 0x020200",
"net_replace_color 13 0x010101",
"net_replace_color 14 0x010101",
"net_replace_color 15 0x020000",
"net_replace_color 16 0x010200",
"net_replace_color 17 0x000202",
],
});
document.querySelector("#themes button").onclick = () =>
hideEl(document.querySelector("#main-content"));
document.querySelector("#main-content .themes__switcher").onclick = () =>
hideEl(document.querySelector("#users-themes"));
document.querySelector("#themes #dbs").onclick = () => {
hideEl(DASHBOARD);
};
document.querySelector("#dashboard__close").onclick = () => {
hideEl(DASHBOARD);
};
document.addEventListener("keydown", (event) => {
if (["f", "а"].includes(event.key) && event.target == document.body) {
hideEl(POTD);
}
});
setDrag(DASHBOARD, document.querySelector("#dashboard__header"));
DASHBOARD.append(
document.querySelector("#dashboard__header"),
document.querySelector("#dashboard__body")
);
const checking = setInterval(() => {
try {
if (input) {
clearInterval(checking);
init();
}
} catch (err) {}
}, 10);
})();
