Loadout shop now uses DMIcon

Author: Absolucy

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(", ")
 

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

@@ -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/StoreManager.tsx

@@ -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