Reworks the loadout store UI to use a spritesheet

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

@@ -0,0 +1,25 @@
+/datum/asset/spritesheet/loadout_store
+	name = "loadout_store"
+
+/datum/asset/spritesheet/loadout_store/create_spritesheets()
+	var/list/id_list = list()
+	for(var/datum/store_item/store_item as anything in subtypesof(/datum/store_item))
+		if(!store_item::name || !store_item::item_path)
+			continue
+		var/atom/item_type = store_item::item_path
+		if(!item_type::icon || !item_type::icon_state)
+			continue
+		var/id = sanitize_css_class_name("[item_type]")
+		if(id_list[id])
+			continue
+		var/icon/item_icon
+		if(item_type::greyscale_config || item_type::greyscale_colors)
+			var/atom/loadout_item = new item_type
+			item_icon = getFlatIcon(loadout_item)
+			QDEL_NULL(loadout_item)
+		else
+			item_icon = icon(item_type::icon, item_type::icon_state)
+		if(!item_icon || item_icon.Width() != 32 || item_icon.Height() != 32)
+			continue
+		Insert(id, item_icon)
+		id_list[id] = TRUE

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

@@ -96,6 +96,11 @@ GLOBAL_LIST_EMPTY(all_store_datums)
 
 	return TRUE
 
+/datum/store_manager/ui_assets(mob/user)
+	return list(
+		get_asset_datum(/datum/asset/spritesheet/loadout_store),
+	)
+
 /// Select [path] item to [category_slot] slot.
 /datum/store_manager/proc/select_item(datum/store_item/selected_item)
 	if(selected_item.item_path in owner.prefs.inventory)
@@ -178,30 +183,20 @@ GLOBAL_LIST_EMPTY(all_store_datums)
 		if(item.hidden)
 			formatted_list.len--
 			continue
-		var/atom/new_item = new item.item_path
-		var/list/formatted_item = list()
-		formatted_item["name"] = item.name
-		formatted_item["path"] = item.item_path
-		formatted_item["cost"] = item.item_cost
-		formatted_item["desc"] = new_item.desc
-		formatted_item["item_path"] = new_item.type
-		formatted_item["job_restricted"] = null
-
-		var/datum/loadout_item/selected = GLOB.all_loadout_datums[new_item.type]
-		if(selected)
-			if(length(selected.restricted_roles))
-				formatted_item["job_restricted"] = selected.restricted_roles.Join(", ")
-
-
-		var/icon/icon = getFlatIcon(new_item)
-		var/md5 = md5(fcopy_rsc(icon))
-		if(!SSassets.cache["photo_[md5]_[item.name]_icon.png"])
-			SSassets.transport.register_asset("photo_[md5]_[item.name]_icon.png", icon)
-		SSassets.transport.send_assets(usr, list("photo_[md5]_[item.name]_icon.png" = icon))
-
-		formatted_item["icon"] = SSassets.transport.get_asset_url("photo_[md5]_[item.name]_icon.png")
+		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]"),
+			"job_restricted" = null,
+		)
+
+		var/datum/loadout_item/selected = GLOB.all_loadout_datums[item.item_path]
+		if(length(selected?.restricted_roles))
+			formatted_item["job_restricted"] = selected.restricted_roles.Join(", ")
+
 		formatted_list[array_index++] = formatted_item
-		qdel(new_item)
 
 	return formatted_list
 

tgstation.dme

@@ -6332,6 +6332,7 @@
 #include "monkestation\code\modules\assembly\flash.dm"
 #include "monkestation\code\modules\asset_cache\assets\botanical_lexicon.dm"
 #include "monkestation\code\modules\asset_cache\assets\chicken_book.dm"
+#include "monkestation\code\modules\asset_cache\assets\loadout_store.dm"
 #include "monkestation\code\modules\atmospherics\machinery\air_alarm\air_alarm_ac.dm"
 #include "monkestation\code\modules\balloon_alert\balloon_alert.dm"
 #include "monkestation\code\modules\ballpit\ballbit_sink.dm"

tgui/packages/tgui/interfaces/StoreManager.tsx

@@ -2,7 +2,7 @@ import { useBackend, useSharedState } from '../backend';
 import { Box, Button, Section, Stack, Tabs, Table } from '../components';
 import { PreferencesMenuData } from './PreferencesMenu/data';
 import { Window } from '../layouts';
-import { resolveAsset } from '../assets';
+import { classes } from 'common/react';
 
 export const StoreManager = (props) => {
   const { act, data } = useBackend<PreferencesMenuData>();
@@ -70,13 +70,11 @@ export const StoreManager = (props) => {
                     >
                       <Table.Cell>
                         <Box
-                          as="img"
-                          src={resolveAsset(item.icon)}
-                          height="32px"
-                          style={{
-                            '-ms-interpolation-mode': 'nearest-neighbor',
-                            'image-rendering': 'pixelated',
-                          }}
+                          inline
+                          verticalAlign="middle"
+                          width={'32px'}
+                          height={'32px'}
+                          className={classes(['loadout_store32x32', item.icon])}
                         />
                       </Table.Cell>
                       <Table.Cell>
@@ -101,12 +99,12 @@ export const StoreManager = (props) => {
                         <Box display="flex" justifyContent="flex-end">
                           <Button.Confirm
                             content={
-                              owned_items.includes(item.item_path)
+                              owned_items.includes(item.path)
                                 ? 'Owned'
                                 : 'Purchase'
                             }
                             disabled={
-                              owned_items.includes(item.item_path) ||
+                              owned_items.includes(item.path) ||
                               total_coins < item.cost
                             }
                             onClick={() =>