☰

Key press visual representation

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

Version au 08/03/2024. Voir la dernière version.

// ==UserScript==
// @name         Key press visual representation
// @namespace    http://tampermonkey.net/
// @version      3
// @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        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 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) {
                addKeyBox(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';
    }

    // Add key box
    function addKeyBox(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.style.cssText = `
            ${boxStyle}
            background-color: ${color};
            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; /* Adjust the distance from the top */
        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: 100px;
        background-color: rgba(255, 255, 255, 0.7);
        padding: 10px;
        border: 2px solid black;
        z-index: 9998; /* Ensure it's below the menu */
    `;
    document.body.appendChild(keyBoxContainer);

    var initialKeys = [
        { key: 'W', color: '#ff0000' },
        { key: 'A', color: '#00ff00' },
        { key: 'S', color: '#0000ff' },
        { key: 'D', color: '#ffff00' }
    ];
    initialKeys.forEach(function(item) {
        addKeyBox(item.key, item.color);
    });

    function changeColorToRed(box) {
        box.style.backgroundColor = 'red';
    }

    function resetColor(box) {
        box.style.backgroundColor = 'transparent';
    }

    document.addEventListener('keydown', function(event) {
        var key = event.key.toUpperCase();
        var keyBoxes = document.querySelectorAll('.keyBox');
        keyBoxes.forEach(function(box) {
            if (box.textContent === key) {
                changeColorToRed(box);
            }
        });
    });

    document.addEventListener('keyup', function(event) {
        var key = event.key.toUpperCase();
        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;
        }
    }

})();