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.

// ==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);


})();