Skip to content

Commit

Permalink
ui refactors to improve state management
Browse files Browse the repository at this point in the history
  • Loading branch information
@mullenpaul
mullenpaul committed Nov 12, 2023
1 parent 5da2f6b commit 5fc4fd4
Show file tree
Hide file tree
Showing 7 changed files with 374 additions and 335 deletions.
18 changes: 10 additions & 8 deletions tgui/packages/tgui/interfaces/MfdPanels/EquipmentPanel.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,10 +35,12 @@ const equipment_text_xs = [
];
const equipment_text_ys = [120, 60, 60, 120, 20, 20, 240, 280, 320, 320, 320];

const DrawWeaponText = (
props: { x: number; y: number; desc: string; sub_desc?: string },
context
) => {
const DrawWeaponText = (props: {
x: number;
y: number;
desc: string;
sub_desc?: string;
}) => {
return (
<text stroke="#00e94e" x={props.x} y={props.y} text-anchor="middle">
{props.desc.split(' ').map((x) => (
Expand All @@ -56,7 +58,7 @@ const DrawWeaponText = (
);
};

const DrawWeaponEquipment = (props: DropshipEquipment, context) => {
const DrawWeaponEquipment = (props: DropshipEquipment) => {
return (
<>
<DrawWeapon
Expand Down Expand Up @@ -109,7 +111,7 @@ const DrawEquipment = (props, context) => {
);
};

const DrawDropshipOutline = (props, context) => {
const DrawDropshipOutline = () => {
return (
<>
{/* cockpit */}
Expand Down Expand Up @@ -176,7 +178,7 @@ const DrawDropshipOutline = (props, context) => {
</>
);
};
const DrawAirlocks = (props, context) => {
const DrawAirlocks = () => {
return (
<>
{/* cockpit door */}
Expand Down Expand Up @@ -208,7 +210,7 @@ const DrawAirlocks = (props, context) => {
);
};

const EquipmentPanel = (props, context) => {
const EquipmentPanel = () => {
return (
<Box className="NavigationMenu">
<svg height="501" width="501">
Expand Down
69 changes: 14 additions & 55 deletions tgui/packages/tgui/interfaces/MfdPanels/FiremissionPanel.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,10 @@
import { MfdPanel, MfdProps } from './MultifunctionDisplay';
import { Box, Button, Divider, Input, Stack } from '../../components';
import { useBackend, useLocalState } from '../../backend';
import { CasFiremission, CasFiremissionStage, FiremissionContext } from './types';
import { CasFiremission, FiremissionContext } from './types';
import { range } from 'common/collections';
import { TableCell } from '../../components/Table';
import { DropshipEquipment, DropshipProps } from '../DropshipWeaponsConsole';
import { fmState, mfdState } from './stateManagers';
import { fmEditState, fmState, fmWeaponEditState, mfdState } from './stateManagers';

const CreateFiremissionPanel = (props, context) => {
const { act } = useBackend(context);
Expand All @@ -20,6 +19,9 @@ const CreateFiremissionPanel = (props, context) => {
value={fmName}
onInput={(e, value) => setFmName(value)}
onEnter={() => {
if (fmName === '') {
return;
}
act('firemission-create', {
firemission_name: fmName,
firemission_length: 12,
Expand Down Expand Up @@ -115,48 +117,15 @@ interface GimbalInfo {
values: string[];
}

const FiremissionRecord = (
props: CasFiremissionStage & { gimbal: GimbalInfo },
context
) => {
const { data, act } = useBackend<DropshipProps>(context);
const weapon = data.equipment_data.find(
(x) => x.mount_point === props.weapon
);
return (
<>
<TableCell>{weapon?.shorthand ?? 'unknown'}</TableCell>
<TableCell>
{weapon?.ammo} / {weapon?.max_ammo}
</TableCell>
<TableCell>
{props.gimbal.min} to {props.gimbal.max}
</TableCell>
{props.offsets.map((x, i) => (
<TableCell key={i}>{x}</TableCell>
))}
</>
);
};

const ViewFiremissionMfdPanel = (
props: MfdProps & { firemission: CasFiremission },
context
) => {
const { data, act } = useBackend<DropshipProps>(context);
const { setPanelState } = mfdState(context, props.panelStateId);
const { setSelectedFm } = fmState(context, props.panelStateId);
const [editFm, setEditFm] = useLocalState<boolean>(
context,
`${props.panelStateId}_edit_fm`,
false
);

const [editFmWeapon, setEditFmWeapon] = useLocalState<number | undefined>(
context,
`${props.panelStateId}_edit_fm_weapon`,
undefined
);
const { editFm, setEditFm } = fmEditState(context, props.panelStateId);
const { setEditFmWeapon } = fmWeaponEditState(context, props.panelStateId);

const rightButtons = [
{ children: 'WEAPON', onClick: () => setEditFmWeapon(undefined) },
Expand Down Expand Up @@ -229,16 +198,11 @@ const ViewFiremissionMfdPanel = (

const FiremissionView = (props: MfdProps & { fm: CasFiremission }, context) => {
const { data } = useBackend<DropshipProps & FiremissionContext>(context);
const [editFm, setEditFm] = useLocalState<boolean>(
context,
`${props.panelStateId}_edit_fm`,
false
);
const [editFmWeapon, setEditFmWeapon] = useLocalState<number | undefined>(
context,
`${props.panelStateId}_edit_fm_weapon`,
undefined
);

const { editFm } = fmEditState(context, props.panelStateId);

const { editFmWeapon } = fmWeaponEditState(context, props.panelStateId);

const weaponData = props.fm.records
.map((x) => data.equipment_data.find((y) => y.mount_point === x.weapon))
.filter((x) => x !== undefined) as Array<DropshipEquipment>;
Expand Down Expand Up @@ -327,7 +291,6 @@ const OffsetOverview = (
const ammoConsumption = weaponFm.offsets
.map((x) => (x !== '-' ? props.equipment.burst ?? 0 : 0))
.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
const availableGimbals = gimbals[props.equipment.mount_point];
return (
<>
<Stack.Item className="FireMissionOffsetLabel">
Expand Down Expand Up @@ -389,16 +352,12 @@ const FMOffsetStack = (
context
) => {
const { fm } = props;
const { data, act } = useBackend<DropshipProps & FiremissionContext>(context);
const { act } = useBackend<DropshipProps & FiremissionContext>(context);
const offsets = props.fm.records.find(
(x) => x.weapon === props.equipment.mount_point
)?.offsets;

const [editFm, setEditFm] = useLocalState<boolean>(
context,
`${props.panelStateId}_edit_fm`,
false
);
const { editFm } = fmEditState(context, props.panelStateId);
const availableGimbals = gimbals[props.equipment.mount_point];

const firemissionOffsets = props.equipment.firemission_delay ?? 0;
Expand Down
12 changes: 5 additions & 7 deletions tgui/packages/tgui/interfaces/MfdPanels/FultonPanel.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -122,13 +122,11 @@ export const FultonMfdPanel = (props: MfdProps, context) => {
<Stack.Item>
<h3>Active Fultons</h3>
</Stack.Item>
{all_targets.map((x) => {
return (
<Stack.Item key={x}>
<h4>{x}</h4>
</Stack.Item>
);
})}
{all_targets.map((x) => (
<Stack.Item key={x}>
<h4>{x}</h4>
</Stack.Item>
))}
</Stack>
</Stack.Item>
<Stack.Item width="100px">
Expand Down
82 changes: 40 additions & 42 deletions tgui/packages/tgui/interfaces/MfdPanels/MedevacPanel.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,48 +6,46 @@ import { Icon } from '../../components';
import { mfdState, useEquipmentState } from './stateManagers';
import { MedevacContext, MedevacTargets } from './types';

const MedevacOccupant = (props: { data: MedevacTargets }) => {
return (
<Box>
<Flex justify="space-between" direction="horizontal">
<Flex.Item grow>
<Stack vertical>
<Stack.Item>{props.data.occupant ?? 'Empty'}</Stack.Item>
<Stack.Item>{props.data.area ?? 'Unknown'}</Stack.Item>
</Stack>
</Flex.Item>
<Flex.Item grow>
<Flex fill justify="space-around">
<Flex.Item>
HP
<br />
{props.data.damage?.hp}
</Flex.Item>
<Flex.Item>
Brute
<br />
{props.data.damage?.brute}
</Flex.Item>
<Flex.Item>
Fire
<br />
{props.data.damage?.fire}
</Flex.Item>
<Flex.Item>
Tox
<br />
{props.data.damage?.tox}
</Flex.Item>
<Flex.Item>
Oxy
<br /> {props.data.damage?.oxy}
</Flex.Item>
</Flex>
</Flex.Item>
</Flex>
</Box>
);
};
const MedevacOccupant = (props: { data: MedevacTargets }) => (
<Box>
<Flex justify="space-between" direction="horizontal">
<Flex.Item grow>
<Stack vertical>
<Stack.Item>{props.data.occupant ?? 'Empty'}</Stack.Item>
<Stack.Item>{props.data.area ?? 'Unknown'}</Stack.Item>
</Stack>
</Flex.Item>
<Flex.Item grow>
<Flex fill justify="space-around">
<Flex.Item>
HP
<br />
{props.data.damage?.hp}
</Flex.Item>
<Flex.Item>
Brute
<br />
{props.data.damage?.brute}
</Flex.Item>
<Flex.Item>
Fire
<br />
{props.data.damage?.fire}
</Flex.Item>
<Flex.Item>
Tox
<br />
{props.data.damage?.tox}
</Flex.Item>
<Flex.Item>
Oxy
<br /> {props.data.damage?.oxy}
</Flex.Item>
</Flex>
</Flex.Item>
</Flex>
</Box>
);

export const MedevacMfdPanel = (props: MfdProps, context) => {
const [medevacOffset, setMedevacOffset] = useLocalState(
Expand Down
Loading

0 comments on commit 5fc4fd4

Please sign in to comment.