☰

Diep.style

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

当前为 2017-03-29 提交的版本，查看 最新版本。

  1. // ==UserScript==
  2. // @name         Diep.style
  3. // @namespace    https://www.reddit.com/r/Diepio/comments/5y1np1/diepstyle_plugin/
  4. // @version      0.09
  5. // @description  Press Esc twice to toggle the menu,and save the setting
  6. // @author       sbk2015
  7. // @match        http://*diep.io/*
  8. // @grant        none
  9. // ==/UserScript==
  10.  
  11. (function() {
  12.     'use strict';
  13.     var localStorage;
  14.     var saveList;
  15.     var nowSetting;
  16.     var isLocal;
  17.     var clone;
  18.     jsInit();
  19.     setTimeout(pluginInit, 1000);
  20.  
  21.     function jsInit() {
  22.         Storage.prototype.setObject = function(key, value) {
  23.             this.setItem(key, JSON.stringify(value));
  24.         }
  25.         Storage.prototype.getObject = function(key) {
  26.             var value = this.getItem(key);
  27.             return value && JSON.parse(value);
  28.         }
  29.         clone = function(obj) {
  30.             return JSON.parse(JSON.stringify(obj));
  31.         }
  32.         window.diepStyle = {};
  33.         localStorage = window.localStorage;
  34.         if (location.href.indexOf('file://') >= 0) {
  35.             var warning = false;
  36.             warning ? '' : console.warn('off warning');
  37.             isLocal = true;
  38.             window.input = {
  39.                 set_convar: function() { warning ? console.warn('block input.set_convar') : '' },
  40.                 execute: function() { warning ? console.warn('block input.set_execute') : '' }
  41.             }
  42.         }
  43.     }
  44.  
  45.     function pluginInit() {
  46.         storageInit();
  47.         keyListen();
  48.         tempInit();
  49.         styleInit();
  50.         diepStyle.onColor = onColor;
  51.         diepStyle.storageInit = storageInit;
  52.         togglePanel(true);
  53.  
  54.         function storageInit(cmd) {
  55.             var th = 50,
  56.             netTH = 110;
  57.             var colors = [
  58.             { id: 2, name: 'You FFA', color: '00b1de' },
  59.             { id: 15, name: 'Other FFA', color: 'f14e54' },
  60.             { id: 3, name: 'Blue Team', color: '00b1de' },
  61.             { id: 4, name: 'Red Team', color: 'f14e54' },
  62.             { id: 5, name: 'Purple Team', color: 'bf7ff5' },
  63.             { id: 6, name: 'Green Team', color: '00e16e' },
  64.             { id: 17, name: 'Fallen team', color: 'c6c6c6' },
  65.             { id: 12, name: 'Arena Closer', color: 'ffe869' },
  66.             { id: 8, name: 'Square', color: 'ffe869' },
  67.             { id: 7, name: 'Green Square?', color: '89ff69' },
  68.             { id: 9, name: 'Triangle', color: 'fc7677' },
  69.             { id: 10, name: 'Pentagon', color: '768dfc' },
  70.             { id: 11, name: 'Crasher', color: 'f177dd' },
  71.             { id: 14, name: 'Waze Wall', color: 'bbbbbb' },
  72.             { id: 1, name: 'Turret', color: '999999' },
  73.             { id: 0, name: 'Smasher', color: '4f4f4f' },
  74.             { id: th++, name: 'All Bars', color: '000000', cmd: 'ren_bar_background_color' },
  75.             { id: th++, name: 'Outline', color: '555555', cmd: 'ren_stroke_solid_color' },
  76.             { id: 13, name: 'Leader Board', color: '64ff8c' },
  77.             { id: th++, name: 'Xp Bar', color: 'ffde43', cmd: 'ren_xp_bar_fill_color' },
  78.             { id: th++, name: 'Score Bar', color: '43ff91', cmd: 'ren_score_bar_fill_color' },
  79.             { id: th++, name: 'Health Bar1', color: '85e37d', cmd: 'ren_health_fill_color' },
  80.             { id: th++, name: 'Health Bar2', color: '555555', cmd: 'ren_health_background_color' },
  81.             { id: th++, name: 'Grid Color', color: '000000', cmd: 'ren_grid_color' },
  82.             { id: th++, name: 'Minimap 1', color: 'CDCDCD', cmd: 'ren_minimap_background_color' },
  83.             { id: th++, name: 'Minimap 2', color: '797979', cmd: 'ren_minimap_border_color' },
  84.             { id: th++, name: 'Background 1', color: 'CDCDCD', cmd: 'ren_background_color' },
  85.             { id: th++, name: 'Background 2', color: '797979', cmd: 'ren_border_color' },
  86.             { id: netTH++, name: 'UI Color1', color: 'e69f6c', cmd: 'ui_replace_colors' },
  87.             { id: netTH++, name: 'UI Color2', color: 'ff73ff', cmd: 'ui_replace_colors' },
  88.             { id: netTH++, name: 'UI Color3', color: 'c980ff', cmd: 'ui_replace_colors' },
  89.             { id: netTH++, name: 'UI Color4', color: '71b4ff', cmd: 'ui_replace_colors' },
  90.             { id: netTH++, name: 'UI Color5', color: 'ffed3f', cmd: 'ui_replace_colors' },
  91.             { id: netTH++, name: 'UI Color6', color: 'ff7979', cmd: 'ui_replace_colors' },
  92.             { id: netTH++, name: 'UI Color7', color: '88ff41', cmd: 'ui_replace_colors' },
  93.             { id: netTH++, name: 'UI Color8', color: '41ffff', cmd: 'ui_replace_colors' },
  94.             ]
  95.             diepStyle.colorMap = new Map(colors.map(function(elem) {
  96.                 return [elem.id, { color: elem.color, cmd: elem.cmd || 'no cmd' }]
  97.             }));
  98.  
  99.             diepStyle.uiColorMap = function(cmd) {
  100.                 var uiTH = nowSetting.colors.findIndex(elem => elem.name == 'UI Color1');
  101.                 var colorBunch = '';
  102.                 var arr = [];
  103.                 if (cmd == '0x') {
  104.                     for (var i = 0; i < 8; i++) {
  105.                         colorBunch = ' 0x' + nowSetting.colors[uiTH + i].color + colorBunch;
  106.                     }
  107.                     return colorBunch;
  108.                 }
  109.                 if (cmd == 'array') {
  110.                     for (var i = 0; i < 8; i++) {
  111.                         arr.push(nowSetting.colors[uiTH + i].color);
  112.                     }
  113.                     return arr;
  114.                 }
  115.             }
  116.             var renders = [
  117.             { name: 'Grid Alpha', value: 0.1, cmd: 'grid_base_alpha' },
  118.             { name: 'Outline Intensity', value: 0.25, cmd: 'stroke_soft_color_intensity' },
  119.             { name: 'Show Outline', value: false, cmd: 'stroke_soft_color',reverse: true },
  120.             { name: 'Border Alpha', value: 0.1, cmd: 'border_color_alpha' },
  121.             { name: 'UI Scale', value: 1, cmd: 'ui_scale' },
  122.             { name: 'Clear UI', value: false, cmd: 'ui',reverse: true },
  123.             { name: 'Show FPS', value: false, cmd: 'fps' },
  124.             { name: 'Show Health', value: false, cmd: 'raw_health_values' },
  125.             { name: 'Hide Name', value: false, cmd: 'names',reverse: true },
  126.             ];
  127.  
  128.             ;(function checkHasStorage() {
  129.                 var _localStorage = localStorage.getObject('diepStyle')
  130.                 var page = 1;
  131.                 if (nowSetting && nowSetting.saveTH) {
  132.                     page = nowSetting.saveTH;
  133.                 }
  134.                 if (_localStorage && _localStorage.saveList) {
  135.                     saveList = _localStorage.saveList;
  136.                     nowSetting = _localStorage.nowSetting;
  137.                 }
  138.                 if (!nowSetting || cmd == 'reset') {
  139.                     nowSetting = getBlankSetting();
  140.                     nowSetting.saveTH = page;
  141.                 }
  142.                 if (!saveList) saveList = getBlankSaveList();
  143.                 saveList[0]=getBlankSetting();
  144.                 ;(function checkMissing(){
  145.                     var plain=getBlankSetting();
  146.                     plain.renders.forEach((elem,th)=>{
  147.                         var index=nowSetting.renders.findIndex(now=>elem.cmd==now.cmd);
  148.                         if(index<0) {
  149.                             nowSetting.renders.splice(th,0,elem);
  150.                             saveList[nowSetting.saveTH].renders.splice(th,0,elem)
  151.                         }
  152.                     })
  153.                 })();
  154.             })();
  155.  
  156.             ;(function command(){
  157.                 diepStyle.command={};
  158.                 renders.forEach(elem=>{
  159.                     diepStyle.command[elem.cmd]={};
  160.                     if(elem.reverse) diepStyle.command[elem.cmd].reverse=true;
  161.                 })
  162.                 diepStyle.command.fn= function(cmd, value) {
  163.                     nowSetting.renders=nowSetting.renders.map(elem=>{
  164.                         if(elem.cmd==cmd) elem.value=value;
  165.                         return elem
  166.                     })
  167.                     if (diepStyle.command[cmd].reverse) value = !value;
  168.                     input.set_convar("ren_" + cmd, value);
  169.                 };
  170.             })();
  171.  
  172.             function getBlankSetting() {
  173.                 return { version: 0.08, saveTH: 1, lock: false, colors, renders };
  174.             }
  175.  
  176.             function getBlankSaveList() {
  177.                 var list = [];
  178.                 for (var i = 0; i < 6; i++) {
  179.                     list[i] = getBlankSetting();
  180.                     if (i == 0) list[i].isDefault = 'default,no save';
  181.                 }
  182.                 return clone(list);
  183.             };
  184.             Storage.prototype.pluginSave = function() {
  185.                 saveList[nowSetting.saveTH] = clone(nowSetting);
  186.                 var _storageObj = {
  187.                     nowSetting: clone(nowSetting),
  188.                     saveList: clone(saveList)
  189.                 }
  190.                 localStorage.setObject('diepStyle', _storageObj);
  191.             };
  192.             localStorage.pluginSave();
  193.         }
  194.  
  195.         function keyListen() {
  196.             var input = '';
  197.             document.addEventListener('keyup', function(evt) {
  198.                 var that = this;
  199.                 if (that.pluginOn == undefined) that.pluginOn = false;
  200.                 var e = window.event || evt;
  201.                 var key = e.which || e.keyCode;
  202.                 input += key;
  203.                 if (input.indexOf('2727') >= 0) {
  204.                     input = '';
  205.                     that.pluginOn = !that.pluginOn
  206.                     togglePanel(that.pluginOn);
  207.                     (function save() {
  208.                         if (!that.pluginOn) {
  209.                             localStorage.pluginSave();
  210.                         };
  211.                     })();
  212.                 }
  213.                 if (input.length > 10) input = input.substring(input.length - 10);
  214.             });
  215.         }
  216.  
  217.         function tempInit() {
  218.  
  219.             var colorObj = { th: 0 };
  220.             var setObj = { th: 0 }
  221.  
  222.             diepStyle.export = exportJSON;
  223.             init1();
  224.             loadColor();
  225.             setTimeout(diepStyle.resetRender, 1500);
  226.             diepStyle.resetColor = loadColor;
  227.  
  228.             function init1() {
  229.                 diepStyle.resetRender = resetRender;
  230.  
  231.                 var title = `<div class="title">Diep.Style Ver 0.08<br>
  232.                 Press Esc twice to toggle this</div>`;
  233.  
  234.                 var colorPlane = function(id) {
  235.                     return `{position:'left',width:300, height:200,onFineChange:'diepStyle.onColor(${id},this)'}`
  236.                 }
  237.  
  238.                 colorObj.setClass = function() {
  239.                     return `colorBlock colorBlock${this.th++}`
  240.                 }
  241.                 setObj.setClass = function() {
  242.                     return `setting setting${this.th++}`
  243.                 }
  244.  
  245.                 function resetRender(cmd) {
  246.                     document.querySelectorAll('#styleSetting .render').forEach(function(elem) {
  247.                         elem.outerHTML = ``
  248.                     })
  249.                     var it = document.querySelector('.renderBegin')
  250.                     it.insertAdjacentHTML('afterend', getRenderBody());
  251.                     it.remove();
  252.                     nowSetting.renders.forEach(function(elem) {
  253.                         diepStyle.command.fn(elem.cmd, elem.value);
  254.                     });
  255.                     listenerInit(cmd);
  256.  
  257.                 }
  258.                 var bodyRender = getRenderBody();
  259.                 var bodyColor = getColorBody();
  260.                 var bodyImport = getImportBody();
  261.  
  262.                 function getRenderBody() {
  263.                     var renders = nowSetting.renders;
  264.                     var th = -1;
  265.                     var html = `
  266.                     <div class="renderBegin">Render Setting</div>
  267.  
  268.                     <div class="row render">
  269.                     <div class="cell">${renders[++th].name} <br><span class="grid_base_value">${renders[th].value}</span></div>
  270.                     <div class="cell"><input type="range" name="grid_base_alpha" value=${renders[th].value*100} max="200"></div>
  271.                     </div>
  272.                     <div class="row render">
  273.                     <div class="cell">${renders[++th].name} <br><span class="stroke_intensity_value">${renders[th].value}</span></div>
  274.                     <div class="cell"><input type="range" name="stroke_soft_color_intensity" value=${renders[th].value*100} max="100"></div>
  275.                     </div>
  276.                     <div class="row render">
  277.                     <div class="cell">${renders[++th].name}</div>
  278.                     <div class="cell"><input type="checkbox" name="stroke_soft_color" ${renders[th].value?'checked':''}></div>
  279.                     </div>
  280.                     <div class="row render">
  281.                     <div class="cell">${renders[++th].name} <br><span class="border_value">${renders[th].value}</span></div>
  282.                     <div class="cell"><input type="range" name="border_color_alpha" value=${renders[th].value*100} max="100"></div>
  283.                     </div>
  284.                     <div class="row render">
  285.                     <div class="cell">${renders[++th].name} <br><span class="ui_scale_value">${renders[th].value}</span></div>
  286.                     <div class="cell"><input type="range" name="ui_scale" value=${renders[th].value*100} max="200"></div>
  287.                     </div>
  288.                     <div class="row render">
  289.                     <div class="cell">${renders[++th].name}</div>
  290.                     <div class="cell"><input type="checkbox" name="ui" ${renders[th].value?'checked':''}></div>
  291.                     </div>
  292.                     <div class="row render">
  293.                     <div class="cell">${renders[++th].name}</div>
  294.                     <div class="cell"><input type="checkbox" name="fps" ${renders[th].value?'checked':''}></div>
  295.                     </div>
  296.                     <div class="row render">
  297.                     <div class="cell">${renders[++th].name}</div>
  298.                     <div class="cell"><input type="checkbox" name="raw_health_values" ${renders[th].value?'checked':''}></div>
  299.                     </div>
  300.                     <div class="row render">
  301.                     <div class="cell">${renders[++th].name}</div>
  302.                     <div class="cell"><input type="checkbox" name="names" ${renders[th].value?'checked':''}></div>
  303.                     </div>
  304.                     `
  305.                     return html;
  306.                 }
  307.  
  308.                 function getColorBody() {
  309.                     var it = '<div class="row colorBegin">Color Setting</div>\n' +
  310.                     `<div class="row header hide theme">
  311.                     <div class="cell noBoard name"></div> 
  312.                     <div class="cell noBoard author"></div>
  313.                     </div>`
  314.                     nowSetting.colors.forEach(function(elem, th) {
  315.                         var id = elem.id;
  316.                         it += `
  317.                         <div class="row colorBlock colorBlock${th}">
  318.                         <div class="cell"></div>
  319.                         <div class="cell"><input class="jscolor ${colorPlane(`${id}`)}">  </div>
  320.                         </div>
  321.                         `;
  322.                     });
  323.                     return it
  324.                 }
  325.                 function getImportBody() {
  326.                     var html=
  327.                     `
  328.                     <div class="importBegin">Import / Export Save</div>
  329.                     <div class="row">
  330.                     <div class="cell">
  331.                     <button class="import">Import</button>
  332.                     </div>
  333.                     <div class="cell">
  334.                     <button class="export">Export</button>
  335.                     </div>
  336.                     </div>
  337.                     `
  338.                     return html
  339.                 }
  340.  
  341.                 var allBody =
  342.                 `
  343.                 <div class="pluginBody">${title}
  344.                 <hr>
  345.                 <div class="table">
  346.                 <span class="pluginLock"></span>
  347.                 ${bodyRender} ${bodyColor} ${bodyImport} <br>
  348.                 </div>
  349.                 </div>
  350.                 `;
  351.                 var getSaveBtns=function() {
  352.                     var btn='';
  353.                     for (var i = 0; i < 6; i++) {
  354.                         if(i==0) {btn+=`<button>Default</button>`;continue;}
  355.                         btn+=`<button>${i}</button>`;
  356.                     }
  357.                     return btn;
  358.                 }
  359.                 var footer=
  360.                 `
  361.                 <div class="footer">
  362.                 <div class="saveBtns">${getSaveBtns()}</div>
  363.                 <div class="otherBtns">
  364.                 <span class="lock"><button>Lock</button></span>
  365.                 <span class="reset"><button>Reset</button></span>
  366.                 </div>
  367.                 </div>
  368.                 `
  369.                 var id = 0;
  370.                 var temp = `<div id="styleSetting"> ${allBody} ${footer} </div>`;
  371.                 document.querySelector('body').insertAdjacentHTML('afterend', temp);
  372.  
  373.                 addScript('https://greasyfork.org/scripts/27023-jscolor/code/JSColor.js?version=173802');
  374.  
  375.                 function addScript(src) {
  376.                     var s = document.createElement('script');
  377.                     s.setAttribute('src', src);
  378.                     document.body.appendChild(s);
  379.                 }
  380.  
  381.                 function listenerInit(cmd) {
  382.                     ;(function (){
  383.                         var theName="grid_base_alpha";
  384.                         document.querySelector(`input[name=${theName}]`).addEventListener('input',
  385.                             function(e) {
  386.                                 var value = (e.target.value - e.target.value % 2) / 100
  387.                                 document.querySelector('.grid_base_value').innerHTML = value;
  388.                                 diepStyle.command.fn(theName, value);
  389.                             });
  390.                     })();
  391.                     ;(function (){
  392.                         var theName="stroke_soft_color_intensity";
  393.                         document.querySelector(`input[name=${theName}]`).addEventListener('input',
  394.                             function(e) {
  395.                                 var value = (e.target.value - e.target.value % 5)/100
  396.                                 document.querySelector('.stroke_intensity_value').innerHTML = value;
  397.                                 diepStyle.command.fn(theName, value);
  398.                             });
  399.                     })();
  400.                     ;(function (){
  401.                         var theName="stroke_soft_color";
  402.                         document.querySelector(`input[name=${theName}]`).addEventListener('change',
  403.                             function(e) {diepStyle.command.fn(theName, e.target.checked); });
  404.                     })();
  405.                     ;(function (){
  406.                         var theName="border_color_alpha";
  407.                         document.querySelector(`input[name=${theName}]`).addEventListener('input',
  408.                             function(e) {
  409.                                 var value = (e.target.value - e.target.value % 2) / 100
  410.                                 document.querySelector('.border_value').innerHTML = value;
  411.                                 diepStyle.command.fn(theName, value);
  412.                             });
  413.                     })();
  414.                     ;(function (){
  415.                         var theName="ui_scale";
  416.                         document.querySelector(`input[name=${theName}]`).addEventListener('input',
  417.                             function(e) {
  418.                                 var value = (e.target.value - e.target.value % 2) / 100
  419.                                 document.querySelector(`.${theName}_value`).innerHTML = value;
  420.                                 diepStyle.command.fn(theName, value);
  421.                             });
  422.                     })();
  423.                     ;(function (){
  424.                         var theName="ui";
  425.                         document.querySelector(`input[name=${theName}]`).addEventListener('change',
  426.                             function(e) {diepStyle.command.fn(theName, e.target.checked); });
  427.                     })();
  428.                     ;(function (){
  429.                         var theName="fps";
  430.                         document.querySelector(`input[name=${theName}]`).addEventListener('change',
  431.                             function(e) {diepStyle.command.fn(theName, e.target.checked); });
  432.                     })();
  433.                     ;(function (){
  434.                         var theName="raw_health_values";
  435.                         document.querySelector(`input[name=${theName}]`).addEventListener('change',
  436.                             function(e) {diepStyle.command.fn(theName, e.target.checked); });
  437.                     })();
  438.                     ;(function (){
  439.                         var theName="names";
  440.                         document.querySelector(`input[name=${theName}]`).addEventListener('change',
  441.                             function(e) {diepStyle.command.fn(theName, e.target.checked); });
  442.                     })();
  443.                     if(cmd=='reset') return;
  444.                     document.querySelector('button.import').addEventListener('click',function(e) {
  445.                         var example='[\n{"cmd":"ui_scale","value":"1.5"},'+
  446.                         '\n{"id":"8","value":"888888"}\n]';
  447.                         var gotValue=prompt('Enter The JSON\nExample:\n'+example,example.replace(/\s/g, ''));
  448.                         if(!isJson(gotValue)){
  449.                             alert('Code Incorrect\nPlz git gud and check your JSON');
  450.                             return
  451.                         };
  452.                         var gotArr=JSON.parse(gotValue);
  453.                         if(!gotArr) return;
  454.                         gotArr.forEach(function(elem) {
  455.                             nowSetting.colors=nowSetting.colors.map(function(now) {
  456.                                 if(elem.id && now.id==elem.id) now.color=elem.value;
  457.                                 if(!elem.id&&elem.cmd && now.cmd==elem.cmd) now.color=elem.value;
  458.                                 return now
  459.                             });
  460.                             nowSetting.renders=nowSetting.renders.map(function(now) {
  461.                                 if(elem.cmd && now.cmd==elem.cmd) now.value=elem.value;
  462.                                 return now
  463.                             });
  464.                             if(elem.cmd=='ui_replace_colors') {
  465.                                 var uiTH = nowSetting.colors.findIndex(elem => elem.name == 'UI Color1');
  466.                                 for (var i = 0; i < 8; i++) {
  467.                                     nowSetting.colors[uiTH + i].color=elem.value[i];
  468.                                 }
  469.                             };
  470.                             if(elem.theme){
  471.                                 if(elem.theme.name||elem.theme.author) nowSetting.theme=elem.theme;
  472.                             }else{
  473.                                 elem.theme={};
  474.                             };
  475.                         });
  476.                         document.querySelectorAll('.saveBtns button')[nowSetting.saveTH].click();
  477.                         function isJson(str) {
  478.                             try {
  479.                                 JSON.parse(str);
  480.                             } catch (e) {
  481.                                 return false;
  482.                             }
  483.                             if(typeof JSON.parse(str)=='object') return true;
  484.                         }
  485.                     });
  486.                     document.querySelector('button.export').addEventListener('click',function(e) {
  487.                         prompt('Copy the Json',diepStyle.export('one'));
  488.                     });
  489.                     document.querySelectorAll('.saveBtns button').forEach((elem, th) => {
  490.                         elem.addEventListener('click', function() {
  491.                             localStorage.pluginSave();
  492.                             nowSetting=clone(saveList[th]);
  493.                             nowSetting.saveTH=th;
  494.                             diepStyle.resetColor();
  495.                             diepStyle.resetRender('reset');
  496.                             updateSaveBtns();
  497.                         })
  498.                     })
  499.                     document.querySelector('.lock button').addEventListener('click',
  500.                         function(e) {
  501.                             nowSetting.lock=!nowSetting.lock;
  502.                             updateSaveBtns();
  503.                         });
  504.                     document.querySelector('.reset button').addEventListener('click',
  505.                         function(e) {
  506.                             diepStyle.storageInit('reset');
  507.                             diepStyle.resetColor();
  508.                             diepStyle.resetRender('reset');
  509.                             updateSaveBtns();
  510.                         });
  511.                     updateSaveBtns();
  512.                     function updateSaveBtns() {
  513.                         var theTH=nowSetting.saveTH;
  514.                         var status=saveList[theTH];
  515.                         var lockBtn=document.querySelector('.lock button');
  516.                         var resetBtn=document.querySelector('.reset button');
  517.                         if(theTH==0){
  518.                             lockBtn.disabled = true;
  519.                             resetBtn.disabled = true;
  520.                             nowSetting.lock=true;
  521.                         }else{
  522.                             resetBtn.disabled = nowSetting.lock;
  523.                             lockBtn.disabled = false;
  524.                         }
  525.                         if(resetBtn.disabled) {
  526.                             document.querySelector('.table').classList.add('noClicks');
  527.                             lockBtn.innerHTML='locked';
  528.                         }else{
  529.                             document.querySelector('.table').classList.remove('noClicks');
  530.                             lockBtn.innerHTML='no lock';
  531.                         }
  532.                         ;(function (){
  533.                             document.querySelectorAll('.saveBtns button').forEach(function(elem, th) {
  534.                                 elem.classList.remove('chosenBtn');
  535.                                 if(theTH==th) elem.classList.add('chosenBtn');
  536.                             })
  537.                         })();
  538.                     }
  539.                 }
  540.             }
  541.             function loadColor() {
  542.                 if(nowSetting.theme){
  543.                     document.querySelector('.theme').classList.remove('hide');
  544.                     var it=document.querySelector('.theme .name');
  545.                     it.innerText='Theme '+nowSetting.theme.name;
  546.                     it=document.querySelector('.theme .author');
  547.                     it.innerText='by '+nowSetting.theme.author;
  548.                 }else{
  549.                     document.querySelector('.theme').classList.add('hide');
  550.                 }
  551.  
  552.                 nowSetting.colors.some(function(elem, th) {
  553.                     var target = document.querySelector(`.colorBlock${th}`);
  554.                     if (!target || !target.querySelector('.cell input').jscolor) {
  555.                         setTimeout(loadColor, 500);
  556.                         return true
  557.                     }
  558.                     onColor(elem.id, elem.color);
  559.                     target.querySelector('.cell').innerHTML = elem.name;
  560.                     target.querySelector('.cell input').jscolor.fromString(elem.color);
  561.                 })
  562.             }
  563.             function exportJSON(cmd) {
  564.                 var toExport=[];
  565.                 if(cmd=='one') toExport=write(nowSetting);
  566.                 if(cmd=='all') saveList.forEach(elem=>toExport.push(write(elem)));
  567.                 return JSON.stringify(toExport);
  568.  
  569.                 function write(now) {
  570.                     var array=[];
  571.                     now.colors.forEach(function(elem){
  572.                         if(elem.id&&elem.id<50) array.push({id:elem.id,value:elem.color});
  573.                         if(elem.id&&elem.id>=50&&elem.id<100) array.push({cmd:elem.cmd,value:elem.color});
  574.                         if(!elem.id&&elem.cmd) array.push({cmd:elem.cmd,value:elem.color});
  575.                     });
  576.                     array.push({cmd:'ui_replace_colors',value:diepStyle.uiColorMap('array')});
  577.                     now.renders.forEach(function(elem){
  578.                         array.push({cmd:elem.cmd,value:elem.value});
  579.                     });
  580.                     if(now.theme){
  581.                         array.unshift({theme:{
  582.                             name:now.theme.name||'',
  583.                             author:now.theme.author||''}});
  584.                     }else{
  585.                         array.unshift({theme:{name:'',author:''}});
  586.                     }
  587.                     return array
  588.                 }
  589.             }
  590.         }
  591.         function onColor(id, e) {
  592.             var target = id;
  593.             var color=e.toString();
  594.             if (id >= 0 && id < 50) {
  595.                 input.execute(`net_replace_color ${target} 0x${color}`)
  596.             } else if(id >= 50 && id < 100){
  597.                 var cmd=diepStyle.colorMap.get(id).cmd
  598.                 input.set_convar(cmd, `0x${color}`);
  599.             } else{
  600.                 input.execute('ui_replace_colors'+diepStyle.uiColorMap('0x'));
  601.             }
  602.             nowSetting.colors = nowSetting.colors.map(function(elem) {
  603.                 if (elem.id === id) elem.color = color; 
  604.                 return elem
  605.             })
  606.         }
  607.         function styleInit() {
  608.             addGlobalStyle(`#styleSetting{padding: 0.2em; margin:0.2em; position: absolute;top: 0;right: 0;width: 30%;
  609.                 min-width:20em; background-color: rgba(200,200,200,0.8);display:none;border: 1px solid black;height: 92vh;}`);
  610.             addGlobalStyle(".table{ display: table; text-align: center; width: 99%;}");
  611.             addGlobalStyle(".row{ display: table-row; }");
  612.             addGlobalStyle(`.cell{ display: table-cell;}`);
  613.             addGlobalStyle(`.cell:not(.noBoard){ display: table-cell; padding: 0.1em 0.3em;border: 1px solid black;}`);
  614.             addGlobalStyle("input[type=checkbox],input[type=range]{transform: scale(1.2); }");
  615.  
  616.             addGlobalStyle(`.pluginBody{height: 90%; overflow-y: auto;}`);
  617.             addGlobalStyle(`.colorBegin, .renderBegin, .importBegin,.header{font-size:1.2em; line-height:1.5em;}`);
  618.             addGlobalStyle(`.saveBtns button{margin: 0 1.5%; padding: 0.2em 0.5em;}`);
  619.             addGlobalStyle(`@-moz-document url-prefix() {.saveBtns button{margin: 0 1%;padding: 0.1em 0.3em;} } }`);
  620.             addGlobalStyle(`.otherBtns button{margin: 0 1.5%; padding: 0.2em 0.5em;}`);
  621.             addGlobalStyle(`.footer{text-align:center;height:10%; border: 1px solid black;}`);
  622.             addGlobalStyle(`.footer > *{margin:0.7vh 0;}`);
  623.  
  624.             addGlobalStyle(`.backRed{background-color:#f14e54}`);
  625.             addGlobalStyle(`.chosenBtn{-webkit-filter: brightness(0.8);filter:brightness(0.8);}`)
  626.             addGlobalStyle(`.noClicks{pointer-events:none; -webkit-filter: opacity(50%); filter: opacity(50%);}`)
  627.             addGlobalStyle(`.hide{display:none}`)
  628.  
  629.             function addGlobalStyle(css) {
  630.                 var head, style;
  631.                 head = document.getElementsByTagName('head')[0];
  632.                 if (!head) {return;}
  633.                 style = document.createElement('style');
  634.                 style.type = 'text/css';
  635.                 style.innerHTML = css;
  636.                 head.appendChild(style);
  637.             }
  638.         }
  639.     }
  640.  
  641.     function togglePanel(tf) {
  642.         if(tf){
  643.             try{
  644.                 document.querySelector('#styleSetting').style.display = "block";
  645.             }catch(err){
  646.                 var warn='\n\nYou can DELETE ALL PLUGIN SAVES to fix this'+
  647.                 '\nType delete to confirm'+
  648.                 '\nor cancel to download all saves';
  649.                 var gotValue=prompt('Got an error\n'+err+warn);
  650.                 if(gotValue=='delete'){
  651.                     localStorage.removeItem('diepStyle');
  652.                     alert('Deleted,refresh to take effect');
  653.                     return
  654.                 }else{
  655.                     download('diep.style saves.txt',diepStyle.export('all'))
  656.                 };
  657.             }
  658.         }else{
  659.             document.querySelector('#styleSetting').style.display = "none";
  660.         }
  661.         function download(filename, text) {
  662.             var element = document.createElement('a');
  663.             element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
  664.             element.setAttribute('download', filename);
  665.  
  666.             element.style.display = 'none';
  667.             document.body.appendChild(element);
  668.  
  669.             element.click();
  670.  
  671.             document.body.removeChild(element);
  672.         }
  673.     }
  674. })();