[MIRROR] civilian bounty control terminal displays bounty description…

… and payout of new bounty options (#2275) (#3146)

* civilian bounty control terminal displays bounty description and payout of new bounty options (#82987)

## About The Pull Request
The green buttons for selecting one of three bounties now also display
the description and payout.


https://github.com/tgstation/tgstation/assets/94711066/53d7fb02-28be-4138-b3d8-9f7a4dd6a356


Fixes #81867
Sorta brings it back to how it used to look, I think? The payout was
still in the code, just not being displayed. But I looked through the
file history and could find NO EVIDENCE of the bounty console displaying
the description in the past so I guess I hallucinated that.
## Why It's Good For The Game
It's nice to be able to see the payout before you're locked into a
bounty for 5 minutes. Also more chances to read the flavortext and it
makes the buttons feel less barren. With some bounties it also gives a
better idea of how to even get the thing before committing to it.
## Changelog
:cl:
fix: the civilian bounty control terminal displays the payout of new
bounty options again
qol: the civilian bounty control terminal displays the description of
new bounty options
/:cl:

* civilian bounty control terminal displays bounty description and payout of new bounty options

---------

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

code/game/machinery/civilian_bounties.dm

@@ -184,6 +184,9 @@
 			data["id_bounty_names"] = list(inserted_scan_id.registered_account.bounties[1].name,
 											inserted_scan_id.registered_account.bounties[2].name,
 											inserted_scan_id.registered_account.bounties[3].name)
+			data["id_bounty_infos"] = list(inserted_scan_id.registered_account.bounties[1].description,
+											inserted_scan_id.registered_account.bounties[2].description,
+											inserted_scan_id.registered_account.bounties[3].description)
 			data["id_bounty_values"] = list(inserted_scan_id.registered_account.bounties[1].reward * (CIV_BOUNTY_SPLIT/100),
 											inserted_scan_id.registered_account.bounties[2].reward * (CIV_BOUNTY_SPLIT/100),
 											inserted_scan_id.registered_account.bounties[3].reward * (CIV_BOUNTY_SPLIT/100))

tgui/packages/tgui/interfaces/CivCargoHoldTerminal.jsx

@@ -96,41 +96,66 @@ const BountyTextBox = (props) => {
 
 const BountyPickBox = (props) => {
   const { act, data } = useBackend();
-  const { id_bounty_names, id_bounty_values } = data;
+  const { id_bounty_names, id_bounty_infos, id_bounty_values } = data;
   return (
     <Section title="Please Select a Bounty:" textAlign="center">
       <Flex width="100%" wrap>
         <Flex.Item shrink={0} grow={0.5}>
-          <Button
-            fluid
-            color="green"
-            content={id_bounty_names[0]}
-            onClick={() => act('pick', { value: 1 })}
-          >
-            <Box fontSize="14px">Payout: {id_bounty_values[0]} cr</Box>
-          </Button>
+          <BountyPickButton
+            bounty_name={id_bounty_names[0]}
+            bounty_info={id_bounty_infos[0]}
+            bounty_value={id_bounty_values[0]}
+            pick_value={1}
+            act={act}
+          />
         </Flex.Item>
         <Flex.Item shrink={0} grow={0.5} px={1}>
-          <Button
-            fluid
-            color="green"
-            content={id_bounty_names[1]}
-            onClick={() => act('pick', { value: 2 })}
-          >
-            <Box fontSize="14px">Payout: {id_bounty_values[1]} cr</Box>
-          </Button>
+          <BountyPickButton
+            bounty_name={id_bounty_names[1]}
+            bounty_info={id_bounty_infos[1]}
+            bounty_value={id_bounty_values[1]}
+            pick_value={2}
+            act={act}
+          />
         </Flex.Item>
         <Flex.Item shrink={0} grow={0.5}>
-          <Button
-            fluid
-            color="green"
-            content={id_bounty_names[2]}
-            onClick={() => act('pick', { value: 3 })}
-          >
-            <Box fontSize="14px">Payout: {id_bounty_values[2]} cr</Box>
-          </Button>
+          <BountyPickButton
+            bounty_name={id_bounty_names[2]}
+            bounty_info={id_bounty_infos[2]}
+            bounty_value={id_bounty_values[2]}
+            pick_value={3}
+            act={act}
+          />
         </Flex.Item>
       </Flex>
     </Section>
   );
 };
+
+const BountyPickButton = (props) => {
+  return (
+    <Button
+      fluid
+      color="green"
+      onClick={() => props.act('pick', { value: props.pick_value })}
+      style={{
+        display: 'flex',
+        textWrap: 'wrap',
+        whiteSpace: 'normal',
+        paddingLeft: '0',
+        paddingRight: '0',
+      }}
+    >
+      <Box>{props.bounty_name}</Box>
+      <Box
+        textAlign="left"
+        color="black"
+        backgroundColor="linen"
+        lineHeight="1.2em"
+      >
+        {props.bounty_info}
+      </Box>
+      <Box>Payout: {props.bounty_value} cr</Box>
+    </Button>
+  );
+};