Adds draggable keystrokes.
// ==UserScript==
// @name Draggable Keystokes Modified
// @namespace http://tampermonkey.net/
// @version 1.2
// @description Adds draggable keystrokes.
// @author Blueify, Gnosis
// @match https://bloxd.io/
// @icon https://www.google.com/s2/favicons?sz=64&domain=bloxd.io
// @grant GM_setValue
// @grant GM_getValue
// @license MIT
// @ Modified from https://greasyfork.org/scripts/480712-draggable-keystokes
// ==/UserScript==
(function() {
'use strict';
const keystrokescontainer = document.createElement('div');
keystrokescontainer.style.zIndex = '10000';
keystrokescontainer.style.width = '300px';
keystrokescontainer.style.height = '170px';
keystrokescontainer.style.transform = 'translate(-50%, -50%)';
keystrokescontainer.style.backgroundColor = '#000000';
keystrokescontainer.style.position = 'fixed';
keystrokescontainer.style.left = GM_getValue('left') ? (GM_getValue('left') + 'px') : '50%';
keystrokescontainer.style.top = GM_getValue('top') ? (GM_getValue('top') + 'px') : '50%';
keystrokescontainer.style.opacity = '70%';
window.addEventListener('load', () => document.body.appendChild(keystrokescontainer));
let isDragging = false;
keystrokescontainer.addEventListener('mousedown', (event) => {
if (event.target.nodeName !== 'INPUT') {
isDragging = true;
}
});
document.addEventListener('mousemove', (event) => {
if (isDragging) {
const left = event.clientX;
const top = event.clientY;
keystrokescontainer.style.left = left + 'px';
keystrokescontainer.style.top = top + 'px';
GM_setValue('left', left);
GM_setValue('top', top);
}
});
document.addEventListener('mouseup', () => {
isDragging = false;
});
const wkey = document.createElement('div');
wkey.style.position = 'fixed';
wkey.style.color = '#ffffff';
wkey.textContent = 'W';
wkey.style.top = '5px';
wkey.style.transform = 'translate(-50%)';
wkey.style.left = '50%';
wkey.style.zIndex = '10000';
wkey.style.fontWeight = 'bold';
wkey.style.borderRadius = '10px';
wkey.style.backgroundColor = '#66ccff';
wkey.style.fontSize = '24px';
wkey.style.height = '50px';
wkey.style.width = '50px';
wkey.style.textAlign = 'center';
wkey.style.lineHeight = '50px';
const skey = document.createElement('div');
skey.style.position = 'fixed';
skey.style.color = '#ffffff';
skey.textContent = 'S';
skey.style.top = '60px';
skey.style.left = '50%';
skey.style.transform = 'translateX(-50%)';
skey.style.zIndex = '10000';
skey.style.fontWeight = 'bold';
skey.style.borderRadius = '10px';
skey.style.backgroundColor = '#66ccff';
skey.style.fontSize = '24px';
skey.style.height = '50px';
skey.style.width = '50px';
skey.style.textAlign = 'center';
skey.style.lineHeight = '50px';
const akey = document.createElement('div');
akey.style.position = 'fixed';
akey.style.color = '#ffffff';
akey.textContent = 'A';
akey.style.top = '60px';
akey.style.left = '31.5%';
akey.style.transform = 'translateX(-50%)';
akey.style.zIndex = '10000';
akey.style.fontWeight = 'bold';
akey.style.borderRadius = '10px';
akey.style.backgroundColor = '#66ccff';
akey.style.fontSize = '24px';
akey.style.height = '50px';
akey.style.width = '50px';
akey.style.textAlign = 'center';
akey.style.lineHeight = '50px';
const dkey = document.createElement('div');
dkey.style.position = 'fixed';
dkey.style.color = '#ffffff';
dkey.textContent = 'D';
dkey.style.top = '60px';
dkey.style.left = '68%';
dkey.style.transform = 'translateX(-50%)';
dkey.style.zIndex = '10000';
dkey.style.fontWeight = 'bold';
dkey.style.borderRadius = '10px';
dkey.style.backgroundColor = '#66ccff';
dkey.style.fontSize = '24px';
dkey.style.height = '50px';
dkey.style.width = '50px';
dkey.style.textAlign = 'center';
dkey.style.lineHeight = '50px';
const lmb = document.createElement('div');
lmb.style.position = 'fixed';
lmb.style.color = '#ffffff';
lmb.textContent = 'LMB';
lmb.style.top = '115px';
lmb.style.left = '260px';
lmb.style.transform = 'translateX(-50%)';
lmb.style.zIndex = '10000';
lmb.style.fontWeight = 'bold';
lmb.style.borderRadius = '10px';
lmb.style.backgroundColor = '#66ccff';
lmb.style.fontSize = '18px';
lmb.style.height = '50px';
lmb.style.width = '50px';
lmb.style.textAlign = 'center';
lmb.style.lineHeight = '50px';
const rmb = document.createElement('div');
rmb.style.position = 'fixed';
rmb.style.color = '#ffffff';
rmb.textContent = 'RMB';
rmb.style.top = '60px';
rmb.style.left = '260px';
rmb.style.transform = 'translateX(-50%)';
rmb.style.zIndex = '10000';
rmb.style.fontWeight = 'bold';
rmb.style.borderRadius = '10px';
rmb.style.backgroundColor = '#66ccff';
rmb.style.fontSize = '18px';
rmb.style.height = '50px';
rmb.style.width = '50px';
rmb.style.textAlign = 'center';
rmb.style.lineHeight = '50px';
const shift = document.createElement('div');
shift.style.position = 'fixed';
shift.style.color = '#ffffff';
shift.textContent = 'SPRINT';
shift.style.top = '115px';
shift.style.left = '40px';
shift.style.transform = 'translateX(-50%)';
shift.style.zIndex = '10000';
shift.style.fontWeight = 'bold';
shift.style.borderRadius = '10px';
shift.style.backgroundColor = '#66ccff';
shift.style.fontSize = '10px';
shift.style.height = '50px';
shift.style.width = '50px';
shift.style.textAlign = 'center';
shift.style.lineHeight = '50px';
const crouch = document.createElement('div');
crouch.style.position = 'fixed';
crouch.style.color = '#ffffff';
crouch.textContent = 'CROUCH';
crouch.style.top = '60px';
crouch.style.left = '40px';
crouch.style.transform = 'translateX(-50%)';
crouch.style.zIndex = '10000';
crouch.style.fontWeight = 'bold';
crouch.style.borderRadius = '10px';
crouch.style.backgroundColor = '#66ccff';
crouch.style.fontSize = '10px';
crouch.style.height = '50px';
crouch.style.width = '50px';
crouch.style.textAlign = 'center';
crouch.style.lineHeight = '50px';
const space = document.createElement('div');
space.style.position = 'fixed';
space.style.color = '#ffffff';
space.textContent = '_____';
space.style.top = '115px';
space.style.left = '50%';
space.style.transform = 'translateX(-50%)';
space.style.zIndex = '10000';
space.style.fontWeight = 'bold';
space.style.borderRadius = '10px';
space.style.backgroundColor = '#66ccff';
space.style.fontSize = '18px';
space.style.height = '50px';
space.style.width = '160px';
space.style.textAlign = 'center';
space.style.lineHeight = '50px';
// Add the elements to the body and the clientMainMenu
keystrokescontainer.appendChild(wkey);
keystrokescontainer.appendChild(skey);
keystrokescontainer.appendChild(akey);
keystrokescontainer.appendChild(dkey);
keystrokescontainer.appendChild(lmb);
keystrokescontainer.appendChild(rmb);
keystrokescontainer.appendChild(space);
keystrokescontainer.appendChild(shift);
keystrokescontainer.appendChild(crouch);
document.addEventListener('keydown', (event) => {
if (event.code === 'KeyW') {
wkey.style.backgroundColor = '#3366ff';
}
else if (event.code === 'KeyS') {
skey.style.backgroundColor = '#3366ff';
}
else if (event.code === 'KeyA') {
akey.style.backgroundColor = '#3366ff';
}
else if (event.code === 'KeyD') {
dkey.style.backgroundColor = '#3366ff';
}
else if (event.code === 'Space') {
space.style.backgroundColor = '#3366ff';
}
else if (event.code === 'ShiftLeft') {
shift.style.backgroundColor = '#3366ff';
}
else if (event.code === 'KeyC' || event.code === 'KeyZ' || event.key === 'Control') {
crouch.style.backgroundColor = '#3366ff';
}
});
document.addEventListener('keyup', (event) => {
if (event.code === 'KeyW') {
wkey.style.backgroundColor = '#66ccff';
}
else if (event.code === 'KeyS') {
skey.style.backgroundColor = '#66ccff';
}
else if (event.code === 'KeyA') {
akey.style.backgroundColor = '#66ccff';
}
else if (event.code === 'KeyD') {
dkey.style.backgroundColor = '#66ccff';
}
else if (event.code === 'Space') {
space.style.backgroundColor = '#66ccff';
}
else if (event.code === 'ShiftLeft') {
shift.style.backgroundColor = '#66ccff';
}
else if (event.code === 'KeyC' || event.code === 'KeyZ' || event.key === 'Control') {
crouch.style.backgroundColor = '#66ccff';
}
});
document.addEventListener('mousedown', (event) => {
if (event.button === 0) {
lmb.style.backgroundColor = '#3366ff';
}
if (event.button === 2) {
rmb.style.backgroundColor = '#3366ff';
}
});
document.addEventListener('mouseup', (event) => {
if (event.button === 0) {
lmb.style.backgroundColor = '#66ccff';
}
if (event.button === 2) {
rmb.style.backgroundColor = '#66ccff';
}
});
document.addEventListener('keyup', function(event) {
if (event.key === '`') {
if (keystrokescontainer.style.visibility === 'hidden') {
keystrokescontainer.style.visibility = 'visible';
} else {
keystrokescontainer.style.visibility = 'hidden';
}
}
});
})();