icon fixes (#7943)

code/game/machinery/computer/cloning.dm

@@ -125,7 +125,7 @@
 
 /obj/machinery/computer/cloning/resleeving/ui_assets(mob/user)
 	return list(
-		get_asset_datum(/datum/asset/cloning)
+		get_asset_datum(/datum/asset/simple/cloning)
 	)
 
 /obj/machinery/computer/cloning/tgui_interact(mob/user, datum/tgui/ui = null)
@@ -493,4 +493,4 @@
 		SStgui.update_uis(src)
 
 #undef MENU_MAIN
-#undef MENU_RECORDS
+#undef MENU_RECORDS

code/modules/asset_cache/asset_list_items.dm

@@ -428,52 +428,34 @@
 // 	..()
 
 //Pill sprites for UIs
-/datum/asset/chem_master
+/datum/asset/spritesheet/chem_master
-	var/assets = list()
+	name = "chem_master"
-	var/verify = FALSE
 
-/datum/asset/chem_master/register()
+/datum/asset/spritesheet/chem_master/create_spritesheets()
 	for(var/i = 1 to 24)
-		assets["pill[i].png"] = icon('icons/obj/chemical.dmi', "pill[i]")
+		Insert("pill[i]", 'icons/obj/chemical.dmi', "pill[i]")
 
 	for(var/i = 1 to 4)
-		assets["bottle-[i].png"] = icon('icons/obj/chemical.dmi', "bottle-[i]")
+		Insert("bottle-[i]", 'icons/obj/chemical.dmi', "bottle-[i]")
 
 	for(var/i = 1 to 4) // CHOMPedit
-		assets["patch[i].png"] = icon('icons/obj/chemical.dmi', "patch[i]") // CHOMPedit
+		Insert("patch[i].png", 'icons/obj/chemical.dmi', "patch[i]") // CHOMPedit
-
-	for(var/asset_name in assets)
-		SSassets.transport.register_asset(asset_name, assets[asset_name])
-
-/datum/asset/chem_master/send(client)
-	SSassets.transport.send_assets(client, assets, verify)
 
 //Cloning pod sprites for UIs
-/datum/asset/cloning
+/datum/asset/simple/cloning
-	var/assets = list()
+	assets = list(
-	var/verify = FALSE
+		"pod_idle.gif" = 'icons/UI_Icons/synthprinter.gif',
-
+		"pod_cloning.gif" = 'icons/UI_Icons/synthprinter_working.gif',
-/datum/asset/cloning/register()
+	)
-	assets["pod_idle.gif"] = icon('icons/obj/cloning.dmi', "pod_idle")
-	assets["pod_cloning.gif"] = icon('icons/obj/cloning.dmi', "pod_cloning")
-	assets["pod_mess.gif"] = icon('icons/obj/cloning.dmi', "pod_mess")
-	for(var/asset_name in assets)
-		SSassets.transport.register_asset(asset_name, assets[asset_name])
-
-/datum/asset/cloning/send(client)
-	SSassets.transport.send_assets(client, assets, verify)
 
 // VOREStation Add
-/datum/asset/cloning/resleeving
+/datum/asset/simple/cloning/resleeving
-/datum/asset/cloning/resleeving/register()
+	assets = list(
-	// This intentionally does not call the parent. Duplicate assets are not allowed.
+		"sleeve_empty.gif" = 'icons/UI_Icons/sleeve_empty.gif',
-	assets["sleeve_empty.gif"] = icon('icons/obj/machines/implantchair.dmi', "implantchair")
+		"sleeve_occupied.gif" = 'icons/UI_Icons/sleeve_occupied.gif',
-	assets["sleeve_occupied.gif"] = icon('icons/obj/machines/implantchair.dmi', "implantchair_on")
+		"synthprinter.gif" = 'icons/UI_Icons/synthprinter.gif',
-	assets["synthprinter.gif"] = icon('icons/obj/machines/synthpod.dmi', "pod_0")
+		"synthprinter_working.gif" = 'icons/UI_Icons/synthprinter_working.gif',
-	assets["synthprinter_working.gif"] = icon('icons/obj/machines/synthpod.dmi', "pod_1")
+	)
-	for(var/asset_name in assets)
-		SSassets.transport.register_asset(asset_name, assets[asset_name])
-// VOREStation Add End
 
 /datum/asset/spritesheet/sheetmaterials
 	name = "sheetmaterials"

code/modules/reagents/machinery/chem_master.dm

@@ -84,7 +84,7 @@
 
 /obj/machinery/chem_master/ui_assets(mob/user)
 	return list(
-		get_asset_datum(/datum/asset/chem_master),
+		get_asset_datum(/datum/asset/spritesheet/chem_master),
 	)
 
 /obj/machinery/chem_master/tgui_interact(mob/user, datum/tgui/ui = null)
@@ -212,8 +212,8 @@
 				if("change_pill_style")
 					var/list/choices = list()
 					for(var/i = 1 to MAX_PILL_SPRITE)
-						choices += "pill[i].png"
+						choices += "chem_master32x32 pill[i]"
-					tgui_modal_bento(src, id, "Please select the new style for pills:", null, arguments, pillsprite, choices)
+					tgui_modal_bento_spritesheet(src, id, "Please select the new style for pills:", null, arguments, pillsprite, choices)
 				if("create_patch")
 					if(condi || !reagents.total_volume)
 						return
@@ -247,8 +247,8 @@
 				if("change_bottle_style")
 					var/list/choices = list()
 					for(var/i = 1 to MAX_BOTTLE_SPRITE)
-						choices += "bottle-[i].png"
+						choices += "chem_master32x32 bottle-[i]"
-					tgui_modal_bento(src, id, "Please select the new style for bottles:", null, arguments, bottlesprite, choices)
+					tgui_modal_bento_spritesheet(src, id, "Please select the new style for bottles:", null, arguments, bottlesprite, choices)
 				else
 					return FALSE
 		if(TGUI_MODAL_ANSWER)

code/modules/resleeving/computers.dm

@@ -123,8 +123,8 @@
 
 /obj/machinery/computer/transhuman/resleeving/ui_assets(mob/user)
 	return list(
-		get_asset_datum(/datum/asset/cloning),
+		get_asset_datum(/datum/asset/simple/cloning),
-		get_asset_datum(/datum/asset/cloning/resleeving),
+		get_asset_datum(/datum/asset/simple/cloning/resleeving),
 	)
 
 /obj/machinery/computer/transhuman/resleeving/tgui_interact(mob/user, datum/tgui/ui = null)
@@ -139,7 +139,7 @@
 /obj/machinery/computer/transhuman/resleeving/tgui_data(mob/user)
 	var/data[0]
 	data["menu"] = menu
-	
+
 	var/list/temppods[0]
 	for(var/obj/machinery/clonepod/transhuman/pod in pods)
 		var/status = "idle"
@@ -184,7 +184,7 @@
 	data["selected_pod"] = "\ref[selected_pod]"
 	data["selected_printer"] = "\ref[selected_printer]"
 	data["selected_sleever"] = "\ref[selected_sleever]"
-	
+
 	var/bodyrecords_list_ui[0]
 	for(var/N in our_db.body_scans)
 		var/datum/transhuman/body_record/BR = our_db.body_scans[N]

code/modules/tgui/modal.dm

@@ -146,6 +146,13 @@ GLOBAL_LIST(tgui_modals)
 	var/datum/tgui_modal/input/bento/modal = new(id, text, delegate, arguments, value, choices)
 	return tgui_modal_new(source, modal)
 
+//Bento but spritesheet edition
+/datum/proc/tgui_modal_bento_spritesheet(datum/source = src, id, text = "Default modal message", delegate, arguments, value, choices)
+	ASSERT(length(id))
+
+	var/datum/tgui_modal/input/bento/spritesheet/modal = new(id, text, delegate, arguments, value, choices)
+	return tgui_modal_new(source, modal)
+
 /**
   * Opens a yes/no TGUI modal
   *
@@ -339,6 +346,10 @@ GLOBAL_LIST(tgui_modals)
 	. = ..()
 	.["choices"] = choices
 
+//Bento modal but takes spritesheet classes as choices
+/datum/tgui_modal/input/bento/spritesheet
+	modal_type = "bentospritesheet"
+
 /**
   * Boolean modal - has yes/no buttons that do different actions depending on which is pressed
   */

modular_chomp/code/modules/reagents/machinery/dispenser/chem_synthesizer_ch.dm

@@ -422,18 +422,18 @@
 				if("change_pill_style")
 					var/list/choices = list()
 					for(var/i = 1 to MAX_PILL_SPRITE)
-						choices += "pill[i].png"
+						choices += "chem_master32x32 pill[i]"
-					tgui_modal_bento(src, id, "Please select the new style for pills:", null, arguments, pill_icon, choices)
+					tgui_modal_bento_spritesheet(src, id, "Please select the new style for pills:", null, arguments, pill_icon, choices)
 				if("change_patch_style")
 					var/list/choices = list()
 					for(var/i = 1 to MAX_PATCH_SPRITE)
-						choices += "patch[i].png"
+						choices += "chem_master32x32 patch[i]"
-					tgui_modal_bento(src, id, "Please select the new style for patches:", null, arguments, patch_icon, choices)
+					tgui_modal_bento_spritesheet(src, id, "Please select the new style for patches:", null, arguments, patch_icon, choices)
 				if("change_bottle_style")
 					var/list/choices = list()
 					for(var/i = 1 to MAX_BOTTLE_SPRITE)
-						choices += "bottle-[i].png"
+						choices += "chem_master32x32 bottle-[i]"
-					tgui_modal_bento(src, id, "Please select the new style for bottles:", null, arguments, bottle_icon, choices)
+					tgui_modal_bento_spritesheet(src, id, "Please select the new style for bottles:", null, arguments, bottle_icon, choices)
 				else
 					return FALSE
 		if(TGUI_MODAL_ANSWER)

tgui/packages/tgui/components/NanoMap.jsx

@@ -1,5 +1,6 @@
 import { Component } from 'react';
 
+import { resolveAsset } from '../assets';
 import { useBackend } from '../backend';
 import { Box, Button, Icon, LabeledList, Slider, Tooltip } from '.';
 
@@ -125,7 +126,9 @@ export class NanoMap extends Component {
     const { dragging, offsetX, offsetY, zoom = 1 } = this.state;
     const { children } = this.props;
 
-    const mapUrl = config.map + '_nanomap_z' + config.mapZLevel + '.png';
+    const mapUrl = resolveAsset(
+      config.map + '_nanomap_z' + config.mapZLevel + '.png',
+    );
     // (x * zoom), x Needs to be double the turf- map size. (for virgo, 140x140)
     const mapSize = zoomScale * zoom + 'px';
     const newStyle = {

tgui/packages/tgui/interfaces/CloningConsole.jsx

@@ -1,5 +1,6 @@
 import { round } from 'common/math';
 
+import { resolveAsset } from '../assets';
 import { useBackend } from '../backend';
 import {
   Box,
@@ -307,7 +308,7 @@ const CloningConsoleMain = (props) => {
                 mr="0.5rem"
               >
                 <img
-                  src={'pod_' + pod.status + '.gif'}
+                  src={resolveAsset('pod_' + pod.status + '.gif')}
                   style={{
                     width: '100%',
                     '-ms-interpolation-mode': 'nearest-neighbor',

tgui/packages/tgui/interfaces/ResleevingConsole.jsx

@@ -1,5 +1,6 @@
 import { round } from 'common/math';
 
+import { resolveAsset } from '../assets';
 import { useBackend } from '../backend';
 import {
   Box,
@@ -355,7 +356,7 @@ const ResleevingConsolePodGrowers = (props) => {
           mr="0.5rem"
         >
           <img
-            src={'pod_' + pod.status + '.gif'}
+            src={resolveAsset('pod_' + pod.status + '.gif')}
             style={{
               width: '100%',
               '-ms-interpolation-mode': 'nearest-neighbor',
@@ -391,7 +392,9 @@ const ResleevingConsolePodSleevers = (props) => {
           mr="0.5rem"
         >
           <img
-            src={'sleeve_' + (pod.occupied ? 'occupied' : 'empty') + '.gif'}
+            src={resolveAsset(
+              'sleeve_' + (pod.occupied ? 'occupied' : 'empty') + '.gif',
+            )}
             style={{
               width: '100%',
               '-ms-interpolation-mode': 'nearest-neighbor',
@@ -471,7 +474,9 @@ const ResleevingConsolePodSpods = (props) => {
           mr="0.5rem"
         >
           <img
-            src={'synthprinter' + (pod.busy ? '_working' : '') + '.gif'}
+            src={resolveAsset(
+              'synthprinter' + (pod.busy ? '_working' : '') + '.gif',
+            )}
             style={{
               width: '100%',
               '-ms-interpolation-mode': 'nearest-neighbor',

tgui/packages/tgui/interfaces/chompstation/ChemMaster.jsx

@@ -1,3 +1,4 @@
+import { classes } from '../../.././common/react';
 import { useBackend } from '../../backend';
 import {
   Box,
@@ -351,14 +352,25 @@ const ChemMasterProductionChemical = (props) => {
           <div
             style={{
               display: 'inline-block',
-              width: '16px;',
+              width: '16px',
               height: '16px',
-              verticalAlign: 'middle;',
+              verticalAlign: 'middle',
-              background: 'url(pill' + data.pillsprite + '.png)',
               backgroundSize: '200%',
               backgroundPosition: 'left -10px bottom -6px',
             }}
-          />
+          >
+            <Box
+              className={classes([
+                'chem_master32x32',
+                'pill' + data.pillsprite,
+              ])}
+              style={{
+                bottom: '10px',
+                right: '10px',
+                position: 'relative',
+              }}
+            />
+          </div>
           Style
         </Button>
       </LabeledList.Item>
@@ -396,11 +408,22 @@ const ChemMasterProductionChemical = (props) => {
               width: '16px',
               height: '16px',
               verticalAlign: 'middle',
-              background: 'url(bottle-' + data.bottlesprite + '.png)',
               backgroundSize: '200%',
               backgroundPosition: 'left -10px bottom -6px',
             }}
-          />
+          >
+            <Box
+              className={classes([
+                'chem_master32x32',
+                'bottle-' + data.bottlesprite,
+              ])}
+              style={{
+                bottom: '10px',
+                right: '10px',
+                position: 'relative',
+              }}
+            />
+          </div>
           Style
         </Button>
       </LabeledList.Item>

tgui/packages/tgui/interfaces/chompstation/ChemSynthesizer.jsx

@@ -1,3 +1,4 @@
+import { classes } from '../../.././common/react';
 import { useBackend } from '../../backend';
 import { Box, Button, Flex, LabeledList, Section } from '../../components';
 import { Window } from '../../layouts';
@@ -315,11 +316,22 @@ const ChemSynthesizerSettings = (props) => {
                     width: '16px',
                     height: '16px',
                     verticalAlign: 'middle',
-                    background: 'url(bottle-' + data.bottle_icon + '.png)',
                     backgroundSize: '200%',
                     backgroundPosition: 'left -10px bottom -6px',
                   }}
-                />
+                >
+                  <Box
+                    className={classes([
+                      'chem_master32x32',
+                      'bottle-' + data.bottle_icon,
+                    ])}
+                    style={{
+                      bottom: '10px',
+                      right: '10px',
+                      position: 'relative',
+                    }}
+                  />
+                </div>
                 Style
               </Button>
             </LabeledList.Item>
@@ -338,11 +350,22 @@ const ChemSynthesizerSettings = (props) => {
                     width: '16px',
                     height: '16px',
                     verticalAlign: 'middle',
-                    background: 'url(pill' + data.pill_icon + '.png)',
                     backgroundSize: '200%',
                     backgroundPosition: 'left -10px bottom -6px',
                   }}
-                />
+                >
+                  <Box
+                    className={classes([
+                      'chem_master32x32',
+                      'pill' + data.pill_icon,
+                    ])}
+                    style={{
+                      bottom: '10px',
+                      right: '10px',
+                      position: 'relative',
+                    }}
+                  />
+                </div>
                 Style
               </Button>
             </LabeledList.Item>
@@ -361,11 +384,22 @@ const ChemSynthesizerSettings = (props) => {
                     width: '16px',
                     height: '16px',
                     verticalAlign: 'middle',
-                    background: 'url(patch' + data.patch_icon + '.png)',
                     backgroundSize: '200%',
                     backgroundPosition: 'left -10px bottom -6px',
                   }}
-                />
+                >
+                  <Box
+                    className={classes([
+                      'chem_master32x32',
+                      'patch' + data.patch_icon,
+                    ])}
+                    style={{
+                      bottom: '10px',
+                      right: '10px',
+                      position: 'relative',
+                    }}
+                  />
+                </div>
                 Style
               </Button>
             </LabeledList.Item>

tgui/packages/tgui/interfaces/common/ComplexModal.jsx

@@ -151,6 +151,21 @@ export const ComplexModal = (props) => {
         ))}
       </Flex>
     );
+  } else if (type === 'bentospritesheet') {
+    modalBody = (
+      <Flex spacingPrecise="1" wrap="wrap" my="0.5rem" maxHeight="1%">
+        {data.modal.choices.map((c, i) => (
+          <Flex.Item key={i} flex="1 1 auto">
+            <Button
+              selected={i + 1 === parseInt(data.modal.value, 10)}
+              onClick={() => modalAnswer(id, i + 1)}
+            >
+              <Box className={c} />
+            </Button>
+          </Flex.Item>
+        ))}
+      </Flex>
+    );
   } else if (type === 'boolean') {
     modalFooter = (
       <Box mt="0.5rem">

tgui/packages/tgui_ch/interfaces/ChemMaster.jsx

@@ -3,7 +3,11 @@ import { useBackend } from '../backend';
 import { Box, Button, Flex, Icon, LabeledList, Section } from '../components';
 import { Window } from '../layouts';
 import { BeakerContents } from './common/BeakerContents';
-import { ComplexModal, modalOpen, modalRegisterBodyOverride } from './common/ComplexModal';
+import {
+  ComplexModal,
+  modalOpen,
+  modalRegisterBodyOverride,
+} from './common/ComplexModal';
 
 const transferAmounts = [1, 5, 10, 30, 60];
 const bottleStyles = [
@@ -22,7 +26,8 @@ const analyzeModalBodyOverride = (modal, context) => {
       level={2}
       m="-1rem"
       pb="1rem"
-      title={data.condi ? 'Condiment Analysis' : 'Reagent Analysis'}>
+      title={data.condi ? 'Condiment Analysis' : 'Reagent Analysis'}
+    >
       <Box mx="0.5rem">
         <LabeledList>
           <LabeledList.Item label="Name">{result.name}</LabeledList.Item>
@@ -36,7 +41,8 @@ const analyzeModalBodyOverride = (modal, context) => {
               </LabeledList.Item>
               <LabeledList.Item
                 label="Blood DNA"
-                className="LabeledList__breakContents">
+                className="LabeledList__breakContents"
+              >
                 {result.blood_dna}
               </LabeledList.Item>
             </Fragment>
@@ -188,7 +194,8 @@ const ChemMasterBuffer = (props, context) => {
             onClick={() => act('toggle')}
           />
         </Box>
-      }>
+      }
+    >
       {bufferReagents.length > 0 ? (
         <BeakerContents
           beakerLoaded
@@ -261,17 +268,18 @@ const ChemMasterProduction = (props, context) => {
             content={
               data.loaded_pill_bottle
                 ? data.loaded_pill_bottle_name +
-                ' (' +
+                  ' (' +
-                data.loaded_pill_bottle_contents_len +
+                  data.loaded_pill_bottle_contents_len +
-                '/' +
+                  '/' +
-                data.loaded_pill_bottle_storage_slots +
+                  data.loaded_pill_bottle_storage_slots +
-                ')'
+                  ')'
                 : 'No pill bottle loaded'
             }
             mb="0.5rem"
             onClick={() => act('ejectp')}
           />
-        }>
+        }
+      >
         <Flex height="100%">
           <Flex.Item grow="1" align="center" textAlign="center" color="label">
             <Icon name="tint-slash" mt="0.5rem" mb="0.5rem" size="5" />
@@ -294,17 +302,18 @@ const ChemMasterProduction = (props, context) => {
           content={
             data.loaded_pill_bottle
               ? data.loaded_pill_bottle_name +
-              ' (' +
+                ' (' +
-              data.loaded_pill_bottle_contents_len +
+                data.loaded_pill_bottle_contents_len +
-              '/' +
+                '/' +
-              data.loaded_pill_bottle_storage_slots +
+                data.loaded_pill_bottle_storage_slots +
-              ')'
+                ')'
               : 'No pill bottle loaded'
           }
           mb="0.5rem"
           onClick={() => act('ejectp')}
         />
-      }>
+      }
+    >
       {!props.isCondiment ? (
         <ChemMasterProductionChemical />
       ) : (
@@ -345,6 +354,7 @@ const ChemMasterProductionChemical = (props, context) => {
               'background-size: 200%;' +
               'background-position: left -10px bottom -6px;'
             }
+            className={classes(['chem_master32x32', 'pill' + data.pillsprite])}
           />
           Style
         </Button>
@@ -378,7 +388,8 @@ const ChemMasterProductionChemical = (props, context) => {
         <br />
         <Button
           mb="0.5rem"
-          onClick={() => modalOpen(context, 'change_bottle_style')}>
+          onClick={() => modalOpen(context, 'change_bottle_style')}
+        >
           <div
             style={
               'display: inline-block;' +
@@ -391,6 +402,10 @@ const ChemMasterProductionChemical = (props, context) => {
               'background-size: 200%;' +
               'background-position: left -10px bottom -6px;'
             }
+            className={classes([
+              'chem_master32x32',
+              'bottle-' + data.pillsprite,
+            ])}
           />
           Style
         </Button>
@@ -444,11 +459,11 @@ const ChemMasterCustomization = (props, context) => {
         content={
           data.loaded_pill_bottle
             ? data.loaded_pill_bottle_name +
-            ' (' +
+              ' (' +
-            data.loaded_pill_bottle_contents_len +
+              data.loaded_pill_bottle_contents_len +
-            '/' +
+              '/' +
-            data.loaded_pill_bottle_storage_slots +
+              data.loaded_pill_bottle_storage_slots +
-            ')'
+              ')'
             : 'None loaded'
         }
         mb="0.5rem"

tgui/packages/tgui_ch/interfaces/CloningConsole.jsx

@@ -1,9 +1,22 @@
 import { round } from 'common/math';
 import { Fragment } from 'inferno';
 import { useBackend } from '../backend';
-import { Box, Button, Flex, Icon, LabeledList, NoticeBox, ProgressBar, Section, Tabs } from '../components';
+import {
+  Box,
+  Button,
+  Flex,
+  Icon,
+  LabeledList,
+  NoticeBox,
+  ProgressBar,
+  Section,
+  Tabs,
+} from '../components';
 import { COLORS } from '../constants';
-import { ComplexModal, modalRegisterBodyOverride } from '../interfaces/common/ComplexModal';
+import {
+  ComplexModal,
+  modalRegisterBodyOverride,
+} from '../interfaces/common/ComplexModal';
 import { Window } from '../layouts';
 
 const viewRecordModalBodyOverride = (modal, context) => {
@@ -142,7 +155,8 @@ const CloningConsoleNavigation = (props, context) => {
           act('menu', {
             num: 1,
           })
-        }>
+        }
+      >
         Main
       </Tabs.Tab>
       <Tabs.Tab
@@ -152,7 +166,8 @@ const CloningConsoleNavigation = (props, context) => {
           act('menu', {
             num: 2,
           })
-        }>
+        }
+      >
         Records
       </Tabs.Tab>
     </Tabs>
@@ -209,7 +224,8 @@ const CloningConsoleMain = (props, context) => {
               onClick={() => act('eject')}
             />
           </Fragment>
-        }>
+        }
+      >
         <LabeledList>
           <LabeledList.Item label="Status">
             {loading ? (
@@ -255,7 +271,8 @@ const CloningConsoleMain = (props, context) => {
                     average: [0.25, 0.75],
                     bad: [-Infinity, 0.25],
                   }}
-                  mt="0.5rem">
+                  mt="0.5rem"
+                >
                   <Box textAlign="center">{round(pod.progress, 0) + '%'}</Box>
                 </ProgressBar>
               );
@@ -287,9 +304,10 @@ const CloningConsoleMain = (props, context) => {
                 width="64px"
                 textAlign="center"
                 display="inline-block"
-                mr="0.5rem">
+                mr="0.5rem"
+              >
                 <img
-                  src={'pod_' + pod.status + '.gif'}
+                  src={resolveAsset('pod_' + pod.status + '.gif')}
                   style={{
                     width: '100%',
                     '-ms-interpolation-mode': 'nearest-neighbor',
@@ -405,7 +423,8 @@ const CloningConsoleStatus = (props, context) => {
             }
           />
         </Fragment>
-      }>
+      }
+    >
       <LabeledList>
         <LabeledList.Item label="Scanner">
           {scanner ? (

tgui/packages/tgui_ch/interfaces/ResleevingConsole.jsx

@@ -1,8 +1,22 @@
 import { round } from 'common/math';
 import { Fragment } from 'inferno';
 import { useBackend } from '../backend';
-import { Box, Button, Dimmer, Flex, Icon, LabeledList, NoticeBox, ProgressBar, Section, Tabs } from '../components';
+import {
-import { ComplexModal, modalRegisterBodyOverride } from '../interfaces/common/ComplexModal';
+  Box,
+  Button,
+  Dimmer,
+  Flex,
+  Icon,
+  LabeledList,
+  NoticeBox,
+  ProgressBar,
+  Section,
+  Tabs,
+} from '../components';
+import {
+  ComplexModal,
+  modalRegisterBodyOverride,
+} from '../interfaces/common/ComplexModal';
 import { Window } from '../layouts';
 
 const MENU_MAIN = 1;
@@ -26,7 +40,8 @@ const viewMindRecordModalBodyOverride = (modal, context) => {
       title={'Mind Record (' + realname + ')'}
       buttons={
         <Button icon="times" color="red" onClick={() => act('modal_close')} />
-      }>
+      }
+    >
       <LabeledList>
         <LabeledList.Item label="Name">{realname}</LabeledList.Item>
         <LabeledList.Item label="Status">{obviously_dead}</LabeledList.Item>
@@ -55,8 +70,9 @@ const viewMindRecordModalBodyOverride = (modal, context) => {
         </LabeledList.Item>
         <LabeledList.Item label="OOC Notes">
           <Section
-            style={{ 'word-break': 'break-all', 'height': '100px' }}
+            style={{ 'word-break': 'break-all', height: '100px' }}
-            scrollable>
+            scrollable
+          >
             {oocnotes}
           </Section>
         </LabeledList.Item>
@@ -85,7 +101,8 @@ const viewBodyRecordModalBodyOverride = (modal, context) => {
       title={'Body Record (' + realname + ')'}
       buttons={
         <Button icon="times" color="red" onClick={() => act('modal_close')} />
-      }>
+      }
+    >
       <LabeledList>
         <LabeledList.Item label="Name">{realname}</LabeledList.Item>
         <LabeledList.Item label="Species">{species}</LabeledList.Item>
@@ -96,8 +113,9 @@ const viewBodyRecordModalBodyOverride = (modal, context) => {
         </LabeledList.Item>
         <LabeledList.Item label="OOC Notes">
           <Section
-            style={{ 'word-break': 'break-all', 'height': '100px' }}
+            style={{ 'word-break': 'break-all', height: '100px' }}
-            scrollable>
+            scrollable
+          >
             {oocnotes}
           </Section>
         </LabeledList.Item>
@@ -161,7 +179,8 @@ const ResleevingConsoleNavigation = (props, context) => {
           act('menu', {
             num: MENU_MAIN,
           })
-        }>
+        }
+      >
         Main
       </Tabs.Tab>
       <Tabs.Tab
@@ -171,7 +190,8 @@ const ResleevingConsoleNavigation = (props, context) => {
           act('menu', {
             num: MENU_BODY,
           })
-        }>
+        }
+      >
         Body Records
       </Tabs.Tab>
       <Tabs.Tab
@@ -181,7 +201,8 @@ const ResleevingConsoleNavigation = (props, context) => {
           act('menu', {
             num: MENU_MIND,
           })
-        }>
+        }
+      >
         Mind Records
       </Tabs.Tab>
     </Tabs>
@@ -298,7 +319,8 @@ const ResleevingConsolePodGrowers = (props, context) => {
               average: [0.25, 0.75],
               bad: [-Infinity, 0.25],
             }}
-            mt="0.5rem">
+            mt="0.5rem"
+          >
             <Box textAlign="center">{round(pod.progress, 0) + '%'}</Box>
           </ProgressBar>
         );
@@ -330,9 +352,10 @@ const ResleevingConsolePodGrowers = (props, context) => {
           width="64px"
           textAlign="center"
           display="inline-block"
-          mr="0.5rem">
+          mr="0.5rem"
+        >
           <img
-            src={'pod_' + pod.status + '.gif'}
+            src={resolveAsset('pod_' + pod.status + '.gif')}
             style={{
               width: '100%',
               '-ms-interpolation-mode': 'nearest-neighbor',
@@ -365,9 +388,12 @@ const ResleevingConsolePodSleevers = (props, context) => {
           width="64px"
           textAlign="center"
           display="inline-block"
-          mr="0.5rem">
+          mr="0.5rem"
+        >
           <img
-            src={'sleeve_' + (pod.occupied ? 'occupied' : 'empty') + '.gif'}
+            src={resolveAsset(
+              'sleeve_' + (pod.occupied ? 'occupied' : 'empty') + '.gif',
+            )}
             style={{
               width: '100%',
               '-ms-interpolation-mode': 'nearest-neighbor',
@@ -411,7 +437,8 @@ const ResleevingConsolePodSpods = (props, context) => {
               average: [0.25, 0.75],
               bad: [-Infinity, 0.25],
             }}
-            mt="0.5rem">
+            mt="0.5rem"
+          >
             <Box textAlign="center">{round(pod.progress, 0) + '%'}</Box>
           </ProgressBar>
         );
@@ -443,9 +470,12 @@ const ResleevingConsolePodSpods = (props, context) => {
           width="64px"
           textAlign="center"
           display="inline-block"
-          mr="0.5rem">
+          mr="0.5rem"
+        >
           <img
-            src={'synthprinter' + (pod.busy ? '_working' : '') + '.gif'}
+            src={resolveAsset(
+              'synthprinter' + (pod.busy ? '_working' : '') + '.gif',
+            )}
             style={{
               width: '100%',
               '-ms-interpolation-mode': 'nearest-neighbor',