diff --git a/code/modules/admin/modify_robot.dm b/code/modules/admin/modify_robot.dm index 9afef619cf..2cd6dc80e2 100644 --- a/code/modules/admin/modify_robot.dm +++ b/code/modules/admin/modify_robot.dm @@ -51,7 +51,7 @@ .["target"]["back"] = icon2base64(get_flat_icon(target,dir=NORTH,no_anim=TRUE)) var/list/target_items = list() for(var/obj/item in target.module.modules) - target_items += list(list("item" = item.name, "ref" = "\ref[item]", "icon" = icon2html(item, user, sourceonly=TRUE))) + target_items += list(list("item" = item.name, "ref" = "\ref[item]", "icon" = icon2html(item, user, sourceonly=TRUE), "desc" = item.desc)) .["target"]["modules"] = target_items var/list/module_options = list() for(var/module in robot_modules) @@ -70,7 +70,7 @@ break if(exists) continue - source_items += list(list("item" = item.name, "ref" = "\ref[item]", "icon" = icon2html(item, user, sourceonly=TRUE))) + source_items += list(list("item" = item.name, "ref" = "\ref[item]", "icon" = icon2html(item, user, sourceonly=TRUE), "desc" = item.desc)) .["source"]["modules"] = source_items var/list/all_robots = list() for(var/mob/living/silicon/robot/R in silicon_mob_list) diff --git a/tgui/packages/tgui/interfaces/ModifyRobot/ModifyRobotTabs/ModifyRobotModules.tsx b/tgui/packages/tgui/interfaces/ModifyRobot/ModifyRobotTabs/ModifyRobotModules.tsx index 1fd665ae9b..72f7dceb1f 100644 --- a/tgui/packages/tgui/interfaces/ModifyRobot/ModifyRobotTabs/ModifyRobotModules.tsx +++ b/tgui/packages/tgui/interfaces/ModifyRobot/ModifyRobotTabs/ModifyRobotModules.tsx @@ -1,3 +1,7 @@ +import { filter } from 'common/collections'; +import { flow } from 'common/fp'; +import { createSearch } from 'common/string'; +import { useState } from 'react'; import { useBackend } from 'tgui/backend'; import { Box, @@ -7,11 +11,12 @@ import { Flex, Icon, Image, + Input, Section, Stack, } from 'tgui/components'; -import { Source, Target } from '../types'; +import { Module, Source, Target } from '../types'; export const ModifyRobotModules = (props: { target: Target; @@ -20,6 +25,8 @@ export const ModifyRobotModules = (props: { }) => { const { target, source, model_options } = props; const { act } = useBackend(); + const [searchSourceText, setSearchSourceText] = useState(''); + const [searchModuleText, setSearchModulText] = useState(''); return ( @@ -49,36 +56,46 @@ export const ModifyRobotModules = (props: { }} /> + setSearchSourceText(value)} + /> + - {source.modules.map((modul_option, i) => { - return ( - - ); - })} + {prepareSearch(source.modules, searchSourceText).map( + (modul_option, i) => { + return ( + + ); + }, + )} @@ -95,6 +112,7 @@ export const ModifyRobotModules = (props: { confirmColor="red" confirmIcon="triangle-exclamation" onClick={() => act('reset_module')} + tooltip="Allows to reset the module back to default." > Reset Module @@ -109,32 +127,42 @@ export const ModifyRobotModules = (props: { }} /> + setSearchModulText(value)} + /> + - {target.modules.map((modul_option, i) => { - return ( - - ); - })} + {prepareSearch(target.modules, searchModuleText).map( + (modul_option, i) => { + return ( + + ); + }, + )} @@ -142,3 +170,20 @@ export const ModifyRobotModules = (props: { ); }; + +const prepareSearch = ( + modules: Module[], + searchText: string = '', +): Module[] => { + const testSearch = createSearch(searchText, (module: Module) => module.item); + return flow([ + (modules: Module[]) => { + // Optional search term + if (!searchText) { + return modules; + } else { + return filter(modules, testSearch); + } + }, + ])(modules); +}; diff --git a/tgui/packages/tgui/interfaces/ModifyRobot/types.ts b/tgui/packages/tgui/interfaces/ModifyRobot/types.ts index a90b58e29d..b0e6bf2a46 100644 --- a/tgui/packages/tgui/interfaces/ModifyRobot/types.ts +++ b/tgui/packages/tgui/interfaces/ModifyRobot/types.ts @@ -31,4 +31,4 @@ export type Source = { modules: Module[]; } | null; -export type Module = { item: string; ref: string; icon: string }; +export type Module = { item: string; ref: string; icon: string; desc: string };