Draggable Keystokes Modified

Adds draggable keystrokes.

  1. // ==UserScript==
  2. // @name Draggable Keystokes Modified
  3. // @namespace http://tampermonkey.net/
  4. // @version 1.2
  5. // @description Adds draggable keystrokes.
  6. // @author Blueify, Gnosis
  7. // @match https://bloxd.io/
  8. // @icon https://www.google.com/s2/favicons?sz=64&domain=bloxd.io
  9. // @grant GM_setValue
  10. // @grant GM_getValue
  11. // @license MIT
  12. // @ Modified from https://greasyfork.org/scripts/480712-draggable-keystokes
  13. // ==/UserScript==
  14.  
  15. (function() {
  16. 'use strict';
  17.  
  18. const keystrokescontainer = document.createElement('div');
  19. keystrokescontainer.style.zIndex = '10000';
  20. keystrokescontainer.style.width = '300px';
  21. keystrokescontainer.style.height = '170px';
  22. keystrokescontainer.style.transform = 'translate(-50%, -50%)';
  23. keystrokescontainer.style.backgroundColor = '#000000';
  24. keystrokescontainer.style.position = 'fixed';
  25. keystrokescontainer.style.left = GM_getValue('left') ? (GM_getValue('left') + 'px') : '50%';
  26. keystrokescontainer.style.top = GM_getValue('top') ? (GM_getValue('top') + 'px') : '50%';
  27. keystrokescontainer.style.opacity = '70%';
  28. window.addEventListener('load', () => document.body.appendChild(keystrokescontainer));
  29.  
  30. let isDragging = false;
  31.  
  32. keystrokescontainer.addEventListener('mousedown', (event) => {
  33. if (event.target.nodeName !== 'INPUT') {
  34. isDragging = true;
  35. }
  36. });
  37.  
  38. document.addEventListener('mousemove', (event) => {
  39. if (isDragging) {
  40. const left = event.clientX;
  41. const top = event.clientY;
  42.  
  43. keystrokescontainer.style.left = left + 'px';
  44. keystrokescontainer.style.top = top + 'px';
  45.  
  46. GM_setValue('left', left);
  47. GM_setValue('top', top);
  48. }
  49. });
  50.  
  51. document.addEventListener('mouseup', () => {
  52. isDragging = false;
  53. });
  54.  
  55. const wkey = document.createElement('div');
  56. wkey.style.position = 'fixed';
  57. wkey.style.color = '#ffffff';
  58. wkey.textContent = 'W';
  59. wkey.style.top = '5px';
  60. wkey.style.transform = 'translate(-50%)';
  61. wkey.style.left = '50%';
  62. wkey.style.zIndex = '10000';
  63. wkey.style.fontWeight = 'bold';
  64. wkey.style.borderRadius = '10px';
  65. wkey.style.backgroundColor = '#66ccff';
  66. wkey.style.fontSize = '24px';
  67. wkey.style.height = '50px';
  68. wkey.style.width = '50px';
  69. wkey.style.textAlign = 'center';
  70. wkey.style.lineHeight = '50px';
  71.  
  72.  
  73. const skey = document.createElement('div');
  74. skey.style.position = 'fixed';
  75. skey.style.color = '#ffffff';
  76. skey.textContent = 'S';
  77. skey.style.top = '60px';
  78. skey.style.left = '50%';
  79. skey.style.transform = 'translateX(-50%)';
  80. skey.style.zIndex = '10000';
  81. skey.style.fontWeight = 'bold';
  82. skey.style.borderRadius = '10px';
  83. skey.style.backgroundColor = '#66ccff';
  84. skey.style.fontSize = '24px';
  85. skey.style.height = '50px';
  86. skey.style.width = '50px';
  87. skey.style.textAlign = 'center';
  88. skey.style.lineHeight = '50px';
  89.  
  90. const akey = document.createElement('div');
  91. akey.style.position = 'fixed';
  92. akey.style.color = '#ffffff';
  93. akey.textContent = 'A';
  94. akey.style.top = '60px';
  95. akey.style.left = '31.5%';
  96. akey.style.transform = 'translateX(-50%)';
  97. akey.style.zIndex = '10000';
  98. akey.style.fontWeight = 'bold';
  99. akey.style.borderRadius = '10px';
  100. akey.style.backgroundColor = '#66ccff';
  101. akey.style.fontSize = '24px';
  102. akey.style.height = '50px';
  103. akey.style.width = '50px';
  104. akey.style.textAlign = 'center';
  105. akey.style.lineHeight = '50px';
  106.  
  107. const dkey = document.createElement('div');
  108. dkey.style.position = 'fixed';
  109. dkey.style.color = '#ffffff';
  110. dkey.textContent = 'D';
  111. dkey.style.top = '60px';
  112. dkey.style.left = '68%';
  113. dkey.style.transform = 'translateX(-50%)';
  114. dkey.style.zIndex = '10000';
  115. dkey.style.fontWeight = 'bold';
  116. dkey.style.borderRadius = '10px';
  117. dkey.style.backgroundColor = '#66ccff';
  118. dkey.style.fontSize = '24px';
  119. dkey.style.height = '50px';
  120. dkey.style.width = '50px';
  121. dkey.style.textAlign = 'center';
  122. dkey.style.lineHeight = '50px';
  123.  
  124. const lmb = document.createElement('div');
  125. lmb.style.position = 'fixed';
  126. lmb.style.color = '#ffffff';
  127. lmb.textContent = 'LMB';
  128. lmb.style.top = '115px';
  129. lmb.style.left = '260px';
  130. lmb.style.transform = 'translateX(-50%)';
  131. lmb.style.zIndex = '10000';
  132. lmb.style.fontWeight = 'bold';
  133. lmb.style.borderRadius = '10px';
  134. lmb.style.backgroundColor = '#66ccff';
  135. lmb.style.fontSize = '18px';
  136. lmb.style.height = '50px';
  137. lmb.style.width = '50px';
  138. lmb.style.textAlign = 'center';
  139. lmb.style.lineHeight = '50px';
  140.  
  141. const rmb = document.createElement('div');
  142. rmb.style.position = 'fixed';
  143. rmb.style.color = '#ffffff';
  144. rmb.textContent = 'RMB';
  145. rmb.style.top = '60px';
  146. rmb.style.left = '260px';
  147. rmb.style.transform = 'translateX(-50%)';
  148. rmb.style.zIndex = '10000';
  149. rmb.style.fontWeight = 'bold';
  150. rmb.style.borderRadius = '10px';
  151. rmb.style.backgroundColor = '#66ccff';
  152. rmb.style.fontSize = '18px';
  153. rmb.style.height = '50px';
  154. rmb.style.width = '50px';
  155. rmb.style.textAlign = 'center';
  156. rmb.style.lineHeight = '50px';
  157.  
  158. const shift = document.createElement('div');
  159. shift.style.position = 'fixed';
  160. shift.style.color = '#ffffff';
  161. shift.textContent = 'SPRINT';
  162. shift.style.top = '115px';
  163. shift.style.left = '40px';
  164. shift.style.transform = 'translateX(-50%)';
  165. shift.style.zIndex = '10000';
  166. shift.style.fontWeight = 'bold';
  167. shift.style.borderRadius = '10px';
  168. shift.style.backgroundColor = '#66ccff';
  169. shift.style.fontSize = '10px';
  170. shift.style.height = '50px';
  171. shift.style.width = '50px';
  172. shift.style.textAlign = 'center';
  173. shift.style.lineHeight = '50px';
  174.  
  175. const crouch = document.createElement('div');
  176. crouch.style.position = 'fixed';
  177. crouch.style.color = '#ffffff';
  178. crouch.textContent = 'CROUCH';
  179. crouch.style.top = '60px';
  180. crouch.style.left = '40px';
  181. crouch.style.transform = 'translateX(-50%)';
  182. crouch.style.zIndex = '10000';
  183. crouch.style.fontWeight = 'bold';
  184. crouch.style.borderRadius = '10px';
  185. crouch.style.backgroundColor = '#66ccff';
  186. crouch.style.fontSize = '10px';
  187. crouch.style.height = '50px';
  188. crouch.style.width = '50px';
  189. crouch.style.textAlign = 'center';
  190. crouch.style.lineHeight = '50px';
  191.  
  192. const space = document.createElement('div');
  193. space.style.position = 'fixed';
  194. space.style.color = '#ffffff';
  195. space.textContent = '_____';
  196. space.style.top = '115px';
  197. space.style.left = '50%';
  198. space.style.transform = 'translateX(-50%)';
  199. space.style.zIndex = '10000';
  200. space.style.fontWeight = 'bold';
  201. space.style.borderRadius = '10px';
  202. space.style.backgroundColor = '#66ccff';
  203. space.style.fontSize = '18px';
  204. space.style.height = '50px';
  205. space.style.width = '160px';
  206. space.style.textAlign = 'center';
  207. space.style.lineHeight = '50px';
  208.  
  209. // Add the elements to the body and the clientMainMenu
  210. keystrokescontainer.appendChild(wkey);
  211. keystrokescontainer.appendChild(skey);
  212. keystrokescontainer.appendChild(akey);
  213. keystrokescontainer.appendChild(dkey);
  214. keystrokescontainer.appendChild(lmb);
  215. keystrokescontainer.appendChild(rmb);
  216. keystrokescontainer.appendChild(space);
  217. keystrokescontainer.appendChild(shift);
  218. keystrokescontainer.appendChild(crouch);
  219.  
  220. document.addEventListener('keydown', (event) => {
  221. if (event.code === 'KeyW') {
  222. wkey.style.backgroundColor = '#3366ff';
  223. }
  224. else if (event.code === 'KeyS') {
  225. skey.style.backgroundColor = '#3366ff';
  226. }
  227. else if (event.code === 'KeyA') {
  228. akey.style.backgroundColor = '#3366ff';
  229. }
  230. else if (event.code === 'KeyD') {
  231. dkey.style.backgroundColor = '#3366ff';
  232. }
  233. else if (event.code === 'Space') {
  234. space.style.backgroundColor = '#3366ff';
  235. }
  236. else if (event.code === 'ShiftLeft') {
  237. shift.style.backgroundColor = '#3366ff';
  238. }
  239. else if (event.code === 'KeyC' || event.code === 'KeyZ' || event.key === 'Control') {
  240. crouch.style.backgroundColor = '#3366ff';
  241. }
  242. });
  243.  
  244. document.addEventListener('keyup', (event) => {
  245. if (event.code === 'KeyW') {
  246. wkey.style.backgroundColor = '#66ccff';
  247. }
  248. else if (event.code === 'KeyS') {
  249. skey.style.backgroundColor = '#66ccff';
  250. }
  251. else if (event.code === 'KeyA') {
  252. akey.style.backgroundColor = '#66ccff';
  253. }
  254. else if (event.code === 'KeyD') {
  255. dkey.style.backgroundColor = '#66ccff';
  256. }
  257. else if (event.code === 'Space') {
  258. space.style.backgroundColor = '#66ccff';
  259. }
  260. else if (event.code === 'ShiftLeft') {
  261. shift.style.backgroundColor = '#66ccff';
  262. }
  263. else if (event.code === 'KeyC' || event.code === 'KeyZ' || event.key === 'Control') {
  264. crouch.style.backgroundColor = '#66ccff';
  265. }
  266. });
  267.  
  268. document.addEventListener('mousedown', (event) => {
  269. if (event.button === 0) {
  270. lmb.style.backgroundColor = '#3366ff';
  271. }
  272. if (event.button === 2) {
  273. rmb.style.backgroundColor = '#3366ff';
  274. }
  275. });
  276.  
  277. document.addEventListener('mouseup', (event) => {
  278. if (event.button === 0) {
  279. lmb.style.backgroundColor = '#66ccff';
  280. }
  281. if (event.button === 2) {
  282. rmb.style.backgroundColor = '#66ccff';
  283. }
  284. });
  285.  
  286. document.addEventListener('keyup', function(event) {
  287. if (event.key === '`') {
  288. if (keystrokescontainer.style.visibility === 'hidden') {
  289. keystrokescontainer.style.visibility = 'visible';
  290. } else {
  291. keystrokescontainer.style.visibility = 'hidden';
  292. }
  293. }
  294. });
  295. })();