{buttons}
)}
- {open && {leftSlot}
) ||
(!!icon && (
-
))}
{children}
diff --git a/tgui/packages/tgui/interfaces/AICard.jsx b/tgui/packages/tgui/interfaces/AICard.tsx
similarity index 86%
rename from tgui/packages/tgui/interfaces/AICard.jsx
rename to tgui/packages/tgui/interfaces/AICard.tsx
index 1c2125e5d7..2d4dc59ad7 100644
--- a/tgui/packages/tgui/interfaces/AICard.jsx
+++ b/tgui/packages/tgui/interfaces/AICard.tsx
@@ -1,11 +1,26 @@
+import { BooleanLike } from 'common/react';
+
import { useBackend } from '../backend';
import { Box, Button, LabeledList, ProgressBar, Section } from '../components';
import { Window } from '../layouts';
+type Data = {
+ name: string;
+ has_ai: BooleanLike;
+ integrity: number;
+ backup_capacitor: number;
+ flushing: BooleanLike;
+ has_laws: BooleanLike;
+ laws: string[];
+ wireless: BooleanLike;
+ radio: BooleanLike;
+};
+
export const AICard = (props) => {
- const { act, data } = useBackend();
+ const { act, data } = useBackend();
const {
+ name,
has_ai,
integrity,
backup_capacitor,
@@ -16,7 +31,7 @@ export const AICard = (props) => {
radio,
} = data;
- if (has_ai === 0) {
+ if (!has_ai) {
return (
{name}
- No occupant detected. -
+ No occupant detected. +
{
- const { act, data } = useBackend();
+ const { act, data } = useBackend();
const {
connected,
can_relabel,
@@ -66,7 +79,7 @@ export const Canister = (props) => {
minValue={minReleasePressure}
maxValue={maxReleasePressure}
stepPixelSize={1}
- onDrag={(e, value) =>
+ onDrag={(e, value: number) =>
act('pressure', {
pressure: value,
})
diff --git a/tgui/packages/tgui/interfaces/Canvas.jsx b/tgui/packages/tgui/interfaces/Canvas.tsx
similarity index 69%
rename from tgui/packages/tgui/interfaces/Canvas.jsx
rename to tgui/packages/tgui/interfaces/Canvas.tsx
index 4d5d7015ee..d54eb7e66c 100644
--- a/tgui/packages/tgui/interfaces/Canvas.jsx
+++ b/tgui/packages/tgui/interfaces/Canvas.tsx
@@ -1,4 +1,5 @@
-import { Component, createRef } from 'react';
+import { BooleanLike } from 'common/react';
+import { Component, createRef, RefObject } from 'react';
import { useBackend } from '../backend';
import { Box, Button } from '../components';
@@ -6,7 +7,17 @@ import { Window } from '../layouts';
const PX_PER_UNIT = 24;
-class PaintCanvas extends Component {
+type PaintCanvasProps = Partial<{
+ onCanvasClick: (x: number, y: number) => void;
+ value: string[][];
+ dotsize: number;
+ res: number;
+}>;
+
+class PaintCanvas extends Component {
+ canvasRef: RefObject;
+ onCVClick: (x: number, y: number) => void;
+
constructor(props) {
super(props);
this.canvasRef = createRef();
@@ -21,16 +32,20 @@ class PaintCanvas extends Component {
this.drawCanvas(this.props);
}
- drawCanvas(propSource) {
- const ctx = this.canvasRef.current.getContext('2d');
+ drawCanvas(propSource: PaintCanvasProps) {
+ const canvas = this.canvasRef.current!;
+ const ctx = canvas.getContext('2d')!;
const grid = propSource.value;
+ if (!grid) {
+ return;
+ }
const x_size = grid.length;
if (!x_size) {
return;
}
const y_size = grid[0].length;
- const x_scale = Math.round(this.canvasRef.current.width / x_size);
- const y_scale = Math.round(this.canvasRef.current.height / y_size);
+ const x_scale = Math.round(canvas.width / x_size);
+ const y_scale = Math.round(canvas.height / y_size);
ctx.save();
ctx.scale(x_scale, y_scale);
for (let x = 0; x < grid.length; x++) {
@@ -44,14 +59,19 @@ class PaintCanvas extends Component {
ctx.restore();
}
- clickwrapper(event) {
- const x_size = this.props.value.length;
+ clickwrapper(event: React.MouseEvent) {
+ const value = this.props.value;
+ if (!value) {
+ return;
+ }
+ const x_size = value.length;
if (!x_size) {
return;
}
const y_size = this.props.value[0].length;
- const x_scale = this.canvasRef.current.width / x_size;
- const y_scale = this.canvasRef.current.height / y_size;
+ const canvas = this.canvasRef.current!;
+ const x_scale = canvas.width / x_size;
+ const y_scale = canvas.height / y_size;
const x = Math.floor(event.nativeEvent.offsetX / x_scale) + 1;
const y = Math.floor(event.nativeEvent.offsetY / y_scale) + 1;
this.onCVClick(x, y);
@@ -80,8 +100,15 @@ const getImageSize = (value) => {
return [width, height];
};
+type Data = {
+ grid: string[][];
+ name: string;
+ finalized: BooleanLike;
+};
+
export const Canvas = (props) => {
- const { act, data } = useBackend();
+ const { act, data } = useBackend();
+
const dotsize = PX_PER_UNIT;
const [width, height] = getImageSize(data.grid);
return (
diff --git a/tgui/packages/tgui/interfaces/CasinoPrizeDispenser.jsx b/tgui/packages/tgui/interfaces/CasinoPrizeDispenser.tsx
similarity index 81%
rename from tgui/packages/tgui/interfaces/CasinoPrizeDispenser.jsx
rename to tgui/packages/tgui/interfaces/CasinoPrizeDispenser.tsx
index 8e03666a51..6c13f446db 100644
--- a/tgui/packages/tgui/interfaces/CasinoPrizeDispenser.jsx
+++ b/tgui/packages/tgui/interfaces/CasinoPrizeDispenser.tsx
@@ -13,26 +13,36 @@ import {
} from '../components';
import { Window } from '../layouts';
+type Data = {
+ items: Record;
+};
+
+type sortable = {
+ name: string;
+ affordable: number;
+ price: number;
+ restriction: string;
+};
+
const sortTypes = {
- Alphabetical: (a, b) => a.name > b.name,
- 'By availability': (a, b) => -(a.affordable - b.affordable),
- 'By price': (a, b) => a.price - b.price,
+ Alphabetical: (a: sortable, b: sortable) => a.name > b.name,
+ 'By price': (a: sortable, b: sortable) => a.price - b.price,
};
export const CasinoPrizeDispenser = () => {
- const [searchText, setSearchText] = useState('');
- const [sortOrder, setSortOrder] = useState('Alphabetical');
- const [descending, setDescending] = useState(false);
+ const [searchText, setSearchText] = useState('');
+ const [sortOrder, setSortOrder] = useState('Alphabetical');
+ const [descending, setDescending] = useState(false);
- function handleSearchText(value) {
+ function handleSearchText(value: string) {
setSearchText(value);
}
- function handleSortOrder(value) {
+ function handleSortOrder(value: string) {
setSortOrder(value);
}
- function handleDescending(value) {
+ function handleDescending(value: boolean) {
setDescending(value);
}
@@ -52,9 +62,6 @@ export const CasinoPrizeDispenser = () => {
searchText={searchText}
sortOrder={sortOrder}
descending={descending}
- onSearchText={handleSearchText}
- onSortOrder={handleSortOrder}
- onDescending={handleDescending}
/>
@@ -98,19 +105,18 @@ const CasinoPrizeDispenserSearch = (props) => {
};
const CasinoPrizeDispenserItems = (props) => {
- const { act, data } = useBackend();
- const { points, items } = data;
+ const { act, data } = useBackend();
+ const { items } = data;
// Search thingies
const searcher = createSearch(props.searchText, (item) => {
return item[0];
});
let has_contents = false;
- let contents = Object.entries(items).map((kv, _i) => {
+ let contents = Object.entries(items).map((kv) => {
let items_in_cat = Object.entries(kv[1])
.filter(searcher)
.map((kv2) => {
- kv2[1].affordable = points >= kv2[1].price;
return kv2[1];
})
.sort(sortTypes[props.sortOrder]);
@@ -143,15 +149,19 @@ const CasinoPrizeDispenserItems = (props) => {
);
};
-const CasinoPrizeDispenserItemsCategory = (props) => {
- const { act, data } = useBackend();
+const CasinoPrizeDispenserItemsCategory = (props: {
+ key: string;
+ title: string;
+ items: sortable[];
+}) => {
+ const { act } = useBackend();
const { title, items, ...rest } = props;
return (
{items.map((item) => (
{
+const getTagColor = (tag: string) => {
switch (tag) {
case 'Unset':
return 'label';
@@ -23,19 +24,36 @@ const getTagColor = (tag) => {
}
};
+type Data = {
+ personalVisibility: BooleanLike;
+ personalTag: string;
+ personalErpTag: string;
+ directory: character[];
+};
+
+type character = {
+ name: string;
+ species: string;
+ ooc_notes: string;
+ tag: string;
+ erptag: string;
+ character_ad: string;
+ flavor_text: string;
+};
+
export const CharacterDirectory = (props) => {
- const { act, data } = useBackend();
+ const { act, data } = useBackend();
const { personalVisibility, personalTag, personalErpTag } = data;
- const [overlay, setOverlay] = useState(null);
- const [overwritePrefs, setOverwritePrefs] = useState(false);
+ const [overlay, setOverlay] = useState(null);
+ const [overwritePrefs, setOverwritePrefs] = useState(false);
- function handleOverlay(value) {
+ function handleOverlay(value: character | null) {
setOverlay(value);
}
return (
-
+
{(overlay && (
+
{props.overlay.species}
-
+
{props.overlay.tag}
-
+
{props.overlay.erptag}
-
-
+
+
{props.overlay.character_ad || 'Unset.'}
-
-
+
+
{props.overlay.ooc_notes || 'Unset.'}
-
-
+
+
{props.overlay.flavor_text || 'Unset.'}
@@ -150,17 +168,17 @@ const ViewCharacter = (props) => {
};
const CharacterDirectoryList = (props) => {
- const { act, data } = useBackend();
+ const { act, data } = useBackend();
const { directory } = data;
- const [sortId, setSortId] = useState('name');
- const [sortOrder, setSortOrder] = useState('name');
+ const [sortId, setSortId] = useState('name');
+ const [sortOrder, setSortOrder] = useState('name');
- function handleSortId(value) {
+ function handleSortId(value: string) {
setSortId(value);
}
- function handleSortOrder(value) {
+ function handleSortOrder(value: string) {
setSortOrder(value);
}
@@ -243,9 +261,14 @@ const CharacterDirectoryList = (props) => {
);
};
-const SortButton = (props) => {
- const { act, data } = useBackend();
-
+const SortButton = (props: {
+ id: string;
+ sortId: string;
+ sortOrder: string;
+ onSortId: Function;
+ onSortOrder: Function;
+ children: ReactNode | string;
+}) => {
const { id, children } = props;
// Hey, same keys mean same data~
diff --git a/tgui/packages/tgui/interfaces/CheckboxInput.tsx b/tgui/packages/tgui/interfaces/CheckboxInput.tsx
index 30ed63d08b..de6fe94eff 100644
--- a/tgui/packages/tgui/interfaces/CheckboxInput.tsx
+++ b/tgui/packages/tgui/interfaces/CheckboxInput.tsx
@@ -97,7 +97,7 @@ export const CheckboxInput = (props) => {
setSearchQuery(value)}
+ onInput={(e, value: string) => setSearchQuery(value)}
/>
diff --git a/tgui/packages/tgui/interfaces/ChemDispenser.jsx b/tgui/packages/tgui/interfaces/ChemDispenser.jsx
deleted file mode 100644
index 801fe33dd3..0000000000
--- a/tgui/packages/tgui/interfaces/ChemDispenser.jsx
+++ /dev/null
@@ -1,175 +0,0 @@
-import { useBackend } from '../backend';
-import { Box, Button, Flex, LabeledList, Section, Slider } from '../components';
-import { BeakerContents } from '../interfaces/common/BeakerContents';
-import { Window } from '../layouts';
-
-const dispenseAmounts = [5, 10, 20, 30, 40, 60];
-const removeAmounts = [1, 5, 10];
-
-export const ChemDispenser = (props) => {
- return (
-
-
-
-
- );
-};
-
-const ChemDispenserSettings = (properties) => {
- const { act, data } = useBackend();
- const { amount } = data;
- return (
-
-
-
- {dispenseAmounts.map((a, i) => (
-
- ))}
-
-
-
- act('amount', {
- amount: value,
- })
- }
- />
-
-
-
- );
-};
-
-const ChemDispenserChemicals = (properties) => {
- const { act, data } = useBackend();
- const { chemicals = [] } = data;
- const flexFillers = [];
- for (let i = 0; i < (chemicals.length + 1) % 3; i++) {
- flexFillers.push(true);
- }
- return (
-
-
- {chemicals.map((c, i) => (
-
-
-
- ))}
- {flexFillers.map((_, i) => (
-
-
- );
-};
-
-const ChemDispenserBeaker = (properties) => {
- const { act, data } = useBackend();
- const {
- isBeakerLoaded,
- beakerCurrentVolume,
- beakerMaxVolume,
- beakerContents = [],
- } = data;
- return (
-
- {!!isBeakerLoaded && (
-
- {beakerCurrentVolume} / {beakerMaxVolume} units
-
- )}
-
-
- }
- >
- (
- <>
-
- {removeAmounts.map((a, i) => (
-
- ))}
-
-
- )}
- />
-
- );
-};
diff --git a/tgui/packages/tgui/interfaces/ChemDispenser/ChemDispenserBeaker.tsx b/tgui/packages/tgui/interfaces/ChemDispenser/ChemDispenserBeaker.tsx
new file mode 100644
index 0000000000..b9946802ac
--- /dev/null
+++ b/tgui/packages/tgui/interfaces/ChemDispenser/ChemDispenserBeaker.tsx
@@ -0,0 +1,81 @@
+import { useBackend } from '../../backend';
+import { Box, Button, Section } from '../../components';
+import { BeakerContents } from '.././common/BeakerContents';
+import { removeAmounts } from './constants';
+import { Data } from './types';
+
+export const ChemDispenserBeaker = (props) => {
+ const { act, data } = useBackend();
+ const {
+ isBeakerLoaded,
+ beakerCurrentVolume,
+ beakerMaxVolume,
+ beakerContents = [],
+ } = data;
+ return (
+
+ {!!isBeakerLoaded && (
+
+ {beakerCurrentVolume} / {beakerMaxVolume} units
+
+ )}
+
+
+ }
+ >
+ (
+ <>
+
+ {removeAmounts.map((a, i) => (
+
+ ))}
+
+
+ )}
+ />
+
+ );
+};
diff --git a/tgui/packages/tgui/interfaces/ChemDispenser/ChemDispenserChemicals.tsx b/tgui/packages/tgui/interfaces/ChemDispenser/ChemDispenserChemicals.tsx
new file mode 100644
index 0000000000..06160da65f
--- /dev/null
+++ b/tgui/packages/tgui/interfaces/ChemDispenser/ChemDispenserChemicals.tsx
@@ -0,0 +1,41 @@
+import { useBackend } from '../../backend';
+import { Button, Flex, Section } from '../../components';
+import { Data } from './types';
+
+export const ChemDispenserChemicals = (props) => {
+ const { act, data } = useBackend();
+ const { chemicals = [] } = data;
+ const flexFillers: boolean[] = [];
+ for (let i = 0; i < (chemicals.length + 1) % 3; i++) {
+ flexFillers.push(true);
+ }
+ return (
+
+
+ {chemicals.map((c, i) => (
+
+
+
+ ))}
+ {flexFillers.map((_, i) => (
+
+
+ );
+};
diff --git a/tgui/packages/tgui/interfaces/ChemDispenser/ChemDispenserSettings.tsx b/tgui/packages/tgui/interfaces/ChemDispenser/ChemDispenserSettings.tsx
new file mode 100644
index 0000000000..2a55775822
--- /dev/null
+++ b/tgui/packages/tgui/interfaces/ChemDispenser/ChemDispenserSettings.tsx
@@ -0,0 +1,46 @@
+import { useBackend } from '../../backend';
+import { Button, LabeledList, Section, Slider } from '../../components';
+import { dispenseAmounts } from './constants';
+import { Data } from './types';
+
+export const ChemDispenserSettings = (props) => {
+ const { act, data } = useBackend();
+ const { amount } = data;
+ return (
+
+
+
+ {dispenseAmounts.map((a, i) => (
+
+ ))}
+
+
+
+ act('amount', {
+ amount: value,
+ })
+ }
+ />
+
+
+
+ );
+};
diff --git a/tgui/packages/tgui/interfaces/ChemDispenser/constants.ts b/tgui/packages/tgui/interfaces/ChemDispenser/constants.ts
new file mode 100644
index 0000000000..8555508f50
--- /dev/null
+++ b/tgui/packages/tgui/interfaces/ChemDispenser/constants.ts
@@ -0,0 +1,2 @@
+export const dispenseAmounts: number[] = [5, 10, 20, 30, 40, 60];
+export const removeAmounts: number[] = [1, 5, 10];
diff --git a/tgui/packages/tgui/interfaces/ChemDispenser/index.tsx b/tgui/packages/tgui/interfaces/ChemDispenser/index.tsx
new file mode 100644
index 0000000000..9e47296c17
--- /dev/null
+++ b/tgui/packages/tgui/interfaces/ChemDispenser/index.tsx
@@ -0,0 +1,16 @@
+import { Window } from '../../layouts';
+import { ChemDispenserBeaker } from './ChemDispenserBeaker';
+import { ChemDispenserChemicals } from './ChemDispenserChemicals';
+import { ChemDispenserSettings } from './ChemDispenserSettings';
+
+export const ChemDispenser = (props) => {
+ return (
+
+
+
+
+ );
+};
diff --git a/tgui/packages/tgui/interfaces/ChemDispenser/types.ts b/tgui/packages/tgui/interfaces/ChemDispenser/types.ts
new file mode 100644
index 0000000000..f558816663
--- /dev/null
+++ b/tgui/packages/tgui/interfaces/ChemDispenser/types.ts
@@ -0,0 +1,13 @@
+import { BooleanLike } from 'common/react';
+
+export type Data = {
+ amount: number;
+ isBeakerLoaded: BooleanLike;
+ glass: BooleanLike;
+ beakerContents: reagent[];
+ beakerCurrentVolume: number | null;
+ beakerMaxVolume: number | null;
+ chemicals: reagent[];
+};
+
+type reagent = { name: string; id: string; volume: number };
diff --git a/tgui/packages/tgui/interfaces/ChemMaster/ChemMasterAnalyzeModalBodyOverride.tsx b/tgui/packages/tgui/interfaces/ChemMaster/ChemMasterAnalyzeModalBodyOverride.tsx
new file mode 100644
index 0000000000..f51100d3e1
--- /dev/null
+++ b/tgui/packages/tgui/interfaces/ChemMaster/ChemMasterAnalyzeModalBodyOverride.tsx
@@ -0,0 +1,53 @@
+import { useBackend } from '../../backend';
+import { Box, Button, LabeledList, Section } from '../../components';
+import { Data, modalData } from './types';
+
+export const analyzeModalBodyOverride = (modal: modalData) => {
+ const { act, data } = useBackend();
+ const result = modal.args.analysis;
+ return (
+
+
+
+ {result.name}
+
+ {(result.desc || '').length > 0 ? result.desc : 'N/A'}
+
+ {result.blood_type && (
+ <>
+
+ {result.blood_type}
+
+
+ {result.blood_dna}
+
+
+ )}
+ {!data.condi && (
+
+ )}
+
+
+
+ );
+};
diff --git a/tgui/packages/tgui/interfaces/ChemMaster/ChemMasterBeaker.tsx b/tgui/packages/tgui/interfaces/ChemMaster/ChemMasterBeaker.tsx
new file mode 100644
index 0000000000..e42b4a3207
--- /dev/null
+++ b/tgui/packages/tgui/interfaces/ChemMaster/ChemMasterBeaker.tsx
@@ -0,0 +1,94 @@
+import { BooleanLike } from 'common/react';
+
+import { useBackend } from '../../backend';
+import { Box, Button, Section } from '../../components';
+import { BeakerContents } from '.././common/BeakerContents';
+import { modalOpen } from '.././common/ComplexModal';
+import { transferAmounts } from './constants';
+import { reagent } from './types';
+
+export const ChemMasterBeaker = (props: {
+ beaker: BooleanLike;
+ beakerReagents: reagent[];
+ bufferNonEmpty: BooleanLike;
+}) => {
+ const { act } = useBackend();
+ const { beaker, beakerReagents, bufferNonEmpty } = props;
+
+ let headerButton = bufferNonEmpty ? (
+ act('eject')}
+ >
+ Eject and Clear Buffer
+
+ ) : (
+
+ );
+
+ return (
+
+ {beaker ? (
+ (
+
+
+ {transferAmounts.map((am, j) => (
+
+ ))}
+
+
+
+ )}
+ />
+ ) : (
+ No beaker loaded.
+ )}
+
+ );
+};
diff --git a/tgui/packages/tgui/interfaces/ChemMaster/ChemMasterBuffer.tsx b/tgui/packages/tgui/interfaces/ChemMaster/ChemMasterBuffer.tsx
new file mode 100644
index 0000000000..3bd477b685
--- /dev/null
+++ b/tgui/packages/tgui/interfaces/ChemMaster/ChemMasterBuffer.tsx
@@ -0,0 +1,92 @@
+import { BooleanLike } from 'common/react';
+
+import { useBackend } from '../../backend';
+import { Box, Button, Section } from '../../components';
+import { BeakerContents } from '.././common/BeakerContents';
+import { modalOpen } from '.././common/ComplexModal';
+import { transferAmounts } from './constants';
+import { reagent } from './types';
+
+export const ChemMasterBuffer = (props: {
+ mode: BooleanLike;
+ bufferReagents: reagent[];
+}) => {
+ const { act } = useBackend();
+ const { mode, bufferReagents = [] } = props;
+ return (
+
+ Transferring to
+
+
+ }
+ >
+ {bufferReagents.length > 0 ? (
+ (
+
+
+ {transferAmounts.map((am, i) => (
+
+ ))}
+
+
+
+ )}
+ />
+ ) : (
+ Buffer is empty.
+ )}
+
+ );
+};
diff --git a/tgui/packages/tgui/interfaces/ChemMaster/ChemMasterCustomization.tsx b/tgui/packages/tgui/interfaces/ChemMaster/ChemMasterCustomization.tsx
new file mode 100644
index 0000000000..3e70da5f8e
--- /dev/null
+++ b/tgui/packages/tgui/interfaces/ChemMaster/ChemMasterCustomization.tsx
@@ -0,0 +1,55 @@
+import { BooleanLike } from 'common/react';
+
+import { useBackend } from '../../backend';
+import { Box, Button, Section } from '../../components';
+import { modalOpen } from '.././common/ComplexModal';
+
+export const ChemMasterCustomization = (props: {
+ loaded_pill_bottle: BooleanLike;
+ loaded_pill_bottle_name: string;
+ loaded_pill_bottle_contents_len: number;
+ loaded_pill_bottle_storage_slots: number;
+}) => {
+ const { act } = useBackend();
+
+ const {
+ loaded_pill_bottle,
+ loaded_pill_bottle_name,
+ loaded_pill_bottle_contents_len,
+ loaded_pill_bottle_storage_slots,
+ } = props;
+
+ if (!loaded_pill_bottle) {
+ return (
+
+ None loaded.
+
+ );
+ }
+
+ return (
+
+
+
+
+ );
+};
diff --git a/tgui/packages/tgui/interfaces/ChemMaster/ChemMasterProduction.tsx b/tgui/packages/tgui/interfaces/ChemMaster/ChemMasterProduction.tsx
new file mode 100644
index 0000000000..59f9619c64
--- /dev/null
+++ b/tgui/packages/tgui/interfaces/ChemMaster/ChemMasterProduction.tsx
@@ -0,0 +1,97 @@
+import { BooleanLike } from 'common/react';
+
+import { useBackend } from '../../backend';
+import { Button, Flex, Icon, Section } from '../../components';
+import { ChemMasterProductionChemical } from './ChemMasterProductionChemical';
+import { ChemMasterProductionCondiment } from './ChemMasterProductionCondiment';
+
+export const ChemMasterProduction = (props: {
+ bufferNonEmpty: boolean;
+ isCondiment: BooleanLike;
+ loaded_pill_bottle: BooleanLike;
+ loaded_pill_bottle_name: string;
+ loaded_pill_bottle_contents_len: number;
+ loaded_pill_bottle_storage_slots: number;
+ pillsprite: string;
+ bottlesprite: string;
+}) => {
+ const { act } = useBackend();
+
+ const {
+ bufferNonEmpty,
+ isCondiment,
+ loaded_pill_bottle,
+ loaded_pill_bottle_name,
+ loaded_pill_bottle_contents_len,
+ loaded_pill_bottle_storage_slots,
+ pillsprite,
+ bottlesprite,
+ } = props;
+
+ if (!bufferNonEmpty) {
+ return (
+ act('ejectp')}
+ >
+ {loaded_pill_bottle
+ ? loaded_pill_bottle_name +
+ ' (' +
+ loaded_pill_bottle_contents_len +
+ '/' +
+ loaded_pill_bottle_storage_slots +
+ ')'
+ : 'No pill bottle loaded'}
+
+ }
+ >
+
+
+
+ Buffer is empty. +
+
+
+ );
+ }
+
+ return (
+ act('ejectp')}
+ >
+ {loaded_pill_bottle
+ ? loaded_pill_bottle_name +
+ ' (' +
+ loaded_pill_bottle_contents_len +
+ '/' +
+ loaded_pill_bottle_storage_slots +
+ ')'
+ : 'No pill bottle loaded'}
+
+ }
+ >
+ {!isCondiment ? (
+
+ );
+};
diff --git a/tgui/packages/tgui/interfaces/ChemMaster/ChemMasterProductionChemical.tsx b/tgui/packages/tgui/interfaces/ChemMaster/ChemMasterProductionChemical.tsx
new file mode 100644
index 0000000000..3b7a4c2e13
--- /dev/null
+++ b/tgui/packages/tgui/interfaces/ChemMaster/ChemMasterProductionChemical.tsx
@@ -0,0 +1,111 @@
+import { classes } from '../../.././common/react';
+import { Box, Button, LabeledList } from '../../components';
+import { modalOpen } from '.././common/ComplexModal';
+
+export const ChemMasterProductionChemical = (props: {
+ pillsprite: string;
+ bottlesprite: string;
+}) => {
+ const { pillsprite, bottlesprite } = props;
+
+ return (
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+ +
+
+ );
+};
diff --git a/tgui/packages/tgui/interfaces/ChemMaster/ChemMasterProductionCondiment.tsx b/tgui/packages/tgui/interfaces/ChemMaster/ChemMasterProductionCondiment.tsx
new file mode 100644
index 0000000000..fd58ec8228
--- /dev/null
+++ b/tgui/packages/tgui/interfaces/ChemMaster/ChemMasterProductionCondiment.tsx
@@ -0,0 +1,26 @@
+import { useBackend } from '../../backend';
+import { Button } from '../../components';
+import { modalOpen } from '.././common/ComplexModal';
+
+export const ChemMasterProductionCondiment = (props) => {
+ const { act } = useBackend();
+ return (
+ <>
+
+
+ + + ); +}; diff --git a/tgui/packages/tgui/interfaces/ChemMaster/constants.ts b/tgui/packages/tgui/interfaces/ChemMaster/constants.ts new file mode 100644 index 0000000000..8fa1d18fa3 --- /dev/null +++ b/tgui/packages/tgui/interfaces/ChemMaster/constants.ts @@ -0,0 +1,8 @@ +export const transferAmounts: number[] = [1, 5, 10, 30, 60]; +export const bottleStyles: string[] = [ + 'bottle.png', + 'small_bottle.png', + 'wide_bottle.png', + 'round_bottle.png', + 'reagent_bottle.png', +]; diff --git a/tgui/packages/tgui/interfaces/ChemMaster/index.tsx b/tgui/packages/tgui/interfaces/ChemMaster/index.tsx new file mode 100644 index 0000000000..658ffc8f3c --- /dev/null +++ b/tgui/packages/tgui/interfaces/ChemMaster/index.tsx @@ -0,0 +1,65 @@ +import { useBackend } from '../../backend'; +import { Window } from '../../layouts'; +import { + ComplexModal, + modalRegisterBodyOverride, +} from '.././common/ComplexModal'; +import { analyzeModalBodyOverride } from './ChemMasterAnalyzeModalBodyOverride'; +import { ChemMasterBeaker } from './ChemMasterBeaker'; +import { ChemMasterBuffer } from './ChemMasterBuffer'; +import { ChemMasterProduction } from './ChemMasterProduction'; +import { Data } from './types'; + +export const ChemMaster = (props) => { + const { data } = useBackend(); + const { + condi, + beaker, + beaker_reagents = [], + buffer_reagents = [], + mode, + loaded_pill_bottle, + loaded_pill_bottle_name, + loaded_pill_bottle_contents_len, + loaded_pill_bottle_storage_slots, + pillsprite, + bottlesprite, + } = data; + return ( +
+
+ 0}
+ />
+ 0}
+ loaded_pill_bottle={loaded_pill_bottle}
+ loaded_pill_bottle_name={loaded_pill_bottle_name || ''}
+ loaded_pill_bottle_contents_len={loaded_pill_bottle_contents_len || 0}
+ loaded_pill_bottle_storage_slots={
+ loaded_pill_bottle_storage_slots || 0
+ }
+ pillsprite={pillsprite}
+ bottlesprite={bottlesprite}
+ />
+ {/* Vorestation Remove
+
+
+ );
+};
+
+modalRegisterBodyOverride('analyze', analyzeModalBodyOverride);
diff --git a/tgui/packages/tgui/interfaces/ChemMaster/types.ts b/tgui/packages/tgui/interfaces/ChemMaster/types.ts
new file mode 100644
index 0000000000..a5b6dcdca0
--- /dev/null
+++ b/tgui/packages/tgui/interfaces/ChemMaster/types.ts
@@ -0,0 +1,40 @@
+import { BooleanLike } from 'common/react';
+
+export type Data = {
+ condi: BooleanLike;
+ loaded_pill_bottle: BooleanLike;
+ loaded_pill_bottle_name: string | undefined;
+ loaded_pill_bottle_contents_len: number | undefined;
+ loaded_pill_bottle_storage_slots: number | undefined;
+ beaker: BooleanLike;
+ beaker_reagents: reagent[] | undefined;
+ buffer_reagents: reagent[] | undefined;
+ pillsprite: string;
+ bottlesprite: string;
+ mode: BooleanLike;
+ printing: BooleanLike;
+ modal: modalData;
+};
+
+export type reagent = {
+ name: string;
+ volume: number;
+ description: string;
+ id: string;
+};
+
+export type modalData = {
+ id: string;
+ text: string;
+ args: {
+ analysis: {
+ idx: string;
+ name: string;
+ desc: string;
+ blood_type: string | null;
+ blood_dna: string | null;
+ };
+ beaker: number;
+ };
+ type: string;
+};
diff --git a/tgui/packages/tgui/interfaces/ClawMachine.jsx b/tgui/packages/tgui/interfaces/ClawMachine.tsx
similarity index 91%
rename from tgui/packages/tgui/interfaces/ClawMachine.jsx
rename to tgui/packages/tgui/interfaces/ClawMachine.tsx
index a25e9e0395..3b43c19352 100644
--- a/tgui/packages/tgui/interfaces/ClawMachine.jsx
+++ b/tgui/packages/tgui/interfaces/ClawMachine.tsx
@@ -2,8 +2,15 @@ import { useBackend } from '../backend';
import { Box, Button, LabeledList, ProgressBar } from '../components';
import { Window } from '../layouts';
+type Data = {
+ wintick: number;
+ instructions: string;
+ gameStatus: string;
+ winscreen: string;
+};
+
export const ClawMachine = (props) => {
- const { act, data } = useBackend();
+ const { act, data } = useBackend();
const { wintick, instructions, gameStatus, winscreen } = data;
let body;
@@ -39,7 +46,7 @@ export const ClawMachine = (props) => {
average: [1, 7],
good: [8, Infinity],
}}
- value={data.wintick}
+ value={wintick}
minValue={0}
maxValue={10}
/>
diff --git a/tgui/packages/tgui/interfaces/Cleanbot.jsx b/tgui/packages/tgui/interfaces/Cleanbot.tsx
similarity index 91%
rename from tgui/packages/tgui/interfaces/Cleanbot.jsx
rename to tgui/packages/tgui/interfaces/Cleanbot.tsx
index 09632130d3..e66624a11e 100644
--- a/tgui/packages/tgui/interfaces/Cleanbot.jsx
+++ b/tgui/packages/tgui/interfaces/Cleanbot.tsx
@@ -1,9 +1,27 @@
+import { BooleanLike } from 'common/react';
+
import { useBackend } from '../backend';
import { Box, Button, LabeledList, Section } from '../components';
import { Window } from '../layouts';
+type Data = {
+ on: BooleanLike;
+ open: BooleanLike;
+ locked: BooleanLike;
+ patrol: BooleanLike;
+ vocal: BooleanLike;
+ wet_floors: BooleanLike;
+ spray_blood: BooleanLike;
+ version: string;
+ blood: BooleanLike;
+ rgbpanel: BooleanLike;
+ red_switch: BooleanLike;
+ green_switch: BooleanLike;
+ blue_switch: BooleanLike;
+};
+
export const Cleanbot = (props) => {
- const { act, data } = useBackend();
+ const { act, data } = useBackend();
const {
on,
@@ -11,7 +29,6 @@ export const Cleanbot = (props) => {
locked,
version,
blood,
- patrol,
vocal,
wet_floors,
spray_blood,
diff --git a/tgui/packages/tgui/interfaces/CloningConsole.jsx b/tgui/packages/tgui/interfaces/CloningConsole.jsx
deleted file mode 100644
index 2e6d93e784..0000000000
--- a/tgui/packages/tgui/interfaces/CloningConsole.jsx
+++ /dev/null
@@ -1,458 +0,0 @@
-import { toFixed } from 'common/math';
-
-import { resolveAsset } from '../assets';
-import { useBackend } from '../backend';
-import {
- Box,
- Button,
- Flex,
- Icon,
- LabeledList,
- NoticeBox,
- ProgressBar,
- Section,
- Tabs,
-} from '../components';
-import { COLORS } from '../constants';
-import {
- ComplexModal,
- modalRegisterBodyOverride,
-} from '../interfaces/common/ComplexModal';
-import { Window } from '../layouts';
-
-const viewRecordModalBodyOverride = (modal) => {
- const { act, data } = useBackend();
- const { activerecord, realname, health, unidentity, strucenzymes } =
- modal.args;
- const damages = health.split(' - ');
- return (
-
-
- {realname}
-
- {damages.length > 1 ? (
- <>
-
- {damages[0]}
-
- |
-
- {damages[2]}
-
- |
-
- {damages[3]}
-
- |
-
- {damages[1]}
-
-
- ) : (
- Unknown
- )}
-
-
- {unidentity}
-
-
- {strucenzymes}
-
-
-
- act('disk', {
- option: 'load',
- })
- }
- >
- Import
-
-
-
-
-
-
-
-
-
-
-
- );
-};
-
-export const CloningConsole = (props) => {
- const { act, data } = useBackend();
- const { menu } = data;
- modalRegisterBodyOverride('view_rec', viewRecordModalBodyOverride);
- return (
-
-
-
-
-
-
- );
-};
-
-const CloningConsoleNavigation = (props) => {
- const { act, data } = useBackend();
- const { menu } = data;
- return (
-
-
- act('menu', {
- num: 1,
- })
- }
- >
- Main
-
-
- act('menu', {
- num: 2,
- })
- }
- >
- Records
-
-
- );
-};
-
-const CloningConsoleBody = (props) => {
- const { data } = useBackend();
- const { menu } = data;
- let body;
- if (menu === 1) {
- body =
-
- Scanner Lock:
-
-
-
-
- }
- >
-
-
- {loading ? (
-
-
- ) : (
- {scantemp.text}
- )}
-
- {!!can_brainscan && (
-
-
-
- )}
-
-
-
-
- {numberofpods ? (
- pods.map((pod, i) => {
- let podAction;
- if (pod.status === 'cloning') {
- podAction = (
-
- {toFixed(pod.progress) + '%'}
-
- );
- } else if (pod.status === 'mess') {
- podAction = (
-
- ERROR
-
- );
- } else {
- podAction = (
-
- );
- }
-
- return (
-
- 
- Pod #{i + 1}
- = 150 ? 'good' : 'bad'} inline>
- = 150 ? 'circle' : 'circle-o'} />
-
- {pod.biomass}
-
- {podAction}
-
- );
- })
- ) : (
- No pods detected. Unable to clone.
- )}
-
-
- );
-};
-
-const CloningConsoleRecords = (props) => {
- const { act, data } = useBackend();
- const { records } = data;
- if (!records.length) {
- return (
-
-
-
- No records found. -
-
- );
- }
- return (
-
- {records.map((record, i) => (
-
- ))}
-
- );
-};
-
-const CloningConsoleTemp = (props) => {
- const { act, data } = useBackend();
- const { temp } = data;
- if (!temp || !temp.text || temp.text.length <= 0) {
- return;
- }
-
- const tempProp = { [temp.style]: true };
- return (
-
-
- {temp.text}
-
-
- );
-};
-
-const CloningConsoleStatus = (props) => {
- const { act, data } = useBackend();
- const { scanner, numberofpods, autoallowed, autoprocess, disk } = data;
- return (
-
- {!!autoallowed && (
- <>
-
- Auto-processing:
-
-
-
- )}
-
-
- }
- >
-
-
- {scanner ? (
- Connected
- ) : (
- Not connected!
- )}
-
-
- {numberofpods ? (
- {numberofpods} connected
- ) : (
- None connected!
- )}
-
-
-
- );
-};
diff --git a/tgui/packages/tgui/interfaces/CloningConsole/CloningConsoleBodyOverride.tsx b/tgui/packages/tgui/interfaces/CloningConsole/CloningConsoleBodyOverride.tsx
new file mode 100644
index 0000000000..fb6a649152
--- /dev/null
+++ b/tgui/packages/tgui/interfaces/CloningConsole/CloningConsoleBodyOverride.tsx
@@ -0,0 +1,115 @@
+import { useBackend } from '../../backend';
+import { Box, Button, LabeledList, Section } from '../../components';
+import { COLORS } from '../../constants';
+import { Data, modalData } from './types';
+
+export const viewRecordModalBodyOverride = (modal: modalData) => {
+ const { act, data } = useBackend();
+
+ const { disk, podready } = data;
+
+ const { activerecord, realname, health, unidentity, strucenzymes } =
+ modal.args;
+ const damages = health.split(' - ');
+ return (
+
+
+ {realname}
+
+ {damages.length > 1 ? (
+ <>
+
+ {damages[0]}
+
+ |
+
+ {damages[2]}
+
+ |
+
+ {damages[3]}
+
+ |
+
+ {damages[1]}
+
+
+ ) : (
+ Unknown
+ )}
+
+
+ {unidentity}
+
+
+ {strucenzymes}
+
+
+
+ act('disk', {
+ option: 'load',
+ })
+ }
+ >
+ Import
+
+
+
+
+
+
+
+
+
+
+
+ );
+};
diff --git a/tgui/packages/tgui/interfaces/CloningConsole/CloningConsoleNavigation.tsx b/tgui/packages/tgui/interfaces/CloningConsole/CloningConsoleNavigation.tsx
new file mode 100644
index 0000000000..d06866ca50
--- /dev/null
+++ b/tgui/packages/tgui/interfaces/CloningConsole/CloningConsoleNavigation.tsx
@@ -0,0 +1,34 @@
+import { useBackend } from '../../backend';
+import { Tabs } from '../../components';
+import { Data } from './types';
+
+export const CloningConsoleNavigation = (props) => {
+ const { act, data } = useBackend();
+ const { menu } = data;
+ return (
+
+
+ act('menu', {
+ num: 1,
+ })
+ }
+ >
+ Main
+
+
+ act('menu', {
+ num: 2,
+ })
+ }
+ >
+ Records
+
+
+ );
+};
diff --git a/tgui/packages/tgui/interfaces/CloningConsole/CloningConsoleStatus.tsx b/tgui/packages/tgui/interfaces/CloningConsole/CloningConsoleStatus.tsx
new file mode 100644
index 0000000000..4034d3fed6
--- /dev/null
+++ b/tgui/packages/tgui/interfaces/CloningConsole/CloningConsoleStatus.tsx
@@ -0,0 +1,92 @@
+import { useBackend } from '../../backend';
+import { Box, Button, LabeledList, NoticeBox, Section } from '../../components';
+import { Data } from './types';
+
+export const CloningConsoleTemp = (props) => {
+ const { act, data } = useBackend();
+ const { temp } = data;
+ if (!temp || !temp.text || temp.text.length <= 0) {
+ return;
+ }
+
+ const tempProp = { [temp.style]: true };
+ return (
+
+
+ {temp.text}
+
+
+ );
+};
+
+export const CloningConsoleStatus = (props) => {
+ const { act, data } = useBackend();
+ const { scanner, numberofpods, autoallowed, autoprocess, disk } = data;
+ return (
+
+ {!!autoallowed && (
+ <>
+
+ Auto-processing:
+
+
+
+ )}
+
+
+ }
+ >
+
+
+ {scanner ? (
+ Connected
+ ) : (
+ Not connected!
+ )}
+
+
+ {numberofpods ? (
+ {numberofpods} connected
+ ) : (
+ None connected!
+ )}
+
+
+
+ );
+};
diff --git a/tgui/packages/tgui/interfaces/CloningConsole/CloningConsoleTabs.tsx b/tgui/packages/tgui/interfaces/CloningConsole/CloningConsoleTabs.tsx
new file mode 100644
index 0000000000..4399d2a3b5
--- /dev/null
+++ b/tgui/packages/tgui/interfaces/CloningConsole/CloningConsoleTabs.tsx
@@ -0,0 +1,192 @@
+import { toFixed } from 'common/math';
+
+import { resolveAsset } from '../../assets';
+import { useBackend } from '../../backend';
+import {
+ Box,
+ Button,
+ Flex,
+ Icon,
+ Image,
+ LabeledList,
+ ProgressBar,
+ Section,
+} from '../../components';
+import { Data } from './types';
+
+export const CloningConsoleMain = (props) => {
+ const { act, data } = useBackend();
+ const {
+ loading,
+ scantemp,
+ occupant,
+ locked,
+ can_brainscan,
+ scan_mode,
+ numberofpods,
+ pods,
+ selected_pod,
+ } = data;
+ const isLocked = locked && !!occupant;
+ return (
+ <>
+
+
+ Scanner Lock:
+
+
+
+
+ }
+ >
+
+
+ {loading ? (
+
+
+ ) : (
+ {scantemp.text}
+ )}
+
+ {!!can_brainscan && (
+
+
+
+ )}
+
+
+
+
+ {numberofpods ? (
+ pods.map((pod, i) => {
+ let podAction;
+ if (pod.status === 'cloning') {
+ podAction = (
+
+ {toFixed(pod.progress) + '%'}
+
+ );
+ } else if (pod.status === 'mess') {
+ podAction = (
+
+ ERROR
+
+ );
+ } else {
+ podAction = (
+
+ );
+ }
+
+ return (
+
+ Pod #{i + 1}
+ = 150 ? 'good' : 'bad'} inline>
+ = 150 ? 'circle' : 'circle-o'} />
+
+ {pod.biomass}
+
+ {podAction}
+
+ );
+ })
+ ) : (
+ No pods detected. Unable to clone.
+ )}
+
+
+ );
+};
+
+export const CloningConsoleRecords = (props) => {
+ const { act, data } = useBackend();
+ const { records } = data;
+ if (!records.length) {
+ return (
+
+
+
+ No records found. +
+
+ );
+ }
+ return (
+
+ {records.map((record, i) => (
+
+ ))}
+
+ );
+};
diff --git a/tgui/packages/tgui/interfaces/CloningConsole/index.tsx b/tgui/packages/tgui/interfaces/CloningConsole/index.tsx
new file mode 100644
index 0000000000..7957732fd7
--- /dev/null
+++ b/tgui/packages/tgui/interfaces/CloningConsole/index.tsx
@@ -0,0 +1,44 @@
+import { useBackend } from '../../backend';
+import { Box, Section } from '../../components';
+import {
+ ComplexModal,
+ modalRegisterBodyOverride,
+} from '../../interfaces/common/ComplexModal';
+import { Window } from '../../layouts';
+import { viewRecordModalBodyOverride } from './CloningConsoleBodyOverride';
+import { CloningConsoleNavigation } from './CloningConsoleNavigation';
+import {
+ CloningConsoleStatus,
+ CloningConsoleTemp,
+} from './CloningConsoleStatus';
+import {
+ CloningConsoleMain,
+ CloningConsoleRecords,
+} from './CloningConsoleTabs';
+import { Data } from './types';
+
+export const CloningConsole = (props) => {
+ const { data } = useBackend();
+
+ const { menu } = data;
+
+ const tab: React.JSX.Element[] = [];
+
+ tab[1] =
+
+
+ {tab[menu] || Error }
+
+
+
+ );
+};
diff --git a/tgui/packages/tgui/interfaces/CloningConsole/types.ts b/tgui/packages/tgui/interfaces/CloningConsole/types.ts
new file mode 100644
index 0000000000..5621fd1055
--- /dev/null
+++ b/tgui/packages/tgui/interfaces/CloningConsole/types.ts
@@ -0,0 +1,41 @@
+import { BooleanLike } from 'common/react';
+
+export type Data = {
+ menu: number;
+ scanner: string;
+ numberofpods: number | null;
+ pods: {
+ pod: string;
+ name: string;
+ biomass: number;
+ status: string;
+ progress: number;
+ }[];
+ loading: BooleanLike;
+ autoprocess: BooleanLike;
+ can_brainscan: BooleanLike;
+ scan_mode: BooleanLike;
+ autoallowed: BooleanLike;
+ occupant: string;
+ locked: BooleanLike;
+ temp: { text: string; style: string };
+ scantemp: { text: string; color: string };
+ disk: string | null;
+ selected_pod: string;
+ records: { record: string; realname: string }[];
+ podready: BooleanLike;
+ modal: modalData;
+};
+
+export type modalData = {
+ id: string;
+ text: string;
+ args: {
+ activerecord: string;
+ realname: string;
+ health: string;
+ unidentity: string;
+ strucenzymes: string;
+ };
+ modal_type: string;
+};
diff --git a/tgui/packages/tgui/interfaces/ColorMate.jsx b/tgui/packages/tgui/interfaces/ColorMate.jsx
deleted file mode 100644
index 8e1f0814ee..0000000000
--- a/tgui/packages/tgui/interfaces/ColorMate.jsx
+++ /dev/null
@@ -1,418 +0,0 @@
-import { toFixed } from 'common/math';
-
-import { useBackend } from '../backend';
-import {
- Button,
- Icon,
- NoticeBox,
- NumberInput,
- Section,
- Slider,
- Table,
- Tabs,
-} from '../components';
-import { Window } from '../layouts';
-
-export const ColorMate = (props, context) => {
- const { act, data } = useBackend(context);
- const { activemode, temp } = data;
- const item = data.item || [];
- return (
-
-
-
- {temp ? {temp} : null}
- {Object.keys(item).length ? (
- <>
-
-
-
-
- act('switch_modes', {
- mode: 1,
- })
- }
- >
- Tint coloring (Simple)
-
-
- act('switch_modes', {
- mode: 2,
- })
- }
- >
- HSV coloring (Normal)
-
-
- act('switch_modes', {
- mode: 3,
- })
- }
- >
- Matrix coloring (Advanced)
-
-
- Coloring: {item.name}
-
-
-
- ) : (
- No item inserted.
- )}
-
-
-
- );
-};
-
-export const ColorMateTint = (props, context) => {
- const { act, data } = useBackend(context);
- return (
-
- );
-};
-
-export const ColorMateMatrix = (props, context) => {
- const { act, data } = useBackend(context);
- const matrixcolors = data.matrixcolors || [];
- return (
-
-
- );
-};
-
-export const ColorMateHSV = (props, context) => {
- const { act, data } = useBackend(context);
- const { buildhue, buildsat, buildval } = data;
- return (
-
-
- );
-};
diff --git a/tgui/packages/tgui/interfaces/ColorMate/ColorMateColor.tsx b/tgui/packages/tgui/interfaces/ColorMate/ColorMateColor.tsx
new file mode 100644
index 0000000000..a5efd4024a
--- /dev/null
+++ b/tgui/packages/tgui/interfaces/ColorMate/ColorMateColor.tsx
@@ -0,0 +1,76 @@
+import { toFixed } from 'common/math';
+
+import { useBackend } from '../../backend';
+import { Button, Slider, Table } from '../../components';
+import { Data } from './types';
+
+export const ColorMateTint = (props) => {
+ const { act } = useBackend();
+
+ return (
+
+ );
+};
+
+export const ColorMateHSV = (props) => {
+ const { act, data } = useBackend();
+
+ const { buildhue, buildsat, buildval } = data;
+ return (
+
+
+ );
+};
diff --git a/tgui/packages/tgui/interfaces/ColorMate/ColorMateMatrix.tsx b/tgui/packages/tgui/interfaces/ColorMate/ColorMateMatrix.tsx
new file mode 100644
index 0000000000..c9c0c5fc0d
--- /dev/null
+++ b/tgui/packages/tgui/interfaces/ColorMate/ColorMateMatrix.tsx
@@ -0,0 +1,235 @@
+import { toFixed } from 'common/math';
+
+import { useBackend } from '../../backend';
+import { Icon, NumberInput, Table } from '../../components';
+import { Data } from './types';
+
+export const ColorMateMatrix = (props) => {
+ const { act, data } = useBackend();
+
+ const { matrixcolors } = data;
+
+ return (
+
+
+ );
+};
diff --git a/tgui/packages/tgui/interfaces/ColorMate/index.tsx b/tgui/packages/tgui/interfaces/ColorMate/index.tsx
new file mode 100644
index 0000000000..8bbe62e705
--- /dev/null
+++ b/tgui/packages/tgui/interfaces/ColorMate/index.tsx
@@ -0,0 +1,120 @@
+import { useBackend } from '../../backend';
+import {
+ Box,
+ Button,
+ Image,
+ NoticeBox,
+ Section,
+ Table,
+ Tabs,
+} from '../../components';
+import { Window } from '../../layouts';
+import { ColorMateHSV, ColorMateTint } from './ColorMateColor';
+import { ColorMateMatrix } from './ColorMateMatrix';
+import { Data } from './types';
+
+export const ColorMate = (props) => {
+ const { act, data } = useBackend();
+
+ const { activemode, temp, item } = data;
+
+ const tab: React.JSX.Element[] = [];
+
+ tab[1] =
+
+
+ {temp ? {temp} : null}
+ {item && Object.keys(item).length ? (
+ <>
+
+
+
+
+ act('switch_modes', {
+ mode: 1,
+ })
+ }
+ >
+ Tint coloring (Simple)
+
+
+ act('switch_modes', {
+ mode: 2,
+ })
+ }
+ >
+ HSV coloring (Normal)
+
+
+ act('switch_modes', {
+ mode: 3,
+ })
+ }
+ >
+ Matrix coloring (Advanced)
+
+
+ Coloring: {item.name}
+
+
+
+ ) : (
+ No item inserted.
+ )}
+
+
+
+ );
+};
diff --git a/tgui/packages/tgui/interfaces/ColorMate/types.ts b/tgui/packages/tgui/interfaces/ColorMate/types.ts
new file mode 100644
index 0000000000..a56bab9c7b
--- /dev/null
+++ b/tgui/packages/tgui/interfaces/ColorMate/types.ts
@@ -0,0 +1,22 @@
+export type Data = {
+ activemode: number;
+ matrixcolors: {
+ rr: number;
+ rg: number;
+ rb: number;
+ gr: number;
+ gg: number;
+ gb: number;
+ br: number;
+ bg: number;
+ bb: number;
+ cr: number;
+ cg: number;
+ cb: number;
+ };
+ buildhue: number;
+ buildsat: number;
+ buildval: number;
+ temp: string | null;
+ item: { name: string; sprite: string; preview: string } | null;
+};
diff --git a/tgui/packages/tgui/interfaces/CommunicationsConsole.jsx b/tgui/packages/tgui/interfaces/CommunicationsConsole.jsx
deleted file mode 100644
index 857364e55d..0000000000
--- a/tgui/packages/tgui/interfaces/CommunicationsConsole.jsx
+++ /dev/null
@@ -1,364 +0,0 @@
-import { useBackend } from '../backend';
-import { Box, Button, LabeledList, Section } from '../components';
-import { Window } from '../layouts';
-
-export const CommunicationsConsole = (props) => {
- return (
-
-
-
-
- );
-};
-
-export const CommunicationsConsoleContent = (props) => {
- const { act, data } = useBackend();
-
- const { menu_state } = data;
-
- let mainTemplate = (
-
- ERRROR. Unknown menu_state: {menu_state}
- Please report this to NT Technical Support.
-
- );
-
- // 1 = main screen
- if (menu_state === 1) {
- mainTemplate =
-
-
-
-
- {(!!emagged && (
-
-
-
-
- )) || (
-
-
-
- )}
-
-
-
-
-
- {alertLevelText}
-
-
- {alertLevelButtons}
-
-
-
-
-
-
-
-
-
-
-
-
-
- );
-};
-
-const CommunicationsConsoleAuth = (props) => {
- const { act, data } = useBackend();
-
- const { authenticated, is_ai, esc_status, esc_callable, esc_recallable } =
- data;
-
- let authReadable;
- if (!authenticated) {
- authReadable = 'Not Logged In';
- } else if (is_ai) {
- authReadable = 'AI';
- } else if (authenticated === 1) {
- authReadable = 'Command';
- } else if (authenticated === 2) {
- authReadable = 'Site Director';
- } else {
- authReadable = 'ERROR: Report This Bug!';
- }
-
- return (
- <>
-
-
- {(is_ai && (
- AI
- )) || (
-
-
-
- )}
-
-
-
-
- {!!esc_status && (
- {esc_status}
- )}
- {!!esc_callable && (
-
-
-
- )}
- {!!esc_recallable && (
-
-
-
- )}
-
-
-
- );
-};
-
-const CommunicationsConsoleMessage = (props) => {
- const { act, data } = useBackend();
-
- const { message_current, message_deletion_allowed, authenticated, messages } =
- data;
-
- if (message_current) {
- return (
- act('messagelist')}
- >
- Return To Message List
-
- }
- >
- {message_current.contents}
-
- );
- }
-
- let messageRows = messages.map((m) => {
- return (
-
-
-
-
- );
- });
-
- return (
- act('main')}>
- Back To Main Menu
-
- }
- >
-
- {(messages.length && messageRows) || (
-
- No messages.
-
- )}
-
-
- );
-};
-
-const CommunicationsConsoleStatusDisplay = (props) => {
- const { act, data } = useBackend();
-
- const { stat_display, authenticated } = data;
-
- let presetButtons = stat_display['presets'].map((pb) => {
- return (
-
- );
- });
- return (
- act('main')}>
- Back To Main Menu
-
- }
- >
-
- {presetButtons}
-
-
-
-
-
-
-
-
- );
-};
diff --git a/tgui/packages/tgui/interfaces/CommunicationsConsole/CommunicationsConsoleAuth.tsx b/tgui/packages/tgui/interfaces/CommunicationsConsole/CommunicationsConsoleAuth.tsx
new file mode 100644
index 0000000000..24b814ebee
--- /dev/null
+++ b/tgui/packages/tgui/interfaces/CommunicationsConsole/CommunicationsConsoleAuth.tsx
@@ -0,0 +1,74 @@
+import { useBackend } from '../../backend';
+import { Button, LabeledList, Section } from '../../components';
+import { Data } from './types';
+
+export const CommunicationsConsoleAuth = (props) => {
+ const { act, data } = useBackend();
+
+ const { authenticated, is_ai, esc_status, esc_callable, esc_recallable } =
+ data;
+
+ let authReadable;
+ if (!authenticated) {
+ authReadable = 'Not Logged In';
+ } else if (is_ai) {
+ authReadable = 'AI';
+ } else if (authenticated === 1) {
+ authReadable = 'Command';
+ } else if (authenticated === 2) {
+ authReadable = 'Site Director';
+ } else {
+ authReadable = 'ERROR: Report This Bug!';
+ }
+
+ return (
+ <>
+
+
+ {(is_ai && (
+ AI
+ )) || (
+
+
+
+ )}
+
+
+
+
+ {!!esc_status && (
+ {esc_status}
+ )}
+ {!!esc_callable && (
+
+
+
+ )}
+ {!!esc_recallable && (
+
+
+
+ )}
+
+
+
+ );
+};
diff --git a/tgui/packages/tgui/interfaces/CommunicationsConsole/CommunicationsConsoleContent.tsx b/tgui/packages/tgui/interfaces/CommunicationsConsole/CommunicationsConsoleContent.tsx
new file mode 100644
index 0000000000..57826b88f3
--- /dev/null
+++ b/tgui/packages/tgui/interfaces/CommunicationsConsole/CommunicationsConsoleContent.tsx
@@ -0,0 +1,37 @@
+import { useBackend } from '../../backend';
+import { Box } from '../../components';
+import { CommunicationsConsoleAuth } from './CommunicationsConsoleAuth';
+import { CommunicationsConsoleMain } from './CommunicationsConsoleMain';
+import { CommunicationsConsoleMessage } from './CommunicationsConsoleMessage';
+import { CommunicationsConsoleStatusDisplay } from './CommunicationsConsoleStatusDisplay';
+import { Data } from './types';
+
+export const CommunicationsConsoleContent = (props) => {
+ const { data } = useBackend();
+
+ const { menu_state } = data;
+
+ const tab: React.JSX.Element[] = [];
+
+ tab[1] =
+ ERRROR. Unknown menu_state: {menu_state}
+ Please report this to NT Technical Support.
+
+ );
+};
diff --git a/tgui/packages/tgui/interfaces/CommunicationsConsole/CommunicationsConsoleMain.tsx b/tgui/packages/tgui/interfaces/CommunicationsConsole/CommunicationsConsoleMain.tsx
new file mode 100644
index 0000000000..caa937b1fc
--- /dev/null
+++ b/tgui/packages/tgui/interfaces/CommunicationsConsole/CommunicationsConsoleMain.tsx
@@ -0,0 +1,132 @@
+import { useBackend } from '../../backend';
+import { Button, LabeledList, Section } from '../../components';
+import { Data } from './types';
+
+export const CommunicationsConsoleMain = (props) => {
+ const { act, data } = useBackend();
+
+ const {
+ messages,
+ msg_cooldown,
+ emagged,
+ cc_cooldown,
+ str_security_level,
+ levels,
+ authmax,
+ security_level,
+ security_level_color,
+ authenticated,
+ atcsquelch,
+ boss_short,
+ } = data;
+
+ const reportText = 'View (' + messages.length + ')';
+ let announceText = 'Make Priority Announcement';
+ if (msg_cooldown > 0) {
+ announceText += ' (' + msg_cooldown + 's)';
+ }
+ let ccMessageText = emagged ? 'Message [UNKNOWN]' : 'Message ' + boss_short;
+ if (cc_cooldown > 0) {
+ ccMessageText += ' (' + cc_cooldown + 's)';
+ }
+
+ const alertLevelText = str_security_level;
+ const alertLevelButtons = levels.map((slevel) => {
+ return (
+
+ );
+ });
+
+ return (
+ <>
+
+
+
+
+
+ {(!!emagged && (
+
+
+
+
+ )) || (
+
+
+
+ )}
+
+
+
+
+
+ {alertLevelText}
+
+
+ {alertLevelButtons}
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+};
diff --git a/tgui/packages/tgui/interfaces/CommunicationsConsole/CommunicationsConsoleMessage.tsx b/tgui/packages/tgui/interfaces/CommunicationsConsole/CommunicationsConsoleMessage.tsx
new file mode 100644
index 0000000000..e70a61bae5
--- /dev/null
+++ b/tgui/packages/tgui/interfaces/CommunicationsConsole/CommunicationsConsoleMessage.tsx
@@ -0,0 +1,69 @@
+import { useBackend } from '../../backend';
+import { Box, Button, LabeledList, Section } from '../../components';
+import { Data } from './types';
+
+export const CommunicationsConsoleMessage = (props) => {
+ const { act, data } = useBackend();
+
+ const { message_current, message_deletion_allowed, authenticated, messages } =
+ data;
+
+ if (message_current) {
+ return (
+ act('messagelist')}
+ >
+ Return To Message List
+
+ }
+ >
+ {message_current.contents}
+
+ );
+ }
+
+ let messageRows = messages.map((m) => {
+ return (
+
+
+
+
+ );
+ });
+
+ return (
+ act('main')}>
+ Back To Main Menu
+
+ }
+ >
+
+ {(messages.length && messageRows) || (
+
+ No messages.
+
+ )}
+
+
+ );
+};
diff --git a/tgui/packages/tgui/interfaces/CommunicationsConsole/CommunicationsConsoleStatusDisplay.tsx b/tgui/packages/tgui/interfaces/CommunicationsConsole/CommunicationsConsoleStatusDisplay.tsx
new file mode 100644
index 0000000000..6ea5a7c319
--- /dev/null
+++ b/tgui/packages/tgui/interfaces/CommunicationsConsole/CommunicationsConsoleStatusDisplay.tsx
@@ -0,0 +1,54 @@
+import { useBackend } from '../../backend';
+import { Button, LabeledList, Section } from '../../components';
+import { Data } from './types';
+
+export const CommunicationsConsoleStatusDisplay = (props) => {
+ const { act, data } = useBackend();
+
+ const { stat_display, authenticated } = data;
+
+ let presetButtons = stat_display['presets'].map((pb) => {
+ return (
+
+ );
+ });
+ return (
+ act('main')}>
+ Back To Main Menu
+
+ }
+ >
+
+ {presetButtons}
+
+
+
+
+
+
+
+
+ );
+};
diff --git a/tgui/packages/tgui/interfaces/CommunicationsConsole/index.tsx b/tgui/packages/tgui/interfaces/CommunicationsConsole/index.tsx
new file mode 100644
index 0000000000..891947d278
--- /dev/null
+++ b/tgui/packages/tgui/interfaces/CommunicationsConsole/index.tsx
@@ -0,0 +1,12 @@
+import { Window } from '../../layouts';
+import { CommunicationsConsoleContent } from './CommunicationsConsoleContent';
+
+export const CommunicationsConsole = (props) => {
+ return (
+
+
+
+
+ );
+};
diff --git a/tgui/packages/tgui/interfaces/CommunicationsConsole/types.ts b/tgui/packages/tgui/interfaces/CommunicationsConsole/types.ts
new file mode 100644
index 0000000000..3b3d1ac327
--- /dev/null
+++ b/tgui/packages/tgui/interfaces/CommunicationsConsole/types.ts
@@ -0,0 +1,33 @@
+import { BooleanLike } from 'common/react';
+
+export type Data = {
+ is_ai: BooleanLike;
+ menu_state: string;
+ emagged: BooleanLike;
+ authenticated: BooleanLike;
+ authmax: BooleanLike;
+ atcsquelch: BooleanLike;
+ boss_short: string;
+ stat_display: {
+ type: string;
+ line_1: string;
+ line_2: string;
+ presets: { name: string; label: string; desc: string }[];
+ };
+ security_level: number;
+ security_level_color: string;
+ str_security_level: string;
+ levels: { id: number; name: string; icon: string }[];
+ messages: message[];
+ message_deletion_allowed: BooleanLike;
+ message_current_id: number;
+ message_current: message;
+ current_viewing_message: number;
+ msg_cooldown: number;
+ cc_cooldown: number;
+ esc_callable: BooleanLike;
+ esc_recallable: BooleanLike;
+ esc_status: BooleanLike | string;
+};
+
+type message = { id: string; title: String; contents: string };
diff --git a/tgui/packages/tgui/interfaces/Communicator.tsx b/tgui/packages/tgui/interfaces/Communicator.tsx
deleted file mode 100644
index 0bd2dd4d6b..0000000000
--- a/tgui/packages/tgui/interfaces/Communicator.tsx
+++ /dev/null
@@ -1,1307 +0,0 @@
-import { filter } from 'common/collections';
-import { BooleanLike } from 'common/react';
-import { decodeHtmlEntities, toTitleCase } from 'common/string';
-import { useState } from 'react';
-
-import { useBackend } from '../backend';
-import {
- Box,
- Button,
- ByondUi,
- Flex,
- Icon,
- Input,
- LabeledList,
- Section,
- Table,
-} from '../components';
-import { Window } from '../layouts';
-import { CrewManifestContent } from './CrewManifest';
-
-const HOMETAB = 1;
-const PHONTAB = 2;
-const CONTTAB = 3;
-const MESSTAB = 4;
-const MESSSUBTAB = 40;
-const NEWSTAB = 5;
-const NOTETAB = 6;
-const WTHRTAB = 7;
-const MANITAB = 8;
-const SETTTAB = 9;
-
-let TABS = [
- HOMETAB,
- PHONTAB,
- CONTTAB,
- MESSTAB,
- MESSSUBTAB,
- NEWSTAB,
- NOTETAB,
- WTHRTAB,
- MANITAB,
- SETTTAB,
-];
-
-let TabToTemplate = {}; // Populated under each template
-
-type Data = {
- // GENERAL
- currentTab: number;
- video_comm: BooleanLike;
- mapRef: string;
-
- // FOOTER
- time: string;
- connectionStatus: BooleanLike;
- owner: string;
- occupation: string;
-
- // HEADER
- flashlight: BooleanLike;
-
- // HOMETAB
- homeScreen: { number: number; module: string; icon: string }[];
-
- // PHONETAB
- targetAddress: string;
- voice_mobs: { name: string; true_name: string; ref: string }[];
- communicating: {
- address: string;
- name: string;
- true_name: string;
- ref: string;
- }[];
- requestsReceived: { address: string; name: string; ref: string }[];
- invitesSent: { address: string; name: string }[];
- phone_video_comm: string;
- selfie_mode: BooleanLike;
-
- // MESSAGING
- imContacts: { address: string; name: string }[];
- targetAddressName: string;
- imList: { address: string; to_address: string; im: string }[];
-
- // SETTINGS
- address: string;
- visible: BooleanLike;
- ring: BooleanLike;
-
- // NEWSTAB
- feeds: { index: number; name: string }[];
- target_feed: { name: string; author: string; messages: NewsMessage[] };
- latest_news: NewsMessage[];
-
- // NOTETAB
- note: string;
-};
-
-type NewsMessage = {
- ref: string;
- body: string;
- img: string;
- caption: string;
- message_type: string;
- author: string;
- time_stamp: string;
-
- index: number;
- channel: string;
-};
-
-function notFound(val) {
- return TABS.includes(val);
-}
-
-export const Communicator = (props) => {
- const { act, data } = useBackend();
-
- const {
- currentTab,
- video_comm,
- owner,
- occupation,
- connectionStatus,
- address,
- visible,
- ring,
- selfie_mode,
- homeScreen,
- targetAddress,
- voice_mobs,
- phone_video_comm,
- communicating,
- requestsReceived,
- invitesSent,
- imContacts,
- targetAddressName,
- imList,
- feeds,
- target_feed,
- latest_news,
- note,
- } = data;
-
- const validCharacters = [
- '0',
- '1',
- '2',
- '3',
- '4',
- '5',
- '6',
- '7',
- '8',
- '9',
- 'A',
- 'B',
- 'C',
- 'D',
- 'E',
- 'F',
- ];
-
- let buttonArray = validCharacters.map((char) => (
-
- ));
-
- let finalArray: any[] = [];
-
- for (let i = 0; i < buttonArray.length; i += 4) {
- finalArray.push(
-
- {buttonArray[i]}
- {buttonArray[i + 1]}
- {buttonArray[i + 2]}
- {buttonArray[i + 3]}
- ,
- );
- }
- /* 0: Fullscreen Video
- * 1: Popup Video
- * 2: Minimized Video
- */
- const [videoSetting, setVideoSetting] = useState(0);
- const [clipboardMode, setClipboardMode] = useState(false);
-
- return (
-
-
- {video_comm && (
-
- {(currentTab === HOMETAB && (
-
- {homeScreen.map((app) => (
-
-
- {app.module}
-
- ))}
-
- )) ||
- (currentTab === PHONTAB && (
-
-
-
-
-
-
- act('write_target_address', { val: val })
- }
- />
-
-
-
-
-
-
-
-
-
- {finalArray}
-
- {/* Dial */}
-
-
- Dial
-
- {/* Message */}
-
-
- Message
-
- {/* Hang Up */}
-
-
- Hang Up
-
-
-
-
-
-
-
-
-
-
-
- {(!!voice_mobs.length && (
-
- {voice_mobs.map((mob) => (
-
-
-
- ))}
-
- )) || No connections }
-
-
- {(!!communicating.length && (
-
- {communicating.map((comm) => (
-
- )) || No connections }
-
-
- {(!!requestsReceived.length && (
-
- {requestsReceived.map((request) => (
-
- {decodeHtmlEntities(request.address)}
-
-
-
-
-
- ))}
-
- )) || No requests received. }
-
-
- {(!!invitesSent.length && (
-
- {invitesSent.map((invite) => (
-
- {decodeHtmlEntities(invite.address)}
-
-
-
-
- ))}
-
- )) || No invites sent. }
-
-
-
- )) ||
- (currentTab === CONTTAB &&
- {(imContacts.length && (
-
- {imContacts.map((device) => (
-
- )) || (
-
- You haven't sent any messages yet.
-
-
- )}
-
- )) ||
- (currentTab === MESSSUBTAB &&
- (clipboardMode ? (
-
- {enforceLengthLimit(
- 'Conversation with ',
- decodeHtmlEntities(targetAddressName),
- 30,
- )}
-
- }
- buttons={
-
- ) : (
-
- {enforceLengthLimit(
- 'Conversation with ',
- decodeHtmlEntities(targetAddressName),
- 30,
- )}
-
- }
- buttons={
-
- }
- >
- {target_feed.messages.map((message) => (
-
- - {decodeHtmlEntities(message.body)}
- {!!message.img && (
-
- 
- {decodeHtmlEntities(message.caption) || null}
-
- )}
-
- [{message.message_type} by{' '}
- {decodeHtmlEntities(message.author)} -{' '}
- {message.time_stamp}]
-
-
- ))}
-
- )) || (
- <>
-
-
- {latest_news.map((news) => (
-
-
- [image omitted, view story for more
- details]
- {news.caption || null}
-
- )}
-
- [{news.message_type} by{' '}
-
- {news.author}
- {' '}
- - {news.time_stamp}]
-
-
- ))}
-
-
-
- {feeds.map((feed) => (
-
- ))}
-
-
- )}
-
- )) ||
- (currentTab === NOTETAB && (
- act('edit')}>
- Edit Notes
-
- }
- >
-
- {note}
-
-
- )) ||
- (currentTab === WTHRTAB &&
-
-
-
-
-
-
-
-
- {decodeHtmlEntities(occupation)}
-
-
- {connectionStatus === 1 ? (
- Connected
- ) : (
- Disconnected
- )}
-
-
- {address}
-
-
- act('toggle_visibility')}
- >
- {visible
- ? 'This device can be seen by other devices.'
- : 'This device is invisible to other devices.'}
-
-
-
- act('toggle_ringer')}
- >
- {ring ? 'Ringer on.' : 'Ringer off.'}
-
-
-
-
-
- )) ||
- (notFound(currentTab) &&
-
-
-
-
-
-
-
-
-
-
- );
- } else if (videoSetting === 1) {
- return (
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- );
- }
- return null;
-};
-
-const TemplateError = (props) => {
- const { act, data } = useBackend();
-
- const { currentTab } = data;
-
- return (
-
- You tried to access tab #{currentTab}, but there was no template defined!
-
- );
-};
-
-const CommunicatorHeader = (props) => {
- const { act, data } = useBackend();
-
- const { time, connectionStatus, owner, occupation } = data;
-
- return (
-
-
- {time}
-
-
- {decodeHtmlEntities(owner)}
- {decodeHtmlEntities(occupation)}
-
-
- );
-};
-
-const CommunicatorFooter = (props) => {
- const { act, data } = useBackend();
-
- const { flashlight } = data;
-
- const { videoSetting, setVideoSetting } = props;
-
- return (
-
-
-
-
-
- {videoSetting === 2 && (
-
-
- )}
-
- );
-};
-
-/* Helper for notifications (yes this is a mess, but whatever, it works) */
-const hasNotifications = (app) => {
- const { data } = useBackend();
-
- const {
- /* Phone Notifications */
- voice_mobs,
- communicating,
- requestsReceived,
- invitesSent,
- video_comm,
- } = data;
-
- if (app === 'Phone') {
- if (
- voice_mobs.length ||
- communicating.length ||
- requestsReceived.length ||
- invitesSent.length ||
- video_comm
- ) {
- return true;
- }
- }
-
- return false;
-};
-
-type ContactsTabData = {
- knownDevices: { address: string; name: string }[];
-};
-
-/* Contacts */
-const ContactsTab = (props) => {
- const { act, data } = useBackend();
-
- const { knownDevices } = data;
-
- return (
-
- {(knownDevices.length && (
-
- {knownDevices.map((device) => (
-
- )) || No devices detected on your local NTNet region. }
-
- );
-};
-/* Actual messaging conversation */
-const IsIMOurs = (im, targetAddress) => {
- return im.address !== targetAddress;
-};
-
-const enforceLengthLimit = (prefix: string, name: string, length: number) => {
- if ((prefix + name).length > length) {
- if (name.length > length) {
- return name.slice(0, length) + '...';
- }
- return name;
- }
- return prefix + name;
-};
-
-const findClassMessage = (im, targetAddress, lastIndex, filterArray) => {
- if (lastIndex < 0 || lastIndex > filterArray.length) {
- return IsIMOurs(im, targetAddress)
- ? 'TinderMessage_First_Sent'
- : 'TinderMessage_First_Received';
- }
-
- let thisSent = IsIMOurs(im, targetAddress);
- let lastSent = IsIMOurs(filterArray[lastIndex], targetAddress);
- if (thisSent && lastSent) {
- return 'TinderMessage_Subsequent_Sent';
- } else if (!thisSent && !lastSent) {
- return 'TinderMessage_Subsequent_Received';
- }
- return thisSent ? 'TinderMessage_First_Sent' : 'TinderMessage_First_Received';
-};
-
-/* Weather App */
-const getItemColor = (value, min2, min1, max1, max2) => {
- if (value < min2) {
- return 'bad';
- } else if (value < min1) {
- return 'average';
- } else if (value > max1) {
- return 'average';
- } else if (value > max2) {
- return 'bad';
- }
- return 'good';
-};
-
-type WeatherTabData = {
- aircontents: AirContent[];
- weather: Weather[];
-};
-
-type AirContent = {
- entry: string;
- val;
- bad_low: number;
- poor_low: number;
- poor_high: number;
- bad_high: number;
- units;
-};
-
-type Weather = {
- Planet: string;
- Time: string;
- Weather: string;
- Temperature;
- High;
- Low;
- WindDir;
- WindSpeed;
- Forecast: string;
-};
-
-const WeatherTab = (props) => {
- const { act, data } = useBackend();
-
- const { aircontents, weather } = data;
-
- let deg = '\u00B0';
-
- return (
-
-
-
- {filter(
- (i: AirContent) =>
- i.val !== '0' ||
- i.entry === 'Pressure' ||
- i.entry === 'Temperature',
- )(aircontents).map((item: AirContent) => (
-
- {item.val}
- {decodeHtmlEntities(item.units)}
-
- ))}
-
-
-
- {(!!weather.length && (
-
- {weather.map((wr) => (
-
-
- {wr.Time}
-
- {toTitleCase(wr.Weather)}
-
-
- Current: {wr.Temperature.toFixed()} {deg}C | High:{' '}
- {wr.High.toFixed()} {deg}C | Low: {wr.Low.toFixed()} {deg}C
-
-
- {wr.WindDir}
-
-
- {wr.WindSpeed}
-
-
- {decodeHtmlEntities(wr.Forecast)}
-
-
-
- ))}
-
- )) || (
-
- No weather reports available. Please check back later.
-
- )}
-
-
- );
-};
diff --git a/tgui/packages/tgui/interfaces/Communicator/CommunicatorContactTab.tsx b/tgui/packages/tgui/interfaces/Communicator/CommunicatorContactTab.tsx
new file mode 100644
index 0000000000..d5fb473ca6
--- /dev/null
+++ b/tgui/packages/tgui/interfaces/Communicator/CommunicatorContactTab.tsx
@@ -0,0 +1,67 @@
+import { decodeHtmlEntities } from 'common/string';
+
+import { useBackend } from '../../backend';
+import { Box, Button, Section, Table } from '../../components';
+import { MESSSUBTAB, PHONTAB } from './constants';
+import { ContactsTabData } from './types';
+
+export const CommunicatorContactTab = (props) => {
+ const { act, data } = useBackend();
+
+ const { knownDevices } = data;
+
+ return (
+
+ {(knownDevices.length && (
+
+ {knownDevices.map((device) => (
+
+ )) || No devices detected on your local NTNet region. }
+
+ );
+};
diff --git a/tgui/packages/tgui/interfaces/Communicator/CommunicatorGeneral.tsx b/tgui/packages/tgui/interfaces/Communicator/CommunicatorGeneral.tsx
new file mode 100644
index 0000000000..7a752a13f9
--- /dev/null
+++ b/tgui/packages/tgui/interfaces/Communicator/CommunicatorGeneral.tsx
@@ -0,0 +1,209 @@
+import { decodeHtmlEntities } from 'common/string';
+
+import { useBackend } from '../../backend';
+import { Box, Button, ByondUi, Flex, Icon, Section } from '../../components';
+import { HOMETAB } from './constants';
+import { Data } from './types';
+
+export const TemplateError = (props: { currentTab: number }) => {
+ return (
+
+ You tried to access tab #{props.currentTab}, but there was no template
+ defined!
+
+ );
+};
+export const CommunicatorHeader = (props) => {
+ const { act, data } = useBackend();
+
+ const { time, connectionStatus, owner, occupation } = data;
+
+ return (
+
+
+ {time}
+
+
+ {decodeHtmlEntities(owner)}
+ {decodeHtmlEntities(occupation)}
+
+
+ );
+};
+
+export const CommunicatorFooter = (props: {
+ videoSetting: number;
+ setVideoSetting: Function;
+}) => {
+ const { act, data } = useBackend();
+
+ const { flashlight } = data;
+
+ const { videoSetting, setVideoSetting } = props;
+
+ return (
+
+
+
+
+
+ {videoSetting === 2 && (
+
+
+ )}
+
+ );
+};
+
+export const VideoComm = (props: {
+ videoSetting: number;
+ setVideoSetting: Function;
+}) => {
+ const { act, data } = useBackend();
+
+ const { mapRef } = data;
+
+ const { videoSetting, setVideoSetting } = props;
+
+ if (videoSetting === 0) {
+ return (
+
+
+
+
+
+
+
+
+
+
+ );
+ } else if (videoSetting === 1) {
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+ }
+ return null;
+};
diff --git a/tgui/packages/tgui/interfaces/Communicator/CommunicatorHomeTab.tsx b/tgui/packages/tgui/interfaces/Communicator/CommunicatorHomeTab.tsx
new file mode 100644
index 0000000000..9e8809cc77
--- /dev/null
+++ b/tgui/packages/tgui/interfaces/Communicator/CommunicatorHomeTab.tsx
@@ -0,0 +1,67 @@
+import { useBackend } from '../../backend';
+import { Box, Button, Flex, Icon } from '../../components';
+import { Data } from './types';
+
+export const CommunicatorHomeTab = (props) => {
+ const { act, data } = useBackend();
+
+ const { homeScreen } = data;
+
+ return (
+
+ {homeScreen.map((app) => (
+
+
+ {app.module}
+
+ ))}
+
+ );
+};
+
+/* Helper for notifications (yes this is a mess, but whatever, it works) */
+const hasNotifications = (app: string | null) => {
+ const { data } = useBackend();
+
+ const {
+ /* Phone Notifications */
+ voice_mobs,
+ communicating,
+ requestsReceived,
+ invitesSent,
+ video_comm,
+ } = data;
+
+ if (app === 'Phone') {
+ if (
+ voice_mobs.length ||
+ communicating.length ||
+ requestsReceived.length ||
+ invitesSent.length ||
+ video_comm
+ ) {
+ return true;
+ }
+ }
+
+ return false;
+};
diff --git a/tgui/packages/tgui/interfaces/Communicator/CommunicatorMessageSubTab.tsx b/tgui/packages/tgui/interfaces/Communicator/CommunicatorMessageSubTab.tsx
new file mode 100644
index 0000000000..5e15ccfb36
--- /dev/null
+++ b/tgui/packages/tgui/interfaces/Communicator/CommunicatorMessageSubTab.tsx
@@ -0,0 +1,190 @@
+import { decodeHtmlEntities } from 'common/string';
+
+import { useBackend } from '../../backend';
+import { Box, Button, Section } from '../../components';
+import { Data } from './types';
+
+export const CommunicatorMessageSubTab = (props: {
+ clipboardMode: boolean;
+ onClipboardMode: Function;
+}) => {
+ const { act, data } = useBackend();
+
+ const { clipboardMode, onClipboardMode } = props;
+
+ const { targetAddress, targetAddressName, imList } = data;
+
+ return clipboardMode ? (
+
+ {enforceLengthLimit(
+ 'Conversation with ',
+ decodeHtmlEntities(targetAddressName),
+ 30,
+ )}
+
+ }
+ buttons={
+
+ ) : (
+
+ {enforceLengthLimit(
+ 'Conversation with ',
+ decodeHtmlEntities(targetAddressName),
+ 30,
+ )}
+
+ }
+ buttons={
+
+ );
+};
+
+/* Actual messaging conversation */
+const IsIMOurs = (
+ im: { address: string; to_address: string; im: string },
+ targetAddress: string,
+) => {
+ return im.address !== targetAddress;
+};
+
+const enforceLengthLimit = (prefix: string, name: string, length: number) => {
+ if ((prefix + name).length > length) {
+ if (name.length > length) {
+ return name.slice(0, length) + '...';
+ }
+ return name;
+ }
+ return prefix + name;
+};
+
+const findClassMessage = (
+ im: { address: string; to_address: string; im: string },
+ targetAddress: string,
+ lastIndex: number,
+ filterArray: {
+ address: string;
+ to_address: string;
+ im: string;
+ }[],
+) => {
+ if (lastIndex < 0 || lastIndex > filterArray.length) {
+ return IsIMOurs(im, targetAddress)
+ ? 'TinderMessage_First_Sent'
+ : 'TinderMessage_First_Received';
+ }
+
+ let thisSent = IsIMOurs(im, targetAddress);
+ let lastSent = IsIMOurs(filterArray[lastIndex], targetAddress);
+ if (thisSent && lastSent) {
+ return 'TinderMessage_Subsequent_Sent';
+ } else if (!thisSent && !lastSent) {
+ return 'TinderMessage_Subsequent_Received';
+ }
+ return thisSent ? 'TinderMessage_First_Sent' : 'TinderMessage_First_Received';
+};
diff --git a/tgui/packages/tgui/interfaces/Communicator/CommunicatorMessageTab.tsx b/tgui/packages/tgui/interfaces/Communicator/CommunicatorMessageTab.tsx
new file mode 100644
index 0000000000..6fe344719a
--- /dev/null
+++ b/tgui/packages/tgui/interfaces/Communicator/CommunicatorMessageTab.tsx
@@ -0,0 +1,63 @@
+import { decodeHtmlEntities } from 'common/string';
+
+import { useBackend } from '../../backend';
+import { Box, Button, Section, Table } from '../../components';
+import { CONTTAB, MESSSUBTAB } from './constants';
+import { Data } from './types';
+
+export const CommunicatorMessageTab = (props) => {
+ const { act, data } = useBackend();
+
+ const { imContacts } = data;
+
+ return (
+
+ {(imContacts.length && (
+
+ {imContacts.map((device) => (
+
+ )) || (
+
+ You haven't sent any messages yet.
+
+
+ )}
+
+ );
+};
diff --git a/tgui/packages/tgui/interfaces/Communicator/CommunicatorNewsTab.tsx b/tgui/packages/tgui/interfaces/Communicator/CommunicatorNewsTab.tsx
new file mode 100644
index 0000000000..5ed6049bfd
--- /dev/null
+++ b/tgui/packages/tgui/interfaces/Communicator/CommunicatorNewsTab.tsx
@@ -0,0 +1,105 @@
+import { decodeHtmlEntities } from 'common/string';
+
+import { useBackend } from '../../backend';
+import { Box, Button, Section } from '../../components';
+import { Data } from './types';
+
+export const CommunicatorNewsTab = (props) => {
+ const { act, data } = useBackend();
+
+ const { feeds, target_feed, latest_news } = data;
+
+ return (
+
+ {(!feeds.length && (
+
+ Error: No newsfeeds available. Please try again later.
+
+ )) ||
+ (target_feed && (
+ act('newsfeed', { newsfeed: null })}
+ >
+ Back
+
+ }
+ >
+ {target_feed.messages.map((message) => (
+
+ - {decodeHtmlEntities(message.body)}
+ {!!message.img && (
+
+
+ {decodeHtmlEntities(message.caption) || null}
+
+ )}
+
+ [{message.message_type} by{' '}
+ {decodeHtmlEntities(message.author)} - {message.time_stamp}]
+
+
+ ))}
+
+ )) || (
+ <>
+
+
+ {latest_news.map((news) => (
+
+
+ [image omitted, view story for more details]
+ {news.caption || null}
+
+ )}
+
+ [{news.message_type} by{' '}
+
+ {news.author}
+ {' '}
+ - {news.time_stamp}]
+
+
+ ))}
+
+
+
+ {feeds.map((feed) => (
+
+ ))}
+
+
+ )}
+
+ );
+};
diff --git a/tgui/packages/tgui/interfaces/Communicator/CommunicatorNoteTab.tsx b/tgui/packages/tgui/interfaces/Communicator/CommunicatorNoteTab.tsx
new file mode 100644
index 0000000000..35edfc6a61
--- /dev/null
+++ b/tgui/packages/tgui/interfaces/Communicator/CommunicatorNoteTab.tsx
@@ -0,0 +1,34 @@
+import { useBackend } from '../../backend';
+import { Button, Section } from '../../components';
+import { Data } from './types';
+
+export const CommunicatorNoteTab = (props) => {
+ const { act, data } = useBackend();
+
+ const { note } = data;
+
+ return (
+ act('edit')}>
+ Edit Notes
+
+ }
+ >
+
+ {note}
+
+
+ );
+};
diff --git a/tgui/packages/tgui/interfaces/Communicator/CommunicatorPhoneTab.tsx b/tgui/packages/tgui/interfaces/Communicator/CommunicatorPhoneTab.tsx
new file mode 100644
index 0000000000..4e50303131
--- /dev/null
+++ b/tgui/packages/tgui/interfaces/Communicator/CommunicatorPhoneTab.tsx
@@ -0,0 +1,328 @@
+import { decodeHtmlEntities } from 'common/string';
+
+import { useBackend } from '../../backend';
+import {
+ Box,
+ Button,
+ Flex,
+ Icon,
+ Input,
+ LabeledList,
+ Section,
+ Table,
+} from '../../components';
+import { MESSTAB } from './constants';
+import { Data } from './types';
+
+export const CommunicatorPhoneTab = (props) => {
+ const { act, data } = useBackend();
+
+ const { selfie_mode, targetAddress } = data;
+
+ const validCharacters = [
+ '0',
+ '1',
+ '2',
+ '3',
+ '4',
+ '5',
+ '6',
+ '7',
+ '8',
+ '9',
+ 'A',
+ 'B',
+ 'C',
+ 'D',
+ 'E',
+ 'F',
+ ];
+
+ const buttonArray = validCharacters.map((char) => (
+
+ ));
+
+ let finalArray: React.JSX.Element[] = [];
+
+ for (let i = 0; i < buttonArray.length; i += 4) {
+ finalArray.push(
+
+ {buttonArray[i]}
+ {buttonArray[i + 1]}
+ {buttonArray[i + 2]}
+ {buttonArray[i + 3]}
+ ,
+ );
+ }
+
+ return (
+
+
+
+
+
+ act('write_target_address', { val: val })}
+ />
+
+
+
+
+
+
+
+
+ {finalArray}
+
+ {/* Dial */}
+
+
+ Dial
+
+ {/* Message */}
+
+
+ Message
+
+ {/* Hang Up */}
+
+
+ Hang Up
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+};
+
+const CommunicatorPhoneTabExternal = (props) => {
+ const { act, data } = useBackend();
+
+ const { voice_mobs } = data;
+
+ return (
+
+ {(!!voice_mobs.length && (
+
+ {voice_mobs.map((mob) => (
+
+
+
+ ))}
+
+ )) || No connections }
+
+ );
+};
+
+const CommunicatorPhoneTabInternal = (props) => {
+ const { act, data } = useBackend();
+
+ const { communicating, video_comm, phone_video_comm } = data;
+
+ return (
+
+ {(!!communicating.length && (
+
+ {communicating.map((comm) => (
+
+ )) || No connections }
+
+ );
+};
+
+const CommunicatorPhoneTabRequest = (props) => {
+ const { act, data } = useBackend();
+
+ const { requestsReceived } = data;
+
+ return (
+
+ {(!!requestsReceived.length && (
+
+ {requestsReceived.map((request) => (
+
+ {decodeHtmlEntities(request.address)}
+
+
+
+
+
+ ))}
+
+ )) || No requests received. }
+
+ );
+};
+
+const CommunicatorPhoneTabInvite = (props) => {
+ const { act, data } = useBackend();
+
+ const { invitesSent } = data;
+
+ return (
+
+ {(!!invitesSent.length && (
+
+ {invitesSent.map((invite) => (
+
+ {decodeHtmlEntities(invite.address)}
+
+
+
+
+ ))}
+
+ )) || No invites sent. }
+
+ );
+};
diff --git a/tgui/packages/tgui/interfaces/Communicator/CommunicatorSettingsTab.tsx b/tgui/packages/tgui/interfaces/Communicator/CommunicatorSettingsTab.tsx
new file mode 100644
index 0000000000..3cfcb217b1
--- /dev/null
+++ b/tgui/packages/tgui/interfaces/Communicator/CommunicatorSettingsTab.tsx
@@ -0,0 +1,74 @@
+import { decodeHtmlEntities } from 'common/string';
+
+import { useBackend } from '../../backend';
+import { Box, Button, LabeledList, Section } from '../../components';
+import { Data } from './types';
+
+export const CommunicatorSettingsTab = (props) => {
+ const { act, data } = useBackend();
+
+ const {
+ address,
+ selfie_mode,
+ owner,
+ occupation,
+ connectionStatus,
+ visible,
+ ring,
+ } = data;
+
+ return (
+
+
+
+
+
+
+
+
+
+ {decodeHtmlEntities(occupation)}
+
+
+ {connectionStatus === 1 ? (
+ Connected
+ ) : (
+ Disconnected
+ )}
+
+
+ {address}
+
+
+ act('toggle_visibility')}
+ >
+ {visible
+ ? 'This device can be seen by other devices.'
+ : 'This device is invisible to other devices.'}
+
+
+
+ act('toggle_ringer')}
+ >
+ {ring ? 'Ringer on.' : 'Ringer off.'}
+
+
+
+
+
+ );
+};
diff --git a/tgui/packages/tgui/interfaces/Communicator/CommunicatorWeatherTab.tsx b/tgui/packages/tgui/interfaces/Communicator/CommunicatorWeatherTab.tsx
new file mode 100644
index 0000000000..5c7412253d
--- /dev/null
+++ b/tgui/packages/tgui/interfaces/Communicator/CommunicatorWeatherTab.tsx
@@ -0,0 +1,97 @@
+import { filter } from 'common/collections';
+import { decodeHtmlEntities, toTitleCase } from 'common/string';
+
+import { useBackend } from '../../backend';
+import { Box, LabeledList, Section } from '../../components';
+import { AirContent, WeatherTabData } from './types';
+
+export const CommunicatorWeatherTab = (props) => {
+ const { act, data } = useBackend();
+
+ const { aircontents, weather } = data;
+
+ const deg: string = '\u00B0';
+
+ return (
+
+
+
+ {filter(
+ (i: AirContent) =>
+ i.val !== '0' ||
+ i.entry === 'Pressure' ||
+ i.entry === 'Temperature',
+ )(aircontents).map((item: AirContent) => (
+
+ {item.val}
+ {decodeHtmlEntities(item.units)}
+
+ ))}
+
+
+
+ {(!!weather.length && (
+
+ {weather.map((wr) => (
+
+
+ {wr.Time}
+
+ {toTitleCase(wr.Weather)}
+
+
+ Current: {wr.Temperature.toFixed()} {deg}C | High:{' '}
+ {wr.High.toFixed()} {deg}C | Low: {wr.Low.toFixed()} {deg}C
+
+
+ {wr.WindDir}
+
+
+ {wr.WindSpeed}
+
+
+ {decodeHtmlEntities(wr.Forecast)}
+
+
+
+ ))}
+
+ )) || (
+
+ No weather reports available. Please check back later.
+
+ )}
+
+
+ );
+};
+
+/* Weather App */
+const getItemColor = (
+ value: number,
+ min2: number,
+ min1: number,
+ max1: number,
+ max2: number,
+) => {
+ if (value < min2) {
+ return 'bad';
+ } else if (value < min1) {
+ return 'average';
+ } else if (value > max1) {
+ return 'average';
+ } else if (value > max2) {
+ return 'bad';
+ }
+ return 'good';
+};
diff --git a/tgui/packages/tgui/interfaces/Communicator/constants.ts b/tgui/packages/tgui/interfaces/Communicator/constants.ts
new file mode 100644
index 0000000000..f37d974320
--- /dev/null
+++ b/tgui/packages/tgui/interfaces/Communicator/constants.ts
@@ -0,0 +1,27 @@
+export const HOMETAB = 1;
+export const PHONTAB = 2;
+export const CONTTAB = 3;
+export const MESSTAB = 4;
+export const MESSSUBTAB = 40;
+export const NEWSTAB = 5;
+export const NOTETAB = 6;
+export const WTHRTAB = 7;
+export const MANITAB = 8;
+export const SETTTAB = 9;
+
+export const tabs = [
+ HOMETAB,
+ PHONTAB,
+ CONTTAB,
+ MESSTAB,
+ MESSSUBTAB,
+ NEWSTAB,
+ NOTETAB,
+ WTHRTAB,
+ MANITAB,
+ SETTTAB,
+];
+
+export function notFound(val) {
+ return tabs.includes(val);
+}
diff --git a/tgui/packages/tgui/interfaces/Communicator/index.tsx b/tgui/packages/tgui/interfaces/Communicator/index.tsx
new file mode 100644
index 0000000000..0194169071
--- /dev/null
+++ b/tgui/packages/tgui/interfaces/Communicator/index.tsx
@@ -0,0 +1,88 @@
+import { useState } from 'react';
+
+import { useBackend } from '../../backend';
+import { Box } from '../../components';
+import { Window } from '../../layouts';
+import { CrewManifestContent } from '../CrewManifest';
+import { CommunicatorContactTab } from './CommunicatorContactTab';
+import {
+ CommunicatorFooter,
+ CommunicatorHeader,
+ TemplateError,
+ VideoComm,
+} from './CommunicatorGeneral';
+import { CommunicatorHomeTab } from './CommunicatorHomeTab';
+import { CommunicatorMessageSubTab } from './CommunicatorMessageSubTab';
+import { CommunicatorMessageTab } from './CommunicatorMessageTab';
+import { CommunicatorNewsTab } from './CommunicatorNewsTab';
+import { CommunicatorNoteTab } from './CommunicatorNoteTab';
+import { CommunicatorPhoneTab } from './CommunicatorPhoneTab';
+import { CommunicatorSettingsTab } from './CommunicatorSettingsTab';
+import { CommunicatorWeatherTab } from './CommunicatorWeatherTab';
+import { notFound, tabs } from './constants';
+import { Data } from './types';
+
+export const Communicator = () => {
+ const { act, data } = useBackend();
+
+ const { currentTab, video_comm } = data;
+
+ const tab: React.JSX.Element[] = [];
+
+ const [videoSetting, setVideoSetting] = useState(0);
+ const [clipboardMode, setClipboardMode] = useState(false);
+
+ function handleClipboardMode(value: boolean) {
+ setClipboardMode(value);
+ }
+
+ tab[tabs[0]] =
+
+ {video_comm && (
+
+ {tab[currentTab] ||
+ (notFound(currentTab) && (
+
+
+
+ );
+};
diff --git a/tgui/packages/tgui/interfaces/Communicator/types.ts b/tgui/packages/tgui/interfaces/Communicator/types.ts
new file mode 100644
index 0000000000..7d32b0e34b
--- /dev/null
+++ b/tgui/packages/tgui/interfaces/Communicator/types.ts
@@ -0,0 +1,96 @@
+import { BooleanLike } from 'common/react';
+
+export type Data = {
+ // GENERAL
+ currentTab: number;
+ video_comm: BooleanLike;
+ mapRef: string;
+
+ // FOOTER
+ time: string;
+ connectionStatus: BooleanLike;
+ owner: string;
+ occupation: string;
+
+ // HEADER
+ flashlight: BooleanLike;
+
+ // HOMETAB
+ homeScreen: { number: number; module: string; icon: string }[];
+
+ // PHONETAB
+ targetAddress: string;
+ voice_mobs: { name: string; true_name: string; ref: string }[];
+ communicating: {
+ address: string;
+ name: string;
+ true_name: string;
+ ref: string;
+ }[];
+ requestsReceived: { address: string; name: string; ref: string }[];
+ invitesSent: { address: string; name: string }[];
+ phone_video_comm: string;
+ selfie_mode: BooleanLike;
+
+ // MESSAGING
+ imContacts: { address: string; name: string }[];
+ targetAddressName: string;
+ imList: { address: string; to_address: string; im: string }[];
+
+ // SETTINGS
+ address: string;
+ visible: BooleanLike;
+ ring: BooleanLike;
+
+ // NEWSTAB
+ feeds: { index: number; name: string }[];
+ target_feed: { name: string; author: string; messages: NewsMessage[] } | null;
+ latest_news: NewsMessage[];
+
+ // NOTETAB
+ note: string;
+};
+
+type NewsMessage = {
+ ref: string;
+ body: string;
+ img: string;
+ caption: string;
+ message_type: string;
+ author: string;
+ time_stamp: string;
+
+ index: number;
+ channel: string;
+};
+
+export type ContactsTabData = {
+ knownDevices: { address: string; name: string }[];
+};
+
+export type WeatherTabData = {
+ aircontents: AirContent[];
+ weather: Weather[];
+};
+
+export type AirContent = {
+ entry: string;
+ val;
+ bad_low: number;
+ poor_low: number;
+ poor_high: number;
+ bad_high: number;
+ units;
+};
+
+type Weather = {
+ Planet: string;
+ Time: string;
+ Weather: string;
+ Temperature;
+ High;
+ Low;
+ WindDir;
+ WindSpeed;
+ Forecast: string;
+};
diff --git a/tgui/packages/tgui/interfaces/ComputerFabricator/CfStep1.tsx b/tgui/packages/tgui/interfaces/ComputerFabricator/CfStep1.tsx
new file mode 100644
index 0000000000..e950bdad7c
--- /dev/null
+++ b/tgui/packages/tgui/interfaces/ComputerFabricator/CfStep1.tsx
@@ -0,0 +1,53 @@
+import { useBackend } from '../../backend';
+import { Box, Button, Section, Table } from '../../components';
+
+// This had a pretty gross backend so this was unfortunately one of the
+// best ways of doing it.
+export const CfStep1 = (props) => {
+ const { act } = useBackend();
+ return (
+
+
+ Choose your Device
+
+
+
+
+
+
+ );
+};
diff --git a/tgui/packages/tgui/interfaces/ComputerFabricator.jsx b/tgui/packages/tgui/interfaces/ComputerFabricator/CfStep2.tsx
similarity index 67%
rename from tgui/packages/tgui/interfaces/ComputerFabricator.jsx
rename to tgui/packages/tgui/interfaces/ComputerFabricator/CfStep2.tsx
index 619f5c0feb..6975129674 100644
--- a/tgui/packages/tgui/interfaces/ComputerFabricator.jsx
+++ b/tgui/packages/tgui/interfaces/ComputerFabricator/CfStep2.tsx
@@ -1,91 +1,31 @@
import { multiline } from 'common/string';
-import { useBackend } from '../backend';
-import { Box, Button, Section, Table, Tooltip } from '../components';
-import { Window } from '../layouts';
+import { useBackend } from '../../backend';
+import { Box, Button, Section, Table, Tooltip } from '../../components';
+import { Data } from './types';
-export const ComputerFabricator = (props) => {
- const { act, data } = useBackend();
- return (
-
-
-
- Your perfect device, only three steps away...
-
- {data.state !== 0 && (
-
- )}
- {data.state === 0 &&
-
- );
-};
+export const CfStep2 = (props) => {
+ const { act, data } = useBackend();
-// This had a pretty gross backend so this was unfortunately one of the
-// best ways of doing it.
-const CfStep1 = (props) => {
- const { act, data } = useBackend();
- return (
-
-
- Choose your Device
-
-
-
-
-
-
- );
-};
+ const {
+ totalprice,
+ hw_battery,
+ hw_disk,
+ hw_netcard,
+ hw_nanoprint,
+ hw_card,
+ devtype,
+ hw_cpu,
+ hw_tesla,
+ } = data;
-const CfStep2 = (props) => {
- const { act, data } = useBackend();
return (
- {data.totalprice}₮
+ {totalprice}₮
}
>
@@ -103,7 +43,7 @@ const CfStep2 = (props) => {
- {data.devtype !== 2 && (
+ {devtype !== 2 && (
Processor Unit:
@@ -329,7 +269,7 @@ const CfStep2 = (props) => {
);
};
-
-const CfStep3 = (props) => {
- const { act, data } = useBackend();
- return (
-
-
- Your device is ready for fabrication...
-
-
- Please swipe your ID now to authorize payment of:
-
-
- {data.totalprice}₮
-
-
-
- );
-};
-
-const CfStep4 = (props) => {
- return (
-
-
- Thank you for your purchase!
-
-
- If you experience any difficulties with your new device, please contact
- your local network administrator.
-
-
- );
-};
diff --git a/tgui/packages/tgui/interfaces/ComputerFabricator/CfStep3.tsx b/tgui/packages/tgui/interfaces/ComputerFabricator/CfStep3.tsx
new file mode 100644
index 0000000000..668b739f29
--- /dev/null
+++ b/tgui/packages/tgui/interfaces/ComputerFabricator/CfStep3.tsx
@@ -0,0 +1,19 @@
+import { Box, Section } from '../../components';
+
+export const CfStep3 = (props: { totalprice: number }) => {
+ const { totalprice } = props;
+ return (
+
+
+ Your device is ready for fabrication...
+
+
+ Please swipe your ID now to authorize payment of:
+
+
+ {totalprice}₮
+
+
+
+ );
+};
diff --git a/tgui/packages/tgui/interfaces/ComputerFabricator/CfStep4.tsx b/tgui/packages/tgui/interfaces/ComputerFabricator/CfStep4.tsx
new file mode 100644
index 0000000000..62fb59fa85
--- /dev/null
+++ b/tgui/packages/tgui/interfaces/ComputerFabricator/CfStep4.tsx
@@ -0,0 +1,15 @@
+import { Box, Section } from '../../components';
+
+export const CfStep4 = (props) => {
+ return (
+
+
+ Thank you for your purchase!
+
+
+ If you experience any difficulties with your new device, please contact
+ your local network administrator.
+
+
+ );
+};
diff --git a/tgui/packages/tgui/interfaces/ComputerFabricator/index.tsx b/tgui/packages/tgui/interfaces/ComputerFabricator/index.tsx
new file mode 100644
index 0000000000..b3919e0d0a
--- /dev/null
+++ b/tgui/packages/tgui/interfaces/ComputerFabricator/index.tsx
@@ -0,0 +1,37 @@
+import { useBackend } from '../../backend';
+import { Button, Section } from '../../components';
+import { Window } from '../../layouts';
+import { CfStep1 } from './CfStep1';
+import { CfStep2 } from './CfStep2';
+import { CfStep3 } from './CfStep3';
+import { CfStep4 } from './CfStep4';
+import { Data } from './types';
+
+export const ComputerFabricator = (props) => {
+ const { act, data } = useBackend();
+
+ const { state, totalprice } = data;
+
+ const tab: React.JSX.Element[] = [];
+
+ tab[0] =
+
+
+ Your perfect device, only three steps away...
+
+ {state !== 0 && (
+
+ )}
+ {tab[state]}
+
+
+ );
+};
diff --git a/tgui/packages/tgui/interfaces/ComputerFabricator/types.ts b/tgui/packages/tgui/interfaces/ComputerFabricator/types.ts
new file mode 100644
index 0000000000..405a1007bd
--- /dev/null
+++ b/tgui/packages/tgui/interfaces/ComputerFabricator/types.ts
@@ -0,0 +1,14 @@
+import { BooleanLike } from 'common/react';
+
+export type Data = {
+ state: number;
+ devtype: number | undefined;
+ hw_battery: number | undefined;
+ hw_disk: number | undefined;
+ hw_netcard: number | undefined;
+ hw_tesla: BooleanLike;
+ hw_nanoprint: BooleanLike;
+ hw_card: BooleanLike;
+ hw_cpu: number | undefined;
+ totalprice: number | undefined;
+};
diff --git a/tgui/packages/tgui/interfaces/CookingAppliance.jsx b/tgui/packages/tgui/interfaces/CookingAppliance.tsx
similarity index 87%
rename from tgui/packages/tgui/interfaces/CookingAppliance.jsx
rename to tgui/packages/tgui/interfaces/CookingAppliance.tsx
index 4efa443a6a..7b951cd5db 100644
--- a/tgui/packages/tgui/interfaces/CookingAppliance.jsx
+++ b/tgui/packages/tgui/interfaces/CookingAppliance.tsx
@@ -1,3 +1,5 @@
+import { BooleanLike } from 'common/react';
+
import { useBackend } from '../backend';
import {
AnimatedNumber,
@@ -9,8 +11,22 @@ import {
} from '../components';
import { Window } from '../layouts';
+type Data = {
+ temperature: number;
+ optimalTemp: number;
+ temperatureEnough: BooleanLike;
+ efficiency: number;
+ containersRemovable: BooleanLike;
+ our_contents: {
+ empty: BooleanLike;
+ progress: number;
+ progressText: string;
+ container: string | null;
+ }[];
+};
+
export const CookingAppliance = (props) => {
- const { act, data } = useBackend();
+ const { act, data } = useBackend();
const {
temperature,
diff --git a/tgui/packages/tgui/interfaces/CrewMonitor.jsx b/tgui/packages/tgui/interfaces/CrewMonitor.jsx
deleted file mode 100644
index 0dfb9c3955..0000000000
--- a/tgui/packages/tgui/interfaces/CrewMonitor.jsx
+++ /dev/null
@@ -1,188 +0,0 @@
-import { sortBy } from 'common/collections';
-import { flow } from 'common/fp';
-import { useState } from 'react';
-
-import { useBackend } from '../backend';
-import { Box, Button, Icon, NanoMap, Table, Tabs } from '../components';
-import { Window } from '../layouts';
-
-const getStatText = (cm) => {
- if (cm.dead) {
- return 'Deceased';
- }
- if (parseInt(cm.stat, 10) === 1) {
- // Unconscious
- return 'Unconscious';
- }
- return 'Living';
-};
-
-const getStatColor = (cm) => {
- if (cm.dead) {
- return 'red';
- }
- if (parseInt(cm.stat, 10) === 1) {
- // Unconscious
- return 'orange';
- }
- return 'green';
-};
-
-export const CrewMonitor = () => {
- const [tabIndex, setTabIndex] = useState(0);
- const [zoom, setZoom] = useState(1);
-
- function handleTabIndex(value) {
- setTabIndex(value);
- }
-
- function handleZoom(value) {
- setZoom(value);
- }
-
- return (
-
-
-
-
- );
-};
-
-export const CrewMonitorContent = (props) => {
- const { act, data, config } = useBackend();
-
- const crew = flow([
- sortBy((cm) => cm.name),
- sortBy((cm) => cm?.x),
- sortBy((cm) => cm?.y),
- sortBy((cm) => cm?.realZ),
- ])(data.crewmembers || []);
-
- let body;
- // Data view
- if (props.tabIndex === 0) {
- body = (
-
-
- );
- } else if (props.tabIndex === 1) {
- // Please note, if you ever change the zoom values,
- // you MUST update styles/components/Tooltip.scss
- // and change the @for scss to match.
- body =
- props.onTabIndex(0)}
- >
-
- props.onTabIndex(1)}
- >
-
-
- {body}
-
- );
-};
-
-const CrewMonitorMapView = (props) => {
- const { act, config, data } = useBackend();
- return (
-
- props.onZoom(v)}>
- {data.crewmembers
- .filter(
- (x) => x.sensor_type === 3 && ~~x.realZ === ~~config.mapZLevel,
- )
- .map((cm) => (
-
-
- );
-};
diff --git a/tgui/packages/tgui/interfaces/CrewMonitor.tsx b/tgui/packages/tgui/interfaces/CrewMonitor.tsx
new file mode 100644
index 0000000000..385f158dd8
--- /dev/null
+++ b/tgui/packages/tgui/interfaces/CrewMonitor.tsx
@@ -0,0 +1,231 @@
+import { sortBy } from 'common/collections';
+import { flow } from 'common/fp';
+import { BooleanLike } from 'common/react';
+import { useState } from 'react';
+
+import { useBackend } from '../backend';
+import { Box, Button, Icon, NanoMap, Table, Tabs } from '../components';
+import { Window } from '../layouts';
+
+type Data = {
+ zoomScale: number;
+ isAI: BooleanLike;
+ map_levels: number[];
+ crewmembers: crewmember[];
+};
+
+type crewmember = {
+ sensor_type: number;
+ name: string;
+ rank: string;
+ assignment: string;
+ dead: BooleanLike;
+ stat: number;
+ oxy: number;
+ tox: number;
+ fire: number;
+ brute: number;
+ area: string;
+ x: number;
+ y: number;
+ realZ: number;
+ z: number;
+ ref: string;
+};
+
+const getStatText = (cm: crewmember) => {
+ if (cm.dead) {
+ return 'Deceased';
+ }
+ if (cm.stat === 1) {
+ // Unconscious
+ return 'Unconscious';
+ }
+ return 'Living';
+};
+
+const getStatColor = (cm: crewmember) => {
+ if (cm.dead) {
+ return 'red';
+ }
+ if (cm.stat === 1) {
+ // Unconscious
+ return 'orange';
+ }
+ return 'green';
+};
+
+export const CrewMonitor = () => {
+ const [tabIndex, setTabIndex] = useState(0);
+ const [zoom, setZoom] = useState(1);
+
+ function handleTabIndex(value: number) {
+ setTabIndex(value);
+ }
+
+ function handleZoom(value: number) {
+ setZoom(value);
+ }
+
+ return (
+
+
+
+
+ );
+};
+
+export const CrewMonitorContent = (props: {
+ tabIndex: number;
+ zoom: number;
+ onTabIndex: Function;
+ onZoom: Function;
+}) => {
+ const { data } = useBackend();
+
+ const { crewmembers = [] } = data;
+
+ const crew: crewmember[] = flow([
+ sortBy((cm: crewmember) => cm.name),
+ sortBy((cm: crewmember) => cm?.x),
+ sortBy((cm: crewmember) => cm?.y),
+ sortBy((cm: crewmember) => cm?.realZ),
+ ])(crewmembers);
+
+ const tab: React.JSX.Element[] = [];
+ // Data view
+ // Please note, if you ever change the zoom values,
+ // you MUST update styles/components/Tooltip.scss
+ // and change the @for scss to match.
+ tab[0] =
+ props.onTabIndex(0)}
+ >
+
+ props.onTabIndex(1)}
+ >
+
+
+ {tab[props.tabIndex] || ERROR }
+
+ );
+};
+
+const CrewMonitorCrew = (props: { crew: crewmember[] }) => {
+ const { act, data } = useBackend();
+
+ const { crew } = props;
+
+ const { isAI } = data;
+
+ return (
+
+
+ );
+};
+
+const CrewMonitorMapView = (props: { zoom: number; onZoom: Function }) => {
+ const { config, data } = useBackend();
+
+ const { zoomScale, crewmembers } = data;
+
+ return (
+
+ props.onZoom(v)}>
+ {crewmembers
+ .filter(
+ (x) => x.sensor_type === 3 && ~~x.realZ === ~~config.mapZLevel,
+ )
+ .map((cm) => (
+
+
+ );
+};
diff --git a/tgui/packages/tgui/interfaces/Cryo.jsx b/tgui/packages/tgui/interfaces/Cryo/CryoContent.tsx
similarity index 78%
rename from tgui/packages/tgui/interfaces/Cryo.jsx
rename to tgui/packages/tgui/interfaces/Cryo/CryoContent.tsx
index 613b1905a5..994f881170 100644
--- a/tgui/packages/tgui/interfaces/Cryo.jsx
+++ b/tgui/packages/tgui/interfaces/Cryo/CryoContent.tsx
@@ -1,6 +1,6 @@
import { toFixed } from 'common/math';
-import { useBackend } from '../backend';
+import { useBackend } from '../../backend';
import {
AnimatedNumber,
Box,
@@ -10,50 +10,15 @@ import {
LabeledList,
ProgressBar,
Section,
-} from '../components';
-import { Window } from '../layouts';
+} from '../../components';
+import { Data } from './types';
-const damageTypes = [
- {
- label: 'Resp.',
- type: 'oxyLoss',
- },
- {
- label: 'Toxin',
- type: 'toxLoss',
- },
- {
- label: 'Brute',
- type: 'bruteLoss',
- },
- {
- label: 'Burn',
- type: 'fireLoss',
- },
-];
-
-const statNames = [
- ['good', 'Conscious'],
- ['average', 'Unconscious'],
- ['bad', 'DEAD'],
-];
-
-export const Cryo = (props) => {
- return (
-
-
-
-
- );
-};
-
-const CryoContent = (props) => {
- const { act, data } = useBackend();
+export const CryoContent = (props) => {
+ const { act, data } = useBackend();
const {
isOperating,
hasOccupant,
- occupant = [],
+ occupant,
cellTemperature,
cellTemperatureStatus,
isBeakerLoaded,
@@ -62,7 +27,7 @@ const CryoContent = (props) => {
<>
{
0 ? 'good' : 'average'}
>
@@ -104,8 +69,8 @@ const CryoContent = (props) => {
/>
+ {damageTypes.map((damageType, i) => (
+
{
) : (
-
No occupant detected.
@@ -163,7 +128,7 @@ const CryoContent = (props) => {
};
const CryoBeaker = (props) => {
- const { act, data } = useBackend();
+ const { act, data } = useBackend();
const { isBeakerLoaded, beakerLabel, beakerVolume } = data;
if (isBeakerLoaded) {
return (
diff --git a/tgui/packages/tgui/interfaces/Cryo/constants.ts b/tgui/packages/tgui/interfaces/Cryo/constants.ts
new file mode 100644
index 0000000000..4bb990c953
--- /dev/null
+++ b/tgui/packages/tgui/interfaces/Cryo/constants.ts
@@ -0,0 +1,24 @@
+const damageTypes: { label: string; type: string }[] = [
+ {
+ label: 'Resp.',
+ type: 'oxyLoss',
+ },
+ {
+ label: 'Toxin',
+ type: 'toxLoss',
+ },
+ {
+ label: 'Brute',
+ type: 'bruteLoss',
+ },
+ {
+ label: 'Burn',
+ type: 'fireLoss',
+ },
+];
+
+const statNames: string[][] = [
+ ['good', 'Conscious'],
+ ['average', 'Unconscious'],
+ ['bad', 'DEAD'],
+];
diff --git a/tgui/packages/tgui/interfaces/Cryo/index.tsx b/tgui/packages/tgui/interfaces/Cryo/index.tsx
new file mode 100644
index 0000000000..481740ce71
--- /dev/null
+++ b/tgui/packages/tgui/interfaces/Cryo/index.tsx
@@ -0,0 +1,12 @@
+import { Window } from '../../layouts';
+import { CryoContent } from './CryoContent';
+
+export const Cryo = (props) => {
+ return (
+
+
+
+
+ );
+};
diff --git a/tgui/packages/tgui/interfaces/Cryo/types.ts b/tgui/packages/tgui/interfaces/Cryo/types.ts
new file mode 100644
index 0000000000..49d2d2e303
--- /dev/null
+++ b/tgui/packages/tgui/interfaces/Cryo/types.ts
@@ -0,0 +1,23 @@
+import { BooleanLike } from 'common/react';
+
+export type Data = {
+ isOperating: BooleanLike;
+ hasOccupant: BooleanLike;
+ occupant: {
+ name: string;
+ stat: number;
+ health: number;
+ maxHealth: number;
+ minHealth: number;
+ bruteLoss: number;
+ oxyLoss: number;
+ toxLoss: number;
+ fireLoss: number;
+ bodyTemperature: number;
+ };
+ cellTemperature: number;
+ cellTemperatureStatus: string;
+ isBeakerLoaded: BooleanLike;
+ beakerLabel: string | null;
+ beakerVolume: number;
+};
diff --git a/tgui/packages/tgui/interfaces/CryoStorage.jsx b/tgui/packages/tgui/interfaces/CryoStorage.tsx
similarity index 61%
rename from tgui/packages/tgui/interfaces/CryoStorage.jsx
rename to tgui/packages/tgui/interfaces/CryoStorage.tsx
index d947810e38..b564e95578 100644
--- a/tgui/packages/tgui/interfaces/CryoStorage.jsx
+++ b/tgui/packages/tgui/interfaces/CryoStorage.tsx
@@ -1,16 +1,29 @@
+import { BooleanLike } from 'common/react';
import { useState } from 'react';
import { useBackend } from '../backend';
-import { Box, Button, NoticeBox, Section, Tabs } from '../components';
+import { Box, NoticeBox, Section, Tabs } from '../components';
import { Window } from '../layouts';
+export type Data = {
+ real_name: string;
+ allow_items: BooleanLike;
+ crew: string[];
+ items: string[];
+};
+
export const CryoStorage = (props) => {
- const { act, data } = useBackend();
+ const { data } = useBackend();
const { real_name, allow_items } = data;
const [tab, setTab] = useState(0);
+ const tabs: React.JSX.Element[] = [];
+
+ tabs[0] =
@@ -25,15 +38,14 @@ export const CryoStorage = (props) => {
)}
Welcome, {real_name}.
- {tab === 0 &&
);
};
export const CryoStorageCrew = (props) => {
- const { act, data } = useBackend();
+ const { data } = useBackend();
const { crew } = data;
@@ -50,7 +62,29 @@ export const CryoStorageCrew = (props) => {
};
export const CryoStorageItems = (props) => {
- const { act, data } = useBackend();
+ const { data } = useBackend();
+
+ const { items } = data;
+
+ return (
+
+ {(items.length &&
+ items.map((item) => (
+
+ {item}
+
+ ))) || No items stored. }
+
+ );
+};
+
+export const CryoStorageDefaultError = (props) => {
+ return Disabled ;
+};
+
+/* Unused here
+export const CryoStorageItems = (props) => {
+ const { act, data } = useBackend();
const { items } = data;
@@ -76,3 +110,4 @@ export const CryoStorageItems = (props) => {
);
};
+*/
diff --git a/tgui/packages/tgui/interfaces/CryoStorageVr.jsx b/tgui/packages/tgui/interfaces/CryoStorageVr.jsx
deleted file mode 100644
index 173842a7a8..0000000000
--- a/tgui/packages/tgui/interfaces/CryoStorageVr.jsx
+++ /dev/null
@@ -1,51 +0,0 @@
-import { useState } from 'react';
-
-import { useBackend } from '../backend';
-import { Box, NoticeBox, Section, Tabs } from '../components';
-import { Window } from '../layouts';
-import { CryoStorageCrew } from './CryoStorage';
-
-export const CryoStorageVr = (props) => {
- const { act, data } = useBackend();
-
- const { real_name, allow_items } = data;
-
- const [tab, setTab] = useState(0);
-
- return (
-
-
-
- setTab(0)}>
- Crew
-
- {!!allow_items && (
- setTab(1)}>
- Items
-
- )}
-
- Welcome, {real_name}.
- {tab === 0 &&
-
- );
-};
-
-export const CryoStorageItemsVr = (props) => {
- const { act, data } = useBackend();
-
- const { items } = data;
-
- return (
-
- {(items.length &&
- items.map((item) => (
-
- {item}
-
- ))) || No items stored. }
-
- );
-};
diff --git a/tgui/packages/tgui/interfaces/DNAForensics.jsx b/tgui/packages/tgui/interfaces/DNAForensics.tsx
similarity index 89%
rename from tgui/packages/tgui/interfaces/DNAForensics.jsx
rename to tgui/packages/tgui/interfaces/DNAForensics.tsx
index b1dc785183..ab160dc8ef 100644
--- a/tgui/packages/tgui/interfaces/DNAForensics.jsx
+++ b/tgui/packages/tgui/interfaces/DNAForensics.tsx
@@ -1,9 +1,18 @@
+import { BooleanLike } from 'common/react';
+
import { useBackend } from '../backend';
import { Box, Button, LabeledList, ProgressBar, Section } from '../components';
import { Window } from '../layouts';
+type Data = {
+ scan_progress: number;
+ scanning: BooleanLike;
+ bloodsamp: string;
+ bloodsamp_desc: string;
+};
+
export const DNAForensics = (props) => {
- const { act, data } = useBackend();
+ const { act, data } = useBackend();
const { scan_progress, scanning, bloodsamp, bloodsamp_desc } = data;
return (
diff --git a/tgui/packages/tgui/interfaces/DNAModifier.jsx b/tgui/packages/tgui/interfaces/DNAModifier.jsx
deleted file mode 100644
index 72560e1470..0000000000
--- a/tgui/packages/tgui/interfaces/DNAModifier.jsx
+++ /dev/null
@@ -1,701 +0,0 @@
-import { useBackend } from '../backend';
-import {
- Box,
- Button,
- Dimmer,
- Flex,
- Icon,
- Knob,
- LabeledList,
- ProgressBar,
- Section,
- Tabs,
-} from '../components';
-import { Window } from '../layouts';
-import { ComplexModal } from './common/ComplexModal';
-
-const stats = [
- ['good', 'Alive'],
- ['average', 'Unconscious'],
- ['bad', 'DEAD'],
-];
-
-const operations = [
- ['ui', 'Modify U.I.', 'dna'],
- ['se', 'Modify S.E.', 'dna'],
- ['buffer', 'Transfer Buffers', 'syringe'],
- ['rejuvenators', 'Rejuvenators', 'flask'],
-];
-
-const rejuvenatorsDoses = [5, 10, 20, 30, 50];
-
-export const DNAModifier = (props) => {
- const { act, data } = useBackend();
- const { irradiating, dnaBlockSize, occupant } = data;
- const isDNAInvalid =
- !occupant.isViableSubject ||
- !occupant.uniqueIdentity ||
- !occupant.structuralEnzymes;
- let radiatingModal;
- if (irradiating) {
- radiatingModal =
-
-
-
- );
-};
-
-const DNAModifierOccupant = (props) => {
- const { act, data } = useBackend();
- const { locked, hasOccupant, occupant } = data;
- return (
-
-
- Door Lock:
-
-
-
-
- }
- >
- {hasOccupant ? (
- <>
-
-
- {occupant.name}
-
-
-
- {stats[occupant.stat][1]}
-
-
-
- {props.isDNAInvalid ? (
-
-
- ) : (
-
-
-
-
- {data.occupant.uniqueEnzymes ? (
- data.occupant.uniqueEnzymes
- ) : (
-
-
- )}
-
-
- )}
-
- ) : (
- Cell unoccupied.
- )}
-
- );
-};
-
-const DNAModifierMain = (props) => {
- const { act, data } = useBackend();
- const { selectedMenuKey, hasOccupant, occupant } = data;
- if (!hasOccupant) {
- return (
-
-
-
-
- No occupant in DNA modifier. -
-
-
- );
- } else if (props.isDNAInvalid) {
- return (
-
-
-
-
- No operation possible on this subject. -
-
-
- );
- }
- let body;
- if (selectedMenuKey === 'ui') {
- body = (
- <>
-
-
- {operations.map((op, i) => (
- act('selectMenuKey', { key: op[0] })}
- >
-
- ))}
-
- {body}
-
- );
-};
-
-const DNAModifierMainUI = (props) => {
- const { act, data } = useBackend();
- const {
- selectedUIBlock,
- selectedUISubBlock,
- selectedUITarget,
- dnaBlockSize,
- occupant,
- } = data;
- return (
-
-
-
- value.toString(16).toUpperCase()}
- ml="0"
- onChange={(e, val) => act('changeUITarget', { value: val })}
- />
-
-
-
-
- );
-};
-
-const DNAModifierMainSE = (props) => {
- const { act, data } = useBackend();
- const { selectedSEBlock, selectedSESubBlock, dnaBlockSize, occupant } = data;
- return (
-
-
- );
-};
-
-const DNAModifierMainRadiationEmitter = (props) => {
- const { act, data } = useBackend();
- const { radiationIntensity, radiationDuration } = data;
- return (
-
-
-
- act('radiationIntensity', { value: val })}
- />
-
-
- act('radiationDuration', { value: val })}
- />
-
-
-
-
- );
-};
-
-const DNAModifierMainBuffers = (props) => {
- const { act, data } = useBackend();
- const { buffers } = data;
- let bufferElements = buffers.map((buffer, i) => (
-
- {bufferElements}
-
-
-
-
- act('bufferOption', {
- option: 'clear',
- id: id,
- })
- }
- >
- Clear
-
-
-
-
- }
- >
-
-
-
-
-
-
-
- {!!buffer.data && (
- <>
-
- {buffer.owner || Unknown }
-
-
- {buffer.type === 'ui'
- ? 'Unique Identifiers'
- : 'Structural Enzymes'}
- {!!buffer.ue && ' and Unique Enzymes'}
-
-
-
-
-
-
-
- )}
-
- {!buffer.data && (
-
- This buffer is empty.
-
- )}
-
-
- );
-};
-
-const DNAModifierMainBuffersDisk = (props) => {
- const { act, data } = useBackend();
- const { hasDisk, disk } = data;
- return (
-
- act('wipeDisk')}
- >
- Wipe
-
-
-
- }
- >
- {hasDisk ? (
- disk.data ? (
-
-
- {disk.label ? disk.label : 'No label'}
-
-
- {disk.owner ? disk.owner : Unknown }
-
-
- {disk.type === 'ui' ? 'Unique Identifiers' : 'Structural Enzymes'}
- {!!disk.ue && ' and Unique Enzymes'}
-
-
- ) : (
- Disk is blank.
- )
- ) : (
-
-
- No disk inserted. -
- )}
-
- );
-};
-
-const DNAModifierMainRejuvenators = (props) => {
- const { act, data } = useBackend();
- const { isBeakerLoaded, beakerVolume, beakerLabel } = data;
- return (
- act('ejectBeaker')}
- >
- Eject
-
- }
- >
- {isBeakerLoaded ? (
-
-
- {rejuvenatorsDoses.map((a, i) => (
-
- ))}
-
-
-
- {beakerLabel ? beakerLabel : 'No label'}
- {beakerVolume ? (
-
- {beakerVolume} unit{beakerVolume === 1 ? '' : 's'} remaining
-
- ) : (
- Empty
- )}
-
-
- ) : (
-
-
- No beaker loaded. -
- )}
-
- );
-};
-
-const DNAModifierIrradiating = (props) => {
- return (
-
-
-
-
-
-
-
-
-
- );
-};
-
-const DNAModifierBlocks = (props) => {
- const { act, data } = useBackend();
- const { dnaString, selectedBlock, selectedSubblock, blockSize, action } =
- props;
-
- const characters = dnaString.split('');
- let curBlock = 0;
- let dnaBlocks = [];
- for (let block = 0; block < characters.length; block += blockSize) {
- const realBlock = block / blockSize + 1;
- let subBlocks = [];
- for (let subblock = 0; subblock < blockSize; subblock++) {
- const realSubblock = subblock + 1;
- subBlocks.push(
- ,
- );
- }
- dnaBlocks.push(
-
-
- {realBlock}
-
- {subBlocks}
- ,
- );
- }
- return {dnaBlocks} ;
-};
diff --git a/tgui/packages/tgui/interfaces/DNAModifier/DNAModifierBlocks.tsx b/tgui/packages/tgui/interfaces/DNAModifier/DNAModifierBlocks.tsx
new file mode 100644
index 0000000000..1d465d3e5a
--- /dev/null
+++ b/tgui/packages/tgui/interfaces/DNAModifier/DNAModifierBlocks.tsx
@@ -0,0 +1,59 @@
+import { useBackend } from '../../backend';
+import { Box, Button, Flex } from '../../components';
+
+export const DNAModifierBlocks = (props: {
+ dnaString: string;
+ selectedBlock: number;
+ selectedSubblock: number;
+ blockSize: number;
+ action: string;
+}) => {
+ const { act } = useBackend();
+
+ const { dnaString, selectedBlock, selectedSubblock, blockSize, action } =
+ props;
+
+ const characters: string[] = dnaString.split('');
+ let dnaBlocks: React.JSX.Element[] = [];
+ for (let block = 0; block < characters.length; block += blockSize) {
+ const realBlock: number = block / blockSize + 1;
+ let subBlocks: React.JSX.Element[] = [];
+ for (let subblock = 0; subblock < blockSize; subblock++) {
+ const realSubblock: number = subblock + 1;
+ subBlocks.push(
+ ,
+ );
+ }
+ dnaBlocks.push(
+
+
+ {realBlock}
+
+ {subBlocks}
+ ,
+ );
+ }
+ return {dnaBlocks} ;
+};
diff --git a/tgui/packages/tgui/interfaces/DNAModifier/DNAModifierIrradiating.tsx b/tgui/packages/tgui/interfaces/DNAModifier/DNAModifierIrradiating.tsx
new file mode 100644
index 0000000000..1b6c04d76e
--- /dev/null
+++ b/tgui/packages/tgui/interfaces/DNAModifier/DNAModifierIrradiating.tsx
@@ -0,0 +1,22 @@
+import { Box, Dimmer, Icon } from '../../components';
+
+export const DNAModifierIrradiating = (props: { duration: number }) => {
+ return (
+
+
+
+
+
+
+
+
+
+ );
+};
diff --git a/tgui/packages/tgui/interfaces/DNAModifier/DNAModifierMain.tsx b/tgui/packages/tgui/interfaces/DNAModifier/DNAModifierMain.tsx
new file mode 100644
index 0000000000..aa08e16013
--- /dev/null
+++ b/tgui/packages/tgui/interfaces/DNAModifier/DNAModifierMain.tsx
@@ -0,0 +1,265 @@
+import { BooleanLike } from 'common/react';
+
+import { useBackend } from '../../backend';
+import {
+ Box,
+ Button,
+ Flex,
+ Icon,
+ Knob,
+ LabeledList,
+ Section,
+ Tabs,
+} from '../../components';
+import { operations, rejuvenatorsDoses } from './constants';
+import { DNAModifierBlocks } from './DNAModifierBlocks';
+import { DNAModifierMainBuffers } from './DNAModifierMainBuffers';
+import { Data } from './types';
+
+export const DNAModifierMain = (props: { isDNAInvalid: BooleanLike }) => {
+ const { act, data } = useBackend();
+
+ const { selectedMenuKey, hasOccupant } = data;
+
+ if (!hasOccupant) {
+ return (
+
+
+
+
+ No occupant in DNA modifier. +
+
+
+ );
+ } else if (props.isDNAInvalid) {
+ return (
+
+
+
+
+ No operation possible on this subject. +
+
+
+ );
+ }
+ let body;
+ if (selectedMenuKey === 'ui') {
+ body = (
+ <>
+
+
+ {operations.map((op, i) => (
+ act('selectMenuKey', { key: op[0] })}
+ >
+
+ ))}
+
+ {body}
+
+ );
+};
+
+const DNAModifierMainUI = (props) => {
+ const { act, data } = useBackend();
+
+ const {
+ selectedUIBlock,
+ selectedUISubBlock,
+ selectedUITarget,
+ dnaBlockSize,
+ occupant,
+ } = data;
+
+ return (
+
+
+
+ value.toString(16).toUpperCase()}
+ ml="0"
+ onChange={(e, val) => act('changeUITarget', { value: val })}
+ />
+
+
+
+
+ );
+};
+
+const DNAModifierMainSE = (props) => {
+ const { act, data } = useBackend();
+
+ const { selectedSEBlock, selectedSESubBlock, dnaBlockSize, occupant } = data;
+
+ return (
+
+
+ );
+};
+
+const DNAModifierMainRadiationEmitter = (props) => {
+ const { act, data } = useBackend();
+
+ const { radiationIntensity, radiationDuration } = data;
+
+ return (
+
+
+
+ act('radiationIntensity', { value: val })}
+ />
+
+
+ act('radiationDuration', { value: val })}
+ />
+
+
+
+
+ );
+};
+
+const DNAModifierMainRejuvenators = (props) => {
+ const { act, data } = useBackend();
+
+ const { isBeakerLoaded, beakerVolume, beakerLabel } = data;
+
+ return (
+ act('ejectBeaker')}
+ >
+ Eject
+
+ }
+ >
+ {isBeakerLoaded ? (
+
+
+ {rejuvenatorsDoses.map((a, i) => (
+
+ ))}
+
+
+
+ {beakerLabel ? beakerLabel : 'No label'}
+ {beakerVolume ? (
+
+ {beakerVolume} unit{beakerVolume === 1 ? '' : 's'} remaining
+
+ ) : (
+ Empty
+ )}
+
+
+ ) : (
+
+
+ No beaker loaded. +
+ )}
+
+ );
+};
diff --git a/tgui/packages/tgui/interfaces/DNAModifier/DNAModifierMainBuffers.tsx b/tgui/packages/tgui/interfaces/DNAModifier/DNAModifierMainBuffers.tsx
new file mode 100644
index 0000000000..d3efe7678d
--- /dev/null
+++ b/tgui/packages/tgui/interfaces/DNAModifier/DNAModifierMainBuffers.tsx
@@ -0,0 +1,254 @@
+import { useBackend } from '../../backend';
+import { Box, Button, Icon, LabeledList, Section } from '../../components';
+import { buffData, Data } from './types';
+
+export const DNAModifierMainBuffers = (props) => {
+ const { data } = useBackend();
+
+ const { buffers } = data;
+
+ let bufferElements = buffers.map((buffer, i) => (
+ {bufferElements}
+
+
+
+ act('bufferOption', {
+ option: 'clear',
+ id: id,
+ })
+ }
+ >
+ Clear
+
+
+
+
+ }
+ >
+
+
+
+
+
+
+
+ {!!buffer.data && (
+ <>
+
+ {buffer.owner || Unknown }
+
+
+ {buffer.type === 'ui'
+ ? 'Unique Identifiers'
+ : 'Structural Enzymes'}
+ {!!buffer.ue && ' and Unique Enzymes'}
+
+
+
+
+
+
+
+ )}
+
+ {!buffer.data && (
+
+ This buffer is empty.
+
+ )}
+
+
+ );
+};
+
+const DNAModifierMainBuffersDisk = (props) => {
+ const { act, data } = useBackend();
+ const { hasDisk, disk } = data;
+ return (
+
+ act('wipeDisk')}
+ >
+ Wipe
+
+
+
+ }
+ >
+ {hasDisk ? (
+ disk.data ? (
+
+
+ {disk.label ? disk.label : 'No label'}
+
+
+ {disk.owner ? disk.owner : Unknown }
+
+
+ {disk.type === 'ui' ? 'Unique Identifiers' : 'Structural Enzymes'}
+ {!!disk.ue && ' and Unique Enzymes'}
+
+
+ ) : (
+ Disk is blank.
+ )
+ ) : (
+
+
+ No disk inserted. +
+ )}
+
+ );
+};
diff --git a/tgui/packages/tgui/interfaces/DNAModifier/DNAModifierOccupant.tsx b/tgui/packages/tgui/interfaces/DNAModifier/DNAModifierOccupant.tsx
new file mode 100644
index 0000000000..b8fd28b5ce
--- /dev/null
+++ b/tgui/packages/tgui/interfaces/DNAModifier/DNAModifierOccupant.tsx
@@ -0,0 +1,103 @@
+import { BooleanLike } from 'common/react';
+
+import { useBackend } from '../../backend';
+import {
+ Box,
+ Button,
+ Icon,
+ LabeledList,
+ ProgressBar,
+ Section,
+} from '../../components';
+import { stats } from './constants';
+import { Data } from './types';
+
+export const DNAModifierOccupant = (props: { isDNAInvalid: BooleanLike }) => {
+ const { act, data } = useBackend();
+
+ const { locked, hasOccupant, occupant } = data;
+
+ return (
+
+
+ Door Lock:
+
+
+
+
+ }
+ >
+ {hasOccupant ? (
+ <>
+
+
+ {occupant.name}
+
+
+
+ {stats[occupant.stat!][1]}
+
+
+
+ {props.isDNAInvalid ? (
+
+
+ ) : (
+
+
+
+
+ {data.occupant.uniqueEnzymes ? (
+ data.occupant.uniqueEnzymes
+ ) : (
+
+
+ )}
+
+
+ )}
+
+ ) : (
+ Cell unoccupied.
+ )}
+
+ );
+};
diff --git a/tgui/packages/tgui/interfaces/DNAModifier/constants.ts b/tgui/packages/tgui/interfaces/DNAModifier/constants.ts
new file mode 100644
index 0000000000..d247c8a51a
--- /dev/null
+++ b/tgui/packages/tgui/interfaces/DNAModifier/constants.ts
@@ -0,0 +1,14 @@
+export const stats: string[][] = [
+ ['good', 'Alive'],
+ ['average', 'Unconscious'],
+ ['bad', 'DEAD'],
+];
+
+export const operations: string[][] = [
+ ['ui', 'Modify U.I.', 'dna'],
+ ['se', 'Modify S.E.', 'dna'],
+ ['buffer', 'Transfer Buffers', 'syringe'],
+ ['rejuvenators', 'Rejuvenators', 'flask'],
+];
+
+export const rejuvenatorsDoses: number[] = [5, 10, 20, 30, 50];
diff --git a/tgui/packages/tgui/interfaces/DNAModifier/index.tsx b/tgui/packages/tgui/interfaces/DNAModifier/index.tsx
new file mode 100644
index 0000000000..220f72de66
--- /dev/null
+++ b/tgui/packages/tgui/interfaces/DNAModifier/index.tsx
@@ -0,0 +1,29 @@
+import { useBackend } from '../../backend';
+import { Window } from '../../layouts';
+import { ComplexModal } from '../common/ComplexModal';
+import { DNAModifierIrradiating } from './DNAModifierIrradiating';
+import { DNAModifierMain } from './DNAModifierMain';
+import { DNAModifierOccupant } from './DNAModifierOccupant';
+import { Data } from './types';
+
+export const DNAModifier = (props) => {
+ const { data } = useBackend();
+
+ const { irradiating, occupant } = data;
+
+ const isDNAInvalid: boolean =
+ !occupant.isViableSubject ||
+ !occupant.uniqueIdentity ||
+ !occupant.structuralEnzymes;
+
+ return (
+
+
+
+
+ );
+};
diff --git a/tgui/packages/tgui/interfaces/DNAModifier/types.ts b/tgui/packages/tgui/interfaces/DNAModifier/types.ts
new file mode 100644
index 0000000000..73907fe9e7
--- /dev/null
+++ b/tgui/packages/tgui/interfaces/DNAModifier/types.ts
@@ -0,0 +1,54 @@
+import { BooleanLike } from 'common/react';
+
+export type Data = {
+ selectedMenuKey: string;
+ locked: BooleanLike;
+ hasOccupant: BooleanLike;
+ isInjectorReady: BooleanLike;
+ hasDisk: BooleanLike;
+ disk: buffData;
+ buffers: buffData[];
+ radiationIntensity: number;
+ radiationDuration: number;
+ irradiating: number;
+ dnaBlockSize: number;
+ selectedUIBlock: number;
+ selectedUISubBlock: number;
+ selectedSEBlock: number;
+ selectedSESubBlock: number;
+ selectedUITarget: number;
+ selectedUITargetHex: string;
+ occupant: {
+ name: string | null;
+ stat: number | null;
+ isViableSubject: BooleanLike | null;
+ health: number | null;
+ maxHealth: number | null;
+ minHealth: number | null;
+ uniqueEnzymes: string | null;
+ uniqueIdentity: string | null;
+ structuralEnzymes: string | null;
+ radiationLevel: number | null;
+ };
+ isBeakerLoaded: BooleanLike;
+ beakerLabel: string | null;
+ beakerVolume: number;
+ modal: modalData;
+};
+
+type modalData = {
+ id: string;
+ text: string;
+ args: {
+ id: string;
+ };
+ modal_type: string;
+};
+
+export type buffData = {
+ data: number[] | null;
+ owner: string | null;
+ label: string | null;
+ type: string | null;
+ ue: BooleanLike;
+};
diff --git a/tgui/packages/tgui/interfaces/DestinationTagger.jsx b/tgui/packages/tgui/interfaces/DestinationTagger.jsx
deleted file mode 100644
index ee46aa1fba..0000000000
--- a/tgui/packages/tgui/interfaces/DestinationTagger.jsx
+++ /dev/null
@@ -1,31 +0,0 @@
-import { useBackend } from '../backend';
-import { Button, Flex, Section } from '../components';
-import { Window } from '../layouts';
-
-export const DestinationTagger = (props) => {
- const { act, data } = useBackend();
-
- const { currTag, taggerLocs } = data;
-
- return (
-
-
-
-
- {taggerLocs.sort().map((tag) => (
-
-
-
- ))}
-
-
-
-
- );
-};
diff --git a/tgui/packages/tgui/interfaces/DestinationTagger.tsx b/tgui/packages/tgui/interfaces/DestinationTagger.tsx
new file mode 100644
index 0000000000..a55eef5fc4
--- /dev/null
+++ b/tgui/packages/tgui/interfaces/DestinationTagger.tsx
@@ -0,0 +1,50 @@
+import { useBackend } from '../backend';
+import { Button, Flex, Section } from '../components';
+import { Window } from '../layouts';
+
+type Data = {
+ currTag: string;
+ taggerLevels: { z: number; location: string }[];
+ taggerLocs: { tag: string; level: number }[];
+};
+
+export const DestinationTagger = (props) => {
+ const { act, data } = useBackend();
+
+ const { currTag, taggerLevels = [], taggerLocs } = data;
+
+ const unique_levels = taggerLevels.filter((obj, index) => {
+ return index === taggerLevels.findIndex((o) => obj.location === o.location);
+ });
+
+ return (
+
+
+
+ {unique_levels.map((level) => (
+
+
+ {taggerLocs.map(
+ (tag) =>
+ level.z === tag.level && (
+
+
+
+ ),
+ )}
+
+
+ ))}
+
+
+
+ );
+};
diff --git a/tgui/packages/tgui/interfaces/DiseaseSplicer.jsx b/tgui/packages/tgui/interfaces/DiseaseSplicer.tsx
similarity index 76%
rename from tgui/packages/tgui/interfaces/DiseaseSplicer.jsx
rename to tgui/packages/tgui/interfaces/DiseaseSplicer.tsx
index 4db3567cff..f962aa1628 100644
--- a/tgui/packages/tgui/interfaces/DiseaseSplicer.jsx
+++ b/tgui/packages/tgui/interfaces/DiseaseSplicer.tsx
@@ -1,9 +1,24 @@
+import { BooleanLike } from 'common/react';
+
import { useBackend } from '../backend';
import { Box, Button, LabeledList, ProgressBar, Section } from '../components';
import { Window } from '../layouts';
+type Data = {
+ dish_inserted: BooleanLike;
+ buffer: { name: string; stage: number } | null;
+ species_buffer: string | null;
+ busy: string | null;
+ growth: number;
+ effects:
+ | { name: string; stage: number; reference: string; badness: number }[]
+ | null;
+ info: string;
+ affected_species: string[] | null;
+};
+
export const DiseaseSplicer = (props) => {
- const { act, data } = useBackend();
+ const { act, data } = useBackend();
const { busy } = data;
@@ -28,7 +43,7 @@ export const DiseaseSplicer = (props) => {
};
const DiseaseSplicerVirusDish = (props) => {
- const { act, data } = useBackend();
+ const { act, data } = useBackend();
const { dish_inserted, effects, info, growth, affected_species } = data;
@@ -60,12 +75,12 @@ const DiseaseSplicerVirusDish = (props) => {
{info ? (
-
+
{info}
) : (
<>
-
+
{(effects &&
effects.map((effect) => (
@@ -74,23 +89,25 @@ const DiseaseSplicerVirusDish = (props) => {
))) || No virus sample loaded. }
-
- {!affected_species || !affected_species.length ? 'None' : null}
- {affected_species.sort().join(', ')}
+
+ {!affected_species || !affected_species.length
+ ? 'None'
+ : affected_species.sort().join(', ')}
-
+
CAUTION: Reverse engineering will destroy the viral sample.
- {effects.map((e) => (
-
- ))}
+ {effects &&
+ effects.map((e) => (
+
+ ))}
@@ -102,18 +119,9 @@ const DiseaseSplicerVirusDish = (props) => {
};
const DiseaseSplicerStorage = (props) => {
- const { act, data } = useBackend();
+ const { act, data } = useBackend();
- const {
- dish_inserted,
- buffer,
- species_buffer,
- effects,
- info,
- growth,
- affected_species,
- busy,
- } = data;
+ const { buffer, species_buffer, info } = data;
return (
@@ -173,7 +181,7 @@ const DiseaseSplicerStorage = (props) => {
act('set_dcall_area', { area: val })}
diff --git a/tgui/packages/tgui/interfaces/EmbeddedController.jsx b/tgui/packages/tgui/interfaces/EmbeddedController.jsx
deleted file mode 100644
index 8c52e3514e..0000000000
--- a/tgui/packages/tgui/interfaces/EmbeddedController.jsx
+++ /dev/null
@@ -1,757 +0,0 @@
-import { useBackend } from '../backend';
-import {
- Box,
- Button,
- Flex,
- Icon,
- LabeledList,
- ProgressBar,
- Section,
-} from '../components';
-import { Window } from '../layouts';
-import { createLogger } from '../logging';
-const logger = createLogger('fuck');
-
-// This UI uses an internal routing system for the many different variants of
-// embedded controllers in use.
-let primaryRoutes = {};
-
-/**
- * This is an all-in-one replacement for the following NanoUI Templates:
- * - advanced_airlock_console.tmpl
- * - docking_airlock_console.tmpl
- * - door_access_console.tmpl
- * - escape_pod_console.tmpl
- * - escape_pod_berth_console.tmpl
- * - multi_docking_console.tmpl
- * - phoron_airlock_console.tmpl
- * - simple_airlock_console.tmpl
- * - simple_docking_console.tmpl
- * - simple_docking_console_pod.tmpl -- Funny enough, wasn't used anywhere.
- */
-
-/**
- * Let's cover all of the attributes of `data` for this UI right here.
- * For those unfamiliar with JSDoc syntax, [param] indicates
- * an optional parameter.
- */
-
-/**
- * Interior/Exterior Door Status
- * @typedef {Object} doorStatus
- * @property {('open'|'closed')} state
- * @property {('locked'|'unlocked')} lock
- */
-
-/**
- * Dock Status
- * @typedef {('undocked'|'undocking'|'docking'|'docked')} dockStatus
- */
-
-/**
- * All possible data attributes.
- * @typedef {Object} Data
- * @property {string} internalTemplateName - to use.
- * @property {number} chamber_pressure - The current pressure of the airlock.
- * @property {boolean} processing - Whether or not the airlock is currently
- * cycling.
- * @property {number} [external_pressure] - Pressure on the "external" side.
- * @property {number} [internal_pressure] - Pressure on the "internal" side.
- * @property {boolean} [purge] - Airlock currently purging?
- * @property {boolean} [secure] - Airlock doors locked?
- * @property {doorStatus} [exterior_status] - Describes the status of the
- * exterior-side door.
- * @property {doorStatus} [interior_status] - Describes the status of the
- * interior-side door.
- *
- * @property {dockStatus} [docking_status] - Used exclusivly for "Docking" type
- * controllers, describes the state of the dock.
- * @property {boolean} [airlock_disabled] - Airlock disabled?
- * @property {boolean} [override_enabled] - Forces the shuttle to undock.
- * @property {string} [docking_codes] - The secret codes to dock a shuttle here
- * @property {string} [name] - Name of the dock.
- */
-
-/**
- * Entrypoint of the UI. This handles finding the correct route to use.
- */
-export const EmbeddedController = (props) => {
- const { act, data } = useBackend();
- const { internalTemplateName } = data;
-
- const Component = primaryRoutes[internalTemplateName];
- if (!Component) {
- throw Error(
- 'Unable to find Component for template name: ' + internalTemplateName,
- );
- }
-
- return (
-
-
-
-
- );
-};
-
-/** ***************************************************************************\
-* HELPER COMPONENTS *
-\******************************************************************************/
-
-/**
- * @typedef {Object} BarProp
- * @property {number} minValue - Minimum value of the bar.
- * @property {number} maxValue - Maximum value of the bar.
- * @property {number} value - Current value between min/max.
- * @property {string} label - Label next to the bar.
- * @property {string} textValue - Value in text.
- */
-
-/**
- * @typedef {Object} StatusDisplayProps
- * @property {array[BarProp]} bars - The bars to display.
- */
-
-/**
- * Used for the upper status display that is used on 90% of these UIs.
- * @param {StatusDisplayProps} props
- */
-const StatusDisplay = (props) => {
- const { bars } = props;
-
- return (
-
-
- {bars.map((bar) => (
-
-
- {bar.textValue}
-
-
- ))}
-
-
- );
-};
-
-/**
- * This is just a quick helper for most airlock controllers. They usually all
- * have the "Cycle out, cycle in, force out, force in" buttons, so we just have
- * a single component that adjusts for the mild data structure differences
- * on it's own.
- */
-const StandardControls = (props) => {
- const { data, act } = useBackend();
-
- let externalForceSafe = true;
- if (data['interior_status'] && data.interior_status.state === 'open') {
- externalForceSafe = false;
- } else if (data['external_pressure'] && data['chamber_pressure']) {
- externalForceSafe = !(
- Math.abs(data['external_pressure'] - data['chamber_pressure']) > 5
- );
- }
-
- let internalForceSafe = true;
- if (data['exterior_status'] && data.exterior_status.state === 'open') {
- internalForceSafe = false;
- } else if (data['internal_pressure'] && data['chamber_pressure']) {
- internalForceSafe = !(
- Math.abs(data['internal_pressure'] - data['chamber_pressure']) > 5
- );
- }
-
- return (
- <>
-
-
-
-
-
- act('force_ext')}
- >
- Force Exterior Door
-
- act('force_int')}
- >
- Force Interior Door
-
-
-
- );
-};
-
-/**
- * This is a shared component between the EscapePodConsole
- * and the EscapePodBerthConsole. They previously had different data structures
- * but I got rid of that stupid shit.
- */
-const EscapePodStatus = (props) => {
- const { data, act } = useBackend();
-
- const statusToHtml = {
- docked: EJECTING-STAND CLEAR! ,
- undocked: POD EJECTED ,
- docking: INITIALIZING... ,
- };
-
- let dockHatch = ERROR ;
-
- if (data.exterior_status.state === 'open') {
- dockHatch = OPEN ;
- } else if (data.exterior_status.lock === 'unlocked') {
- dockHatch = UNSECURED ;
- } else if (data.exterior_status.lock === 'locked') {
- dockHatch = SECURED ;
- }
-
- return (
-
-
-
- {statusToHtml[data.docking_status]}
-
- {dockHatch}
-
-
- );
-};
-
-/**
- * Sub-subcomponent for escape pods.
- * Just shows "ARMED" or "SYSTEMS OK" depending on armed status.
- * Keeps me from having to write like, two lines of code.
- */
-const Armed = (props) => {
- const { data, act } = useBackend();
- return data.armed ? (
- ARMED
- ) : (
- SYSTEMS OK
- );
-};
-
-/**
- * Shared controls between the berth and the pod itself.
- * Basically just external door control.
- */
-const EscapePodControls = (props) => {
- const { data, act } = useBackend();
-
- return (
-
-
-
-
- );
-};
-
-/**
- * Just a neat little helper for all the different states of dock.
- */
-const DockStatus = (props) => {
- const { data, act } = useBackend();
-
- const statusToHtml = {
- docked: DOCKED ,
- docking: DOCKING ,
- undocking: UNDOCKING ,
- undocked: NOT IN USE ,
- };
-
- let dockStatus = statusToHtml[data.docking_status];
-
- if (data.override_enabled) {
- dockStatus = (
-
- {data.docking_status.toUpperCase()}-OVERRIDE ENABLED
-
- );
- }
-
- return dockStatus;
-};
-
-/** ***************************************************************************\
-* ROUTES *
-\******************************************************************************/
-
-/**
- * Advanced airlock consoles display the external pressure,
- * the internal pressure, and the chamber pressure separately.
- * They also have a PURGE and SECURE option for safety.
- * Replaces advanced_airlock_console.tmpl
- */
-const AirlockConsoleAdvanced = (props) => {
- const { act, data } = useBackend();
-
- const color = (value) => {
- return value < 80 || value > 120
- ? 'bad'
- : value < 95 || value > 110
- ? 'average'
- : 'good';
- };
-
- const bars = [
- {
- minValue: 0,
- maxValue: 202,
- value: data.external_pressure,
- label: 'External Pressure',
- textValue: data.external_pressure + ' kPa',
- color: color,
- },
- {
- minValue: 0,
- maxValue: 202,
- value: data.chamber_pressure,
- label: 'Chamber Pressure',
- textValue: data.chamber_pressure + ' kPa',
- color: color,
- },
- {
- minValue: 0,
- maxValue: 202,
- value: data.internal_pressure,
- label: 'Internal Pressure',
- textValue: data.internal_pressure + ' kPa',
- color: color,
- },
- ];
-
- return (
- <>
-
-
-
-
-
-
-
-
-
-
- );
-};
-primaryRoutes['AirlockConsoleAdvanced'] = AirlockConsoleAdvanced;
-
-/**
- * Simple airlock consoles are the least complicated airlock controller.
- * They show the current chamber pressure, two cycle buttons, and two
- * force door buttons. That's it.
- * Replaces simple_airlock_console.tmpl
- */
-const AirlockConsoleSimple = (props) => {
- const { act, data } = useBackend();
-
- const bars = [
- {
- minValue: 0,
- maxValue: 202,
- value: data.chamber_pressure,
- label: 'Chamber Pressure',
- textValue: data.chamber_pressure + ' kPa',
- color: (value) => {
- return value < 80 || value > 120
- ? 'bad'
- : value < 95 || value > 110
- ? 'average'
- : 'good';
- },
- },
- ];
-
- return (
- <>
-
-
-
-
-
-
- );
-};
-primaryRoutes['AirlockConsoleSimple'] = AirlockConsoleSimple;
-
-/**
- * Phoron airlock consoles don't actually cycle *pressure*, they cycle
- * phoron, for use on transitioning to the outside environment of a phoron
- * atmosphere planet.
- * Replaces phoron_airlock_console.tmpl
- */
-const AirlockConsolePhoron = (props) => {
- const { act, data } = useBackend();
-
- const bars = [
- {
- minValue: 0,
- maxValue: 202,
- value: data.chamber_pressure,
- label: 'Chamber Pressure',
- textValue: data.chamber_pressure + ' kPa',
- color: (value) => {
- return value < 80 || value > 120
- ? 'bad'
- : value < 95 || value > 110
- ? 'average'
- : 'good';
- },
- },
- {
- minValue: 0,
- maxValue: 100,
- value: data.chamber_phoron,
- label: 'Chamber Phoron',
- textValue: data.chamber_phoron + ' mol',
- color: (value) => {
- return value > 5 ? 'bad' : value > 0.5 ? 'average' : 'good';
- },
- },
- ];
-
- return (
- <>
-
-
-
-
-
-
- );
-};
-primaryRoutes['AirlockConsolePhoron'] = AirlockConsolePhoron;
-
-/**
- * This is a mix airlock & docking console. It lets you control the dock status
- * as well as the attached airlock.
- * Replaces docking_airlock_console.tmpl
- */
-const AirlockConsoleDocking = (props) => {
- const { act, data } = useBackend();
-
- const bars = [
- {
- minValue: 0,
- maxValue: 202,
- value: data.chamber_pressure,
- label: 'Chamber Pressure',
- textValue: data.chamber_pressure + ' kPa',
- color: (value) => {
- return value < 80 || value > 120
- ? 'bad'
- : value < 95 || value > 110
- ? 'average'
- : 'good';
- },
- },
- ];
-
- return (
- <>
- act('toggle_override')}
- >
- Override
-
- ) : null
- }
- >
-
-
-
-
-
-
-
- );
-};
-primaryRoutes['AirlockConsoleDocking'] = AirlockConsoleDocking;
-
-/**
- * Simple docking consoles do not allow you to cycle the airlock. They can
- * force the doors in an emergency, but there is no facility for cycling.
- * They're primarily just there to display the status of the dock.
- * Replaces simple_docking_console.tmpl
- */
-const DockingConsoleSimple = (props) => {
- const { act, data } = useBackend();
-
- let dockHatch = ERROR ;
-
- if (data.exterior_status.state === 'open') {
- dockHatch = OPEN ;
- } else if (data.exterior_status.lock === 'unlocked') {
- dockHatch = UNSECURED ;
- } else if (data.exterior_status.lock === 'locked') {
- dockHatch = SECURED ;
- }
-
- return (
-
-
-
-
- }
- >
-
-
-
- {dockHatch}
-
-
- );
-};
-primaryRoutes['DockingConsoleSimple'] = DockingConsoleSimple;
-
-/**
- * Shockingly, the multi docking console is the simplest docking console.
- * It has no functionality except to display the status of multiple airlocks,
- * for bigger shuttles.
- * Replaces multi_docking_console.tmpl
- */
-const DockingConsoleMulti = (props) => {
- const { data } = useBackend();
- return (
- <>
-
-
-
- {data.airlocks.length ? (
-
- {data.airlocks.map((airlock) => (
-
- {airlock.override_enabled ? 'OVERRIDE ENABLED' : 'STATUS OK'}
-
- ))}
-
- ) : (
-
-
-
- No airlocks found. -
-
- )}
-
-
- );
-};
-primaryRoutes['DockingConsoleMulti'] = DockingConsoleMulti;
-
-/**
- * Airlock but without anything other than doors. Separates clean rooms.
- * Replaces door_access_console.tmpl
- */
-const DoorAccessConsole = (props) => {
- const { act, data } = useBackend();
-
- let interiorOpen =
- data.interior_status.state === 'open' ||
- data.exterior_status.state === 'closed';
- let exteriorOpen =
- data.exterior_status.state === 'open' ||
- data.interior_status.state === 'closed';
-
- return (
-
- {/* Interior Button */}
-
- {/* Exterior Button */}
-
-
- }
- >
-
-
- {data.exterior_status.state === 'closed' ? 'Locked' : 'Open'}
-
-
- {data.interior_status.state === 'closed' ? 'Locked' : 'Open'}
-
-
-
- );
-};
-primaryRoutes['DoorAccessConsole'] = DoorAccessConsole;
-
-/**
- * These are the least airlock-like UIs here, but they're "close enough".
- * Replaces escape_pod_console.tmpl
- */
-const EscapePodConsole = (props) => {
- const { act, data } = useBackend();
- return (
- <>
-
-
-
-
-
-
-
- );
-};
-primaryRoutes['EscapePodConsole'] = EscapePodConsole;
-
-/**
- * These are the least airlock-like UIs here, but they're "close enough".
- * Replaces escape_pod_berth_console.tmpl
- */
-const EscapePodBerthConsole = (props) => {
- const { data } = useBackend();
- return (
- <>
-
-
-
- );
-};
-primaryRoutes['EscapePodBerthConsole'] = EscapePodBerthConsole;
diff --git a/tgui/packages/tgui/interfaces/EmbeddedController/AirlockConsoleAdvanced.tsx b/tgui/packages/tgui/interfaces/EmbeddedController/AirlockConsoleAdvanced.tsx
new file mode 100644
index 0000000000..0977fc9d54
--- /dev/null
+++ b/tgui/packages/tgui/interfaces/EmbeddedController/AirlockConsoleAdvanced.tsx
@@ -0,0 +1,85 @@
+import { useBackend } from '../../backend';
+import { Box, Button, Section } from '../../components';
+import { StandardControls, StatusDisplay } from './EmbeddedControllerHelpers';
+import { AirlockConsoleAdvancedData } from './types';
+
+/**
+ * Advanced airlock consoles display the external pressure,
+ * the internal pressure, and the chamber pressure separately.
+ * They also have a PURGE and SECURE option for safety.
+ * Replaces advanced_airlock_console.tmpl
+ */
+export const AirlockConsoleAdvanced = (props) => {
+ const { act, data } = useBackend();
+
+ const { external_pressure, chamber_pressure, internal_pressure, processing } =
+ data;
+
+ const pressure_range = {
+ external_pressure,
+ internal_pressure,
+ chamber_pressure,
+ };
+
+ function color(value: number): string {
+ return value < 80 || value > 120
+ ? 'bad'
+ : value < 95 || value > 110
+ ? 'average'
+ : 'good';
+ }
+
+ const bars = [
+ {
+ minValue: 0,
+ maxValue: 202,
+ value: external_pressure,
+ label: 'External Pressure',
+ textValue: external_pressure + ' kPa',
+ color: color,
+ },
+ {
+ minValue: 0,
+ maxValue: 202,
+ value: chamber_pressure,
+ label: 'Chamber Pressure',
+ textValue: chamber_pressure + ' kPa',
+ color: color,
+ },
+ {
+ minValue: 0,
+ maxValue: 202,
+ value: internal_pressure,
+ label: 'Internal Pressure',
+ textValue: internal_pressure + ' kPa',
+ color: color,
+ },
+ ];
+
+ return (
+ <>
+
+
+
+
+
+
+
+
+
+
+ );
+};
diff --git a/tgui/packages/tgui/interfaces/EmbeddedController/AirlockConsoleDocking.tsx b/tgui/packages/tgui/interfaces/EmbeddedController/AirlockConsoleDocking.tsx
new file mode 100644
index 0000000000..b17d1f08d5
--- /dev/null
+++ b/tgui/packages/tgui/interfaces/EmbeddedController/AirlockConsoleDocking.tsx
@@ -0,0 +1,84 @@
+import { useBackend } from '../../backend';
+import { Box, Button, Section } from '../../components';
+import {
+ DockStatus,
+ StandardControls,
+ StatusDisplay,
+} from './EmbeddedControllerHelpers';
+import { AirlockConsoleDockingData } from './types';
+
+/**
+ * This is a mix airlock & docking console. It lets you control the dock status
+ * as well as the attached airlock.
+ * Replaces docking_airlock_console.tmpl
+ */
+export const AirlockConsoleDocking = (props) => {
+ const { act, data } = useBackend();
+
+ const {
+ interior_status,
+ exterior_status,
+ chamber_pressure,
+ airlock_disabled,
+ override_enabled,
+ docking_status,
+ processing,
+ } = data;
+
+ const status_range = { interior_status, exterior_status };
+
+ const bars = [
+ {
+ minValue: 0,
+ maxValue: 202,
+ value: chamber_pressure,
+ label: 'Chamber Pressure',
+ textValue: chamber_pressure + ' kPa',
+ color: (value: number) => {
+ return value < 80 || value > 120
+ ? 'bad'
+ : value < 95 || value > 110
+ ? 'average'
+ : 'good';
+ },
+ },
+ ];
+
+ return (
+ <>
+ act('toggle_override')}
+ >
+ Override
+
+ ) : null
+ }
+ >
+
+
+
+
+
+
+
+ );
+};
diff --git a/tgui/packages/tgui/interfaces/EmbeddedController/AirlockConsolePhoron.tsx b/tgui/packages/tgui/interfaces/EmbeddedController/AirlockConsolePhoron.tsx
new file mode 100644
index 0000000000..860f580583
--- /dev/null
+++ b/tgui/packages/tgui/interfaces/EmbeddedController/AirlockConsolePhoron.tsx
@@ -0,0 +1,70 @@
+import { useBackend } from '../../backend';
+import { Box, Button, Section } from '../../components';
+import { StandardControls, StatusDisplay } from './EmbeddedControllerHelpers';
+import { AirlockConsolePhoronData } from './types';
+
+/**
+ * Phoron airlock consoles don't actually cycle *pressure*, they cycle
+ * phoron, for use on transitioning to the outside environment of a phoron
+ * atmosphere planet.
+ * Replaces phoron_airlock_console.tmpl
+ */
+export const AirlockConsolePhoron = (props) => {
+ const { act, data } = useBackend();
+
+ const {
+ chamber_pressure,
+ chamber_phoron,
+ interior_status,
+ exterior_status,
+ processing,
+ } = data;
+
+ const status_range = { interior_status, exterior_status };
+
+ const bars = [
+ {
+ minValue: 0,
+ maxValue: 202,
+ value: chamber_pressure,
+ label: 'Chamber Pressure',
+ textValue: chamber_pressure + ' kPa',
+ color: (value: number) => {
+ return value < 80 || value > 120
+ ? 'bad'
+ : value < 95 || value > 110
+ ? 'average'
+ : 'good';
+ },
+ },
+ {
+ minValue: 0,
+ maxValue: 100,
+ value: chamber_phoron,
+ label: 'Chamber Phoron',
+ textValue: chamber_phoron + ' mol',
+ color: (value: number) => {
+ return value > 5 ? 'bad' : value > 0.5 ? 'average' : 'good';
+ },
+ },
+ ];
+
+ return (
+ <>
+
+
+
+
+
+
+ );
+};
diff --git a/tgui/packages/tgui/interfaces/EmbeddedController/AirlockConsoleSimple.tsx b/tgui/packages/tgui/interfaces/EmbeddedController/AirlockConsoleSimple.tsx
new file mode 100644
index 0000000000..bed9c73472
--- /dev/null
+++ b/tgui/packages/tgui/interfaces/EmbeddedController/AirlockConsoleSimple.tsx
@@ -0,0 +1,55 @@
+import { useBackend } from '../../backend';
+import { Box, Button, Section } from '../../components';
+import { StandardControls, StatusDisplay } from './EmbeddedControllerHelpers';
+import { AirlockConsoleSimpleData } from './types';
+
+/**
+ * Simple airlock consoles are the least complicated airlock controller.
+ * They show the current chamber pressure, two cycle buttons, and two
+ * force door buttons. That's it.
+ * Replaces simple_airlock_console.tmpl
+ */
+export const AirlockConsoleSimple = (props) => {
+ const { act, data } = useBackend();
+
+ const { exterior_status, chamber_pressure, processing, interior_status } =
+ data;
+
+ const status_range = { interior_status, exterior_status };
+
+ const bars = [
+ {
+ minValue: 0,
+ maxValue: 202,
+ value: chamber_pressure,
+ label: 'Chamber Pressure',
+ textValue: chamber_pressure + ' kPa',
+ color: (value: number) => {
+ return value < 80 || value > 120
+ ? 'bad'
+ : value < 95 || value > 110
+ ? 'average'
+ : 'good';
+ },
+ },
+ ];
+
+ return (
+ <>
+
+
+
+
+
+
+ );
+};
diff --git a/tgui/packages/tgui/interfaces/EmbeddedController/DockingConsoleMulti.tsx b/tgui/packages/tgui/interfaces/EmbeddedController/DockingConsoleMulti.tsx
new file mode 100644
index 0000000000..5f13b3c036
--- /dev/null
+++ b/tgui/packages/tgui/interfaces/EmbeddedController/DockingConsoleMulti.tsx
@@ -0,0 +1,47 @@
+import { useBackend } from '../../backend';
+import { Flex, Icon, LabeledList, Section } from '../../components';
+import { DockStatus } from './EmbeddedControllerHelpers';
+import { DockingConsoleMultiData } from './types';
+
+/**
+ * Shockingly, the multi docking console is the simplest docking console.
+ * It has no functionality except to display the status of multiple airlocks,
+ * for bigger shuttles.
+ * Replaces multi_docking_console.tmpl
+ */
+export const DockingConsoleMulti = (props) => {
+ const { data } = useBackend();
+
+ const { docking_status } = data;
+
+ return (
+ <>
+
+
+
+ {data.airlocks.length ? (
+
+ {data.airlocks.map((airlock) => (
+
+ {airlock.override_enabled ? 'OVERRIDE ENABLED' : 'STATUS OK'}
+
+ ))}
+
+ ) : (
+
+
+
+ No airlocks found. +
+
+ )}
+
+
+ );
+};
diff --git a/tgui/packages/tgui/interfaces/EmbeddedController/DockingConsoleSimple.tsx b/tgui/packages/tgui/interfaces/EmbeddedController/DockingConsoleSimple.tsx
new file mode 100644
index 0000000000..5358fc49ce
--- /dev/null
+++ b/tgui/packages/tgui/interfaces/EmbeddedController/DockingConsoleSimple.tsx
@@ -0,0 +1,50 @@
+import { useBackend } from '../../backend';
+import { Button, LabeledList, Section } from '../../components';
+import { DockingStatus, DockStatus } from './EmbeddedControllerHelpers';
+import { DockingConsoleSimpleData } from './types';
+
+/**
+ * Simple docking consoles do not allow you to cycle the airlock. They can
+ * force the doors in an emergency, but there is no facility for cycling.
+ * They're primarily just there to display the status of the dock.
+ * Replaces simple_docking_console.tmpl
+ */
+export const DockingConsoleSimple = (props) => {
+ const { act, data } = useBackend();
+
+ const { exterior_status, override_enabled, docking_status } = data;
+
+ return (
+
+
+
+
+ }
+ >
+
+
+
+
+
+ );
+};
diff --git a/tgui/packages/tgui/interfaces/EmbeddedController/DoorAccessConsole.tsx b/tgui/packages/tgui/interfaces/EmbeddedController/DoorAccessConsole.tsx
new file mode 100644
index 0000000000..9de6aa36c5
--- /dev/null
+++ b/tgui/packages/tgui/interfaces/EmbeddedController/DoorAccessConsole.tsx
@@ -0,0 +1,55 @@
+import { useBackend } from '../../backend';
+import { Button, LabeledList, Section } from '../../components';
+import { DoorAccessConsoleData } from './types';
+
+/**
+ * Airlock but without anything other than doors. Separates clean rooms.
+ * Replaces door_access_console.tmpl
+ */
+export const DoorAccessConsole = (props) => {
+ const { act, data } = useBackend();
+
+ const { interior_status, exterior_status } = data;
+
+ const interiorOpen =
+ interior_status.state === 'open' || exterior_status.state === 'closed';
+ const exteriorOpen =
+ exterior_status.state === 'open' || interior_status.state === 'closed';
+
+ return (
+
+ {/* Interior Button */}
+
+ {/* Exterior Button */}
+
+
+ }
+ >
+
+
+ {exterior_status.state === 'closed' ? 'Locked' : 'Open'}
+
+
+ {interior_status.state === 'closed' ? 'Locked' : 'Open'}
+
+
+
+ );
+};
diff --git a/tgui/packages/tgui/interfaces/EmbeddedController/EmbeddedControllerHelpers.tsx b/tgui/packages/tgui/interfaces/EmbeddedController/EmbeddedControllerHelpers.tsx
new file mode 100644
index 0000000000..cd5f7fb674
--- /dev/null
+++ b/tgui/packages/tgui/interfaces/EmbeddedController/EmbeddedControllerHelpers.tsx
@@ -0,0 +1,284 @@
+import { BooleanLike } from 'common/react';
+
+import { useBackend } from '../../backend';
+import {
+ Box,
+ Button,
+ LabeledList,
+ ProgressBar,
+ Section,
+} from '../../components';
+import { status } from './types';
+
+/** ***************************************************************************\
+* HELPER COMPONENTS *
+\******************************************************************************/
+
+/**
+ * @typedef {Object} BarProp
+ * @property {number} minValue - Minimum value of the bar.
+ * @property {number} maxValue - Maximum value of the bar.
+ * @property {number} value - Current value between min/max.
+ * @property {string} label - Label next to the bar.
+ * @property {string} textValue - Value in text.
+ */
+
+/**
+ * @typedef {Object} StatusDisplayProps
+ * @property {array[BarProp]} bars - The bars to display.
+ */
+
+/**
+ * Used for the upper status display that is used on 90% of these UIs.
+ * @param {StatusDisplayProps} props
+ */
+export const StatusDisplay = (props: {
+ bars: {
+ minValue: number;
+ maxValue: number;
+ value: number;
+ label: string;
+ textValue: string;
+ color: (value: number) => string;
+ }[];
+}) => {
+ const { bars } = props;
+
+ return (
+
+
+ {bars.map((bar) => (
+
+
+ {bar.textValue}
+
+
+ ))}
+
+
+ );
+};
+
+/**
+ * This is just a quick helper for most airlock controllers. They usually all
+ * have the "Cycle out, cycle in, force out, force in" buttons, so we just have
+ * a single component that adjusts for the mild data structure differences
+ * on it's own.
+ */
+export const StandardControls = (props: {
+ status_range?:
+ | {
+ interior_status: status;
+ exterior_status: status;
+ }
+ | undefined;
+ pressure_range?:
+ | {
+ external_pressure: number;
+ internal_pressure: number;
+ chamber_pressure: number;
+ }
+ | undefined;
+ airlock_disabled?: BooleanLike;
+}) => {
+ const { act } = useBackend();
+
+ const { status_range, pressure_range, airlock_disabled } = props;
+
+ const { interior_status, exterior_status } =
+ status_range ||
+ ({} as {
+ interior_status: status;
+ exterior_status: status;
+ });
+
+ const { external_pressure, internal_pressure, chamber_pressure } =
+ pressure_range ||
+ ({} as {
+ external_pressure: number;
+ internal_pressure: number;
+ chamber_pressure: number;
+ });
+
+ let externalForceSafe = true;
+ if (interior_status && interior_status.state === 'open') {
+ externalForceSafe = false;
+ } else if (external_pressure && chamber_pressure) {
+ externalForceSafe = !(Math.abs(external_pressure - chamber_pressure) > 5);
+ }
+
+ let internalForceSafe = true;
+ if (exterior_status && exterior_status.state === 'open') {
+ internalForceSafe = false;
+ } else if (internal_pressure && chamber_pressure) {
+ internalForceSafe = !(Math.abs(internal_pressure - chamber_pressure) > 5);
+ }
+
+ return (
+ <>
+
+
+
+
+
+ act('force_ext')}
+ >
+ Force Exterior Door
+
+ act('force_int')}
+ >
+ Force Interior Door
+
+
+
+ );
+};
+
+/**
+ * This is a shared component between the EscapePodConsole
+ * and the EscapePodBerthConsole. They previously had different data structures
+ * but I got rid of that stupid shit.
+ */
+export const EscapePodStatus = (props: {
+ exterior_status: status;
+ docking_status: string;
+ armed: BooleanLike;
+}) => {
+ const { exterior_status, docking_status, armed } = props;
+
+ const statusToHtml = {
+ docked: EJECTING-STAND CLEAR! ,
+ undocked: POD EJECTED ,
+ docking: INITIALIZING... ,
+ };
+
+ return (
+
+
+
+ {statusToHtml[docking_status]}
+
+
+
+ );
+};
+
+export const DockingStatus = (props: { state: string }) => {
+ const { state } = props;
+
+ const dockHatch: React.JSX.Element[] = [];
+
+ dockHatch['open'] = OPEN ;
+ dockHatch['unlocked'] = UNSECURED ;
+ dockHatch['locked'] = SECURED ;
+ return (
+
+ {dockHatch[state] || ERROR }
+
+ );
+};
+
+/**
+ * Sub-subcomponent for escape pods.
+ * Just shows "ARMED" or "SYSTEMS OK" depending on armed status.
+ * Keeps me from having to write like, two lines of code.
+ */
+const Armed = (props: { armed: BooleanLike }) => {
+ const { armed } = props;
+
+ return armed ? (
+ ARMED
+ ) : (
+ SYSTEMS OK
+ );
+};
+
+/**
+ * Shared controls between the berth and the pod itself.
+ * Basically just external door control.
+ */
+export const EscapePodControls = (props: {
+ docking_status: string;
+ override_enabled: BooleanLike;
+}) => {
+ const { act } = useBackend();
+
+ const { docking_status, override_enabled } = props;
+
+ return (
+
+
+
+
+ );
+};
+
+/**
+ * Just a neat little helper for all the different states of dock.
+ */
+export const DockStatus = (props: {
+ docking_status: string;
+ override_enabled: BooleanLike;
+}) => {
+ const { docking_status, override_enabled } = props;
+
+ const statusToHtml = {
+ docked: DOCKED ,
+ docking: DOCKING ,
+ undocking: UNDOCKING ,
+ undocked: NOT IN USE ,
+ };
+
+ let dockStatus = statusToHtml[docking_status];
+
+ if (override_enabled) {
+ dockStatus = (
+ {docking_status.toUpperCase()}-OVERRIDE ENABLED
+ );
+ }
+
+ return dockStatus;
+};
diff --git a/tgui/packages/tgui/interfaces/EmbeddedController/EscapePodBerthConsole.tsx b/tgui/packages/tgui/interfaces/EmbeddedController/EscapePodBerthConsole.tsx
new file mode 100644
index 0000000000..729c886f9e
--- /dev/null
+++ b/tgui/packages/tgui/interfaces/EmbeddedController/EscapePodBerthConsole.tsx
@@ -0,0 +1,33 @@
+import { useBackend } from '../../backend';
+import { Section } from '../../components';
+import {
+ EscapePodControls,
+ EscapePodStatus,
+} from './EmbeddedControllerHelpers';
+import { EscapePodBerthConsoleData } from './types';
+
+/**
+ * These are the least airlock-like UIs here, but they're "close enough".
+ * Replaces escape_pod_berth_console.tmpl
+ */
+export const EscapePodBerthConsole = (props) => {
+ const { data } = useBackend();
+
+ const { exterior_status, docking_status, armed, override_enabled } = data;
+
+ return (
+ <>
+
+
+
+ );
+};
diff --git a/tgui/packages/tgui/interfaces/EmbeddedController/EscapePodConsole.tsx b/tgui/packages/tgui/interfaces/EmbeddedController/EscapePodConsole.tsx
new file mode 100644
index 0000000000..547542b8b1
--- /dev/null
+++ b/tgui/packages/tgui/interfaces/EmbeddedController/EscapePodConsole.tsx
@@ -0,0 +1,57 @@
+import { useBackend } from '../../backend';
+import { Box, Button, Section } from '../../components';
+import {
+ EscapePodControls,
+ EscapePodStatus,
+} from './EmbeddedControllerHelpers';
+import { EscapePodConsoleData } from './types';
+
+/**
+ * These are the least airlock-like UIs here, but they're "close enough".
+ * Replaces escape_pod_console.tmpl
+ */
+export const EscapePodConsole = (props) => {
+ const { act, data } = useBackend();
+
+ const {
+ exterior_status,
+ docking_status,
+ override_enabled,
+ armed,
+ can_force,
+ } = data;
+
+ return (
+ <>
+
+
+
+
+
+
+
+ );
+};
diff --git a/tgui/packages/tgui/interfaces/EmbeddedController/index.tsx b/tgui/packages/tgui/interfaces/EmbeddedController/index.tsx
new file mode 100644
index 0000000000..c7b2fa2805
--- /dev/null
+++ b/tgui/packages/tgui/interfaces/EmbeddedController/index.tsx
@@ -0,0 +1,110 @@
+import { useBackend } from '../../backend';
+import { Window } from '../../layouts';
+import { AirlockConsoleAdvanced } from './AirlockConsoleAdvanced';
+import { AirlockConsoleDocking } from './AirlockConsoleDocking';
+import { AirlockConsolePhoron } from './AirlockConsolePhoron';
+import { AirlockConsoleSimple } from './AirlockConsoleSimple';
+import { DockingConsoleMulti } from './DockingConsoleMulti';
+import { DockingConsoleSimple } from './DockingConsoleSimple';
+import { DoorAccessConsole } from './DoorAccessConsole';
+import { EscapePodBerthConsole } from './EscapePodBerthConsole';
+import { EscapePodConsole } from './EscapePodConsole';
+import { Data } from './types';
+
+/**
+ * This is an all-in-one replacement for the following NanoUI Templates:
+ * - advanced_airlock_console.tmpl
+ * - docking_airlock_console.tmpl
+ * - door_access_console.tmpl
+ * - escape_pod_console.tmpl
+ * - escape_pod_berth_console.tmpl
+ * - multi_docking_console.tmpl
+ * - phoron_airlock_console.tmpl
+ * - simple_airlock_console.tmpl
+ * - simple_docking_console.tmpl
+ * - simple_docking_console_pod.tmpl -- Funny enough, wasn't used anywhere.
+ */
+
+/**
+ * Let's cover all of the attributes of `data` for this UI right here.
+ * For those unfamiliar with JSDoc syntax, [param] indicates
+ * an optional parameter.
+ */
+
+/**
+ * Interior/Exterior Door Status
+ * @typedef {Object} doorStatus
+ * @property {('open'|'closed')} state
+ * @property {('locked'|'unlocked')} lock
+ */
+
+/**
+ * Dock Status
+ * @typedef {('undocked'|'undocking'|'docking'|'docked')} dockStatus
+ */
+
+/**
+ * All possible data attributes.
+ * @typedef {Object} Data
+ * @property {string} internalTemplateName - to use.
+ * @property {number} chamber_pressure - The current pressure of the airlock.
+ * @property {boolean} processing - Whether or not the airlock is currently
+ * cycling.
+ * @property {number} [external_pressure] - Pressure on the "external" side.
+ * @property {number} [internal_pressure] - Pressure on the "internal" side.
+ * @property {boolean} [purge] - Airlock currently purging?
+ * @property {boolean} [secure] - Airlock doors locked?
+ * @property {doorStatus} [exterior_status] - Describes the status of the
+ * exterior-side door.
+ * @property {doorStatus} [interior_status] - Describes the status of the
+ * interior-side door.
+ *
+ * @property {dockStatus} [docking_status] - Used exclusivly for "Docking" type
+ * controllers, describes the state of the dock.
+ * @property {boolean} [airlock_disabled] - Airlock disabled?
+ * @property {boolean} [override_enabled] - Forces the shuttle to undock.
+ * @property {string} [docking_codes] - The secret codes to dock a shuttle here
+ * @property {string} [name] - Name of the dock.
+ */
+
+/**
+ * Entrypoint of the UI. This handles finding the correct route to use.
+ */
+export const EmbeddedController = (props) => {
+ const { data } = useBackend();
+ const { internalTemplateName } = data;
+
+ function handleUploadImage(ev) {
+ alert(ev);
+ }
+
+ handleUploadImage(internalTemplateName);
+ /** ***************************************************************************\
+ * ROUTES *
+ \******************************************************************************/
+
+ const primaryRoutes: Record = {};
+
+ primaryRoutes['AirlockConsoleAdvanced'] =
+ {Component}
+
+ );
+};
diff --git a/tgui/packages/tgui/interfaces/EmbeddedController/types.ts b/tgui/packages/tgui/interfaces/EmbeddedController/types.ts
new file mode 100644
index 0000000000..d6b9c37487
--- /dev/null
+++ b/tgui/packages/tgui/interfaces/EmbeddedController/types.ts
@@ -0,0 +1,82 @@
+import { BooleanLike } from 'common/react';
+
+export type Data = { internalTemplateName: string };
+
+export type AirlockConsoleDockingData = {
+ chamber_pressure: number;
+ exterior_status: status;
+ interior_status: status;
+ processing: BooleanLike;
+ docking_status: string;
+ airlock_disabled: BooleanLike;
+ override_enabled: BooleanLike;
+ docking_codes?: string;
+ name?: string;
+ internalTemplateName: string;
+};
+
+export type DockingConsoleSimpleData = {
+ docking_status: string;
+ override_enabled: BooleanLike;
+ exterior_status: status;
+ internalTemplateName: string;
+};
+
+export type EscapePodBerthConsoleData = {
+ docking_status: string;
+ override_enabled: BooleanLike;
+ exterior_status: status;
+ armed: BooleanLike;
+ internalTemplateName: string;
+};
+
+export type DockingConsoleMultiData = {
+ docking_status: string;
+ airlocks: { name: string; override_enabled: BooleanLike }[];
+ internalTemplateName: string;
+};
+
+export type AirlockConsoleAdvancedData = {
+ chamber_pressure: number;
+ external_pressure: number;
+ internal_pressure: number;
+ processing: BooleanLike;
+ purge: BooleanLike;
+ secure: BooleanLike;
+ internalTemplateName: string;
+};
+
+export type AirlockConsoleSimpleData = {
+ chamber_pressure: number;
+ exterior_status: status;
+ interior_status: status;
+ processing: BooleanLike;
+ internalTemplateName: string;
+};
+
+export type AirlockConsolePhoronData = {
+ chamber_pressure: number;
+ chamber_phoron: number;
+ exterior_status: status;
+ interior_status: status;
+ processing: BooleanLike;
+ internalTemplateName: string;
+};
+
+export type DoorAccessConsoleData = {
+ exterior_status: status;
+ interior_status: status;
+ processing: BooleanLike;
+ internalTemplateName: string;
+};
+
+export type EscapePodConsoleData = {
+ docking_status: string;
+ override_enabled: BooleanLike;
+ exterior_status: status;
+ can_force: BooleanLike;
+ armed: BooleanLike;
+ internalTemplateName: string;
+};
+
+export type status = { state: string; lock: string };
diff --git a/tgui/packages/tgui/interfaces/Farmbot.jsx b/tgui/packages/tgui/interfaces/Farmbot.tsx
similarity index 87%
rename from tgui/packages/tgui/interfaces/Farmbot.jsx
rename to tgui/packages/tgui/interfaces/Farmbot.tsx
index e5a66ec96d..f61df96523 100644
--- a/tgui/packages/tgui/interfaces/Farmbot.jsx
+++ b/tgui/packages/tgui/interfaces/Farmbot.tsx
@@ -1,9 +1,25 @@
+import { BooleanLike } from 'common/react';
+
import { useBackend } from '../backend';
import { Box, Button, LabeledList, ProgressBar, Section } from '../components';
import { Window } from '../layouts';
+type Data = {
+ on: BooleanLike;
+ tank: BooleanLike;
+ tankVolume: number;
+ tankMaxVolume: number;
+ locked: BooleanLike;
+ waters_trays: BooleanLike;
+ refills_water: BooleanLike;
+ uproots_weeds: BooleanLike;
+ replaces_nutriment: BooleanLike;
+ collects_produce: BooleanLike;
+ removes_dead: BooleanLike;
+};
+
export const Farmbot = (props) => {
- const { act, data } = useBackend();
+ const { act, data } = useBackend();
const {
on,
@@ -48,7 +64,7 @@ export const Farmbot = (props) => {
{(!locked && (
-
+
-
+
-
+
{/* VOREStation Edit: No automatic hydroponics with the lagbot */}
- {/*
+ {/*
+ Buffer is empty. +
+ +
+ +
+ + + ); +}; diff --git a/tgui/packages/tgui/interfaces/ChemMaster/constants.ts b/tgui/packages/tgui/interfaces/ChemMaster/constants.ts new file mode 100644 index 0000000000..8fa1d18fa3 --- /dev/null +++ b/tgui/packages/tgui/interfaces/ChemMaster/constants.ts @@ -0,0 +1,8 @@ +export const transferAmounts: number[] = [1, 5, 10, 30, 60]; +export const bottleStyles: string[] = [ + 'bottle.png', + 'small_bottle.png', + 'wide_bottle.png', + 'round_bottle.png', + 'reagent_bottle.png', +]; diff --git a/tgui/packages/tgui/interfaces/ChemMaster/index.tsx b/tgui/packages/tgui/interfaces/ChemMaster/index.tsx new file mode 100644 index 0000000000..658ffc8f3c --- /dev/null +++ b/tgui/packages/tgui/interfaces/ChemMaster/index.tsx @@ -0,0 +1,65 @@ +import { useBackend } from '../../backend'; +import { Window } from '../../layouts'; +import { + ComplexModal, + modalRegisterBodyOverride, +} from '.././common/ComplexModal'; +import { analyzeModalBodyOverride } from './ChemMasterAnalyzeModalBodyOverride'; +import { ChemMasterBeaker } from './ChemMasterBeaker'; +import { ChemMasterBuffer } from './ChemMasterBuffer'; +import { ChemMasterProduction } from './ChemMasterProduction'; +import { Data } from './types'; + +export const ChemMaster = (props) => { + const { data } = useBackend(); + const { + condi, + beaker, + beaker_reagents = [], + buffer_reagents = [], + mode, + loaded_pill_bottle, + loaded_pill_bottle_name, + loaded_pill_bottle_contents_len, + loaded_pill_bottle_storage_slots, + pillsprite, + bottlesprite, + } = data; + return ( +
- No records found. -
+ No records found. +
- {decodeHtmlEntities(news.channel)} - -
- - {decodeHtmlEntities(news.body)} - {!!news.img && ( -+ {decodeHtmlEntities(news.channel)} + +
+ - {decodeHtmlEntities(news.body)} + {!!news.img && ( +No occupant detected.
- No occupant in DNA modifier. -
- No operation possible on this subject. -
- No disk inserted. -
- No beaker loaded. -
-
-
- - For {props.duration} second{props.duration === 1 ? '' : 's'} -
-+
+
+ + For {props.duration} second{props.duration === 1 ? '' : 's'} +
++ No occupant in DNA modifier. +
+ No operation possible on this subject. +
+ No beaker loaded. +
+ No disk inserted. +
- No airlocks found. -
+ No airlocks found. +
+
{genre_songs[genre].map((track) => (