CHOMPStation2/tgui/packages/tgui_ch/interfaces/BeaconLocator.jsx

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>
  );
};