Key press visual representation

Shows what keys you are hitting. Can be useful for game streaming etc
Verze ze dne 06. 03. 2024. Zobrazit nejnovější verzi.
Zeptejte se na otázku, přidejte recenzi nebo skript nahlašte.
Wrap lines
// ==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);

})();