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. })();