From 9c78112fb3673e65e8c41a79f90f6d7aa0c91f2f Mon Sep 17 00:00:00 2001 From: Raeschen Date: Tue, 20 Jun 2023 17:10:49 +0200 Subject: [PATCH] build tgui bundle --- .../tgui_ch/interfaces/EntityNarrate.tsx | 182 ++++++++++++++++++ tgui/public/tgui.bundle.js | 2 +- 2 files changed, 183 insertions(+), 1 deletion(-) create mode 100644 tgui/packages/tgui_ch/interfaces/EntityNarrate.tsx diff --git a/tgui/packages/tgui_ch/interfaces/EntityNarrate.tsx b/tgui/packages/tgui_ch/interfaces/EntityNarrate.tsx new file mode 100644 index 0000000000..d4e73709da --- /dev/null +++ b/tgui/packages/tgui_ch/interfaces/EntityNarrate.tsx @@ -0,0 +1,182 @@ +import { BooleanLike } from 'common/react'; +import { useBackend, useLocalState } from '../backend'; +import { Flex, Tabs, Section, Button, Box, TextArea, Divider } from '../components'; +import { Window } from '../layouts'; + +type data = { + mode_select: BooleanLike; // Data for emote/talk. 0 for talk, 1 for emote + privacy_select: BooleanLike; // Data for subtle/loud, 0 for loud, 1 for subtle + selection_mode: BooleanLike; // Data for whether we multiselect entities, 0 for single, 1 for multi + number_mob_selected: number; // Data to display on how many we selected + entity_names: string[]; // List of IDs to populate selection + selected_id: string; // To be used for single-mode details view + selected_name: string; // To be used for single-mode details view + selected_type: string; // To be used for single-mode details view + multi_id_selection: string[]; // To be used to highlight selection, and multi-use narrate +}; + +export const EntityNarrate = (props, context) => { + const { act, data } = useBackend(context); + return ( + + +
+ + +
+ +
+
+ + + + +
+ + +
+ +
+
+ +
+ +
+
+ + + +
+
+
+
+
+
+
+ ); +}; + +// Selects entity from a vertical list, with mode to allow multiple selections. +// Clicking the tab again removes it +export const EntitySelection = (props, context) => { + const { act, data } = useBackend(context); + const { selection_mode, multi_id_selection, entity_names } = data; + return ( + + +
act('change_mode_multi')} + /> + }> + + {entity_names.map((name) => ( + act('select_entity', { id_selected: name })}> + {name} + + ))} + +
+
+
+ ); +}; + +export const DisplayDetails = (props, context) => { + const { act, data } = useBackend(context); + const { + selection_mode, + number_mob_selected, + selected_id, + selected_name, + selected_type, + } = data; + if (selection_mode) { + return ( + + Number of entities selected: {number_mob_selected} + + ); + } else { + return ( + + Selected ID: {selected_id}
+ Selected Name: {selected_name}
+ Selected Type: {selected_type}
+
+ ); + } +}; + +export const ModeSelector = (props, context) => { + const { act, data } = useBackend(context); + const { privacy_select, mode_select } = data; + + return ( + + +