Shows what keys you are hitting. Can be useful for game streaming etc
Version au
// ==UserScript==
// @name Key press visual representation
// @namespace http://tampermonkey.net/
// @version 1
// @description Shows what keys you are hitting. Can be useful for game streaming etc
// @author MrBlank
// @license GPL-3.0
// @match https://lolbeans.io
// @grant GM_setValue
// @grant GM_getValue
// @run-at document-end
// ==/UserScript==
(function() {
'use strict';
function changeColorToRed(box) {
box.style.backgroundColor = 'red';
}
function resetColor(box) {
box.style.backgroundColor = 'transparent';
}
var boxes = [];
var boxLayout = [
{ key: 'A', top: '50px', left: '50px', size: '50px' },
{ key: 'W', top: '50px', left: '150px', size: '50px' },
{ key: 'S', top: '150px', left: '50px', size: '50px' },
{ key: 'D', top: '150px', left: '150px', size: '50px' },
{ key: 'Space', top: '250px', left: '100px', size: '150px' }
];
boxLayout.forEach(function(item) {
var box = document.createElement('div');
box.textContent = item.key;
box.style.position = 'fixed';
box.style.top = item.top;
box.style.left = item.left;
box.style.width = item.size;
box.style.height = item.size;
box.style.backgroundColor = 'transparent';
box.style.border = '2px solid black';
box.style.textAlign = 'center';
box.style.lineHeight = item.size;
document.body.appendChild(box);
boxes.push(box);
});
document.addEventListener('keydown', function(event) {
if (event.key === 'a' || event.key === 'A') {
changeColorToRed(boxes[0]);
} else if (event.key === 'w' || event.key === 'W') {
changeColorToRed(boxes[1]);
} else if (event.key === 's' || event.key === 'S') {
changeColorToRed(boxes[2]);
} else if (event.key === 'd' || event.key === 'D') {
changeColorToRed(boxes[3]);
} else if (event.key === ' ' || event.key === 'Space') {
changeColorToRed(boxes[4]);
}
});
document.addEventListener('keyup', function(event) {
if (event.key === 'a' || event.key === 'A') {
resetColor(boxes[0]);
} else if (event.key === 'w' || event.key === 'W') {
resetColor(boxes[1]);
} else if (event.key === 's' || event.key === 'S') {
resetColor(boxes[2]);
} else if (event.key === 'd' || event.key === 'D') {
resetColor(boxes[3]);
} else if (event.key === ' ' || event.key === 'Space') {
resetColor(boxes[4]);
}
});
setInterval(function() {
boxes.forEach(function(box) {
document.body.appendChild(box);
});
}, 1000);
})();