☰

All Diep.io hidden tricks

ESC to go back to Normal, Shift +: F for FPS, Z for background, X for no edges, V for colored edges, [- to lighten color, + to darken color (increments of 0.05, causes weird behavior if not between 0 and 1], B for no scoreboard, N for no names, M for raw health values, G for green shapes mode, [ for no achievement screen, 9 for no health bars, 0 for no UI.

  1. // ==UserScript==
  2. // @name         All Diep.io hidden tricks
  3. // @namespace    https://discord.gg/BwqMNRn
  4. // @version      0.7
  5. // @description  ESC to go back to Normal, Shift +: F for FPS, Z for background, X for no edges, V for colored edges, [- to lighten color, + to darken color (increments of 0.05, causes weird behavior if not between 0 and 1], B for no scoreboard, N for no names, M for raw health values, G for green shapes mode, [ for no achievement screen, 9 for no health bars, 0 for no UI.
  6. // @author       Mega Mewthree
  7. // @match        *://*.diep.io/*
  8. // @grant        none
  9. // @require      https://greatest.deepsurf.us/scripts/27023-jscolor/code/JSColor.js?version=173802
  10. // ==/UserScript==
  11.  
  12. //CONSTANTS
  13. const _fps = false;
  14. const _bg = true;
  15. const _edge = true;
  16. const _colorEdge = true;
  17. const _color = 0.25;
  18. const _scoreboard = true;
  19. const _names = true;
  20. const _rawHealth = false;
  21. const _healthBars = true;
  22. const _achievements = true;
  23. const _ui = true;
  24. const _greenShapes = false;
  25. const _solidBg = false;
  26. const _mapViewport = false;
  27.  
  28. //COLOR CONSTANTS
  29. const _squares = 0xffeb69;
  30. const _triangles = 0xfc7677;
  31. const _pentagons = 0x768dfc;
  32. const _crashers = 0xf177dd;
  33. const _redTeam = 0xf14e54;
  34. const _blueTeam = 0x00b2e1;
  35. const _greenTeam = 0x00e16e;
  36. const _purpleTeam = 0xbf7ff5;
  37. const _brownTeam = null;
  38. const _fallenTeam = 0xc0c0c0;
  39. const _summonerSquares = 0xfcc376;
  40. const _shinyShapes = 0x89ff69; //Color of green shapes
  41. const _barrels = 0x999999;
  42. const _arenaClosers = 0xffe869;
  43. const _ffaLeaderboard = 0x44ffa0;
  44. const _tankBorders = 0x555555;
  45. const _mazeWalls = 0xbbbbbb;
  46. const _unknown = null;
  47.  
  48. const _gridAlpha = 0.1;
  49. const _bgColor = 0xcdcdcd;
  50. const _borderAlpha = 0.1;
  51. const _borderColor = 0x000000;
  52. const _minimapbgColor = 0xcdcdcd;
  53. const _minimapOutline = 0x555555;
  54.  
  55. //COLOR VARS
  56. var smashers = _tankBorders;
  57. var barrels = _barrels;
  58. var ffa_self = _blueTeam;
  59. var blue_team = _blueTeam;
  60. var red_team = _redTeam;
  61. var purple_team = _purpleTeam;
  62. var green_team = _greenTeam;
  63. var shiny_shapes = _shinyShapes;
  64. var squares = _squares;
  65. var triangles = _triangles;
  66. var pentagons = _pentagons;
  67. var crashers = _crashers;
  68. var arena_closers = _arenaClosers;
  69. var ffa_leaderboard = _ffaLeaderboard;
  70. var maze_walls = _mazeWalls;
  71. var ffa_others = _redTeam;
  72. var ffa_necro_squares = _summonerSquares;
  73. var fallen_team = _fallenTeam;
  74. var unknown = _unknown;
  75.  
  76. var gridAlpha = _gridAlpha;
  77. var bgColor = _bgColor;
  78. var borderAlpha = _borderAlpha;
  79. var borderColor = _borderColor;
  80. var minimapbgColor = _minimapbgColor;
  81. var minimapOutline = _minimapOutline;
  82.  
  83. //3/9/17 - Initialize Overlay
  84. window.overlay = {};
  85. overlay.keyCode = 9;
  86. overlay.toggle = false;
  87. overlay.setColor = setColor;
  88. overlay.setColorVar = setColorVar;
  89. overlay.setbgColor = setbgColor;
  90. overlay.setBorderColor = setBorderColor;
  91. overlay.setminimapbgColor = setminimapbgColor;
  92. overlay.setminimapOutline = setminimapOutline;
  93. styleInit();
  94. ren_overlay();
  95.  
  96. //OBJECT NAMES TO COLOR ID
  97. var colorNames = new Map([
  98.     ["smashers", 0],
  99.     ["barrels", 1],
  100.     ["ffa_self", 2],
  101.     ["blue_team", 3],
  102.     ["red_team", 4],
  103.     ["purple_team", 5],
  104.     ["green_team", 6],
  105.     ["shiny_shapes", 7],
  106.     ["squares", 8],
  107.     ["triangles", 9],
  108.     ["pentagons", 10],
  109.     ["crashers", 11],
  110.     ["arena_closers", 12], //Also neutral dominators
  111.     ["ffa_leaderboard", 13],
  112.     ["maze_walls", 14],
  113.     ["ffa_others", 15],
  114.     ["ffa_necro_squares", 16],
  115.     ["fallen_team", 17],
  116.     ["UNKNOWN", 18]
  117. ]);
  118.  
  119. //3/8/17 - Initialize typing detection
  120. var isTyping = false;
  121.  
  122. //3/8/17 - Color Modes
  123. var colorModeTextArray = [];
  124. var changing = false;
  125. var periodicFunction;
  126.  
  127. function onChange(){
  128.     /*Place any script you want to execute here when color modes change - EX: clearInterval(periodicFunction);*/
  129. }
  130.  
  131. function normal(){
  132.     fps = _fps;
  133.     bg = _bg;
  134.     edge = _edge;
  135.     colorEdge = _colorEdge;
  136.     color = _color;
  137.     scoreboard = _scoreboard;
  138.     names = _names;
  139.     rawHealth = _rawHealth;
  140.     healthBars = _healthBars;
  141.     achievements = _achievements;
  142.     ui = _ui;
  143.     greenShapes = _greenShapes;
  144.     solidBg = _solidBg;
  145.     mapViewport = _mapViewport;
  146.     reloadSettings();
  147.     input.set_convar("ren_background_color", _bgColor);
  148.     input.set_convar("ren_grid_base_alpha", _gridAlpha);
  149.     setColor("squares", _squares);
  150. }
  151.  
  152. //Initialize toggle detection
  153. var toggle = false;
  154. var shift = false;
  155. var ctrl = false;
  156.  
  157. //Initialize Values
  158. var fps = _fps;
  159. var bg = _bg;
  160. var edge = _edge;
  161. var colorEdge = _colorEdge;
  162. var color = _color;
  163. var scoreboard = _scoreboard;
  164. var names = _names;
  165. var rawHealth = _rawHealth;
  166. var healthBars = _healthBars;
  167. var achievements = _achievements;
  168. var ui = _ui;
  169. //3/7/17
  170. var greenShapes = _greenShapes;
  171. //3/8/17
  172. var solidBg = _solidBg;
  173. var mapViewport = _mapViewport;
  174.  
  175. //3/7/17 - FUNCTIONS - DO NOT MODIFY!!!
  176. function setColor(id, c){
  177.     if (colorNames.has(id)){
  178.         id = colorNames.get(id);
  179.     }
  180.     input.execute("net_replace_color " + id.toString() + " " + c.toString());
  181. }
  182.  
  183. function stl(input){
  184.     if (input.toString() == "true"){
  185.         return true;
  186.     }else if (input.toString() == "false"){
  187.         return false;
  188.     }else{
  189.         return null;
  190.     }
  191. }
  192.  
  193. function storageAvailable(type){
  194. 	try{
  195. 		var storage = window[type],
  196. 			x = '__storage_test__';
  197. 		storage.setItem(x, x);
  198. 		storage.removeItem(x);
  199. 		return true;
  200. 	}
  201. 	catch(e){
  202. 		return false;
  203. 	}
  204. }
  205.  
  206. function loadSavedData(){
  207.     if(!localStorage.getItem("fps")){
  208.         localStorage.setItem("fps", fps);
  209.     }else{
  210.         fps = stl(localStorage.getItem("fps"));
  211.     }
  212.     if(!localStorage.getItem("bg")){
  213.         localStorage.setItem("bg", bg);
  214.     }else{
  215.         bg = stl(localStorage.getItem("bg"));
  216.     }
  217.     if(!localStorage.getItem("edge")){
  218.         localStorage.setItem("edge", edge);
  219.     }else{
  220.         edge = stl(localStorage.getItem("edge"));
  221.     }
  222.     if(!localStorage.getItem("colorEdge")){
  223.         localStorage.setItem("colorEdge", colorEdge);
  224.     }else{
  225.         colorEdge = stl(localStorage.getItem("colorEdge"));
  226.     }
  227.     if(!localStorage.getItem("color")){
  228.         localStorage.setItem("color", color);
  229.     }else{
  230.         color = parseFloat(localStorage.getItem("color"));
  231.     }
  232.     if(!localStorage.getItem("scoreboard")){
  233.         localStorage.setItem("scoreboard", scoreboard);
  234.     }else{
  235.         scoreboard = stl(localStorage.getItem("scoreboard"));
  236.     }
  237.     if(!localStorage.getItem("names")){
  238.         localStorage.setItem("names", names);
  239.     }else{
  240.         names = stl(localStorage.getItem("names"));
  241.     }
  242.     if(!localStorage.getItem("rawHealth")){
  243.         localStorage.setItem("rawHealth", rawHealth);
  244.     }else{
  245.         rawHealth = stl(localStorage.getItem("rawHealth"));
  246.     }
  247.     if(!localStorage.getItem("healthBars")){
  248.         localStorage.setItem("healthBars", healthBars);
  249.     }else{
  250.         healthBars = stl(localStorage.getItem("healthBars"));
  251.     }
  252.     if(!localStorage.getItem("ui")){
  253.         localStorage.setItem("ui", ui);
  254.     }else{
  255.         ui = stl(localStorage.getItem("ui"));
  256.     }
  257.     if(!localStorage.getItem("achievements")){
  258.         localStorage.setItem("achievements", achievements);
  259.     }else{
  260.         achievements = stl(localStorage.getItem("achievements"));
  261.     }
  262.     if(!localStorage.getItem("greenShapes")){
  263.         localStorage.setItem("greenShapes", greenShapes);
  264.     }else{
  265.         greenShapes = stl(localStorage.getItem("greenShapes"));
  266.     }
  267.     if(!localStorage.getItem("solidBg")){
  268.         localStorage.setItem("solidBg", solidBg);
  269.     }else{
  270.         solidBg = stl(localStorage.getItem("solidBg"));
  271.     }
  272.     if(!localStorage.getItem("mapViewport")){
  273.         localStorage.setItem("mapViewport", mapViewport);
  274.     }else{
  275.         mapViewport = stl(localStorage.getItem("mapViewport"));
  276.     }
  277.     if(!localStorage.getItem("smashers")){
  278.         localStorage.setItem("smashers", smashers);
  279.     }else{
  280.         smashers = localStorage.getItem("smashers");
  281.     }
  282.     if(!localStorage.getItem("barrels")){
  283.         localStorage.setItem("barrels", barrels);
  284.     }else{
  285.         barrels = localStorage.getItem("barrels");
  286.     }
  287.     if(!localStorage.getItem("ffa_self")){
  288.         localStorage.setItem("ffa_self", ffa_self);
  289.     }else{
  290.         ffa_self = localStorage.getItem("ffa_self");
  291.     }
  292.     if(!localStorage.getItem("blue_team")){
  293.         localStorage.setItem("blue_team", blue_team);
  294.     }else{
  295.         blue_team = localStorage.getItem("blue_team");
  296.     }
  297.     if(!localStorage.getItem("red_team")){
  298.         localStorage.setItem("red_team", red_team);
  299.     }else{
  300.         red_team = localStorage.getItem("red_team");
  301.     }
  302.     if(!localStorage.getItem("purple_team")){
  303.         localStorage.setItem("purple_team", purple_team);
  304.     }else{
  305.         purple_team = localStorage.getItem("purple_team");
  306.     }
  307.     if(!localStorage.getItem("green_team")){
  308.         localStorage.setItem("green_team", green_team);
  309.     }else{
  310.         green_team = localStorage.getItem("green_team");
  311.     }
  312.     if(!localStorage.getItem("fallen_team")){
  313.         localStorage.setItem("fallen_team", fallen_team);
  314.     }else{
  315.         fallen_team = localStorage.getItem("fallen_team");
  316.     }
  317.     if(!localStorage.getItem("shiny_shapes")){
  318.         localStorage.setItem("shiny_shapes", shiny_shapes);
  319.     }else{
  320.         shiny_shapes = localStorage.getItem("shiny_shapes");
  321.     }
  322.     if(!localStorage.getItem("squares")){
  323.         localStorage.setItem("squares", squares);
  324.     }else{
  325.         squares = localStorage.getItem("squares");
  326.     }
  327.     if(!localStorage.getItem("triangles")){
  328.         localStorage.setItem("triangles", triangles);
  329.     }else{
  330.         triangles = localStorage.getItem("triangles");
  331.     }
  332.     if(!localStorage.getItem("pentagons")){
  333.         localStorage.setItem("pentagons", pentagons);
  334.     }else{
  335.         pentagons = localStorage.getItem("pentagons");
  336.     }
  337.     if(!localStorage.getItem("crashers")){
  338.         localStorage.setItem("crashers", crashers);
  339.     }else{
  340.         crashers = localStorage.getItem("crashers");
  341.     }
  342.     if(!localStorage.getItem("arena_closers")){
  343.         localStorage.setItem("arena_closers", arena_closers);
  344.     }else{
  345.         arena_closers = localStorage.getItem("arena_closers");
  346.     }
  347.     if(!localStorage.getItem("ffa_leaderboard")){
  348.         localStorage.setItem("ffa_leaderboard", ffa_leaderboard);
  349.     }else{
  350.         ffa_leaderboard = localStorage.getItem("ffa_leaderboard");
  351.     }
  352.     if(!localStorage.getItem("maze_walls")){
  353.         localStorage.setItem("maze_walls", maze_walls);
  354.     }else{
  355.         maze_walls = localStorage.getItem("maze_walls");
  356.     }
  357.     if(!localStorage.getItem("ffa_others")){
  358.         localStorage.setItem("ffa_others", ffa_others);
  359.     }else{
  360.         ffa_others = localStorage.getItem("ffa_others");
  361.     }
  362.     if(!localStorage.getItem("ffa_necro_squares")){
  363.         localStorage.setItem("ffa_necro_squares", ffa_necro_squares);
  364.     }else{
  365.         ffa_necro_squares = localStorage.getItem("ffa_necro_squares");
  366.     }
  367.     if(!localStorage.getItem("gridAlpha")){
  368.         localStorage.setItem("gridAlpha", gridAlpha);
  369.     }else{
  370.         gridAlpha = localStorage.getItem("gridAlpha");
  371.     }
  372.     if(!localStorage.getItem("bgColor")){
  373.         localStorage.setItem("bgColor", bgColor);
  374.     }else{
  375.         bgColor = localStorage.getItem("bgColor");
  376.     }
  377.     if(!localStorage.getItem("borderAlpha")){
  378.         localStorage.setItem("borderAlpha", borderAlpha);
  379.     }else{
  380.         borderAlpha = localStorage.getItem("borderAlpha");
  381.     }
  382.     if(!localStorage.getItem("borderColor")){
  383.         localStorage.setItem("borderColor", borderColor);
  384.     }else{
  385.         borderColor = localStorage.getItem("borderColor");
  386.     }
  387.     if(!localStorage.getItem("minimapbgColor")){
  388.         localStorage.setItem("minimapbgColor", minimapbgColor);
  389.     }else{
  390.         minimapbgColor = localStorage.getItem("minimapbgColor");
  391.     }
  392.     if(!localStorage.getItem("minimapOutline")){
  393.         localStorage.setItem("minimapOutline", minimapOutline);
  394.     }else{
  395.         minimapOutline = localStorage.getItem("minimapOutline");
  396.     }
  397. }
  398.  
  399. function saveData(){
  400.     localStorage.setItem("fps", fps);
  401.     localStorage.setItem("bg", bg);
  402.     localStorage.setItem("edge", edge);
  403.     localStorage.setItem("colorEdge", colorEdge);
  404.     localStorage.setItem("color", color);
  405.     localStorage.setItem("scoreboard", scoreboard);
  406.     localStorage.setItem("names", names);
  407.     localStorage.setItem("rawHealth", rawHealth);
  408.     localStorage.setItem("healthBars", healthBars);
  409.     localStorage.setItem("ui", ui);
  410.     localStorage.setItem("achievements", achievements);
  411.     localStorage.setItem("greenShapes", greenShapes);
  412.     localStorage.setItem("solidBg", solidBg);
  413.     localStorage.setItem("mapViewport", mapViewport);
  414.     localStorage.setItem("smashers", smashers);
  415.     localStorage.setItem("barrels", barrels);
  416.     localStorage.setItem("ffa_self", ffa_self);
  417.     localStorage.setItem("blue_team", blue_team);
  418.     localStorage.setItem("red_team", red_team);
  419.     localStorage.setItem("purple_team", purple_team);
  420.     localStorage.setItem("green_team", green_team);
  421.     localStorage.setItem("shiny_shapes", shiny_shapes);
  422.     localStorage.setItem("squares", squares);
  423.     localStorage.setItem("triangles", triangles);
  424.     localStorage.setItem("pentagons", pentagons);
  425.     localStorage.setItem("crashers", crashers);
  426.     localStorage.setItem("arena_closers", arena_closers);
  427.     localStorage.setItem("ffa_leaderboard", ffa_leaderboard);
  428.     localStorage.setItem("maze_walls", maze_walls);
  429.     localStorage.setItem("ffa_others", ffa_others);
  430.     localStorage.setItem("ffa_necro_squares", ffa_necro_squares);
  431.     localStorage.setItem("fallen_team", fallen_team);
  432.     localStorage.setItem("gridAlpha", gridAlpha);
  433.     localStorage.setItem("bgColor", bgColor);
  434.     localStorage.setItem("borderAlpha", borderAlpha);
  435.     localStorage.setItem("borderColor", borderColor);
  436.     localStorage.setItem("minimapbgColor", minimapbgColor);
  437.     localStorage.setItem("minimapOutline", minimapOutline);
  438. }
  439.  
  440. function reloadSettings(){
  441.     if (greenShapes){
  442.         setColor("squares", shiny_shapes);
  443.         setColor("triangles", shiny_shapes);
  444.         setColor("pentagons", shiny_shapes);
  445.         setColor("crashers", shiny_shapes);
  446.     }else{
  447.         setColor("squares", squares);
  448.         setColor("triangles", triangles);
  449.         setColor("pentagons", pentagons);
  450.         setColor("crashers", crashers);
  451.     }
  452.     input.set_convar("ren_fps", fps);
  453.     input.set_convar("ren_background", bg);
  454.     input.set_convar("ren_stroke_soft_color", colorEdge);
  455.     input.set_convar("ren_stroke_soft_color_intensity", color);
  456.     if (!edge){
  457.         input.set_convar("ren_stroke_soft_color", true);
  458.         input.set_convar("ren_stroke_soft_color_intensity", 0);
  459.     }
  460.     input.set_convar("ren_scoreboard", scoreboard);
  461.     input.set_convar("ren_names", names);
  462.     input.set_convar("ren_raw_health_values", rawHealth);
  463.     input.set_convar("ren_health_bars", healthBars);
  464.     input.set_convar("ren_ui", ui);
  465.     input.set_convar("ren_achievements", achievements);
  466.     input.set_convar("ren_solid_background", solidBg);
  467.     input.set_convar("ren_minimap_viewport", mapViewport);
  468.     input.set_convar("ren_grid_base_alpha", gridAlpha);
  469.     input.set_convar("ren_background_color", bgColor);
  470.     input.set_convar("ren_border_color_alpha", borderAlpha);
  471.     input.set_convar("ren_border_color", borderColor);
  472.     input.set_convar("ren_minimap_background_color", minimapbgColor);
  473.     input.set_convar("ren_minimap_border_color", minimapOutline);
  474.     setColor("smashers", smashers);
  475.     setColor("barrels", barrels);
  476.     setColor("ffa_self", ffa_self);
  477.     setColor("blue_team", blue_team);
  478.     setColor("red_team", red_team);
  479.     setColor("purple_team", purple_team);
  480.     setColor("green_team", green_team);
  481.     setColor("shiny_shapes", shiny_shapes);
  482.     setColor("arena_closers", arena_closers);
  483.     setColor("ffa_leaderboard", ffa_leaderboard);
  484.     setColor("maze_walls", maze_walls);
  485.     setColor("ffa_necro_squares", ffa_necro_squares);
  486.     setColor("fallen_team", fallen_team);
  487.     setColor("ffa_others", ffa_others);
  488. }
  489.  
  490. function styleInit() {
  491.     addGlobalStyle(`#styleSetting{padding: 0.2em; margin:0.2em; position: absolute;top: 0;right: 0;width: 30%;
  492.     background-color: rgba(0,200,200,0.1);display:none;}`);
  493.     addGlobalStyle(".table{ display: table; text-align: center; width: 100%;}");
  494.     addGlobalStyle(".row{ display: table-row; }");
  495.     addGlobalStyle(`.cell{ display: table-cell; padding: 0px 0.3em;border: 1px solid black;}`);
  496.     addGlobalStyle(`.backRed{background-color:#f14e54}`);
  497.     function addGlobalStyle(css) {
  498.         var head, style;
  499.         head = document.getElementsByTagName('head')[0];
  500.         if (!head) {
  501.             return;
  502.         }
  503.         style = document.createElement('style');
  504.         style.type = 'text/css';
  505.         style.innerHTML = css;
  506.         head.appendChild(style);
  507.     }
  508. }
  509.  
  510. function toggleOverlay(tf) {
  511.     if (tf){
  512.         document.querySelector('#styleSetting').style.display = "block";
  513.     }else{
  514.         document.querySelector('#styleSetting').style.display = "none";
  515.     }
  516. }
  517.  
  518. function ren_overlay(){
  519.     var title = `<div>Color Menu</div>`;
  520.     var descr = `<div>Press TAB to toggle this menu.</div>`;
  521.     var colorPicker = function(id){return `{onFineChange:'overlay.setColorVar(${id}, this); '}`;};
  522.     var _setbgColor = function(){return `{onFineChange:'overlay.setbgColor(this); '}`;};
  523.     var _setBorderColor = function(){return `{onFineChange:'overlay.setBorderColor(this); '}`;};
  524.     var _setminimapbgColor = function(){return `{onFineChange:'overlay.setminimapbgColor(this); '}`;};
  525.     var _setminimapOutline = function(){return `{onFineChange:'overlay.setminimapOutline(this); '}`;};
  526.     var body = `
  527.             <div class="table">
  528.                 <div class="row">Background
  529.                 </div>
  530.                 <div class="row">
  531.                     <div class="cell">Grid Base Alpha<br><span class="grid_base_value">0.3</span></div>
  532.                     <div class="cell"><input type="range" name="grid_base_alpha" value="36"></div>
  533.                 </div>
  534.                 <div class="row">
  535.                     <div class="cell">Border Alpha<br><span class="border_alpha_value">0.1</span></div>
  536.                     <div class="cell"><input type="range" name="border_alpha" value="10"></div>
  537.                 </div>
  538.                 <div class="row">
  539.                     <div class="cell">Background</div>
  540.                     <div class="cell"><input class="jscolor ${_setbgColor()}"
  541.                     value="cdcdcd"></div>
  542.                 </div>
  543.                 <div class="row">
  544.                     <div class="cell">Border</div>
  545.                     <div class="cell"><input class="jscolor ${_setBorderColor()}"
  546.                     value="cdcdcd"></div>
  547.                 </div>
  548.                 <div class="row">Minimap
  549.                 </div>
  550.                 <div class="row">
  551.                     <div class="cell">Background</div>
  552.                     <div class="cell"><input class="jscolor ${_setminimapbgColor()}"
  553.                     value="cdcdcd"></div>
  554.                 </div>
  555.                 <div class="row">
  556.                     <div class="cell">Outline</div>
  557.                     <div class="cell"><input class="jscolor ${_setminimapOutline()}"
  558.                     value="000000"></div>
  559.                 </div>
  560.                 <div class="row">Environment
  561.                 </div>
  562.                 <div class="row">
  563.                     <div class="cell">Self (FFA)</div>
  564.                     <div class="cell"><input class="jscolor ${colorPicker(2)}"
  565.                     value="00b1de"></div>
  566.                 </div>
  567.                 <div class="row">
  568.                     <div class="cell">Barrels</div>
  569.                     <div class="cell"><input class="jscolor ${colorPicker(1)}"
  570.                     value="999999"></div>
  571.                 </div>
  572.                 <div class="row">
  573.                     <div class="cell">Others (FFA)</div>
  574.                     <div class="cell"><input class="jscolor ${colorPicker(15)}"
  575.                     value="f14e54"></div>
  576.                 </div>
  577.                 <div class="row">
  578.                     <div class="cell">Smasher Class Outlines</div>
  579.                     <div class="cell"><input class="jscolor ${colorPicker(0)}"
  580.                     value="555555"></div>
  581.                 </div>
  582.                 <div class="row">
  583.                     <div class="cell">Blue team</div>
  584.                     <div class="cell"><input class="jscolor ${colorPicker(3)}"
  585.                     value="00b1de"></div>
  586.                 </div>
  587.                 <div class="row">
  588.                     <div class="cell">Red Team</div>
  589.                     <div class="cell"><input class="jscolor ${colorPicker(4)}"
  590.                     value="f14e54"></div>
  591.                 </div>
  592.                 <div class="row">
  593.                     <div class="cell">Purple Team</div>
  594.                     <div class="cell"><input class="jscolor ${colorPicker(5)}"
  595.                     value="c396e9"></div>
  596.                 </div>
  597.                 <div class="row">
  598.                     <div class="cell">Green Team</div>
  599.                     <div class="cell"><input class="jscolor ${colorPicker(6)}"
  600.                     value="11d578"></div>
  601.                 </div>
  602.                 <div class="row">
  603.                     <div class="cell">Fallen Team</div>
  604.                     <div class="cell"><input class="jscolor ${colorPicker(17)}"
  605.                     value="c0c0c0"></div>
  606.                 </div>
  607.                 <div class="row">
  608.                     <div class="cell">Shiny Shapes</div>
  609.                     <div class="cell"><input class="jscolor ${colorPicker(7)}"
  610.                     value="89ff69"></div>
  611.                 </div>
  612.                 <div class="row">
  613.                     <div class="cell">Squares</div>
  614.                     <div class="cell"><input class="jscolor ${colorPicker(8)}"
  615.                     value="ffe869"></div>
  616.                 </div>
  617.                 <div class="row">
  618.                     <div class="cell">Triangles</div>
  619.                     <div class="cell"><input class="jscolor ${colorPicker(9)}"
  620.                     value="fc7677"></div>
  621.                 </div>
  622.                 <div class="row">
  623.                     <div class="cell">Pentagons</div>
  624.                     <div class="cell"><input class="jscolor ${colorPicker(10)}"
  625.                     value="768dfc"></div>
  626.                 </div>
  627.                 <div class="row">
  628.                     <div class="cell">Crashers</div>
  629.                     <div class="cell"><input class="jscolor ${colorPicker(11)}"
  630.                     value="f077dc"></div>
  631.                 </div>
  632.                 <div class="row">
  633.                     <div class="cell">Arena Closers</div>
  634.                     <div class="cell"><input class="jscolor ${colorPicker(12)}"
  635.                     value="ffe869"></div>
  636.                 </div>
  637.                 <div class="row">
  638.                     <div class="cell">Maze Walls</div>
  639.                     <div class="cell"><input class="jscolor ${colorPicker(14)}"
  640.                     value="bbbbbb"></div>
  641.                 </div>
  642.                 <div class="row">
  643.                     <div class="cell">Necro Squares (FFA)</div>
  644.                     <div class="cell"><input class="jscolor ${colorPicker(16)}"
  645.                     value="fcc376"></div>
  646.                 </div>
  647.                 <div class="row">Miscellaneous
  648.                 </div>
  649.                 <div class="row">
  650.                     <div class="cell">Leaderboard Fill (FFA)</div>
  651.                     <div class="cell"><input class="jscolor ${colorPicker(13)}"
  652.                     value="44ffa0"></div>
  653.                 </div>
  654.             </div>`;
  655.     var temp = `<div id="styleSetting"> ${title} ${body} ${descr} </div>`;
  656.     document.querySelector('body').insertAdjacentHTML('afterend', temp);
  657.     var it = document.querySelector('input[name="grid_base_alpha"]').addEventListener('input', function(e) {
  658.         gridAlpha = (e.target.value - e.target.value % 2) / 100;
  659.         document.querySelector('.grid_base_value').innerHTML = gridAlpha;
  660.         reloadSettings();
  661.     });
  662.     it = document.querySelector('input[name="border_alpha"]').addEventListener('input', function(e) {
  663.         borderAlpha = (e.target.value - e.target.value % 2) / 100;
  664.         document.querySelector('.border_alpha_value').innerHTML = borderAlpha;
  665.         reloadSettings();
  666.     });
  667. }
  668.  
  669. function hexToDec(hex){
  670.     return parseInt(hex, 16);
  671. }
  672.  
  673. function setColorVar(id, color){
  674.     switch(parseInt(id)){
  675.         case 0:
  676.             smashers = hexToDec(color);
  677.             break;
  678.         case 1:
  679.             barrels = hexToDec(color);
  680.             break;
  681.         case 2:
  682.             ffa_self = hexToDec(color);
  683.             break;
  684.         case 3:
  685.             blue_team = hexToDec(color);
  686.             break;
  687.         case 4:
  688.             red_team = hexToDec(color);
  689.             break;
  690.         case 5:
  691.             purple_team = hexToDec(color);
  692.             break;
  693.         case 6:
  694.             green_team = hexToDec(color);
  695.             break;
  696.         case 7:
  697.             shiny_shapes = hexToDec(color);
  698.             break;
  699.         case 8:
  700.             squares = hexToDec(color);
  701.             break;
  702.         case 9:
  703.             triangles = hexToDec(color);
  704.             break;
  705.         case 10:
  706.             pentagons = hexToDec(color);
  707.             break;
  708.         case 11:
  709.             crashers = hexToDec(color);
  710.             break;
  711.         case 12:
  712.             arena_closers = hexToDec(color);
  713.             break;
  714.         case 13:
  715.             ffa_leaderboard = hexToDec(color);
  716.             break;
  717.         case 14:
  718.             maze_walls = hexToDec(color);
  719.             break;
  720.         case 15:
  721.             ffa_others = hexToDec(color);
  722.             break;
  723.         case 16:
  724.             ffa_necro_squares = hexToDec(color);
  725.             break;
  726.         case 17:
  727.             fallen_team = hexToDec(color);
  728.             break;
  729.     }
  730.     reloadSettings();
  731. }
  732.  
  733. function setbgColor(color){
  734.     bgColor = hexToDec(color);
  735.     input.set_convar("ren_background_color", bgColor);
  736. }
  737.  
  738. function setBorderColor(color){
  739.     borderColor = hexToDec(color);
  740.     input.set_convar("ren_border_color", borderColor);
  741. }
  742.  
  743. function setminimapbgColor(color){
  744.     minimapbgColor = hexToDec(color);
  745.     input.set_convar("ren_minimap_background_color", minimapbgColor);
  746. }
  747.  
  748. function setminimapOutline(color){
  749.     minimapOutline = hexToDec(color);
  750.     input.set_convar("ren_minimap_border_color", minimapOutline);
  751. }
  752.  
  753. //3/8/17
  754. function modeSet(){
  755.     var typed = false;
  756.     var modes = document.createElement("INPUT");
  757.     abc.setAttribute("type", "text");
  758.     abc.setAttribute("value", "Start typing!");
  759.     abc.disabled = false;
  760.     abc.setAttribute("style", "font-size:16px;position:absolute;top:0px;right:0px;");
  761.     document.body.appendChild(abc);
  762. }
  763.  
  764. document.addEventListener('keydown', function(event){
  765.     if (event.keyCode == 27){
  766.         fps = _fps;
  767.         bg = _bg;
  768.         edge = _edge;
  769.         colorEdge = _colorEdge;
  770.         color = _color;
  771.         scoreboard = _scoreboard;
  772.         names = _names;
  773.         rawHealth = _rawHealth;
  774.         healthBars = _healthBars;
  775.         achievements = _achievements;
  776.         ui = _ui;
  777.         solidBg = _solidBg;
  778.         mapViewport = _mapViewport;
  779.         gridAlpha = _gridAlpha;
  780.         greenShapes = _greenShapes;
  781.         smashers = _tankBorders;
  782.         barrels = _barrels;
  783.         ffa_self = _blueTeam;
  784.         blue_team = _blueTeam;
  785.         red_team = _redTeam;
  786.         purple_team = _purpleTeam;
  787.         green_team = _greenTeam;
  788.         squares = _squares;
  789.         triangles = _triangles;
  790.         pentagons = _pentagons;
  791.         crashers = _crashers;
  792.         arena_closers = _arenaClosers;
  793.         ffa_leaderboard = _ffaLeaderboard;
  794.         maze_walls = _mazeWalls;
  795.         ffa_necro_squares = _summonerSquares;
  796.         fallen_team = _fallenTeam;
  797.         bgColor = _bgColor;
  798.         borderAlpha = _borderAlpha;
  799.         borderColor = _borderColor;
  800.         minimapbgColor = _minimapbgColor;
  801.         minimapOutline = _minimapOutline;
  802.         shiny_shapes = _shinyShapes;
  803.         input.set_convar("ren_fps", fps);
  804.         input.set_convar("ren_stroke_soft_color", colorEdge);
  805.         input.set_convar("ren_stroke_soft_color_intensity", color);
  806.         input.set_convar("ren_achievements", achievements);
  807.         input.set_convar("ren_names", names);
  808.         input.set_convar("ren_scoreboard", scoreboard);
  809.         input.set_convar("ren_raw_health_values", rawHealth);
  810.         input.set_convar("ren_background", bg);
  811.         input.set_convar("ren_health_bars", healthBars);
  812.         input.set_convar("ren_ui", ui);
  813.         //3/7/17
  814.         input.execute(`net_replace_color 8 ${_squares}`);
  815.         input.execute(`net_replace_color 9 ${_triangles}`);
  816.         input.execute(`net_replace_color 10 ${_pentagons}`);
  817.         input.execute(`net_replace_color 11 ${_crashers}`);
  818.         //3/8/17
  819.         input.set_convar("ren_solid_background", solidBg);
  820.         input.set_convar("ren_minimap_viewport", mapViewport);
  821.         input.set_convar("ren_grid_base_alpha", gridAlpha);
  822.         input.set_convar("ren_background_color", bgColor);
  823.         input.set_convar("ren_border_color_alpha", borderAlpha);
  824.         input.set_convar("ren_border_color", borderColor);
  825.         input.set_convar("ren_minimap_background_color", minimapbgColor);
  826.         input.set_convar("ren_minimap_border_color", minimapOutline);
  827.         setColor("smashers", _tankBorders);
  828.         setColor("barrels", _barrels);
  829.         setColor("ffa_self", _blueTeam);
  830.         setColor("blue_team", _blueTeam);
  831.         setColor("red_team", _redTeam);
  832.         setColor("purple_team", _purpleTeam);
  833.         setColor("green_team", _greenTeam);
  834.         setColor("squares", _squares);
  835.         setColor("triangles", _triangles);
  836.         setColor("pentagons", _pentagons);
  837.         setColor("crashers", _crashers);
  838.         setColor("arena_closers", _arenaClosers);
  839.         setColor("ffa_leaderboard", _ffaLeaderboard);
  840.         setColor("maze_walls", _mazeWalls);
  841.         setColor("ffa_necro_squares", _summonerSquares);
  842.         setColor("fallen_team", _fallenTeam);
  843.         toggle = true;
  844.     }
  845.     if (event.keyCode == 16) shift = true;
  846.     if (event.keyCode == 17) ctrl = true;
  847.     if (toggle === false){
  848.         //Overlay activation - default: TAB
  849.         if (event.keyCode == overlay.keyCode){
  850.             overlay.toggle = !overlay.toggle;
  851.             toggleOverlay(overlay.toggle);
  852.             toggle = true;
  853.         }
  854.         //Ctrl
  855.         if (ctrl === true){
  856.             //? / / for load saved settings
  857.             if (event.keyCode == 191){
  858.                 loadSavedData();
  859.                 reloadSettings();
  860.             }
  861.         }
  862.         //Shift
  863.         if (shift === true){
  864.             //S for save
  865.             if (event.keyCode == 83){
  866.                 if (storageAvailable('localStorage')){
  867.                     saveData();
  868.                 }else{
  869.                     alert("LocalStorage is not supported on your current browser, so save cannot be used!");
  870.                 }
  871.                 toggle = true;
  872.             }
  873.             //P for minimap viewport
  874.             if (event.keyCode == 80){
  875.                 mapViewport = !mapViewport;
  876.                 input.set_convar("ren_minimap_viewport", mapViewport);
  877.                 toggle = true;
  878.             }
  879.             //Q for solid background
  880.             if (event.keyCode == 81){
  881.                 solidBg = !solidBg;
  882.                 input.set_convar("ren_solid_background", solidBg);
  883.                 toggle = true;
  884.             }
  885.             //F for FPS
  886.             if (event.keyCode == 70){
  887.                 fps = !fps;
  888.                 input.set_convar("ren_fps", fps);
  889.                 toggle = true;
  890.             }
  891.             //Z for background
  892.             if (event.keyCode == 90){
  893.                 bg = !bg;
  894.                 input.set_convar("ren_background", bg);
  895.                 toggle = true;
  896.             }
  897.             //X for edges
  898.             if (event.keyCode == 88){
  899.                 edge = !edge;
  900.                 colorEdge = false;
  901.                 if (edge === true){
  902.                     input.set_convar("ren_stroke_soft_color_intensity", _color);
  903.                     input.set_convar("ren_stroke_soft_color", false);
  904.                 }
  905.                 if (edge === false){
  906.                     input.set_convar("ren_stroke_soft_color_intensity", 0.0);
  907.                     input.set_convar("ren_stroke_soft_color", true);
  908.                 }
  909.                 toggle = true;
  910.             }
  911.             //V for colored edges
  912.             if (event.keyCode == 86){
  913.                 colorEdge = !colorEdge;
  914.                 edge = true;
  915.                 if (colorEdge === true){
  916.                     input.set_convar("ren_stroke_soft_color_intensity", _color);
  917.                     input.set_convar("ren_stroke_soft_color", true);
  918.                 }
  919.                 if (colorEdge === false){
  920.                     input.set_convar("ren_stroke_soft_color_intensity", 0.0);
  921.                     input.set_convar("ren_stroke_soft_color", false);
  922.                 }
  923.                 toggle = true;
  924.             }
  925.             //B for scoreboard
  926.             if (event.keyCode == 66){
  927.                 scoreboard = !scoreboard;
  928.                 input.set_convar("ren_scoreboard", scoreboard);
  929.                 toggle = true;
  930.             }
  931.             //N for names
  932.             if (event.keyCode == 78){
  933.                 names = !names;
  934.                 input.set_convar("ren_names", names);
  935.                 toggle = true;
  936.             }
  937.             //M for raw health values
  938.             if (event.keyCode == 77){
  939.                 rawHealth = !rawHealth;
  940.                 input.set_convar("ren_raw_health_values", rawHealth);
  941.                 toggle = true;
  942.             }
  943.             //9 for health bars
  944.             if (event.keyCode == 57){
  945.                 healthBars = !healthBars;
  946.                 input.set_convar("ren_health_bars", healthBars);
  947.                 toggle = true;
  948.             }
  949.             //9 for UI
  950.             if (event.keyCode == 48){
  951.                 ui = !ui;
  952.                 input.set_convar("ren_ui", ui);
  953.                 toggle = true;
  954.             }
  955.             //[ for achievements
  956.             if (event.keyCode == 219){
  957.                 achievements = !achievements;
  958.                 input.set_convar("ren_achievements", achievements);
  959.                 toggle = true;
  960.             }
  961.             //- for lighter color
  962.             if (event.keyCode == 189){
  963.                 color -= 0.05;
  964.                 input.set_convar("ren_stroke_soft_color_intensity", color);
  965.             }
  966.             //+ for darker color
  967.             if (event.keyCode == 187){
  968.                 color += 0.05;
  969.                 input.set_convar("ren_stroke_soft_color_intensity", color);
  970.             }
  971.             //3/7/17 Update
  972.             //G for darker color
  973.             if (event.keyCode == 71){
  974.                 greenShapes = !greenShapes;
  975.                 if (greenShapes){
  976.                     input.execute(`net_replace_color 8 ${shiny_shapes}`);
  977.                     input.execute(`net_replace_color 9 ${shiny_shapes}`);
  978.                     input.execute(`net_replace_color 10 ${shiny_shapes}`);
  979.                     input.execute(`net_replace_color 11 ${shiny_shapes}`);
  980.                 }else{
  981.                     input.execute(`net_replace_color 8 ${_squares}`);
  982.                     input.execute(`net_replace_color 9 ${_triangles}`);
  983.                     input.execute(`net_replace_color 10 ${_pentagons}`);
  984.                     input.execute(`net_replace_color 11 ${_crashers}`);
  985.                 }
  986.             }
  987.         }
  988.     }
  989. });
  990.  
  991. document.addEventListener('keyup',function(event){
  992.     if (event.keyCode == 16){
  993.         shift = false;
  994.     }else if(event.keyCode == 17){
  995.         ctrl = false;
  996.     }else{
  997.         toggle = false;
  998.     }
  999. });