Converts the Cargo Bounties UI to TGUI and adds a modular app for it. (#51509)

* How did this take me like 3 hours but the bounty UI took 4 weeks like fuck

* Uses style's suggestions for UI cleanup.

* Rebuild TGUI

* Squiggly Brackets No. 1

* Squiggly Brackets No. 2

* Rebuilds tgui also sorry style I got lazy

* Another tgui update

* GREP?

* Rebuilds tgui again

* Rebuild yet again

* How'd you like a nice tender lambchop?

* Take me HOOOOOOOME country ROOOOOADS

* Updates with Anturk's changes.

* Removes unnecessary flex element

Co-authored-by: Aleksej Komarov <stylemistake@gmail.com>

code/modules/cargo/bounty_console.dm

@@ -1,7 +1,5 @@
 #define PRINTER_TIMEOUT 10
 
-
-
 /obj/machinery/computer/bounty
 	name = "\improper Nanotrasen bounty console"
 	desc = "Used to check and claim bounties offered by Nanotrasen"
@@ -9,10 +7,12 @@
 	circuit = /obj/item/circuitboard/computer/bounty
 	light_color = "#E2853D"//orange
 	var/printer_ready = 0 //cooldown var
+	var/static/datum/bank_account/cargocash
 
 /obj/machinery/computer/bounty/Initialize()
 	. = ..()
 	printer_ready = world.time + PRINTER_TIMEOUT
+	cargocash = SSeconomy.get_dep_account(ACCOUNT_CAR)
 
 /obj/machinery/computer/bounty/proc/print_paper()
 	new /obj/item/paper/bounty_printout(loc)
@@ -32,65 +32,34 @@
 		<ul><li>Reward: [B.reward_string()]</li>
 		<li>Completed: [B.completion_string()]</li></ul>"}
 
-/obj/machinery/computer/bounty/ui_interact(mob/user)
-	. = ..()
-
+/obj/machinery/computer/bounty/ui_interact(mob/user, ui_key = "main", datum/tgui/ui = null, force_open = 0, datum/tgui/master_ui = null, datum/ui_state/state = GLOB.default_state)
 	if(!GLOB.bounties_list.len)
 		setup_bounties()
+	ui = SStgui.try_update_ui(user, src, ui_key, ui, force_open)
+	if(!ui)
+		ui = new(user, src, ui_key, "CargoBountyConsole", name, 750, 600, master_ui, state)
+		ui.open()
 
-	var/datum/bank_account/D = SSeconomy.get_dep_account(ACCOUNT_CAR)
-	var/list/dat = list({"<a href='?src=[REF(src)];refresh=1'>Refresh</a>
-	<a href='?src=[REF(src)];refresh=1;choice=Print'>Print Paper</a>
-	<p>Credits: <b>[D.account_balance]</b></p>
-	<table style="text-align:center;" border="1" cellspacing="0" width="100%">
-	<tr><th>Name</th><th>Description</th><th>Reward</th><th>Completion</th><th>Status</th></tr>"})
+/obj/machinery/computer/bounty/ui_data(mob/user)
+	var/list/data = list()
+	var/list/bountyinfo = list()
 	for(var/datum/bounty/B in GLOB.bounties_list)
-		if(B.claimed)
-			dat += "<tr style='background-color:#294675;'>"
-		else if(B.can_claim())
-			dat += "<tr style='background-color:#4F7529;'>"
-		else
-			dat += "<tr style='background-color:#990000;'>"
+		bountyinfo += list(list("name" = B.name, "description" = B.description, "reward_string" = B.reward_string(), "completion_string" = B.completion_string() , "claimed" = B.claimed, "can_claim" = B.can_claim(), "priority" = B.high_priority, "bounty_ref" = REF(B)))
+	data["stored_cash"] = cargocash.account_balance
+	data["bountydata"] = bountyinfo
+	return data
 
-		if(B.high_priority)
-			dat += {"<td><b>[B.name]</b></td>
-			<td><b>High Priority:</b> [B.description]</td>
-			<td><b>[B.reward_string()]</b></td>"}
-		else
-			dat += {"<td>[B.name]</td>
-			<td>[B.description]</td>
-			<td>[B.reward_string()]</td>"}
-		dat += "<td>[B.completion_string()]</td>"
-		if(B.claimed)
-			dat += "<td>Claimed</td>"
-		else if(B.can_claim())
-			dat += "<td><A href='?src=[REF(src)];refresh=1;choice=Claim;d_rec=[REF(B)]'>Claim</a></td>"
-		else
-			dat += "<td>Unclaimed</td>"
-		dat += "</tr>"
-	dat += "</table>"
-	dat = dat.Join()
-	var/datum/browser/popup = new(user, "bounties", "Nanotrasen Bounties", 700, 600)
-	popup.set_content(dat)
-	popup.set_title_image(user.browse_rsc_icon(src.icon, src.icon_state))
-	popup.open()
-
-/obj/machinery/computer/bounty/Topic(href, href_list)
+/obj/machinery/computer/bounty/ui_act(action,params)
 	if(..())
 		return
-
-	switch(href_list["choice"])
+	switch(action)
+		if("ClaimBounty")
+			var/datum/bounty/cashmoney = locate(params["bounty"]) in GLOB.bounties_list
+			if(cashmoney)
+				cashmoney.claim()
+			return TRUE
 		if("Print")
 			if(printer_ready < world.time)
 				printer_ready = world.time + PRINTER_TIMEOUT
 				print_paper()
-
-		if("Claim")
-			var/datum/bounty/B = locate(href_list["d_rec"]) in GLOB.bounties_list
-			if(B)
-				B.claim()
-
-	if(href_list["refresh"])
-		playsound(src, "terminal_type", 25, FALSE)
-
-	updateUsrDialog()
+				return

code/modules/modular_computers/computers/item/tablet_presets.dm

@@ -22,11 +22,14 @@
 
 /obj/item/modular_computer/tablet/preset/cargo/Initialize()
 	. = ..()
+	var/obj/item/computer_hardware/hard_drive/small/hard_drive = new
 	install_component(new /obj/item/computer_hardware/processor_unit/small)
 	install_component(new /obj/item/computer_hardware/battery(src, /obj/item/stock_parts/cell/computer))
-	install_component(new /obj/item/computer_hardware/hard_drive/small)
+	install_component(hard_drive)
 	install_component(new /obj/item/computer_hardware/network_card)
 	install_component(new /obj/item/computer_hardware/printer/mini)
+	hard_drive.store_file(new /datum/computer_file/program/bounty)
+	hard_drive.store_file(new /datum/computer_file/program/shipping)
 
 /// Given by the syndicate as part of the contract uplink bundle - loads in the Contractor Uplink.
 /obj/item/modular_computer/tablet/syndicate_contract_uplink/preset/uplink/Initialize()

code/modules/modular_computers/file_system/programs/arcade.dm

@@ -83,7 +83,6 @@
 
 /datum/computer_file/program/arcade/ui_data(mob/user)
 	var/list/data = get_header_data()
-
 	data["Hitpoints"] = boss_hp
 	data["PlayerHitpoints"] = player_hp
 	data["PlayerMP"] = player_mp

code/modules/modular_computers/file_system/programs/cargobounty.dm

@@ -0,0 +1,50 @@
+/datum/computer_file/program/bounty
+	filename = "bounty"
+	filedesc = "Nanotrasen Bounty Hunter"
+	program_icon_state = "bounty"
+	extended_desc = "A basic interface for supply personnel to check and claim bounties."
+	requires_ntnet = TRUE
+	transfer_access = ACCESS_CARGO
+	network_destination = "cargo claims interface"
+	size = 10
+	tgui_id = "NtosBountyConsole"
+	ui_x = 750
+	ui_y = 600
+	///cooldown var for printing paper sheets.
+	var/printer_ready = 0
+	///The cargo account for grabbing the cargo account's credits.
+	var/static/datum/bank_account/cargocash
+
+/datum/computer_file/program/bounty/proc/print_paper()
+	new /obj/item/paper/bounty_printout(get_turf(computer))
+
+/datum/computer_file/program/bounty/ui_interact(mob/user, ui_key, datum/tgui/ui, force_open, datum/tgui/master_ui, datum/ui_state/state)
+	if(!GLOB.bounties_list.len)
+		setup_bounties()
+	printer_ready = world.time + PRINTER_TIMEOUT
+	cargocash = SSeconomy.get_dep_account(ACCOUNT_CAR)
+	. = ..()
+
+/datum/computer_file/program/bounty/ui_data(mob/user)
+	var/list/data = get_header_data()
+	var/list/bountyinfo = list()
+	for(var/datum/bounty/B in GLOB.bounties_list)
+		bountyinfo += list(list("name" = B.name, "description" = B.description, "reward_string" = B.reward_string(), "completion_string" = B.completion_string() , "claimed" = B.claimed, "can_claim" = B.can_claim(), "priority" = B.high_priority, "bounty_ref" = REF(B)))
+	data["stored_cash"] = cargocash.account_balance
+	data["bountydata"] = bountyinfo
+	return data
+
+/datum/computer_file/program/bounty/ui_act(action,params)
+	if(..())
+		return
+	switch(action)
+		if("ClaimBounty")
+			var/datum/bounty/cashmoney = locate(params["bounty"]) in GLOB.bounties_list
+			if(cashmoney)
+				cashmoney.claim()
+			return TRUE
+		if("Print")
+			if(printer_ready < world.time)
+				printer_ready = world.time + PRINTER_TIMEOUT
+				print_paper()
+				return

tgstation.dme

@@ -2478,6 +2478,7 @@
 #include "code\modules\modular_computers\file_system\programs\atmosscan.dm"
 #include "code\modules\modular_computers\file_system\programs\borg_monitor.dm"
 #include "code\modules\modular_computers\file_system\programs\card.dm"
+#include "code\modules\modular_computers\file_system\programs\cargobounty.dm"
 #include "code\modules\modular_computers\file_system\programs\cargoship.dm"
 #include "code\modules\modular_computers\file_system\programs\configurator.dm"
 #include "code\modules\modular_computers\file_system\programs\crewmanifest.dm"

tgui/packages/tgui/interfaces/CargoBountyConsole.js

@@ -0,0 +1,121 @@
+import { toArray } from 'common/collections';
+import { Fragment } from 'inferno';
+import { useBackend, useSharedState } from '../backend';
+import { AnimatedNumber, Box, Button, Flex, LabeledList, Section, Table, Tabs, Grid } from '../components';
+import { formatMoney } from '../format';
+import { Window } from '../layouts';
+
+export const CargoBountyConsole = (props, context) => {
+  const { act, data } = useBackend(context);
+  const [tab, setTab] = useSharedState(context, 'tab', 'catalog');
+  const {
+    bountydata = [],
+    stored_cash,
+  } = data;
+  return (
+    <Window resizable>
+      <Window.Content scrollable>
+        <Section
+          title={<BountyHeader />}
+          buttons={(
+            <Button
+              icon="print"
+              content="Print Bounty List"
+              onClick={() => act('Print')} />
+          )}>
+          <Table border>
+            <Table.Row 
+              bold 
+              italic 
+              color="label"
+              fontSize={1.25}>
+              <Table.Cell p={1} textAlign="center">
+                Bounty Object
+              </Table.Cell>
+              <Table.Cell p={1} textAlign="center">
+                Description
+              </Table.Cell>
+              <Table.Cell p={1} textAlign="center">
+                Progress
+              </Table.Cell>
+              <Table.Cell p={1} textAlign="center">
+                Value
+              </Table.Cell>
+              <Table.Cell p={1} textAlign="center">
+                Claim
+              </Table.Cell>
+            </Table.Row>
+            {bountydata.map(bounty => (
+              <Table.Row
+                key={bounty.name}
+                backgroundColor={bounty.priority === 1
+                  ? 'rgba(252, 152, 3, 0.25)'
+                  : ''}>
+                <Table.Cell bold p={1}>
+                  {bounty.name}
+                </Table.Cell>
+                <Table.Cell 
+                  italic 
+                  textAlign="center"
+                  p={1}>
+                  {bounty.description}
+                </Table.Cell>
+                <Table.Cell 
+                  bold 
+                  p={1} 
+                  textAlign="center">
+                  {bounty.priority === 1
+                    ? <Box>High Priority</Box>
+                    : ""}
+                  {bounty.completion_string}
+                </Table.Cell>
+                <Table.Cell 
+                  bold 
+                  p={1}
+                  textAlign="center">
+                  {bounty.reward_string}
+                </Table.Cell>
+                <Table.Cell 
+                  bold 
+                  p={1}>
+                  <Button 
+                    fluid
+                    textAlign="center"
+                    icon={bounty.claimed === 1
+                      ? "check"
+                      : ""}
+                    content={bounty.claimed === 1
+                      ? "Claimed"
+                      : "Claim"}
+                    disabled={bounty.claimed === 1}
+                    color={bounty.can_claim === 1
+                      ? 'green'
+                      : 'red'}
+                    onClick={() => act('ClaimBounty', {
+                      bounty: bounty.bounty_ref,
+                    })} />
+                </Table.Cell>
+              </Table.Row>
+            ))}
+          </Table>
+        </Section>
+        
+      </Window.Content>
+    </Window>
+  );
+};
+
+const BountyHeader = (props, context) => {
+  const { act, data } = useBackend(context);
+  const {
+    stored_cash,
+  } = data;
+  return (
+    <Box inline bold>
+      <AnimatedNumber
+        value={stored_cash}
+        format={value => formatMoney(value)} />
+      {' credits'}
+    </Box>
+  );
+};

tgui/packages/tgui/interfaces/NtosBountyConsole.js

@@ -0,0 +1,120 @@
+import { toArray } from 'common/collections';
+import { Fragment } from 'inferno';
+import { useBackend, useSharedState } from '../backend';
+import { AnimatedNumber, Box, Button, Flex, LabeledList, Section, Table, Tabs, Grid } from '../components';
+import { formatMoney } from '../format';
+import { NtosWindow } from '../layouts';
+
+export const NtosBountyConsole = (props, context) => {
+  const { act, data } = useBackend(context);
+  const [tab, setTab] = useSharedState(context, 'tab', 'catalog');
+  const {
+    bountydata = [],
+    stored_cash,
+  } = data;
+  return (
+    <NtosWindow resizable>
+      <NtosWindow.Content scrollable>
+        <Section
+          title={<BountyHeader />}
+          buttons={(
+            <Button
+              icon="print"
+              content="Print Bounty List"
+              onClick={() => act('Print')} />
+          )}>
+          <Table border>
+            <Table.Row 
+              bold 
+              italic 
+              color="label"
+              fontSize={1.25}>
+              <Table.Cell p={1} textAlign="center">
+                Bounty Object
+              </Table.Cell>
+              <Table.Cell p={1} textAlign="center">
+                Description
+              </Table.Cell>
+              <Table.Cell p={1} textAlign="center">
+                Progress
+              </Table.Cell>
+              <Table.Cell p={1} textAlign="center">
+                Value
+              </Table.Cell>
+              <Table.Cell p={1} textAlign="center">
+                Claim
+              </Table.Cell>
+            </Table.Row>
+            {bountydata.map(bounty => (
+              <Table.Row
+                key={bounty.name}
+                backgroundColor={bounty.priority === 1
+                  ? 'rgba(252, 152, 3, 0.25)'
+                  : ''}>
+                <Table.Cell bold p={1}>
+                  {bounty.name}
+                </Table.Cell>
+                <Table.Cell 
+                  italic 
+                  textAlign="center"
+                  p={1}>
+                  {bounty.description}
+                </Table.Cell>
+                <Table.Cell 
+                  bold 
+                  p={1} 
+                  textAlign="center">
+                  {bounty.priority === 1
+                    ? <Box>High Priority</Box>
+                    : ""}
+                  {bounty.completion_string}
+                </Table.Cell>
+                <Table.Cell 
+                  bold 
+                  p={1}
+                  textAlign="center">
+                  {bounty.reward_string}
+                </Table.Cell>
+                <Table.Cell 
+                  bold 
+                  p={1}>
+                  <Button 
+                    fluid
+                    textAlign="center"
+                    icon={bounty.claimed === 1
+                      ? "check"
+                      : ""}
+                    content={bounty.claimed === 1
+                      ? "Claimed"
+                      : "Claim"}
+                    disabled={bounty.claimed === 1}
+                    color={bounty.can_claim === 1
+                      ? 'green'
+                      : 'red'}
+                    onClick={() => act('ClaimBounty', {
+                      bounty: bounty.bounty_ref,
+                    })} />
+                </Table.Cell>
+              </Table.Row>
+            ))}
+          </Table>
+        </Section>
+      </NtosWindow.Content>
+    </NtosWindow>
+  );
+};
+
+const BountyHeader = (props, context) => {
+  const { act, data } = useBackend(context);
+  const {
+    stored_cash,
+  } = data;
+  return (
+    <Box inline bold>
+      <AnimatedNumber
+        value={stored_cash}
+        format={value => formatMoney(value)} />
+      {' credits'}
+    </Box>
+  );
+};