modify robot to spritesheet

code/modules/admin/modify_robot.dm

@@ -43,9 +43,16 @@
 		qdel(source)
 	. = ..()
 
+/datum/eventkit/modify_robot/ui_assets(mob/user)
+	return list(
+		get_asset_datum(/datum/asset/spritesheet/robot_icons)
+	)
+
 /datum/eventkit/modify_robot/tgui_data(mob/user)
 	. = list()
 	// Target section for general data
+	var/datum/asset/spritesheet/robot_icons/spritesheet = get_asset_datum(/datum/asset/spritesheet/robot_icons)
+
 	if(target)
 		.["target"] = list()
 		.["target"]["name"] = target.name
@@ -62,10 +69,8 @@
 		// Target section for options once a module has been selected
 		if(target.module)
 			.["target"]["active"] = target.icon_selected
-			.["target"]["front"] = icon2base64(get_flat_icon(target,dir=SOUTH,no_anim=TRUE))
-			.["target"]["side"] = icon2base64(get_flat_icon(target,dir=WEST,no_anim=TRUE))
-			.["target"]["side_alt"] = icon2base64(get_flat_icon(target,dir=EAST,no_anim=TRUE))
-			.["target"]["back"] = icon2base64(get_flat_icon(target,dir=NORTH,no_anim=TRUE))
+			.["target"]["sprite"] = sanitize_css_class_name("[target.sprite_datum.type]")
+			.["target"]["sprite_size"] = spritesheet.icon_size_id(.["target"]["sprite"] + "S")
 			.["target"]["modules"] = get_target_items(user)
 			var/list/module_options = list()
 			for(var/module in robot_modules)
@@ -110,7 +115,7 @@
 			.["access_options"] = access_options
 			// Section for source data for the module we might want to salvage
 			if(source)
-				.["source"] += get_module_source(user)
+				.["source"] += get_module_source(user, spritesheet)
 	var/list/all_robots = list()
 	for(var/mob/living/silicon/robot/R in silicon_mob_list)
 		if(!R.loc)
@@ -573,10 +578,11 @@
 		target_items += list(list("name" = item.name, "ref" = "\ref[item]", "icon" = icon2html(item, user, sourceonly=TRUE), "desc" = item.desc))
 	return target_items
 
-/datum/eventkit/modify_robot/proc/get_module_source(var/mob/user)
+/datum/eventkit/modify_robot/proc/get_module_source(var/mob/user, var/datum/asset/spritesheet/robot_icons/spritesheet)
 	var/list/source_list = list()
 	source_list["model"] = source.module
-	source_list["front"] = icon2base64(get_flat_icon(source,dir=SOUTH,no_anim=TRUE))
+	source_list["sprite"] = sanitize_css_class_name("[source.sprite_datum.type]")
+	source_list["sprite_size"] = spritesheet.icon_size_id(source_list["sprite"] + "S")
 	var/list/source_items = list()
 	for(var/obj/item in (source.module.modules | source.module.emag))
 		var/exists

tgui/packages/tgui/interfaces/ModifyRobot/ModifyRobotTabs/ModifyRobotComponent.tsx

@@ -2,16 +2,17 @@ import { capitalize } from 'common/string';
 import { useState } from 'react';
 import { useBackend } from 'tgui/backend';
 import {
+  Box,
   Button,
   Divider,
   Flex,
   Icon,
-  Image,
   Input,
   Section,
   Stack,
   Tabs,
 } from 'tgui/components';
+import { classes } from 'tgui-core/react';
 
 import { NoSpriteWarning } from '../components';
 import {
@@ -163,15 +164,18 @@ export const ModifyRobotComponent = (props: {
         <Flex.Item width="30%" fill>
           <Stack vertical fill>
             <Stack.Item>
-              <Image
-                src={'data:image/jpeg;base64, ' + target.side_alt}
-                style={{
-                  display: 'block',
-                  marginLeft: 'auto',
-                  marginRight: 'auto',
-                  width: '200px',
-                }}
-              />
+              <Flex>
+                <Flex.Item grow />
+                <Flex.Item>
+                  <Box
+                    className={classes([
+                      target.sprite_size,
+                      target.sprite + 'E',
+                    ])}
+                  />
+                </Flex.Item>
+                <Flex.Item grow />
+              </Flex>
             </Stack.Item>
             <Stack.Item>
               <Tabs>

tgui/packages/tgui/interfaces/ModifyRobot/ModifyRobotTabs/ModifyRobotModules.tsx

@@ -13,6 +13,7 @@ import {
   Section,
   Stack,
 } from 'tgui/components';
+import { classes } from 'tgui-core/react';
 
 import { NoSpriteWarning } from '../components';
 import { prepareSearch } from '../functions';
@@ -47,7 +48,8 @@ export const ModifyRobotModules = (props: {
             />
             {!!source && (
               <SelectionField
-                previewImage={source.front}
+                previewImage={source.sprite}
+                previewImageSize={source.sprite_size}
                 searchText={searchSourceText}
                 onSearchText={setSearchSourceText}
                 action="add_module"
@@ -106,7 +108,8 @@ export const ModifyRobotModules = (props: {
             </Button.Confirm>
             <Divider />
             <SelectionField
-              previewImage={target.front}
+              previewImage={target.sprite}
+              previewImageSize={target.sprite_size}
               searchText={searchModuleText}
               onSearchText={setSearchModulText}
               action="rem_module"
@@ -123,6 +126,7 @@ export const ModifyRobotModules = (props: {
 
 const SelectionField = (props: {
   previewImage: string | undefined;
+  previewImageSize: string | undefined;
   searchText: string;
   onSearchText: Function;
   action: string;
@@ -133,6 +137,7 @@ const SelectionField = (props: {
   const { act } = useBackend();
   const {
     previewImage,
+    previewImageSize,
     searchText,
     onSearchText,
     action,
@@ -144,15 +149,13 @@ const SelectionField = (props: {
   return (
     <>
       <Divider />
-      <Image
-        src={'data:image/jpeg;base64, ' + previewImage}
-        style={{
-          display: 'block',
-          marginLeft: 'auto',
-          marginRight: 'auto',
-          height: '200px',
-        }}
-      />
+      <Flex>
+        <Flex.Item grow />
+        <Flex.Item>
+          <Box className={classes([previewImageSize, previewImage + 'S'])} />
+        </Flex.Item>
+        <Flex.Item grow />
+      </Flex>
       <Divider />
       <Input
         fluid

tgui/packages/tgui/interfaces/ModifyRobot/ModifyRobotTabs/ModifyRobotRadio.tsx

@@ -2,15 +2,16 @@ import { capitalize } from 'common/string';
 import { useState } from 'react';
 import { useBackend } from 'tgui/backend';
 import {
+  Box,
   Button,
   Divider,
   Flex,
   Icon,
-  Image,
   Input,
   Section,
   Stack,
 } from 'tgui/components';
+import { classes } from 'tgui-core/react';
 
 import { NoSpriteWarning } from '../components';
 import { prepareSearch } from '../functions';
@@ -38,15 +39,15 @@ export const ModifyRobotRadio = (props: { target: Target }) => {
           />
         </Flex.Item>
         <Flex.Item width="40%">
-          <Image
-            src={'data:image/jpeg;base64, ' + target.back}
-            style={{
-              display: 'block',
-              marginLeft: 'auto',
-              marginRight: 'auto',
-              width: '200px',
-            }}
-          />
+          <Flex>
+            <Flex.Item grow />
+            <Flex.Item>
+              <Box
+                className={classes([target.sprite_size, target.sprite + 'N'])}
+              />
+            </Flex.Item>
+            <Flex.Item grow />
+          </Flex>
         </Flex.Item>
         <Flex.Item width="30%" fill>
           <RadioSection

tgui/packages/tgui/interfaces/ModifyRobot/ModifyRobotTabs/ModifyRobotUpgrades.tsx

@@ -2,14 +2,15 @@ import { capitalize } from 'common/string';
 import { useState } from 'react';
 import { useBackend } from 'tgui/backend';
 import {
+  Box,
   Button,
   Divider,
   Flex,
-  Image,
   Input,
   Section,
   Stack,
 } from 'tgui/components';
+import { classes } from 'tgui-core/react';
 
 import { NoSpriteWarning } from '../components';
 import { install2col } from '../constants';
@@ -45,15 +46,15 @@ export const ModifyRobotUpgrades = (props: { target: Target }) => {
           />
         </Flex.Item>
         <Flex.Item width="40%">
-          <Image
-            src={'data:image/jpeg;base64, ' + target.side}
-            style={{
-              display: 'block',
-              marginLeft: 'auto',
-              marginRight: 'auto',
-              width: '200px',
-            }}
-          />
+          <Flex>
+            <Flex.Item grow />
+            <Flex.Item>
+              <Box
+                className={classes([target.sprite_size, target.sprite + 'W'])}
+              />
+            </Flex.Item>
+            <Flex.Item grow />
+          </Flex>
         </Flex.Item>
         <Flex.Item width="30%" fill>
           <UpgradeSection

tgui/packages/tgui/interfaces/ModifyRobot/types.ts

@@ -54,10 +54,8 @@ export type Target = {
   crisis_override: BooleanLike;
   active_restrictions: string[];
   possible_restrictions: string[];
-  front: string | undefined;
-  side: string | undefined;
-  side_alt: string | undefined;
-  back: string | undefined;
+  sprite: string | undefined;
+  sprite_size: string | undefined;
   modules: Module[];
   whitelisted_upgrades: Upgrade[];
   blacklisted_upgrades: Upgrade[];
@@ -80,7 +78,8 @@ export type Upgrade = {
 
 export type Source = {
   model: string;
-  front: string;
+  sprite: string | undefined;
+  sprite_size: string | undefined;
   modules: Module[];
 } | null;