index.html

<script>
    const streamlitDoc = window.parent.document;

    const buttons = Array.from(streamlitDoc.querySelectorAll('.stButton > button'));
    //console.log(buttons) // find buttons in console tab

    const left_button = buttons.find(el => el.innerText === 'Left');
    const right_button = buttons.find(el => el.innerText === 'Right');
    const forward_button = buttons.find(el => el.innerText === 'Forward');
    const pickup_button = buttons.find(el => el.innerText === 'Pickup');
    const drop_button = buttons.find(el => el.innerText === 'Drop');
    const toggle_button = buttons.find(el => el.innerText === 'Toggle');
    const done_button = buttons.find(el => el.innerText === 'Done');


    // set all button display to none
    left_button.style.display = "none"
    right_button.style.display = "none"
    forward_button.style.display = "none"
    pickup_button.style.display = "none"
    drop_button.style.display = "none"
    toggle_button.style.display = "none"
    done_button.style.display = "none"

    streamlitDoc.addEventListener('keydown', function(e) {
        switch (e.key) {
            case 'ArrowLeft':
                left_button.click();
                break;
            case 'ArrowRight':
                right_button.click();
                break;
            case 'ArrowUp':
                forward_button.click();
                break;
            case 'p':
                pickup_button.click();
                console.log("pickup")
                break;
            case 'd':
                drop_button.click();
                console.log("drop")
                break;
            case 't':
                toggle_button.click();
                console.log("toggle")
                break;
            // shift + d
            case 'D':
                done_button.click();
                console.log("done")
                break;
        }
    });

    streamlitDoc.addEventListener("keydown", function(e) {
    if(["Space","ArrowUp","ArrowDown","ArrowLeft","ArrowRight"].indexOf(e.code) > -1) {
            e.preventDefault();
        }
    }, false);

    // console.log(right_button)
</script>

<!-- let's rewrite the above script to work with buttons "left", "right", "forward", "pickup", "drop", "toggle", "done" -->

<!-- Path: index.html -->