{
{...computeFlexItemProps(rest)}
/>
);
-};
+}
Stack.Item = StackItem;
@@ -70,8 +81,9 @@ type StackDividerProps = FlexItemProps &
hidden: boolean;
}>;
-const StackDivider = (props: StackDividerProps) => {
+function StackDivider(props: StackDividerProps) {
const { className, hidden, ...rest } = props;
+
return (
{
{...computeFlexItemProps(rest)}
/>
);
-};
+}
Stack.Divider = StackDivider;
diff --git a/tgui/packages/tgui/interfaces/AdminFax.jsx b/tgui/packages/tgui/interfaces/AdminFax.jsx
index 9aeef3247a3..3e6026d4ce4 100644
--- a/tgui/packages/tgui/interfaces/AdminFax.jsx
+++ b/tgui/packages/tgui/interfaces/AdminFax.jsx
@@ -63,10 +63,9 @@ export const FaxMainPanel = (props) => {
setFax(value)}
/>
diff --git a/tgui/packages/tgui/interfaces/AdminPDA.jsx b/tgui/packages/tgui/interfaces/AdminPDA.jsx
index 09570265a20..fa83f200e52 100644
--- a/tgui/packages/tgui/interfaces/AdminPDA.jsx
+++ b/tgui/packages/tgui/interfaces/AdminPDA.jsx
@@ -33,7 +33,8 @@ const ReceiverChoice = (props) => {
showInvisible || !rcvr.invisible)
.map((rcvr) => ({
diff --git a/tgui/packages/tgui/interfaces/AiVoiceChanger.tsx b/tgui/packages/tgui/interfaces/AiVoiceChanger.tsx
index 9e248a01033..09c1aa04e57 100644
--- a/tgui/packages/tgui/interfaces/AiVoiceChanger.tsx
+++ b/tgui/packages/tgui/interfaces/AiVoiceChanger.tsx
@@ -5,37 +5,40 @@ import { Button, Dropdown, Input, LabeledList, Section } from '../components';
import { Window } from '../layouts';
type Data = {
- on: BooleanLike;
- voices: string[];
- say_verb: string;
loud: BooleanLike;
name: string;
+ on: BooleanLike;
+ say_verb: string;
+ selected: string;
+ voices: string[];
};
-export const AiVoiceChanger = (props) => {
+export function AiVoiceChanger(props) {
const { act, data } = useBackend();
- const { loud, name, on, say_verb, voices } = data;
+ const { loud, name, on, say_verb, voices, selected } = data;
return (
-
);
-};
+}
diff --git a/tgui/packages/tgui/interfaces/AlertModal.tsx b/tgui/packages/tgui/interfaces/AlertModal.tsx
index d5b931dc08c..62b6e8bbbc3 100644
--- a/tgui/packages/tgui/interfaces/AlertModal.tsx
+++ b/tgui/packages/tgui/interfaces/AlertModal.tsx
@@ -1,33 +1,29 @@
-import { useState } from 'react';
+import { KEY } from 'common/keys';
+import { BooleanLike } from 'common/react';
+import { KeyboardEvent, useState } from 'react';
-import {
- KEY_ENTER,
- KEY_ESCAPE,
- KEY_LEFT,
- KEY_RIGHT,
- KEY_SPACE,
- KEY_TAB,
-} from '../../common/keycodes';
import { useBackend } from '../backend';
-import { Autofocus, Box, Button, Flex, Section, Stack } from '../components';
+import { Autofocus, Box, Button, Section, Stack } from '../components';
import { Window } from '../layouts';
import { Loader } from './common/Loader';
-type AlertModalData = {
- autofocus: boolean;
+type Data = {
+ autofocus: BooleanLike;
buttons: string[];
- large_buttons: boolean;
+ large_buttons: BooleanLike;
message: string;
- swapped_buttons: boolean;
+ swapped_buttons: BooleanLike;
timeout: number;
title: string;
};
-const KEY_DECREMENT = -1;
-const KEY_INCREMENT = 1;
+enum DIRECTION {
+ Increment = 1,
+ Decrement = -1,
+}
-export const AlertModal = (props) => {
- const { act, data } = useBackend();
+export function AlertModal(props) {
+ const { act, data } = useBackend();
const {
autofocus,
buttons = [],
@@ -36,128 +32,148 @@ export const AlertModal = (props) => {
timeout,
title,
} = data;
+
const [selected, setSelected] = useState(0);
+
+ // At least one of the buttons has a long text message
+ const isVerbose = buttons.some((button) => button.length > 10);
+ const largeSpacing = isVerbose && large_buttons ? 20 : 15;
+
// Dynamically sets window dimensions
const windowHeight =
- 115 +
+ 120 +
+ (isVerbose ? largeSpacing * buttons.length : 0) +
(message.length > 30 ? Math.ceil(message.length / 4) : 0) +
(message.length && large_buttons ? 5 : 0);
- const windowWidth = 325 + (buttons.length > 2 ? 55 : 0);
- const onKey = (direction: number) => {
- if (selected === 0 && direction === KEY_DECREMENT) {
- setSelected(buttons.length - 1);
- } else if (selected === buttons.length - 1 && direction === KEY_INCREMENT) {
- setSelected(0);
- } else {
- setSelected(selected + direction);
+
+ const windowWidth = 345 + (buttons.length > 2 ? 55 : 0);
+
+ /** Changes button selection, etc */
+ function keyDownHandler(event: KeyboardEvent) {
+ switch (event.key) {
+ case KEY.Space:
+ case KEY.Enter:
+ act('choose', { choice: buttons[selected] });
+ return;
+ case KEY.Escape:
+ act('cancel');
+ return;
+ case KEY.Left:
+ event.preventDefault();
+ onKey(DIRECTION.Decrement);
+ return;
+ case KEY.Tab:
+ case KEY.Right:
+ event.preventDefault();
+ onKey(DIRECTION.Increment);
+ return;
}
- };
+ }
+
+ /** Manages iterating through the buttons */
+ function onKey(direction: DIRECTION) {
+ const newIndex = (selected + direction + buttons.length) % buttons.length;
+ setSelected(newIndex);
+ }
return (
{!!timeout && }
- {
- const keyCode = window.event ? e.which : e.keyCode;
- /**
- * Simulate a click when pressing space or enter,
- * allow keyboard navigation, override tab behavior
- */
- if (keyCode === KEY_SPACE || keyCode === KEY_ENTER) {
- act('choose', { choice: buttons[selected] });
- } else if (keyCode === KEY_ESCAPE) {
- act('cancel');
- } else if (keyCode === KEY_LEFT) {
- e.preventDefault();
- onKey(KEY_DECREMENT);
- } else if (keyCode === KEY_TAB || keyCode === KEY_RIGHT) {
- e.preventDefault();
- onKey(KEY_INCREMENT);
- }
- }}
- >
+
-
+
{message}
-
+
{!!autofocus && }
-
+ {isVerbose ? (
+
+ ) : (
+
+ )}
);
+}
+
+type ButtonDisplayProps = {
+ selected: number;
};
/**
* Displays a list of buttons ordered by user prefs.
- * Technically this handles more than 2 buttons, but you
- * should just be using a list input in that case.
*/
-const ButtonDisplay = (props) => {
- const { data } = useBackend();
+function HorizontalButtons(props: ButtonDisplayProps) {
+ const { act, data } = useBackend();
const { buttons = [], large_buttons, swapped_buttons } = data;
const { selected } = props;
return (
-
- {buttons?.map((button, index) =>
- !!large_buttons && buttons.length < 3 ? (
-
-
-
- ) : (
-
-
-
- ),
- )}
-
+
+ {buttons.map((button, index) => (
+
+
+
+ ))}
+
);
-};
+}
/**
- * Displays a button with variable sizing.
+ * Technically the parent handles more than 2 buttons, but you
+ * should just be using a list input in that case.
*/
-const AlertButton = (props) => {
- const { act, data } = useBackend();
- const { large_buttons } = data;
- const { button, selected } = props;
- const buttonWidth = button.length > 7 ? button.length : 7;
+function VerticalButtons(props: ButtonDisplayProps) {
+ const { act, data } = useBackend();
+ const { buttons = [], large_buttons, swapped_buttons } = data;
+ const { selected } = props;
return (
-
+ {buttons.map((button, index) => (
+
+
+
+ ))}
+
);
-};
+}
diff --git a/tgui/packages/tgui/interfaces/Cargo.jsx b/tgui/packages/tgui/interfaces/Cargo.jsx
deleted file mode 100644
index cbc0f5b112b..00000000000
--- a/tgui/packages/tgui/interfaces/Cargo.jsx
+++ /dev/null
@@ -1,576 +0,0 @@
-import { filter, sortBy } from 'common/collections';
-
-import { useBackend, useSharedState } from '../backend';
-import {
- AnimatedNumber,
- Box,
- Button,
- Flex,
- Icon,
- Input,
- LabeledList,
- NoticeBox,
- RestrictedInput,
- Section,
- Stack,
- Table,
- Tabs,
-} from '../components';
-import { formatMoney } from '../format';
-import { Window } from '../layouts';
-
-export const Cargo = (props) => {
- return (
-
-
-
-
-
- );
-};
-
-export const CargoContent = (props) => {
- /* SKYRAT EDIT BELOW - ADDS act */
- const { act, data } = useBackend();
- /* SKYRAT EDIT END */
- const [tab, setTab] = useSharedState('tab', 'catalog');
- const { cart = [], requests = [], requestonly } = data;
- const cart_length = cart.reduce((total, entry) => total + entry.amount, 0);
-
- return (
-
-
-
-
- setTab('catalog')}
- >
- Catalog
-
- 0 && 'yellow'}
- selected={tab === 'requests'}
- onClick={() => setTab('requests')}
- >
- Requests ({requests.length})
-
- act('company_import_window')}
- >
- Company Imports
-
- {!requestonly && (
- <>
- 0 && 'yellow'}
- selected={tab === 'cart'}
- onClick={() => setTab('cart')}
- >
- Checkout ({cart_length})
-
- setTab('help')}
- >
- Help
-
-
- )}
-
-
- {tab === 'catalog' && }
- {tab === 'requests' && }
- {tab === 'cart' && }
- {tab === 'help' && }
- {tab === 'company_import_window' && tab === 'catalog'}
-
- );
-};
-
-const CargoStatus = (props) => {
- const { act, data } = useBackend();
- const {
- department,
- grocery,
- away,
- docked,
- loan,
- loan_dispatched,
- location,
- message,
- points,
- requestonly,
- can_send,
- } = data;
-
- return (
-
- formatMoney(value)}
- />
- {' credits'}
-
- }
- >
-
-
- {(docked && !requestonly && can_send && (
-
- {message}
- {!!loan && !requestonly && (
-
- {(!loan_dispatched && (
-
- )}
-
-
- );
-};
-
-/**
- * Take entire supplies tree
- * and return a flat supply pack list that matches search,
- * sorted by name and only the first page.
- * @param {any[]} supplies Supplies list.
- * @param {string} search The search term
- * @returns {any[]} The flat list of supply packs.
- */
-const searchForSupplies = (supplies, search) => {
- search = search.toLowerCase();
-
- const queriedSupplies = sortBy(
- filter(
- supplies.flatMap((category) => category.packs),
- (pack) =>
- pack.name?.toLowerCase().includes(search.toLowerCase()) ||
- pack.desc?.toLowerCase().includes(search.toLowerCase()),
- ),
- (pack) => pack.name,
- );
-
- return queriedSupplies.slice(0, 25);
-};
-
-export const CargoCatalog = (props) => {
- const { express } = props;
- const { act, data } = useBackend();
-
- const { self_paid, app_cost } = data;
-
- const supplies = Object.values(data.supplies);
- const { amount_by_name = [], max_order } = data;
-
- const [activeSupplyName, setActiveSupplyName] = useSharedState(
- 'supply',
- supplies[0]?.name,
- );
-
- const [searchText, setSearchText] = useSharedState('search_text', '');
-
- const activeSupply =
- activeSupplyName === 'search_results'
- ? { packs: searchForSupplies(supplies, searchText) }
- : supplies.find((supply) => supply.name === activeSupplyName);
-
- return (
-
- );
-};
-
-const CargoRequests = (props) => {
- const { act, data } = useBackend();
- const { requestonly, can_send, can_approve_requests } = data;
- const requests = data.requests || [];
- // Labeled list reimplementation to squeeze extra columns out of it
- return (
-
act('denyall')}
- />
- )
- }
- >
- {requests.length === 0 && No Requests}
- {requests.length > 0 && (
-
- {requests.map((request) => (
-
-
- #{request.id}
-
- {request.object}
-
- {request.orderer}
-
-
- {request.reason}
-
-
- {formatMoney(request.cost)} cr
-
- {(!requestonly || can_send) && can_approve_requests && (
-
-
- )}
-
- ))}
-
- )}
-
- );
-};
-
-const CargoCartButtons = (props) => {
- const { act, data } = useBackend();
- const { requestonly, can_send, can_approve_requests } = data;
- const cart = data.cart || [];
- const total = cart.reduce((total, entry) => total + entry.cost, 0);
- return (
- <>
-
- {cart.length === 0 && 'Cart is empty'}
- {cart.length === 1 && '1 item'}
- {cart.length >= 2 && cart.length + ' items'}{' '}
- {total > 0 && `(${formatMoney(total)} cr)`}
-
- {!requestonly && !!can_send && !!can_approve_requests && (
-
+ )
+ }
+ >
+ {requests.length === 0 &&
No Requests}
+ {requests.length > 0 && (
+
+
+ ID
+ Object
+ Orderer
+ Reason
+ Cost
+ {(!requestonly || !!can_send) && !!can_approve_requests && (
+ Actions
+ )}
+
+
+ {requests.map((request) => (
+
+ #{request.id}
+ {request.object}
+
+ {request.orderer}
+
+
+ {decodeHtmlEntities(request.reason)}
+
+
+ {formatMoney(request.cost)} cr
+
+ {(!requestonly || !!can_send) && !!can_approve_requests && (
+
+
+ )}
+
+ ))}
+
+ )}
+
+ );
+}
diff --git a/tgui/packages/tgui/interfaces/Cargo/CargoStatus.tsx b/tgui/packages/tgui/interfaces/Cargo/CargoStatus.tsx
new file mode 100644
index 00000000000..b230400e4e3
--- /dev/null
+++ b/tgui/packages/tgui/interfaces/Cargo/CargoStatus.tsx
@@ -0,0 +1,75 @@
+import { useBackend } from '../../backend';
+import {
+ AnimatedNumber,
+ Box,
+ Button,
+ LabeledList,
+ Section,
+} from '../../components';
+import { formatMoney } from '../../format';
+import { CargoData } from './types';
+
+export function CargoStatus(props) {
+ const { act, data } = useBackend
();
+ const {
+ department,
+ grocery,
+ away,
+ docked,
+ loan,
+ loan_dispatched,
+ location,
+ message,
+ points,
+ requestonly,
+ can_send,
+ } = data;
+
+ return (
+
+ formatMoney(value)}
+ />
+ {' credits'}
+
+ }
+ >
+
+
+ {!!docked && !requestonly && !!can_send ? (
+
+ ) : (
+ String(location)
+ )}
+
+ {message}
+ {!!loan && !requestonly && (
+
+ {!loan_dispatched ? (
+
+ ) : (
+ Loaned to Centcom
+ )}
+
+ )}
+
+
+ );
+}
diff --git a/tgui/packages/tgui/interfaces/Cargo/helpers.ts b/tgui/packages/tgui/interfaces/Cargo/helpers.ts
new file mode 100644
index 00000000000..e6b67f8ff6d
--- /dev/null
+++ b/tgui/packages/tgui/interfaces/Cargo/helpers.ts
@@ -0,0 +1,35 @@
+import { filter } from 'common/collections';
+import { flow } from 'common/fp';
+
+import { Supply, SupplyCategory } from './types';
+
+/**
+ * Take entire supplies tree
+ * and return a flat supply pack list that matches search,
+ * sorted by name and only the first page.
+ * @param {Supply[]} supplies Supplies list, aka Object.values(data.supplies)
+ * @param {string} search The search term
+ * @returns {Supply[]} The flat list of supply packs.
+ */
+export function searchForSupplies(
+ supplies: SupplyCategory[],
+ search: string,
+): Supply[] {
+ const lowerSearch = search.toLowerCase();
+
+ return flow([
+ // Flat categories
+ (initialSupplies: SupplyCategory[]) =>
+ initialSupplies.flatMap((category) => category.packs),
+ // Filter by name or desc
+ (flatMapped: Supply[]) =>
+ filter(
+ flatMapped,
+ (pack: Supply) =>
+ pack.name?.toLowerCase().includes(lowerSearch) ||
+ pack.desc?.toLowerCase().includes(lowerSearch),
+ ),
+ // Just the first page
+ (filtered: Supply[]) => filtered.slice(0, 25),
+ ])(supplies);
+}
diff --git a/tgui/packages/tgui/interfaces/Cargo/index.tsx b/tgui/packages/tgui/interfaces/Cargo/index.tsx
new file mode 100644
index 00000000000..d39435f4cd9
--- /dev/null
+++ b/tgui/packages/tgui/interfaces/Cargo/index.tsx
@@ -0,0 +1,91 @@
+import { useBackend, useSharedState } from '../../backend';
+import { Stack, Tabs } from '../../components';
+import { Window } from '../../layouts';
+import { CargoCart } from './CargoCart';
+import { CargoCatalog } from './CargoCatalog';
+import { CargoHelp } from './CargoHelp';
+import { CargoRequests } from './CargoRequests';
+import { CargoStatus } from './CargoStatus';
+import { CargoData } from './types';
+
+enum TAB {
+ Catalog = 'catalog',
+ Requests = 'requests',
+ Cart = 'cart',
+ Help = 'help',
+}
+
+export function Cargo(props) {
+ return (
+
+
+
+
+
+ );
+}
+
+export function CargoContent(props) {
+ const { data } = useBackend();
+
+ const { cart = [], requests = [], requestonly } = data;
+
+ const [tab, setTab] = useSharedState('cargotab', TAB.Catalog);
+
+ let amount = 0;
+ for (let i = 0; i < cart.length; i++) {
+ amount += cart[i].amount;
+ }
+
+ return (
+
+
+
+
+
+
+ setTab(TAB.Catalog)}
+ >
+ Catalog
+
+ 0 && 'yellow'}
+ selected={tab === TAB.Requests}
+ onClick={() => setTab(TAB.Requests)}
+ >
+ Requests ({requests.length})
+
+ {!requestonly && (
+ <>
+ 0 && 'yellow'}
+ selected={tab === TAB.Cart}
+ onClick={() => setTab(TAB.Cart)}
+ >
+ Checkout ({amount})
+
+ setTab(TAB.Help)}
+ >
+ Help
+
+
+ )}
+
+
+
+ {tab === TAB.Catalog && }
+ {tab === TAB.Requests && }
+ {tab === TAB.Cart && }
+ {tab === TAB.Help && }
+
+
+ );
+}
diff --git a/tgui/packages/tgui/interfaces/Cargo/types.ts b/tgui/packages/tgui/interfaces/Cargo/types.ts
new file mode 100644
index 00000000000..4d9e2817d61
--- /dev/null
+++ b/tgui/packages/tgui/interfaces/Cargo/types.ts
@@ -0,0 +1,58 @@
+import { BooleanLike } from 'common/react';
+
+export type CargoData = {
+ amount_by_name: Record | undefined;
+ app_cost?: number;
+ away: BooleanLike;
+ can_approve_requests: BooleanLike;
+ can_send: BooleanLike;
+ cart: CartEntry[];
+ department: string;
+ docked: BooleanLike;
+ grocery: number;
+ loan_dispatched: BooleanLike;
+ loan: BooleanLike;
+ location: string;
+ max_order: number;
+ message: string;
+ points: number;
+ requests: Request[];
+ requestonly: BooleanLike;
+ self_paid: BooleanLike;
+ supplies: Record;
+};
+
+export type SupplyCategory = {
+ name: string;
+ packs: Supply[];
+};
+
+export type Supply = {
+ access: BooleanLike;
+ cost: number;
+ desc: string;
+ goody: BooleanLike;
+ id: string;
+ name: string;
+ small_item: BooleanLike;
+};
+
+type CartEntry = {
+ amount: number;
+ can_be_cancelled: BooleanLike;
+ cost_type: string;
+ cost: number;
+ dep_order: BooleanLike;
+ id: string;
+ object: string;
+ orderer: string;
+ paid: BooleanLike;
+};
+
+type Request = {
+ cost: number;
+ id: string;
+ object: string;
+ orderer: string;
+ reason: string;
+};
diff --git a/tgui/packages/tgui/interfaces/CargoExpress.tsx b/tgui/packages/tgui/interfaces/CargoExpress.tsx
index 0983e685f7d..83947b5adc4 100644
--- a/tgui/packages/tgui/interfaces/CargoExpress.tsx
+++ b/tgui/packages/tgui/interfaces/CargoExpress.tsx
@@ -9,7 +9,7 @@ import {
Section,
} from '../components';
import { Window } from '../layouts';
-import { CargoCatalog } from './Cargo';
+import { CargoCatalog } from './Cargo/CargoCatalog';
import { InterfaceLockNoticeBox } from './common/InterfaceLockNoticeBox';
type Data = {
@@ -24,7 +24,7 @@ type Data = {
message: string;
};
-export const CargoExpress = (props) => {
+export function CargoExpress(props) {
const { data } = useBackend();
const { locked } = data;
@@ -36,9 +36,9 @@ export const CargoExpress = (props) => {
);
-};
+}
-const CargoExpressContent = (props) => {
+function CargoExpressContent(props) {
const { act, data } = useBackend();
const {
hasBeacon,
@@ -64,11 +64,9 @@ const CargoExpressContent = (props) => {
>
-
{message}
@@ -88,4 +84,4 @@ const CargoExpressContent = (props) => {
);
-};
+}
diff --git a/tgui/packages/tgui/interfaces/Changelog.jsx b/tgui/packages/tgui/interfaces/Changelog.jsx
index 5ea40eaa7f4..75fbd98ad2d 100644
--- a/tgui/packages/tgui/interfaces/Changelog.jsx
+++ b/tgui/packages/tgui/interfaces/Changelog.jsx
@@ -141,7 +141,7 @@ export class Changelog extends Component {
{
const index = dateChoices.indexOf(value);
@@ -157,7 +157,7 @@ export class Changelog extends Component {
return this.getData(dates[index]);
}}
selected={selectedDate}
- width={'150px'}
+ width="150px"
/>
diff --git a/tgui/packages/tgui/interfaces/CircuitModule.jsx b/tgui/packages/tgui/interfaces/CircuitModule.jsx
index 799fea9d15f..bbb323e5e5a 100644
--- a/tgui/packages/tgui/interfaces/CircuitModule.jsx
+++ b/tgui/packages/tgui/interfaces/CircuitModule.jsx
@@ -130,7 +130,7 @@ const PortEntry = (props) => {
diff --git a/tgui/packages/tgui/interfaces/CircuitSignalHandler.tsx b/tgui/packages/tgui/interfaces/CircuitSignalHandler.tsx
index 1fc1f8397f9..66d04644391 100644
--- a/tgui/packages/tgui/interfaces/CircuitSignalHandler.tsx
+++ b/tgui/packages/tgui/interfaces/CircuitSignalHandler.tsx
@@ -221,7 +221,7 @@ const Entry = (props: EntryProps) => {
{(options.length && (
diff --git a/tgui/packages/tgui/interfaces/CommandReport.tsx b/tgui/packages/tgui/interfaces/CommandReport.tsx
index dfe8cf9ff3d..9185bebb5b4 100644
--- a/tgui/packages/tgui/interfaces/CommandReport.tsx
+++ b/tgui/packages/tgui/interfaces/CommandReport.tsx
@@ -117,7 +117,7 @@ const AnnouncementColor = (props) => {
act('update_announcement_color', {
@@ -138,7 +138,7 @@ const AnnouncementSound = (props) => {
act('set_report_sound', {
diff --git a/tgui/packages/tgui/interfaces/ControllerOverview.tsx b/tgui/packages/tgui/interfaces/ControllerOverview.tsx
deleted file mode 100644
index 5b5c210b7bb..00000000000
--- a/tgui/packages/tgui/interfaces/ControllerOverview.tsx
+++ /dev/null
@@ -1,245 +0,0 @@
-import { BooleanLike } from 'common/react';
-import { createSearch } from 'common/string';
-import { useMemo, useState } from 'react';
-
-import { useBackend } from '../backend';
-import {
- Button,
- Collapsible,
- Dropdown,
- Input,
- LabeledList,
- Section,
- Stack,
-} from '../components';
-import { Window } from '../layouts';
-
-type SubsystemData = {
- name: string;
- ref: string;
- init_order: number;
- last_fire: number;
- next_fire: number;
- can_fire: BooleanLike;
- doesnt_fire: BooleanLike;
- cost_ms: number;
- tick_usage: number;
- tick_overrun: number;
- initialized: BooleanLike;
- initialization_failure_message: string | undefined;
-};
-
-type ControllerData = {
- world_time: number;
- fast_update: BooleanLike;
- map_cpu: number;
- subsystems: SubsystemData[];
-};
-
-const SubsystemView = (props: { data: SubsystemData }) => {
- const { act } = useBackend();
- const { data } = props;
- const {
- name,
- ref,
- init_order,
- last_fire,
- next_fire,
- can_fire,
- doesnt_fire,
- cost_ms,
- tick_usage,
- tick_overrun,
- initialized,
- initialization_failure_message,
- } = data;
-
- let icon = 'play';
- if (!initialized) {
- icon = 'circle-exclamation';
- } else if (doesnt_fire) {
- icon = 'check';
- } else if (!can_fire) {
- icon = 'pause';
- }
-
- return (
- {
- act('view_variables', { ref: ref });
- }}
- />
- }
- >
-
- {init_order}
- {last_fire}
- {next_fire}
- {cost_ms}ms
-
- {(tick_usage * 0.01).toFixed(2)}%
-
-
- {(tick_overrun * 0.01).toFixed(2)}%
-
- {initialization_failure_message ? (
-
- {initialization_failure_message}
-
- ) : undefined}
-
-
- );
-};
-
-enum SubsystemSortBy {
- INIT_ORDER = 'Init Order',
- NAME = 'Name',
- LAST_FIRE = 'Last Fire',
- NEXT_FIRE = 'Next Fire',
- TICK_USAGE = 'Tick Usage',
- TICK_OVERRUN = 'Tick Overrun',
- COST = 'Cost',
-}
-
-const sortSubsystemBy = (
- subsystems: SubsystemData[],
- sortBy: SubsystemSortBy,
- asending: boolean = true,
-) => {
- let sorted = subsystems.sort((left, right) => {
- switch (sortBy) {
- case SubsystemSortBy.INIT_ORDER:
- return left.init_order - right.init_order;
- case SubsystemSortBy.NAME:
- return left.name.localeCompare(right.name);
- case SubsystemSortBy.LAST_FIRE:
- return left.last_fire - right.last_fire;
- case SubsystemSortBy.NEXT_FIRE:
- return left.next_fire - right.next_fire;
- case SubsystemSortBy.TICK_USAGE:
- return left.tick_usage - right.tick_usage;
- case SubsystemSortBy.TICK_OVERRUN:
- return left.tick_overrun - right.tick_overrun;
- case SubsystemSortBy.COST:
- return left.cost_ms - right.cost_ms;
- }
- });
- if (!asending) {
- sorted.reverse();
- }
- return sorted;
-};
-
-export const ControllerOverview = () => {
- const { act, data } = useBackend();
- const { world_time, map_cpu, subsystems, fast_update } = data;
-
- const [filterName, setFilterName] = useState('');
- const [sortBy, setSortBy] = useState(SubsystemSortBy.NAME);
- const [sortAscending, setSortAscending] = useState(true);
-
- let filteredSubsystems = useMemo(() => {
- if (!filterName) {
- return subsystems;
- }
-
- return subsystems.filter(() =>
- createSearch(filterName, (subsystem: SubsystemData) => subsystem.name),
- );
- }, [filterName, subsystems]);
-
- let sortedSubsystems = useMemo(() => {
- return sortSubsystemBy(filteredSubsystems, sortBy, sortAscending);
- }, [sortBy, sortAscending, filteredSubsystems]);
-
- const overallUsage = subsystems.reduce(
- (acc, subsystem) => acc + subsystem.tick_usage,
- 0,
- );
- const overallOverrun = subsystems.reduce(
- (acc, subsystem) => acc + subsystem.tick_overrun,
- 0,
- );
-
- return (
-
-
-
-
- World Time: {world_time}
- Map CPU: {map_cpu.toFixed(2)}%
-
- Overall Usage: {(overallUsage * 0.01).toFixed(2)}%
-
-
- Overall Overrun: {(overallOverrun * 0.01).toFixed(2)}%
-
-
-
-
-
-
- {sortedSubsystems.map((subsystem) => (
-
- ))}
-
-
-
-
- );
-};
diff --git a/tgui/packages/tgui/interfaces/ControllerOverview/OverviewSection.tsx b/tgui/packages/tgui/interfaces/ControllerOverview/OverviewSection.tsx
new file mode 100644
index 00000000000..919c19631f6
--- /dev/null
+++ b/tgui/packages/tgui/interfaces/ControllerOverview/OverviewSection.tsx
@@ -0,0 +1,57 @@
+import { useBackend } from '../../backend';
+import { Button, LabeledList, Section, Stack } from '../../components';
+import { ControllerData } from './types';
+
+export function OverviewSection(props) {
+ const { act, data } = useBackend();
+ const { fast_update, map_cpu, subsystems = [], world_time } = data;
+
+ let overallUsage = 0;
+ let overallOverrun = 0;
+ for (let i = 0; i < subsystems.length; i++) {
+ overallUsage += subsystems[i].tick_usage;
+ overallOverrun += subsystems[i].tick_overrun;
+ }
+
+ return (
+ {
+ act('toggle_fast_update');
+ }}
+ >
+ Fast
+
+ }
+ >
+
+
+
+
+ {world_time.toFixed(1)}
+
+
+ {map_cpu.toFixed(2)}%
+
+
+
+
+
+
+ {(overallUsage * 0.01).toFixed(2)}%
+
+
+ {(overallOverrun * 0.01).toFixed(2)}%
+
+
+
+
+
+ );
+}
diff --git a/tgui/packages/tgui/interfaces/ControllerOverview/SubsystemDialog.tsx b/tgui/packages/tgui/interfaces/ControllerOverview/SubsystemDialog.tsx
new file mode 100644
index 00000000000..21acd2dca1d
--- /dev/null
+++ b/tgui/packages/tgui/interfaces/ControllerOverview/SubsystemDialog.tsx
@@ -0,0 +1,69 @@
+import {
+ Box,
+ Button,
+ Divider,
+ LabeledList,
+ Modal,
+ Stack,
+} from '../../components';
+import { SubsystemData } from './types';
+
+type Props = {
+ subsystem: SubsystemData;
+ onClose: () => void;
+};
+
+export function SubsystemDialog(props: Props) {
+ const { subsystem, onClose } = props;
+ const {
+ cost_ms,
+ init_order,
+ initialization_failure_message,
+ last_fire,
+ name,
+ next_fire,
+ tick_overrun,
+ tick_usage,
+ } = subsystem;
+
+ return (
+
+
+
+ {name}
+
+
+
+
+
+
+
+
+ {init_order}
+ {last_fire}
+ {next_fire}
+ {cost_ms}ms
+
+ {(tick_usage * 0.01).toFixed(2)}%
+
+
+ {(tick_overrun * 0.01).toFixed(2)}%
+
+ {initialization_failure_message && (
+
+ {initialization_failure_message}
+
+ )}
+
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/tgui/packages/tgui/interfaces/ControllerOverview/SubsystemRow.tsx b/tgui/packages/tgui/interfaces/ControllerOverview/SubsystemRow.tsx
new file mode 100644
index 00000000000..0a0bef6a9e6
--- /dev/null
+++ b/tgui/packages/tgui/interfaces/ControllerOverview/SubsystemRow.tsx
@@ -0,0 +1,107 @@
+import { Dispatch } from 'react';
+
+import { useBackend } from '../../backend';
+import {
+ Button,
+ Icon,
+ ProgressBar,
+ Stack,
+ Table,
+ Tooltip,
+} from '../../components';
+import { SORTING_TYPES } from './contants';
+import { SortType, SubsystemData } from './types';
+
+type Props = {
+ max: number;
+ setSelected: Dispatch;
+ showBars: boolean;
+ sortType: SortType;
+ subsystem: SubsystemData;
+};
+
+export function SubsystemRow(props: Props) {
+ const { act } = useBackend();
+ const { max, setSelected, showBars, sortType, subsystem } = props;
+ const { can_fire, doesnt_fire, initialized, name, ref } = subsystem;
+
+ const { propName } = SORTING_TYPES[sortType];
+ const value = subsystem[propName];
+
+ let icon = 'play';
+ let color = 'good';
+ let tooltip = 'Operational';
+ if (!initialized) {
+ icon = 'circle-exclamation';
+ color = 'darkgreen';
+ tooltip = 'Not initialized';
+ } else if (doesnt_fire) {
+ icon = 'check';
+ color = 'grey';
+ tooltip = 'Does not fire';
+ } else if (!can_fire) {
+ icon = 'pause';
+ color = 'grey';
+ tooltip = 'Paused';
+ }
+
+ let valueDisplay = '';
+ let rangeDisplay = {};
+ if (showBars) {
+ if (sortType === SortType.Cost) {
+ valueDisplay = value.toFixed(0) + 'ms';
+ rangeDisplay = {
+ average: [75, 124.99],
+ bad: [125, Infinity],
+ };
+ } else {
+ valueDisplay = (value * 0.01).toFixed(2) + '%';
+ rangeDisplay = {
+ average: [10, 24.99],
+ bad: [25, Infinity],
+ };
+ }
+ } else {
+ valueDisplay = value;
+ }
+
+ return (
+
+
+
+
+
+
+ setSelected(subsystem)}>
+ {showBars ? (
+
+ {name} {valueDisplay}
+
+ ) : (
+
+ )}
+
+
+
+
+ );
+}
diff --git a/tgui/packages/tgui/interfaces/ControllerOverview/SubsystemViews.tsx b/tgui/packages/tgui/interfaces/ControllerOverview/SubsystemViews.tsx
new file mode 100644
index 00000000000..13ea5f3a160
--- /dev/null
+++ b/tgui/packages/tgui/interfaces/ControllerOverview/SubsystemViews.tsx
@@ -0,0 +1,114 @@
+import { Dispatch, useEffect, useState } from 'react';
+
+import { useBackend } from '../../backend';
+import { Button, Section, Stack, Table } from '../../components';
+import { SORTING_TYPES } from './contants';
+import { FilterState } from './filters';
+import { SubsystemRow } from './SubsystemRow';
+import { ControllerData, SubsystemData } from './types';
+
+type Props = {
+ filterOpts: FilterState;
+ setSelected: Dispatch;
+};
+
+export function SubsystemViews(props: Props) {
+ const { data } = useBackend();
+ const { subsystems } = data;
+
+ const { filterOpts, setSelected } = props;
+ const { ascending, inactive, query, smallValues, sortType } = filterOpts;
+ const { propName, inDeciseconds } = SORTING_TYPES[sortType];
+
+ const [bars, setBars] = useState(inDeciseconds);
+
+ const sorted = subsystems
+ .filter((subsystem) => {
+ // Matches search
+ const nameMatchesQuery = subsystem.name
+ .toLowerCase()
+ .includes(query?.toLowerCase());
+
+ // Filters out based on inactive
+ if (inactive && (!!subsystem.doesnt_fire || !subsystem.can_fire)) {
+ return false;
+ }
+
+ // Filters out based on small values
+ if (smallValues && subsystem[propName] < 1) {
+ return false;
+ }
+
+ return nameMatchesQuery;
+ })
+ .sort((a, b) => {
+ if (ascending) {
+ return a[propName] > b[propName] ? 1 : -1;
+ } else {
+ return b[propName] > a[propName] ? 1 : -1;
+ }
+ });
+
+ // Gets our totals for bar display
+ const totals: number[] = [];
+ let currentMax = 0;
+ if (inDeciseconds) {
+ for (let i = 0; i < sorted.length; i++) {
+ let value = sorted[i][propName];
+ if (typeof value !== 'number') {
+ continue;
+ }
+
+ totals.push(value);
+ }
+
+ currentMax = Math.max(...totals);
+ }
+
+ // Toggles default bar view for valid cases
+ useEffect(() => {
+ if (inDeciseconds && !bars) {
+ setBars(true);
+ } else if (!inDeciseconds && bars) {
+ setBars(false);
+ }
+ }, [inDeciseconds]);
+
+ return (
+
+
+ ({sorted.length} / {subsystems.length})
+
+
+
+
+
+ }
+ >
+
+ {sorted.map((subsystem) => (
+
+ ))}
+
+
+ );
+}
diff --git a/tgui/packages/tgui/interfaces/ControllerOverview/contants.ts b/tgui/packages/tgui/interfaces/ControllerOverview/contants.ts
new file mode 100644
index 00000000000..fdd28bfd36b
--- /dev/null
+++ b/tgui/packages/tgui/interfaces/ControllerOverview/contants.ts
@@ -0,0 +1,43 @@
+type SortType = {
+ label: string;
+ propName: string;
+ inDeciseconds: boolean;
+};
+
+export const SORTING_TYPES: readonly SortType[] = [
+ {
+ label: 'Alphabetical',
+ propName: 'name',
+ inDeciseconds: false,
+ },
+ {
+ label: 'Cost',
+ propName: 'cost_ms',
+ inDeciseconds: true,
+ },
+ {
+ label: 'Init Order',
+ propName: 'init_order',
+ inDeciseconds: false,
+ },
+ {
+ label: 'Last Fire',
+ propName: 'last_fire',
+ inDeciseconds: false,
+ },
+ {
+ label: 'Next Fire',
+ propName: 'next_fire',
+ inDeciseconds: false,
+ },
+ {
+ label: 'Tick Usage',
+ propName: 'tick_usage',
+ inDeciseconds: true,
+ },
+ {
+ label: 'Tick Overrun',
+ propName: 'tick_overrun',
+ inDeciseconds: true,
+ },
+];
diff --git a/tgui/packages/tgui/interfaces/ControllerOverview/filters.ts b/tgui/packages/tgui/interfaces/ControllerOverview/filters.ts
new file mode 100644
index 00000000000..8d975ac9a71
--- /dev/null
+++ b/tgui/packages/tgui/interfaces/ControllerOverview/filters.ts
@@ -0,0 +1,45 @@
+import { SortType } from './types';
+
+export type FilterState = {
+ ascending: boolean;
+ inactive: boolean;
+ query: string;
+ smallValues: boolean;
+ sortType: SortType;
+};
+
+export enum FilterAction {
+ Ascending = 'SET_SORT_ASCENDING',
+ Inactive = 'SET_FILTER_INACTIVE',
+ SmallValues = 'SET_FILTER_SMALL_VALUES',
+ SortType = 'SET_SORT_TYPE',
+ Query = 'SET_FILTER_QUERY',
+ Update = 'UPDATE_FILTER',
+}
+
+type Action =
+ | { type: FilterAction.Ascending; payload: boolean }
+ | { type: FilterAction.Inactive; payload: boolean }
+ | { type: FilterAction.SmallValues; payload: boolean }
+ | { type: FilterAction.SortType; payload: SortType }
+ | { type: FilterAction.Query; payload: string }
+ | { type: FilterAction.Update; payload: Partial };
+
+export function filterReducer(state: FilterState, action: Action): FilterState {
+ switch (action.type) {
+ case FilterAction.Inactive:
+ return { ...state, inactive: action.payload };
+ case FilterAction.SmallValues:
+ return { ...state, smallValues: action.payload };
+ case FilterAction.Ascending:
+ return { ...state, ascending: action.payload };
+ case FilterAction.SortType:
+ return { ...state, sortType: action.payload };
+ case FilterAction.Query:
+ return { ...state, query: action.payload };
+ case FilterAction.Update:
+ return { ...state, ...action.payload };
+ default:
+ return state;
+ }
+}
diff --git a/tgui/packages/tgui/interfaces/ControllerOverview/index.tsx b/tgui/packages/tgui/interfaces/ControllerOverview/index.tsx
new file mode 100644
index 00000000000..388d3d43678
--- /dev/null
+++ b/tgui/packages/tgui/interfaces/ControllerOverview/index.tsx
@@ -0,0 +1,152 @@
+import { useReducer, useState } from 'react';
+
+import { Button, Dropdown, Input, Section, Stack } from '../../components';
+import { Window } from '../../layouts';
+import { SORTING_TYPES } from './contants';
+import { FilterAction, filterReducer, FilterState } from './filters';
+import { OverviewSection } from './OverviewSection';
+import { SubsystemDialog } from './SubsystemDialog';
+import { SubsystemViews } from './SubsystemViews';
+import { SortType, SubsystemData } from './types';
+
+export function ControllerOverview(props) {
+ return (
+
+
+
+
+
+ );
+}
+
+export function ControllerContent(props) {
+ const [state, dispatch] = useReducer(filterReducer, {
+ ascending: true,
+ inactive: true,
+ query: '',
+ smallValues: false,
+ sortType: SortType.Name,
+ });
+
+ const [selected, setSelected] = useState();
+
+ const { label, inDeciseconds } =
+ SORTING_TYPES?.[state.sortType] || SORTING_TYPES[0];
+
+ function onSelectionHandler(value: string) {
+ const updates: Partial = {
+ sortType: SORTING_TYPES.findIndex((type) => type.label === value),
+ };
+
+ if (updates.sortType === undefined) return;
+
+ const { inDeciseconds } = SORTING_TYPES[updates.sortType];
+
+ updates.ascending = !inDeciseconds;
+ updates.smallValues = inDeciseconds;
+
+ dispatch({ type: FilterAction.Update, payload: updates });
+ }
+
+ return (
+
+ {selected && (
+ setSelected(undefined)}
+ subsystem={selected}
+ />
+ )}
+
+
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/tgui/packages/tgui/interfaces/ControllerOverview/types.ts b/tgui/packages/tgui/interfaces/ControllerOverview/types.ts
new file mode 100644
index 00000000000..604989b1f75
--- /dev/null
+++ b/tgui/packages/tgui/interfaces/ControllerOverview/types.ts
@@ -0,0 +1,33 @@
+import { BooleanLike } from 'common/react';
+
+export type SubsystemData = {
+ can_fire: BooleanLike;
+ cost_ms: number;
+ doesnt_fire: BooleanLike;
+ init_order: number;
+ initialization_failure_message: string | undefined;
+ initialized: BooleanLike;
+ last_fire: number;
+ name: string;
+ next_fire: number;
+ ref: string;
+ tick_overrun: number;
+ tick_usage: number;
+};
+
+export type ControllerData = {
+ world_time: number;
+ fast_update: BooleanLike;
+ map_cpu: number;
+ subsystems: SubsystemData[];
+};
+
+export enum SortType {
+ Name,
+ Cost,
+ InitOrder,
+ LastFire,
+ NextFire,
+ TickUsage,
+ TickOverrun,
+}
diff --git a/tgui/packages/tgui/interfaces/CrewConsole.jsx b/tgui/packages/tgui/interfaces/CrewConsole.jsx
deleted file mode 100644
index ef3f8c31a38..00000000000
--- a/tgui/packages/tgui/interfaces/CrewConsole.jsx
+++ /dev/null
@@ -1,195 +0,0 @@
-import { sortBy } from 'common/collections';
-
-import { useBackend } from '../backend';
-import { Box, Button, Icon, Section, Table } from '../components';
-import { COLORS } from '../constants';
-import { Window } from '../layouts';
-
-const HEALTH_COLOR_BY_LEVEL = [
- '#17d568',
- '#c4cf2d',
- '#e67e22',
- '#ed5100',
- '#e74c3c',
- '#801308',
-];
-
-const STAT_LIVING = 0;
-const STAT_DEAD = 4;
-
-const jobIsHead = (jobId) => jobId % 10 === 0;
-
-const jobToColor = (jobId) => {
- if (jobId === 0) {
- return COLORS.department.captain;
- }
- if (jobId >= 10 && jobId < 20) {
- return COLORS.department.security;
- }
- if (jobId >= 20 && jobId < 30) {
- return COLORS.department.medbay;
- }
- if (jobId >= 30 && jobId < 40) {
- return COLORS.department.science;
- }
- if (jobId >= 40 && jobId < 50) {
- return COLORS.department.engineering;
- }
- if (jobId >= 50 && jobId < 60) {
- return COLORS.department.cargo;
- }
- if (jobId >= 60 && jobId < 200) {
- return COLORS.department.service;
- }
- if (jobId >= 200 && jobId < 230) {
- return COLORS.department.centcom;
- }
- return COLORS.department.other;
-};
-
-const statToIcon = (life_status) => {
- switch (life_status) {
- case STAT_LIVING:
- return 'heart';
- case STAT_DEAD:
- return 'skull';
- }
- return 'heartbeat';
-};
-
-const healthToAttribute = (oxy, tox, burn, brute, attributeList) => {
- const healthSum = oxy + tox + burn + brute;
- const level = Math.min(Math.max(Math.ceil(healthSum / 25), 0), 5);
- return attributeList[level];
-};
-
-const HealthStat = (props) => {
- const { type, value } = props;
- return (
-
- {value}
-
- );
-};
-
-export const CrewConsole = () => {
- return (
-
-
-
-
-
- );
-};
-
-const CrewTable = (props) => {
- const { act, data } = useBackend();
- const sensors = sortBy(data.sensors ?? [], (s) => s.ijob);
- return (
-
-
- Name
-
-
- Vitals
-
-
- Position
-
- {!!data.link_allowed && (
-
- Tracking
-
- )}
-
- {sensors.map((sensor) => (
-
- ))}
-
- );
-};
-
-const CrewTableEntry = (props) => {
- const { act, data } = useBackend();
- const { link_allowed } = data;
- const { sensor_data } = props;
- const {
- name,
- assignment,
- ijob,
- life_status,
- oxydam,
- toxdam,
- burndam,
- brutedam,
- area,
- can_track,
- } = sensor_data;
-
- return (
-
-
- {name}
- {assignment !== undefined ? ` (${assignment})` : ''}
-
-
- {oxydam !== undefined ? (
-
- ) : life_status !== STAT_DEAD ? (
-
- ) : (
-
- )}
-
-
- {oxydam !== undefined ? (
-
-
- {'/'}
-
- {'/'}
-
- {'/'}
-
-
- ) : life_status !== STAT_DEAD ? (
- 'Alive'
- ) : (
- 'Dead'
- )}
-
-
- {area !== undefined ? (
- area
- ) : (
-
- )}
-
- {!!link_allowed && (
-
-
- )}
-
- );
-};
diff --git a/tgui/packages/tgui/interfaces/CrewConsole.tsx b/tgui/packages/tgui/interfaces/CrewConsole.tsx
new file mode 100644
index 00000000000..aa4f272f248
--- /dev/null
+++ b/tgui/packages/tgui/interfaces/CrewConsole.tsx
@@ -0,0 +1,307 @@
+import { BooleanLike } from 'common/react';
+import { createSearch } from 'common/string';
+import { useState } from 'react';
+
+import { useBackend } from '../backend';
+import { Box, Button, Icon, Input, Section, Table } from '../components';
+import { COLORS } from '../constants';
+import { Window } from '../layouts';
+
+const HEALTH_COLOR_BY_LEVEL = [
+ '#17d568',
+ '#c4cf2d',
+ '#e67e22',
+ '#ed5100',
+ '#e74c3c',
+ '#801308',
+];
+
+const SORT_NAMES = {
+ ijob: 'Job',
+ name: 'Name',
+ area: 'Position',
+ health: 'Vitals',
+};
+
+const STAT_LIVING = 0;
+const STAT_DEAD = 4;
+
+const SORT_OPTIONS = ['ijob', 'name', 'area', 'health'];
+
+const jobIsHead = (jobId: number) => jobId % 10 === 0;
+
+const jobToColor = (jobId: number) => {
+ if (jobId === 0) {
+ return COLORS.department.captain;
+ }
+ if (jobId >= 10 && jobId < 20) {
+ return COLORS.department.security;
+ }
+ if (jobId >= 20 && jobId < 30) {
+ return COLORS.department.medbay;
+ }
+ if (jobId >= 30 && jobId < 40) {
+ return COLORS.department.science;
+ }
+ if (jobId >= 40 && jobId < 50) {
+ return COLORS.department.engineering;
+ }
+ if (jobId >= 50 && jobId < 60) {
+ return COLORS.department.cargo;
+ }
+ if (jobId >= 60 && jobId < 200) {
+ return COLORS.department.service;
+ }
+ if (jobId >= 200 && jobId < 230) {
+ return COLORS.department.centcom;
+ }
+ return COLORS.department.other;
+};
+
+const statToIcon = (life_status: number) => {
+ switch (life_status) {
+ case STAT_LIVING:
+ return 'heart';
+ case STAT_DEAD:
+ return 'skull';
+ }
+ return 'heartbeat';
+};
+
+const healthSort = (a: CrewSensor, b: CrewSensor) => {
+ if (a.life_status < b.life_status) return -1;
+ if (a.life_status > b.life_status) return 1;
+ if (a.health > b.health) return -1;
+ if (a.health < b.health) return 1;
+ return 0;
+};
+
+const areaSort = (a: CrewSensor, b: CrewSensor) => {
+ a.area ??= '~';
+ b.area ??= '~';
+ if (a.area < b.area) return -1;
+ if (a.area > b.area) return 1;
+ return 0;
+};
+
+const healthToAttribute = (
+ oxy: number,
+ tox: number,
+ burn: number,
+ brute: number,
+ attributeList: string[],
+) => {
+ const healthSum = oxy + tox + burn + brute;
+ const level = Math.min(Math.max(Math.ceil(healthSum / 25), 0), 5);
+ return attributeList[level];
+};
+
+type HealthStatProps = {
+ type: string;
+ value: number;
+};
+
+const HealthStat = (props: HealthStatProps) => {
+ const { type, value } = props;
+ return (
+
+ {value}
+
+ );
+};
+
+export const CrewConsole = () => {
+ return (
+
+
+
+
+
+ );
+};
+
+type CrewSensor = {
+ name: string;
+ assignment: string | undefined;
+ ijob: number;
+ life_status: number;
+ oxydam: number;
+ toxdam: number;
+ burndam: number;
+ brutedam: number;
+ area: string | undefined;
+ health: number;
+ can_track: BooleanLike;
+ ref: string;
+};
+
+type CrewConsoleData = {
+ sensors: CrewSensor[];
+ link_allowed: BooleanLike;
+};
+
+const CrewTable = () => {
+ const { data } = useBackend();
+ const { sensors } = data;
+
+ const [sortAsc, setSortAsc] = useState(true);
+ const [searchQuery, setSearchQuery] = useState('');
+ const [sortBy, setSortBy] = useState(SORT_OPTIONS[0]);
+
+ const cycleSortBy = () => {
+ let idx = SORT_OPTIONS.indexOf(sortBy) + 1;
+ if (idx === SORT_OPTIONS.length) idx = 0;
+ setSortBy(SORT_OPTIONS[idx]);
+ };
+
+ const nameSearch = createSearch(searchQuery, (crew: CrewSensor) => crew.name);
+
+ const sorted = sensors.filter(nameSearch).sort((a, b) => {
+ switch (sortBy) {
+ case 'name':
+ return sortAsc ? +(a.name > b.name) : +(b.name > a.name);
+ case 'ijob':
+ return sortAsc ? a.ijob - b.ijob : b.ijob - a.ijob;
+ case 'health':
+ return sortAsc ? healthSort(a, b) : healthSort(b, a);
+ case 'area':
+ return sortAsc ? areaSort(a, b) : areaSort(b, a);
+ default:
+ return 0;
+ }
+ });
+
+ return (
+
+ );
+};
+
+type CrewTableEntryProps = {
+ sensor_data: CrewSensor;
+};
+
+const CrewTableEntry = (props: CrewTableEntryProps) => {
+ const { act, data } = useBackend();
+ const { link_allowed } = data;
+ const { sensor_data } = props;
+ const {
+ name,
+ assignment,
+ ijob,
+ life_status,
+ oxydam,
+ toxdam,
+ burndam,
+ brutedam,
+ area,
+ can_track,
+ } = sensor_data;
+
+ return (
+
+
+ {name}
+ {assignment !== undefined ? ` (${assignment})` : ''}
+
+
+ {oxydam !== undefined ? (
+
+ ) : life_status !== STAT_DEAD ? (
+
+ ) : (
+
+ )}
+
+
+ {oxydam !== undefined ? (
+
+
+ {'/'}
+
+ {'/'}
+
+ {'/'}
+
+
+ ) : life_status !== STAT_DEAD ? (
+ 'Alive'
+ ) : (
+ 'Dead'
+ )}
+
+
+ {area !== '~' && area !== undefined ? (
+ area
+ ) : (
+
+ )}
+
+ {!!link_allowed && (
+
+
+
+ )}
+
+ );
+};
diff --git a/tgui/packages/tgui/interfaces/CrewConsoleSkyrat.jsx b/tgui/packages/tgui/interfaces/CrewConsoleSkyrat.jsx
index 6768138a5fe..2818836f733 100644
--- a/tgui/packages/tgui/interfaces/CrewConsoleSkyrat.jsx
+++ b/tgui/packages/tgui/interfaces/CrewConsoleSkyrat.jsx
@@ -88,7 +88,7 @@ export const CrewConsoleSkyrat = () => {
const CrewTable = (props) => {
const { act, data } = useBackend();
- const sensors = sortBy((s) => s.ijob)(data.sensors ?? []);
+ const sensors = sortBy(data.sensors ?? [], (s) => s.ijob);
return (
diff --git a/tgui/packages/tgui/interfaces/DeathmatchLobby.tsx b/tgui/packages/tgui/interfaces/DeathmatchLobby.tsx
index 457c909b2ca..12dad26bc71 100644
--- a/tgui/packages/tgui/interfaces/DeathmatchLobby.tsx
+++ b/tgui/packages/tgui/interfaces/DeathmatchLobby.tsx
@@ -6,228 +6,315 @@ import {
Button,
Divider,
Dropdown,
- Flex,
Icon,
+ LabeledList,
Modal,
+ NoticeBox,
Section,
+ Stack,
Table,
+ Tooltip,
} from '../components';
import { ButtonCheckbox } from '../components/Button';
import { Window } from '../layouts';
-type PlayerLike = {
- [key: string]: {
- host: number;
- ready: BooleanLike;
- };
+type Player = Record;
+
+type PlayerInfo = {
+ host: number;
+ ready: BooleanLike;
};
type Modifier = {
- name: string;
desc: string;
modpath: string;
- selected: BooleanLike;
- selectable: BooleanLike;
- player_selected: BooleanLike;
+ name: string;
player_selectable: BooleanLike;
+ player_selected: BooleanLike;
+ selectable: BooleanLike;
+ selected: BooleanLike;
+};
+
+type Map = {
+ desc: string;
+ max_players: number;
+ min_players: number;
+ name: string;
+ time: number;
};
type Data = {
- self: string;
- host: BooleanLike;
+ active_mods: string;
admin: BooleanLike;
- playing: BooleanLike;
+ host: BooleanLike;
+ loadoutdesc: string;
loadouts: string[];
+ map: Map;
maps: string[];
- map: {
- name: string;
- desc: string;
- time: number;
- min_players: number;
- max_players: number;
- };
mod_menu_open: BooleanLike;
modifiers: Modifier[];
- active_mods: string;
- loadoutdesc: string;
- players: PlayerLike[];
- observers: PlayerLike[];
+ observers: Player[];
+ players: Player[];
+ playing: BooleanLike;
+ self: string;
};
-export const DeathmatchLobby = (props) => {
+export function DeathmatchLobby(props) {
const { act, data } = useBackend();
- const { modifiers = [] } = data;
+ const { admin, observers = [], self, players } = data;
+
+ const allReady = Object.keys(players).every(
+ (player) => players[player].ready,
+ );
+
return (
-
-
-
-
-
-
- Name
- Loadout
- Ready
-
- {Object.keys(data.players).map((player) => (
-
-
- {!!data.players[player].host && }
-
-
- {(!(
- (data.host && !data.players[player].host) ||
- data.admin
- ) && {player}) || (
-
- act('host', {
- id: player,
- func: value,
- })
- }
- />
- )}
-
-
-
- act('change_loadout', {
- player: player,
- loadout: value,
- })
- }
- />
-
-
- act('ready')}
- />
-
-
- ))}
- {Object.keys(data.observers).map((observer) => (
-
-
- {(!!data.observers[observer].host && (
-
- )) || }
-
-
- {(!(
- (data.host && !data.observers[observer].host) ||
- data.admin
- ) && {observer}) || (
-
- act('host', {
- id: observer,
- func: value,
- })
- }
- />
- )}
-
- Observing
-
- ))}
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
-
- {(!!data.host && (
-
- act('host', {
- func: 'change_map',
- map: value,
- })
- }
- />
- )) || {data.map.name}}
-
-
- {data.map.desc}
-
-
- Maximum Play Time: {`${data.map.time / 600}min`}
-
- Min players: {data.map.min_players}
-
- Max players: {data.map.max_players}
-
- Current players: {Object.keys(data.players).length}
-
-
- {data.active_mods}
- {(!!data.admin || !!data.host) && (
- <>
-
+
+
+ {!!admin && (
+
+ )}
+
+
+
+
+
+
-
-
-
);
-};
+}
+
+function PlayerColumn(props) {
+ const { act, data } = useBackend();
+ const {
+ admin,
+ host,
+ loadouts = [],
+ observers = [],
+ players = [],
+ self,
+ } = data;
+
+ const allReady = Object.keys(players).every(
+ (player) => players[player].ready,
+ );
+
+ return (
+ 30}>
+
+
+
+ Name
+ Loadout
+
+
+
+
+
+
+ {Object.keys(players).map((player) => {
+ const fullAccess = (!!host && !!players[player].host) || !admin;
+
+ return (
+
+
+ {!!players[player].host && }
+
+
+ {!fullAccess ? (
+ {player}
+ ) : (
+
+ act('host', {
+ id: player,
+ func: value,
+ })
+ }
+ />
+ )}
+
+
+
+ act('change_loadout', {
+ player: player,
+ loadout: value,
+ })
+ }
+ />
+
+
+ act('ready')}
+ />
+
+
+ );
+ })}
+ {Object.keys(observers).map((observer) => {
+ const fullAccess = (!!host && !!players[observer].host) || admin;
+
+ return (
+
+
+ {(!!observers[observer].host && ) || (
+
+ )}
+
+
+ {!fullAccess ? (
+ {observer}
+ ) : (
+
+ act('host', {
+ id: observer,
+ func: value,
+ })
+ }
+ />
+ )}
+
+ Observing
+
+ );
+ })}
+
+
+ );
+}
+
+function HostControls(props) {
+ const { act, data } = useBackend();
+ const {
+ active_mods = [],
+ admin,
+ host,
+ loadoutdesc,
+ map,
+ maps = [],
+ players = [],
+ playing,
+ } = data;
+
+ return (
+
+ {!host ? (
+ {map.name}
+ ) : (
+
+ act('host', {
+ func: 'change_map',
+ map: value,
+ })
+ }
+ />
+ )}
+
+ {map.desc}
+
+
+
+ {`${map.time / 600}min`}
+
+
+ {map.min_players}
+
+
+ {map.max_players}
+
+
+ {Object.keys(players).length}
+
+
+
+
+ {active_mods}
+
+ {(!!admin || !!host) && (
+ <>
+
+
+
+ )}
+
+
+ Loadout Description
+
+
+ {loadoutdesc}
+ {!!playing && (
+ <>
+
+
+ The game is currently in progress, or loading.
+
+
+ )}
+
+ );
+}
const ModSelector = (props) => {
const { act, data } = useBackend();
@@ -235,21 +322,18 @@ const ModSelector = (props) => {
if (!mod_menu_open || !(host || admin)) {
return null;
}
+
return (
-
diff --git a/tgui/packages/tgui/interfaces/DeathmatchPanel.jsx b/tgui/packages/tgui/interfaces/DeathmatchPanel.jsx
deleted file mode 100644
index 8ac2ff5f76d..00000000000
--- a/tgui/packages/tgui/interfaces/DeathmatchPanel.jsx
+++ /dev/null
@@ -1,95 +0,0 @@
-import { useBackend } from '../backend';
-import {
- Button,
- Dropdown,
- Flex,
- NoticeBox,
- Section,
- Stack,
- Table,
-} from '../components';
-import { Window } from '../layouts';
-
-export const DeathmatchPanel = (props, context) => {
- const { act, data } = useBackend(context);
- const playing = data.playing || '';
- return (
-
-
-
- If you play, you can still possibly be returned to your body (No
- Guarantees)!
-
-
-
-
- Host
- Map
- Players
-
- {data.lobbies.map((lobby) => (
-
-
- {(!data.admin && lobby.name) || (
-
- act('admin', {
- id: lobby.name,
- func: value,
- })
- }
- />
- )}
-
- {lobby.map}
-
- {lobby.players}/{lobby.max_players}
-
-
- {(!lobby.playing && (
- <>
-
-
- ))}
-
-
-
-
- );
-};
diff --git a/tgui/packages/tgui/interfaces/DeathmatchPanel.tsx b/tgui/packages/tgui/interfaces/DeathmatchPanel.tsx
new file mode 100644
index 00000000000..252a6e51231
--- /dev/null
+++ b/tgui/packages/tgui/interfaces/DeathmatchPanel.tsx
@@ -0,0 +1,162 @@
+import { BooleanLike } from 'common/react';
+
+import { useBackend } from '../backend';
+import {
+ Button,
+ Dropdown,
+ Icon,
+ NoticeBox,
+ Section,
+ Stack,
+ Table,
+ Tooltip,
+} from '../components';
+import { Window } from '../layouts';
+
+type Lobby = {
+ name: string;
+ players: number;
+ max_players: number;
+ map: string;
+ playing: BooleanLike;
+};
+
+type Data = {
+ hosting: BooleanLike;
+ admin: BooleanLike;
+ playing: string;
+ lobbies: Lobby[];
+};
+
+export function DeathmatchPanel(props) {
+ const { act, data } = useBackend();
+ const { hosting } = data;
+
+ return (
+
+
+
+
+
+ If you play, you can still possibly be returned to your body (No
+ Guarantees)!
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
+
+function LobbyPane(props) {
+ const { data } = useBackend();
+ const { lobbies = [] } = data;
+
+ return (
+
+
+
+ Host
+ Map
+
+
+
+
+
+
+
+
+
+
+ {lobbies.length === 0 && (
+
+
+
+ No lobbies found. Start one!
+
+
+
+ )}
+
+ {lobbies.map((lobby, index) => (
+
+ ))}
+
+
+ );
+}
+
+function LobbyDisplay(props) {
+ const { act, data } = useBackend();
+ const { admin, playing, hosting } = data;
+ const { lobby } = props;
+
+ const isActive = (!!hosting || !!playing) && playing !== lobby.name;
+
+ return (
+
+
+ {!admin ? (
+ lobby.name
+ ) : (
+
+ act('admin', {
+ id: lobby.name,
+ func: value,
+ })
+ }
+ />
+ )}
+
+ {lobby.map}
+
+ {lobby.players}/{lobby.max_players}
+
+
+ {!lobby.playing ? (
+ <>
+
+
+
+ );
+}
diff --git a/tgui/packages/tgui/interfaces/IntegratedCircuit/ComponentMenu.jsx b/tgui/packages/tgui/interfaces/IntegratedCircuit/ComponentMenu.jsx
index 9b91ef348fa..e243ef365b0 100644
--- a/tgui/packages/tgui/interfaces/IntegratedCircuit/ComponentMenu.jsx
+++ b/tgui/packages/tgui/interfaces/IntegratedCircuit/ComponentMenu.jsx
@@ -120,7 +120,8 @@ export class ComponentMenu extends Component {
currentLimit: DEFAULT_COMPONENT_MENU_LIMIT,
})
}
- displayText={`Category: ${selectedTab}`}
+ selected={selectedTab}
+ placeholder="Category"
color="transparent"
className="IntegratedCircuit__BlueBorder"
/>
diff --git a/tgui/packages/tgui/interfaces/IntegratedCircuit/FundamentalTypes.jsx b/tgui/packages/tgui/interfaces/IntegratedCircuit/FundamentalTypes.jsx
index 2ea8ce922aa..65d0814d8ce 100644
--- a/tgui/packages/tgui/interfaces/IntegratedCircuit/FundamentalTypes.jsx
+++ b/tgui/packages/tgui/interfaces/IntegratedCircuit/FundamentalTypes.jsx
@@ -88,7 +88,7 @@ export const FUNDAMENTAL_DATA_TYPES = {
color={'transparent'}
options={data}
onSelected={setValue}
- displayText={value}
+ selected={value}
menuWidth={large ? '200px' : undefined}
/>
);
diff --git a/tgui/packages/tgui/interfaces/IntegratedCircuit/VariableMenu.jsx b/tgui/packages/tgui/interfaces/IntegratedCircuit/VariableMenu.jsx
index 955e45da41b..45e7e90d737 100644
--- a/tgui/packages/tgui/interfaces/IntegratedCircuit/VariableMenu.jsx
+++ b/tgui/packages/tgui/interfaces/IntegratedCircuit/VariableMenu.jsx
@@ -1,4 +1,5 @@
import { shallowDiffers } from 'common/react';
+import { multiline } from 'common/string';
import { Component } from 'react';
import {
@@ -15,7 +16,6 @@ import {
VARIABLE_LIST,
VARIABLE_NOT_A_LIST,
} from './constants';
-import { multiline } from 'common/string';
export class VariableMenu extends Component {
constructor(props) {
@@ -145,7 +145,7 @@ export class VariableMenu extends Component {
{
over
mb={1.7}
width="100%"
- displayText={bookName}
+ selected={bookName}
options={inventory.map((book) => book.title)}
value={bookName}
onSelected={(e) => setBookName(e)}
diff --git a/tgui/packages/tgui/interfaces/ListInputModal.tsx b/tgui/packages/tgui/interfaces/ListInputWindow/ListInputModal.tsx
similarity index 57%
rename from tgui/packages/tgui/interfaces/ListInputModal.tsx
rename to tgui/packages/tgui/interfaces/ListInputWindow/ListInputModal.tsx
index 8695ac842f7..a56363f2310 100644
--- a/tgui/packages/tgui/interfaces/ListInputModal.tsx
+++ b/tgui/packages/tgui/interfaces/ListInputWindow/ListInputModal.tsx
@@ -7,35 +7,26 @@ import {
KEY_ESCAPE,
KEY_UP,
KEY_Z,
-} from '../../common/keycodes';
-import { useBackend } from '../backend';
-import { Autofocus, Button, Input, Section, Stack } from '../components';
-import { Window } from '../layouts';
-import { InputButtons } from './common/InputButtons';
-import { Loader } from './common/Loader';
+} from '../../../common/keycodes';
+import { useBackend } from '../../backend';
+import { Autofocus, Button, Input, Section, Stack } from '../../components';
+import { InputButtons } from '../common/InputButtons';
-type ListInputData = {
- init_value: string;
+type ListInputModalProps = {
items: string[];
- large_buttons: boolean;
+ default_item: string;
message: string;
- timeout: number;
- title: string;
+ on_selected: (entry: string) => void;
+ on_cancel: () => void;
};
-export const ListInputModal = (props) => {
- const { act, data } = useBackend();
- const {
- items = [],
- message = '',
- init_value,
- large_buttons,
- timeout,
- title,
- } = data;
- const [selected, setSelected] = useState(items.indexOf(init_value));
+export const ListInputModal = (props: ListInputModalProps) => {
+ const { items = [], default_item, message, on_selected, on_cancel } = props;
+
+ const [selected, setSelected] = useState(items.indexOf(default_item));
const [searchBarVisible, setSearchBarVisible] = useState(items.length > 9);
const [searchQuery, setSearchQuery] = useState('');
+
// User presses up or down on keyboard
// Simulates clicking an item
const onArrowKey = (key: number) => {
@@ -99,82 +90,77 @@ export const ListInputModal = (props) => {
const filteredItems = items.filter((item) =>
item?.toLowerCase().includes(searchQuery.toLowerCase()),
);
- // Dynamically changes the window height based on the message.
- const windowHeight =
- 325 + Math.ceil(message.length / 3) + (large_buttons ? 5 : 0);
// Grabs the cursor when no search bar is visible.
if (!searchBarVisible) {
setTimeout(() => document!.getElementById(selected.toString())?.focus(), 1);
}
return (
-
- {timeout && }
- {
- const keyCode = window.event ? event.which : event.keyCode;
- if (keyCode === KEY_DOWN || keyCode === KEY_UP) {
- event.preventDefault();
- onArrowKey(keyCode);
+ {
+ const keyCode = window.event ? event.which : event.keyCode;
+ if (keyCode === KEY_DOWN || keyCode === KEY_UP) {
+ event.preventDefault();
+ onArrowKey(keyCode);
+ }
+ if (keyCode === KEY_ENTER) {
+ event.preventDefault();
+ on_selected(filteredItems[selected]);
+ }
+ if (!searchBarVisible && keyCode >= KEY_A && keyCode <= KEY_Z) {
+ event.preventDefault();
+ onLetterSearch(keyCode);
+ }
+ if (keyCode === KEY_ESCAPE) {
+ event.preventDefault();
+ on_cancel();
+ }
+ }}
+ buttons={
+
-
+ tooltipPosition="left"
+ onClick={() => onSearchBarToggle()}
+ />
+ }
+ className="ListInput__Section"
+ fill
+ title={message}
+ >
+
+
+
+
+ {searchBarVisible && (
+
+ )}
+
+ on_selected(filteredItems[selected])}
+ on_cancel={on_cancel}
+ />
+
+
+
);
};
@@ -183,7 +169,7 @@ export const ListInputModal = (props) => {
* If a search query is provided, filters the items.
*/
const ListDisplay = (props) => {
- const { act } = useBackend();
+ const { act } = useBackend();
const { filteredItems, onClick, onFocusSearch, searchBarVisible, selected } =
props;
@@ -227,7 +213,7 @@ const ListDisplay = (props) => {
* Closing the bar defaults input to an empty string.
*/
const SearchBar = (props) => {
- const { act } = useBackend();
+ const { act } = useBackend();
const { filteredItems, onSearch, searchQuery, selected } = props;
return (
diff --git a/tgui/packages/tgui/interfaces/ListInputWindow/index.tsx b/tgui/packages/tgui/interfaces/ListInputWindow/index.tsx
new file mode 100644
index 00000000000..29355ff5d21
--- /dev/null
+++ b/tgui/packages/tgui/interfaces/ListInputWindow/index.tsx
@@ -0,0 +1,44 @@
+import { useBackend } from '../../backend';
+import { Window } from '../../layouts';
+import { Loader } from '../common/Loader';
+import { ListInputModal } from './ListInputModal';
+
+type ListInputData = {
+ init_value: string;
+ items: string[];
+ large_buttons: boolean;
+ message: string;
+ timeout: number;
+ title: string;
+};
+
+export const ListInputWindow = () => {
+ const { act, data } = useBackend();
+ const {
+ items = [],
+ message = '',
+ init_value,
+ large_buttons,
+ timeout,
+ title,
+ } = data;
+
+ // Dynamically changes the window height based on the message.
+ const windowHeight =
+ 325 + Math.ceil(message.length / 3) + (large_buttons ? 5 : 0);
+
+ return (
+
+ {timeout && }
+
+ act('submit', { entry })}
+ on_cancel={() => act('cancel')}
+ />
+
+
+ );
+};
diff --git a/tgui/packages/tgui/interfaces/LootPanel/IconDisplay.tsx b/tgui/packages/tgui/interfaces/LootPanel/IconDisplay.tsx
index 889d50de884..11e52b2ac55 100644
--- a/tgui/packages/tgui/interfaces/LootPanel/IconDisplay.tsx
+++ b/tgui/packages/tgui/interfaces/LootPanel/IconDisplay.tsx
@@ -10,15 +10,23 @@ export function IconDisplay(props: Props) {
item: { icon, icon_state },
} = props;
- const fallback = ;
+ const fallback = ;
if (!icon) {
return fallback;
}
if (icon_state) {
- return ;
+ return (
+
+ );
}
- return ;
+ return ;
}
diff --git a/tgui/packages/tgui/interfaces/LootPanel/LootBox.tsx b/tgui/packages/tgui/interfaces/LootPanel/LootBox.tsx
index 22b0c8532dd..613db1ead53 100644
--- a/tgui/packages/tgui/interfaces/LootPanel/LootBox.tsx
+++ b/tgui/packages/tgui/interfaces/LootPanel/LootBox.tsx
@@ -1,4 +1,4 @@
-import { capitalizeAll } from 'common/string';
+import { capitalizeAll, capitalizeFirst } from 'common/string';
import { useBackend } from '../../backend';
import { Tooltip } from '../../components';
@@ -25,28 +25,35 @@ export function LootBox(props: Props) {
item = props.item;
}
+ const name = !item.name
+ ? '???'
+ : capitalizeFirst(item.name.split(' ')[0]).slice(0, 5);
+
return (
-
- act('grab', {
- ctrl: event.ctrlKey,
- ref: item.ref,
- shift: event.shiftKey,
- })
- }
- onContextMenu={(event) => {
- event.preventDefault();
- act('grab', {
- middle: true,
- ref: item.ref,
- shift: true,
- });
- }}
- >
-
- {amount > 1 &&
{amount}
}
+
+
+ act('grab', {
+ ctrl: event.ctrlKey,
+ ref: item.ref,
+ shift: event.shiftKey,
+ })
+ }
+ onContextMenu={(event) => {
+ event.preventDefault();
+ act('grab', {
+ middle: true,
+ ref: item.ref,
+ shift: true,
+ });
+ }}
+ >
+
+ {amount > 1 &&
{amount}
}
+
+
{name}
);
diff --git a/tgui/packages/tgui/interfaces/LootPanel/index.tsx b/tgui/packages/tgui/interfaces/LootPanel/index.tsx
index bd64113f302..bc6330b1806 100644
--- a/tgui/packages/tgui/interfaces/LootPanel/index.tsx
+++ b/tgui/packages/tgui/interfaces/LootPanel/index.tsx
@@ -24,7 +24,7 @@ export function LootPanel(props) {
const total = contents.length ? contents.length - 1 : 0;
return (
-
+
{
if (event.key === KEY.Escape) {
diff --git a/tgui/packages/tgui/interfaces/MODsuit.tsx b/tgui/packages/tgui/interfaces/MODsuit.tsx
index 9d7fab88bd9..f78bd4dd1d8 100644
--- a/tgui/packages/tgui/interfaces/MODsuit.tsx
+++ b/tgui/packages/tgui/interfaces/MODsuit.tsx
@@ -226,7 +226,7 @@ const ConfigureListEntry = (props) => {
const { act } = useBackend();
return (
act('configure', {
diff --git a/tgui/packages/tgui/interfaces/MineBot.tsx b/tgui/packages/tgui/interfaces/MineBot.tsx
index 4a3087cf8d6..9118562cdd0 100644
--- a/tgui/packages/tgui/interfaces/MineBot.tsx
+++ b/tgui/packages/tgui/interfaces/MineBot.tsx
@@ -97,7 +97,7 @@ export const MineBot = (props) => {
{
return possible_color.color_name;
})}
diff --git a/tgui/packages/tgui/interfaces/NavBeacon.tsx b/tgui/packages/tgui/interfaces/NavBeacon.tsx
index 5194fe42c1c..6cc5036c87f 100644
--- a/tgui/packages/tgui/interfaces/NavBeacon.tsx
+++ b/tgui/packages/tgui/interfaces/NavBeacon.tsx
@@ -20,11 +20,11 @@ export type Data = {
};
export type NavBeaconControl = {
- location: String;
+ location: string;
patrol_enabled: BooleanLike;
- patrol_next: String;
+ patrol_next: string;
delivery_enabled: BooleanLike;
- delivery_direction: String;
+ delivery_direction: string;
cover_locked: BooleanLike;
};
@@ -107,7 +107,7 @@ export const NavBeaconControlSection = (props: DisabledProps) => {
act('set_delivery_direction', {
direction: value,
diff --git a/tgui/packages/tgui/interfaces/NtosCard.tsx b/tgui/packages/tgui/interfaces/NtosCard.tsx
index 7c3991a487c..5997aa0e91c 100644
--- a/tgui/packages/tgui/interfaces/NtosCard.tsx
+++ b/tgui/packages/tgui/interfaces/NtosCard.tsx
@@ -240,7 +240,7 @@ const TemplateDropdown = (props) => {
{
return templates[path];
})}
@@ -249,6 +249,7 @@ const TemplateDropdown = (props) => {
name: sel,
})
}
+ selected="None"
/>
diff --git a/tgui/packages/tgui/interfaces/NtosRoboControl.jsx b/tgui/packages/tgui/interfaces/NtosRoboControl.jsx
index 20c70220d36..9b55c90a456 100644
--- a/tgui/packages/tgui/interfaces/NtosRoboControl.jsx
+++ b/tgui/packages/tgui/interfaces/NtosRoboControl.jsx
@@ -2,7 +2,6 @@ import { useBackend, useSharedState } from '../backend';
import {
Box,
Button,
- Dropdown,
LabeledList,
ProgressBar,
Section,
@@ -71,19 +70,22 @@ export const NtosRoboControl = (props) => {
+ Drone Pings
+ {dronepingtypes.map((ping_type) => (
+
+ ))}
{drones?.map((drone) => (
diff --git a/tgui/packages/tgui/interfaces/NtosScipaper.jsx b/tgui/packages/tgui/interfaces/NtosScipaper.jsx
index 3866ccab24c..2af2cd12f43 100644
--- a/tgui/packages/tgui/interfaces/NtosScipaper.jsx
+++ b/tgui/packages/tgui/interfaces/NtosScipaper.jsx
@@ -93,7 +93,7 @@ const PaperPublishing = (props) => {
act('select_file', {
selected_uid: fileList[ordfile_name],
@@ -117,7 +117,7 @@ const PaperPublishing = (props) => {
act('select_experiment', {
selected_expath: expList[experiment_name],
@@ -141,7 +141,7 @@ const PaperPublishing = (props) => {
String(number))}
- displayText={tier ? String(tier) : '-'}
+ selected={String(tier)}
onSelected={(new_tier) =>
act('select_tier', {
selected_tier: Number(new_tier),
@@ -165,7 +165,7 @@ const PaperPublishing = (props) => {
act('select_partner', {
selected_partner: allowedPartners[new_partner],
diff --git a/tgui/packages/tgui/interfaces/NtosVirtualPet.tsx b/tgui/packages/tgui/interfaces/NtosVirtualPet.tsx
index 7b61f2b566e..1894aa703d6 100644
--- a/tgui/packages/tgui/interfaces/NtosVirtualPet.tsx
+++ b/tgui/packages/tgui/interfaces/NtosVirtualPet.tsx
@@ -268,7 +268,7 @@ const PetTricks = (props) => {
UpdateSequence(index, selected)}
/>
@@ -354,7 +354,7 @@ const Customization = (props) => {
{
return selected_hat.hat_name;
})}
@@ -369,7 +369,7 @@ const Customization = (props) => {
{
return possible_color.color_name;
})}
diff --git a/tgui/packages/tgui/interfaces/PersonalCrafting.tsx b/tgui/packages/tgui/interfaces/PersonalCrafting.tsx
index 96ec4b818b3..d45890d271a 100644
--- a/tgui/packages/tgui/interfaces/PersonalCrafting.tsx
+++ b/tgui/packages/tgui/interfaces/PersonalCrafting.tsx
@@ -701,13 +701,33 @@ const RecipeContentCompact = ({ item, craftable, busy, mode }) => {
? 'utensils'
: 'hammer'
}
- iconSpin={busy ? 1 : 0}
+ iconSpin={!!busy}
onClick={() =>
act('make', {
recipe: item.ref,
})
}
/>
+ {!!item.mass_craftable && (
+
-
+
{item.name}
@@ -823,46 +843,77 @@ const RecipeContent = ({ item, craftable, busy, mode, diet }) => {
)}
-
- {!item.non_craftable && (
-
diff --git a/tgui/packages/tgui/interfaces/PlaneMasterDebug.tsx b/tgui/packages/tgui/interfaces/PlaneMasterDebug.tsx
index 1a623bb2079..c85cdec2d13 100644
--- a/tgui/packages/tgui/interfaces/PlaneMasterDebug.tsx
+++ b/tgui/packages/tgui/interfaces/PlaneMasterDebug.tsx
@@ -885,7 +885,6 @@ const GroupDropdown = (props) => {
act('set_group', {
target_group: value,
diff --git a/tgui/packages/tgui/interfaces/PreferencesMenu/CharacterPreferenceWindow.tsx b/tgui/packages/tgui/interfaces/PreferencesMenu/CharacterPreferenceWindow.tsx
index 1e109a56838..a366ee881fd 100644
--- a/tgui/packages/tgui/interfaces/PreferencesMenu/CharacterPreferenceWindow.tsx
+++ b/tgui/packages/tgui/interfaces/PreferencesMenu/CharacterPreferenceWindow.tsx
@@ -43,7 +43,7 @@ const CharacterProfiles = (props: {
({
value: slot,
diff --git a/tgui/packages/tgui/interfaces/PreferencesMenu/JobsPage.tsx b/tgui/packages/tgui/interfaces/PreferencesMenu/JobsPage.tsx
index 10c962a8302..49e9163467b 100644
--- a/tgui/packages/tgui/interfaces/PreferencesMenu/JobsPage.tsx
+++ b/tgui/packages/tgui/interfaces/PreferencesMenu/JobsPage.tsx
@@ -274,7 +274,7 @@ const JobRow = (props: { className?: string; job: Job; name: string }) => {
act('set_job_title', { job: name, new_title: value })
}
@@ -374,18 +374,17 @@ const JoblessRoleDropdown = (props) => {
},
];
+ const selection = options?.find(
+ (option) => option.value === selected,
+ )!.displayText;
+
return (
- {options.find((option) => option.value === selected)!.displayText}
-
- }
/>
);
diff --git a/tgui/packages/tgui/interfaces/PreferencesMenu/LimbsPage.tsx b/tgui/packages/tgui/interfaces/PreferencesMenu/LimbsPage.tsx
index 78a85ab3449..727294ed49b 100644
--- a/tgui/packages/tgui/interfaces/PreferencesMenu/LimbsPage.tsx
+++ b/tgui/packages/tgui/interfaces/PreferencesMenu/LimbsPage.tsx
@@ -45,7 +45,7 @@ export const Markings = (props) => {
act('change_marking', {
limb_slot: props.limb.slot,
@@ -141,7 +141,7 @@ export const AugmentationPage = (props) => {
{
// Since the costs are positive,
// it's added and not substracted
@@ -164,7 +164,7 @@ export const AugmentationPage = (props) => {
act('set_limb_aug_style', {
limb_slot: props.limb.slot,
@@ -195,7 +195,7 @@ export const OrganPage = (props) => {
{
// Since the costs are positive, it's added and not substracted
if (balance + props.organ.costs[value] > 0) {
@@ -226,7 +226,8 @@ export const LimbsPage = (props) => {
act('set_preset', { preset: value })}
/>