-
- {title}
-
+ {smallTitle && (
+
+ {title}
+
+ ) || (
+
+ {title}
+
+ )}
{buttons}
diff --git a/tgui/packages/tgui/interfaces/CharacterDirectory.js b/tgui/packages/tgui/interfaces/CharacterDirectory.js
index e378a6809cf..f85da538b98 100644
--- a/tgui/packages/tgui/interfaces/CharacterDirectory.js
+++ b/tgui/packages/tgui/interfaces/CharacterDirectory.js
@@ -1,6 +1,16 @@
+/* eslint-disable */
import { Fragment } from 'inferno';
import { useBackend, useLocalState } from '../backend';
-import { Box, Button, Icon, LabeledList, Section, Table, Stack } from '../components';
+import {
+ Box,
+ Button,
+ Icon,
+ LabeledList,
+ Section,
+ Table,
+ Flex,
+ Tabs,
+ Stack } from '../components';
import { Window } from '../layouts';
const erpTagColor = {
@@ -15,146 +25,257 @@ export const CharacterDirectory = (props, context) => {
const { act, data } = useBackend(context);
const {
+ personalName,
personalVisibility,
personalTag,
personalErpTag,
prefsOnly,
personalAdvert,
personalFlist,
+ personalDMs,
} = data;
- const [overlay, setOverlay] = useLocalState(context, 'overlay', null);
- const [overwritePrefs, setOverwritePrefs] = useLocalState(context, 'overwritePrefs', prefsOnly);
+ const [
+ SelectedTab,
+ setSelectedTab,
+ ] = useLocalState(context, 'SelectedTab', 1);
return (
-
-
- {(overlay && ) || (
-
+
+
+
+
-
- Save to current preferences slot:
-
-
- }>
-
- {/* option buttons, but compacter */}
-
- Visibility:
-
-
-
-
- Vore Tag:
-
-
-
-
- ERP Tag:
-
-
-
-
-
-
-
-
-
-
-
+
+ } />
+
+
+
+ {
+ setSelectedTab(1);
+ act('JustUpdate');
+ }}>
+ Directory
+
+ {
+ setSelectedTab(2);
+ act('JustUpdate');
+ }}>
+ Options
+
+ {/* {
+ setSelectedTab(3);
+ act('JustUpdate');
+ }}>
+
+ */}
+
+
+
+
-
-
- )}
+
+
+
+
+
);
};
-const ViewCharacter = (props, context) => {
- const [overlay, setOverlay] = useLocalState(context, 'overlay', null);
+const VisibilityButton = (props, context) => {
+ const { act, data } = useBackend(context);
+ const { personalVisibility } = data;
+
+ return (
+
+ );
+}
+
+// / The main window! either your characters or the available characters
+const MainWindow = (props, context) => { // main screen turn on
+ const { act, data } = useBackend(context);
+
+ const [
+ SelectedTab,
+ setSelectedTab,
+ ] = useLocalState(context, 'SelectedTab', 1);
+
+
+ return (
+ <>
+ {SelectedTab === 1 && (
+
+ )}
+ {SelectedTab === 2 && (
+
+ )}
+ {SelectedTab === 3 && (
+
+ )}
+
+ );
+};
+
+const SettingsControl = (props, context) => {
+ const { act, data } = useBackend(context);
+ const {
+ personalName,
+ personalVisibility,
+ personalTag,
+ personalErpTag,
+ prefsOnly,
+ personalAdvert,
+ personalFlist,
+ personalDMs,
+ } = data;
+ const [overwritePrefs, setOverwritePrefs] = useLocalState(context, 'overwritePrefs', prefsOnly);
return (
setOverlay(null)} />}>
-
-
-
-
-
-
-
-
- {overlay.character_ad || 'Unset.'}
-
-
-
-
- {overlay.ooc_notes || 'Unset.'}
-
-
-
-
- {overlay.flavor_text || 'Unset.'}
-
-
+ title="Controls"
+ buttons={
+
+ {/*
+ Save to current preferences slot:
+
+
+ }>
+
+ {/* option buttons, but compacter */}
+ {/*
+ Visibility:
+
+
+ */}
+
+ Open For DMs:
+
+
+
+
+ Vore Tag:
+
+
+
+
+ ERP Tag:
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+};
+
+const ReadMe = (props, context) => {
+ const { act, data } = useBackend(context);
+ const { ReadmeText } = data;
+
+ return (
+
);
};
+const BottomToolbar = (props, context) => {
+ const { act, data } = useBackend(context);
+ const { personalLookingForFriends } = data;
+
+ return (
+
+
+
+
+
+
+
+
+
+ );
+};
+
const CharacterDirectoryList = (props, context) => {
const { act, data } = useBackend(context);
@@ -165,21 +286,31 @@ const CharacterDirectoryList = (props, context) => {
const [overlay, setOverlay] = useLocalState(context, 'overlay', null);
return (
-
act('refresh')} />}>
-
+ act('refresh')} />
+ }>
+
Name
Gender
Species
- Preference
+ Orientation
Position
Vore
-
- Advert
+
+ Examine
-
+
F-List
+
+ Message
+
{directory
.sort((a, b) => {
@@ -188,8 +319,23 @@ const CharacterDirectoryList = (props, context) => {
})
.map((character, i) => (
-
- {canOrbit ?
diff --git a/tgui/packages/tgui/interfaces/CharacterInspection.js b/tgui/packages/tgui/interfaces/CharacterInspection.js
new file mode 100644
index 00000000000..c833a93b2c8
--- /dev/null
+++ b/tgui/packages/tgui/interfaces/CharacterInspection.js
@@ -0,0 +1,354 @@
+/* eslint-disable */
+import { Fragment } from 'inferno';
+import { useBackend, useLocalState } from '../backend';
+import {
+ Box,
+ Button,
+ Icon,
+ LabeledList,
+ Flex,
+ Section,
+ Table,
+ Stack,
+ Tabs } from '../components';
+import { Window } from '../layouts';
+import { marked } from 'marked';
+import { sanitizeText } from '../sanitize';
+
+export const CharacterInspection = (props, context) => {
+ const { act, data } = useBackend(context);
+ const {
+ gender,
+ species,
+ vorepref,
+ erppref,
+ kisspref,
+ flink,
+ ad,
+ notes,
+ flavor,
+ their_quid,
+ viewer_quid,
+ name,
+ looking_for_friends,
+ dms_r_open,
+ } = data;
+
+ const [
+ SelectedTab,
+ setSelectedTab,
+ ] = useLocalState(context, 'SelectedTab', 1);
+
+ return (
+
+
+
+
+
+ Say Hi! -->
+
+
+
+
+ {
+ setSelectedTab(1);
+ act('JustUpdate');
+ }}>
+ Flavor Text
+
+ {
+ setSelectedTab(2);
+ act('JustUpdate');
+ }}>
+ OOC Notes
+
+ {
+ setSelectedTab(3);
+ act('JustUpdate');
+ }}>
+ Extra Info
+
+ {/* {
+ setSelectedTab(4);
+ act('JustUpdate');
+ }}>
+ Gallery (SFW)
+
+ {
+ setSelectedTab(5);
+ act('JustUpdate');
+ }}>
+ Gallery (NSFW)
+ */}
+
+
+
+
+
+
+
+
+
+
+
+ );
+};
+
+// / The main window! either your characters or the available characters
+const MainWindow = (props, context) => { // main screen turn on
+ const { act, data } = useBackend(context);
+
+ const [
+ SelectedTab,
+ setSelectedTab,
+ ] = useLocalState(context, 'SelectedTab', 1);
+
+
+ return (
+ <>
+ {SelectedTab === 1 && (
+
+ {data.profile_pic && (
+
+
+
+ )}
+
+
+ )
+ || SelectedTab === 2 && (
+
+ )
+ || SelectedTab === 3 && (
+
+ )
+ // || SelectedTab === 4 && (
+ //
+ // )
+ // || SelectedTab === 5 && (
+ //
+ // ) // coming soon: these
+ }
+
+ );
+};
+
+// / The bottom toolbar
+const BottomToolbar = (props, context) => {
+ const { act, data } = useBackend(context);
+ const {
+ looking_for_friends,
+ their_quid,
+ viewer_quid,
+ } = data;
+
+ return (
+
+ {
+ true
+ ? looking_for_friends ? (
+
+ ) : (
+
+ );
+};
+
+// / The ERP Preference
+const ERPPref = (props, context) => {
+ const { act, data } = useBackend(context);
+ const { erppref } = data;
+
+ return (
+
+ );
+};
+
+// / The Vore Preference
+const VorePref = (props, context) => {
+ const { act, data } = useBackend(context);
+ const { vorepref } = data;
+
+ return (
+
+ );
+};
+
+// / The Kiss Preference
+const KissPref = (props, context) => {
+ const { act, data } = useBackend(context);
+ const { kisspref } = data;
+
+ return (
+
+ );
+};
+
+// / The F-list link
+const FlistLink = (props, context) => {
+ const { act, data } = useBackend(context);
+ const {
+ flink,
+ their_quid,
+ viewer_quid,
+ } = data;
+
+ return (
+ flink && (
+