From 5f7a1fa550651a392ca032beeda1fefc7d957839 Mon Sep 17 00:00:00 2001 From: SkyratBot <59378654+SkyratBot@users.noreply.github.com> Date: Fri, 12 Jul 2024 06:05:34 +0200 Subject: [PATCH] [MIRROR] Fixes broken icons in the crafting menu for good (#28788) * Fixes broken icons in the crafting menu for good (#84788) ## About The Pull Request - Continuation of #75649 Even after that PR some icons that are not 32x32 still appear broken under the requirement sections ![Screenshot (430)](https://github.com/tgstation/tgstation/assets/110812394/75bb357f-18c4-4556-b267-2df192ddd8d7) Now all icons are cached away into its own list and we look it up. To reduce this list size we only store icons that are not the standard 32x32(from debugging there are only 20 items as of now). Icons that are of standard size can be inferred from the cooking mode & the atom id. Basically we now get correct icons for everything ![Screenshot (431)](https://github.com/tgstation/tgstation/assets/110812394/6e1b55ef-3d12-4d1b-8579-33c5a2c120fa) Sometime soon i do plan to follow up on https://github.com/tgstation/tgstation/pull/75649#issuecomment-1562767046 & remove all `preview_icons` but not today ## Changelog :cl: fix: all icons in the crafting menu (some that you missed) are now fixed permanently /:cl: --------- Co-authored-by: Ghom <42542238+Ghommie@ users.noreply.github.com> * Fixes broken icons in the crafting menu for good --------- Co-authored-by: SyncIt21 <110812394+SyncIt21@users.noreply.github.com> Co-authored-by: Ghom <42542238+Ghommie@ users.noreply.github.com> --- code/datums/components/crafting/crafting.dm | 27 ++++++----- .../tgui/interfaces/PersonalCrafting.tsx | 47 +++++++++++-------- 2 files changed, 44 insertions(+), 30 deletions(-) diff --git a/code/datums/components/crafting/crafting.dm b/code/datums/components/crafting/crafting.dm index 21b5548dcaa..02200357126 100644 --- a/code/datums/components/crafting/crafting.dm +++ b/code/datums/components/crafting/crafting.dm @@ -499,12 +499,26 @@ var/list/atoms = mode ? GLOB.cooking_recipes_atoms : GLOB.crafting_recipes_atoms // Prepare atom data + + //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] + + data["icon_data"] = list() for(var/atom/atom as anything in atoms) + var/atom_id = atoms.Find(atom) + data["atom_data"] += list(list( "name" = initial(atom.name), - "is_reagent" = ispath(atom, /datum/reagent/) + "is_reagent" = ispath(atom, /datum/reagent/), )) + var/icon_size = sheet.icon_size_id("a[atom_id]") + if(!endswith(icon_size, "32x32")) + data["icon_data"]["[atom_id]"] = "[icon_size] a[atom_id]" + // Prepare materials data for(var/atom/atom as anything in material_occurences) if(material_occurences[atom] == 1) @@ -578,16 +592,7 @@ data["ref"] = "[REF(recipe)]" var/atom/atom = recipe.result - //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]" + data["id"] = atoms.Find(atom) var/recipe_data = recipe.crafting_ui_data() for(var/new_data in recipe_data) diff --git a/tgui/packages/tgui/interfaces/PersonalCrafting.tsx b/tgui/packages/tgui/interfaces/PersonalCrafting.tsx index 4063a2a2102..16420503071 100644 --- a/tgui/packages/tgui/interfaces/PersonalCrafting.tsx +++ b/tgui/packages/tgui/interfaces/PersonalCrafting.tsx @@ -108,12 +108,17 @@ enum TABS { type AtomData = { name: string; is_reagent: BooleanLike; + icon: string; }; type Atoms = { [key: number]: number; }; +type Icons = { + [key: number]: string; +}; + type Material = { atom_id: string; occurences: number; @@ -121,7 +126,7 @@ type Material = { type Recipe = { ref: string; - icon: string; + id: number; name: string; desc: string; category: string; @@ -154,6 +159,7 @@ type Data = { // Static diet: Diet; atom_data: AtomData[]; + icon_data: Icons; recipes: Recipe[]; categories: string[]; material_occurences: Material[]; @@ -161,6 +167,14 @@ type Data = { complexity: number; }; +const findIcon = (atom_id: number, data: Data): string => { + let icon: string = data.icon_data[atom_id]; + if (!icon) { + icon = (data.mode ? 'cooking32x32' : 'crafting32x32') + ' a' + atom_id; + } + return icon; +}; + export const PersonalCrafting = (props) => { const { act, data } = useBackend(); const { @@ -555,10 +569,12 @@ export const PersonalCrafting = (props) => { }; const MaterialContent = (props) => { - const { atom_id, occurences } = props; const { data } = useBackend(); + + const { atom_id, occurences } = props; const name = data.atom_data[atom_id - 1].name; - const mode = data.mode; + const icon = findIcon(atom_id, data); + return ( @@ -567,10 +583,7 @@ const MaterialContent = (props) => { inline ml={-1.5} mr={-0.5} - className={classes([ - mode ? 'cooking32x32' : 'crafting32x32', - 'a' + atom_id, - ])} + className={icon} /> {
- + @@ -756,7 +769,7 @@ const RecipeContentCompact = ({ item, craftable, busy, mode }) => { }; const RecipeContent = ({ item, craftable, busy, mode, diet }) => { - const { act } = useBackend(); + const { act, data } = useBackend(); return (
@@ -767,7 +780,7 @@ const RecipeContent = ({ item, craftable, busy, mode, diet }) => { transform: 'scale(1.5)', }} m={'16px'} - className={item.icon} + className={findIcon(item.id, data)} /> @@ -929,9 +942,8 @@ const RecipeContent = ({ item, craftable, busy, mode, diet }) => { const AtomContent = ({ atom_id, amount }) => { const { data } = useBackend(); - const name = data.atom_data[atom_id - 1]?.name; - const is_reagent = data.atom_data[atom_id - 1]?.is_reagent; - const mode = data.mode; + const atom: AtomData = data.atom_data[atom_id - 1]; + return ( { inline my={-1} mr={0.5} - className={classes([ - mode ? 'cooking32x32' : 'crafting32x32', - 'a' + atom_id, - ])} + className={findIcon(atom_id, data)} /> - {name} - {is_reagent ? `\xa0${amount}u` : amount > 1 && `\xa0${amount}x`} + {atom.name} + {atom.is_reagent ? `\xa0${amount}u` : amount > 1 && `\xa0${amount}x`} ) as any;