☰

Diep.style

Press Esc twice to toggle the menu

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

  1. // ==UserScript==
  2. // @name         Diep.style
  3. // @namespace    http://tampermonkey.net/
  4. // @version      0.01
  5. // @description  Press Esc twice to toggle the menu
  6. // @author       sbk2015
  7. // @match        http://*diep.io/*
  8. // @grant        none
  9. // ==/UserScript==
  10.  
  11. (function() {
  12.     'use strict';
  13.     (function init() {
  14.         keyListen();
  15.         tempInit();
  16.         styleInit();
  17.         // togglePanel(true);
  18.  
  19.         function keyListen() {
  20.             var input = '';
  21.             document.addEventListener('keyup', function(evt) {
  22.                 if (this.settingOn == undefined) this.settingOn = false;
  23.  
  24.                 var e = window.event || evt;
  25.                 var key = e.which || e.keyCode;
  26.                 input += key;
  27.                 if (input.indexOf('2727') >= 0) {
  28.                     input = '';
  29.                     this.settingOn = !this.settingOn
  30.                     togglePanel(this.settingOn);
  31.                 }
  32.                 if (input.length > 10) input = input.substring(input.length - 10);
  33.             });
  34.         }
  35.  
  36.         function tempInit() {
  37.             var title = `<div>Diep.Style Ver 0.01 </div>`;
  38.             var descr = `<div>Press Esc twice to toggle this setting.</div>`
  39.             var body = `
  40.             <div class="table">
  41.                 <div class="row">
  42.                     <div class="cell">Grid base alpha <br><span class="grid_base_value">0.3</span></div>
  43.                     <div class="cell"><input type="range" name="grid_base_alpha" value="30"></div>
  44.                 </div>
  45.                 <div class="row">
  46.                     <div class="cell">Show Outline</div>
  47.                     <div class="cell"><input type="checkbox" name="stroke_soft_color"></div>
  48.                 </div>
  49.                 <div class="row">
  50.                     <div class="cell">Show Fps</div>
  51.                     <div class="cell"><input type="checkbox" name="fps"></div>
  52.                 </div>
  53.                 <div class="row">
  54.                     <div class="cell">Dark Mode</div>
  55.                     <div class="cell"><input type="checkbox" name="background"></div>
  56.                 </div>
  57.                 <div class="row backRed">
  58.                     <div class="cell">Chaotic Mode</div>
  59.                     <div class="cell"><input type="checkbox" name="chaotic"></div>
  60.                 </div>
  61.             </div>`;
  62.             var temp = `<div id="styleSetting"> ${title} ${body} ${descr} </div>`
  63.             document.querySelector('body').insertAdjacentHTML('afterend', temp);
  64.             var it =
  65.                 document.querySelector('input[name="grid_base_alpha"]').addEventListener('input',
  66.                     function(e) {
  67.                         var value = (e.target.value - e.target.value % 2) / 100
  68.                         input.set_convar("ren_grid_base_alpha", value);
  69.                         document.querySelector('.grid_base_value').innerHTML = value;
  70.                     });
  71.             it = document.querySelector('input[name="stroke_soft_color"]').addEventListener('change',
  72.                 function(e) { input.set_convar("ren_stroke_soft_color", !e.target.checked); });
  73.             it = document.querySelector('input[name="fps"]').addEventListener('change',
  74.                 function(e) { input.set_convar("ren_fps", e.target.checked); });
  75.             it = document.querySelector('input[name="background"]').addEventListener('change',
  76.                 function(e) { input.set_convar("ren_background", !e.target.checked); });
  77.             it = document.querySelector('input[name="chaotic"]').addEventListener('change',
  78.                 function(e) {
  79.                     if (e.target.checked) {
  80.                         input.execute('net_replace_color 2 0xf14e54'); //you ffa
  81.                         input.execute('net_replace_color 15 0xf14e54'); //other ffa
  82.                         input.execute('net_replace_color 3 0xf14e54'); //blue
  83.                         input.execute('net_replace_color 4 0xf14e54'); //red
  84.                         input.execute('net_replace_color 5 0xf14e54'); //purple
  85.                         input.execute('net_replace_color 6 0xf14e54'); //green
  86.                     } else {
  87.                         input.execute('net_replace_color 2 0x00b1de'); //you ffa
  88.                         input.execute('net_replace_color 15 0xf14e54'); //other ffa
  89.                         input.execute('net_replace_color 3 0x00b1de'); //blue
  90.                         input.execute('net_replace_color 4 0xf14e54'); //red
  91.                         input.execute('net_replace_color 5 0xc396e9'); //purple
  92.                         input.execute('net_replace_color 6 0x11d578'); //green
  93.                     }
  94.                 });
  95.         }
  96.  
  97.         function styleInit() {
  98.             addGlobalStyle(`#styleSetting{padding: 0.2em; margin:0.2em; position: absolute;top: 0;right: 0;width: 30%;
  99.         background-color: rgba(200,200,200,0.8);display:none;}`);
  100.             addGlobalStyle(".table{ display: table; text-align: center; width: 100%;}");
  101.             addGlobalStyle(".row{ display: table-row; }");
  102.             addGlobalStyle(`.cell{ display: table-cell; padding: 0px 0.3em;border: 1px solid black;}`);
  103.             addGlobalStyle(`.backRed{background-color:#f14e54}`)
  104.  
  105.             function addGlobalStyle(css) {
  106.                 var head, style;
  107.                 head = document.getElementsByTagName('head')[0];
  108.                 if (!head) {
  109.                     return;
  110.                 }
  111.                 style = document.createElement('style');
  112.                 style.type = 'text/css';
  113.                 style.innerHTML = css;
  114.                 head.appendChild(style);
  115.             }
  116.         }
  117.     })();
  118.  
  119.     function togglePanel(tf) {
  120.         tf ?
  121.             document.querySelector('#styleSetting').style.display = "block" :
  122.             document.querySelector('#styleSetting').style.display = "none";
  123.  
  124.     }
  125.  
  126. })();
  127.