Key press visual representation

Shows what keys you are hitting, **press escape to open the menu** Can be useful for .io game streaming, tutorials, etc.
安装此脚本 ?
提问、发表评价，或者举报这个脚本。
换行
// ==UserScript==
// @name         Key press visual representation
// @namespace    http://tampermonkey.net/
// @version      5
// @description  Shows what keys you are hitting, **press escape to open the menu** Can be useful for .io game streaming, tutorials, etc.
// @author       MrBlank
// @match        *://lolbeans.io/*
// @match        *://*.moomoo.io/*
// @match        *://moomoo.io/*
// @match        *://sandbox.moomoo.io/*
// @match        *://dev.moomoo.io/*
// @match        *://*.smashkarts.io/*
// @match        *://*.sploop.io/*
// @match        *://*.yohoho.io/*
// @match        *://*.brutal.io/*
// @match        *://*.bonk.io/*
// @match        *://*.florr.io/*
// @match        *://*.copter.io/*
// @match        *://*.defly.io/*
// @grant        GM_setValue
// @grant        GM_getValue
// @run-at       document-end
// @icon         https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT3qlribLz6iUSvZNdelROWb7FlW5yGDJGgog&s
// ==/UserScript==
 
//PRESS ESCAPE TO OEPN THE MENU
 
(function() {
    'use strict';
 
    var styles = `
        .key-press-menu {
            position: fixed;
            top: 20px;
            right: 20px;
            background-color: #f0f0f0;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            padding: 15px;
            font-family: Arial, sans-serif;
            z-index: 10000;
            display: none;
            resize: both;
            overflow: auto;
            min-width: 200px;
            min-height: 150px;
            max-width: 600px; /* Restrict max width */
            max-height: 400px; /* Restrict max height */
        }
        .key-press-menu h3 {
            margin-top: 0;
            color: #333;
        }
        .key-press-menu input, .key-press-menu button, .key-press-menu select {
            margin: 5px 0;
            padding: 5px;
            width: 100%;
            box-sizing: border-box;
        }
        .key-press-menu button {
            background-color: #4CAF50;
            color: white;
            border: none;
            padding: 10px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 14px;
            margin: 4px 2px;
            cursor: pointer;
            border-radius: 4px;
        }
        .key-box {
            position: fixed;
            width: 50px;
            height: 50px;
            background-color: transparent;
            border: 2px solid #333;
            text-align: center;
            line-height: 50px;
            font-family: Arial, sans-serif;
            font-weight: bold;
            color: #333;
            cursor: move;
            user-select: none;
            border-radius: 5px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        }
    `;
 
    // Add styles to the document
    var styleElement = document.createElement('style');
    styleElement.textContent = styles;
    document.head.appendChild(styleElement);
 
    function createMenu() {
        var menuContainer = document.createElement('div');
        menuContainer.className = 'key-press-menu';
        menuContainer.innerHTML = `
            <h3>Key Press Settings</h3>
            <input type="text" id="keyInput" placeholder="Enter key">
            <input type="color" id="colorInput" value="#ff0000">
            <button id="addKeyButton">Add Key</button>
            <select id="removeKeySelect"></select>
            <button id="removeKeyButton">Remove Selected Key</button>
        `;
        document.body.appendChild(menuContainer);
 
        // Add key
        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, {top: 100, left: 100});
                document.getElementById('keyInput').value = '';
                saveKeys();
                updateRemoveKeySelect();
            }
        });
 
        // Remove key
        document.getElementById('removeKeyButton').addEventListener('click', function() {
            var select = document.getElementById('removeKeySelect');
            var selectedKey = select.value;
            if (selectedKey) {
                removeKeyBox(selectedKey);
                saveKeys();
                updateRemoveKeySelect();
                trackRemovedKey(selectedKey);
            }
        });
    }
 
    function toggleMenu() {
        var menuContainer = document.querySelector('.key-press-menu');
        if (menuContainer.style.display === 'none' || menuContainer.style.display === '') {
            menuContainer.style.display = 'block';
        } else {
            menuContainer.style.display = 'none';
        }
    }
 
    document.addEventListener('keydown', function(event) {
        if (event.key === 'Escape') {
            toggleMenu();
        }
    });
 
    function addKeyBox(key, color, pos) {
        var box = document.createElement('div');
        box.className = 'key-box';
        box.textContent = key;
        box.dataset.color = color;
        box.style.left = `${pos.left}px`;
        box.style.top = `${pos.top}px`;
        if (key === 'SPACE') {
            box.style.width = '200px';
            box.style.height = '50px';
        }
        document.body.appendChild(box);
        makeDraggable(box);
    }
 
    function removeKeyBox(key) {
        var keyBoxes = document.querySelectorAll('.key-box');
        keyBoxes.forEach(function(box) {
            if (box.textContent === key) {
                document.body.removeChild(box);
            }
        });
    }
 
    function makeDraggable(element) {
        var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
        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;
            saveKeys();
        }
    }
 
    function saveKeys() {
        var keys = [];
        document.querySelectorAll('.key-box').forEach(function(box) {
            keys.push({
                key: box.textContent,
                color: box.dataset.color,
                top: parseInt(box.style.top),
                left: parseInt(box.style.left)
            });
        });
        localStorage.setItem('keyPressVisualKeys', JSON.stringify(keys));
    }
 
    function loadKeys() {
        var storedKeys = JSON.parse(localStorage.getItem('keyPressVisualKeys')) || [];
        var removedKeys = JSON.parse(localStorage.getItem('removedKeys')) || [];
        var existingKeys = new Set(storedKeys.map(item => item.key));
 
        storedKeys.forEach(function(item) {
            addKeyBox(item.key, item.color, { top: item.top, left: item.left });
        });
 
        var defaultKeys = [
            { key: 'W', color: '#ff0000', top: 50, left: 150 },
            { key: 'A', color: '#00ff00', top: 110, left: 90 },
            { key: 'S', color: '#0000ff', top: 110, left: 150 },
            { key: 'D', color: '#ffff00', top: 110, left: 210 },
            { key: 'SPACE', color: '#ff00ff', top: 170, left: 90 },
            { key: 'CONTROL', color: '#00ffff', top: 50, left: 60 }
        ];
 
        defaultKeys.forEach(function(item) {
            if (!existingKeys.has(item.key) && !removedKeys.includes(item.key)) {
                addKeyBox(item.key, item.color, { top: item.top, left: item.left });
                existingKeys.add(item.key);
            }
        });
 
        updateRemoveKeySelect();
    }
 
    function updateRemoveKeySelect() {
        var select = document.getElementById('removeKeySelect');
        select.innerHTML = ''; // Clear options
        document.querySelectorAll('.key-box').forEach(function(box) {
            var option = document.createElement('option');
            option.value = box.textContent;
            option.textContent = box.textContent;
            select.appendChild(option);
        });
    }
 
    function trackRemovedKey(key) {
        var removedKeys = JSON.parse(localStorage.getItem('removedKeys')) || [];
        if (!removedKeys.includes(key)) {
            removedKeys.push(key);
            localStorage.setItem('removedKeys', JSON.stringify(removedKeys));
        }
    }
 
    createMenu();
    loadKeys();
 
    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";
        if (key === "CONTROL") key = "CONTROL";
 
        var keyBoxes = document.querySelectorAll('.key-box');
        keyBoxes.forEach(function(box) {
            if (box.textContent === key) {
                changeColor(box, box.dataset.color);
            }
        });
    });
 
    document.addEventListener('keyup', function(event) {
        var key = event.key.toUpperCase();
        if (key === " ") key = "SPACE";
        if (key === "CONTROL") key = "CONTROL";
 
        var keyBoxes = document.querySelectorAll('.key-box');
        keyBoxes.forEach(function(box) {
            if (box.textContent === key) {
                resetColor(box);
            }
        });
    });
    setInterval(function() {
        var keyBoxes = document.querySelectorAll('.key-box');
        keyBoxes.forEach(function(box) {
            document.body.appendChild(box);
        });
    }, 1000);
})();