Replace some icon2base64 with DmIcon (#26885)

* Vending DmIcon

* FloorPainter DmIcon

* Nuh uh

code/game/machinery/vendors/vending.dm

@@ -64,7 +64,6 @@
 	// List of vending_product items available.
 	var/list/product_records = list()
 	var/list/hidden_records = list()
-	var/list/imagelist = list()
 
 	/// Unimplemented list of ads that are meant to show up somewhere, but don't.
 	var/list/ads_list = list()
@@ -160,10 +159,6 @@
 	if(build_inv) //non-constructable vending machine
 		build_inventory(products, product_records)
 		build_inventory(contraband, hidden_records)
-	for(var/datum/data/vending_product/R in (product_records + hidden_records))
-		var/obj/item/I = R.product_path
-		var/pp = replacetext(replacetext("[R.product_path]", "/obj/item/", ""), "/", "-")
-		imagelist[pp] = "[icon2base64(icon(initial(I.icon), initial(I.icon_state), SOUTH, 1))]"
 
 	if(LAZYLEN(slogan_list))
 		// So not all machines speak at the exact same time.
@@ -645,28 +640,31 @@
 	data["product_records"] = list()
 	var/i = 1
 	for(var/datum/data/vending_product/R in product_records)
+		var/obj/item = R.product_path
 		var/list/data_pr = list(
-			path = replacetext(replacetext("[R.product_path]", "/obj/item/", ""), "/", "-"),
 			name = R.name,
-			price = (R.product_path in prices) ? prices[R.product_path] : 0,
+			price = (item in prices) ? prices[item] : 0,
+			icon = item.icon,
+			icon_state = item.icon_state,
 			max_amount = R.max_amount,
 			is_hidden = FALSE,
 			inum = i++
 		)
 		data["product_records"] += list(data_pr)
 	data["hidden_records"] = list()
 	for(var/datum/data/vending_product/R in hidden_records)
+		var/obj/item = R.product_path
 		var/list/data_hr = list(
-			path = replacetext(replacetext("[R.product_path]", "/obj/item/", ""), "/", "-"),
 			name = R.name,
-			price = (R.product_path in prices) ? prices[R.product_path] : 0,
+			price = (item in prices) ? prices[item] : 0,
+			icon = item.icon,
+			icon_state = item.icon_state,
 			max_amount = R.max_amount,
 			is_hidden = TRUE,
 			inum = i++,
 			premium = TRUE
 		)
 		data["hidden_records"] += list(data_hr)
-	data["imagelist"] = imagelist
 	return data
 
 /obj/machinery/economy/vending/ui_act(action, params, datum/tgui/ui)

code/game/objects/items/devices/painter/floor_painter.dm

@@ -4,7 +4,7 @@
 	module_name = "floor painter"
 	module_state = "floor_painter"
 
-	var/floor_icon
+	var/floor_icon = 'icons/turf/floors.dmi'
 	var/floor_state = "floor"
 	var/floor_dir = SOUTH
 
@@ -21,23 +21,6 @@
 		"darkred", "darkredcorners", "darkredfull", "darkblue", "darkbluecorners", "darkbluefull", "darkgreen", "darkgreencorners",
 		"darkgreenfull", "darkyellow", "darkyellowcorners", "darkyellowfull", "darkbrown", "darkbrowncorners", "darkbrownfull")
 
-	// This is a double-list. First entry is the type key, second is the direction, with the final value being the b64 of the icon
-	var/static/list/lookup_cache = list()
-
-/datum/painter/floor/New(obj/item/painter/parent_painter)
-	. = ..()
-	if(!length(lookup_cache))
-		for(var/style in allowed_states)
-			if(!(style in lookup_cache))
-				lookup_cache += style
-				lookup_cache[style] = list()
-
-			for(var/dir in GLOB.alldirs)
-				var/icon/floor_icon = icon('icons/turf/floors.dmi', style, dir)
-				// These indexes have to be strings otherwise it treats it as a list index not a map lookup index
-				lookup_cache[style] += "[dir]"
-				lookup_cache[style]["[dir]"] = icon2base64(floor_icon)
-
 /datum/painter/floor/paint_atom(atom/target, mob/user)
 	if(!istype(target, /turf/simulated/floor/plasteel))
 		to_chat(user, "<span class='warning'>[holder] can only be used on station flooring.</span>")
@@ -65,31 +48,20 @@
 	ui = SStgui.try_update_ui(user, src, ui)
 	if(!ui)
 		ui = new(user, src, "FloorPainter", module_name)
-		// Disable automatic updates, because:
-		// 1) we are the only user of the item, and don't expect to observe external changes
-		// 2) generating and sending the icon each tick is a bit expensive, and creates small but noticeable lag
+		// Disable automatic updates, because we are the only user of the item, and don't expect to observe external changes
 		ui.set_autoupdate(FALSE)
 		ui.open()
 
 /datum/painter/floor/ui_data(mob/user)
 	var/list/data = list()
-	data["availableStyles"] = allowed_states
 	data["selectedStyle"] = floor_state
-	data["selectedDir"] = dir2text(floor_dir)
-
-	data["directionsPreview"] = list()
-	for(var/dir in GLOB.alldirs)
-		data["directionsPreview"][dir2text(dir)] = lookup_cache[floor_state]["[dir]"]
-
+	data["selectedDir"] = floor_dir
 	return data
 
-
 /datum/painter/floor/ui_static_data(mob/user)
 	var/list/data = list()
-	data["allStylesPreview"] = list()
-	for(var/style in allowed_states)
-		data["allStylesPreview"][style] = lookup_cache[style]["[SOUTH]"]
-
+	data["icon"] = floor_icon
+	data["availableStyles"] = allowed_states
 	return data
 
 /datum/painter/floor/ui_act(action, params)
@@ -111,7 +83,7 @@
 		floor_state = allowed_states[index]
 
 	if(action == "select_direction")
-		var/dir = text2dir(params["direction"])
+		var/dir = params["direction"]
 		if(dir != 0)
 			floor_dir = dir
 

tgui/packages/tgui/interfaces/FloorPainter.js

@@ -1,27 +1,37 @@
 import { useBackend, useLocalState } from '../backend';
-import { Button, LabeledList, Section, Table, Dropdown, Flex, Icon, Box } from '../components';
+import { Button, DmIcon, LabeledList, Section, Table, Dropdown, Flex, Icon, Box } from '../components';
 import { Window } from '../layouts';
 
 const SelectableTile = (props, context) => {
   const { act, data } = useBackend(context);
-  const { image, isSelected, onSelect } = props;
+  const { icon_state, direction, isSelected, onSelect } = props;
+
   return (
-    <img
-      src={`data:image/jpeg;base64,${image}`}
+    <DmIcon
+      icon={data.icon}
+      icon_state={icon_state}
+      direction={direction}
+      onClick={onSelect}
       style={{
         'border-style': (isSelected && 'solid') || 'none',
         'border-width': '2px',
         'border-color': 'orange',
-        padding: (isSelected && '2px') || '4px',
+        padding: (isSelected && '0px') || '2px',
       }}
-      onClick={onSelect}
     />
   );
 };
 
+const Dir = {
+  NORTH: 1,
+  SOUTH: 2,
+  EAST: 4,
+  WEST: 8,
+};
+
 export const FloorPainter = (props, context) => {
   const { act, data } = useBackend(context);
-  const { availableStyles, selectedStyle, selectedDir, directionsPreview, allStylesPreview } = data;
+  const { availableStyles, selectedStyle, selectedDir } = data;
   return (
     <Window width={405} height={475}>
       <Window.Content scrollable>
@@ -50,13 +60,13 @@ export const FloorPainter = (props, context) => {
           <Box mt="5px" mb="5px">
             <Flex
               overflowY="auto" // scroll
-              maxHeight="220px" // a bit more than half of all tiles fit in this box at once.
+              maxHeight="239px" // a bit more than half of all tiles fit in this box at once.
               wrap="wrap"
             >
               {availableStyles.map((style) => (
-                <Flex.Item key="{style}">
+                <Flex.Item key={style}>
                   <SelectableTile
-                    image={allStylesPreview[style]}
+                    icon_state={style}
                     isSelected={selectedStyle === style}
                     onSelect={() => act('select_style', { style: style })}
                   />
@@ -68,21 +78,22 @@ export const FloorPainter = (props, context) => {
           <LabeledList>
             <LabeledList.Item label="Direction">
               <Table style={{ display: 'inline' }}>
-                {['north', '', 'south'].map((latitude) => (
+                {[Dir.NORTH, null, Dir.SOUTH].map((latitude) => (
                   <Table.Row key={latitude}>
-                    {[latitude + 'west', latitude, latitude + 'east'].map((dir) => (
+                    {[latitude + Dir.WEST, latitude, latitude + Dir.EAST].map((dir) => (
                       <Table.Cell
                         key={dir}
                         style={{
                           'vertical-align': 'middle',
                           'text-align': 'center',
                         }}
                       >
-                        {dir === '' ? (
+                        {dir === null ? (
                           <Icon name="arrows-alt" size={3} />
                         ) : (
                           <SelectableTile
-                            image={directionsPreview[dir]}
+                            icon_state={selectedStyle}
+                            direction={dir}
                             isSelected={dir === selectedDir}
                             onSelect={() => act('select_direction', { direction: dir })}
                           />

tgui/packages/tgui/interfaces/Vending.js

@@ -1,10 +1,10 @@
 import { useBackend } from '../backend';
-import { Box, Button, Section, Stack, Table } from '../components';
+import { Box, Button, DmIcon, Section, Stack, Table, Icon } from '../components';
 import { Window } from '../layouts';
 
 const VendingRow = (props, context) => {
   const { act, data } = useBackend(context);
-  const { product, productStock, productImage } = props;
+  const { product, productStock, productIcon, productIconState } = props;
   const { chargesMoney, user, usermoney, inserted_cash, vend_ready, inserted_item_name } = data;
   const free = !chargesMoney || product.price === 0;
   let buttonText = 'ERROR!';
@@ -21,14 +21,11 @@ const VendingRow = (props, context) => {
   return (
     <Table.Row>
       <Table.Cell collapsing>
-        <img
-          src={`data:image/jpeg;base64,${productImage}`}
-          style={{
-            'vertical-align': 'middle',
-            width: '32px',
-            margin: '0px',
-            'margin-left': '0px',
-          }}
+        <DmIcon
+          verticalAlign="middle"
+          icon={productIcon}
+          icon_state={productIconState}
+          fallback={<Icon p={0.66} name={'spinner'} size={2} spin />}
         />
       </Table.Cell>
       <Table.Cell bold>{product.name}</Table.Cell>
@@ -69,7 +66,6 @@ export const Vending = (props, context) => {
     inserted_item_name,
     panel_open,
     speaker,
-    imagelist,
   } = data;
   let inventory;
 
@@ -148,7 +144,8 @@ export const Vending = (props, context) => {
                     key={product.name}
                     product={product}
                     productStock={stock[product.name]}
-                    productImage={imagelist[product.path]}
+                    productIcon={product.icon}
+                    productIconState={product.icon_state}
                   />
                 ))}
               </Table>