Adds a cooldown progress bar to Cryocells (#20328)

* Add a cooldown progress bar to cryocells

* Color the progress bar warningly while no beaker loaded

* Give 'No beaker loaded' message a unique color

* Give the progress bar a label

code/modules/atmospherics/machinery/components/unary_devices/cryo.dm

@@ -216,7 +216,7 @@
 /obj/machinery/atmospherics/unary/cryo_cell/ui_interact(mob/user, ui_key = "main", datum/tgui/ui = null, force_open = FALSE, datum/tgui/master_ui = null, datum/ui_state/state = GLOB.default_state)
 	ui = SStgui.try_update_ui(user, src, ui_key, ui, force_open)
 	if(!ui)
-		ui = new(user, src, ui_key, "Cryo", "Cryo Cell", 520, 490)
+		ui = new(user, src, ui_key, "Cryo", "Cryo Cell", 520, 500)
 		ui.open()
 
 /obj/machinery/atmospherics/unary/cryo_cell/ui_data(mob/user)
@@ -253,6 +253,7 @@
 		if(beaker.reagents && beaker.reagents.reagent_list.len)
 			for(var/datum/reagent/R in beaker.reagents.reagent_list)
 				data["beakerVolume"] += R.volume
+	data["cooldownProgress"] = round(clamp((world.time - last_injection) / injection_cooldown, 0, 1) * 100)
 
 	data["auto_eject_healthy"] = (auto_eject_prefs & AUTO_EJECT_HEALTHY) ? TRUE : FALSE
 	data["auto_eject_dead"] = (auto_eject_prefs & AUTO_EJECT_DEAD) ? TRUE : FALSE

tgui/packages/tgui/interfaces/Cryo.js

@@ -56,6 +56,7 @@ const CryoContent = (props, context) => {
     cellTemperature,
     cellTemperatureStatus,
     isBeakerLoaded,
+    cooldownProgress,
     auto_eject_healthy,
     auto_eject_dead,
   } = data;
@@ -151,6 +152,18 @@ const CryoContent = (props, context) => {
           <LabeledList.Item label="Beaker">
             <CryoBeaker />
           </LabeledList.Item>
+          <LabeledList.Item label="Dosage interval">
+            <ProgressBar
+              ranges={{
+                average: [-Infinity, 99],
+                good: [99, Infinity],
+              }}
+              color={!isBeakerLoaded && "average"}
+              value={cooldownProgress}
+              minValue={0}
+              maxValue={100}
+            />
+          </LabeledList.Item>
           <LabeledList.Divider />
           <LabeledList.Item label="Auto-eject healthy occupants">
             <Button
@@ -192,8 +205,8 @@ const CryoBeaker = (props, context) => {
   if (isBeakerLoaded) {
     return (
       <Fragment>
-        {beakerLabel ? beakerLabel : <Box color="average">No label</Box>}
-        <Box color={!beakerVolume && 'bad'}>
+        <Box display="inline" color={!beakerLabel && "average"}>{beakerLabel || "No label"}</Box>
+        <Box display="inline" float="right" color={!beakerVolume && 'bad'}>
           {beakerVolume ? (
             <AnimatedNumber
               value={beakerVolume}
@@ -206,6 +219,6 @@ const CryoBeaker = (props, context) => {
       </Fragment>
     );
   } else {
-    return <Box color="average">No beaker loaded</Box>;
+    return <Box display="inline" color="bad">No beaker loaded</Box>;
   }
 };