Updates the Smelter UI into a TGUI format (#2326)

Co-authored-by: Bokkiewokkie <[email protected]>

Author: Bobbanz1

code/modules/mining/machine_processing.dm

@@ -78,50 +78,53 @@
 			machine.CONSOLE = src
 			return
 
-/obj/machinery/mineral/processing_unit_console/ui_interact(mob/user)
+//NSV13 - Furnace TGUI - Start
+/obj/machinery/mineral/processing_unit_console/ui_interact(mob/user, datum/tgui/ui)
+	ui = SStgui.try_update_ui(user, src, ui)
+	if(!ui)
+		ui = new(user, src, "Smelter")
+		ui.open()
+		ui.set_autoupdate(TRUE) // Material amounts
+
+/obj/machinery/mineral/processing_unit_console/ui_data(mob/user)
 	. = ..()
+	var/list/data = list()
 	if(!machine)
 		return
 
-	var/dat = machine.get_machine_data()
+	data = machine.get_machine_data()
+	return data
 
-	var/datum/browser/popup = new(user, "processing", "Smelting Console", 300, 500)
-	popup.set_content(dat)
-	popup.open()
-
-/obj/machinery/mineral/processing_unit_console/Topic(href, href_list)
+/obj/machinery/mineral/processing_unit_console/ui_act(action, params)
 	if(..())
 		return
-	usr.set_machine(src)
-	add_fingerprint(usr)
-
-	if(href_list["material"])
-		var/datum/material/new_material = locate(href_list["material"])
-		if(istype(new_material))
-			machine.selected_material = new_material
-			machine.selected_alloy = null
-
-	if(href_list["alloy"])
-		machine.selected_material = null
-		machine.selected_alloy = href_list["alloy"]
-
-	if(href_list["toggle_on"])
-		machine.toggle_on()
-
-	if(href_list["redeem"])
-		var/mob/M = usr
-		var/obj/item/card/id/I = M.get_idcard(TRUE)
-		if(!I)
-			to_chat(usr, "<span class='warning'>No ID detected.</span>")
-			return
-		if(!machine.points)
-			to_chat(usr, "<span class='warning'>No points to claim.</span>")
-			return
-		I.mining_points += machine.points
-		machine.points = 0
 
-	updateUsrDialog()
-	return
+	switch(action)
+		if("Redeem")
+			var/mob/M = usr
+			var/obj/item/card/id/I = M.get_idcard(TRUE)
+			if(!I)
+				to_chat(usr, "<span class='warning'>No ID detected.</span>")
+				return
+			if(!machine.points)
+				to_chat(usr, "<span class='warning'>No points to claim.</span>")
+				return
+			I.mining_points += machine.points
+			machine.points = 0
+
+		if("Toggle_on")
+			machine.toggle_on()
+
+		if("Material")
+			var/datum/material/new_material = locate(params["id"])
+			if(istype(new_material))
+				machine.selected_material = new_material
+				machine.selected_alloy = null
+
+		if("Alloy")
+			machine.selected_material = null
+			machine.selected_alloy = params["id"]
+//NSV13 - Furnace TGUI - Stop
 
 /obj/machinery/mineral/processing_unit_console/Destroy()
 	machine = null
@@ -173,47 +176,36 @@
 			points += O.points * O.amount
 		materials.insert_item(O)
 		qdel(O)
+		/* NSV13 - Disabled due to our TGUI version
 		if(CONSOLE)
 			CONSOLE.updateUsrDialog()
+		*/
 
+//NSV13 - Furnace TGUI - Start
 /obj/machinery/mineral/processing_unit/proc/get_machine_data()
-	var/dat = "<b>Smelter control console</b><br><br>"
-
-	//On or off - on the console so we don't fail can_interact when doing Topic
-	dat += "Machine is currently <A href='?src=[REF(CONSOLE)];toggle_on=1'>[ on ? "On" : "Off"]</A>"
-	dat += "<br><br>"
+	var/list/data = list()
+	data["on"] = on
+	data["allowredeem"] = allow_point_redemption
 
 	//Points
 	if(allow_point_redemption)
-		dat += "Stored points: [points] "
-		dat += "<A href='?src=[REF(CONSOLE)];redeem=1'><b>Redeem</b></A> "
-		dat += "<br><br>"
+		data["points"] = points
 
+	data["materials"] = list()
 	var/datum/component/material_container/materials = GetComponent(/datum/component/material_container)
 	for(var/datum/material/M in materials.materials)
 		var/amount = materials.materials[M]
-		dat += "<span class=\"res_name\">[M.name]: </span>[amount] cm&sup3;"
-		if (selected_material == M)
-			dat += " <i>Smelting</i>"
-		else
-			dat += " <A href='?src=[REF(CONSOLE)];material=[REF(M)]'><b>Not Smelting</b></A> "
-		dat += "<br>"
-
-	dat += "<br><br>"
-	dat += "<b>Smelt Alloys</b><br>"
+		var/sheet_amount = amount / MINERAL_MATERIAL_AMOUNT
+		var/ref = REF(M)
+		data["materials"] += list(list("name" = M.name, "id" = ref, "amount" = sheet_amount, "smelting" = (selected_material == M)))
 
+	data["alloys"] = list()
 	for(var/v in stored_research.researched_designs)
 		var/datum/design/D = SSresearch.techweb_design_by_id(v)
-		dat += "<span class=\"res_name\">[D.name] "
-		if (selected_alloy == D.id)
-			dat += " <i>Smelting</i>"
-		else
-			dat += " <A href='?src=[REF(CONSOLE)];alloy=[D.id]'><b>Not Smelting</b></A> "
-		dat += "<br>"
+		data["alloys"] += list(list("name" = D.name, "id" = D.id, "smelting" = (selected_alloy == D.id), "amount" = can_smelt(D)))
 
-	dat += "<br><br>"
-
-	return dat
+	return data
+//NSV13 - Furnace TGUI - Stop
 
 /obj/machinery/mineral/processing_unit/pickup_item(datum/source, atom/movable/target, atom/oldLoc)
 	if(QDELETED(target))
@@ -234,9 +226,10 @@
 		else if(selected_alloy)
 			smelt_alloy(delta_time)
 
-
+		/* NSV13 - Disabled due to our TGUI version
 		if(CONSOLE)
 			CONSOLE.updateUsrDialog()
+		*/
 	else
 		end_processing()
 

tgui/packages/tgui/interfaces/Smelter.js

@@ -0,0 +1,99 @@
+import { toTitleCase } from 'common/string';
+import { useBackend } from '../backend';
+import { Box, Button, Section, Table } from '../components';
+import { Window } from '../layouts';
+
+export const Smelter = (props, context) => {
+  const { act, data } = useBackend(context);
+  const {
+    on,
+    allowredeem,
+    stored_points,
+    materials,
+    alloys,
+  } = data;
+  return (
+    <Window
+      width={440}
+      height={550}>
+      <Window.Content scrollable>
+        <Section>
+          <Table.Row>
+            <Table.Cell>
+              <Box inline color="label" mr={1}>
+                Machine Status:
+              </Box>
+              <Button
+                icon={on ? 'power-off' : 'times'}
+                content={on ? 'On' : 'Off'}
+                onClick={() => act('Toggle_on')} />
+            </Table.Cell>
+            {!!allowredeem && (
+              <Table.Cell collapsing textAlign="right">
+                <Box>
+                  <Box inline color="label" mr={1}>
+                    Stored Points:
+                  </Box>
+                  {stored_points}
+                  <Button
+                    ml={2}
+                    content="Redeem"
+                    disabled={stored_points === 0}
+                    onClick={() => act('Redeem')} />
+                </Box>
+              </Table.Cell>
+            )}
+          </Table.Row>
+        </Section>
+        <Section title="Materials">
+          <Table>
+            {materials.map(material => (
+              <MaterialRow
+                key={material.id}
+                material={material}
+                onRelease={() => act('Material', {
+                  id: material.id,
+                })} />
+            ))}
+          </Table>
+        </Section>
+        <Section title="Alloys">
+          <Table>
+            {alloys.map(material => (
+              <MaterialRow
+                key={material.id}
+                material={material}
+                onRelease={() => act('Alloy', {
+                  id: material.id,
+                })} />
+            ))}
+          </Table>
+        </Section>
+      </Window.Content>
+    </Window>
+  );
+};
+
+const MaterialRow = (props, context) => {
+  const { material, onRelease } = props;
+
+  const amountAvailable = Math.floor(material.amount);
+  return (
+    <Table.Row>
+      <Table.Cell>
+        {toTitleCase(material.name).replace('Alloy', '')}
+      </Table.Cell>
+      <Table.Cell collapsing textAlign="right">
+        <Box mr={2} color="label" inline>
+          {amountAvailable} sheets
+        </Box>
+      </Table.Cell>
+      <Table.Cell collapsing>
+        <Button
+          color={material.smelting ? "good" : "bad"}
+          content={material.smelting ? "Smelting" : "Not Smelting"}
+          onClick={() => onRelease()} />
+      </Table.Cell>
+    </Table.Row>
+  );
+};