From 14411daa11fb3a457d94adefe6e114ef5a4f083d Mon Sep 17 00:00:00 2001
From: SyncIt21 <110812394+SyncIt21@users.noreply.github.com>
Date: Fri, 26 May 2023 06:12:25 +0530
Subject: [PATCH] Fix broken icons in the crafting menu (#75649)

## About The Pull Request

**1. Rolling Pin Icon Fix**

The rolling pin icon shows up correctly under the tools section
![Screenshot
(224)](https://github.com/tgstation/tgstation/assets/110812394/2e90c98a-ca0a-4619-b428-687ee76ee429)

The problem was with the text

`#define TOOL_ROLLINGPIN "rolling pin"`

`"rolling pin"` has a space in it's name, so when it's sent to the UI
and used as a css class identifier it get's treated as 2 separate
classes
class1 = rolling
class2 = pin
Causing undefined results. So i made sure to remove this space when
inserting this name as a sprite sheet and also remove the space manually
in the Client-Side UI

Fixes #75525

**2. Basketball Hoop Icon Fix**

The basket ball hoop has the correct icon in the crafting menu
![Screenshot
(225)](https://github.com/tgstation/tgstation/assets/110812394/8ef100a8-2ee8-4764-9a9c-b764212f4d6c)

This is not an `32 x 32` icon but an `32 x 64 ` icon so we assumed the
icon size wrong hence it got rendered incorrectly. Now in the back end
we query the size of the icon using the datum sprite sheet before
sending it to the UI, so this should also fix a lot of other broken
icon's that are not the standard `32 x 32` that went un noticed

## Changelog
:cl:
fix: rolling pin icon show's up correctly under the tools section in the
crafting menu i.e. for those recipes that require it
fix: basketball hoop icon and other sprites that are not the standard
`32 x 32` now show's up correctly in the crafting menu
/:cl:
---
 code/datums/components/crafting/crafting.dm   | 14 +++++++++++--
 code/modules/asset_cache/assets/crafting.dm   |  2 +-
 .../tgui/interfaces/PersonalCrafting.tsx      | 20 +++++--------------
 3 files changed, 18 insertions(+), 18 deletions(-)

diff --git a/code/datums/components/crafting/crafting.dm b/code/datums/components/crafting/crafting.dm
index b9c3275a411..35392298990 100644
--- a/code/datums/components/crafting/crafting.dm
+++ b/code/datums/components/crafting/crafting.dm
@@ -487,14 +487,24 @@
 		get_asset_datum(/datum/asset/spritesheet/crafting),
 		get_asset_datum(/datum/asset/spritesheet/crafting/cooking),
 	)
-///
+
 /datum/component/personal_crafting/proc/build_crafting_data(datum/crafting_recipe/recipe)
 	var/list/data = list()
 	var/list/atoms = mode ? GLOB.cooking_recipes_atoms : GLOB.crafting_recipes_atoms
 
 	data["ref"] = "[REF(recipe)]"
 	var/atom/atom = recipe.result
-	data["result"] = atoms.Find(atom)
+
+	//load sprite sheets and select the correct one based on the mode
+	var/static/list/sprite_sheets
+	if(isnull(sprite_sheets))
+		sprite_sheets = ui_assets()
+	var/datum/asset/spritesheet/sheet = sprite_sheets[mode ? 2 : 1]
+
+	//infer icon size of this atom
+	var/atom_id = atoms.Find(atom)
+	var/icon_size = sheet.icon_size_id("a[atom_id]")
+	data["icon"] = "[icon_size] a[atom_id]"
 
 	var/recipe_data = recipe.crafting_ui_data()
 	for(var/new_data in recipe_data)
diff --git a/code/modules/asset_cache/assets/crafting.dm b/code/modules/asset_cache/assets/crafting.dm
index 80b95be169f..139616fdc81 100644
--- a/code/modules/asset_cache/assets/crafting.dm
+++ b/code/modules/asset_cache/assets/crafting.dm
@@ -71,4 +71,4 @@
 	)
 
 	for(var/tool in tool_icons)
-		Insert(tool, tool_icons[tool])
+		Insert(replacetext(tool, " ", ""), tool_icons[tool])
diff --git a/tgui/packages/tgui/interfaces/PersonalCrafting.tsx b/tgui/packages/tgui/interfaces/PersonalCrafting.tsx
index 700f883b9f6..5b1662fcb01 100644
--- a/tgui/packages/tgui/interfaces/PersonalCrafting.tsx
+++ b/tgui/packages/tgui/interfaces/PersonalCrafting.tsx
@@ -105,7 +105,7 @@ type Material = {
 
 type Recipe = {
   ref: string;
-  result: number;
+  icon: string;
   name: string;
   desc: string;
   category: string;
@@ -606,12 +606,7 @@ const RecipeContentCompact = ({ item, craftable, busy, mode }, context) => {
     <Section>
       <Stack my={-0.75}>
         <Stack.Item>
-          <Box
-            className={classes([
-              mode ? 'cooking32x32' : 'crafting32x32',
-              'a' + item.result,
-            ])}
-          />
+          <Box className={item.icon} />
         </Stack.Item>
         <Stack.Item grow>
           <Stack>
@@ -725,16 +720,11 @@ const RecipeContent = ({ item, craftable, busy, mode, diet }, context) => {
         <Stack.Item>
           <Box width={'64px'} height={'64px'} mr={1}>
             <Box
-              width={'32px'}
-              height={'32px'}
               style={{
-                'transform': 'scale(2)',
+                'transform': 'scale(1.5)',
               }}
               m={'16px'}
-              className={classes([
-                mode ? 'cooking32x32' : 'crafting32x32',
-                'a' + item.result,
-              ])}
+              className={item.icon}
             />
           </Box>
         </Stack.Item>
@@ -896,7 +886,7 @@ const ToolContent = ({ tool }) => {
         inline
         my={-1}
         mr={0.5}
-        className={classes(['crafting32x32', tool])}
+        className={classes(['crafting32x32', tool.replace(/ /g, '')])}
       />
       <Box inline verticalAlign="middle">
         {tool}