From cdf238778d50843d4d12b58aa007bb5964c70fa3 Mon Sep 17 00:00:00 2001
From: MrMelbert <51863163+MrMelbert@users.noreply.github.com>
Date: Sun, 21 Jul 2024 15:28:19 -0500
Subject: [PATCH] Makes vending use DMIcon where possible, halving the time it
 takes to make the vending spritesheet (#85085)

---
 code/modules/asset_cache/assets/vending.dm | 31 +++++++-----
 code/modules/vending/_vending.dm           |  9 ++++
 tgui/packages/tgui/interfaces/Vending.tsx  | 57 ++++++++++++++--------
 3 files changed, 63 insertions(+), 34 deletions(-)

diff --git a/code/modules/asset_cache/assets/vending.dm b/code/modules/asset_cache/assets/vending.dm
index 4d99eeefdc9..caec9bb4f82 100644
--- a/code/modules/asset_cache/assets/vending.dm
+++ b/code/modules/asset_cache/assets/vending.dm
@@ -6,22 +6,28 @@
 	var/target_items = list()
 	for(var/obj/machinery/vending/vendor as anything in typesof(/obj/machinery/vending))
 		vendor = new vendor() // It seems `initial(list var)` has nothing. need to make a type.
-		for(var/each in list(vendor.products, vendor.premium, vendor.contraband))
-			target_items |= each
+		target_items |= vendor.products
+		target_items |= vendor.premium
+		target_items |= vendor.contraband
 		qdel(vendor)
 
 	// building icons for each item
-	for (var/k in target_items)
-		var/atom/item = k
+	for (var/atom/item as anything in target_items)
 		if (!ispath(item, /atom))
 			continue
 
 		var/icon_file
-		if (initial(item.greyscale_colors) && initial(item.greyscale_config))
-			icon_file = SSgreyscale.GetColoredIconByType(initial(item.greyscale_config), initial(item.greyscale_colors))
-		else
-			icon_file = initial(item.icon)
 		var/icon_state = initial(item.icon_state)
+		var/icon_color = initial(item.color)
+		// GAGS icons must be pregenerated
+		if(initial(item.greyscale_config) && initial(item.greyscale_colors))
+			icon_file = SSgreyscale.GetColoredIconByType(initial(item.greyscale_config), initial(item.greyscale_colors))
+		// Colored atoms must be pregenerated
+		else if(icon_color && icon_state)
+			icon_file = initial(item.icon)
+		// Otherwise we can rely on DMIcon, so skip it to save init time
+		else
+			continue
 
 		if (PERFORM_ALL_TESTS(focus_only/invalid_vending_machine_icon_states))
 			var/icon_states_list = icon_states(icon_file)
@@ -36,11 +42,10 @@
 				stack_trace("[item] does not have a valid icon state, icon=[icon_file], icon_state=[json_encode(icon_state)]([text_ref(icon_state)]), icon_states=[icon_states_string]")
 				continue
 
-		var/icon/I = icon(icon_file, icon_state, SOUTH)
-		var/c = initial(item.color)
-		if (!isnull(c) && c != COLOR_WHITE)
-			I.Blend(c, ICON_MULTIPLY)
+		var/icon/produced = icon(icon_file, icon_state, SOUTH)
+		if (!isnull(icon_color) && icon_color != COLOR_WHITE)
+			produced.Blend(icon_color, ICON_MULTIPLY)
 
 		var/imgid = replacetext(replacetext("[item]", "/obj/item/", ""), "/", "-")
 
-		Insert(imgid, I)
+		Insert(imgid, produced)
diff --git a/code/modules/vending/_vending.dm b/code/modules/vending/_vending.dm
index ccf9425c2a8..fa26d3f8016 100644
--- a/code/modules/vending/_vending.dm
+++ b/code/modules/vending/_vending.dm
@@ -1257,6 +1257,15 @@ GLOBAL_LIST_EMPTY(vending_machines_to_restock)
 			ref = REF(record),
 		)
 
+		var/atom/printed = record.product_path
+		// If it's not GAGS and has no innate colors we have to care about, we use DMIcon
+		if(ispath(printed, /atom) \
+			&& (!initial(printed.greyscale_config) || !initial(printed.greyscale_colors)) \
+			&& !initial(printed.color) \
+		)
+			static_record["icon"] = initial(printed.icon)
+			static_record["icon_state"] = initial(printed.icon_state)
+
 		var/list/category = record.category || default_category
 		if (!isnull(category))
 			if (!(category["name"] in categories))
diff --git a/tgui/packages/tgui/interfaces/Vending.tsx b/tgui/packages/tgui/interfaces/Vending.tsx
index 28c7a788fa6..64b62c86c62 100644
--- a/tgui/packages/tgui/interfaces/Vending.tsx
+++ b/tgui/packages/tgui/interfaces/Vending.tsx
@@ -14,7 +14,7 @@ import {
 
 import { createSearch } from '../../common/string';
 import { useBackend } from '../backend';
-import { Input } from '../components';
+import { DmIcon, Input } from '../components';
 import { Window } from '../layouts';
 
 type VendingData = {
@@ -45,6 +45,8 @@ type ProductRecord = {
   max_amount: number;
   ref: string;
   category: string;
+  icon?: string;
+  icon_state?: string;
 };
 
 type CoinRecord = ProductRecord & {
@@ -288,20 +290,22 @@ const VendingRow = (props) => {
       (discount ? redPrice : product.price) > user?.cash);
 
   return (
-    <Table.Row>
-      <Table.Cell collapsing>
+    <Table.Row height="32px">
+      <Table.Cell collapsing width="36px">
         <ProductImage product={product} />
       </Table.Cell>
-      <Table.Cell bold>{capitalizeAll(product.name)}</Table.Cell>
-      <Table.Cell>
+      <Table.Cell verticalAlign="middle" bold>
+        {capitalizeAll(product.name)}
+      </Table.Cell>
+      <Table.Cell verticalAlign="middle">
         {!!productStock?.colorable && (
           <ProductColorSelect disabled={disabled} product={product} />
         )}
       </Table.Cell>
-      <Table.Cell collapsing textAlign="right">
+      <Table.Cell collapsing textAlign="right" verticalAlign="middle">
         <ProductStock custom={custom} product={product} remaining={remaining} />
       </Table.Cell>
-      <Table.Cell collapsing textAlign="center">
+      <Table.Cell collapsing textAlign="center" verticalAlign="middle">
         <ProductButton
           custom={custom}
           disabled={disabled}
@@ -319,20 +323,30 @@ const VendingRow = (props) => {
 const ProductImage = (props) => {
   const { product } = props;
 
-  return product.img ? (
-    <img
-      src={`data:image/jpeg;base64,${product.img}`}
-      style={{
-        verticalAlign: 'middle',
-      }}
-    />
-  ) : (
-    <span
-      className={classes(['vending32x32', product.path])}
-      style={{
-        verticalAlign: 'middle',
-      }}
-    />
+  return (
+    <Box width="32px" height="32px">
+      {product.img ? (
+        <img
+          src={`data:image/jpeg;base64,${product.img}`}
+          style={{
+            verticalAlign: 'middle',
+          }}
+        />
+      ) : product.icon && product.icon_state ? (
+        <DmIcon
+          icon={product.icon}
+          icon_state={product.icon_state}
+          fallback={<Icon name="spinner" size={2} spin />}
+        />
+      ) : (
+        <span
+          className={classes(['vending32x32', product.path])}
+          style={{
+            verticalAlign: 'middle',
+          }}
+        />
+      )}
+    </Box>
   );
 };
 
@@ -347,6 +361,7 @@ const ProductColorSelect = (props) => {
     <Button
       icon="palette"
       tooltip="Change color"
+      width="24px"
       disabled={disabled}
       onClick={() => act('select_colors', { ref: product.ref })}
     />