Keystrokes userscript by KraXen72 (for https://github.com/KraXen72/crankshaft krunker.io client)

keystrokes.js

// ==UserScript==
// @name Keystrokes
// @author KraXen72
// @version 1.2
// @desc Shows WASD, shift, space and 2 configurable keys on screen
// @src https://gist.github.com/KraXen72/2ea1332440b0c66b83ca9b73afc38269
// ==/UserScript==

//keystrokes userscript by KraXen72. made for the Crankshaft client. 
//You are free to modify it for your own purposes (unpublished)
//if you are going to publish your modification, add a link to the gist and credit KraXen72

// here you can mess with the values
const size = 2.5 //how many rem will one of the keys be in height
const auxKey1 = "R" //the key to switch to secondary or any other extra key you want to track. UPPERCASE
const auxKey2 = "N" //the key to switch to knife or any other extra key you want to track. UPPERCASE

let prependCSS = ""
//uncomment this line to hide the auxillary keys
//prependCSS = `.key-aux1, .key-aux2 { display: none !important; }`

//ok don't touch it past this point unless you know what you're doing
const keysHTML = `
    <span class="key key-w">W</span>
    <span class="key key-a">A</span>
    <span class="key key-s">S</span>
    <span class="key key-d">D</span>
    <span class="key key-sft">sft</span>
    <span class="key key-space">__</span>
    <span class="key key-aux1">${auxKey1}</span>
    <span class="key key-aux2">${auxKey2}</span>
`
function precisionRound(number, precision = 2) {
    let factor = Math.pow(10, precision);
    return Math.round(number * factor) / factor;
}
let css = `
    ${prependCSS}
    .keystrokes-hold {
        display: grid;
        grid-template: repeat(3, ${size}rem) / repeat(8, ${precisionRound(size / 2)}rem);
        grid-template-areas: 
        "empty1 empty2 keyw keyw empty3 empty4 empty5 empty6" 
        "keya keya keys keys keyd keyd aux1 aux1"
        "shift shift shift space space space aux2 aux2";
        position: absolute;
        column-gap: ${precisionRound(size / 10)}rem;
        row-gap: ${precisionRound(size / 5)}rem;
        bottom: 2rem;
        left: 28rem;
    }
    .key {
        background: #262626;
        color: white;
        font-family: monospace;
        font-size: ${precisionRound((size / 2) * 1.5)}rem;
        font-weight: bold;
        border: 2px solid black;
        border-radius: 5px;

        display: flex;
        align-items: center;
        justify-content: center;
        min-width: ${size}rem;
        min-height: ${size}rem;
    }
    .key-sft, .key-space {
        font-size: ${precisionRound((size / 2))}rem;
    }
    .key-w { grid-area: keyw; }
    .key-a { grid-area: keya; }
    .key-s { grid-area: keys; }
    .key-d { grid-area: keyd; }
    .key-sft { grid-area: shift; }
    .key-space { grid-area: space; }
    .key-aux1 { grid-area: aux1; }
    .key-aux2 { grid-area: aux2; }

    .active {
        background: #868686;
        color: #232323;
    }
`

const injectSettingsCss = (css, classId = "keystrokes-css") => {
    let s = document.createElement("style");
    //s.setAttribute("class", classId);
    s.setAttribute("id", classId);
    s.innerHTML = css;
    document.head.appendChild(s);
}

injectSettingsCss(css)
const hold = document.createElement("div")
hold.classList.add("keystrokes-hold")
hold.innerHTML = keysHTML
document.getElementById("inGameUI").appendChild(hold)

//if you use some other keybinds change the keycodes for it here. to get keycodes go to: https://keycode.info
const keys = [
    { keyCode: 87, elem: document.querySelector(".keystrokes-hold .key.key-w") },
    { keyCode: 65, elem: document.querySelector(".keystrokes-hold .key.key-a") },
    { keyCode: 83, elem: document.querySelector(".keystrokes-hold .key.key-s") },
    { keyCode: 68, elem: document.querySelector(".keystrokes-hold .key.key-d") },
    { keyCode: 16, elem: document.querySelector(".keystrokes-hold .key.key-sft") },
    { keyCode: 32, elem: document.querySelector(".keystrokes-hold .key.key-space") },
    { keyCode: auxKey1.charCodeAt(0), elem: document.querySelector(".keystrokes-hold .key.key-aux1") },
    { keyCode: auxKey2.charCodeAt(0), elem: document.querySelector(".keystrokes-hold .key.key-aux2") }
]

function handleKeyDown(event) {
    for (let i = 0; i < keys.length; i++) {
        const key = keys[i];
        if (event.keyCode === key.keyCode /*&& !key.elem.classList.contains("active")*/) {
            key.elem.classList.add("active")
        }
    }
}

function handleKeyUp(event) {
    for (let i = 0; i < keys.length; i++) {
        const key = keys[i];
        if (event.keyCode === key.keyCode /*&& key.elem.classList.contains("active")*/) {
            key.elem.classList.remove("active")
        }
    }
}

document.addEventListener("keydown", handleKeyDown)
document.addEventListener("keyup", handleKeyUp)

this.unload = () => {
    document.removeEventListener("keydown", handleKeyDown)
    document.removeEventListener("keyup", handleKeyUp)
    document.querySelector(".keystrokes-hold").textContent = ""
    document.querySelector(".keystrokes-hold").remove()
}

return this

keystrokes userscript by KraXen72.
made for the Crankshaft krunker client.
You are free to modify it for your own purposes (unpublished)
if you are going to publish your modification, add a link to this gist and credit KraXen72.

revision 1.1 adds userscript metadata

revision 1.2 adds unload function

Neat. Though maybe change @src to @downloadURL to comply with metadata block standards. Will also allow for auto-updating (if you use the gh raw link)