[TGUI] KeyCombo Input (#25875)

* Fix keybind combinations for actions

* better way

* I am stupid

* Rebuild TGUI

* Rebuild TGUI

* Prettier

* Rebuild TGUI

* Need to finally re-create fork...

* Review change

code/_onclick/hud/action_button.dm

@@ -169,7 +169,7 @@
 	.["bg_state_active"] = "template_active"
 
 /atom/movable/screen/movable/action_button/proc/set_to_keybind(mob/user)
-	var/keybind_to_set_to = uppertext(input(user, "What keybind do you want to set this action button to?") as text)
+	var/keybind_to_set_to = tgui_input_keycombo(user, "What keybind do you want to set this action button to?")
 	if(keybind_to_set_to)
 		if(linked_keybind)
 			clean_up_keybinds(user)

code/modules/tgui/tgui_input/keycombo_input.dm

@@ -0,0 +1,135 @@
+/**
+ * Creates a TGUI window with a key input. Returns the user's response as a full key with modifiers, eg ShiftK.
+ *
+ * This proc should be used to create windows for key entry that the caller will wait for a response from.
+ * If tgui fancy chat is turned off: Will return a normal input.
+ *
+ * Arguments:
+ * * user - The user to show the number input to.
+ * * message - The content of the number input, shown in the body of the TGUI window.
+ * * title - The title of the number input modal, shown on the top of the TGUI window.
+ * * default - The default (or current) key, shown as a placeholder.
+ */
+/proc/tgui_input_keycombo(mob/user = usr, message, title = "Key Input", default = 0, timeout = 0, ui_state = GLOB.always_state)
+	if(!user)
+		user = usr
+
+	if(!istype(user))
+		if(!isclient(user))
+			return
+		var/client/client = user
+		user = client.mob
+
+	if(isnull(user.client))
+		return
+
+	// Client does NOT have tgui_input on: Returns regular input
+	if(user.client?.prefs?.toggles2 & PREFTOGGLE_2_DISABLE_TGUI_INPUT)
+		var/input_key = uppertext(input(user, message, title + " (Modifiers are TGUI only, sorry!)", default) as null|text)
+		return input_key[1]
+
+	var/datum/tgui_input_keycombo/key_input = new(user, message, title, default, timeout, ui_state)
+	key_input.ui_interact(user)
+	key_input.wait()
+
+	if(!key_input)
+		return
+	. = key_input.entry
+	qdel(key_input)
+
+/**
+ * # tgui_input_keycombo
+ *
+ * Datum used for instantiating and using a TGUI-controlled key input that prompts the user with
+ * a message and listens for key presses.
+ */
+/datum/tgui_input_keycombo
+	/// Boolean field describing if the tgui_input_number was closed by the user.
+	var/closed
+	/// The default (or current) value, shown as a default. Users can press reset with this.
+	var/default
+	/// The entry that the user has return_typed in.
+	var/entry
+	/// The prompt's body, if any, of the TGUI window.
+	var/message
+	/// The time at which the number input was created, for displaying timeout progress.
+	var/start_time
+	/// The lifespan of the number input, after which the window will close and delete itself.
+	var/timeout
+	/// The attached timer that handles this objects timeout deletion
+	var/deletion_timer
+	/// The title of the TGUI window
+	var/title
+	/// The TGUI UI state that will be returned in ui_state(). Default: always_state
+	var/datum/ui_state/state
+
+/datum/tgui_input_keycombo/New(mob/user, message, title, default, timeout, ui_state)
+	src.default = default
+	src.message = message
+	src.title = title
+	src.state = ui_state
+
+	if(timeout)
+		src.timeout = timeout
+		start_time = world.time
+		deletion_timer = QDEL_IN(src, timeout)
+
+/datum/tgui_input_keycombo/Destroy(force)
+	SStgui.close_uis(src)
+	state = null
+	deltimer(deletion_timer)
+	return ..()
+
+/**
+ * Waits for a user's response to the tgui_input_keycombo's prompt before returning. Returns early if
+ * the window was closed by the user.
+ */
+/datum/tgui_input_keycombo/proc/wait()
+	while(!entry && !closed && !QDELETED(src))
+		stoplag(1)
+
+/datum/tgui_input_keycombo/ui_state(mob/user)
+	return state
+
+/datum/tgui_input_keycombo/ui_interact(mob/user, datum/tgui/ui)
+	ui = SStgui.try_update_ui(user, src, ui)
+	if(!ui)
+		ui = new(user, src, "KeyComboModal")
+		ui.open()
+
+/datum/tgui_input_keycombo/ui_close(mob/user)
+	closed = TRUE
+
+/datum/tgui_input_keycombo/ui_static_data(mob/user)
+	var/list/data = list()
+	data["init_value"] = default
+	data["message"] = message
+	data["large_buttons"] = user.client?.prefs?.toggles2 & PREFTOGGLE_2_LARGE_INPUT_BUTTONS
+	data["swapped_buttons"] = user.client?.prefs?.toggles2 & PREFTOGGLE_2_SWAP_INPUT_BUTTONS
+	data["title"] = title
+	return data
+
+/datum/tgui_input_keycombo/ui_data(mob/user)
+	var/list/data = list()
+	if(timeout)
+		data["timeout"] = CLAMP01((timeout - (world.time - start_time) - 1 SECONDS) / (timeout - 1 SECONDS))
+	return data
+
+/datum/tgui_input_keycombo/ui_act(action, list/params)
+	. = ..()
+	if(.)
+		return
+
+	switch(action)
+		if("submit")
+			set_entry(params["entry"])
+			closed = TRUE
+			SStgui.close_uis(src)
+			return TRUE
+		if("cancel")
+			closed = TRUE
+			SStgui.close_uis(src)
+			return TRUE
+
+/datum/tgui_input_keycombo/proc/set_entry(entry)
+	src.entry = entry

paradise.dme

@@ -2886,6 +2886,7 @@
 #include "code\modules\tgui\states\strippable_state.dm"
 #include "code\modules\tgui\states\viewer_state.dm"
 #include "code\modules\tgui\tgui_input\alert_input.dm"
+#include "code\modules\tgui\tgui_input\keycombo_input.dm"
 #include "code\modules\tgui\tgui_input\list_input.dm"
 #include "code\modules\tgui\tgui_input\number_input.dm"
 #include "code\modules\tgui\tgui_input\text_input.dm"

tgui/packages/tgui/interfaces/KeyComboModal.tsx

@@ -0,0 +1,143 @@
+import { KEY } from 'common/keys';
+
+import { useBackend, useLocalState } from '../backend';
+import { Autofocus, Box, Button, Section, Stack } from '../components';
+import { Window } from '../layouts';
+import { InputButtons } from './common/InputButtons';
+import { Loader } from './common/Loader';
+
+type KeyInputData = {
+  init_value: string;
+  large_buttons: boolean;
+  message: string;
+  timeout: number;
+  title: string;
+};
+
+const isStandardKey = (event): boolean => {
+  return event.key !== KEY.Alt && event.key !== KEY.Control && event.key !== KEY.Shift && event.key !== KEY.Escape;
+};
+
+const KEY_CODE_TO_BYOND: Record<string, string> = {
+  DEL: 'Delete',
+  DOWN: 'South',
+  END: 'Southwest',
+  HOME: 'Northwest',
+  INSERT: 'Insert',
+  LEFT: 'West',
+  PAGEDOWN: 'Southeast',
+  PAGEUP: 'Northeast',
+  RIGHT: 'East',
+  SPACEBAR: 'Space',
+  UP: 'North',
+};
+
+const DOM_KEY_LOCATION_NUMPAD = 3;
+
+const formatKeyboardEvent = (event): string => {
+  let text = '';
+
+  if (event.altKey) {
+    text += 'Alt';
+  }
+
+  if (event.ctrlKey) {
+    text += 'Ctrl';
+  }
+
+  if (event.shiftKey && !(event.keyCode >= 48 && event.keyCode <= 57)) {
+    text += 'Shift';
+  }
+
+  if (event.location === DOM_KEY_LOCATION_NUMPAD) {
+    text += 'Numpad';
+  }
+
+  if (isStandardKey(event)) {
+    if (event.shiftKey && event.keyCode >= 48 && event.keyCode <= 57) {
+      const number = event.keyCode - 48;
+      text += 'Shift' + number;
+    } else {
+      const key = event.key.toUpperCase();
+      text += KEY_CODE_TO_BYOND[key] || key;
+    }
+  }
+
+  return text;
+};
+
+export const KeyComboModal = (props, context) => {
+  const { act, data } = useBackend<KeyInputData>(context);
+  const { init_value, large_buttons, message = '', title, timeout } = data;
+  const [input, setInput] = useLocalState(context, 'input', init_value);
+  const [binding, setBinding] = useLocalState(context, 'binding', true);
+
+  const handleKeyPress = (event) => {
+    if (!binding) {
+      if (event.key === KEY.Enter) {
+        act('submit', { entry: input });
+      }
+      if (event.key === KEY.Escape) {
+        act('cancel');
+      }
+      return;
+    }
+
+    event.preventDefault();
+    if (isStandardKey(event)) {
+      setValue(formatKeyboardEvent(event));
+      setBinding(false);
+      return;
+    } else if (event.key === KEY.Escape) {
+      setValue(init_value);
+      setBinding(false);
+      return;
+    }
+  };
+
+  const setValue = (value: string) => {
+    if (value === input) {
+      return;
+    }
+    setInput(value);
+  };
+
+  // Dynamically changes the window height based on the message.
+  const windowHeight =
+    130 + (message.length > 30 ? Math.ceil(message.length / 3) : 0) + (message.length && large_buttons ? 5 : 0);
+
+  return (
+    <Window title={title} width={240} height={windowHeight}>
+      {timeout && <Loader value={timeout} />}
+      <Window.Content
+        onKeyDown={(event) => {
+          handleKeyPress(event);
+        }}
+      >
+        <Section fill>
+          <Autofocus />
+          <Stack fill vertical>
+            <Stack.Item grow>
+              <Box color="label">{message}</Box>
+            </Stack.Item>
+            <Stack.Item>
+              <Button
+                disabled={binding}
+                content={binding && binding !== null ? 'Awaiting input...' : '' + input}
+                width="100%"
+                textAlign="center"
+                onClick={() => {
+                  setValue(init_value);
+                  setBinding(true);
+                }}
+              />
+            </Stack.Item>
+            <Stack.Item>
+              <InputButtons input={input} />
+            </Stack.Item>
+          </Stack>
+        </Section>
+      </Window.Content>
+    </Window>
+  );
+};