updates tgui list input (#243)

Improves the menu for dressing up and the like.

code/modules/tgui/tgui_input_list.dm

@@ -1,78 +1,40 @@
-/* Copyright 2020 bobbahbrown (https://github.com/bobbahbrown), watermelon914 (https://github.com/watermelon914)
- *
- * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
- * and associated documentation files (the "Software"), to deal in the Software without restriction,
- * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
- * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
- * subject to the following conditions:
- *
- * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
- * EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
- * IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
- * WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
- * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
- */
-
 /**
  * Creates a TGUI input list window and returns the user's response.
  *
  * This proc should be used to create alerts that the caller will wait for a response from.
  * Arguments:
- * * user - The user to show the alert to.
- * * message - The content of the alert, shown in the body of the TGUI window.
- * * title - The title of the list input, shown on the top of the TGUI window.
- * * buttons - The options that can be chosen by the user, each string is assigned a button on the UI.
- * * timeout - The timeout of the alert, after which the list input will close and qdel itself. Set to zero for no timeout.
- * * theme - The ui theme to use for the TGUI window.
+ * * user - The user to show the input box to.
+ * * message - The content of the input box, shown in the body of the TGUI window.
+ * * title - The title of the input box, shown on the top of the TGUI window.
+ * * items - The options that can be chosen by the user, each string is assigned a button on the UI.
+ * * default - If an option is already preselected on the UI. Current values, etc.
+ * * timeout - The timeout of the input box, after which the menu will close and qdel itself. Set to zero for no timeout.
  */
-/proc/tgui_input_list(mob/user, message, title, list/buttons, timeout = 0, theme = null)
+/proc/tgui_input_list(mob/user, message, title = "Select", list/items, timeout = 0, theme = null, ui_state = GLOB.always_state)
 	if (!user)
 		user = usr
-	if(!length(buttons))
-		return
+	if(!length(items))
+		return null
 	if (!istype(user))
 		if (istype(user, /client))
 			var/client/client = user
 			user = client.mob
 		else
-			return
-	var/datum/tgui_list_input/input = new(user, message, title, buttons, timeout, theme)
+			return null
+
+	if(isnull(user.client))
+		return null
+
+	var/datum/tgui_list_input/input = new(user, message, title, items, timeout, theme, ui_state)
+	if(input.invalid)
+		qdel(input)
+		return
 	input.tgui_interact(user)
 	input.wait()
 	if (input)
 		. = input.choice
 		qdel(input)
 
-/**
- * Creates an asynchronous TGUI input list window with an associated callback.
- *
- * This proc should be used to create inputs that invoke a callback with the user's chosen option.
- * Arguments:
- * * user - The user to show the alert to.
- * * message - The content of the alert, shown in the body of the TGUI window.
- * * title - The of the alert modal, shown on the top of the TGUI window.
- * * buttons - The options that can be chosen by the user, each string is assigned a button on the UI.
- * * callback - The callback to be invoked when a choice is made.
- * * timeout - The timeout of the alert, after which the modal will close and qdel itself. Set to zero for no timeout.
- * * theme - The ui theme to use for the TGUI window.
- */
-/proc/tgui_input_list_async(mob/user, message, title, list/buttons, datum/callback/callback, timeout = 60 SECONDS, theme = null)
-	if (!user)
-		user = usr
-	if(!length(buttons))
-		return
-	if (!istype(user))
-		if (istype(user, /client))
-			var/client/client = user
-			user = client.mob
-		else
-			return
-	var/datum/tgui_list_input/async/input = new(user, message, title, buttons, callback, timeout, theme)
-	input.tgui_interact(user)
-
 /**
  * # tgui_list_input
  *
@@ -84,124 +46,112 @@
 	var/title
 	/// The textual body of the TGUI window
 	var/message
-	/// The list of buttons (responses) provided on the TGUI window. These will automatically all be strings
-	var/list/buttons
+	/// The list of items (responses) provided on the TGUI window
+	var/list/items
 	/// Buttons (strings specifically) mapped to the actual value (e.g. a mob or a verb)
-	var/list/buttons_map
+	var/list/items_map
 	/// The button that the user has pressed, null if no selection has been made
 	var/choice
-	/// The time at which the tgui_modal was created, for displaying timeout progress.
+	/// The default button to be selected
+	var/default
+	/// The time at which the tgui_list_input was created, for displaying timeout progress.
 	var/start_time
-	/// The lifespan of the tgui_modal, after which the window will close and delete itself.
+	/// The lifespan of the tgui_list_input, after which the window will close and delete itself.
 	var/timeout
-	/// Boolean field describing if the tgui_modal was closed by the user.
+	/// Boolean field describing if the tgui_list_input was closed by the user.
 	var/closed
-	/// String field for the theme to use
-	var/ui_theme
-
-/datum/tgui_list_input/New(mob/user, message, title, list/buttons, timeout, theme = null)
+	/// The TGUI UI state that will be returned in ui_state(). Default: always_state
+	var/datum/ui_state/state
+	/// Whether the tgui list input is invalid or not (i.e. due to all list entries being null)
+	var/invalid = FALSE
+	/// The theme that this UI should display
+	var/theme
+
+/datum/tgui_list_input/New(mob/user, message, title, list/items, timeout, theme, ui_state)
 	src.title = title
 	src.message = message
-	src.buttons = list()
-	src.buttons_map = list()
-	src.ui_theme = theme
-
+	src.items = list()
+	src.items_map = list()
+	src.default = default
+	src.state = ui_state
+	src.theme = theme
+	var/list/repeat_items = list()
 	// Gets rid of illegal characters
 	var/static/regex/whitelistedWords = regex(@{"([^\u0020-\u8000]+)"})
-
-	for(var/i in buttons)
+	for(var/i in items)
+		if(!i)
+			continue
 		var/string_key = whitelistedWords.Replace("[i]", "")
+		//avoids duplicated keys E.g: when areas have the same name
+		string_key = avoid_assoc_duplicate_keys(string_key, repeat_items)
+		src.items += string_key
+		src.items_map[string_key] = i
 
-		src.buttons += string_key
-		src.buttons_map[string_key] = i
-
+	if(length(src.items) == 0)
+		invalid = TRUE
 	if (timeout)
 		src.timeout = timeout
 		start_time = world.time
 		QDEL_IN(src, timeout)
 
-/datum/tgui_list_input/Destroy(force, ...)
+/datum/tgui_list_input/Destroy(force)
 	SStgui.close_uis(src)
-	buttons = null
-	. = ..()
+	state = null
+	QDEL_NULL(items)
+	return ..()
 
 /**
  * Waits for a user's response to the tgui_list_input's prompt before returning. Returns early if
  * the window was closed by the user.
  */
 /datum/tgui_list_input/proc/wait()
 	while (!choice && !closed)
-		stoplag(0.2 SECONDS)
+		stoplag(1)
 
 /datum/tgui_list_input/tgui_interact(mob/user, datum/tgui/ui)
 	ui = SStgui.try_update_ui(user, src, ui)
 	if(!ui)
-		ui = new(user, src, "ListInput")
+		ui = new(user, src, "ListInputModal")
 		ui.open()
 
 /datum/tgui_list_input/ui_close(mob/user)
 	. = ..()
 	closed = TRUE
 
 /datum/tgui_list_input/ui_state(mob/user)
-	return GLOB.always_state
+	return state
 
 /datum/tgui_list_input/ui_static_data(mob/user)
-	. = list(
-		"title" = title,
-		"message" = message,
-		"buttons" = buttons,
-		"theme" = ui_theme
-	)
+	var/list/data = list()
+	data["init_value"] = default || items[1]
+	data["items"] = items
+	data["message"] = message
+	data["title"] = title
+	data["theme"] = theme
+	return data
 
 /datum/tgui_list_input/ui_data(mob/user)
-	. = list()
+	var/list/data = list()
 	if(timeout)
-		.["timeout"] = clamp((timeout - (world.time - start_time) - 1 SECONDS) / (timeout - 1 SECONDS), 0, 1)
+		data["timeout"] = clamp((timeout - (world.time - start_time) - 1 SECONDS) / (timeout - 1 SECONDS), 0, 1)
+	return data
 
 /datum/tgui_list_input/ui_act(action, list/params)
 	. = ..()
 	if (.)
 		return
 	switch(action)
-		if("choose")
-			if (!(params["choice"] in buttons))
+		if("submit")
+			if (!(params["entry"] in items))
 				return
-			choice = buttons_map[params["choice"]]
+			set_choice(items_map[params["entry"]])
+			closed = TRUE
 			SStgui.close_uis(src)
 			return TRUE
 		if("cancel")
-			SStgui.close_uis(src)
 			closed = TRUE
+			SStgui.close_uis(src)
 			return TRUE
 
-/**
- * # async tgui_list_input
- *
- * An asynchronous version of tgui_list_input to be used with callbacks instead of waiting on user responses.
- */
-/datum/tgui_list_input/async
-	/// The callback to be invoked by the tgui_modal upon having a choice made.
-	var/datum/callback/callback
-
-/datum/tgui_list_input/async/New(mob/user, message, title, list/buttons, callback, timeout, theme = null)
-	..(user, title, message, buttons, timeout, theme)
-	src.callback = callback
-
-/datum/tgui_list_input/async/Destroy(force, ...)
-	QDEL_NULL(callback)
-	. = ..()
-
-/datum/tgui_list_input/async/ui_close(mob/user)
-	. = ..()
-	qdel(src)
-
-/datum/tgui_list_input/async/ui_act(action, list/params)
-	. = ..()
-	if (!. || choice == null)
-		return
-	callback.InvokeAsync(choice)
-	qdel(src)
-
-/datum/tgui_list_input/async/wait()
-	return
+/datum/tgui_list_input/proc/set_choice(choice)
+	src.choice = choice

tgui/packages/tgui/interfaces/ListInputModal.tsx

@@ -8,22 +8,15 @@ import { Window } from '../layouts';
 type ListInputData = {
   init_value: string;
   items: string[];
-  large_buttons: boolean;
   message: string;
   timeout: number;
   title: string;
+  theme: string;
 };
 
 export const ListInputModal = (props, context) => {
   const { act, data } = useBackend<ListInputData>(context);
-  const {
-    items = [],
-    message = '',
-    init_value,
-    large_buttons,
-    timeout,
-    title,
-  } = data;
+  const { items = [], message = '', init_value, timeout, title, theme } = data;
   const [selected, setSelected] = useLocalState<number>(
     context,
     'selected',
@@ -103,15 +96,14 @@ export const ListInputModal = (props, context) => {
     item?.toLowerCase().includes(searchQuery.toLowerCase())
   );
   // Dynamically changes the window height based on the message.
-  const windowHeight =
-    325 + Math.ceil(message.length / 3) + (large_buttons ? 5 : 0);
+  const windowHeight = 325 + Math.ceil(message.length / 3);
   // Grabs the cursor when no search bar is visible.
   if (!searchBarVisible) {
     setTimeout(() => document!.getElementById(selected.toString())?.focus(), 1);
   }
 
   return (
-    <Window title={title} width={325} height={windowHeight}>
+    <Window title={title} width={325} height={windowHeight} theme={theme}>
       {timeout && <Loader value={timeout} />}
       <Window.Content
         onKeyDown={(event) => {