Adds new groups to orbit ui + fixes (#71943)

## About The Pull Request
1. Adds death squad and ert jobs to their new group. Though, most of
these I don't think I've EVER seen used, it won't hurt to add them.
2. Swayed by the comments of [Michigan TypeScript
Conference](https://youtu.be/0fTdCSH_QEU), I am removing usages of
enums; otherwise put, "Enums aren't going to happen. Stop trying to make
them happen".
3. Heatmap mode didn't seem to be working properly, I've made it a
little more sensitive to orbiters
## Why It's Good For The Game
Bug fixes, more groupings on the orbit UI
## Changelog
🆑
fix: ERTs should now be properly grouped in the orbit UI
fix: Orbit heatmap should be now working properly.
/🆑

tgui/packages/tgui/interfaces/Orbit/constants.ts

@@ -8,30 +8,51 @@ export const ANTAG2COLOR = {
 export const ANTAG2GROUP = {
   'Abductor Agent': 'Abductors',
   'Abductor Scientist': 'Abductors',
+
   'Ash Walker': 'Ash Walkers',
+
   'Blob': 'Biohazards',
   'Sentient Disease': 'Biohazards',
+
+  'Admiral': 'CentCom',
+  'CentCom Bartender': 'CentCom',
   'CentCom Commander': 'CentCom',
   'CentCom Head Intern': 'CentCom',
   'CentCom Intern': 'CentCom',
   'CentCom Official': 'CentCom',
   'Central Command': 'CentCom',
+  'Custodian': 'CentCom',
+  'Private Security Force': 'CentCom',
+  'VIP Guest': 'CentCom',
+
   'Clown Operative': 'Clown Operatives',
   'Clown Operative Leader': 'Clown Operatives',
+
+  'Death Squad Officer': 'Emergency Response Team',
+  'Death Squad Trooper': 'Emergency Response Team',
+  'Emergency Response Team Commander': 'Emergency Response Team',
+  'Security Response Officer': 'Emergency Response Team',
+  'Engineering Response Officer': 'Emergency Response Team',
+  'Medical Response Officer': 'Emergency Response Team',
+  'Religious Response Officer': 'Emergency Response Team',
+  'Janitorial Response Officer': 'Emergency Response Team',
+  'Entertainment Response Officer': 'Emergency Response Team',
+
   'Nuclear Operative': 'Nuclear Operatives',
   'Nuclear Operative Leader': 'Nuclear Operatives',
+
   'Space Wizard': 'Wizard Federation',
   'Wizard Apprentice': 'Wizard Federation',
   'Wizard Minion': 'Wizard Federation',
 } as const;
 
-export enum THREAT {
-  Low = 2,
-  Medium = 5,
-  High = 8,
-}
+export const THREAT = {
+  Low: 1,
+  Medium: 5,
+  High: 8,
+} as const;
 
-export enum HEALTH {
-  Good = 69,
-  Average = 19,
-}
+export const HEALTH = {
+  Good: 69,
+  Average: 19,
+} as const;

tgui/packages/tgui/interfaces/Orbit/helpers.ts

@@ -53,7 +53,7 @@ const getHealthColor = (health: number) => {
 };
 
 /** Returns the display color based on orbiter numbers */
-const getThreatColor = (orbiters: number) => {
+const getThreatColor = (orbiters = 0) => {
   switch (true) {
     case orbiters > THREAT.High:
       return 'violet';
@@ -66,19 +66,13 @@ const getThreatColor = (orbiters: number) => {
   }
 };
 
-/**
- * ### getDisplayColor
- * Displays color for buttons based on the health or orbiter count. Toggleable.
- * @param {Observable} item - The point of interest.
- * @param {boolean} heatMap - Whether the user has heat map toggled.
- * @param {string} color - OPTIONAL: The color to default to.
- */
+/** Displays color for buttons based on the health or orbiter count. */
 export const getDisplayColor = (
   item: Observable,
   heatMap: boolean,
   color?: string
 ) => {
-  const { health, orbiters = 0 } = item;
+  const { health, orbiters } = item;
   if (typeof health !== 'number') {
     return color ? 'good' : 'grey';
   }

tgui/packages/tgui/interfaces/Orbit/index.tsx

@@ -4,9 +4,9 @@ import { capitalizeFirst, multiline } from 'common/string';
 import { useBackend, useLocalState } from 'tgui/backend';
 import { Button, Collapsible, Icon, Input, LabeledList, NoticeBox, Section, Stack } from 'tgui/components';
 import { Window } from 'tgui/layouts';
-import { collateAntagonists, getDisplayColor, getDisplayName, isJobOrNameMatch } from './helpers';
-import { ANTAG2COLOR } from './constants';
 import { JobToIcon } from '../common/JobToIcon';
+import { ANTAG2COLOR } from './constants';
+import { collateAntagonists, getDisplayColor, getDisplayName, isJobOrNameMatch } from './helpers';
 import type { AntagGroup, Observable, OrbitData } from './types';
 
 export const Orbit = (props, context) => {
@@ -39,6 +39,7 @@ const ObservableSearch = (props, context) => {
     misc = [],
     npcs = [],
   } = data;
+
   const [autoObserve, setAutoObserve] = useLocalState<boolean>(
     context,
     'autoObserve',
@@ -54,6 +55,7 @@ const ObservableSearch = (props, context) => {
     'searchQuery',
     ''
   );
+
   /** Gets a list of Observables, then filters the most relevant to orbit */
   const orbitMostRelevant = (searchQuery: string) => {
     /** Returns the most orbited observable that matches the search. */
@@ -66,6 +68,7 @@ const ObservableSearch = (props, context) => {
       sortBy<Observable>((observable) => -(observable.orbiters || 0)),
       // Makes a single Observables list for an easy search
     ])([alive, antagonists, dead, ghosts, misc, npcs].flat())[0];
+
     if (mostRelevant !== undefined) {
       act('orbit', {
         ref: mostRelevant.ref,
@@ -140,7 +143,9 @@ const ObservableContent = (props, context) => {
     misc = [],
     npcs = [],
   } = data;
-  let collatedAntagonists: Array<AntagGroup> = [];
+
+  let collatedAntagonists: AntagGroup[] = [];
+
   if (antagonists.length) {
     collatedAntagonists = collateAntagonists(antagonists);
   }
@@ -173,17 +178,20 @@ const ObservableContent = (props, context) => {
 const ObservableSection = (
   props: {
     color?: string;
-    section: Array<Observable>;
+    section: Observable[];
     title: string;
   },
   context
 ) => {
   const { color, section = [], title } = props;
+
   if (!section.length) {
     return null;
   }
+
   const [searchQuery] = useLocalState<string>(context, 'searchQuery', '');
-  const filteredSection: Array<Observable> = flow([
+
+  const filteredSection: Observable[] = flow([
     filter<Observable>((observable) =>
       isJobOrNameMatch(observable, searchQuery)
     ),
@@ -193,6 +201,7 @@ const ObservableSection = (
         .toLowerCase()
     ),
   ])(section);
+
   if (!filteredSection.length) {
     return null;
   }
@@ -220,6 +229,7 @@ const ObservableItem = (
   const { act } = useBackend<OrbitData>(context);
   const { color, item } = props;
   const { extra, full_name, job, job_icon, health, name, orbiters, ref } = item;
+
   const [autoObserve] = useLocalState<boolean>(context, 'autoObserve', false);
   const [heatMap] = useLocalState<boolean>(context, 'heatMap', false);
 
@@ -247,6 +257,7 @@ const ObservableTooltip = (props: { item: Observable }) => {
   const {
     item: { extra, full_name, job, health },
   } = props;
+
   const extraInfo = extra?.split(':');
   const displayHealth = !!health && health >= 0 ? `${health}%` : 'Critical';
 

tgui/packages/tgui/interfaces/Orbit/types.ts

@@ -1,14 +1,14 @@
-export type AntagGroup = [string, Antags];
-
 export type Antags = Array<Observable & { antag: string }>;
 
+export type AntagGroup = [string, Antags];
+
 export type OrbitData = {
-  alive: Array<Observable>;
+  alive: Observable[];
   antagonists: Antags;
-  dead: Array<Observable>;
-  ghosts: Array<Observable>;
-  misc: Array<Observable>;
-  npcs: Array<Observable>;
+  dead: Observable[];
+  ghosts: Observable[];
+  misc: Observable[];
+  npcs: Observable[];
 };
 
 export type Observable = {