tgui-next: Mining Vendor (#48991)

* Mining Vendor tgui-next

* Formatting

* Revert "Formatting"

This reverts commit 2eb35516b2f755d78341915a4b57b2b8548195eb.

code/modules/mining/machine_vending.dm

@@ -7,6 +7,8 @@
 	icon_state = "mining"
 	density = TRUE
 	circuit = /obj/item/circuitboard/machine/mining_equipment_vendor
+	ui_x = 425
+	ui_y = 600
 	var/icon_deny = "mining-deny"
 	var/obj/item/card/id/inserted_id
 	var/list/prize_list = list( //if you add something to this, please, for the love of god, sort it by price/type. use tabs and not spaces.
@@ -71,57 +73,95 @@
 	src.equipment_path = path
 	src.cost = cost
 
+/obj/machinery/mineral/equipment_vendor/Initialize()
+	. = ..()
+	build_inventory()
+
+/obj/machinery/mineral/equipment_vendor/proc/build_inventory()
+	for(var/p in prize_list)
+		var/datum/data/mining_equipment/M = p
+		GLOB.vending_products[M.equipment_path] = 1
+
 /obj/machinery/mineral/equipment_vendor/update_icon_state()
 	if(powered())
 		icon_state = initial(icon_state)
 	else
 		icon_state = "[initial(icon_state)]-off"
 
-/obj/machinery/mineral/equipment_vendor/ui_interact(mob/user)
-	. = ..()
-	var/list/dat = list()
-	dat += "<br><b>Equipment point cost list:</b><BR><table border='0' width='300'>"
+/obj/machinery/mineral/equipment_vendor/ui_base_html(html)
+	var/datum/asset/spritesheet/assets = get_asset_datum(/datum/asset/spritesheet/vending)
+	. = replacetext(html, "<!--customheadhtml-->", assets.css_tag())
+
+/obj/machinery/mineral/equipment_vendor/ui_interact(mob/user, ui_key = "main", datum/tgui/ui = null, force_open = FALSE, \
+									datum/tgui/master_ui = null, datum/ui_state/state = GLOB.default_state)
+	ui = SStgui.try_update_ui(user, src, ui_key, ui, force_open)
+	if(!ui)
+		var/datum/asset/assets = get_asset_datum(/datum/asset/spritesheet/vending)
+		assets.send(user)
+		ui = new(user, src, ui_key, "mining_vendor", name, ui_x, ui_y, master_ui, state)
+		ui.open()
+
+/obj/machinery/mineral/equipment_vendor/ui_static_data(mob/user)
+	. = list()
+	.["product_records"] = list()
 	for(var/datum/data/mining_equipment/prize in prize_list)
-		dat += "<tr><td>[prize.equipment_name]</td><td>[prize.cost]</td><td><A href='?src=[REF(src)];purchase=[REF(prize)]'>Purchase</A></td></tr>"
-	dat += "</table>"
+		var/list/product_data = list(
+			path = replacetext(replacetext("[prize.equipment_path]", "/obj/item/", ""), "/", "-"),
+			name = prize.equipment_name,
+			price = prize.cost,
+			ref = REF(prize)
+		)
+		.["product_records"] += list(product_data)
 
-	var/datum/browser/popup = new(user, "miningvendor", "Mining Equipment Vendor", 400, 350)
-	popup.set_content(dat.Join())
-	popup.open()
-	return
+/obj/machinery/mineral/equipment_vendor/ui_data(mob/user)
+	. = list()
+	var/mob/living/carbon/human/H
+	var/obj/item/card/id/C
+	if(ishuman(user))
+		H = user
+		C = H.get_idcard(TRUE)
+		if(C)
+			.["user"] = list()
+			.["user"]["points"] = C.mining_points
+			if(C.registered_account)
+				.["user"]["name"] = C.registered_account.account_holder
+				if(C.registered_account.account_job)
+					.["user"]["job"] = C.registered_account.account_job.title
+				else
+					.["user"]["job"] = "No Job"
 
-/obj/machinery/mineral/equipment_vendor/Topic(href, href_list)
+/obj/machinery/mineral/equipment_vendor/ui_act(action, params)
 	if(..())
 		return
-	if(!href_list["purchase"])
-		return
-	var/mob/M = usr
-	var/obj/item/card/id/I = M.get_idcard(TRUE)
-	if(!istype(I))
-		to_chat(usr, "<span class='alert'>Error: An ID is required!</span>")
-		flick(icon_deny, src)
-		return
-	var/datum/data/mining_equipment/prize = locate(href_list["purchase"]) in prize_list
-	if (!prize || !(prize in prize_list))
-		to_chat(usr, "<span class='alert'>Error: Invalid choice!</span>")
-		flick(icon_deny, src)
-		return
-	if(prize.cost > I.mining_points)
-		to_chat(usr, "<span class='alert'>Error: Insufficient points for [prize.equipment_name] on [I]!</span>")
-		flick(icon_deny, src)
-		return
-	I.mining_points -= prize.cost
-	to_chat(usr, "<span class='notice'>[src] clanks to life briefly before vending [prize.equipment_name]!</span>")
-	new prize.equipment_path(loc)
-	SSblackbox.record_feedback("nested tally", "mining_equipment_bought", 1, list("[type]", "[prize.equipment_path]"))
-	updateUsrDialog()
+
+	switch(action)
+		if("purchase")
+			var/mob/M = usr
+			var/obj/item/card/id/I = M.get_idcard(TRUE)
+			if(!istype(I))
+				to_chat(usr, "<span class='alert'>Error: An ID is required!</span>")
+				flick(icon_deny, src)
+				return
+			var/datum/data/mining_equipment/prize = locate(params["ref"]) in prize_list
+			if(!prize || !(prize in prize_list))
+				to_chat(usr, "<span class='alert'>Error: Invalid choice!</span>")
+				flick(icon_deny, src)
+				return
+			if(prize.cost > I.mining_points)
+				to_chat(usr, "<span class='alert'>Error: Insufficient points for [prize.equipment_name] on [I]!</span>")
+				flick(icon_deny, src)
+				return
+			I.mining_points -= prize.cost
+			to_chat(usr, "<span class='notice'>[src] clanks to life briefly before vending [prize.equipment_name]!</span>")
+			new prize.equipment_path(loc)
+			SSblackbox.record_feedback("nested tally", "mining_equipment_bought", 1, list("[type]", "[prize.equipment_path]"))
+			. = TRUE
 
 /obj/machinery/mineral/equipment_vendor/attackby(obj/item/I, mob/user, params)
 	if(istype(I, /obj/item/mining_voucher))
 		RedeemVoucher(I, user)
 		return
 	if(default_deconstruction_screwdriver(user, "mining-open", "mining", I))
-		updateUsrDialog()
 		return
 	if(default_deconstruction_crowbar(I))
 		return
@@ -170,7 +210,6 @@
 	circuit = /obj/item/circuitboard/machine/mining_equipment_vendor/golem
 
 /obj/machinery/mineral/equipment_vendor/golem/Initialize()
-	. = ..()
 	desc += "\nIt seems a few selections have been added."
 	prize_list += list(
 		new /datum/data/mining_equipment("Extra Id",       				/obj/item/card/id/mining, 				                   		250),
@@ -182,6 +221,7 @@
 		new /datum/data/mining_equipment("Modification Kit",    		/obj/item/borg/upgrade/modkit/trigger_guard,					1700),
 		new /datum/data/mining_equipment("The Liberator's Legacy",  	/obj/item/storage/box/rndboards,								2000)
 		)
+	return ..()
 
 /**********************Mining Equipment Vendor Items**************************/
 

tgui-next/packages/tgui/interfaces/MiningVendor.js

@@ -0,0 +1,64 @@
+import { Fragment } from 'inferno';
+import { act } from '../byond';
+import { Section, Box, Button, Table } from '../components';
+import { classes } from 'common/react';
+
+export const MiningVendor = props => {
+  const { state } = props;
+  const { config, data } = state;
+  const { ref } = config;
+  let inventory = [
+    ...data.product_records,
+  ];
+  return (
+    <Fragment>
+      <Section title="User">
+        {data.user && (
+          <Box>
+          Welcome, <b>{data.user.name || "Unknown"}</b>,
+            {' '}
+            <b>{data.user.job || "Unemployed"}</b>!
+            <br />
+          Your balance is <b>{data.user.points} mining points</b>.
+          </Box>
+        ) || (
+          <Box color="light-gray">
+          No registered ID card!<br />
+          Please contact your local HoP!
+          </Box>
+        )}
+      </Section>
+      <Section title="Equipment" >
+        <Table>
+          {inventory.map((product => {
+            return (
+              <Table.Row key={product.name}>
+                <Table.Cell>
+                  <span
+                    className={classes(['vending32x32', product.path])}
+                    style={{
+                      'vertical-align': 'middle',
+                      'horizontal-align': 'middle',
+                    }} />
+                  {' '}<b>{product.name}</b>
+                </Table.Cell>
+                <Table.Cell>
+                  <Button
+                    style={{
+                      'min-width': '95px',
+                      'text-align': 'center',
+                    }}
+                    disabled={(!data.user || product.price > data.user.points)}
+                    content={product.price + ' points'}
+                    onClick={() => act(ref, 'purchase', {
+                      'ref': product.ref,
+                    })} />
+                </Table.Cell>
+              </Table.Row>
+            );
+          }))}
+        </Table>
+      </Section>
+    </Fragment>
+  );
+};

tgui-next/packages/tgui/routes.js

@@ -53,6 +53,7 @@ import { LanguageMenu } from './interfaces/LanguageMenu';
 import { LaunchpadConsole, LaunchpadRemote } from './interfaces/Launchpad';
 import { MechBayPowerConsole } from './interfaces/MechBayPowerConsole';
 import { MedicalKiosk } from './interfaces/MedicalKiosk';
+import { MiningVendor } from './interfaces/MiningVendor';
 import { Mint } from './interfaces/Mint';
 import { Mule } from './interfaces/Mule';
 import { NaniteChamberControl } from './interfaces/NaniteChamberControl';
@@ -341,6 +342,10 @@ const ROUTES = {
     component: () => MedicalKiosk,
     scrollable: false,
   },
+  mining_vendor: {
+    component: () => MiningVendor,
+    scrollable: true,
+  },
   mint: {
     component: () => Mint,
     scrollable: false,