☰

Themes for Diep.io

It's a piece of a great pack of tools (POTD) to edit diep.io.

当前为 2022-01-21 提交的版本，查看 最新版本。

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