Themes for Diep.io

Themes for diep.io is amazing tool for your style :)

当前为 2025-02-21 提交的版本,查看 最新版本

  1. // ==UserScript==
  2. // @name Themes for Diep.io
  3. // @version 2.1.1
  4. // @description Themes for diep.io is amazing tool for your style :)
  5. // @author @jaja.morgan
  6. // @match https://diep.io/*
  7. // @grant GM_addStyle
  8. // @license MIT
  9. // @namespace *://diep.io/
  10. // ==/UserScript==
  11.  
  12. GM_addStyle(`* {
  13. outline: none;
  14. margin: 0;
  15. }
  16. #modo {
  17. font-family: "Montserrat", sans-serif !important;
  18. font-size: 16px;
  19. position: relative;
  20. z-index: 777;
  21. }
  22. #modo #themes,
  23. #modo #dashboard {
  24. outline: none;
  25. padding: 10px 15px;
  26. border-radius: 6px;
  27. position: absolute;
  28.  
  29. border: 2px #00ffff solid;
  30. box-shadow: 4px 3px 20px 1px black;
  31. background: #25282b;
  32. opacity: 0.9;
  33.  
  34. color: white;
  35. }
  36. #modo .tool__header {
  37. cursor: move !important;
  38. display: flex;
  39. justify-content: center;
  40. position: relative;
  41. margin-bottom: 20px;
  42. text-align: center;
  43. font-weight: bold;
  44. }
  45. .tool__header h2 {
  46. font-size: 250%;
  47. }
  48. .tool__header span {
  49. display: inline-block;
  50. font-size: 75%;
  51. bottom: -15px;
  52. position: absolute;
  53. }
  54. /*
  55. *
  56. * THEMES MENU
  57. *
  58. */
  59. #themes {
  60. top: 25px;
  61. left: 10px;
  62. overflow-y: auto;
  63. overflow-x: hidden;
  64. max-width: 700px;
  65. padding: 150px 0px;
  66. border: 2px solid aqua;
  67. }
  68.  
  69. .themes__content {
  70. margin: 20px 0;
  71. width: 100%;
  72. max-height: 200px;
  73. overflow-y: auto;
  74. padding-right: 10px;
  75. }
  76. .themes__content::-webkit-scrollbar {
  77. width: 7.5px;
  78. }
  79. .themes__content::-webkit-scrollbar-track {
  80. background-color: aqua;
  81. border-radius: 5px;
  82. }
  83. .themes__content::-webkit-scrollbar-thumb {
  84. background-color: #070707;
  85. border-radius: 3px;
  86. }
  87. .theme {
  88. position: relative;
  89. box-sizing: border-box;
  90. display: flex;
  91. justify-content: space-between;
  92. align-items: center;
  93. padding: 0px 10px;
  94. }
  95. .theme .theme__name {
  96. cursor: pointer;
  97. word-wrap: break-word;
  98. word-break: normal;
  99. padding: 10px 0;
  100. width: 150px;
  101. }
  102.  
  103. .theme.editing,
  104. .theme.editing.activated {
  105. background-color: rgba(255, 166, 0, 0.5);
  106. }
  107. .theme.activated {
  108. background-color: rgba(0, 255, 0, 0.53);
  109. }
  110.  
  111. .theme:hover:not(.activated, .editing) {
  112. transition-duration: 0.25s;
  113. background-color: rgba(255, 255, 255, 0.1);
  114. }
  115. .theme button {
  116. padding: 0px 10px;
  117. font-weight: bold;
  118. border: none;
  119. color: white;
  120. height: 25px;
  121. cursor: pointer;
  122. }
  123. .theme button:hover {
  124. filter: brightness(80%);
  125. }
  126. button.copy {
  127. margin-right: 10px;
  128. background: purple;
  129. }
  130. button.edit {
  131. margin-right: 10px;
  132. background: rgb(240, 204, 0);
  133. }
  134. button.delete {
  135. background: red;
  136. }
  137. .container-btns {
  138. text-align: center;
  139. display: flex;
  140. justify-content: space-around;
  141. align-items: center;
  142. }
  143. #themes > .container-btns {
  144. cursor: move;
  145. padding: 0 25px;
  146. }
  147. #dashboard > .container-btns {
  148. cursor: move;
  149. }
  150. .container-btns .green {
  151. padding: 10px 15px;
  152. cursor: pointer;
  153. font-size: 105%;
  154. outline: none;
  155. font-weight: bold;
  156. background: transparent;
  157. border: 1px solid rgb(0, 237, 0);
  158. color: rgb(0, 237, 0);
  159. transition: 1s cubic-bezier(0.075, 0.82, 0.165, 1);
  160. }
  161. .container-btns .green:hover {
  162. color: #070707;
  163. background: rgb(0, 237, 0);
  164. transition: 1s cubic-bezier(0.075, 0.82, 0.165, 1);
  165. }
  166. .container-btns .purple {
  167. padding: 10px 25px;
  168. cursor: pointer;
  169. font-size: 105%;
  170. outline: none;
  171. font-weight: bold;
  172. background: transparent;
  173. border: 1px solid purple;
  174. color: purple;
  175. transition: 1s cubic-bezier(0.075, 0.82, 0.165, 1);
  176. }
  177. .container-btns .purple:hover {
  178. color: #070707;
  179. background: purple;
  180. transition: 1s cubic-bezier(0.075, 0.82, 0.165, 1);
  181. }
  182. .container-btns .red {
  183. padding: 10px 25px;
  184. cursor: pointer;
  185. font-size: 105%;
  186. outline: none;
  187. font-weight: bold;
  188. background: transparent;
  189. border: 1px solid rgb(237, 0, 0);
  190. color: rgb(237, 0, 0);
  191. transition: 1s cubic-bezier(0.075, 0.82, 0.165, 1);
  192. }
  193. .container-btns .red:hover {
  194. color: #070707;
  195. background: rgb(237, 0, 0);
  196. transition: 1s cubic-bezier(0.075, 0.82, 0.165, 1);
  197. }
  198. /*
  199. *
  200. * DASHBOARD
  201. *
  202. */
  203. #dashboard {
  204. top: 25px;
  205. right: 25px;
  206. width: 444px;
  207. font-size: 20px;
  208. }
  209.  
  210. #dashboard * {
  211. font-weight: 600;
  212. }
  213.  
  214. #dashboard input {
  215. outline: none;
  216. border: none;
  217. margin: 0;
  218. padding: 0;
  219. cursor: pointer;
  220. }
  221.  
  222. #dashboard input[type="color"],
  223. #dashboard input[type="checkbox"] {
  224. background: rgba(0, 0, 0, 0);
  225. }
  226. #dashboard ::-webkit-color-swatch {
  227. border-radius: 50%;
  228. }
  229. #dashboard input[type="checkbox"] {
  230. margin-top: 3px;
  231. }
  232.  
  233. #dashboard input[type="number"] {
  234. text-align: center;
  235. width: 75px;
  236. height: 10px;
  237. border: rgba(0, 0, 0, 0) 2px solid;
  238. color: white;
  239. background: black;
  240. padding: 3px 0px 3px 10px;
  241. border-radius: 25px;
  242. transition: border-color 0.3s;
  243. }
  244.  
  245. #dashboard input[type="number"]:hover,
  246. #dashboard input[type="number"]:focus {
  247. border: #00ffffbf 2px solid;
  248. }
  249.  
  250. #dashboard input::-webkit-color-swatch-wrapper {
  251. margin-top: 2px;
  252. outline: none;
  253. padding: 0;
  254. }
  255. .dashboard__content {
  256. max-height: 500px;
  257. margin-bottom: 15px;
  258. overflow-y: auto;
  259. overflow-x: hidden;
  260. }
  261. .dashboard__content::-webkit-scrollbar {
  262. width: 7.5px;
  263. }
  264.  
  265. .dashboard__content::-webkit-scrollbar-track {
  266. background: #00ffff;
  267. border-radius: 5px;
  268. }
  269. .dashboard__content::-webkit-scrollbar-thumb {
  270. background: #070707;
  271. border-radius: 3px;
  272. }
  273.  
  274. .content__section {
  275. margin: 5px 5px 10px 5px;
  276. }
  277. .section__options {
  278. margin-left: 20px;
  279. font-size: 75%;
  280. }
  281. .section__header {
  282. position: relative;
  283. cursor: pointer;
  284. user-select: none;
  285. font-size: 110%;
  286. display: inline-block;
  287. margin-left: 25px;
  288. margin-bottom: 5px;
  289. font-weight: bold;
  290. }
  291. .section__header::before {
  292. left: -20px;
  293. position: absolute;
  294. content: ">";
  295. transform: rotate(90deg);
  296. }
  297. .section__header.hidden::before {
  298. content: ">";
  299. transform: rotate(0deg);
  300. }
  301. .section__option {
  302. height: 25px;
  303. width: 300px;
  304. padding: 5px 300px 0px 15px;
  305. border-left: 3px #255cd8 solid;
  306. transition: 0.2s;
  307. }
  308. .section__option span {
  309. margin-right: 5px;
  310. }
  311.  
  312. .section__option input[type="color"] {
  313. width: 15px;
  314. height: 15px;
  315. border: none;
  316. padding: 0;
  317. }
  318.  
  319. .section__option:hover {
  320. background: #ffffff12;
  321. }
  322.  
  323. .section__option:focus-within {
  324. background: #ffffff26;
  325. border-left: 3px orange solid;
  326. }
  327. .option__value {
  328. float: right;
  329. display: inline-block;
  330. }
  331. .option__label {
  332. user-select: none;
  333. display: inline-block;
  334. }
  335.  
  336. #dashboard .ct {
  337. padding: 10px 100px;
  338. }
  339.  
  340. .header__btn {
  341. outline: none;
  342. border: none;
  343.  
  344. padding: 10px 20px;
  345. cursor: pointer;
  346. color: white;
  347.  
  348. font-weight: bold;
  349.  
  350. transition-property: background-color;
  351. transition-duration: 0.3s;
  352. }
  353.  
  354. .header__btn:hover {
  355. background-color: rgba(0, 0, 0, 0.33) !important;
  356. }
  357.  
  358. #db_switcher::after,
  359. #db_switcher::before {
  360. content: " - ";
  361. }
  362. #db_switcher.hidden::after,
  363. #db_switcher.hidden::before {
  364. content: " + ";
  365. }
  366. `);
  367.  
  368. let editing;
  369. let selected;
  370. let cache = {};
  371.  
  372. const modo = document.createElement("div");
  373. modo.id = "modo";
  374. modo.style.display = "none";
  375. modo.innerHTML = `
  376. <div id="themes">
  377. <div class="tool__header">
  378. <h2 class="">Themes menu</h2>
  379. </div>
  380. <div class="themes__content"></div>
  381. <div class="container-btns"><button class="green">Create theme</button>
  382. <span>or</span>
  383. <button class="purple">Import</button></div>
  384. </div>
  385.  
  386. <div id="dashboard">
  387. <div class="tool__header">
  388. <h2>Dashboard</h2>
  389. <span></span>
  390. </div>
  391. <div class="dashboard__content"></div>
  392. <div class="container-btns">
  393. <button class="green">Save</button>
  394. <button class="red">Close</button>
  395. </div>
  396. </div>
  397. `;
  398. document.body.append(modo);
  399.  
  400. const logo = document.createElement("span");
  401. logo.style =
  402. "z-index:100;position: absolute; top:0; left: 75px; color: #ffffff69; font-size:15px";
  403. logo.innerText = "Themes for diep.io :)";
  404. document.body.append(logo);
  405.  
  406. const MENU_CONTENT = document.getElementsByClassName("themes__content")[0];
  407. const THEMES = document.getElementById("themes");
  408. const DASHBOARD = document.getElementById("dashboard");
  409. DASHBOARD.style.display = "none";
  410. DASHBOARD.setValues = (values) => {
  411. [
  412. ...document
  413. .querySelector(".dashboard__content")
  414. .querySelectorAll(".option__value *"),
  415. ].map((el) => el.setValue(values));
  416. };
  417. DASHBOARD.getValues = () => {
  418. return [
  419. ...document
  420. .querySelector(".dashboard__content")
  421. .querySelectorAll(".option__value *"),
  422. ].map((el) => el.getValue());
  423. };
  424. DASHBOARD.context = {
  425. type: null,
  426. theme: null,
  427. };
  428.  
  429. class ThemeBtn {
  430. constructor(parentTheme, type, name, parent) {
  431. this.el = document.createElement("button");
  432. this.el.className = type;
  433. this.parentTheme = parentTheme;
  434.  
  435. if (type == "edit") {
  436. this.el.innerText = "Edit";
  437. this.el.onclick = () => {
  438. if (editing) editing.classList.remove("editing");
  439. editing = this.parentTheme.el;
  440. editing.classList.add("editing");
  441. callDashboard("edit", parentTheme);
  442. cache = getUserData();
  443. };
  444. } else if (type == "copy") {
  445. this.el.innerText = "Copy";
  446. this.el.onclick = () => {
  447. navigator.clipboard.writeText(
  448. JSON.stringify({ [`${name}`]: getUserData()[`${name}`] })
  449. );
  450. };
  451. } else {
  452. this.el.innerText = "Delete";
  453. this.el.onclick = () => {
  454. if (confirm("Are you sure? The theme will be deleted.")) {
  455. let db = getUserData();
  456. delete db[`${name}`];
  457. localStorage.setItem("users_themes", JSON.stringify(db));
  458. parentTheme.el.remove();
  459. cache = getUserData();
  460. }
  461. };
  462. }
  463. parent.append(this.el);
  464. }
  465. }
  466. class Theme {
  467. constructor(name, data) {
  468. this.el = document.createElement("div");
  469. this.el.className = "theme";
  470. this.data = data;
  471. this.name = name;
  472.  
  473. this.label = document.createElement("div");
  474. this.label.className = "theme__name";
  475. this.label.innerText = name;
  476.  
  477. this.label.onclick = () => {
  478. if (selected) selected.classList.remove("activated");
  479.  
  480. DASHBOARD.setValues(this.data);
  481. selected = this.el;
  482. localStorage.setItem("selected_theme", JSON.stringify(this.name));
  483. selected.classList.add("activated");
  484. };
  485.  
  486. this.el.append(this.label);
  487. let contBtn = document.createElement("div");
  488. contBtn.className = "container-btns";
  489. new ThemeBtn(this, "copy", this.name, contBtn);
  490. new ThemeBtn(this, "edit", this.name, contBtn);
  491. new ThemeBtn(this, "delete", this.name, contBtn);
  492.  
  493. this.el.append(contBtn);
  494. MENU_CONTENT.append(this.el);
  495. cache = getUserData();
  496. }
  497. editData(values) {
  498. let db = getUserData();
  499. db[`${this.name}`] = values;
  500. localStorage.setItem("users_themes", JSON.stringify(db));
  501. this.data = values;
  502. cache = getUserData();
  503. }
  504. }
  505.  
  506. class Input {
  507. constructor(default_, cmd, isLast = false) {
  508. this.default = default_;
  509. this.cmd = cmd;
  510. this.el = document.createElement("input");
  511. this.isLast = isLast;
  512. }
  513. }
  514.  
  515. class ColorInput extends Input {
  516. constructor(default_, cmd, isLast) {
  517. super(default_, cmd, isLast);
  518. this.el.type = "color";
  519. this.el.value = this.default;
  520.  
  521. this.el.oninput = () => {
  522. input.execute(`${this.cmd}${this.el.value.slice(1)}`);
  523. };
  524. this.el.getValue = () => {
  525. return `${this.cmd}${this.el.value.slice(1)}`;
  526. };
  527. this.el.setValue = (values) => {
  528. let found = false;
  529. for (let value of values) {
  530. if (value.includes(this.cmd)) {
  531. found = true;
  532. const RE = new RegExp(this.cmd);
  533. const value_ = value.replace(RE, "");
  534. this.el.value = "#" + value_;
  535. break;
  536. }
  537. }
  538. if (!found) this.el.value = this.default;
  539. this.el.oninput();
  540. };
  541. }
  542. }
  543.  
  544. class CheckBoxInput extends Input {
  545. constructor(default_, cmd, isLast) {
  546. super(default_, cmd, isLast);
  547. this.el.type = "checkbox";
  548. this.el.checked = this.default;
  549.  
  550. this.el.oninput = () => {
  551. input.execute(`${this.cmd}${this.el.checked}`);
  552. };
  553. this.el.getValue = () => {
  554. return `${this.cmd}${this.el.checked}`;
  555. };
  556. this.el.setValue = (values) => {
  557. let found = false;
  558. for (let value of values) {
  559. if (value.includes(this.cmd)) {
  560. found = true;
  561. const RE = new RegExp(this.cmd);
  562. const value_ = value.replace(RE, "");
  563. if (value_ === "true") {
  564. this.el.checked = true;
  565. } else {
  566. this.el.checked = false;
  567. }
  568. break;
  569. }
  570. }
  571. if (!found) this.el.checked = this.default;
  572. this.el.oninput();
  573. };
  574. }
  575. }
  576.  
  577. class NumberInput extends Input {
  578. constructor(default_, cmd, step, min, max, isLast) {
  579. super(default_, cmd, isLast);
  580. this.el.type = "number";
  581. this.el.value = this.default;
  582. this.el.step = step;
  583. this.el.min = min;
  584. this.el.max = max;
  585.  
  586. this.el.oninput = () => {
  587. input.execute(`${this.cmd}${this.el.value}`);
  588. };
  589. this.el.getValue = () => {
  590. return `${this.cmd}${this.el.value}`;
  591. };
  592. this.el.setValue = (values) => {
  593. let found = false;
  594. for (let value of values) {
  595. if (value.includes(this.cmd)) {
  596. found = true;
  597. const RE = new RegExp(this.cmd);
  598. this.el.value = value.replace(RE, "");
  599. break;
  600. }
  601. }
  602. if (!found) this.el.value = this.default;
  603. this.el.oninput();
  604. };
  605. }
  606. }
  607.  
  608. function callDashboard(type, theme) {
  609. DASHBOARD.style.display = "block";
  610. DASHBOARD.context.type = type;
  611. DASHBOARD.context.theme = theme;
  612. DASHBOARD.setValues(theme.data);
  613.  
  614. let header = DASHBOARD.querySelector("div span");
  615. header.innerText = `editing "${theme.name}"`;
  616.  
  617. console.log(DASHBOARD.context);
  618. }
  619. function saveTheme(type, theme) {
  620. var db = getUserData();
  621. var values = [];
  622. var name = "";
  623. if (!db) db = [];
  624.  
  625. if (type == "create") {
  626. name = prompt("Enter the name of this theme.");
  627. if (!name) {
  628. alert("ERR: Invalid volume!");
  629. return false;
  630. }
  631. if (name.length > 25) {
  632. alert("ERR: Invalid length name (must be 25-)!");
  633. return false;
  634. }
  635.  
  636. for (let t in db)
  637. if (t == name)
  638. return alert("ERR: There is already a theme with the same name!");
  639.  
  640. values = DASHBOARD.getValues();
  641. db[`${name}`] = values;
  642. localStorage.setItem("users_themes", JSON.stringify(db));
  643.  
  644. new Theme(name, values);
  645. hideEl(DASHBOARD);
  646. } else if (type == "edit") {
  647. if (confirm("Are you sure? The theme will be overwritten.")) {
  648. values = DASHBOARD.getValues();
  649. theme.editData(values);
  650. if (editing) editing.classList.remove("editing");
  651. hideEl(DASHBOARD);
  652. }
  653. }
  654. backToSTheme();
  655. cache = getUserData();
  656. }
  657.  
  658. function hideEl(el) {
  659. if (el.style.display != "none") {
  660. el.style.display = "none";
  661. } else {
  662. el.style.display = "";
  663. }
  664. }
  665. function setDrag(el, el_child, lsName) {
  666. var newPosX = 0,
  667. newPosY = 0,
  668. MousePosX = 0,
  669. MousePosY = 0;
  670. if (el_child) {
  671. el_child.forEach((e) => e.addEventListener("mousedown", MouseDown));
  672. } else el.addEventListener("mousedown", MouseDown);
  673.  
  674. function MouseDown(mouseDown) {
  675. MousePosX = mouseDown.pageX;
  676. MousePosY = mouseDown.pageY;
  677.  
  678. el.classList.add("dragableging");
  679. document.addEventListener("mousemove", elementMove);
  680. document.addEventListener("mouseup", stopElementMove);
  681. }
  682.  
  683. function elementMove(mouseMove) {
  684. newPosX = MousePosX - mouseMove.pageX;
  685. newPosY = MousePosY - mouseMove.pageY;
  686. MousePosX = mouseMove.pageX;
  687. MousePosY = mouseMove.pageY;
  688.  
  689. el.style.top = el.offsetTop - newPosY + "px";
  690. el.style.left = el.offsetLeft - newPosX + "px";
  691. }
  692.  
  693. function stopElementMove() {
  694. localStorage.setItem(
  695. lsName,
  696. JSON.stringify({
  697. x: el.offsetLeft - newPosX + "px",
  698. y: el.offsetTop - newPosY + "px",
  699. })
  700. );
  701. el.classList.remove("dragableging");
  702.  
  703. document.removeEventListener("mousemove", elementMove);
  704. document.removeEventListener("mouseup", stopElementMove);
  705. }
  706. }
  707. function importJSON(text) {
  708. let data;
  709. let uDb = getUserData();
  710.  
  711. try {
  712. console.log(text);
  713. data = JSON.parse(text);
  714.  
  715. for (let theme in data) {
  716. if (theme.length > 25) new Error("Incorrect name.");
  717. for (let el of [...THEMES.getElementsByClassName("theme__name")]) {
  718. if (el.innerText === theme) {
  719. if (confirm(`${theme} will be overwrriten, are you sure?`)) {
  720. el.parentElement.remove();
  721. } else return;
  722. }
  723. }
  724.  
  725. new Theme(theme, data[`${theme}`]);
  726. uDb[`${theme}`] = data[`${theme}`];
  727. }
  728. } catch (err) {
  729. return alert("Something went wrong...");
  730. }
  731. localStorage.setItem("users_themes", JSON.stringify(uDb));
  732. }
  733.  
  734. function init() {
  735. if (!JSON.parse(localStorage.getItem("cho"))) {
  736. alert("Press 'r' to show or hide menu in game.");
  737. setTimeout(() => alert("Please dont forget to send feedback :v"), 30000);
  738. localStorage.setItem("cho", "1");
  739. localStorage.setItem(
  740. "users_themes",
  741. JSON.stringify({
  742. classic: [],
  743. dark: [
  744. "ren_border_color 0x858585",
  745. "ren_grid_color 0xffffff",
  746. "ren_background_color 0x101010",
  747. ],
  748. arras: [
  749. "ren_score_bar_fill_color 0x8abc3f",
  750. "ren_xp_bar_fill_color 0xefc74b",
  751. "net_replace_color 0 0x484848",
  752. "net_replace_color 1 0xa7a7af",
  753. "net_replace_color 2 0x3ca4cb",
  754. "net_replace_color 3 0x3ca4cb",
  755. "net_replace_color 4 0xe03e41",
  756. "net_replace_color 5 0xcc669c",
  757. "net_replace_color 6 0x8abc3f",
  758. "net_replace_color 8 0xefc74b",
  759. "net_replace_color 9 0xe7896d",
  760. "net_replace_color 10 0x8d6adf",
  761. "net_replace_color 11 0xef99c3",
  762. "net_replace_color 12 0xfdf380",
  763. "net_replace_color 14 0xa7a7af",
  764. "net_replace_color 15 0xe03e41",
  765. "net_replace_color 17 0x726f6f",
  766. ],
  767. neon: [
  768. "ren_stroke_soft_color_intensity -100",
  769. "ren_solid_background true",
  770. "ren_stroke_soft_color true",
  771. "ren_background_color 0x000000",
  772. "ren_border_color 0xFFFFFF",
  773. "ren_border_alpha 100",
  774. "net_replace_color 0 0xFFFFFF",
  775. "net_replace_color 1 0x010101",
  776. "net_replace_color 2 0x000102",
  777. "net_replace_color 3 0x000102",
  778. "net_replace_color 4 0x020000",
  779. "net_replace_color 5 0x020002",
  780. "net_replace_color 6 0x000200",
  781. "net_replace_color 7 0x000100",
  782. "net_replace_color 8 0x010101",
  783. "net_replace_color 9 0x010101",
  784. "net_replace_color 10 0x010101",
  785. "net_replace_color 11 0x0e0e0e",
  786. "net_replace_color 12 0x020200",
  787. "net_replace_color 13 0x010101",
  788. "net_replace_color 14 0x010101",
  789. "net_replace_color 15 0x020000",
  790. "net_replace_color 16 0x010200",
  791. "net_replace_color 17 0x000202",
  792. ],
  793. })
  794. );
  795. }
  796. window.addEventListener("keydown", (event) => {
  797. if (["r", "R", "к", "К"].includes(event.key)) {
  798. hideEl(modo);
  799. }
  800. });
  801. document.getElementsByClassName("green")[0].onclick = () => {
  802. callDashboard("create", { name: "new theme", data: [] });
  803. };
  804. document.getElementsByClassName("green")[1].onclick = () => {
  805. saveTheme(DASHBOARD.context.type, DASHBOARD.context.theme);
  806. };
  807. document.getElementsByClassName("purple")[0].onclick = () => {
  808. importJSON(prompt("Please paste here copied theme."));
  809. };
  810. document.getElementsByClassName("red")[0].onclick = () => {
  811. if (confirm("Are you sure? The changes are unsaved!")) {
  812. hideEl(DASHBOARD);
  813. backToSTheme();
  814. if (editing) editing.classList.remove("editing");
  815. let header = DASHBOARD.querySelector("div span");
  816. header.innerText = ``;
  817. }
  818. };
  819.  
  820. setDrag(
  821. document.querySelector("#dashboard"),
  822. [
  823. document.querySelector("#dashboard .tool__header"),
  824. document.querySelector("#dashboard > .container-btns"),
  825. ],
  826. "dashboardPos"
  827. );
  828. setDrag(
  829. document.querySelector("#themes"),
  830. [
  831. document.querySelector("#themes .tool__header"),
  832. document.querySelector("#themes > .container-btns"),
  833. ],
  834. "themesPos"
  835. );
  836.  
  837. function addSection(header, options) {
  838. const SECTION = document.createElement("div");
  839. SECTION.className = "content__section";
  840.  
  841. SECTION.append(header, options);
  842. document.getElementsByClassName("dashboard__content")[0].append(SECTION);
  843. }
  844.  
  845. function createHeader(text) {
  846. const HEADER = document.createElement("div");
  847. HEADER.className = "section__header";
  848. HEADER.innerText = text;
  849.  
  850. HEADER.onclick = function () {
  851. const OPTIONS = HEADER.parentElement.querySelector(".section__options");
  852. if (OPTIONS) {
  853. if (OPTIONS.style.display != "none") {
  854. HEADER.classList.add("hidden");
  855. OPTIONS.style.display = "none";
  856. } else {
  857. HEADER.classList.remove("hidden");
  858. OPTIONS.style.display = "";
  859. }
  860. }
  861. };
  862. return HEADER;
  863. }
  864.  
  865. function createOption(text, html, isLast = false) {
  866. const OPTION = document.createElement("div");
  867. OPTION.className = "section__option";
  868.  
  869. const OPTION_LABEL = document.createElement("span");
  870. OPTION_LABEL.className = "option__label";
  871. OPTION_LABEL.innerText = text;
  872.  
  873. const OPTION_VALUE = document.createElement("div");
  874. OPTION_VALUE.className = "option__value";
  875. OPTION_VALUE.append(html);
  876.  
  877. OPTION.append(OPTION_LABEL, OPTION_VALUE);
  878.  
  879. if (isLast) {
  880. OPTION.style.marginBottom = "10px";
  881. }
  882.  
  883. return OPTION;
  884. }
  885.  
  886. const DB_OBJECT = {
  887. "Global colors": {
  888. "Map background": new ColorInput("#cdcdcd", "ren_background_color 0x"),
  889. "Map border": new ColorInput("#000000", "ren_border_color 0x"),
  890. "Map border alpha": new NumberInput(
  891. 0.1,
  892. "ren_border_color_alpha ",
  893. 0.01,
  894. 0,
  895. 1
  896. ),
  897. "Map grid": new ColorInput("#000000", "ren_grid_color 0x"),
  898. "Map grid alpha": new NumberInput(
  899. 0.1,
  900. "ren_grid_base_alpha ",
  901. 0.01,
  902. 0,
  903. 1,
  904. true
  905. ),
  906. "Minimap background": new ColorInput(
  907. "#cdcdcd",
  908. "ren_minimap_background_color 0x"
  909. ),
  910. "Minimap border": new ColorInput(
  911. "#555555",
  912. "ren_minimap_border_color 0x",
  913. true
  914. ),
  915. "Soft colors": new CheckBoxInput(true, "ren_stroke_soft_color "),
  916. "Soft stroke intensity": new NumberInput(
  917. 0.25,
  918. "ren_stroke_soft_color_intensity ",
  919. 0.05,
  920. null,
  921. 1,
  922. true
  923. ),
  924.  
  925. Squares: new ColorInput("#ffe869", "net_replace_color 8 0x"),
  926. Triangles: new ColorInput("#fc7677", "net_replace_color 9 0x"),
  927. Pentagons: new ColorInput("#768dfc", "net_replace_color 10 0x"),
  928. "Shiny poligons": new ColorInput(
  929. "#89ff69",
  930. "net_replace_color 7 0x",
  931. true
  932. ),
  933. Crashers: new ColorInput("#ff77dc", "net_replace_color 11 0x"),
  934. "Neutral team": new ColorInput("#ffe869", "net_replace_color 12 0x"),
  935. "Fallen Bosses": new ColorInput(
  936. "#c0c0c0",
  937. "net_replace_color 17 0x",
  938. true
  939. ),
  940. "Health bar": new ColorInput("#85e37d", "ren_health_fill_color 0x"),
  941. "Health bar background": new ColorInput(
  942. "#555555",
  943. "ren_health_background_color 0x"
  944. ),
  945. "EXP bar": new ColorInput("#ffde43", "ren_xp_bar_fill_color 0x"),
  946. "Score bar": new ColorInput("#43ff91", "ren_score_bar_fill_color 0x"),
  947. "EXP/Score/Scoreboard backgrounds": new ColorInput(
  948. "#000000",
  949. "ren_bar_background_color 0x",
  950. true
  951. ),
  952. "Barrels & etc": new ColorInput("#999999", "net_replace_color 1 0x"),
  953. "Smasher & dominator bases": new ColorInput(
  954. "#555555",
  955. "net_replace_color 0 0x"
  956. ),
  957. },
  958. "TDM colors": {
  959. "Blue team": new ColorInput("#00b1de", "net_replace_color 3 0x"),
  960. "Red Team": new ColorInput("#f14e54", "net_replace_color 4 0x"),
  961. "Purple team": new ColorInput("#be7ff5", "net_replace_color 5 0x"),
  962. "Green team": new ColorInput("#00f46c", "net_replace_color 6 0x"),
  963. },
  964. "FFA colors": {
  965. "Your body": new ColorInput("#00b1de", "net_replace_color 2 0x"),
  966. "Enemies' bodies": new ColorInput("#f14e56", "net_replace_color 15 0x"),
  967. "Summoned squares": new ColorInput("#fbc477", "net_replace_color 16 0x"),
  968. "Maze walls": new ColorInput("#bbbbbb", "net_replace_color 14 0x"),
  969. "Scoreboard bar": new ColorInput("#44ffa0", "net_replace_color 13 0x"),
  970. },
  971. Other: {
  972. FPS: new CheckBoxInput(false, "ren_fps "),
  973. "Players' names": new CheckBoxInput(true, "ren_names "),
  974. "Health bar": new CheckBoxInput(true, "ren_health_bars "),
  975. "Show health bar values": new CheckBoxInput(
  976. false,
  977. "ren_raw_health_values "
  978. ),
  979. "Scoreboar names": new CheckBoxInput(true, "ren_scoreboard_names "),
  980. Scoreboard: new CheckBoxInput(true, "ren_scoreboard "),
  981. "Minimap viewport": new CheckBoxInput(false, "ren_minimap_viewport "),
  982. UI: new CheckBoxInput(true, "ren_ui "),
  983. //"UI scale": new NumberInput(1, "ren_ui_scale ", 0.01, 0, null, true),
  984.  
  985. "Pattern grid": new CheckBoxInput(true, "ren_pattern_grid "),
  986. "Debug collisions": new CheckBoxInput(false, "ren_debug_collisions "),
  987. },
  988. };
  989.  
  990. for (let ctg in DB_OBJECT) {
  991. const HEADER = createHeader(ctg);
  992. const OPTIONS = document.createElement("div");
  993. OPTIONS.className = "section__options";
  994.  
  995. for (let opt in DB_OBJECT[ctg]) {
  996. const OPT_OBJECT = DB_OBJECT[ctg][opt];
  997. OPTIONS.append(createOption(opt, OPT_OBJECT.el, OPT_OBJECT.isLast));
  998. }
  999.  
  1000. addSection(HEADER, OPTIONS);
  1001. }
  1002.  
  1003. let uDb = getUserData();
  1004. const selected = JSON.parse(localStorage.getItem("selected_theme"));
  1005. for (let t in uDb) {
  1006. let theme = uDb[`${t}`];
  1007. let sTheme = new Theme(t, theme);
  1008. if (!!selected) {
  1009. if (sTheme.name == selected) {
  1010. sTheme.label.onclick();
  1011. DASHBOARD.setValues(cache[`${selected}`]);
  1012. }
  1013. }
  1014. }
  1015.  
  1016. const dashboardPos = JSON.parse(localStorage.getItem("dashboardPos"));
  1017. const themesPos = JSON.parse(localStorage.getItem("themesPos"));
  1018. if (!!dashboardPos) {
  1019. DASHBOARD.style.left = dashboardPos.x;
  1020. DASHBOARD.style.top = dashboardPos.y;
  1021. }
  1022. if (!!themesPos) {
  1023. THEMES.style.left = themesPos.x;
  1024. THEMES.style.top = themesPos.y;
  1025. }
  1026. }
  1027.  
  1028. function backToSTheme() {
  1029. DASHBOARD.setValues(
  1030. cache[`${JSON.parse(localStorage.getItem("selected_theme"))}`]
  1031. );
  1032. }
  1033. function getUserData() {
  1034. return JSON.parse(localStorage.getItem("users_themes"));
  1035. }
  1036.  
  1037. const checking = setInterval(() => {
  1038. try {
  1039. if (input) {
  1040. clearInterval(checking);
  1041. init();
  1042. }
  1043. } catch (err) {}
  1044. }, 10);
  1045.  
  1046. Event.prototype.preventDefault = function () {
  1047. this.defaultPrevented = false;
  1048. };