Virtual WASD Keyboard

Draggable Virtual Keyboard
This script should not be not be installed directly. It is a library for other scripts to include with the meta directive // @require https://update.greasyfork.org/scripts/589289/1889735/Virtual%20WASD%20Keyboard.js
Ask a question, post a review, or report the script.
Wrap lines
// ==UserScript==
// @name         Virtual WASD Keyboard
// @namespace    http://tampermonkey.net/
// @version      1.0
// @description  Draggable Virtual Keyboard
// @match        *://*/*
// @grant        none
// ==/UserScript==

(function () {
    'use strict';

    const panel = document.createElement("div");
    panel.id = "vk-panel";
    panel.innerHTML = `
<div id="dragBar">⌨ Virtual Keyboard</div>

<div class="row">
<button data-key="KeyW">W</button>
</div>

<div class="row">
<button data-key="KeyA">A</button>
<button data-key="KeyS">S</button>
<button data-key="KeyD">D</button>
</div>

<div class="row">
<button class="space" data-key="Space">SPACE</button>
</div>
`;

    document.body.appendChild(panel);

    const style = document.createElement("style");
    style.textContent = `
#vk-panel{
position:fixed;
left:20px;
bottom:20px;
width:220px;
background:#111;
border:2px solid cyan;
border-radius:15px;
box-shadow:0 0 20px cyan;
z-index:999999;
font-family:sans-serif;
user-select:none;
}

#dragBar{
padding:8px;
background:#222;
color:white;
cursor:move;
text-align:center;
font-weight:bold;
border-radius:12px 12px 0 0;
}

.row{
display:flex;
justify-content:center;
margin:6px;
gap:6px;
}

button{
width:55px;
height:55px;
font-size:20px;
font-weight:bold;
border:none;
border-radius:10px;
background:#222;
color:white;
cursor:pointer;
transition:.2s;
}

button:hover{
background:#0ff;
color:black;
box-shadow:0 0 15px cyan;
}

button:active{
transform:scale(.9);
}

.space{
width:180px;
}
`;
    document.head.appendChild(style);

    function send(type, code) {
        document.dispatchEvent(new KeyboardEvent(type, {
            code,
            key: code === "Space" ? " " : code.replace("Key",""),
            bubbles: true
        }));
    }

    panel.querySelectorAll("button[data-key]").forEach(btn=>{

        btn.addEventListener("mousedown",()=>{
            send("keydown",btn.dataset.key);
        });

        btn.addEventListener("mouseup",()=>{
            send("keyup",btn.dataset.key);
        });

        btn.addEventListener("mouseleave",()=>{
            send("keyup",btn.dataset.key);
        });

        btn.addEventListener("touchstart",(e)=>{
            e.preventDefault();
            send("keydown",btn.dataset.key);
        });

        btn.addEventListener("touchend",(e)=>{
            e.preventDefault();
            send("keyup",btn.dataset.key);
        });

    });

    // Drag
    let dragging=false,offsetX=0,offsetY=0;

    const bar=document.getElementById("dragBar");

    bar.onmousedown=e=>{
        dragging=true;
        offsetX=e.clientX-panel.offsetLeft;
        offsetY=e.clientY-panel.offsetTop;
    };

    document.onmousemove=e=>{
        if(!dragging)return;
        panel.style.left=(e.clientX-offsetX)+"px";
        panel.style.top=(e.clientY-offsetY)+"px";
        panel.style.bottom="auto";
    };

    document.onmouseup=()=>{
        dragging=false;
    };

})();