diff --git a/code/modules/tgui_input/keycombo.dm b/code/modules/tgui_input/keycombo.dm new file mode 100644 index 0000000000..fd9bb155b3 --- /dev/null +++ b/code/modules/tgui_input/keycombo.dm @@ -0,0 +1,126 @@ +/** + * 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.tgui_always_state) + if (!istype(user)) + if (istype(user, /client)) + var/client/client = user + user = client.mob + else + return null + + if (isnull(user.client)) + return null + + // Client does NOT have tgui_input on: Returns regular input + if(!user.read_preference(/datum/preference/toggle/tgui_input_mode)) + var/input_key = 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.tgui_interact(user) + key_input.wait() + if (key_input) + . = 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 title of the TGUI window + var/title + /// The TGUI UI state that will be returned in ui_state(). Default: always_state + var/datum/tgui_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 + QDEL_IN(src, timeout) + +/datum/tgui_input_keycombo/Destroy(force) + SStgui.close_uis(src) + state = null + 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/tgui_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/tgui_close(mob/user) + . = ..() + closed = TRUE + +/datum/tgui_input_keycombo/tgui_state(mob/user) + return state + +/datum/tgui_input_keycombo/tgui_static_data(mob/user) + var/list/data = list() + data["init_value"] = default // Default is a reserved keyword + data["large_buttons"] = !user.client?.prefs || user.client.prefs.read_preference(/datum/preference/toggle/tgui_large_buttons) + data["message"] = message + data["swapped_buttons"] = !user.client?.prefs || user.client.prefs.read_preference(/datum/preference/toggle/tgui_swapped_buttons) + data["title"] = title + return data + +/datum/tgui_input_keycombo/tgui_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/tgui_act(action, list/params, datum/tgui/ui, datum/tgui_state/state) + . = ..() + 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 diff --git a/tgui/packages/tgui/interfaces/KeyComboModal.tsx b/tgui/packages/tgui/interfaces/KeyComboModal.tsx new file mode 100644 index 0000000000..e6b400cfe9 --- /dev/null +++ b/tgui/packages/tgui/interfaces/KeyComboModal.tsx @@ -0,0 +1,155 @@ +import { useEffect, useRef, useState } from 'react'; +import { useBackend } from 'tgui/backend'; +import { Window } from 'tgui/layouts'; +import { Box, Button, Section, Stack } from 'tgui-core/components'; +import { isEscape, KEY } from 'tgui-core/keys'; +import type { BooleanLike } from 'tgui-core/react'; +import { InputButtons } from './common/InputButtons'; +import { Loader } from './common/Loader'; + +type KeyInputData = { + init_value: string; + large_buttons: BooleanLike; + message: string; + timeout: number; + title: string; +}; + +function isStandardKey(event: React.KeyboardEvent): boolean { + return ( + event.key !== KEY.Alt && + event.key !== KEY.Control && + event.key !== KEY.Shift && + !isEscape(event.key) + ); +} + +const KEY_CODE_TO_BYOND: Record = { + DEL: 'Delete', + DOWN: 'South', + END: 'Southwest', + HOME: 'Northwest', + INSERT: 'Insert', + LEFT: 'West', + PAGEDOWN: 'Southeast', + PAGEUP: 'Northeast', + RIGHT: 'East', + ' ': 'Space', + UP: 'North', +}; + +const DOM_KEY_LOCATION_NUMPAD = 3; + +function formatKeyboardEvent( + event: React.KeyboardEvent, +): string { + let text = ''; + + if (event.altKey) { + text += 'Alt'; + } + + if (event.ctrlKey) { + text += 'Ctrl'; + } + + if (event.shiftKey) { + text += 'Shift'; + } + + if (event.location === DOM_KEY_LOCATION_NUMPAD) { + text += 'Numpad'; + } + + if (isStandardKey(event)) { + const key = event.key.toUpperCase(); + text += KEY_CODE_TO_BYOND[key] || key; + } + + return text; +} + +export function KeyComboModal(props) { + const { act, data } = useBackend(); + const { init_value, large_buttons, message = '', title, timeout } = data; + const [input, setInput] = useState(init_value); + const [binding, setBinding] = useState(true); + const focusRef = useRef(null); + + useEffect(() => { + if (binding && focusRef.current) { + focusRef.current.focus(); + } + }, [binding]); + + function handleKeyDown(event: React.KeyboardEvent) { + if (!binding) { + if (event.key === KEY.Enter) { + act('submit', { entry: input }); + } + if (isEscape(event.key)) { + act('cancel'); + } + return; + } + + event.preventDefault(); + + if (isStandardKey(event)) { + setValue(formatKeyboardEvent(event)); + setBinding(false); + return; + } + + if (isEscape(event.key)) { + setValue(init_value); + setBinding(false); + return; + } + } + + function 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 ( + + {timeout && } + +
+
+ + + {message} + + + + + + + + +
+ + + ); +} diff --git a/vorestation.dme b/vorestation.dme index 7237ee7356..1cbbbb7675 100644 --- a/vorestation.dme +++ b/vorestation.dme @@ -4768,6 +4768,7 @@ #include "code\modules\tgui_input\alert.dm" #include "code\modules\tgui_input\checkboxes.dm" #include "code\modules\tgui_input\color.dm" +#include "code\modules\tgui_input\keycombo.dm" #include "code\modules\tgui_input\list.dm" #include "code\modules\tgui_input\matrix.dm" #include "code\modules\tgui_input\number.dm"