Shows what keys you are hitting. Can be useful for .io game streaming, tutorials, etc.
Per
// ==UserScript==
// @name Key press visual representation
// @namespace http://tampermonkey.net/
// @version 4
// @description Shows what keys you are hitting. Can be useful for .io game streaming, tutorials, etc.
// @author MrBlank
// @match https://lolbeans.io
// @match *://diep.io/*
// @match *://moomoo.io/*
// @match *://sandbox.moomoo.io/*
// @match *://*.shellshock.io/*
// @match *://*.smashkarts.io/*
// @match *://*.sploop.io/*
// @match *://*.yohoho.io/*
// @match *://*.hexanaut.io/*
// @match *://*.copter.io/*
// @match *://*.defly.io/*
// @grant GM_setValue
// @grant GM_getValue
// @run-at document-end
// ==/UserScript==
(function() {
'use strict';
function createMenu() {
var menuContainer = document.createElement('div');
menuContainer.id = 'keyPressMenu';
menuContainer.style.cssText = `
position: fixed;
top: 300px;
left: 550px;
background-color: white;
padding: 10px;
border: 2px solid black;
z-index: 9999;
`;
menuContainer.innerHTML = `
<h3>Key Press Visual Representation Settings</h3>
<label for="keyInput">Key:</label>
<input type="text" id="keyInput" placeholder="Enter key">
<br>
<label for="colorInput">Color:</label>
<input type="color" id="colorInput" value="#ff0000">
<br>
<button id="addKeyButton">Add Key</button>
<button id="closeMenuButton">Close</button>
`;
document.body.appendChild(menuContainer);
document.getElementById('addKeyButton').addEventListener('click', function() {
var key = document.getElementById('keyInput').value.toUpperCase();
var color = document.getElementById('colorInput').value;
if (key && color) {
addKeyBoxs(key, color);
document.getElementById('keyInput').value = '';
}
});
document.getElementById('closeMenuButton').addEventListener('click', function() {
document.getElementById('keyPressMenu').style.display = 'none';
document.getElementById('reopenMenuButton').style.display = 'block';
});
}
function reopenMenu() {
document.getElementById('keyPressMenu').style.display = 'block';
document.getElementById('reopenMenuButton').style.display = 'none';
}
function addKeyBox(key, color, pos) {
var existingBoxes = document.querySelectorAll('.keyBox');
var leftOffset = pos.left + existingBoxes.length * 70;
var topOffset = pos.top;
var box = document.createElement('div');
box.className = 'keyBox';
box.textContent = key;
box.dataset.color = color;
box.style.cssText = `
${boxStyle}
background-color: transparent;
left: ${leftOffset}px;
top: ${topOffset}px;
`;
if (key === 'SPACE') {
box.style.width = '200px';
box.style.height = '50px';
}
keyBoxContainer.appendChild(box);
}
function addKeyBoxs(key, color) {
var existingBoxes = document.querySelectorAll('.keyBox');
var leftOffset = 10 + existingBoxes.length * 70;
var box = document.createElement('div');
box.className = 'keyBox';
box.textContent = key;
box.dataset.color = color;
box.style.cssText = `
${boxStyle}
background-color: transparent;
left: ${leftOffset}px;
`;
keyBoxContainer.appendChild(box);
}
var boxStyle = `
position: absolute;
width: 50px;
height: 50px;
background-color: transparent;
border: 2px solid black;
text-align: center;
line-height: 50px;
`;
createMenu();
var reopenMenuButton = document.createElement('button');
reopenMenuButton.id = 'reopenMenuButton';
reopenMenuButton.textContent = 'Open Menu';
reopenMenuButton.style.cssText = `
position: fixed;
top: 50px;
right: 10px;
display: none;
padding: 10px;
font-size: 16px;
`;
reopenMenuButton.addEventListener('click', reopenMenu);
document.body.appendChild(reopenMenuButton);
var keyBoxContainer = document.createElement('div');
keyBoxContainer.id = 'keyBoxContainer';
keyBoxContainer.style.cssText = `
position: absolute;
top: 100px;
left: 200px;
background-color: rgba(255, 255, 255, 0.7);
padding: 10px;
border: 2px solid black;
`;
document.body.appendChild(keyBoxContainer);
var initialKeys = [
{ key: 'W', color: '#ff0000', top: '50px', left: '150px' },
{ key: 'A', color: '#00ff00', top: '110px', left: '50px' },
{ key: 'S', color: '#0000ff', top: '110px', left: '53px' },
{ key: 'D', color: '#ffff00', top: '110px', left: '56px' },
{ key: 'SPACE', color: '#ff00ff', top: '170px', left: '-158px' }
];
initialKeys.forEach(function(item) {
addKeyBox(item.key, item.color, { top: parseInt(item.top), left: parseInt(item.left) });
});
function resetColor(box) {
box.style.backgroundColor = 'transparent';
}
function changeColor(box, color) {
box.style.backgroundColor = color;
}
document.addEventListener('keydown', function(event) {
var key = event.key.toUpperCase();
if (key === " ") key = "SPACE";
var keyBoxes = document.querySelectorAll('.keyBox');
keyBoxes.forEach(function(box) {
if (box.textContent === key) {
var color = box.dataset.color;
changeColor(box, color);
}
});
});
document.addEventListener('keyup', function(event) {
var key = event.key.toUpperCase();
if (key === " ") key = "SPACE";
var keyBoxes = document.querySelectorAll('.keyBox');
keyBoxes.forEach(function(box) {
if (box.textContent === key) {
resetColor(box);
}
});
});
makeDraggable(keyBoxContainer);
function makeDraggable(element) {
var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
if (document.getElementById(element.id + 'Header')) {
document.getElementById(element.id + 'Header').onmousedown = dragMouseDown;
} else {
element.onmousedown = dragMouseDown;
}
function dragMouseDown(e) {
e = e || window.event;
e.preventDefault();
pos3 = e.clientX;
pos4 = e.clientY;
document.onmouseup = closeDragElement;
document.onmousemove = elementDrag;
}
function elementDrag(e) {
e = e || window.event;
e.preventDefault();
pos1 = pos3 - e.clientX;
pos2 = pos4 - e.clientY;
pos3 = e.clientX;
pos4 = e.clientY;
element.style.top = (element.offsetTop - pos2) + 'px';
element.style.left = (element.offsetLeft - pos1) + 'px';
}
function closeDragElement() {
document.onmouseup = null;
document.onmousemove = null;
}
}
setInterval(function() {
document.body.appendChild(keyBoxContainer);
boxes.forEach(function(box) {
keyBoxContainer.appendChild(box);
});
}, 1000);
})();