☰

Greasy Fork is available in English.

Key press visual representation

Shows what keys you are hitting. Can be useful for .io game streaming, tutorials etc.

Pada tanggal 07 Maret 2024. Lihat %(latest_version_link).

// ==UserScript==
// @name         Key press visual representation
// @namespace    http://tampermonkey.net/
// @version      2.2
// @description  Shows what keys you are hitting. Can be useful for .io game streaming, tutorials etc. 
// @author       MrBlank
// @license      MIT
// @match        https://lolbeans.io
// @match        *://diep.io/*
// @match        *://moomoo.io/*
// @match        *://sandbox.moomoo.io/*
// @match        *://*.shellshock.io/*
// @match        https://smashkarts.io/
// @match        https://sploop.io/
// @match        https://sploop.io/
// @match        https://yohoho.io/
// @match        https://hexanaut.io/
// @match        https://copter.io/
// @match        https://defly.io/
// @match        https://www.crazygames.com/
// @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: 'W', top: '50px', left: '100px', size: '50px' }, // W key
        { key: 'A', top: '110px', left: '50px', size: '50px' }, // A key
        { key: 'S', top: '110px', left: '120px', size: '50px' }, // S key
        { key: 'D', top: '110px', left: '190px', size: '50px' } // D key
    ];

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

    // Create the space bar
    var spaceBar = document.createElement('div');
    spaceBar.textContent = 'Space';
    spaceBar.style.position = 'fixed';
    spaceBar.style.top = '170px'; // Adjusted position
    spaceBar.style.left = '50%';
    spaceBar.style.transform = 'translateX(-330%)'; // Centering horizontally
    spaceBar.style.width = '200px'; // Making it wider
    spaceBar.style.height = '50px'; // Making it longer
    spaceBar.style.backgroundColor = 'transparent';
    spaceBar.style.border = '2px solid black';
    spaceBar.style.textAlign = 'center';
    spaceBar.style.lineHeight = '50px';
    document.body.appendChild(spaceBar);
    boxes.push(spaceBar);



    document.addEventListener('keydown', function(event) {
        if (event.key === 'a' || event.key === 'A') {
            changeColorToRed(boxes[1]);
        } else if (event.key === 'w' || event.key === 'W') {
            changeColorToRed(boxes[0]);
        } 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(spaceBar); // Space bar
        }
    });

    document.addEventListener('keyup', function(event) {
        if (event.key === 'a' || event.key === 'A') {
            resetColor(boxes[1]);
        } else if (event.key === 'w' || event.key === 'W') {
            resetColor(boxes[0]);
        } 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(spaceBar); // Space bar
        }
    });

    setInterval(function() {
        boxes.forEach(function(box) {
            document.body.appendChild(box);
        });
    }, 1000);

})();