testing, not yet working

code/modules/asset_cache/asset_list_items.dm

@@ -437,6 +437,37 @@
 		Insert("bottle-[i]", 'icons/obj/chemical.dmi', "bottle-[i]")
 
 
+// Robot UI sprites
+/datum/asset/spritesheet/robot_icons
+	name = "robot_icons"
+
+/datum/asset/spritesheet/robot_icons/create_spritesheets()
+	for(var/datum/robot_sprite/S as anything in typesof(/datum/robot_sprite))
+		if(!S.name)
+			continue
+		to_world("[S.name]]")
+		var/icon/I_S = icon(S.sprite_icon, S.sprite_icon_state, SOUTH)
+		var/icon/I_N = icon(S.sprite_icon, S.sprite_icon_state, NORTH)
+		var/icon/I_W = icon(S.sprite_icon, S.sprite_icon_state, WEST)
+		var/icon/I_E = icon(S.sprite_icon, S.sprite_icon_state, EAST)
+		var/icon/I_SE = icon(S.sprite_icon, "[S.sprite_icon_state]-eyes", SOUTH)
+		if(I_SE)
+			I_S.Blend(I_SE, ICON_OVERLAY)
+		var/icon/I_NE = icon(S.sprite_icon, "[S.sprite_icon_state]-eyes", NORTH)
+		if(I_NE)
+			I_N.Blend(I_NE, ICON_OVERLAY)
+		var/icon/I_WE = icon(S.sprite_icon, "[S.sprite_icon_state]-eyes", WEST)
+		if(I_WE)
+			I_W.Blend(I_WE, ICON_OVERLAY)
+		var/icon/I_EE = icon(S.sprite_icon, "[S.sprite_icon_state]-eyes", EAST)
+		if(I_EE)
+			I_E.Blend(I_EE, ICON_OVERLAY)
+		Insert(S.module_type + S.name + "_S", I_S)
+		Insert(S.module_type + S.name + "_N", I_N)
+		Insert(S.module_type + S.name + "_W", I_W)
+		Insert(S.module_type + S.name + "_E", I_E)
+
+
 //Cloning pod sprites for UIs
 /datum/asset/simple/cloning
 	assets = list(

code/modules/mob/living/silicon/robot/robot_ui_module.dm

@@ -8,6 +8,10 @@
 /datum/tgui_module/robot_ui_module/tgui_state(mob/user)
 	return GLOB.tgui_self_state
 
+
+/datum/tgui_module/robot_ui_module/ui_assets(mob/user)
+	. += get_asset_datum(/datum/asset/spritesheet/robot_icons)
+
 /datum/tgui_module/robot_ui_module/tgui_static_data()
 	var/list/data = ..()
 

tgui/packages/tgui/interfaces/RobotChoose/IconSection.tsx

@@ -0,0 +1,59 @@
+import { resolveAsset } from 'tgui/assets';
+import { useBackend } from 'tgui/backend';
+import { Button, Image, Section, Stack } from 'tgui-core/components';
+
+export const IconSection = (props: { module?: string; sprite?: string }) => {
+  const { act } = useBackend();
+  const { module, sprite } = props;
+
+  return (
+    <Section
+      title="Sprite"
+      fill
+      scrollable
+      width="40%"
+      buttons={
+        <Button disabled={!sprite} onClick={() => act('confirm')}>
+          Confirm
+        </Button>
+      }
+    >
+      {!!sprite && !!module && (
+        <>
+          <Stack.Item>
+            <Image
+              src={resolveAsset(module + sprite + '_N')}
+              style={{
+                width: '100%',
+              }}
+            />
+          </Stack.Item>
+          <Stack.Item>
+            <Image
+              src={resolveAsset(module + sprite + '_S')}
+              style={{
+                width: '100%',
+              }}
+            />
+          </Stack.Item>
+          <Stack.Item>
+            <Image
+              src={resolveAsset(module + sprite + '_W')}
+              style={{
+                width: '100%',
+              }}
+            />
+          </Stack.Item>
+          <Stack.Item>
+            <Image
+              src={resolveAsset(module + sprite + '_E')}
+              style={{
+                width: '100%',
+              }}
+            />
+          </Stack.Item>
+        </>
+      )}
+    </Section>
+  );
+};

tgui/packages/tgui/interfaces/RobotChoose/ModuleSection.tsx

@@ -31,7 +31,7 @@ export const ModuleSection = (props: {
       </Stack.Item>
       <Stack.Item>
         <Stack vertical fill>
-          {filtered &&
+          {!!filtered &&
             filtered.map((filter) => (
               <SelectorElement
                 key={filter}

tgui/packages/tgui/interfaces/RobotChoose/SelectorElement.tsx

@@ -23,7 +23,6 @@ export const SelectorElement = (props: {
             <>
               <Flex.Item grow />
               <Flex.Item>
-                {' '}
                 <Icon name="utensils" />
               </Flex.Item>
             </>

tgui/packages/tgui/interfaces/RobotChoose/SpriteSection.tsx

@@ -63,7 +63,7 @@ export const SpriteSection = (props: {
       </Stack.Item>
       <Stack.Item>
         <Stack vertical>
-          {filtered &&
+          {!!filtered &&
             filtered.map((filter) => (
               <SelectorElement
                 key={filter.sprite}

tgui/packages/tgui/interfaces/RobotChoose/index.tsx

@@ -1,13 +1,14 @@
 import { useBackend } from 'tgui/backend';
 import { Window } from 'tgui/layouts';
-import { Button, Stack } from 'tgui-core/components';
+import { Stack } from 'tgui-core/components';
 
+import { IconSection } from './IconSection';
 import { ModuleSection } from './ModuleSection';
 import { SpriteSection } from './SpriteSection';
 import { Data } from './types';
 
 export const RobotChoose = (props) => {
-  const { act, data } = useBackend<Data>();
+  const { data } = useBackend<Data>();
 
   const {
     possible_modules,
@@ -31,14 +32,7 @@ export const RobotChoose = (props) => {
             sortable={possible_sprites}
             selected={sprite_datum}
           />
-          <Stack.Item>
-            <Button
-              disabled={!selected_module || !sprite_datum}
-              onClick={() => act('confirm')}
-            >
-              Confirm
-            </Button>
-          </Stack.Item>
+          <IconSection module={selected_module} sprite={sprite_datum} />
         </Stack>
       </Window.Content>
     </Window>