☰

Diep.style

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

目前為 2017-03-26 提交的版本，檢視 最新版本。

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