Script para el Elements

Un script para el Elements.

  1. // ==UserScript==
  2. // @name Script para el Elements
  3. // @namespace Klatu
  4. // @version 2
  5. // @description Un script para el Elements.
  6. // @author Klatu
  7. // @match http://www.kongregate.com/games/zanzarino/elements*
  8. // @grant none
  9. // ==/UserScript==
  10.  
  11. window.klatu=window.klatu||{};
  12.  
  13. klatu.pxToFloat=px=>px.substring(0, px.length-2)-0;
  14.  
  15. klatu.scriptElements=function(){
  16. //variables editables
  17. const MARGIN=8;
  18. //fin de variables editables
  19.  
  20. const ANCHO_DE_LA_SCROLLBAR=17;
  21.  
  22. var i,
  23. container,
  24. chatInputs=$$('.chat_input'),
  25. pestañas=$$('.tab'),
  26. maingameStyle=getComputedStyle(maingame),
  27. chat_tab_paneStyle=getComputedStyle(chat_tab_pane),
  28. chatWidth=klatu.pxToFloat(maingameStyle.width)-holodeck._html_dimensions.game_frame_width-holodeck._html_dimensions.divider_width,
  29. style=
  30. '.dropdownKlatu{'+
  31. ' transition:all 0.3s;'+
  32. ' overflow:hidden;'+
  33. '}'+
  34. '.preventSelection {'+
  35. '-webkit-touch-callout: none;'+ /* iOS Safari */
  36. '-webkit-user-select: none;'+ /* Chrome/Safari/Opera */
  37. '-khtml-user-select: none;'+ /* Konqueror */
  38. '-moz-user-select: none;'+ /* Firefox */
  39. '-ms-user-select: none;'+ /* Internet Explorer/Edge */
  40. 'user-select: none;'+ /* Non-prefixed version, currently not supported by any browser */
  41. '}'+
  42. '.boton{'+
  43. ' align-items: flex-start;'+
  44. ' background-attachment: scroll;'+
  45. ' background-clip: border-box;'+
  46. ' background-color: rgba(0, 0, 0, 0);'+
  47. ' background-image: linear-gradient(rgb(41, 110, 145), rgb(8, 77, 112));'+
  48. ' background-origin: padding-box;'+
  49. ' background-size: auto;'+
  50. ' border-bottom-color: rgb(6, 54, 80);'+
  51. ' border-bottom-left-radius: 2px;'+
  52. ' border-bottom-right-radius: 2px;'+
  53. ' border-bottom-style: solid;'+
  54. ' border-bottom-width: 1px;'+
  55. ' border-collapse: collapse;'+
  56. ' border-image-outset: 0px;'+
  57. ' border-image-repeat: stretch;'+
  58. ' border-image-slice: 100%;'+
  59. ' border-image-source: none;'+
  60. ' border-image-width: 1;'+
  61. ' border-left-color: rgb(6, 54, 80);'+
  62. ' border-left-style: solid;'+
  63. ' border-left-width: 1px;'+
  64. ' border-right-color: rgb(6, 54, 80);'+
  65. ' border-right-style: solid;'+
  66. ' border-right-width: 1px;'+
  67. ' border-top-color: rgb(6, 54, 80);'+
  68. ' border-top-left-radius: 2px;'+
  69. ' border-top-right-radius: 2px;'+
  70. ' border-top-style: solid;'+
  71. ' border-top-width: 1px;'+
  72. ' box-shadow: none;'+
  73. ' box-sizing: border-box;'+
  74. ' color: rgb(255, 255, 255);'+
  75. ' cursor: pointer;'+
  76. ' display: inline-block;'+
  77. ' font-family: Verdana,'+
  78. ' sans-serif;'+
  79. ' font-size: 11px;'+
  80. ' font-stretch: normal;'+
  81. ' font-style: normal;'+
  82. ' font-variant: normal;'+
  83. ' font-weight: bold;'+
  84. ' height: 20px;'+
  85. ' letter-spacing: normal;'+
  86. ' line-height: 14px;'+
  87. ' margin-bottom: 0px;'+
  88. ' margin-left: 0px;'+
  89. ' margin-right: 0px;'+
  90. ' margin-top: 0px;'+
  91. ' padding-bottom: 2px;'+
  92. ' padding-left: 10px;'+
  93. ' padding-right: 10px;'+
  94. ' padding-top: 2px;'+
  95. ' text-align: center;'+
  96. ' text-decoration: none;'+
  97. ' text-indent: 0px;'+
  98. ' text-rendering: auto;'+
  99. ' text-shadow: rgba(0, 0, 0, 0.498039) 0px 0px 2px;'+
  100. ' text-transform: none;'+
  101. ' vertical-align: middle;'+
  102. ' white-space: nowrap;'+
  103. ' word-spacing: 0px;'+
  104. ' writing-mode: horizontal-tb;'+
  105. ' -webkit-appearance: none;'+
  106. ' -webkit-rtl-ordering: logical;'+
  107. ' -webkit-user-select: none;'+
  108. '}';
  109.  
  110. maingame.style.margin='0 '+MARGIN+'px';
  111. maingame.style.width=innerWidth-MARGIN*2-klatu.pxToFloat(getComputedStyle(maingame).paddingLeft)-klatu.pxToFloat(getComputedStyle(maingame).paddingRight)-ANCHO_DE_LA_SCROLLBAR+'px';
  112. maingamecontent.style.margin=0;
  113. chat_container.style.width=chatWidth+'px';
  114. chat_tab_pane.style.width=chatWidth-klatu.pxToFloat(chat_tab_paneStyle.paddingLeft)-klatu.pxToFloat(chat_tab_paneStyle.paddingRight)+'px';
  115. for(i=0; i<chatInputs.length; i++) chatInputs[i].style.width='100%';
  116.  
  117. klatu.style=klatu.style||document.createElement('style');
  118. if(klatu.style.innerHTML.indexOf(style)==-1) klatu.style.innerHTML+=style;
  119. document.head.appendChild(klatu.style);
  120.  
  121. klatu.libs=klatu.libs||new Set();
  122. if(!klatu.libs.has('https://cdnjs.cloudflare.com/ajax/libs/scriptaculous/1.9.0/builder.min.js')){
  123. klatu.libs.add('https://cdnjs.cloudflare.com/ajax/libs/scriptaculous/1.9.0/builder.min.js');
  124. let scriptaculous=document.createElement('script');
  125. scriptaculous.src='https://cdnjs.cloudflare.com/ajax/libs/scriptaculous/1.9.0/builder.min.js';
  126. document.head.appendChild(scriptaculous);
  127. }
  128.  
  129. klatu.elements={};
  130.  
  131. klatu.elements.mazos=localStorage.klatuMazosElements?JSON.parse(localStorage.klatuMazosElements):[];
  132.  
  133. if(!klatu.liDecks){
  134. klatu.liDecks=document.createElement('li');
  135. klatu.liDecks.className='tab';
  136. klatu.liDecks.innerHTML='<a>Decks</a>';
  137. klatu.liDecks.style.cursor='pointer';
  138. klatu.liDecks.onclick=function(){
  139. for(i=0; i<$$('.tab').length; i++) $$('.tab')[i].firstChild.className='';
  140. klatu.liDecks.firstChild.className='active';
  141. for(container in holodeck._tabs.containers._object) holodeck._tabs.containers._object[container].style.display='none';
  142. klatu.divDecks.style.display='';
  143. };
  144. main_tab_set.appendChild(klatu.liDecks);
  145.  
  146. for(i=0; i<pestañas.length; i++) pestañas[i].firstChild.addEventListener('click', function(){
  147. klatu.liDecks.firstChild.className='';
  148. klatu.divDecks.style.display='none';
  149. });
  150.  
  151. klatu.divDecks=document.createElement('div');
  152. klatu.divDecks.id='divDecks';
  153. klatu.divDecks.className='chat_message_window';
  154. klatu.divDecks.style.background='white';
  155. klatu.divDecks.style.overflow='hidden';
  156. kong_game_ui.appendChild(klatu.divDecks);
  157. añadirMazosADiv();
  158. klatu.divDecks.style.display='none';
  159. klatu.divDecks.onmouseout=guardarMazos;
  160.  
  161. klatu.botonAñadirMazo=document.createElement('button');
  162. klatu.botonAñadirMazo.innerHTML='Añadir mazo';
  163. klatu.botonAñadirMazo.className='boton';
  164. klatu.botonAñadirMazo.onclick=function(){
  165. añadirMazoAMazos(prompt('Ingresá el nombre del mazo:'), prompt('Ingresá el código del mazo:'));
  166. añadirMazosADiv();
  167. guardarMazos();
  168. };
  169. kong_game_ui.appendChild(klatu.botonAñadirMazo);
  170. }
  171. };
  172.  
  173. function añadirMazoAMazos(nombre, code){
  174. mazo={nombre:nombre, code:code};
  175. klatu.elements.mazos.push(mazo);
  176. return mazo;
  177. }
  178.  
  179. function añadirMazosADiv(){
  180. klatu.divDecks.innerHTML='';
  181. for(let i=0; i<klatu.elements.mazos.length; i++){
  182. let div=document.createElement('div');
  183. let mazo=klatu.elements.mazos[i];
  184. let input=document.createElement('input');
  185. let span=document.createElement('span');
  186. let textarea=document.createElement('textarea');
  187. div.index=i;
  188. div.id='mazo_'+i;
  189. klatu.divDecks.appendChild(div);
  190. input.className='nombreDeck';
  191. input.value=mazo.nombre;
  192. input.onchange=function(){
  193. if(this.value) klatu.elements.mazos[this.parentElement.index].nombre=this.value;
  194. else{
  195. klatu.elements.mazos.splice(this.parentElement.index, 1);
  196. añadirMazosADiv();
  197. }
  198. guardarMazos();
  199. };
  200. div.appendChild(input);
  201. span.innerHTML='▼';
  202. span.style.cursor='pointer';
  203. span.textarea=textarea;
  204. span.onclick=function(){
  205. var selection=getSelection();
  206. if(selection.rangeCount>0) selection.removeAllRanges();
  207. if(getComputedStyle(this.parentElement).height==this.parentElement.heightContraido){
  208. for(let i=0; i<$$('.dropdownKlatu').length; i++){
  209. let div=$$('.dropdownKlatu')[i];
  210. div.style.height=div.heightContraido;
  211. }
  212. this.parentElement.style.height=this.parentElement.heightExpandido;
  213. this.textarea.selectionStart=0;
  214. this.textarea.selectionEnd=this.textarea.value.length;
  215. this.innerHTML='▲<br>';
  216. }
  217. else{
  218. this.parentElement.style.height=this.parentElement.heightContraido;
  219. this.innerHTML='▼<br>';
  220. }
  221. };
  222. div.appendChild(span);
  223. div.heightContraido=div.clientHeight+'px';
  224. span.appendChild(document.createElement('br'));
  225. textarea.value=mazo.code;
  226. textarea.onchange=function(){
  227. if(this.value) klatu.elements.mazos[this.parentElement.index].code=this.value;
  228. else{
  229. klatu.elements.mazos.splice(this.parentElement.index, 1);
  230. añadirMazosADiv();
  231. }
  232. guardarMazos();
  233. };
  234. div.appendChild(textarea);
  235. div.heightExpandido=div.clientHeight+'px';
  236. div.style.height=div.heightContraido;
  237. div.className='dropdownKlatu';
  238. if(i%2) div.className+=' even';
  239. }
  240. delete Sortable.sortables.divDecks;
  241. Sortable.create('divDecks', {
  242. tag:'div',
  243. onUpdate:function(){
  244. const mazosViejos=klatu.elements.mazos;
  245. klatu.elements.mazos=[];
  246. for(let i=0; i<$$('.dropdownKlatu').length; i++){
  247. klatu.elements.mazos.push(mazosViejos[$$('.dropdownKlatu')[i].index]);
  248. }
  249. añadirMazosADiv();
  250. guardarMazos();
  251. }
  252. });
  253. }
  254.  
  255. function guardarMazos(){
  256. localStorage.klatuMazosElements=JSON.stringify(klatu.elements.mazos);
  257. }
  258.  
  259. addEventListener('dataavailable', klatu.scriptElements);