☰

Voxiom.io Key and Mouse Tracker // For Lives

Keyboard Tracker

// ==UserScript==
// @name         Voxiom.io Key and Mouse Tracker // For Lives
// @namespace    http://tampermonkey.net/
// @version      1.2
// @description  Keyboard Tracker
// @author       Whoami
// @match        *://voxiom.io/*
// @grant        none
// @require      https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js
// @require      https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js
// @license      MIT
// ==/UserScript==

(function() {
    'use strict';

    // CSS styles
    const styles = `
    @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600&display=swap');
    body {
        margin: 0;
        padding: 0;
    }
    #initialScreen {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: black;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 1000;
    }
    #initialScreenText {
        font-family: 'Montserrat', sans-serif;
        font-size: 48px;
        color: white;
        cursor: pointer;
    }
    #keyMouseMenu {
        position: fixed;
        top: 50%;
        left: 0;
        transform: translateY(-50%);
        font-family: 'Montserrat', sans-serif;
        font-size: 18px;
        color: white;
        background-color: rgba(0, 0, 0, 0.8);
        padding: 20px;
        border-radius: 10px;
        display: none;
        z-index: 1000;
    }
    #keyboard {
        display: grid;
        grid-template-columns: repeat(14, 30px);
        gap: 5px;
        justify-content: center;
        margin-top: 20px;
    }
    .key {
        width: 30px;
        height: 30px;
        background-color: white;
        color: black;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 5px;
        font-size: 12px;
        text-align: center;
    }
    .key.pressed {
        background-color: red;
    }
    `;

    // Add styles to the document
    const styleSheet = document.createElement("style");
    styleSheet.type = "text/css";
    styleSheet.innerText = styles;
    document.head.appendChild(styleSheet);

    // Create initial screen
    const initialScreen = document.createElement('div');
    initialScreen.id = 'initialScreen';
    const initialScreenText = document.createElement('div');
    initialScreenText.id = 'initialScreenText';
    initialScreenText.innerText = '[L] To Show/Hide Keyboard';
    initialScreen.appendChild(initialScreenText);
    document.body.appendChild(initialScreen);

    // Create key and mouse menu
    const keyMouseMenu = document.createElement('div');
    keyMouseMenu.id = 'keyMouseMenu';
    keyMouseMenu.innerHTML = '<div id="keyboard"></div>';
    document.body.appendChild(keyMouseMenu);

    // List of keys
    const keys = ['ESC', 'F1', 'F2', 'F3', 'F4', 'F5', 'F6', 'F7', 'F8', 'F9', 'F10', 'F11', 'F12', 'PRTSC',
                  '1', '2', '3', '4', '5', '6', '7', '8', '9', '0', '-', '=', 'BACKSPACE',
                  'TAB', 'Q', 'W', 'E', 'R', 'T', 'Y', 'U', 'I', 'O', 'P', '[', ']', '\\',
                  'CAPSLOCK', 'A', 'S', 'D', 'F', 'G', 'H', 'J', 'K', 'L', ';', '\'', 'ENTER',
                  'SHIFT', 'Z', 'X', 'C', 'V', 'B', 'N', 'M', ',', '.', '/', 'SHIFT',
                  'CTRL', 'WIN', 'ALT', 'SPACE', 'ALT', 'WIN', 'MENU', 'CTRL'];

    // Add keys to keyboard
    const keyboard = document.getElementById('keyboard');
    keys.forEach(key => {
        const keyDiv = document.createElement('div');
        keyDiv.className = 'key';
        keyDiv.innerText = key;
        keyDiv.dataset.key = key;
        keyboard.appendChild(keyDiv);
    });

    // Function to handle key presses
    function handleKeyPress(event) {
        const key = event.key.toUpperCase();
        const keyDiv = [...document.querySelectorAll('.key')].find(k => k.dataset.key === key);
        if (keyDiv) keyDiv.classList.add('pressed');
    }

    // Function to handle key releases
    function handleKeyRelease(event) {
        const key = event.key.toUpperCase();
        const keyDiv = [...document.querySelectorAll('.key')].find(k => k.dataset.key === key);
        if (keyDiv) keyDiv.classList.remove('pressed');
    }

    // Toggle menu visibility
    function toggleMenu() {
        if (keyMouseMenu.style.display === 'none') {
            keyMouseMenu.style.display = 'block';
            anime({
                targets: '#keyMouseMenu',
                opacity: [0, 1],
                duration: 500,
                easing: 'easeInOutQuad'
            });
        } else {
            anime({
                targets: '#keyMouseMenu',
                opacity: [1, 0],
                duration: 500,
                easing: 'easeInOutQuad',
                complete: function() {
                    keyMouseMenu.style.display = 'none';
                }
            });
        }
    }

    // Add event listeners
    document.addEventListener('keydown', handleKeyPress);
    document.addEventListener('keyup', handleKeyRelease);
    document.addEventListener('keydown', (event) => {
        if (event.key.toUpperCase() === 'L') toggleMenu();
    });

    // Initial screen animation
    initialScreenText.addEventListener('mouseover', () => {
        anime({
            targets: '#initialScreen',
            opacity: [1, 0],
            duration: 6000,
            easing: 'easeInOutQuad',
            complete: function() {
                initialScreen.style.display = 'none';
            }
        });
    });

})();