Javascript is fun and very intuitive

cmss13-devs · Apr 2, 2024 · 7f1982b · 7f1982b
1 parent 8d8e164
commit 7f1982b
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 12 deletions.
diff --git a/code/modules/client/tgui_macro.dm b/code/modules/client/tgui_macro.dm
@@ -23,11 +23,12 @@ GLOBAL_LIST_EMPTY(ui_data_keybindings)
 
 /datum/tgui_macro/ui_data(mob/user)
 	. = list()
-	.["keybinds"] = prefs.key_bindings
+	.["player_keybinds"] = prefs.key_bindings
 
 /datum/tgui_macro/ui_static_data(mob/user)
 	. = list()
 	.["glob_keybinds"] = GLOB.ui_data_keybindings
+	.["byond_keymap"] = GLOB._kbMap
 
 /datum/tgui_macro/ui_state(mob/user)
 	return GLOB.always_state

diff --git a/tgui/packages/tgui/interfaces/KeyBinds.jsx b/tgui/packages/tgui/interfaces/KeyBinds.jsx
@@ -18,7 +18,7 @@ const getAllKeybinds = (glob_keybinds) => {
 
 export const KeyBinds = (props) => {
   const { act, data } = useBackend();
-  const { glob_keybinds } = data;
+  const { player_keybinds, glob_keybinds, byond_keymap } = data;
 
   const [selectedTab, setSelectedTab] = useLocalState('progress', 'ALL');
 
@@ -52,13 +52,36 @@ export const KeyBinds = (props) => {
               }>
               <Flex direction="column">
                 <Flex.Item>
-                  <Box height="5px" />
-                  <Input
-                    value={searchTerm}
-                    onInput={(_, value) => setSearchTerm(value)}
-                    placeholder="Search..."
-                    fluid
-                  />
+                  <Flex align="baseline" mt="5px">
+                    <Flex.Item grow>
+                      <Input
+                        value={searchTerm}
+                        onInput={(_, value) => setSearchTerm(value)}
+                        placeholder="Search..."
+                        fluid
+                      />
+                    </Flex.Item>
+                    <Flex.Item>
+                      <ButtonKeybind
+                        icon="keyboard"
+                        onFinish={(keysDown) => {
+                          // The key(s) pressed by the user, byond-ified.
+                          const targetKey = keysDown
+                            .map((k) => byond_keymap[k] || k)
+                            .join('+');
+                          // targetKey's entry in player_keybinds.
+                          const targetEntry = player_keybinds[targetKey];
+                          if (!targetEntry) {
+                            return;
+                          }
+                          // If a keybind was found, scroll to the first match.
+                          document
+                            .getElementById(targetEntry[0])
+                            .scrollIntoView();
+                        }}
+                      />
+                    </Flex.Item>
+                  </Flex>
                 </Flex.Item>
                 <Flex.Item>
                   <Box height="5px" />
@@ -129,11 +152,11 @@ const KeybindsDropdown = (props) => {
 export const KeybindElement = (props) => {
   const { act, data } = useBackend();
   const { keybind } = props;
-  const { keybinds } = data;
+  const { player_keybinds } = data;
 
   const currentBoundKeys = [];
 
-  for (const [key, value] of Object.entries(keybinds)) {
+  for (const [key, value] of Object.entries(player_keybinds)) {
     for (let i = 0; i < value.length; i++) {
       if (value[i] === keybind.name) {
         currentBoundKeys.push(key);
@@ -143,7 +166,7 @@ export const KeybindElement = (props) => {
   }
 
   return (
-    <Flex mt={1}>
+    <Flex id={keybind.name} mt={1}>
       <Flex.Item basis="30%">
         <Box fontSize="115%" color="label" textAlign="center">
           {keybind.full_name}