Draggable Virtual Keyboard
// ==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;
};
})();