☰

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.                                 console.log('save')
  112.                             };
  113.                         })();
  114.                     }
  115.                     if (input.length > 10) input = input.substring(input.length - 10);
  116.                 });
  117.             }
  118.  
  119.             function tempInit() {
  120.                 var colorObj = { th: 0 };
  121.                 var setObj = { th: 0 }
  122.                 var renders = storageObj.renders;
  123.                 init1();
  124.                 loadColor();
  125.                 setTimeout(diepStyle.resetRender, 1500);
  126.                 diepStyle.init1 = init1;
  127.                 diepStyle.resetColor = loadColor;
  128.  
  129.                 function init1() {
  130.                     diepStyle.resetRender = resetRender;
  131.  
  132.                     var title = `<div>Diep.Style Ver 0.03 </div>`;
  133.                     var descr = `<div>Press Esc twice to toggle this setting.</div>`
  134.  
  135.                     var colorPlane = function(id) {
  136.                         return `{onFineChange:'diepStyle.onColor(${id},this)'}`
  137.                     }
  138.  
  139.                     colorObj.setClass = function() {
  140.                         return `colorBlock colorBlock${this.th++}`
  141.                     }
  142.                     setObj.setClass = function() {
  143.                         return `setting setting${this.th++}`
  144.                     }
  145.  
  146.                     function resetRender() {
  147.                         document.querySelectorAll('#styleSetting .render').forEach(function(elem) {
  148.                             elem.outerHTML = ``
  149.                         })
  150.                         document.querySelector('.renderBegin').insertAdjacentHTML('afterend', getRenderBody());
  151.                         diepStyle.command.gridBase(storageObj.renders[0].value);
  152.                         diepStyle.command.outline(!storageObj.renders[1].value);
  153.                         diepStyle.command.fps(storageObj.renders[2].value);
  154.                         diepStyle.command.showBackground(!storageObj.renders[3].value);
  155.                         listenerInit();
  156.  
  157.                     }
  158.                     var bodyRender = getRenderBody();
  159.                     var bodyColor = getColorBody1();
  160.  
  161.                     function getRenderBody() {
  162.                         var th = -1;
  163.                         var html = `
  164.                     <span class="renderBegin"></span>
  165.                     <div class="row render">
  166.                         <div class="cell">${renders[++th].name} <br><span class="grid_base_value">${renders[th].value}</span></div>
  167.                         <div class="cell"><input type="range" name="grid_base_alpha" value=${renders[th].value*100} max="200"></div>
  168.                     </div>
  169.                     <div class="row render">
  170.                         <div class="cell">${renders[++th].name}</div>
  171.                         <div class="cell"><input type="checkbox" name="stroke_soft_color" ${renders[th].value?'checked':''}></div>
  172.                     </div>
  173.                     <div class="row render">
  174.                         <div class="cell">${renders[++th].name}</div>
  175.                         <div class="cell"><input type="checkbox" name="fps" ${renders[th].value?'checked':''}></div>
  176.                     </div>
  177.                     <div class="row render hide">
  178.                         <div class="cell">${renders[++th].name}</div>
  179.                         <div class="cell"><input type="checkbox" name="background" ${renders[th].value?'checked':''}></div>
  180.                     </div>
  181.                     `
  182.                         return html;
  183.                     }
  184.  
  185.                     function getColorBody1() {
  186.                         var it = '<div class="row colorBegin">Color Setting</div>';
  187.                         storageObj.colors.forEach(function(elem, th) {
  188.                                     var id = elem.id;
  189.                                     it += `
  190.                                 <div class="row colorBlock colorBlock${th}">
  191.                                     <div class="cell"></div>
  192.                                     <div class="cell"><input class="jscolor ${colorPlane(`${id}`)}">  </div>
  193.                                 </div>
  194.                               `;
  195.                     });
  196.                     return it
  197.                 }
  198.                 var allBody =
  199.                     `
  200.                     <div class="table">
  201.                         ${bodyRender} ${bodyColor}
  202.                         <div class="row resetButton">
  203.                             <div class="cell reset"><button>Reset</button></div>
  204.                         </div>
  205.                     </div>
  206.                 `;
  207.                         // <div class="row"><hr></div>
  208.                 var id = 0;
  209.                 var temp = `<div id="styleSetting"> ${title} ${allBody} ${descr} </div>`;
  210.                 document.querySelector('body').insertAdjacentHTML('afterend', temp);
  211.  
  212.                 function listenerInit() {
  213.                     document.querySelector('input[name="grid_base_alpha"]').addEventListener('input',
  214.                         function(e) {
  215.                             var value = (e.target.value - e.target.value % 2) / 100
  216.                             document.querySelector('.grid_base_value').innerHTML = value;
  217.                             diepStyle.command.gridBase(value);
  218.                             storageObj.renders[0].value = value;
  219.  
  220.                             function renderExecute() {}
  221.                         });
  222.                     document.querySelector('input[name="stroke_soft_color"]').addEventListener('change',
  223.                         function(e) {
  224.                             diepStyle.command.outline(!e.target.checked);
  225.                             storageObj.renders[1].value = e.target.checked;
  226.                         });
  227.                     document.querySelector('input[name="fps"]').addEventListener('change',
  228.                         function(e) {
  229.                             diepStyle.command.fps(e.target.checked);
  230.                             storageObj.renders[2].value = e.target.checked;
  231.                         });
  232.                     document.querySelector('input[name="background"]').addEventListener('change',
  233.                         function(e) {
  234.                             diepStyle.command.showBackground(!e.target.checked);
  235.                             storageObj.renders[3].value = e.target.checked;
  236.                         });
  237.                     document.querySelector('.reset button').addEventListener('click',
  238.                         function(e) {
  239.                             diepStyle.storageInit('reset');
  240.                             diepStyle.resetColor();
  241.                             diepStyle.resetRender();
  242.                         });
  243.                     // document.querySelector('input[name="chaotic"]').addEventListener('change',
  244.                     //     function(e) {
  245.                     //         if (e.target.checked) {
  246.                     //             onColor(2, 'f14e54'); //you ffa
  247.                     //             onColor(15, 'f14e54'); //other ffa
  248.                     //             onColor(3, 'f14e54'); //blue
  249.                     //             onColor(4, 'f14e54'); //red
  250.                     //             onColor(5, 'f14e54'); //purple
  251.                     //             onColor(6, 'f14e54'); //green
  252.                     //         } else {
  253.                     //             onColor(2, '00b2e1'); //you ffa
  254.                     //             onColor(15, 'f14e54'); //other ffa
  255.                     //             onColor(3, '00b2e1'); //blue
  256.                     //             onColor(4, 'f14e54'); //red
  257.                     //             onColor(5, 'bf7ff5'); //purple
  258.                     //             onColor(6, '00e16e'); //green
  259.                     //         }
  260.                     //     }
  261.                     // );
  262.                 }
  263.             }
  264.  
  265.             function loadColor() {
  266.                                     console.log(storageObj);
  267.                 storageObj.colors.some(function(elem, th) {
  268.  
  269.                     var target = document.querySelector(`.colorBlock${th}`);
  270.                     if (!target || !target.querySelector('.cell input').jscolor) {
  271.                         setTimeout(loadColor, 500);
  272.                         return true
  273.                     }
  274.                     onColor(elem.id, elem.color);
  275.                     target.querySelector('.cell').innerHTML = elem.name;
  276.                     target.querySelector('.cell input').jscolor.fromString(elem.color);
  277.                 })
  278.             }
  279.         }
  280.  
  281.         function onColor(id, e) {
  282.             let target = id;
  283.             // id === 100 ? target = e.valueElement.getAttribute('target') : '';
  284.             if (!isLocal) {
  285.                 if (id >= 0 && id < 100) {
  286.                     input.execute(`net_replace_color ${target} 0x${e}`)
  287.                 } 
  288.                 switch(id) {
  289.                     case 100: input.set_convar("ren_background_color", `0x${e}`); break;
  290.                     case 101: input.set_convar("ren_border_color", `0x${e}`); break;
  291.                     case 102: input.set_convar("ren_minimap_border_color", `0x${e}`); break;
  292.                     case 103: input.set_convar("ren_health_color", `0x${e}`); break;
  293.                     case 104: input.set_convar("ren_stroke_solid_color", `0x${e}`); break;
  294.                 }
  295.  
  296.  
  297.                     // input.set_convar("ren_background_color", `0x${e}`)
  298.             }
  299.             storageObj.colors = storageObj.colors.map(function(elem) {
  300.                 if (elem.id === id) {
  301.                     elem.color = e.toString();
  302.                 }
  303.                 return elem
  304.             })
  305.         }
  306.  
  307.         function styleInit() {
  308.             addGlobalStyle(`#styleSetting{padding: 0.2em; margin:0.2em; position: absolute;top: 0;right: 0;width: 30%;
  309.             background-color: rgba(200,200,200,0.7);display:none;border: 1px solid black;height: 90%;overflow-y: auto;}`);
  310.             addGlobalStyle(".table{ display: table; width: 100%;}");
  311.             addGlobalStyle(".table{ display: table; text-align: center; width: 100%;}");
  312.             addGlobalStyle(".row{ display: table-row; }");
  313.             addGlobalStyle(`.cell{ display: table-cell; padding: 0px 0.3em;border: 1px solid black;}`);
  314.             addGlobalStyle(`.backRed{background-color:#f14e54}`)
  315.             addGlobalStyle(`.hide{display:none}`)
  316.  
  317.             function addGlobalStyle(css) {
  318.                 var head, style;
  319.                 head = document.getElementsByTagName('head')[0];
  320.                 if (!head) {
  321.                     return;
  322.                 }
  323.                 style = document.createElement('style');
  324.                 style.type = 'text/css';
  325.                 style.innerHTML = css;
  326.                 head.appendChild(style);
  327.             }
  328.         }
  329.     }
  330.  
  331.     function togglePanel(tf) {
  332.         tf ?
  333.             document.querySelector('#styleSetting').style.display = "block" :
  334.             document.querySelector('#styleSetting').style.display = "none";
  335.  
  336.     }
  337.  
  338. })();