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

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)