Human: There's still work todo:
- make key-bind editor actually not just appear the way it does
- actually call the actions for the key-bind
- pass in available actions to keybind editor from the game proper
instead of having them hard-coded in that 'class'
>>> Prompt 1:
Given a game written in JavaScript.
I need a key-binding editor where I can view and set my keybindings. Make it so that I
can press a key-combo in an input box to set it rather than having to type in the key-combo.
Make sure:
- the key-combination is valid when using client events
- generate the HTML for the binds (e.g. name of the action and input field for setting the key for it)
- place the generated HTML in the element with ID "keybinding-editor"
- that when I press e.g. "shift+3" it does not generate a key-shortcut that says "shift+#", it should say "shift+3"
- it's not possible to assign more than one action to the same key (any other actions using that key should become unassigned)
- the key-combination is a plain key (a-z, 0-9) or a key in combination with shift/ctrl/cmd/alt
- to add buttons for reverting to default and save
- you cannot assign only a modifier key as a keybind
- to bind event-listeners only to the input field, not the entire window
- that it says "space" instead of " " for the spacebar key
The following keybinds are there by default (ID of the action to perform : key-combination(s)):
select-next-creature : tab
select-previous-creature : shift+tab
deselect-creature : space
restart-level : escape
toggle-pause : p
apply-climber : 1
apply-floater : 2
Load and save the bindings using local storage.
This time give me only the javascript code, I don't need any explanation.
>>> Prompt 2:
Give me a function to convert strings like "select-previous-creature"
to "Select Previous Creature". I don't need an explanation.
>>> Prompt 3:
Using client-side javascript and given this structure:
const defaultKeybinds = {
"select-next-creature": "tab",
"select-previous-creature": "shift+tab",
"deselect-creature": "space",
"restart-level": "escape",
"toggle-pause": "alt+p",
"apply-climber": "ctrl+1",
"apply-floater": "cmd+2",
'apply-bomber': "3",
'apply-blocker': "4",
'apply-builder': "5",
'apply-basher': "6",
'apply-miner': "7",
'apply-digger': "8"
};
This structure is pairs of { action : key-combination, ... }.
Give me a function that will listen to key-event and when a matching key combination is pressed,
execute the appropriate function, that is, an action named 'select-next-creature' would have a
function called selectNextCreature.
Note that "shift+tab" is not an actual valid key in an event. You would need to check
for the modifier shift and the actual key for tab.
The structure is dynamic, generate the name of the function we need to call dynamically.
You do not need to give me the functions for the actions, they already exist.
I don't need an explanation of the code this time.