the-obelisk/app/Controls/Modules/KeyHandler/KeySetter.ts

module Controls.KeyHandler.KeySetter {
    let resolver;
    let div = document.createElement("div");

    function printTable() {
        let p = document.createElement("p");
        p.classList.add("content");
        p.appendChild(document.createTextNode("Each row usually has a purpose, though any row will do if there are not enough keys in the ideal row."));
        Elements.CurrentTurnHandler.print(p);

        p = document.createElement("p");
        p.classList.add("content");
        p.appendChild(document.createTextNode("Row 1 is preferred for Choices and Room Objects. Row 2 is used for commands relating to the selected thing (Take, Wear). Row 3 is used for commands that you do without targets (Get Up, Wait, Save game)."));
        Elements.CurrentTurnHandler.print(p);

        p = document.createElement("p");
        p.classList.add("content");
        p.appendChild(document.createTextNode("Select the row you wish to edit and press keys to add them to the list. You can press Backspace to clear it."));
        Elements.CurrentTurnHandler.print(p);



        for (let i = 1; i <= Controls.KeyHandler.keyRows; i++) {
            let p = document.createElement("p");
            p.classList.add("content");
            p.appendChild(document.createTextNode("Row " + i + ": "));

            let input = document.createElement("input");
            input.classList.add("keySelectorInput");
            p.appendChild(input);

            let updateInput = () => {
                let keys = <Array<KeyCode>> Controls.KeyHandler["keyCodes" + i].getValue();
                let values = [];
                keys.forEach(key => {
                    values.push(key.representation)
                });
                input.value = values.join("; ");
            };

            updateInput();

            let inputF = (ev : KeyboardEvent) => {
                Controls.KeyHandler.addKey(i, ev);
                updateInput();
                ev.stopPropagation();
                ev.preventDefault();
            };

            input.addEventListener("keydown", inputF);
            input.addEventListener("keyup", (ev) => {ev.stopPropagation();});
            Elements.CurrentTurnHandler.print(p);
        }
    }

    function printConfirm () {
        (new Say("Confirm")).getHTML("p", ["choice"]).then(elementArray => {
            elementArray[0].addEventListener("click", () => {
                resolver();
            });
            Controls.KeyHandler.applyCode(elementArray[0], Controls.KeyHandler.getSecondKeyCode());
            Elements.CurrentTurnHandler.print(elementArray[0]);
        });
    }

    function reset () {
        Elements.CurrentTurnHandler.clear();
        Elements.CurrentTurnHandler.print(div);
        printTable();
        Elements.CurrentTurnHandler.print(document.createElement("br"));
        Elements.CurrentTurnHandler.print(document.createElement("br"));
        printConfirm();
    }

    export async function setKeys () {
        Elements.startMenu();

        let promise = new Promise(resolve => {
            resolver = resolve;
        });

        reset();

        await promise;

        Elements.endMenu();
    }
}