☰

Themes for Diep.io (POTD)

It's a great pack of tools to edit diep.io.

目前為 2021-11-18 提交的版本，檢視 最新版本。

  1. // ==UserScript==
  2. // @name         Themes for Diep.io (POTD)
  3. // @version      1.0.1
  4. // @description  It's a great pack of tools to edit diep.io.
  5. // @author       ICE⁷⁷⁷#5838
  6. // @namespace    *://diep.io/
  7. // @match        *://diep.io/
  8. // @grant        GM_addStyle
  9. // @license      MIT
  10. // ==/UserScript==
  11.  
  12. GM_addStyle(`
  13. #dashboard {
  14. 	right: 10px;
  15. 	width: 444px;
  16. 	padding: 0px 5px 0px 5px;
  17. 	border-radius: 6px;
  18. 	position: absolute;
  19.  
  20. 	border: 2px #00ffff solid;
  21. 	box-shadow: 8px 7px 17px 1px black;
  22. 	background: #25282be0;
  23.  
  24. 	color: white;
  25. 	font-size: 20px;
  26.  }
  27.  
  28.  #dashboard * {
  29. 	font-family: "Montserrat", sans-serif;
  30. 	font-weight: 600;
  31.  }
  32.  
  33.  #dashboard input {
  34. 	outline: none;
  35. 	border: none;
  36. 	margin: 0;
  37. 	padding: 0;
  38. 	cursor: pointer;
  39.  }
  40.  
  41.  #dashboard input[type="color"],
  42.  #dashboard input[type="checkbox"] {
  43. 	background: rgba(0, 0, 0, 0);
  44.  }
  45.  #dashboard ::-webkit-color-swatch {
  46. 	border-radius: 50%;
  47.  }
  48.  #dashboard input[type="checkbox"] {
  49. 	margin-top: 3px;
  50.  }
  51.  
  52.  #dashboard input[type="number"] {
  53. 	text-align: center;
  54. 	width: 75px;
  55. 	height: 10px;
  56. 	border: rgba(0, 0, 0, 0) 2px solid;
  57. 	color: white;
  58. 	background: black;
  59. 	padding: 3px 0px 3px 10px;
  60. 	border-radius: 25px;
  61. 	transition: border-color 0.3s;
  62.  }
  63.  
  64.  #dashboard input[type="number"]:hover,
  65.  #dashboard input[type="number"]:focus {
  66. 	border: #00ffffbf 2px solid;
  67.  }
  68.  
  69.  #dashboard input::-webkit-color-swatch-wrapper {
  70. 	margin-top: 2px;
  71. 	outline: none;
  72. 	padding: 0;
  73.  }
  74.  
  75.  #dashboard__header {
  76. 	padding: 10px 0px 20px 0px;
  77. 	cursor: move;
  78. 	display: flex;
  79. 	justify-content: space-around;
  80.  }
  81.  #dashboard__body {
  82. 	max-height: 500px;
  83.  
  84. 	overflow-y: auto;
  85. 	overflow-x: hidden;
  86.  }
  87.  #dashboard__body::-webkit-scrollbar {
  88. 	width: 7.5px;
  89.  }
  90.  
  91.  #dashboard__body::-webkit-scrollbar-track {
  92. 	background: #00ffff;
  93. 	border-radius: 25px;
  94.  }
  95.  #dashboard__body::-webkit-scrollbar-thumb {
  96. 	background: #070707;
  97. 	border-radius: 25px;
  98.  }
  99.  
  100.  #dashboard__body::-webkit-scrollbar-thumb:hover,
  101.  #dashboard::-webkit-scrollbar-thumb:active {
  102. 	background: #101010;
  103. 	transition: background 0.25s;
  104.  }
  105.  
  106.  .section {
  107. 	margin: 5px 5px 10px 5px;
  108.  }
  109.  .section__options {
  110. 	margin-left: 20px;
  111. 	font-size: 75%;
  112.  }
  113.  .section__header {
  114. 	cursor: pointer;
  115. 	user-select: none;
  116. 	font-size: 110%;
  117. 	display: inline-block;
  118. 	margin-bottom: 5px;
  119. 	font-weight: bold;
  120.  }
  121.  .section__header::before {
  122. 	content: "- ";
  123.  }
  124.  .section__header.hidden::before {
  125. 	content: "+ ";
  126.  }
  127.  .section__option {
  128. 	height: 25px;
  129. 	width: 300px;
  130. 	padding: 5px 300px 0px 15px;
  131. 	border-left: 3px #255cd8 solid;
  132. 	transition: 0.2s;
  133.  }
  134.  .section__option span {
  135. 	margin-right: 5px;
  136.  }
  137.  
  138.  .section__option input[type="color"] {
  139. 	width: 15px;
  140. 	height: 15px;
  141. 	border: none;
  142. 	padding: 0;
  143.  }
  144.  
  145.  .section__option:hover {
  146. 	background: #ffffff12;
  147.  }
  148.  
  149.  .section__option:focus-within {
  150. 	background: #ffffff26;
  151. 	border-left: 3px orange solid;
  152.  }
  153.  .option__value {
  154. 	float: right;
  155. 	display: inline-block;
  156.  }
  157.  .option__label {
  158. 	user-select: none;
  159. 	display: inline-block;
  160.  }
  161.  
  162.  #dashboard__close {
  163. 	user-select: none;
  164. 	top: 12.5px;
  165. 	right: 12.5px;
  166.  
  167. 	position: absolute;
  168. 	padding: 7.5px;
  169. 	width: 10px;
  170. 	height: 10px;
  171. 	display: flex;
  172. 	flex-direction: row;
  173. 	flex-wrap: wrap;
  174. 	text-decoration: none;
  175. 	align-content: space-around;
  176. 	justify-content: space-around;
  177.  
  178. 	border: 2px grey solid;
  179. 	background: #25282bb8;
  180. 	border-radius: 50%;
  181. 	cursor: pointer;
  182.  
  183. 	color: white;
  184. 	font-size: 70%;
  185.  
  186. 	transition-property: background, color, border-color, transform;
  187. 	transition-duration: 0.5s, 0.5s, 0.5s, 0.05s;
  188.  }
  189.  
  190.  #dashboard__close:hover {
  191. 	background: #00ffff;
  192. 	border-color: black;
  193. 	color: black;
  194.  }
  195.  
  196.  #dashboard__close:active {
  197. 	transform: translateY(3px);
  198.  }
  199.  
  200.  .header__btn {
  201. 	outline: none;
  202. 	border: none;
  203.  
  204. 	padding: 10px 20px;
  205. 	cursor: pointer;
  206. 	color: white;
  207.  
  208. 	font-weight: bold;
  209.  
  210. 	transition-property: background-color;
  211. 	transition-duration: 0.3s;
  212.  }
  213.  
  214.  .header__btn:hover {
  215. 	background-color: rgba(0, 0, 0, 0.33) !important;
  216.  }
  217.  
  218.  #themes:hover {
  219. 	opacity: 1;
  220. 	transition: opacity 1s;
  221.  }
  222.  
  223.  #themes {
  224. 	transition: opacity 1s 3s;
  225. 	opacity: 0.2;
  226.  }
  227.  #db_switcher::after,
  228.  #db_switcher::before {
  229. 	content: " - ";
  230.  }
  231.  #db_switcher.hidden::after,
  232.  #db_switcher.hidden::before {
  233. 	content: " + ";
  234.  }
  235.  
  236.  #themes {
  237. 	position: absolute;
  238. 	width: 200px;
  239.  }
  240.  #themes button {
  241. 	outline: none;
  242. 	border: none;
  243. 	cursor: pointer;
  244. 	width: 75%;
  245. 	word-break: break-word;
  246. 	font-family: "Ubuntu";
  247. 	color: white;
  248. 	text-shadow: -0.1em -0.1em 0 #000000, 0 -0.1em 0 #000000,
  249. 	  0.1em -0.1em 0 #000000, 0.1em 0 0 #000000, 0.1em 0.1em 0 #000000,
  250. 	  0 0.1em 0 #000000, -0.1em 0.1em 0 #000000, -0.1em 0 0 #000000;
  251. 	opacity: 0.8;
  252. 	border: none;
  253. 	padding: 0.3em 0.5em;
  254. 	transition: filter 0.15s;
  255. 	transition: transform 0.3s;
  256.  }
  257.  
  258.  #themes button:active:not([disabled]) {
  259. 	filter: brightness(0.75);
  260.  }
  261.  
  262.  #themes button:hover:not([disabled]):not(:active) {
  263. 	filter: brightness(1.25);
  264.  }
  265.  
  266.  #themes .themes__theme:hover {
  267. 	transform: translateX(15px);
  268.  }
  269.  
  270.  #themes .themes__switcher {
  271. 	width: 100%;
  272.  }
  273.  
  274. `);
  275. (() => {
  276.   const USERS_BUTTONS = [];
  277.  
  278.   class Input {
  279.     constructor(default_, cmd, isLast = false) {
  280.       this.default = default_;
  281.       this.cmd = cmd;
  282.       this.el = document.createElement("input");
  283.       this.isLast = isLast;
  284.     }
  285.   }
  286.  
  287.   class ColorInput extends Input {
  288.     constructor(default_, cmd, isLast) {
  289.       super(default_, cmd, isLast);
  290.       this.el.type = "color";
  291.       this.el.value = this.default;
  292.  
  293.       this.el.oninput = () => {
  294.         input.execute(`${this.cmd}${this.el.value.slice(1)}`);
  295.       };
  296.       this.el.getValue = () => {
  297.         return `${this.cmd}${this.el.value.slice(1)}`;
  298.       };
  299.       this.el.setValue = (values) => {
  300.         let found = false;
  301.         for (let value of values) {
  302.           if (value.includes(this.cmd)) {
  303.             found = true;
  304.             const RE = new RegExp(this.cmd);
  305.             const value_ = value.replace(RE, "");
  306.             this.el.value = "#" + value_;
  307.             break;
  308.           }
  309.         }
  310.         if (!found) this.el.value = this.default;
  311.         this.el.oninput();
  312.       };
  313.     }
  314.   }
  315.  
  316.   class CheckBoxInput extends Input {
  317.     constructor(default_, cmd, isLast) {
  318.       super(default_, cmd, isLast);
  319.       this.el.type = "checkbox";
  320.       this.el.checked = this.default;
  321.  
  322.       this.el.oninput = () => {
  323.         input.execute(`${this.cmd}${this.el.checked}`);
  324.       };
  325.       this.el.getValue = () => {
  326.         return `${this.cmd}${this.el.checked}`;
  327.       };
  328.       this.el.setValue = (values) => {
  329.         let found = false;
  330.         for (let value of values) {
  331.           if (value.includes(this.cmd)) {
  332.             found = true;
  333.             const RE = new RegExp(this.cmd);
  334.             const value_ = value.replace(RE, "");
  335.             if (value_ === "true") {
  336.               this.el.checked = true;
  337.             } else {
  338.               this.el.checked = false;
  339.             }
  340.             break;
  341.           }
  342.         }
  343.         if (!found) this.el.checked = this.default;
  344.         this.el.oninput();
  345.       };
  346.     }
  347.   }
  348.  
  349.   class NumberInput extends Input {
  350.     constructor(default_, cmd, step, min, max, isLast) {
  351.       super(default_, cmd, isLast);
  352.       this.el.type = "number";
  353.       this.el.value = this.default;
  354.       this.el.step = step;
  355.       this.el.min = min;
  356.       this.el.max = max;
  357.  
  358.       this.el.oninput = () => {
  359.         input.execute(`${this.cmd}${this.el.value}`);
  360.       };
  361.       this.el.getValue = () => {
  362.         return `${this.cmd}${this.el.value}`;
  363.       };
  364.       this.el.setValue = (values) => {
  365.         let found = false;
  366.         for (let value of values) {
  367.           if (value.includes(this.cmd)) {
  368.             found = true;
  369.             const RE = new RegExp(this.cmd);
  370.             this.el.value = value.replace(RE, "");
  371.             break;
  372.           }
  373.         }
  374.         if (!found) this.el.value = this.default;
  375.         this.el.oninput();
  376.       };
  377.     }
  378.   }
  379.  
  380.   function hideEl(el) {
  381.     if (el.style.display != "none") {
  382.       el.style.display = "none";
  383.     } else {
  384.       el.style.display = "";
  385.     }
  386.   }
  387.  
  388.   function setDrag(el, el_child) {
  389.     var newPosX = 0,
  390.       newPosY = 0,
  391.       MousePosX = 0,
  392.       MousePosY = 0;
  393.     if (el_child) {
  394.       el_child.addEventListener("mousedown", MouseDown);
  395.     } else el.addEventListener("mousedown", MouseDown);
  396.  
  397.     function MouseDown(mouseDown) {
  398.       MousePosX = mouseDown.pageX;
  399.       MousePosY = mouseDown.pageY;
  400.  
  401.       el.classList.add("dragableging");
  402.       document.addEventListener("mousemove", elementMove);
  403.       document.addEventListener("mouseup", stopElementMove);
  404.     }
  405.  
  406.     function elementMove(mouseMove) {
  407.       newPosX = MousePosX - mouseMove.pageX;
  408.       newPosY = MousePosY - mouseMove.pageY;
  409.       MousePosX = mouseMove.pageX;
  410.       MousePosY = mouseMove.pageY;
  411.  
  412.       el.style.top = el.offsetTop - newPosY + "px";
  413.       el.style.left = el.offsetLeft - newPosX + "px";
  414.     }
  415.  
  416.     function stopElementMove() {
  417.       el.classList.remove("dragableging");
  418.       document.removeEventListener("mousemove", elementMove);
  419.       document.removeEventListener("mouseup", stopElementMove);
  420.     }
  421.   }
  422.  
  423.   const OPTS_LIB = {
  424.     "Global colors": {
  425.       "Map background": new ColorInput("#cdcdcd", "ren_background_color 0x"),
  426.       "Map border": new ColorInput("#000000", "ren_border_color 0x"),
  427.       "Map border alpha": new NumberInput(
  428.         0.1,
  429.         "ren_border_color_alpha ",
  430.         0.01,
  431.         0,
  432.         1
  433.       ),
  434.       "Map grid": new ColorInput("#000000", "ren_grid_color 0x"),
  435.       "Map grid alpha": new NumberInput(
  436.         0.1,
  437.         "ren_grid_base_alpha ",
  438.         0.01,
  439.         0,
  440.         1,
  441.         true
  442.       ),
  443.       "Minimap background": new ColorInput(
  444.         "#cdcdcd",
  445.         "ren_minimap_background_color 0x"
  446.       ),
  447.       "Minimap border": new ColorInput(
  448.         "#555555",
  449.         "ren_minimap_border_color 0x",
  450.         true
  451.       ),
  452.       "Soft colors": new CheckBoxInput(true, "ren_stroke_soft_color "),
  453.       "Soft stroke intensity": new NumberInput(
  454.         0.25,
  455.         "ren_stroke_soft_color_intensity ",
  456.         0.05,
  457.         null,
  458.         1,
  459.         true
  460.       ),
  461.  
  462.       Squares: new ColorInput("#ffe869", "net_replace_color 8 0x"),
  463.       Triangles: new ColorInput("#fc7677", "net_replace_color 9 0x"),
  464.       Pentagons: new ColorInput("#768dfc", "net_replace_color 10 0x"),
  465.       "Shiny poligons": new ColorInput(
  466.         "#89ff69",
  467.         "net_replace_color 7 0x",
  468.         true
  469.       ),
  470.       Crashers: new ColorInput("#ff77dc", "net_replace_color 11 0x"),
  471.       "Neutral team": new ColorInput("#ffe869", "net_replace_color 12 0x"),
  472.       "Fallen Bosses": new ColorInput(
  473.         "#c0c0c0",
  474.         "net_replace_color 17 0x",
  475.         true
  476.       ),
  477.       "Health bar": new ColorInput("#85e37d", "ren_health_fill_color 0x"),
  478.       "Health bar background": new ColorInput(
  479.         "#555555",
  480.         "ren_health_background_color 0x"
  481.       ),
  482.       "EXP bar": new ColorInput("#ffde43", "ren_xp_bar_fill_color 0x"),
  483.       "Score bar": new ColorInput("#43ff91", "ren_score_bar_fill_color 0x"),
  484.       "EXP/Score/Scoreboard backgrounds": new ColorInput(
  485.         "#000000",
  486.         "ren_bar_background_color 0x",
  487.         true
  488.       ),
  489.       "Barrels & etc": new ColorInput("#999999", "net_replace_color 1 0x"),
  490.       "Smasher & dominator bases": new ColorInput(
  491.         "#555555",
  492.         "net_replace_color 0 0x"
  493.       ),
  494.     },
  495.     "TDM colors": {
  496.       "Blue team": new ColorInput("#00b1de", "net_replace_color 3 0x"),
  497.       "Red Team": new ColorInput("#f14e54", "net_replace_color 4 0x"),
  498.       "Purple team": new ColorInput("#be7ff5", "net_replace_color 5 0x"),
  499.       "Green team": new ColorInput("#00f46c", "net_replace_color 6 0x"),
  500.     },
  501.     "FFA colors": {
  502.       "Your body": new ColorInput("#00b1de", "net_replace_color 2 0x"),
  503.       "Enemies' bodies": new ColorInput("#f14e56", "net_replace_color 15 0x"),
  504.       "Summoned squares": new ColorInput("#fbc477", "net_replace_color 16 0x"),
  505.       "Maze walls": new ColorInput("#bbbbbb", "net_replace_color 14 0x"),
  506.       "Scoreboard bar": new ColorInput("#44ffa0", "net_replace_color 13 0x"),
  507.     },
  508.     Other: {
  509.       FPS: new CheckBoxInput(false, "ren_fps "),
  510.       "Players' names": new CheckBoxInput(true, "ren_names "),
  511.       "Health bar": new CheckBoxInput(true, "ren_health_bars "),
  512.       "Show health bar values": new CheckBoxInput(
  513.         false,
  514.         "ren_raw_health_values "
  515.       ),
  516.       "Scoreboar names": new CheckBoxInput(true, "ren_scoreboard_names "),
  517.       Scoreboard: new CheckBoxInput(true, "ren_scoreboard "),
  518.       "Minimap viewport": new CheckBoxInput(false, "ren_minimap_viewport "),
  519.       UI: new CheckBoxInput(true, "ren_ui "),
  520.       "UI scale": new NumberInput(1, "ren_ui_scale ", 0.01, 0, null, true),
  521.  
  522.       "Pattern grid": new CheckBoxInput(true, "ren_pattern_grid "),
  523.       "Debug collisions": new CheckBoxInput(false, "ren_debug_collisions "),
  524.     },
  525.   };
  526.  
  527.   const CONTAINER = document.createElement("div");
  528.   CONTAINER.id = "themes";
  529.   CONTAINER.innerHTML = `
  530. 		<button class="themes__switcher" style="background: #00ffff">Themes Menu</button>
  531. 		<div id="main-content" style="display: none;">
  532. 		  <div id="global-themes"></div>
  533. 	 
  534. 		  <button class="themes__switcher" style="background: rgb(255, 212, 0);" >My
  535. 			  themes</button>
  536. 		  <div id="users-themes"></div>
  537. 		</div>
  538. 		`;
  539.   document.body.append(CONTAINER);
  540.  
  541.   const DASHBOARD = document.createElement("div");
  542.   DASHBOARD.id = "dashboard";
  543.   DASHBOARD.style.display = "none";
  544.   DASHBOARD.innerHTML = `<div id="dashboard__header"></div><div id="dashboard__body"></div>`;
  545.   document.body.append(DASHBOARD);
  546.  
  547.   //  const CLOSE = document.createElement("a");
  548.   //  CLOSE.id = "dashboard__close";
  549.   //  CLOSE.innerText = "☓";
  550.   //  CLOSE.onclick = () => {
  551.   //    DASHBOARD.style.display = "none";
  552.   //  };
  553.   //  document.querySelector("#dashboard__header").append(CLOSE);
  554.  
  555.   function init() {
  556.     const USERS_THEMES = JSON.parse(localStorage.getItem("users_themes"));
  557.     const SELECTED_THEME = JSON.parse(localStorage.getItem("selected_theme"));
  558.  
  559.     for (let category in OPTS_LIB) {
  560.       const OPTIONS = document.createElement("div");
  561.       OPTIONS.className = "section__options";
  562.       const HEADER = createHeader(category);
  563.  
  564.       for (let opt in OPTS_LIB[category]) {
  565.         const PLAN = OPTS_LIB[category][opt];
  566.         OPTIONS.append(createOption(opt, PLAN.el, PLAN.isLast));
  567.       }
  568.  
  569.       addSection(HEADER, OPTIONS);
  570.     }
  571.  
  572.     if (USERS_THEMES) {
  573.       USERS_THEMES.map((t) => {
  574.         createBthTheme(t.name, t.color, false, false);
  575.       });
  576.       [...CONTAINER.querySelectorAll(".themes__theme")].map((el) => {
  577.         if (el.innerText === SELECTED_THEME.name) el.onclick();
  578.       });
  579.     }
  580.   }
  581.  
  582.   function addSection(header, options) {
  583.     const SECTION = document.createElement("div");
  584.     SECTION.className = "section";
  585.  
  586.     SECTION.append(header, options);
  587.  
  588.     document.querySelector("#dashboard__body").append(SECTION);
  589.   }
  590.  
  591.   function createHeader(text) {
  592.     const HEADER = document.createElement("div");
  593.     HEADER.className = "section__header";
  594.     HEADER.innerText = text;
  595.  
  596.     HEADER.onclick = function () {
  597.       const OPTIONS = HEADER.parentElement.querySelector(".section__options");
  598.       if (OPTIONS) {
  599.         if (OPTIONS.style.display != "none") {
  600.           HEADER.classList.add("hidden");
  601.           OPTIONS.style.display = "none";
  602.         } else {
  603.           HEADER.classList.remove("hidden");
  604.           OPTIONS.style.display = "";
  605.         }
  606.       }
  607.     };
  608.     return HEADER;
  609.   }
  610.  
  611.   function createOption(text, html, isLast = false) {
  612.     const OPTION = document.createElement("div");
  613.     OPTION.className = "section__option";
  614.  
  615.     const OPTION_LABEL = document.createElement("span");
  616.     OPTION_LABEL.className = "option__label";
  617.     OPTION_LABEL.innerText = text + ": ";
  618.  
  619.     const OPTION_VALUE = document.createElement("div");
  620.     OPTION_VALUE.className = "option__value";
  621.     OPTION_VALUE.append(html);
  622.  
  623.     OPTION.append(OPTION_LABEL, OPTION_VALUE);
  624.  
  625.     if (isLast) {
  626.       OPTION.style.marginBottom = "10px";
  627.     }
  628.  
  629.     return OPTION;
  630.   }
  631.  
  632.   function initTheme(theme) {
  633.     const { values } = theme;
  634.     [
  635.       ...document
  636.         .querySelector("#dashboard__body")
  637.         .querySelectorAll(".option__value *"),
  638.     ].map((el) => el.setValue(values));
  639.  
  640.     localStorage.setItem("selected_theme", JSON.stringify(theme));
  641.   }
  642.  
  643.   function createBthTheme(text, color, data, isGlobal = true) {
  644.     const BUTTON = document.createElement("button");
  645.     BUTTON.className = "themes__theme";
  646.     BUTTON.style.backgroundColor = color;
  647.     BUTTON.innerText = text;
  648.     BUTTON.onclick = () => {
  649.       if (!data) {
  650.         initTheme(
  651.           JSON.parse(localStorage.getItem("users_themes")).find(
  652.             (el) => el.name === text
  653.           )
  654.         );
  655.       } else {
  656.         initTheme(data);
  657.       }
  658.     };
  659.  
  660.     if (!isGlobal) {
  661.       document.querySelector("#users-themes").append(BUTTON);
  662.       USERS_BUTTONS.push(BUTTON);
  663.     } else document.querySelector("#global-themes").append(BUTTON);
  664.  
  665.     return BUTTON;
  666.   }
  667.  
  668.   function createDashHeadBtn(text, color, onclick) {
  669.     const BUTTON = document.createElement("button");
  670.     BUTTON.className = "header__btn";
  671.     BUTTON.style.backgroundColor = color;
  672.     BUTTON.innerText = text;
  673.     BUTTON.onclick = onclick;
  674.  
  675.     document.querySelector("#dashboard__header").append(BUTTON);
  676.   }
  677.  
  678.   function saveTheme() {
  679.     const THEME_NAME = prompt("Write your theme name.");
  680.     if (!THEME_NAME) {
  681.       return alert("Invalid value!");
  682.     }
  683.     const THEME = {};
  684.     var USERS_THEMES = JSON.parse(localStorage.getItem("users_themes"));
  685.     if (!USERS_THEMES) {
  686.       USERS_THEMES = [];
  687.     }
  688.     const isAdded = USERS_THEMES.find((t) => t.name === THEME_NAME);
  689.     if (isAdded) {
  690.       if (
  691.         !confirm(
  692.           "There is already the theme with the same name, that one will be updated, are you sure?"
  693.         )
  694.       )
  695.         return;
  696.     }
  697.  
  698.     var THEME_COLOR = prompt(
  699.       "Write your theme button color (hex color system but without #) or you can leave the current color if you click on 'Cancel'.\nExample: 'ff00ff' - piink."
  700.     );
  701.     if (THEME_COLOR !== null) {
  702.       if (!/[a-f\d]{6}\b/i.test(THEME_COLOR)) {
  703.         return alert("Invalid value! (a-f, 0-9)");
  704.       }
  705.       THEME_COLOR += "e6";
  706.     }
  707.  
  708.     const VALUES = [
  709.       ...document
  710.         .querySelector("#dashboard__body")
  711.         .querySelectorAll(".option__value *"),
  712.     ].map((el) => el.getValue());
  713.  
  714.     if (!isAdded) {
  715.       THEME.name = THEME_NAME;
  716.       THEME.color = "#" + THEME_COLOR;
  717.       THEME.values = VALUES;
  718.       USERS_THEMES.push(THEME);
  719.       createBthTheme(THEME.name, THEME.color, THEME, false);
  720.     } else {
  721.       if (THEME_COLOR !== null) isAdded.color = THEME_COLOR;
  722.       isAdded.values = VALUES;
  723.       if (
  724.         !updateTheme(isAdded.name, isAdded.color, () => {
  725.           isAdded.values.map((v) => input.execute(v));
  726.         })
  727.       ) {
  728.         createBthTheme(
  729.           THEME.name,
  730.           THEME.color,
  731.           () => THEME.values.map((v) => input.execute(v)),
  732.           USERS_THEMES
  733.         );
  734.       }
  735.     }
  736.     localStorage.setItem("users_themes", JSON.stringify(USERS_THEMES));
  737.   }
  738.  
  739.   function updateTheme(name, new_color, new_onclick) {
  740.     const BUTTON = USERS_BUTTONS.find((btn) => btn.innerText === name);
  741.     if (!BUTTON) {
  742.       return false;
  743.     }
  744.  
  745.     BUTTON.innerText = name;
  746.     BUTTON.style.backgroundColor = new_color;
  747.     BUTTON.onclick = () => {
  748.       initTheme(
  749.         JSON.parse(localStorage.getItem("users_themes")).find(
  750.           (el) => el.name === name
  751.         )
  752.       );
  753.  
  754.       new_onclick();
  755.     };
  756.  
  757.     return true;
  758.   }
  759.   function deleteTheme() {
  760.     var USERS_THEMES = JSON.parse(localStorage.getItem("users_themes"));
  761.     const NAME = prompt("Write theme name.");
  762.  
  763.     const INDX = USERS_THEMES.findIndex((el) => el.name === NAME);
  764.     if (INDX < 0) {
  765.       return alert("Theme with a such name wasn't found!");
  766.     }
  767.     if (confirm("Are you sure?")) {
  768.       USERS_THEMES.splice(INDX, 1);
  769.       localStorage.setItem("users_themes", JSON.stringify(USERS_THEMES));
  770.  
  771.       const BUTTON = USERS_BUTTONS.find((btn) => btn.innerText === NAME);
  772.       if (BUTTON) {
  773.         BUTTON.remove();
  774.       }
  775.     }
  776.   }
  777.  
  778.   createDashHeadBtn("Save theme", "green", saveTheme);
  779.   createDashHeadBtn("Delete theme", "red", deleteTheme);
  780.  
  781.   createBthTheme("Classic", "a5a5a5e6", { name: "Classic", values: [] });
  782.   createBthTheme("Dark", "#222222e6", {
  783.     name: "Dark",
  784.     values: [
  785.       "ren_border_color 0x858585",
  786.       "ren_grid_color 0xffffff",
  787.       "ren_background_color 0x101010",
  788.     ],
  789.   });
  790.   createBthTheme("Arras", "#8bbe3de6", {
  791.     name: "Arras",
  792.     values: [
  793.       "ren_score_bar_fill_color 0x8abc3f",
  794.       "ren_xp_bar_fill_color 0xefc74b",
  795.       "net_replace_color 0 0x484848",
  796.       "net_replace_color 1 0xa7a7af",
  797.       "net_replace_color 2 0x3ca4cb",
  798.       "net_replace_color 3 0x3ca4cb",
  799.       "net_replace_color 4 0xe03e41",
  800.       "net_replace_color 5 0xcc669c",
  801.       "net_replace_color 6 0x8abc3f",
  802.       "net_replace_color 8 0xefc74b",
  803.       "net_replace_color 9 0xe7896d",
  804.       "net_replace_color 10 0x8d6adf",
  805.       "net_replace_color 11 0xef99c3",
  806.       "net_replace_color 12 0xfdf380",
  807.       "net_replace_color 14 0xa7a7af",
  808.       "net_replace_color 15 0xe03e41",
  809.       "net_replace_color 17 0x726f6f",
  810.     ],
  811.   });
  812.   createBthTheme("Neon", "#000000e6", {
  813.     name: "Neon",
  814.     values: [
  815.       "ren_stroke_soft_color_intensity -100",
  816.       "ren_solid_background true",
  817.       "ren_stroke_soft_color true",
  818.       "ren_background_color 0x000000",
  819.       "ren_border_color 0xFFFFFF",
  820.       "ren_border_alpha 100",
  821.       "net_replace_color 0 0xFFFFFF",
  822.       "net_replace_color 1 0x010101",
  823.       "net_replace_color 2 0x000102",
  824.       "net_replace_color 3 0x000102",
  825.       "net_replace_color 4 0x020000",
  826.       "net_replace_color 5 0x020002",
  827.       "net_replace_color 6 0x000200",
  828.       "net_replace_color 7 0x000100",
  829.       "net_replace_color 8 0x010101",
  830.       "net_replace_color 9 0x010101",
  831.       "net_replace_color 10 0x010101",
  832.       "net_replace_color 11 0x0e0e0e",
  833.       "net_replace_color 12 0x020200",
  834.       "net_replace_color 13 0x010101",
  835.       "net_replace_color 14 0x010101",
  836.       "net_replace_color 15 0x020000",
  837.       "net_replace_color 16 0x010200",
  838.       "net_replace_color 17 0x000202",
  839.     ],
  840.   });
  841.  
  842.   document.querySelector("#themes button").onclick = () =>
  843.     hideEl(document.querySelector("#main-content"));
  844.   document.querySelector("#main-content .themes__switcher").onclick = () =>
  845.     hideEl(document.querySelector("#users-themes"));
  846.  
  847.   document.addEventListener("keydown", (event) => {
  848.     if (["f", "а"].includes(event.key) && event.target == document.body) {
  849.       hideEl(DASHBOARD);
  850.     }
  851.   });
  852.  
  853.   setDrag(DASHBOARD, document.querySelector("#dashboard__header"));
  854.   DASHBOARD.append(
  855.     document.querySelector("#dashboard__header"),
  856.     document.querySelector("#dashboard__body")
  857.   );
  858.  
  859.   const checking = setInterval(() => {
  860.     try {
  861.       if (input) {
  862.         clearInterval(checking);
  863.  
  864.         init();
  865.       }
  866.     } catch (err) {}
  867.   }, 10);
  868. })();