[MIRROR] Separates bitrunning domains by difficulty (#2007)

* Separates bitrunning domains by difficulty (#81409)

## About The Pull Request

Rearranges the bitrunning quantum console's UI to display domains in
tabs by difficulty.

Moved the skull for hard domains onto the tab, and removed the
difficulty counter from individual domains as this is now better
communicated through the difficulty tabs.

Added tooltips for the remaining cost and reward counters.

Made zero difficulty (peaceful) domains green.


![image](https://github.com/tgstation/tgstation/assets/5479091/b1d2df46-1b55-4255-b07a-f78eac64429b)

## Why It's Good For The Game

Makes domain selection a bit more intuitive than a single multi-coloured
list, letting players filter by the most important statistic
(difficulty.)

Removes some repeated information where difficulty was shown both as
colour and number of skulls.

## Changelog
:cl:
qol: The bitrunning quantum console UI now lists domains in tabs by
difficulty.
/:cl:

* Separates bitrunning domains by difficulty

---------

Co-authored-by: NovaBot <[email protected]>
Co-authored-by: Thunder12345 <[email protected]>

tgui/packages/tgui/interfaces/QuantumConsole.tsx

@@ -1,6 +1,6 @@
 import { BooleanLike } from 'common/react';
 
-import { useBackend } from '../backend';
+import { useBackend, useSharedState } from '../backend';
 import {
   Button,
   Collapsible,
@@ -10,6 +10,7 @@ import {
   Section,
   Stack,
   Table,
+  Tabs,
   Tooltip,
 } from '../components';
 import { TableCell, TableRow } from '../components/Table';
@@ -82,7 +83,7 @@ const getColor = (difficulty: number) => {
     case Difficulty.High:
       return 'bad';
     default:
-      return '';
+      return 'green';
   }
 };
 
@@ -101,6 +102,7 @@ export const QuantumConsole = (props) => {
 
 const AccessView = (props) => {
   const { act, data } = useBackend<Data>();
+  const [tab, setTab] = useSharedState('tab', 0);
 
   if (!isConnected(data)) {
     return <NoticeBox danger>No server connected!</NoticeBox>;
@@ -117,6 +119,10 @@ const AccessView = (props) => {
 
   const sorted = available_domains.sort((a, b) => a.cost - b.cost);
 
+  const filtered = sorted.filter((domain) => {
+    return domain.difficulty === tab;
+  });
+
   let selected;
   if (generated_domain) {
     selected = randomized
@@ -153,7 +159,45 @@ const AccessView = (props) => {
           scrollable
           title="Virtual Domains"
         >
-          {sorted.map((domain) => (
+          <Tabs fluid>
+            <Tabs.Tab
+              backgroundColor={getColor(Difficulty.None)}
+              textColor="white"
+              selected={tab === 0}
+              onClick={() => setTab(0)}
+              icon="chevron-down"
+            >
+              Peaceful
+            </Tabs.Tab>
+            <Tabs.Tab
+              backgroundColor={getColor(Difficulty.Low)}
+              textColor="black"
+              selected={tab === 1}
+              onClick={() => setTab(1)}
+              icon="chevron-down"
+            >
+              Easy
+            </Tabs.Tab>
+            <Tabs.Tab
+              backgroundColor={getColor(Difficulty.Medium)}
+              textColor="white"
+              selected={tab === 2}
+              onClick={() => setTab(2)}
+              icon="chevron-down"
+            >
+              Medium
+            </Tabs.Tab>
+            <Tabs.Tab
+              backgroundColor={getColor(Difficulty.High)}
+              textColor="white"
+              selected={tab === 3}
+              onClick={() => setTab(3)}
+              icon="chevron-down"
+            >
+              Hard <Icon name="skull" ml={1} />{' '}
+            </Tabs.Tab>
+          </Tabs>
+          {filtered.map((domain) => (
             <DomainEntry key={domain.id} domain={domain} />
           ))}
         </Section>
@@ -223,7 +267,6 @@ const DomainEntry = (props: DomainEntryProps) => {
       title={
         <>
           {name}
-          {difficulty === Difficulty.High && <Icon name="skull" ml={1} />}
           {!!is_modular && name !== '???' && <Icon name="cubes" ml={1} />}
         </>
       }
@@ -232,19 +275,19 @@ const DomainEntry = (props: DomainEntryProps) => {
         <Stack.Item color="label" grow={4}>
           {desc}
           {!!is_modular && ' (Modular)'}
-          {difficulty === Difficulty.High && ' (Hard)'}
         </Stack.Item>
         <Stack.Divider />
         <Stack.Item grow>
           <Table>
             <TableRow>
-              <DisplayDetails amount={cost} color="pink" icon="star" />
-            </TableRow>
-            <TableRow>
-              <DisplayDetails amount={difficulty} color="white" icon="skull" />
+              <Tooltip content="Points cost for deploying domain.">
+                <DisplayDetails amount={cost} color="pink" icon="star" />
+              </Tooltip>
             </TableRow>
             <TableRow>
-              <DisplayDetails amount={reward} color="gold" icon="coins" />
+              <Tooltip content="Reward for competing domain.">
+                <DisplayDetails amount={reward} color="gold" icon="coins" />
+              </Tooltip>
             </TableRow>
           </Table>
         </Stack.Item>