☰

Diep.style

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

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

  1. // ==UserScript==
  2. // @name         Diep.style
  3. // @namespace    https://www.reddit.com/r/Diepio/comments/5y1np1/diepstyle_plugin/
  4. // @version      0.03
  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. // @require      https://greasyfork.org/scripts/27023-jscolor/code/JSColor.js?version=173802
  10. // ==/UserScript==
  11.  
  12. window.diepStyle = {};
  13. addScript('https://greasyfork.org/scripts/27023-jscolor/code/JSColor.js?version=173802');
  14. var localStorage;
  15. var storageObj = localStorage.getObject('diepStyle');
  16. if (location.href.indexOf('file://') >= 0) var isLocal = true;
  17.  
  18. function addScript(src) {
  19.     var s = document.createElement('script');
  20.     s.setAttribute('src', src);
  21.     document.body.appendChild(s);
  22.  
  23.     localStorage = window.localStorage;
  24.     Storage.prototype.setObject = function(key, value) {
  25.         this.setItem(key, JSON.stringify(value));
  26.     }
  27.  
  28.     Storage.prototype.getObject = function(key) {
  29.         var value = this.getItem(key);
  30.         return value && JSON.parse(value);
  31.     }
  32. }
  33. (function() {
  34.         'use strict';
  35.         pluginInit();
  36.  
  37.         function pluginInit() {
  38.             gameCommandInit();
  39.             storageInit();
  40.             keyListen();
  41.             tempInit();
  42.             styleInit();
  43.             diepStyle.onColor = onColor;
  44.             diepStyle.storageInit = storageInit;
  45.             // togglePanel(true);
  46.  
  47.             function gameCommandInit() {
  48.                 diepStyle.command = {
  49.                     gridBase: function(v) { input.set_convar("ren_grid_base_alpha", v); },
  50.                     outline: function(v) { input.set_convar("ren_stroke_soft_color", v); },
  51.                     fps: function(v) { input.set_convar("ren_fps", v); },
  52.                     showBackground: function(v) { input.set_convar("ren_background", v); },
  53.                 }
  54.  
  55.             }
  56.  
  57.             function storageInit(cmd) {
  58.                 var colors = [
  59.                     { id: 100, name: 'Background 1', color: 'CDCDCD' },
  60.                     { id: 101, name: 'Background 2', color: '797979' },
  61.                     { id: 102, name: 'Minimap', color: '797979' },
  62.                     { id: 2, name: 'You FFA', color: '00b1de' },
  63.                     { id: 15, name: 'Other FFA', color: 'f14e54' },
  64.                     { id: 3, name: 'Blue team', color: '00b1de' },
  65.                     { id: 4, name: 'Red team', color: 'f14e54' },
  66.                     { id: 5, name: 'Purple team', color: 'bf7ff5' },
  67.                     { id: 6, name: 'Green team', color: '00e16e' },
  68.                     { id: 13, name: 'Leader Board', color: '64ff8c' },
  69.                     { id: 14, name: 'Waze Wall', color: 'bbbbbb' },
  70.                     { id: 8, name: 'Square', color: 'ffe869' },
  71.                     { id: 9, name: 'Triangle', color: 'fc7677' },
  72.                     { id: 10, name: 'Pentagon', color: '768dfc' },
  73.                     { id: 11, name: 'Crasher', color: 'f177dd' },
  74.                     { id: 1, name: 'Turret', color: '999999' },
  75.                     { id: 0, name: 'Smasher', color: '4f4f4f' },
  76.                     { id: 103, name: 'Health Bar', color: '85e37d' },
  77.                     { id: 104, name: 'Outline', color: '555555' },
  78.                 ]
  79.                 var renders = [
  80.                     { name: 'Grid Base Alpha', value: 0.1 },
  81.                     { name: 'Show Outline', value: false },
  82.                     { name: 'Show FPS', value: false },
  83.                     { name: 'Dark Mode', value: false }
  84.                 ];
  85.                 (function checkHasStorage() {
  86.                     if (!storageObj) storageObj = { version: 0.03, colors: colors, renders: renders };
  87.                     if (!storageObj.colors || cmd == 'reset') {
  88.                         storageObj.colors = colors;
  89.                         storageObj.renders = renders;
  90.                         diepStyle.it = renders;
  91.                     }
  92.                 })();
  93.                 localStorage.setObject('diepStyle', storageObj);
  94.             }
  95.  
  96.             function keyListen() {
  97.                 var input = '';
  98.                 document.addEventListener('keyup', function(evt) {
  99.                     var that = this;
  100.                     if (that.pluginOn == undefined) that.pluginOn = false;
  101.                     var e = window.event || evt;
  102.                     var key = e.which || e.keyCode;
  103.                     input += key;
  104.                     if (input.indexOf('2727') >= 0) {
  105.                         input = '';
  106.                         that.pluginOn = !that.pluginOn
  107.                         togglePanel(that.pluginOn);
  108.                         (function save() {
  109.                             if (!that.pluginOn) {
  110.                                 localStorage.setObject('diepStyle', storageObj)
  111.                             };
  112.                         })();
  113.                     }
  114.                     if (input.length > 10) input = input.substring(input.length - 10);
  115.                 });
  116.             }
  117.  
  118.             function tempInit() {
  119.                 var colorObj = { th: 0 };
  120.                 var setObj = { th: 0 }
  121.                 var renders = storageObj.renders;
  122.                 init1();
  123.                 loadColor();
  124.                 setTimeout(diepStyle.resetRender, 1500);
  125.                 diepStyle.init1 = init1;
  126.                 diepStyle.resetColor = loadColor;
  127.  
  128.                 function init1() {
  129.                     diepStyle.resetRender = resetRender;
  130.  
  131.                     var title = `<div>Diep.Style Ver 0.03 </div>`;
  132.                     var descr = `<div>Press Esc twice to toggle this setting.</div>`
  133.  
  134.                     var colorPlane = function(id) {
  135.                         return `{onFineChange:'diepStyle.onColor(${id},this)'}`
  136.                     }
  137.  
  138.                     colorObj.setClass = function() {
  139.                         return `colorBlock colorBlock${this.th++}`
  140.                     }
  141.                     setObj.setClass = function() {
  142.                         return `setting setting${this.th++}`
  143.                     }
  144.  
  145.                     function resetRender() {
  146.                         document.querySelectorAll('#styleSetting .render').forEach(function(elem) {
  147.                             elem.outerHTML = ``
  148.                         })
  149.                         document.querySelector('.renderBegin').insertAdjacentHTML('afterend', getRenderBody());
  150.                         diepStyle.command.gridBase(storageObj.renders[0].value);
  151.                         diepStyle.command.outline(!storageObj.renders[1].value);
  152.                         diepStyle.command.fps(storageObj.renders[2].value);
  153.                         diepStyle.command.showBackground(!storageObj.renders[3].value);
  154.                         listenerInit();
  155.  
  156.                     }
  157.                     var bodyRender = getRenderBody();
  158.                     var bodyColor = getColorBody1();
  159.  
  160.                     function getRenderBody() {
  161.                         var th = -1;
  162.                         var html = `
  163.                     <span class="renderBegin"></span>
  164.                     <div class="row render">
  165.                         <div class="cell">${renders[++th].name} <br><span class="grid_base_value">${renders[th].value}</span></div>
  166.                         <div class="cell"><input type="range" name="grid_base_alpha" value=${renders[th].value*100} max="200"></div>
  167.                     </div>
  168.                     <div class="row render">
  169.                         <div class="cell">${renders[++th].name}</div>
  170.                         <div class="cell"><input type="checkbox" name="stroke_soft_color" ${renders[th].value?'checked':''}></div>
  171.                     </div>
  172.                     <div class="row render">
  173.                         <div class="cell">${renders[++th].name}</div>
  174.                         <div class="cell"><input type="checkbox" name="fps" ${renders[th].value?'checked':''}></div>
  175.                     </div>
  176.                     <div class="row render hide">
  177.                         <div class="cell">${renders[++th].name}</div>
  178.                         <div class="cell"><input type="checkbox" name="background" ${renders[th].value?'checked':''}></div>
  179.                     </div>
  180.                     `
  181.                         return html;
  182.                     }
  183.  
  184.                     function getColorBody1() {
  185.                         var it = '<div class="row colorBegin">Color Setting</div>';
  186.                         storageObj.colors.forEach(function(elem, th) {
  187.                                     var id = elem.id;
  188.                                     it += `
  189.                                 <div class="row colorBlock colorBlock${th}">
  190.                                     <div class="cell"></div>
  191.                                     <div class="cell"><input class="jscolor ${colorPlane(`${id}`)}">  </div>
  192.                                 </div>
  193.                               `;
  194.                     });
  195.                     return it
  196.                 }
  197.                 var allBody =
  198.                     `
  199.                     <div class="table">
  200.                         ${bodyRender} ${bodyColor}
  201.                         <div class="row resetButton">
  202.                             <div class="cell reset"><button>Reset</button></div>
  203.                         </div>
  204.                     </div>
  205.                 `;
  206.                         // <div class="row"><hr></div>
  207.                 var id = 0;
  208.                 var temp = `<div id="styleSetting"> ${title} ${allBody} ${descr} </div>`;
  209.                 document.querySelector('body').insertAdjacentHTML('afterend', temp);
  210.  
  211.                 function listenerInit() {
  212.                     document.querySelector('input[name="grid_base_alpha"]').addEventListener('input',
  213.                         function(e) {
  214.                             var value = (e.target.value - e.target.value % 2) / 100
  215.                             document.querySelector('.grid_base_value').innerHTML = value;
  216.                             diepStyle.command.gridBase(value);
  217.                             storageObj.renders[0].value = value;
  218.  
  219.                             function renderExecute() {}
  220.                         });
  221.                     document.querySelector('input[name="stroke_soft_color"]').addEventListener('change',
  222.                         function(e) {
  223.                             diepStyle.command.outline(!e.target.checked);
  224.                             storageObj.renders[1].value = e.target.checked;
  225.                         });
  226.                     document.querySelector('input[name="fps"]').addEventListener('change',
  227.                         function(e) {
  228.                             diepStyle.command.fps(e.target.checked);
  229.                             storageObj.renders[2].value = e.target.checked;
  230.                         });
  231.                     document.querySelector('input[name="background"]').addEventListener('change',
  232.                         function(e) {
  233.                             diepStyle.command.showBackground(!e.target.checked);
  234.                             storageObj.renders[3].value = e.target.checked;
  235.                         });
  236.                     document.querySelector('.reset button').addEventListener('click',
  237.                         function(e) {
  238.                             diepStyle.storageInit('reset');
  239.                             diepStyle.resetColor();
  240.                             diepStyle.resetRender();
  241.                         });
  242.                     // document.querySelector('input[name="chaotic"]').addEventListener('change',
  243.                     //     function(e) {
  244.                     //         if (e.target.checked) {
  245.                     //             onColor(2, 'f14e54'); //you ffa
  246.                     //             onColor(15, 'f14e54'); //other ffa
  247.                     //             onColor(3, 'f14e54'); //blue
  248.                     //             onColor(4, 'f14e54'); //red
  249.                     //             onColor(5, 'f14e54'); //purple
  250.                     //             onColor(6, 'f14e54'); //green
  251.                     //         } else {
  252.                     //             onColor(2, '00b2e1'); //you ffa
  253.                     //             onColor(15, 'f14e54'); //other ffa
  254.                     //             onColor(3, '00b2e1'); //blue
  255.                     //             onColor(4, 'f14e54'); //red
  256.                     //             onColor(5, 'bf7ff5'); //purple
  257.                     //             onColor(6, '00e16e'); //green
  258.                     //         }
  259.                     //     }
  260.                     // );
  261.                 }
  262.             }
  263.  
  264.             function loadColor() {
  265.                 storageObj.colors.some(function(elem, th) {
  266.  
  267.                     var target = document.querySelector(`.colorBlock${th}`);
  268.                     if (!target || !target.querySelector('.cell input').jscolor) {
  269.                         setTimeout(loadColor, 500);
  270.                         return true
  271.                     }
  272.                     onColor(elem.id, elem.color);
  273.                     target.querySelector('.cell').innerHTML = elem.name;
  274.                     target.querySelector('.cell input').jscolor.fromString(elem.color);
  275.                 })
  276.             }
  277.         }
  278.  
  279.         function onColor(id, e) {
  280.             let target = id;
  281.             // id === 100 ? target = e.valueElement.getAttribute('target') : '';
  282.             if (!isLocal) {
  283.                 if (id >= 0 && id < 100) {
  284.                     input.execute(`net_replace_color ${target} 0x${e}`)
  285.                 } 
  286.                 switch(id) {
  287.                     case 100: input.set_convar("ren_background_color", `0x${e}`); break;
  288.                     case 101: input.set_convar("ren_border_color", `0x${e}`); break;
  289.                     case 102: input.set_convar("ren_minimap_border_color", `0x${e}`); break;
  290.                     case 103: input.set_convar("ren_health_color", `0x${e}`); break;
  291.                     case 104: input.set_convar("ren_stroke_solid_color", `0x${e}`); break;
  292.                 }
  293.  
  294.  
  295.                     // input.set_convar("ren_background_color", `0x${e}`)
  296.             }
  297.             storageObj.colors = storageObj.colors.map(function(elem) {
  298.                 if (elem.id === id) {
  299.                     elem.color = e.toString();
  300.                 }
  301.                 return elem
  302.             })
  303.         }
  304.  
  305.         function styleInit() {
  306.             addGlobalStyle(`#styleSetting{padding: 0.2em; margin:0.2em; position: absolute;top: 0;right: 0;width: 30%;
  307.             background-color: rgba(200,200,200,0.7);display:none;border: 1px solid black;height: 90%;overflow-y: auto;}`);
  308.             addGlobalStyle(".table{ display: table; width: 100%;}");
  309.             addGlobalStyle(".table{ display: table; text-align: center; width: 100%;}");
  310.             addGlobalStyle(".row{ display: table-row; }");
  311.             addGlobalStyle(`.cell{ display: table-cell; padding: 0px 0.3em;border: 1px solid black;}`);
  312.             addGlobalStyle(`.backRed{background-color:#f14e54}`)
  313.             addGlobalStyle(`.hide{display:none}`)
  314.  
  315.             function addGlobalStyle(css) {
  316.                 var head, style;
  317.                 head = document.getElementsByTagName('head')[0];
  318.                 if (!head) {
  319.                     return;
  320.                 }
  321.                 style = document.createElement('style');
  322.                 style.type = 'text/css';
  323.                 style.innerHTML = css;
  324.                 head.appendChild(style);
  325.             }
  326.         }
  327.     }
  328.  
  329.     function togglePanel(tf) {
  330.         tf ?
  331.             document.querySelector('#styleSetting').style.display = "block" :
  332.             document.querySelector('#styleSetting').style.display = "none";
  333.  
  334.     }
  335.  
  336. })();