diff --git a/tgui/packages/tgui/interfaces/PaiCard.tsx b/tgui/packages/tgui/interfaces/PaiCard.tsx index a46017eb750..2ddaa648c99 100644 --- a/tgui/packages/tgui/interfaces/PaiCard.tsx +++ b/tgui/packages/tgui/interfaces/PaiCard.tsx @@ -1,5 +1,6 @@ +import { BooleanLike } from '../../common/react'; import { useBackend, useLocalState } from '../backend'; -import { Box, Button, LabeledList, NoticeBox, Section, Stack, Tabs } from '../components'; +import { Box, Button, LabeledList, NoticeBox, Section, Stack } from '../components'; import { Window } from '../layouts'; type PaiCardData = { @@ -15,14 +16,14 @@ type Candidate = { }; type Pai = { - can_holo: number; + can_holo: BooleanLike; dna: string; - emagged: number; + emagged: BooleanLike; laws: string; master: string; name: string; - transmit: number; - receive: number; + transmit: BooleanLike; + receive: BooleanLike; }; export const PaiCard = (_, context) => { @@ -40,20 +41,34 @@ export const PaiCard = (_, context) => { const PaiDownload = (_, context) => { const { act, data } = useBackend(context); const { candidates = [] } = data; + const [tabInChar, setTabInChar] = useLocalState(context, 'tab', true); + const onClick = () => { + setTabInChar(!tabInChar); + }; return (
act('request')} - tooltip="Request candidates."> - Request - + <> + {!!candidates.length && ( + + )} + + } fill scrollable - title="Viewing pAI Candidates"> + title="pAI Candidates"> {!candidates.length ? ( None found! ) : ( @@ -61,7 +76,11 @@ const PaiDownload = (_, context) => { {candidates.map((candidate, index) => { return ( - + ); })} @@ -76,13 +95,9 @@ const PaiDownload = (_, context) => { * In longer entries, it is much more readable. */ const CandidateDisplay = (props, context) => { - const [tab, setTab] = useLocalState(context, 'tab', 'description'); - const { candidate } = props; - const { comments, description, name } = candidate; - - const onTabClickHandler = (tab: string) => { - setTab(tab); - }; + const { act } = useBackend(context); + const { candidate, index, tabInChar } = props; + const { comments, description, key, name } = candidate; return ( { }}>
+ } fill height={12} scrollable - title="Candidate"> + title={'Candidate ' + index}> Name: {name || 'Randomized Name'} - {tab === 'description' - ? (`Description: ${description.length && description || "None"}`) - : (`OOC Comments: ${comments.length && comments || "None"}`)} + {tabInChar + ? `Description: ${description || 'None'}` + : `OOC Comments: ${comments || 'None'}`}
); }; -/** Tabs for the candidate */ -const CandidateTabs = (props, context) => { - const { act } = useBackend(context); - const { candidate, onTabClick, tab } = props; - const { key } = candidate; - - return ( - - - - { - onTabClick('description'); - }} - selected={tab === 'description'}> - Description - - { - onTabClick('comments'); - }} - selected={tab === 'comments'}> - OOC - - - - - - - - ); -}; - /** Once a pAI has been loaded, you can alter its settings here */ const PaiOptions = (_, context) => { const { act, data } = useBackend(context); @@ -160,7 +138,7 @@ const PaiOptions = (_, context) => { const { can_holo, dna, emagged, laws, master, name, transmit, receive } = pai; return ( -
+
{master || (