Bundle Copy

tgui/packages/tgui_ch/interfaces/OvermapEngines.js

@@ -0,0 +1,103 @@
+import { Fragment } from 'inferno';
+import { useBackend } from '../backend';
+import { Box, Button, Flex, LabeledList, Section, AnimatedNumber, Collapsible } from '../components';
+import { Window } from '../layouts';
+
+export const OvermapEngines = (props, context) => {
+  return (
+    <Window width={390} height={530}>
+      <Window.Content>
+        <OvermapEnginesContent />
+      </Window.Content>
+    </Window>
+  );
+};
+
+export const OvermapEnginesContent = (props, context) => {
+  const { act, data } = useBackend(context);
+  const {
+    global_state, // This indicates all engines being powered up or not
+    global_limit, // Global Thrust limit
+    engines_info, // Array of engines
+    total_thrust, // Total thrust of all engines together
+  } = data;
+  return (
+    <Fragment>
+      <Section title="Status">
+        <LabeledList>
+          <LabeledList.Item label="Engines">
+            <Button icon="power-off" selected={global_state} onClick={() => act('global_toggle')}>
+              {global_state ? 'Shut All Engines Down' : 'Start All Engines'}
+            </Button>
+          </LabeledList.Item>
+          <LabeledList.Item label="Volume Limit">
+            <Button onClick={() => act('global_limit', { global_limit: -0.1 })} icon="minus" />
+            <Button onClick={() => act('set_global_limit')}>{global_limit}%</Button>
+            <Button onClick={() => act('global_limit', { global_limit: 0.1 })} icon="plus" />
+          </LabeledList.Item>
+          <LabeledList.Item label="Total Thrust">
+            <AnimatedNumber value={total_thrust} />
+          </LabeledList.Item>
+        </LabeledList>
+      </Section>
+      <Section title="Engines" height="340px" style={{ 'overflow-y': 'auto' }}>
+        {engines_info.map((engine, i) => (
+          <Flex spacing={1} mt={i !== 0 && -1} key={i}>
+            <Flex.Item basis="80%">
+              <Collapsible
+                title={
+                  <Box inline>
+                    Engine #{i + 1} | Thrust: <AnimatedNumber value={engine.eng_thrust} /> | Limit:{' '}
+                    <AnimatedNumber value={engine.eng_thrust_limiter} format={(val) => val + '%'} />
+                  </Box>
+                  // "Engine " + (i + 1)
+                  //   + " | Thrust: " + engine.eng_thrust
+                  //   + " | Limit: " + engine.eng_thrust_limiter + "%"
+                }>
+                <Section width="127%">
+                  <LabeledList>
+                    <LabeledList.Item label="Type">{engine.eng_type}</LabeledList.Item>
+                    <LabeledList.Item label="Status">
+                      <Box color={engine.eng_on ? (engine.eng_on === 1 ? 'good' : 'average') : 'bad'}>
+                        {engine.eng_on ? (engine.eng_on === 1 ? 'Online' : 'Booting') : 'Offline'}
+                      </Box>
+                      {engine.eng_status.map((status) => {
+                        if (Array.isArray(status)) {
+                          return <Box color={status[1]}>{status[0]}</Box>;
+                        } else {
+                          return <Box>{status}</Box>;
+                        }
+                      })}
+                    </LabeledList.Item>
+                    <LabeledList.Item label="Current Thrust">{engine.eng_thrust}</LabeledList.Item>
+                    <LabeledList.Item label="Volume Limit">
+                      <Button
+                        onClick={() => act('limit', { limit: -0.1, engine: engine.eng_reference })}
+                        icon="minus"
+                      />
+                      <Button onClick={() => act('set_limit', { engine: engine.eng_reference })}>
+                        {engine.eng_thrust_limiter}%
+                      </Button>
+                      <Button onClick={() => act('limit', { limit: 0.1, engine: engine.eng_reference })} icon="plus" />
+                    </LabeledList.Item>
+                  </LabeledList>
+                </Section>
+              </Collapsible>
+            </Flex.Item>
+            <Flex.Item basis="20%">
+              <Button
+                fluid
+                iconSpin={engine.eng_on === -1}
+                color={engine.eng_on === -1 ? 'purple' : null}
+                selected={engine.eng_on === 1}
+                icon="power-off"
+                onClick={() => act('toggle_engine', { engine: engine.eng_reference })}>
+                {engine.eng_on ? (engine.eng_on === 1 ? 'Shutoff' : 'Booting') : 'Startup'}
+              </Button>
+            </Flex.Item>
+          </Flex>
+        ))}
+      </Section>
+    </Fragment>
+  );
+};