Bundle Copy

tgui/packages/tgui_ch/interfaces/BeaconLocator.js

@@ -0,0 +1,50 @@
+import { toFixed, round } from 'common/math';
+import { useBackend } from '../backend';
+import { Box, Button, Icon, LabeledList, NumberInput, Section } from '../components';
+import { Window } from '../layouts';
+
+export const BeaconLocator = (props, context) => {
+  const { act, data } = useBackend(context);
+
+  const { scan_ticks, degrees, rawfreq, minFrequency, maxFrequency } = data;
+
+  return (
+    <Window width={300} height={220}>
+      <Window.Content>
+        <Section title="Beacon Locator">
+          {(scan_ticks && <Box color="label">Scanning...</Box>) || null}
+          {(degrees && (
+            <Box textAlign="center">
+              <Box textAlign="center">
+                <Icon size={4} name="arrow-up" rotation={degrees} />
+              </Box>
+              Locked on. Follow the arrow.
+            </Box>
+          )) || <Box color="average">No lock.</Box>}
+          <Button mt={1} mb={1} fluid icon="broadcast-tower" onClick={() => act('reset_tracking')}>
+            Reset tracker
+          </Button>
+          <LabeledList>
+            <LabeledList.Item label="Frequency">
+              <NumberInput
+                animated
+                unit="kHz"
+                step={0.2}
+                stepPixelSize={10}
+                minValue={minFrequency / 10}
+                maxValue={maxFrequency / 10}
+                value={rawfreq / 10}
+                format={(value) => toFixed(value, 1)}
+                onDrag={(e, value) =>
+                  act('setFrequency', {
+                    freq: round(value * 10),
+                  })
+                }
+              />
+            </LabeledList.Item>
+          </LabeledList>
+        </Section>
+      </Window.Content>
+    </Window>
+  );
+};