Converts the ORM, produce console, and ore container to use DmIcon (#…

…4215)
Monkestation · Nov 14, 2024 · 199b7fb · 199b7fb
1 parent 0c4a724
commit 199b7fb
Show file tree

Hide file tree

Showing 6 changed files with 44 additions and 88 deletions.
diff --git a/code/game/machinery/computer/orders/order_computer/order_computer.dm b/code/game/machinery/computer/orders/order_computer/order_computer.dm
@@ -120,7 +120,8 @@ GLOBAL_LIST_EMPTY(order_console_products)
 			"cat" = item.category_index,
 			"ref" = REF(item),
 			"cost" = FLOOR(item.cost_per_order * cargo_cost_multiplier, 1),
-			"product_icon" = icon2base64(getFlatIcon(image(icon = initial(item.item_path.icon), icon_state = initial(item.item_path.icon_state)), no_anim=TRUE))
+			"icon" = item.item_path::icon,
+			"icon_state" = item.item_path::icon_state,
 		))
 	return data
 

diff --git a/code/game/objects/structures/ore_containers.dm b/code/game/objects/structures/ore_containers.dm
@@ -23,25 +23,16 @@
 		ui.open()
 
 /obj/structure/ore_container/ui_data(mob/user)
-	var/list/data = list()
-	data["ores"] = list()
+	var/list/ores = list()
 	for(var/obj/item/stack/ore/ore_item in contents)
-		data["ores"] += list(list(
+		ores += list(list(
 			"id" = REF(ore_item),
 			"name" = ore_item.name,
 			"amount" = ore_item.amount,
+			"icon" = ore_item::icon,
+			"icon_state" = ore_item::icon_state,
 		))
-	return data
-
-/obj/structure/ore_container/ui_static_data(mob/user)
-	var/list/data = list()
-	data["ore_images"] = list()
-	for(var/obj/item/stack/ore_item as anything in subtypesof(/obj/item/stack/ore))
-		data["ore_images"] += list(list(
-			"name" = initial(ore_item.name),
-			"icon" = icon2base64(getFlatIcon(image(icon = initial(ore_item.icon), icon_state = initial(ore_item.icon_state)), no_anim=TRUE))
-		))
-	return data
+	return list("ores" = ores)
 
 /obj/structure/ore_container/ui_act(action, list/params, datum/tgui/ui, datum/ui_state/state)
 	. = ..()

diff --git a/code/modules/mining/machine_redemption.dm b/code/modules/mining/machine_redemption.dm
@@ -236,21 +236,27 @@
 		for(var/datum/material/material as anything in mat_container.materials)
 			var/amount = mat_container.materials[material]
 			var/sheet_amount = amount / SHEET_MATERIAL_AMOUNT
+			var/obj/sheet_type = material.sheet_type
 			data["materials"] += list(list(
 				"name" = material.name,
 				"id" = REF(material),
 				"amount" = sheet_amount,
 				"category" = "material",
 				"value" = ore_values[material.type],
+				"icon" = sheet_type::icon,
+				"icon_state" = sheet_type::icon_state,
 			))
 
 		for(var/research in stored_research.researched_designs)
 			var/datum/design/alloy = SSresearch.techweb_design_by_id(research)
+			var/obj/alloy_type = alloy.build_path
 			data["materials"] += list(list(
 				"name" = alloy.name,
 				"id" = alloy.id,
 				"category" = "alloy",
 				"amount" = can_smelt_alloy(alloy),
+				"icon" = alloy_type::icon,
+				"icon_state" = alloy_type::icon_state,
 			))
 
 	if (!mat_container)
@@ -278,29 +284,6 @@
 			)
 	return data
 
-/obj/machinery/mineral/ore_redemption/ui_static_data(mob/user)
-	var/list/data = list()
-
-	var/datum/component/material_container/mat_container = materials.mat_container
-	if (mat_container)
-		for(var/datum/material/material as anything in mat_container.materials)
-			var/obj/material_display = initial(material.sheet_type)
-			data["material_icons"] += list(list(
-				"id" = REF(material),
-				"product_icon" = icon2base64(getFlatIcon(image(icon = initial(material_display.icon), icon_state = initial(material_display.icon_state)), no_anim=TRUE)),
-			))
-
-	for(var/research in stored_research.researched_designs)
-		var/datum/design/alloy = SSresearch.techweb_design_by_id(research)
-		var/obj/alloy_display = initial(alloy.build_path)
-		data["material_icons"] += list(list(
-			"id" = alloy.id,
-			"product_icon" = icon2base64(getFlatIcon(image(icon = initial(alloy_display.icon), icon_state = initial(alloy_display.icon_state)), no_anim=TRUE)),
-		))
-
-	return data
-
-
 /obj/machinery/mineral/ore_redemption/ui_act(action, params)
 	. = ..()
 	if(.)

diff --git a/tgui/packages/tgui/interfaces/OreContainer.tsx b/tgui/packages/tgui/interfaces/OreContainer.tsx
@@ -1,22 +1,26 @@
 import { createSearch, toTitleCase } from 'common/string';
 import { useBackend, useLocalState } from '../backend';
-import { Box, Button, Input, Stack, Flex, Section } from '../components';
+import {
+  Button,
+  Input,
+  Stack,
+  Flex,
+  Section,
+  DmIcon,
+  Icon,
+} from '../components';
 import { Window } from '../layouts';
 
 type Ores = {
   id: string;
   name: string;
   amount: number;
-};
-
-type Ore_images = {
-  name: string;
   icon: string;
+  icon_state: string;
 };
 
 type Data = {
   ores: Ores[];
-  ore_images: Ore_images[];
 };
 
 export const OreContainer = (props) => {
@@ -85,27 +89,14 @@ export const OreContainer = (props) => {
 };
 
 const RetrieveIcon = (props) => {
-  const { data } = useBackend<Data>();
-  const { ore_images = [] } = data;
   const { ore } = props;
-
-  let icon_display = ore_images.find((icon) => icon.name === ore.name);
-
-  if (!icon_display) {
-    return null;
-  }
-
   return (
-    <Box
-      as="img"
-      m={1}
-      src={`data:image/jpeg;base64,${icon_display.icon}`}
+    <DmIcon
       height="64px"
       width="64px"
-      style={{
-        '-ms-interpolation-mode': 'nearest-neighbor',
-        'vertical-align': 'middle',
-      }}
+      icon={ore.icon}
+      icon_state={ore.icon_state}
+      fallback={<Icon name="spinner" size={2} spin />}
     />
   );
 };

diff --git a/tgui/packages/tgui/interfaces/OreRedemptionMachine.jsx b/tgui/packages/tgui/interfaces/OreRedemptionMachine.jsx
@@ -11,6 +11,7 @@ import {
   Icon,
   Section,
   LabeledList,
+  DmIcon,
 } from '../components';
 import { Window } from '../layouts';
 import { formatSiUnit } from '../format';
@@ -169,15 +170,9 @@ export const OreRedemptionMachine = (props) => {
 };
 
 const MaterialRow = (props) => {
-  const { data } = useBackend();
-  const { material_icons } = data;
   const { material, onRelease } = props;
   const [compact, setCompact] = useLocalState('compact', false);
 
-  const display = material_icons.find(
-    (mat_icon) => mat_icon.id === material.id,
-  );
-
   const sheet_amounts = Math.floor(material.amount);
   const print_amount = 5;
   const max_sheets = 50;
@@ -186,16 +181,12 @@ const MaterialRow = (props) => {
     <Table.Row className="candystripe" collapsing>
       {!compact && (
         <Table.Cell collapsing>
-          <Box
-            as="img"
-            m={1}
-            src={`data:image/jpeg;base64,${display.product_icon}`}
-            height="18px"
-            width="18px"
-            style={{
-              '-ms-interpolation-mode': 'nearest-neighbor',
-              'vertical-align': 'middle',
-            }}
+          <DmIcon
+            height={'18px'}
+            width={'18px'}
+            icon={material.icon}
+            icon_state={material.icon_state}
+            fallback={<Icon name="spinner" size={2} spin />}
           />
         </Table.Cell>
       )}

diff --git a/tgui/packages/tgui/interfaces/ProduceConsole.tsx b/tgui/packages/tgui/interfaces/ProduceConsole.tsx
@@ -12,6 +12,7 @@ import {
   Section,
   Stack,
   Tabs,
+  DmIcon,
 } from '../components';
 import { Window } from '../layouts';
 
@@ -23,7 +24,8 @@ type OrderDatum = {
   cat: string;
   ref: string;
   cost: number;
-  product_icon: string;
+  icon: string;
+  icon_state: string;
 };
 
 type Item = {
@@ -130,16 +132,13 @@ const ShoppingTab = (props) => {
                   />{' '}
                   {!condensed && (
                     <Stack.Item>
-                      <Box
-                        as="img"
-                        m={1}
-                        src={`data:image/jpeg;base64,${item.product_icon}`}
-                        height="36px"
-                        width="36px"
-                        style={{
-                          '-ms-interpolation-mode': 'nearest-neighbor',
-                          'vertical-align': 'middle',
-                        }}
+                      <DmIcon
+                        icon={item.icon}
+                        icon_state={item.icon_state}
+                        verticalAlign="middle"
+                        height={'36px'}
+                        width={'36px'}
+                        fallback={<Icon name="spinner" size={2} spin />}
                       />
                     </Stack.Item>
                   )}