☰

Diep.style

Press Esc twice to toggle the menu,and save the setting

当前为 2021-10-05 提交的版本，查看 最新版本。

  1. // ==UserScript==
  2. // @name         Diep.style
  3. // @namespace    https://www.reddit.com/r/Diepio/comments/5y1np1/diepstyle_plugin/
  4. // @version      0.097
  5. // @description  Press Esc twice to toggle the menu,and save the setting
  6. // @author       sbk2015
  7. // @match        https://*diep.io/*
  8. // @grant        none
  9. // @run-at       document-idle
  10.  
  11. // ==/UserScript==
  12.  
  13. (function () {
  14.   "use strict";
  15.   var localStorage;
  16.   var saveList;
  17.   var nowSetting;
  18.   var isLocal;
  19.   var clone;
  20.   jsInit();
  21.   setTimeout(pluginInit, 2000);
  22.  
  23.   function jsInit() {
  24.     Storage.prototype.setObject = function (key, value) {
  25.       this.setItem(key, JSON.stringify(value));
  26.     };
  27.     Storage.prototype.getObject = function (key) {
  28.       var value = this.getItem(key);
  29.       return value && JSON.parse(value);
  30.     };
  31.     clone = function (obj) {
  32.       return JSON.parse(JSON.stringify(obj));
  33.     };
  34.     window.diepStyle = {};
  35.     localStorage = window.localStorage;
  36.     if (location.href.indexOf("file://") >= 0) {
  37.       var warning = false;
  38.       warning ? "" : console.warn("off warning");
  39.       isLocal = true;
  40.       window.input = {
  41.         set_convar: function () {
  42.           warning ? console.warn("block input.set_convar") : "";
  43.         },
  44.         execute: function () {
  45.           warning ? console.warn("block input.set_execute") : "";
  46.         },
  47.       };
  48.     }
  49.   }
  50.  
  51.   function pluginInit() {
  52.     storageInit();
  53.     keyListen();
  54.     tempInit();
  55.     styleInit();
  56.     diepStyle.onColor = onColor;
  57.     diepStyle.storageInit = storageInit;
  58.     //togglePanel(true);
  59.  
  60.     function storageInit(cmd) {
  61.       var th = 50,
  62.         netTH = 110;
  63.       var colors = [
  64.         {
  65.           id: 2,
  66.           name: "You FFA",
  67.           color: "00b1de",
  68.         },
  69.         {
  70.           id: 15,
  71.           name: "Other FFA",
  72.           color: "f14e54",
  73.         },
  74.         {
  75.           id: 3,
  76.           name: "Blue Team",
  77.           color: "00b1de",
  78.         },
  79.         {
  80.           id: 4,
  81.           name: "Red Team",
  82.           color: "f14e54",
  83.         },
  84.         {
  85.           id: 5,
  86.           name: "Purple Team",
  87.           color: "bf7ff5",
  88.         },
  89.         {
  90.           id: 6,
  91.           name: "Green Team",
  92.           color: "00e16e",
  93.         },
  94.         {
  95.           id: 17,
  96.           name: "Fallen team",
  97.           color: "c6c6c6",
  98.         },
  99.         {
  100.           id: 12,
  101.           name: "Arena Closer",
  102.           color: "ffe869",
  103.         },
  104.         {
  105.           id: 8,
  106.           name: "Square",
  107.           color: "ffe869",
  108.         },
  109.         {
  110.           id: 7,
  111.           name: "Green Square?",
  112.           color: "89ff69",
  113.         },
  114.         {
  115.           id: 16,
  116.           name: "Necro Square",
  117.           color: "fcc376",
  118.         },
  119.         {
  120.           id: 9,
  121.           name: "Triangle",
  122.           color: "fc7677",
  123.         },
  124.         {
  125.           id: 10,
  126.           name: "Pentagon",
  127.           color: "768dfc",
  128.         },
  129.         {
  130.           id: 11,
  131.           name: "Crasher",
  132.           color: "f177dd",
  133.         },
  134.         {
  135.           id: 14,
  136.           name: "Waze Wall",
  137.           color: "bbbbbb",
  138.         },
  139.         {
  140.           id: 1,
  141.           name: "Turret",
  142.           color: "999999",
  143.         },
  144.         {
  145.           id: 0,
  146.           name: "Smasher",
  147.           color: "4f4f4f",
  148.         },
  149.         {
  150.           id: th++,
  151.           name: "All Bars",
  152.           color: "000000",
  153.           cmd: "ren_bar_background_color",
  154.         },
  155.         {
  156.           id: th++,
  157.           name: "Outline",
  158.           color: "555555",
  159.           cmd: "ren_stroke_solid_color",
  160.         },
  161.         {
  162.           id: 13,
  163.           name: "Leader Board",
  164.           color: "64ff8c",
  165.         },
  166.         {
  167.           id: th++,
  168.           name: "Xp Bar",
  169.           color: "ffde43",
  170.           cmd: "ren_xp_bar_fill_color",
  171.         },
  172.         {
  173.           id: th++,
  174.           name: "Score Bar",
  175.           color: "43ff91",
  176.           cmd: "ren_score_bar_fill_color",
  177.         },
  178.         {
  179.           id: th++,
  180.           name: "Health Bar1",
  181.           color: "85e37d",
  182.           cmd: "ren_health_fill_color",
  183.         },
  184.         {
  185.           id: th++,
  186.           name: "Health Bar2",
  187.           color: "555555",
  188.           cmd: "ren_health_background_color",
  189.         },
  190.         {
  191.           id: th++,
  192.           name: "Grid Color",
  193.           color: "000000",
  194.           cmd: "ren_grid_color",
  195.         },
  196.         {
  197.           id: th++,
  198.           name: "Minimap 1",
  199.           color: "CDCDCD",
  200.           cmd: "ren_minimap_background_color",
  201.         },
  202.         {
  203.           id: th++,
  204.           name: "Minimap 2",
  205.           color: "797979",
  206.           cmd: "ren_minimap_border_color",
  207.         },
  208.         {
  209.           id: th++,
  210.           name: "Background 1",
  211.           color: "CDCDCD",
  212.           cmd: "ren_background_color",
  213.         },
  214.         {
  215.           id: th++,
  216.           name: "Background 2",
  217.           color: "797979",
  218.           cmd: "ren_border_color",
  219.         },
  220.         {
  221.           id: netTH++,
  222.           name: "UI Color1",
  223.           color: "e69f6c",
  224.           cmd: "ui_replace_colors",
  225.         },
  226.         {
  227.           id: netTH++,
  228.           name: "UI Color2",
  229.           color: "ff73ff",
  230.           cmd: "ui_replace_colors",
  231.         },
  232.         {
  233.           id: netTH++,
  234.           name: "UI Color3",
  235.           color: "c980ff",
  236.           cmd: "ui_replace_colors",
  237.         },
  238.         {
  239.           id: netTH++,
  240.           name: "UI Color4",
  241.           color: "71b4ff",
  242.           cmd: "ui_replace_colors",
  243.         },
  244.         {
  245.           id: netTH++,
  246.           name: "UI Color5",
  247.           color: "ffed3f",
  248.           cmd: "ui_replace_colors",
  249.         },
  250.         {
  251.           id: netTH++,
  252.           name: "UI Color6",
  253.           color: "ff7979",
  254.           cmd: "ui_replace_colors",
  255.         },
  256.         {
  257.           id: netTH++,
  258.           name: "UI Color7",
  259.           color: "88ff41",
  260.           cmd: "ui_replace_colors",
  261.         },
  262.         {
  263.           id: netTH++,
  264.           name: "UI Color8",
  265.           color: "41ffff",
  266.           cmd: "ui_replace_colors",
  267.         },
  268.       ];
  269.       diepStyle.colorMap = new Map(
  270.         colors.map(function (elem) {
  271.           return [
  272.             elem.id,
  273.             {
  274.               color: elem.color,
  275.               cmd: elem.cmd || "no cmd",
  276.             },
  277.           ];
  278.         })
  279.       );
  280.  
  281.       diepStyle.uiColorMap = function (cmd) {
  282.         var uiTH = nowSetting.colors.findIndex(
  283.           (elem) => elem.name == "UI Color1"
  284.         );
  285.         var colorBunch = "";
  286.         var arr = [];
  287.         if (cmd == "0x") {
  288.           for (var i = 0; i < 8; i++) {
  289.             colorBunch = " 0x" + nowSetting.colors[uiTH + i].color + colorBunch;
  290.           }
  291.           return colorBunch;
  292.         }
  293.         if (cmd == "array") {
  294.           for (var i = 0; i < 8; i++) {
  295.             arr.push(nowSetting.colors[uiTH + i].color);
  296.           }
  297.           return arr;
  298.         }
  299.       };
  300.       var renders = [
  301.         {
  302.           name: "Grid Alpha",
  303.           value: 0.1,
  304.           cmd: "grid_base_alpha",
  305.         },
  306.         {
  307.           name: "Outline Intensity",
  308.           value: 0.25,
  309.           cmd: "stroke_soft_color_intensity",
  310.         },
  311.         {
  312.           name: "Show Outline",
  313.           value: false,
  314.           cmd: "stroke_soft_color",
  315.           reverse: true,
  316.         },
  317.         {
  318.           name: "Border Alpha",
  319.           value: 0.1,
  320.           cmd: "border_color_alpha",
  321.         },
  322.         {
  323.           name: "UI Scale",
  324.           value: 1,
  325.           cmd: "ui_scale",
  326.         },
  327.         {
  328.           name: "Clear UI",
  329.           value: false,
  330.           cmd: "ui",
  331.           reverse: true,
  332.         },
  333.         {
  334.           name: "Show FPS",
  335.           value: false,
  336.           cmd: "fps",
  337.         },
  338.         {
  339.           name: "Show Health",
  340.           value: false,
  341.           cmd: "raw_health_values",
  342.         },
  343.         {
  344.           name: "Hide Name",
  345.           value: false,
  346.           cmd: "names",
  347.           reverse: true,
  348.         },
  349.       ];
  350.  
  351.       (function checkHasStorage() {
  352.         var _localStorage = localStorage.getObject("diepStyle");
  353.         var page = 1;
  354.         if (nowSetting && nowSetting.saveTH) {
  355.           page = nowSetting.saveTH;
  356.         }
  357.         if (_localStorage && _localStorage.saveList) {
  358.           saveList = _localStorage.saveList;
  359.           nowSetting = _localStorage.nowSetting;
  360.         }
  361.         if (!nowSetting || cmd == "reset") {
  362.           nowSetting = getBlankSetting();
  363.           nowSetting.saveTH = page;
  364.         }
  365.  
  366.         if (!saveList) saveList = getBlankSaveList();
  367.         saveList[0] = getBlankSetting();
  368.         (function checkMissing() {
  369.           var plain = getBlankSetting();
  370.           plain.renders.forEach((elem, th) => {
  371.             var index = nowSetting.renders.findIndex(
  372.               (now) => elem.cmd == now.cmd
  373.             );
  374.             if (index < 0) {
  375.               nowSetting.renders.splice(th, 0, elem);
  376.               saveList[nowSetting.saveTH].renders.splice(th, 0, elem);
  377.             }
  378.           });
  379.           plain.colors.forEach((elem, th) => {
  380.             var index = nowSetting.colors.findIndex((now) => {
  381.               if (elem.cmd && elem.cmd == now.cmd) return true;
  382.               if ((elem.id || elem.id == 0) && elem.id == now.id) return true;
  383.             });
  384.             if (index < 0) {
  385.               nowSetting.colors.splice(th, 0, elem);
  386.               saveList[nowSetting.saveTH].colors.splice(th, 0, elem);
  387.             }
  388.           });
  389.         })();
  390.       })();
  391.  
  392.       (function command() {
  393.         diepStyle.command = {};
  394.         renders.forEach((elem) => {
  395.           diepStyle.command[elem.cmd] = {};
  396.           if (elem.reverse) diepStyle.command[elem.cmd].reverse = true;
  397.         });
  398.         diepStyle.command.fn = function (cmd, value) {
  399.           nowSetting.renders = nowSetting.renders.map((elem) => {
  400.             if (elem.cmd == cmd) elem.value = value;
  401.             return elem;
  402.           });
  403.           if (diepStyle.command[cmd].reverse) value = !value;
  404.           input.set_convar("ren_" + cmd, value);
  405.         };
  406.       })();
  407.  
  408.       function getBlankSetting() {
  409.         return {
  410.           version: 0.097,
  411.           saveTH: 1,
  412.           lock: false,
  413.           colors,
  414.           renders,
  415.         };
  416.       }
  417.  
  418.       function getBlankSaveList() {
  419.         var list = [];
  420.         for (var i = 0; i < 6; i++) {
  421.           list[i] = getBlankSetting();
  422.           if (i == 0) list[i].isDefault = "default,no save";
  423.         }
  424.         return clone(list);
  425.       }
  426.       Storage.prototype.pluginSave = function () {
  427.         saveList[nowSetting.saveTH] = clone(nowSetting);
  428.         var _storageObj = {
  429.           nowSetting: clone(nowSetting),
  430.           saveList: clone(saveList),
  431.         };
  432.         localStorage.setObject("diepStyle", _storageObj);
  433.       };
  434.       localStorage.pluginSave();
  435.     }
  436.  
  437.     function keyListen() {
  438.       var input = "";
  439.       document.addEventListener("keyup", function (evt) {
  440.         var that = this;
  441.         if (that.pluginOn == undefined) that.pluginOn = false;
  442.         var e = window.event || evt;
  443.         var key = e.which || e.keyCode;
  444.         input += key;
  445.         if (input.indexOf("2727") >= 0) {
  446.           input = "";
  447.           that.pluginOn = !that.pluginOn;
  448.           togglePanel(that.pluginOn);
  449.           (function save() {
  450.             if (!that.pluginOn) {
  451.               localStorage.pluginSave();
  452.             }
  453.           })();
  454.         }
  455.         if (input.length > 10) input = input.substring(input.length - 10);
  456.       });
  457.     }
  458.  
  459.     function tempInit() {
  460.       var colorObj = {
  461.         th: 0,
  462.       };
  463.       var setObj = {
  464.         th: 0,
  465.       };
  466.  
  467.       diepStyle.exportJSON = exportJSON;
  468.       diepStyle.importJSON = importJSON;
  469.       init1();
  470.       loadColor();
  471.       setTimeout(diepStyle.resetRender, 1500);
  472.       diepStyle.resetColor = loadColor;
  473.  
  474.       function init1() {
  475.         diepStyle.resetRender = resetRender;
  476.  
  477.         var title = `<div class="title">Diep.Style Ver 0.096<br>
  478.                 Press Esc twice to toggle this</div>`;
  479.  
  480.         var colorPlane = function (id) {
  481.           return `{position:'left',width:300, height:200,onFineChange:'diepStyle.onColor(${id},this)'}`;
  482.         };
  483.  
  484.         colorObj.setClass = function () {
  485.           return `colorBlock colorBlock${this.th++}`;
  486.         };
  487.         setObj.setClass = function () {
  488.           return `setting setting${this.th++}`;
  489.         };
  490.  
  491.         function resetRender(cmd) {
  492.           document
  493.             .querySelectorAll("#styleSetting .render")
  494.             .forEach(function (elem) {
  495.               elem.outerHTML = ``;
  496.             });
  497.           var it = document.querySelector(".renderBegin");
  498.           it.insertAdjacentHTML("afterend", getRenderBody());
  499.           it.remove();
  500.           nowSetting.renders.forEach(function (elem) {
  501.             diepStyle.command.fn(elem.cmd, elem.value);
  502.           });
  503.           listenerInit(cmd);
  504.         }
  505.         var bodyTheme = getThemeBody();
  506.         var bodyRender = getRenderBody();
  507.         var bodyColor = getColorBody();
  508.         var bodyImport = getImportBody();
  509.  
  510.         function getThemeBody() {
  511.           var th = 0;
  512.           var html = `
  513.                     <div class="themeBody">
  514.                         <div class="themeBegin">Theme</div>
  515.                         <div class="header hide themeDesc">
  516.                             <span class="name"></span>
  517.                             <span class="author"></span>
  518.                         </div>
  519.                         <div class="theme">
  520.                             <div class="list">
  521.                             <div data-theme="dark"><img src="https://imgur.com/bFyXqs5.jpg"><br>Dark</div>
  522.                             <div data-theme="glass"><img src="https://imgur.com/4fnXdkE.jpg"><br>Glass</div>
  523.                             <div data-theme="moomoo"><img src="https://imgur.com/XJwGabH.jpg"><br>Moomoo</div>
  524.                             <div data-theme="80s"><img src="https://imgur.com/9Lma43A.jpg"><br>80s </div>
  525.                             </div>
  526.                         </div>
  527.                     </div>
  528.                     `;
  529.           return html;
  530.         }
  531.  
  532.         function getRenderBody() {
  533.           var renders = nowSetting.renders;
  534.           var th = -1;
  535.           var html = `
  536.                     <div class="renderBegin">Render</div>
  537.  
  538.                     <div class="row render">
  539.                     <div class="cell">${
  540.                       renders[++th].name
  541.                     } <br><span class="grid_base_value">${
  542.             renders[th].value
  543.           }</span></div>
  544.                     <div class="cell"><input type="range" name="grid_base_alpha" value=${
  545.                       renders[th].value * 100
  546.                     } max="200"></div>
  547.                     </div>
  548.                     <div class="row render">
  549.                     <div class="cell">${
  550.                       renders[++th].name
  551.                     } <br><span class="stroke_intensity_value">${
  552.             renders[th].value
  553.           }</span></div>
  554.                     <div class="cell"><input type="range" name="stroke_soft_color_intensity" value=${
  555.                       renders[th].value * 100
  556.                     } max="100"></div>
  557.                     </div>
  558.                     <div class="row render">
  559.                     <div class="cell">${renders[++th].name}</div>
  560.                     <div class="cell"><input type="checkbox" name="stroke_soft_color" ${
  561.                       renders[th].value ? "checked" : ""
  562.                     }></div>
  563.                     </div>
  564.                     <div class="row render">
  565.                     <div class="cell">${
  566.                       renders[++th].name
  567.                     } <br><span class="border_value">${
  568.             renders[th].value
  569.           }</span></div>
  570.                     <div class="cell"><input type="range" name="border_color_alpha" value=${
  571.                       renders[th].value * 100
  572.                     } max="100"></div>
  573.                     </div>
  574.                     <div class="row render">
  575.                     <div class="cell">${
  576.                       renders[++th].name
  577.                     } <br><span class="ui_scale_value">${
  578.             renders[th].value
  579.           }</span></div>
  580.                     <div class="cell"><input type="range" name="ui_scale" value=${
  581.                       renders[th].value * 100
  582.                     } max="200"></div>
  583.                     </div>
  584.                     <div class="row render">
  585.                     <div class="cell">${renders[++th].name}</div>
  586.                     <div class="cell"><input type="checkbox" name="ui" ${
  587.                       renders[th].value ? "checked" : ""
  588.                     }></div>
  589.                     </div>
  590.                     <div class="row render">
  591.                     <div class="cell">${renders[++th].name}</div>
  592.                     <div class="cell"><input type="checkbox" name="fps" ${
  593.                       renders[th].value ? "checked" : ""
  594.                     }></div>
  595.                     </div>
  596.                     <div class="row render">
  597.                     <div class="cell">${renders[++th].name}</div>
  598.                     <div class="cell"><input type="checkbox" name="raw_health_values" ${
  599.                       renders[th].value ? "checked" : ""
  600.                     }></div>
  601.                     </div>
  602.                     <div class="row render">
  603.                     <div class="cell">${renders[++th].name}</div>
  604.                     <div class="cell"><input type="checkbox" name="names" ${
  605.                       renders[th].value ? "checked" : ""
  606.                     }></div>
  607.                     </div>
  608.                     `;
  609.           return html;
  610.         }
  611.  
  612.         function getColorBody() {
  613.           var it = `<div class="row colorBegin">Color</div>\n`;
  614.           nowSetting.colors.forEach(function (elem, th) {
  615.             var id = elem.id;
  616.             it += `
  617.                         <div class="row colorBlock colorBlock${th}">
  618.                         <div class="cell"></div>
  619.                         <div class="cell"><input class="jscolor ${colorPlane(
  620.                           `${id}`
  621.                         )}">  </div>
  622.                         </div>
  623.                         `;
  624.           });
  625.           return it;
  626.         }
  627.  
  628.         var allBody = `
  629.                 <div class="pluginBody">${title}
  630.                 <hr>
  631.                 ${bodyTheme}
  632.                 <div class="table">
  633.                  ${bodyRender} ${bodyColor} <br>
  634.                 </div>
  635.                 </div>
  636.                 `;
  637.         var getSaveBtns = function () {
  638.           var btn = "";
  639.           for (var i = 0; i < 6; i++) {
  640.             if (i == 0) {
  641.               btn += `<button>Default</button>`;
  642.               continue;
  643.             }
  644.             btn += `<button>${i}</button>`;
  645.           }
  646.           return btn;
  647.         };
  648.  
  649.         function getImportBody() {
  650.           var html = `
  651.                     <div class="importBegin">Import / Export Save</div>
  652.                     <div class="row">
  653.                     <div class="cell">
  654.                     <button class="import">Import</button>
  655.                     </div>
  656.                     <div class="cell">
  657.                     <button class="export">Export</button>
  658.                     </div>
  659.                     </div>
  660.                     `;
  661.           return html;
  662.         }
  663.         // <button class="selectTheme">Theme</button>
  664.         var footer = `
  665.                 <div class="footer">
  666.                 <div class="saveBtns">${getSaveBtns()}</div>
  667.                 <div class="otherBtns">
  668.                 <span><button class="import">Import</button></span>
  669.                 <span><button class="export">Export</button></span>
  670.                 <span class="lock"><button>Lock</button></span>
  671.                 <span class="reset"><button>Reset</button></span>
  672.                 </div>
  673.                 </div>
  674.                 `;
  675.         var id = 0;
  676.         var temp = `<div id="styleSetting"> ${allBody} ${footer} </div>`;
  677.         document.querySelector("body").insertAdjacentHTML("afterend", temp);
  678.         addScript(
  679.           `https://cdnjs.cloudflare.com/ajax/libs/jscolor/2.0.4/jscolor.min.js`
  680.         );
  681.  
  682.         function listenerInit(cmd) {
  683.           (function () {
  684.             var theName = "grid_base_alpha";
  685.             document
  686.               .querySelector(`input[name=${theName}]`)
  687.               .addEventListener("input", function (e) {
  688.                 var value = (e.target.value - (e.target.value % 2)) / 100;
  689.                 document.querySelector(".grid_base_value").innerHTML = value;
  690.                 diepStyle.command.fn(theName, value);
  691.               });
  692.           })();
  693.           (function () {
  694.             var theName = "stroke_soft_color_intensity";
  695.             document
  696.               .querySelector(`input[name=${theName}]`)
  697.               .addEventListener("input", function (e) {
  698.                 var value = (e.target.value - (e.target.value % 5)) / 100;
  699.                 document.querySelector(".stroke_intensity_value").innerHTML =
  700.                   value;
  701.                 diepStyle.command.fn(theName, value);
  702.               });
  703.           })();
  704.           (function () {
  705.             var theName = "stroke_soft_color";
  706.             document
  707.               .querySelector(`input[name=${theName}]`)
  708.               .addEventListener("change", function (e) {
  709.                 diepStyle.command.fn(theName, e.target.checked);
  710.               });
  711.           })();
  712.           (function () {
  713.             var theName = "border_color_alpha";
  714.             document
  715.               .querySelector(`input[name=${theName}]`)
  716.               .addEventListener("input", function (e) {
  717.                 var value = (e.target.value - (e.target.value % 2)) / 100;
  718.                 document.querySelector(".border_value").innerHTML = value;
  719.                 diepStyle.command.fn(theName, value);
  720.               });
  721.           })();
  722.           (function () {
  723.             var theName = "ui_scale";
  724.             document
  725.               .querySelector(`input[name=${theName}]`)
  726.               .addEventListener("input", function (e) {
  727.                 var value = (e.target.value - (e.target.value % 2)) / 100;
  728.                 document.querySelector(`.${theName}_value`).innerHTML = value;
  729.                 diepStyle.command.fn(theName, value);
  730.               });
  731.           })();
  732.           (function () {
  733.             var theName = "ui";
  734.             document
  735.               .querySelector(`input[name=${theName}]`)
  736.               .addEventListener("change", function (e) {
  737.                 diepStyle.command.fn(theName, e.target.checked);
  738.               });
  739.           })();
  740.           (function () {
  741.             var theName = "fps";
  742.             document
  743.               .querySelector(`input[name=${theName}]`)
  744.               .addEventListener("change", function (e) {
  745.                 diepStyle.command.fn(theName, e.target.checked);
  746.               });
  747.           })();
  748.           (function () {
  749.             var theName = "raw_health_values";
  750.             document
  751.               .querySelector(`input[name=${theName}]`)
  752.               .addEventListener("change", function (e) {
  753.                 diepStyle.command.fn(theName, e.target.checked);
  754.               });
  755.           })();
  756.           (function () {
  757.             var theName = "names";
  758.             document
  759.               .querySelector(`input[name=${theName}]`)
  760.               .addEventListener("change", function (e) {
  761.                 diepStyle.command.fn(theName, e.target.checked);
  762.               });
  763.           })();
  764.           if (cmd == "reset") return;
  765.           (function () {
  766.             document
  767.               .querySelectorAll(`.theme div[data-theme]`)
  768.               .forEach((dom) => {
  769.                 dom.addEventListener("click", () => {
  770.                   const name = dom.getAttribute("data-theme");
  771.                   const themes = diepStyle.themeJson;
  772.                   diepStyle.importJSON(themes[name]);
  773.                 });
  774.               });
  775.           })();
  776.           // document.querySelector('button.selectTheme').addEventListener('click', function(e) {
  777.           // alert('k');
  778.           // });
  779.           document
  780.             .querySelector("button.import")
  781.             .addEventListener("click", () => {
  782.               var example =
  783.                 '[\n{"cmd":"ui_scale","value":"1.5"},' +
  784.                 '\n{"id":"8","value":"888888"}\n]';
  785.               var gotValue = prompt(
  786.                 "Enter The JSON\nExample:\n" + example,
  787.                 example.replace(/\s/g, "")
  788.               );
  789.               diepStyle.importJSON(gotValue);
  790.             });
  791.           document
  792.             .querySelector("button.export")
  793.             .addEventListener("click", function (e) {
  794.               prompt("Copy the Json", diepStyle.exportJSON("one"));
  795.             });
  796.           document.querySelectorAll(".saveBtns button").forEach((elem, th) => {
  797.             elem.addEventListener("click", function () {
  798.               localStorage.pluginSave();
  799.               nowSetting = clone(saveList[th]);
  800.               nowSetting.saveTH = th;
  801.               // diepStyle.storageInit();
  802.               // nowSetting.saveTH=th;
  803.               diepStyle.resetColor();
  804.               diepStyle.resetRender("reset");
  805.               updateSaveBtns();
  806.             });
  807.           });
  808.           document
  809.             .querySelector(".lock button")
  810.             .addEventListener("click", function (e) {
  811.               nowSetting.lock = !nowSetting.lock;
  812.               updateSaveBtns();
  813.             });
  814.           document
  815.             .querySelector(".reset button")
  816.             .addEventListener("click", function (e) {
  817.               if (e.target.innerHTML != "Confirm") {
  818.                 e.target.innerHTML = "Confirm";
  819.               } else {
  820.                 diepStyle.storageInit("reset");
  821.                 diepStyle.resetColor();
  822.                 diepStyle.resetRender("reset");
  823.                 updateSaveBtns();
  824.               }
  825.             });
  826.           document
  827.             .querySelector(".reset button")
  828.             .addEventListener("mouseleave", function (e) {
  829.               e.target.innerHTML = "Reset";
  830.             });
  831.           updateSaveBtns();
  832.  
  833.           function updateSaveBtns() {
  834.             var theTH = nowSetting.saveTH;
  835.             var status = saveList[theTH];
  836.             var lockBtn = document.querySelector(".lock button");
  837.             var resetBtn = document.querySelector(".reset button");
  838.             if (theTH == 0) {
  839.               lockBtn.disabled = true;
  840.               resetBtn.disabled = true;
  841.               nowSetting.lock = true;
  842.             } else {
  843.               resetBtn.disabled = nowSetting.lock;
  844.               lockBtn.disabled = false;
  845.             }
  846.             if (resetBtn.disabled) {
  847.               document.querySelector(".table").classList.add("noClicks");
  848.               document.querySelector(".themeBody").classList.add("noClicks");
  849.               document.querySelector("button.import").classList.add("noClicks");
  850.               lockBtn.innerHTML = "locked";
  851.             } else {
  852.               document.querySelector(".table").classList.remove("noClicks");
  853.               document.querySelector(".themeBody").classList.remove("noClicks");
  854.               document
  855.                 .querySelector("button.import")
  856.                 .classList.remove("noClicks");
  857.               lockBtn.innerHTML = "no lock";
  858.             }
  859.             (function () {
  860.               document
  861.                 .querySelectorAll(".saveBtns button")
  862.                 .forEach(function (elem, th) {
  863.                   elem.classList.remove("chosenBtn");
  864.                   if (theTH == th) elem.classList.add("chosenBtn");
  865.                 });
  866.             })();
  867.           }
  868.         }
  869.       }
  870.  
  871.       function loadColor() {
  872.         if (nowSetting.theme) {
  873.           document.querySelector(".themeDesc").classList.remove("hide");
  874.           var it = document.querySelector(".themeDesc .name");
  875.           it.innerText = nowSetting.theme.name;
  876.           it = document.querySelector(".themeDesc .author");
  877.           it.innerText = "by\n " + nowSetting.theme.author;
  878.         } else {
  879.           document.querySelector(".themeDesc").classList.add("hide");
  880.         }
  881.  
  882.         nowSetting.colors.some(function (elem, th) {
  883.           var target = document.querySelector(`.colorBlock${th}`);
  884.           if (!target || !target.querySelector(".cell input").jscolor) {
  885.             setTimeout(loadColor, 500);
  886.             return true;
  887.           }
  888.           onColor(elem.id, elem.color);
  889.           target.querySelector(".cell").innerHTML = elem.name;
  890.           target.querySelector(".cell input").jscolor.fromString(elem.color);
  891.         });
  892.       }
  893.  
  894.       function exportJSON(cmd) {
  895.         var toExport = [];
  896.         if (cmd == "one") toExport = write(nowSetting);
  897.         if (cmd == "all")
  898.           saveList.forEach((elem) => toExport.push(write(elem)));
  899.         return JSON.stringify(toExport);
  900.  
  901.         function write(now) {
  902.           var array = [];
  903.           now.colors.forEach(function (elem) {
  904.             if (elem.id && elem.id < 50)
  905.               array.push({
  906.                 id: elem.id,
  907.                 value: elem.color,
  908.               });
  909.             if (elem.id && elem.id >= 50 && elem.id < 100)
  910.               array.push({
  911.                 cmd: elem.cmd,
  912.                 value: elem.color,
  913.               });
  914.             if (!elem.id && elem.cmd)
  915.               array.push({
  916.                 cmd: elem.cmd,
  917.                 value: elem.color,
  918.               });
  919.           });
  920.           array.push({
  921.             cmd: "ui_replace_colors",
  922.             value: diepStyle.uiColorMap("array"),
  923.           });
  924.           now.renders.forEach(function (elem) {
  925.             array.push({
  926.               cmd: elem.cmd,
  927.               value: elem.value,
  928.             });
  929.           });
  930.           if (now.theme) {
  931.             array.unshift({
  932.               theme: {
  933.                 name: now.theme.name || "",
  934.                 author: now.theme.author || "",
  935.               },
  936.             });
  937.           } else {
  938.             array.unshift({
  939.               theme: {
  940.                 name: "",
  941.                 author: "",
  942.               },
  943.             });
  944.           }
  945.           return array;
  946.         }
  947.       }
  948.  
  949.       function importJSON(json) {
  950.         if (!isJson(json)) {
  951.           alert("Code Incorrect\nPlz git gud and check your JSON");
  952.           return;
  953.         }
  954.         var gotArr = JSON.parse(json);
  955.         if (!gotArr) return;
  956.         gotArr.forEach(function (elem) {
  957.           nowSetting.colors = nowSetting.colors.map(function (now) {
  958.             if (elem.id && now.id == elem.id) now.color = elem.value;
  959.             if (!elem.id && elem.cmd && now.cmd == elem.cmd)
  960.               now.color = elem.value;
  961.             return now;
  962.           });
  963.           nowSetting.renders = nowSetting.renders.map(function (now) {
  964.             if (elem.cmd && now.cmd == elem.cmd) now.value = elem.value;
  965.             return now;
  966.           });
  967.           if (elem.cmd == "ui_replace_colors") {
  968.             var uiTH = nowSetting.colors.findIndex(
  969.               (elem) => elem.name == "UI Color1"
  970.             );
  971.             for (var i = 0; i < 8; i++) {
  972.               nowSetting.colors[uiTH + i].color = elem.value[i];
  973.             }
  974.           }
  975.           if (elem.theme) {
  976.             if (elem.theme.name || elem.theme.author)
  977.               nowSetting.theme = elem.theme;
  978.           } else {
  979.             elem.theme = {};
  980.           }
  981.         });
  982.         document
  983.           .querySelectorAll(".saveBtns button")
  984.           [nowSetting.saveTH].click();
  985.  
  986.         function isJson(str) {
  987.           try {
  988.             JSON.parse(str);
  989.           } catch (e) {
  990.             return false;
  991.           }
  992.           if (typeof JSON.parse(str) == "object") return true;
  993.         }
  994.       }
  995.     }
  996.  
  997.     function onColor(id, e) {
  998.       var target = id;
  999.       var color = e.toString();
  1000.       if (id >= 0 && id < 50) {
  1001.         input.execute(`net_replace_color ${target} 0x${color}`);
  1002.       } else if (id >= 50 && id < 100) {
  1003.         var cmd = diepStyle.colorMap.get(id).cmd;
  1004.         input.set_convar(cmd, `0x${color}`);
  1005.       } else {
  1006.         input.execute("ui_replace_colors" + diepStyle.uiColorMap("0x"));
  1007.       }
  1008.       nowSetting.colors = nowSetting.colors.map(function (elem) {
  1009.         if (elem.id === id) elem.color = color;
  1010.         return elem;
  1011.       });
  1012.     }
  1013.  
  1014.     function styleInit() {
  1015.       addGlobalStyle(`#styleSetting{padding: 0.2em; margin:0.2em; position: absolute;top: 0;right: 0;width: 35%;
  1016.                 min-width:20em; background-color: rgba(200,200,200,0.8);display:none;border: 1px solid black;height: 85vh;}`);
  1017.       addGlobalStyle(
  1018.         ".table{ display: table; text-align: center; width: 99%;}"
  1019.       );
  1020.       addGlobalStyle(".row{ display: table-row; }");
  1021.       addGlobalStyle(`.cell{ display: table-cell;}`);
  1022.       addGlobalStyle(
  1023.         `.cell:not(.noBoard){ display: table-cell; padding: 0.1em 0.3em;border: 1px solid black;}`
  1024.       );
  1025.       addGlobalStyle(
  1026.         "input[type=checkbox],input[type=range]{transform: scale(1.2); }"
  1027.       );
  1028.       addGlobalStyle(`.pluginBody{height: 90%; overflow-y: auto;}`);
  1029.       addGlobalStyle(
  1030.         `.theme .list div{width: 48%; float: left; text-align: center; padding: 1%;}`
  1031.       );
  1032.       addGlobalStyle(`.theme img {width: 90%;}`);
  1033.       addGlobalStyle(
  1034.         `.colorBegin, .renderBegin, .importBegin,.themeBegin,.header{font-size:1.1rem; line-height:1.3em;text-align: center;}`
  1035.       );
  1036.       addGlobalStyle(`.saveBtns button{margin: 0 3%; padding: 0.2em 0.5em;}`);
  1037.       addGlobalStyle(
  1038.         `@-moz-document url-prefix() {.saveBtns button{margin: 0 1%;padding: 0.1em 0.3em;} } }`
  1039.       );
  1040.       addGlobalStyle(`.otherBtns button{margin: 0 4%; padding: 0.2em 0.5em;}`);
  1041.       addGlobalStyle(
  1042.         `.footer{text-align:center;height:10%; border: 1px solid black;}`
  1043.       );
  1044.       addGlobalStyle(`.footer > *{margin: 0.2vh 0 1.3vh 0;}`);
  1045.  
  1046.       addGlobalStyle(`.reset button{box-shadow: 0 0 1em red;}`);
  1047.       addGlobalStyle(`.backRed{background-color:#f14e54}`);
  1048.       addGlobalStyle(
  1049.         `.chosenBtn{-webkit-filter: brightness(0.8);filter:brightness(0.8);}`
  1050.       );
  1051.       addGlobalStyle(
  1052.         `.noClicks{pointer-events:none; -webkit-filter: opacity(50%); filter: opacity(50%);}`
  1053.       );
  1054.       addGlobalStyle(`.hide{display:none}`);
  1055.  
  1056.       function addGlobalStyle(css) {
  1057.         var head, style;
  1058.         head = document.getElementsByTagName("head")[0];
  1059.         if (!head) {
  1060.           return;
  1061.         }
  1062.         style = document.createElement("style");
  1063.         style.type = "text/css";
  1064.         style.innerHTML = css;
  1065.         head.appendChild(style);
  1066.       }
  1067.     }
  1068.   }
  1069.  
  1070.   function togglePanel(tf) {
  1071.     if (tf) {
  1072.       try {
  1073.         document.querySelector("#styleSetting").style.display = "block";
  1074.       } catch (err) {
  1075.         var warn =
  1076.           "\n\nYou can DELETE ALL PLUGIN SAVES to fix this" +
  1077.           "\nType delete to confirm" +
  1078.           "\nor cancel to download all saves";
  1079.         var gotValue = prompt("Got an error\n" + err + warn);
  1080.         if (gotValue == "delete") {
  1081.           localStorage.removeItem("diepStyle");
  1082.           alert("Deleted,refresh to take effect");
  1083.           return;
  1084.         } else {
  1085.           download("diep.style saves.txt", diepStyle.exportJSON("all"));
  1086.         }
  1087.       }
  1088.     } else {
  1089.       document.querySelector("#styleSetting").style.display = "none";
  1090.     }
  1091.     function download(filename, text) {
  1092.       var element = document.createElement("a");
  1093.       element.setAttribute(
  1094.         "href",
  1095.         "data:text/plain;charset=utf-8," + encodeURIComponent(text)
  1096.       );
  1097.       element.setAttribute("download", filename);
  1098.       element.style.display = "none";
  1099.       document.body.appendChild(element);
  1100.       element.click();
  1101.       document.body.removeChild(element);
  1102.     }
  1103.   }
  1104.  
  1105.   (function loadThemes() {
  1106.     diepStyle.themeJson = {
  1107.       dark: `[{"theme":{"name":"Dark Mode","author":"/u/162893476"}} ,{"id":2,"value":"001117"},{"id":15,"value":"140000"},{"id":3,"value":"005574"},{"id":4,"value":"540000"},{"id":5,"value":"090413"},{"id":6,"value":"00121a"},{"id":17,"value":"0D0D0D"},{"id":12,"value":"0D0D0D"},{"id":8,"value":"141400"},{"id":7,"value":"0d1500"},{"id":9,"value":"170606"},{"id":10,"value":"0a0016"},{"id":11,"value":"160517"},{"id":14,"value":"141414"},{"id":1,"value":"0f0f0f"},{"cmd":"ren_bar_background_color","value":"000000"},{"cmd":"ren_stroke_solid_color","value":"555555"},{"id":13,"value":"00bd88"},{"cmd":"ren_xp_bar_fill_color","value":"ffde43"},{"cmd":"ren_score_bar_fill_color","value":"43ff91"},{"cmd":"ren_health_fill_color","value":"85e37d"},{"cmd":"ren_health_background_color","value":"555555"},{"cmd":"ren_grid_color","value":"111111"},{"cmd":"ren_minimap_background_color","value":"323232"},{"cmd":"ren_minimap_border_color","value":"986895"},{"cmd":"ren_background_color","value":"000000"},{"cmd":"ren_border_color","value":"0f0f0f"},{"cmd":"ui_replace_colors","value":["ffe280","ff31a0","882dff","2d5aff","ffde26","ff2626","95ff26","17d2ff"]},{"cmd":"grid_base_alpha","value":2},{"cmd":"stroke_soft_color_intensity","value":-10},{"cmd":"stroke_soft_color","value":false},{"cmd":"border_color_alpha","value":0.5},{"cmd":"ui_scale","value":1},{"cmd":"ui","value":false},{"cmd":"fps","value":false},{"cmd":"raw_health_values","value":false},{"cmd":"names","value":false}] `,
  1108.       glass: `[{"theme":{"name":"Glass","author":"/u/162893476"}}, {"id":2,"value":"00627D"},{"id":15,"value":"7E0000"},{"id":3,"value":"00627D"},{"id":4,"value":"7E0000"},{"id":5,"value":"3D007E"},{"id":6,"value":"007E00"},{"id":17,"value":"464646"},{"id":12,"value":"7E7E00"},{"id":8,"value":"7E7E00"},{"id":7,"value":"457E00"},{"id":16,"value":"795C00"},{"id":9,"value":"7C0320"},{"id":10,"value":"43397d"},{"id":11,"value":"7E037A"},{"id":14,"value":"252525"},{"id":1,"value":"464646"},{"cmd":"ren_bar_background_color","value":"191919"},{"cmd":"ren_stroke_solid_color","value":"555555"},{"id":13,"value":"008B54"},{"cmd":"ren_xp_bar_fill_color","value":"666600"},{"cmd":"ren_score_bar_fill_color","value":"008B54"},{"cmd":"ren_health_fill_color","value":"85e37d"},{"cmd":"ren_health_background_color","value":"555555"},{"cmd":"ren_grid_color","value":"373737"},{"cmd":"ren_minimap_background_color","value":"464646"},{"cmd":"ren_minimap_border_color","value":"676767"},{"cmd":"ren_background_color","value":"000000"},{"cmd":"ren_border_color","value":"454545"},{"cmd":"ui_replace_colors","value":["e69f6c","ff73ff","c980ff","71b4ff","ffed3f","ff7979","88ff41","41ffff"]},{"cmd":"grid_base_alpha","value":2},{"cmd":"stroke_soft_color_intensity","value":-9},{"cmd":"stroke_soft_color","value":false},{"cmd":"border_color_alpha","value":0.5},{"cmd":"ui_scale","value":1},{"cmd":"ui","value":false},{"cmd":"fps","value":false},{"cmd":"raw_health_values","value":false},{"cmd":"names","value":false}] `,
  1109.       moomoo: `[{"theme":{"name":"Moomoo","author":"yst6zJTuKCHQvAXW4IPV"}}, {"id":2,"value":"847377"},{"id":15,"value":"7F4B63"},{"id":3,"value":"475F9E"},{"id":4,"value":"844052"},{"id":5,"value":"A330B1"},{"id":6,"value":"A66E4F"},{"id":17,"value":"6D6B84"},{"id":12,"value":"596B4A"},{"id":8,"value":"5b6b4d"},{"id":7,"value":"928150"},{"id":16,"value":"596B4A"},{"id":9,"value":"8c4256"},{"id":10,"value":"63647e"},{"id":11,"value":"5A5B72"},{"id":14,"value":"837752"},{"id":1,"value":"535377"},{"cmd":"ren_bar_background_color","value":"586B44"},{"cmd":"ren_stroke_solid_color","value":"35354E"},{"id":13,"value":"64ff8c"},{"cmd":"ren_xp_bar_fill_color","value":"FFFFFF"},{"cmd":"ren_score_bar_fill_color","value":"586B44"},{"cmd":"ren_health_fill_color","value":"8ECC51"},{"cmd":"ren_health_background_color","value":"3D3F42"},{"cmd":"ren_grid_color","value":"000000"},{"cmd":"ren_minimap_background_color","value":"586B44"},{"cmd":"ren_minimap_border_color","value":"586B44"},{"cmd":"ren_background_color","value":"768F5B"},{"cmd":"ren_border_color","value":"333333"},{"cmd":"ui_replace_colors","value":["5d4322","825d30","a8783e","bf8f54","c89e6a","d6b68f","e3ceb5","f1e7da"]},{"cmd":"grid_base_alpha","value":0.1},{"cmd":"stroke_soft_color_intensity","value":0.25},{"cmd":"stroke_soft_color","value":false},{"cmd":"border_color_alpha","value":0.1},{"cmd":"ui_scale","value":1},{"cmd":"ui","value":false},{"cmd":"fps","value":false},{"cmd":"raw_health_values","value":false},{"cmd":"names","value":false}]`,
  1110.       "80s": `[{"theme":{"name":"80s Light","author":"Road-to-100k"}}, {"id":2,"value":"00efff"},{"id":15,"value":"ff00ff"},{"id":3,"value":"00efff"},{"id":4,"value":"ff00ff"},{"id":5,"value":"ffaa00"},{"id":6,"value":"4FFFB0"},{"id":17,"value":"c6c6c6"},{"id":12,"value":"ffe869"},{"id":8,"value":"FFD800"},{"id":7,"value":"89ff69"},{"id":16,"value":"fcc376"},{"id":9,"value":"FF004F"},{"id":10,"value":"0000CD"},{"id":11,"value":"ffffff"},{"id":14,"value":"43197e"},{"id":1,"value":"999999"},{"cmd":"ren_bar_background_color","value":"1e0b38"},{"cmd":"ren_stroke_solid_color","value":"555555"},{"id":13,"value":"64ff8c"},{"cmd":"ren_xp_bar_fill_color","value":"ffde43"},{"cmd":"ren_score_bar_fill_color","value":"43ff91"},{"cmd":"ren_health_fill_color","value":"85e37d"},{"cmd":"ren_health_background_color","value":"555555"},{"cmd":"ren_grid_color","value":"ff00ff"},{"cmd":"ren_minimap_background_color","value":"CDCDCD"},{"cmd":"ren_minimap_border_color","value":"797979"},{"cmd":"ren_background_color","value":"1e0b38"},{"cmd":"ren_border_color","value":"000000"},{"cmd":"ui_replace_colors","value":["e69f6c","ff73ff","c980ff","71b4ff","ffed3f","ff7979","88ff41","41ffff"]},{"cmd":"grid_base_alpha","value":1.1},{"cmd":"stroke_soft_color_intensity","value":0.3},{"cmd":"stroke_soft_color","value":false},{"cmd":"border_color_alpha","value":0.6},{"cmd":"ui_scale","value":1},{"cmd":"ui","value":false},{"cmd":"fps","value":false},{"cmd":"raw_health_values","value":false},{"cmd":"names","value":false}] `,
  1111.     };
  1112.   })();
  1113.   function addScript(src) {
  1114.     var s = document.createElement("script");
  1115.     s.setAttribute("src", src);
  1116.     document.body.appendChild(s);
  1117.   }
  1118. })();