diff --git a/modular_skyrat/modules/loadouts/loadout_ui/loadout_manager.dm b/modular_skyrat/modules/loadouts/loadout_ui/loadout_manager.dm index 9524a6f5f77..b1edfb7fa3d 100644 --- a/modular_skyrat/modules/loadouts/loadout_ui/loadout_manager.dm +++ b/modular_skyrat/modules/loadouts/loadout_ui/loadout_manager.dm @@ -290,7 +290,7 @@ data["user_is_donator"] = !!(GLOB.donator_list[owner.ckey] || is_admin(owner)) data["mob_name"] = owner.prefs.read_preference(/datum/preference/name/real_name) data["ismoth"] = istype(owner.prefs.read_preference(/datum/preference/choiced/species), /datum/species/moth) // Moth's humanflaticcon isn't the same dimensions for some reason - data["preivew_options"] = list(PREVIEW_PREF_JOB, PREVIEW_PREF_LOADOUT, PREVIEW_PREF_NAKED) + data["preview_options"] = list(PREVIEW_PREF_JOB, PREVIEW_PREF_LOADOUT, PREVIEW_PREF_NAKED) data["preview_selection"] = owner?.prefs.preview_pref return data @@ -362,7 +362,7 @@ formatted_item["name"] = item.name formatted_item["path"] = item.item_path formatted_item["is_greyscale"] = !!(initial(loadout_atom.greyscale_config) && initial(loadout_atom.greyscale_colors) && (initial(loadout_atom.flags_1) & IS_PLAYER_COLORABLE_1)) - formatted_item["is_renamable"] = item.can_be_named + formatted_item["is_renameable"] = item.can_be_named formatted_item["is_job_restricted"] = !isnull(item.restricted_roles) formatted_item["is_job_blacklisted"] = !isnull(item.blacklisted_roles) formatted_item["is_species_restricted"] = !isnull(item.restricted_species) diff --git a/tgui/packages/tgui/interfaces/LoadoutManager.jsx b/tgui/packages/tgui/interfaces/LoadoutManager.tsx similarity index 90% rename from tgui/packages/tgui/interfaces/LoadoutManager.jsx rename to tgui/packages/tgui/interfaces/LoadoutManager.tsx index dfadbd8b662..6f9c13043f7 100644 --- a/tgui/packages/tgui/interfaces/LoadoutManager.jsx +++ b/tgui/packages/tgui/interfaces/LoadoutManager.tsx @@ -1,14 +1,40 @@ // THIS IS A SKYRAT UI FILE import { useBackend, useSharedState } from '../backend'; import { Box, Button, Section, Stack, Dropdown } from '../components'; +import { BooleanLike } from 'common/react'; import { Window } from '../layouts'; +type LoadoutTabData = { + loadout_tabs: LoadoutTab[]; + selected_loadout: string[]; + user_is_donator: BooleanLike; +}; + +type LoadoutTab = { + name: string; + title: string; + contents: LoadoutTabItem[]; +}; + +type LoadoutTabItem = { + name: string; + path: string; + is_greyscale: BooleanLike; + is_renameable: BooleanLike; + is_job_restricted: BooleanLike; + is_job_blacklisted: BooleanLike; + is_species_restricted: BooleanLike; + is_donator_only: BooleanLike; + is_ckey_whitelisted: BooleanLike; + tooltip_text: string; +}; + export const LoadoutManager = (props) => { - const { act, data } = useBackend(); + const { act, data } = useBackend(); const { selected_loadout, loadout_tabs, user_is_donator } = data; const [selectedTabName, setSelectedTab] = useSharedState( - 'tabs', + 'selectedTab', loadout_tabs[0]?.name, ); const selectedTab = loadout_tabs.find((curTab) => { @@ -42,12 +68,8 @@ export const LoadoutManager = (props) => { ({ - value: curTab, - displayText: curTab.name, - }))} - onSelected={(curTab) => setSelectedTab(curTab.name)} + options={loadout_tabs.map((curTab) => curTab.name)} + onSelected={(curTab) => setSelectedTab(curTab)} /> @@ -90,7 +112,7 @@ export const LoadoutManager = (props) => { /> )} - {!!item.is_renamable && ( + {!!item.is_renameable && (