Converts some more things to DMIcon (#3808)

* [PORT] Makes vending use DMIcon where possible, halving the time it takes to make the vending spritesheet

Ports tgstation/tgstation#85085 from /tg/station, originally by MrMelbert.

* [PORT] Chem master containers use DMIcon

Ports tgstation/tgstation#85422 from /tg/station, originally by MTandi.

* Loadout shop now uses DMIcon

* Properly centers the Sunset Sarsaparilla icon

* Fix bodycams showing a loading icon in the sec vendor

Author: Absolucy

code/__HELPERS/icons.dm

@@ -1164,7 +1164,7 @@ GLOBAL_LIST_EMPTY(friendly_animal_types)
 	if(!istext(icon_path) || !length(icon_path))
 		return FALSE
 
-	var/is_in_icon_folder = findtextEx(icon_path, "icons/")
+	var/is_in_icon_folder = findtextEx(icon_path, "icons/") || findtextEx(icon_path, "monkestation/") // STOP PUTTING ICONS IN THE `monkestation/code` FOLDER FFS
 	var/is_dmi_file = findtextEx(icon_path, ".dmi")
 
 	if(is_in_icon_folder && is_dmi_file)

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))
+		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))
-		else
+		// Colored atoms must be pregenerated
+		else if(icon_color && icon_state)
 			icon_file = initial(item.icon)
-		var/icon_state = initial(item.icon_state)
+		// 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 != "#FFFFFF")
-			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)

code/modules/reagents/chemistry/machinery/chem_master.dm

@@ -214,11 +214,6 @@ GLOBAL_LIST_INIT(chem_master_containers, list(
 		CAT_PATCHES = GLOB.chem_master_containers[CAT_PATCHES],
 	)
 
-/obj/machinery/chem_master/ui_assets(mob/user)
-	return list(
-		get_asset_datum(/datum/asset/spritesheet/chemmaster)
-	)
-
 /obj/machinery/chem_master/ui_interact(mob/user, datum/tgui/ui)
 	ui = SStgui.try_update_ui(user, src, ui)
 	if(!ui)
@@ -232,7 +227,8 @@ GLOBAL_LIST_INIT(chem_master_containers, list(
 		var/container_data = list()
 		for(var/obj/item/reagent_containers/container as anything in printable_containers[category])
 			container_data += list(list(
-				"icon" = sanitize_css_class_name("[container]"),
+				"icon" = initial(container.icon),
+				"icon_state" = initial(container.icon_state),
 				"ref" = REF(container),
 				"name" = initial(container.name),
 				"volume" = initial(container.volume),

code/modules/vending/_vending.dm

@@ -1141,6 +1141,15 @@
 			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))

monkestation/code/modules/asset_cache/assets/loadout_store.dm

@@ -7,10 +7,12 @@
 		if(!store_item::name || !store_item::item_path)
 			continue
 		var/obj/item_type = store_item::item_path
+		if(!should_generate_icon(item_type))
+			continue
 		var/id = sanitize_css_class_name("[item_type]")
 		if(id_list[id])
 			continue
-		var/icon/item_icon = generate_icon_for_item(item_type)
+		var/icon/item_icon = icon(SSgreyscale.GetColoredIconByType(item_type::greyscale_config, item_type::greyscale_colors), item_type::icon_state)
 		if(!item_icon)
 			stack_trace("Failed to generate icon for [item_type]")
 			continue
@@ -20,29 +22,9 @@
 		Insert(id, item_icon)
 		id_list[id] = TRUE
 
-/datum/asset/spritesheet/loadout_store/proc/generate_icon_for_item(obj/item/item) as /icon
-	RETURN_TYPE(/icon)
-	var/icon_file = item::icon_preview || item::icon
-	var/icon_state = item::icon_state_preview || item::icon_state
-	var/has_gags_config = item::greyscale_config && item::greyscale_colors
-	var/has_preview_icon = item::icon_preview && item::icon_state_preview
-	if(has_gags_config && !has_preview_icon) // preview icons take priority over GAGS
-		var/icon/gags_icon = SSgreyscale.GetColoredIconByType(item::greyscale_config, item::greyscale_colors)
-		return icon(gags_icon, item::icon_state)
-	else if(icon_exists(icon_file, icon_state))
-		var/icon/item_icon = icon(
-			icon_file,
-			icon_state,
-			dir = SOUTH,
-			frame = 1,
-			moving = FALSE,
-		)
-		return icon(fcopy_rsc(item_icon))
-	else
-		var/obj/item/dummy_item = new item
-		var/icon/flat_icon = getFlatIcon(dummy_item)
-		if(!flat_icon)
-			CRASH("Failed to generate any icon for [item]")
-		var/icon/cached_icon = icon(fcopy_rsc(flat_icon))
-		qdel(dummy_item)
-		return cached_icon
+/datum/asset/spritesheet/loadout_store/proc/should_generate_icon(obj/item/item)
+	if(item::icon_preview && item::icon_state_preview)
+		return FALSE
+	if(item::greyscale_config && item::greyscale_colors)
+		return TRUE
+	return FALSE

monkestation/code/modules/store/store_items/__store.dm

@@ -182,16 +182,21 @@ GLOBAL_LIST_EMPTY(all_store_datums)
 		if(item.hidden)
 			formatted_list.len--
 			continue
+		var/obj/item/item_type = item.item_path
 		var/list/formatted_item = list(
 			"name" = item.name,
 			"path" = item.item_path,
 			"cost" = item.item_cost,
-			"desc" = item.item_path::desc,
-			"icon" = sanitize_css_class_name("[item.item_path]"),
+			"desc" = item_type::desc,
 			"job_restricted" = null,
 		)
+		if((item_type::icon_preview && item_type::icon_state_preview) || !(item_type::greyscale_config && item_type::greyscale_colors))
+			formatted_item["icon"] = item_type::icon_preview || item_type::icon
+			formatted_item["icon_state"] = item_type::icon_state_preview || item_type::icon_state
+		else
+			formatted_item["icon"] = sanitize_css_class_name("[item_type]")
 
-		var/datum/loadout_item/selected = GLOB.all_loadout_datums[item.item_path]
+		var/datum/loadout_item/selected = GLOB.all_loadout_datums[item_type]
 		if(length(selected?.restricted_roles))
 			formatted_item["job_restricted"] = selected.restricted_roles.Join(", ")
 

monkestation/icons/obj/drinks/soda.dmi

@@ -1,10 +1,12 @@
-import { BooleanLike, classes } from 'common/react';
+import { BooleanLike } from 'common/react';
 import { capitalize } from 'common/string';
 import { useBackend, useLocalState } from '../backend';
 import {
   AnimatedNumber,
   Box,
   Button,
+  DmIcon,
+  Icon,
   Section,
   Table,
   NumberInput,
@@ -64,6 +66,7 @@ type Reagent = {
 
 type Container = {
   icon: string;
+  icon_state: string;
   ref: string;
   name: string;
   volume: number;
@@ -366,6 +369,8 @@ const ContainerButton = ({ container, category }) => {
   const { act, data } = useBackend<Data>();
   const { isPrinting, selectedContainerRef } = data;
   const isPillPatch = ['pills', 'patches'].includes(category.name);
+  const fallback = <Icon m="18px" name="spinner" spin />;
+  const fallbackPillPatch = <Icon m="10px" name="spinner" spin />;
   return (
     <Tooltip
       key={container.ref}
@@ -385,12 +390,13 @@ const ContainerButton = ({ container, category }) => {
           });
         }}
       >
-        <Box
-          m={isPillPatch ? '0' : '8px'}
-          style={{
-            transform: 'scale(2)',
-          }}
-          className={classes(['chemmaster32x32', container.icon])}
+        <DmIcon
+          m={isPillPatch ? '-16px' : '-8px'}
+          fallback={isPillPatch ? fallbackPillPatch : fallback}
+          icon={container.icon}
+          icon_state={container.icon_state}
+          height="64px"
+          width="64px"
         />
       </Button>
     </Tooltip>

tgui/packages/tgui/interfaces/ChemMaster.tsx

@@ -195,6 +195,7 @@ type LoadoutData = {
 type LoadoutItem = {
   name: string;
   icon: string;
+  icon_state?: string;
   desc: string;
   cost: number;
   item_path: string;

tgui/packages/tgui/interfaces/PreferencesMenu/data.ts

@@ -1,5 +1,14 @@
 import { useBackend, useSharedState } from '../backend';
-import { Box, Button, Section, Stack, Tabs, Table } from '../components';
+import {
+  Box,
+  Button,
+  DmIcon,
+  Section,
+  Stack,
+  Tabs,
+  Table,
+  Icon,
+} from '../components';
 import { PreferencesMenuData } from './PreferencesMenu/data';
 import { Window } from '../layouts';
 import { classes } from 'common/react';
@@ -69,13 +78,27 @@ export const StoreManager = (props) => {
                       backgroundColor={index % 2 === 0 ? '#19181e' : '#16151b'}
                     >
                       <Table.Cell>
-                        <Box
-                          inline
-                          verticalAlign="middle"
-                          width={'32px'}
-                          height={'32px'}
-                          className={classes(['loadout_store32x32', item.icon])}
-                        />
+                        {item.icon && item.icon_state ? (
+                          <DmIcon
+                            icon={item.icon}
+                            icon_state={item.icon_state}
+                            verticalAlign="middle"
+                            height={'32px'}
+                            width={'32px'}
+                            fallback={<Icon name="spinner" size={2} spin />}
+                          />
+                        ) : (
+                          <Box
+                            inline
+                            verticalAlign="middle"
+                            width={'32px'}
+                            height={'32px'}
+                            className={classes([
+                              'loadout_store32x32',
+                              item.icon,
+                            ])}
+                          />
+                        )}
                       </Table.Cell>
                       <Table.Cell>
                         <Button

tgui/packages/tgui/interfaces/StoreManager.tsx

@@ -4,6 +4,7 @@ import { useBackend, useLocalState } from 'tgui/backend';
 import {
   Box,
   Button,
+  DmIcon,
   Icon,
   LabeledList,
   NoticeBox,
@@ -39,6 +40,8 @@ type ProductRecord = {
   max_amount: number;
   ref: string;
   category: string;
+  icon?: string;
+  icon_state?: string;
 };
 
 type CoinRecord = ProductRecord & {
@@ -242,20 +245,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}
@@ -273,13 +278,32 @@ const VendingRow = (props) => {
 const ProductImage = (props) => {
   const { product } = props;
 
-  return product.img ? (
-    <img src={`data:image/jpeg;base64,${product.img}`} />
-  ) : (
-    <span className={classes(['vending32x32', product.path])} />
+  return (
+    <Box width="32px" height="32px">
+      {product.img ? (
+        <img
+          src={`data:image/jpeg;base64,${product.img}`}
+          style={{
+            'vertical-align': '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={{
+            'vertical-align': 'middle',
+          }}
+        />
+      )}
+    </Box>
   );
 };
-
 /** In the case of customizable items, ie: shoes,
  * this displays a color wheel button that opens another window.
  */
@@ -291,6 +315,7 @@ const ProductColorSelect = (props) => {
     <Button
       icon="palette"
       tooltip="Change color"
+      width="24px"
       disabled={disabled}
       onClick={() => act('select_colors', { ref: product.ref })}
     />