☰

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