CHOMPStation2/tgui/packages/tgui_ch/interfaces/OperatingComputer.js

import { round } from 'common/math';
import { Fragment } from 'inferno';
import { useBackend } from '../backend';
import { Window } from '../layouts';
import { Box, Button, Flex, Icon, Knob, LabeledList, Section, Tabs, ProgressBar } from '../components';

const stats = [
  ['good', 'Conscious'],
  ['average', 'Unconscious'],
  ['bad', 'DEAD'],
];

const damages = [
  ['Resp.', 'oxyLoss'],
  ['Toxin', 'toxLoss'],
  ['Brute', 'bruteLoss'],
  ['Burn', 'fireLoss'],
];

const damageRange = {
  average: [0.25, 0.5],
  bad: [0.5, Infinity],
};

const tempColors = ['bad', 'average', 'average', 'good', 'average', 'average', 'bad'];

export const OperatingComputer = (props, context) => {
  const { act, data } = useBackend(context);
  const { hasOccupant, choice } = data;
  let body;
  if (!choice) {
    body = hasOccupant ? <OperatingComputerPatient /> : <OperatingComputerUnoccupied />;
  } else {
    body = <OperatingComputerOptions />;
  }
  return (
    <Window width={650} height={455} resizable>
      <Window.Content>
        <Tabs>
          <Tabs.Tab selected={!choice} icon="user" onClick={() => act('choiceOff')}>
            Patient
          </Tabs.Tab>
          <Tabs.Tab selected={!!choice} icon="cog" onClick={() => act('choiceOn')}>
            Options
          </Tabs.Tab>
        </Tabs>
        <Section flexGrow="1">{body}</Section>
      </Window.Content>
    </Window>
  );
};

const OperatingComputerPatient = (props, context) => {
  const { data } = useBackend(context);
  const { occupant } = data;
  return (
    <Fragment>
      <Section title="Patient" level="2">
        <LabeledList>
          <LabeledList.Item label="Name">{occupant.name}</LabeledList.Item>
          <LabeledList.Item label="Status" color={stats[occupant.stat][0]}>
            {stats[occupant.stat][1]}
          </LabeledList.Item>
          <LabeledList.Item label="Health">
            <ProgressBar
              min="0"
              max={occupant.maxHealth}
              value={occupant.health / occupant.maxHealth}
              ranges={{
                good: [0.5, Infinity],
                average: [0, 0.5],
                bad: [-Infinity, 0],
              }}
            />
          </LabeledList.Item>
          {damages.map((d, i) => (
            <LabeledList.Item key={i} label={d[0] + ' Damage'}>
              <ProgressBar key={i} min="0" max="100" value={occupant[d[1]] / 100} ranges={damageRange}>
                {round(occupant[d[1]])}
              </ProgressBar>
            </LabeledList.Item>
          ))}
          <LabeledList.Item label="Temperature">
            <ProgressBar
              min="0"
              max={occupant.maxTemp}
              value={occupant.bodyTemperature / occupant.maxTemp}
              color={tempColors[occupant.temperatureSuitability + 3]}>
              {round(occupant.btCelsius)}&deg;C, {round(occupant.btFaren)}&deg;F
            </ProgressBar>
          </LabeledList.Item>
          {!!occupant.hasBlood && (
            <Fragment>
              <LabeledList.Item label="Blood Level">
                <ProgressBar
                  min="0"
                  max={occupant.bloodMax}
                  value={occupant.bloodLevel / occupant.bloodMax}
                  ranges={{
                    bad: [-Infinity, 0.6],
                    average: [0.6, 0.9],
                    good: [0.6, Infinity],
                  }}>
                  {occupant.bloodPercent}%, {occupant.bloodLevel}cl
                </ProgressBar>
              </LabeledList.Item>
              <LabeledList.Item label="Pulse">{occupant.pulse} BPM</LabeledList.Item>
            </Fragment>
          )}
        </LabeledList>
      </Section>
      <Section title="Current Procedure" level="2">
        {occupant.surgery && occupant.surgery.length ? (
          <LabeledList>
            {occupant.surgery.map((limb) => (
              <LabeledList.Item key={limb.name} label={limb.name}>
                <LabeledList>
                  <LabeledList.Item label="Current State">{limb.currentStage}</LabeledList.Item>
                  <LabeledList.Item label="Possible Next Steps">
                    {limb.nextSteps.map((step) => (
                      <div key={step}>{step}</div>
                    ))}
                  </LabeledList.Item>
                </LabeledList>
              </LabeledList.Item>
            ))}
          </LabeledList>
        ) : (
          <Box color="label">No procedure ongoing.</Box>
        )}
      </Section>
    </Fragment>
  );
};

const OperatingComputerUnoccupied = () => {
  return (
    <Flex textAlign="center" height="100%">
      <Flex.Item grow="1" align="center" color="label">
        <Icon name="user-slash" mb="0.5rem" size="5" />
        <br />
        No patient detected.
      </Flex.Item>
    </Flex>
  );
};

const OperatingComputerOptions = (props, context) => {
  const { act, data } = useBackend(context);
  const { verbose, health, healthAlarm, oxy, oxyAlarm, crit } = data;
  return (
    <LabeledList>
      <LabeledList.Item label="Loudspeaker">
        <Button
          selected={verbose}
          icon={verbose ? 'toggle-on' : 'toggle-off'}
          content={verbose ? 'On' : 'Off'}
          onClick={() => act(verbose ? 'verboseOff' : 'verboseOn')}
        />
      </LabeledList.Item>
      <LabeledList.Item label="Health Announcer">
        <Button
          selected={health}
          icon={health ? 'toggle-on' : 'toggle-off'}
          content={health ? 'On' : 'Off'}
          onClick={() => act(health ? 'healthOff' : 'healthOn')}
        />
      </LabeledList.Item>
      <LabeledList.Item label="Health Announcer Threshold">
        <Knob
          bipolar
          minValue="-100"
          maxValue="100"
          value={healthAlarm}
          stepPixelSize="5"
          ml="0"
          format={(val) => val + '%'}
          onChange={(e, val) =>
            act('health_adj', {
              new: val,
            })
          }
        />
      </LabeledList.Item>
      <LabeledList.Item label="Oxygen Alarm">
        <Button
          selected={oxy}
          icon={oxy ? 'toggle-on' : 'toggle-off'}
          content={oxy ? 'On' : 'Off'}
          onClick={() => act(oxy ? 'oxyOff' : 'oxyOn')}
        />
      </LabeledList.Item>
      <LabeledList.Item label="Oxygen Alarm Threshold">
        <Knob
          bipolar
          minValue="-100"
          maxValue="100"
          value={oxyAlarm}
          stepPixelSize="5"
          ml="0"
          onChange={(e, val) =>
            act('oxy_adj', {
              new: val,
            })
          }
        />
      </LabeledList.Item>
      <LabeledList.Item label="Critical Alert">
        <Button
          selected={crit}
          icon={crit ? 'toggle-on' : 'toggle-off'}
          content={crit ? 'On' : 'Off'}
          onClick={() => act(crit ? 'critOff' : 'critOn')}
        />
      </LabeledList.Item>
    </LabeledList>
  );
};