Address a number of TGUI issues

- SmartFridge has been tweaked to look better
 - ChemMaster no longer puts the units in bottle names by default
 - Trinary filter reads last_flow_rate again
 - Operating computer now works based off percentage of health, rather
   than real health (note, a tesh at -50 won't die until -100, but it'll
   trigger the -100% alarm)
 - Clicking on the knob in the canister UI no longer brings up a number
   input too small to enter values in the valid range. For right now,
   the knob stays, but this may be reconsidered in favor of a
   NumberInput if more people would prefer accessibility over
   skeuomorphism UI design.
 - Pipe dispenser has a bent pipe option again

code/ATMOSPHERICS/components/trinary_devices/filter.dm

@@ -172,6 +172,7 @@
 	data["on"] = use_power
 	data["rate"] = set_flow_rate
 	data["max_rate"] = air1.volume
+	data["last_flow_rate"] = round(last_flow_rate, 0.1)
 
 	data["filter_types"] = list()
 	data["filter_types"] += list(list("name" = "Nothing", "f_type" = -1, "selected" = filter_type == -1))

code/game/machinery/computer/Operating.dm

@@ -177,8 +177,8 @@
 					playsound(src.loc, 'sound/machines/defib_success.ogg', 50, 0)
 				if(oxy && victim.getOxyLoss()>oxyAlarm)
 					playsound(src.loc, 'sound/machines/defib_safetyOff.ogg', 50, 0)
-				if(healthAnnounce && victim.health <= healthAlarm)
+				if(healthAnnounce && ((victim.health / victim.maxHealth) * 100) <= healthAlarm)
-					atom_say("[round(victim.health)]% health.")
+					atom_say("[round(((victim.health / victim.maxHealth) * 100))]% health.")
 
 // Surgery Helpers
 /obj/machinery/computer/operating/proc/build_surgery_list(mob/user)

code/game/machinery/pipe/pipe_dispenser.dm

@@ -52,7 +52,16 @@
 		var/list/r = list()
 		for(var/i in 1 to cat.len)
 			var/datum/pipe_recipe/info = cat[i]
-			r += list(list("pipe_name" = info.name, "pipe_index" = i))
+			r += list(list("pipe_name" = info.name, "ref" = "\ref[info]"))
+			// Stationary pipe dispensers don't allow you to pre-select pipe directions.
+			// This makes it impossble to spawn bent versions of bendable pipes.
+			// We add a "Bent" pipe type with a special param to work around it.
+			if(info.dirtype == PIPE_BENDABLE)
+				r += list(list(
+					"pipe_name" = ("Bent " + info.name),
+					"ref" = "\ref[info]",
+					"bent" = TRUE
+				))
 		data["categories"] += list(list("cat_name" = c, "recipes" = r))
 
 	return data
@@ -69,23 +78,23 @@
 			p_layer = text2num(params["p_layer"])
 		if("dispense_pipe")
 			if(!wait)				
-				var/list/recipes
+				var/datum/pipe_recipe/recipe = locate(params["ref"])
-				if(disposals)
+				if(!istype(recipe))
-					recipes = GLOB.disposal_pipe_recipes
+					return
-				else
-					recipes = GLOB.atmos_pipe_recipes
 				
-				var/datum/pipe_recipe/recipe = recipes[params["category"]][text2num(params["pipe_type"])]
+				var/target_dir = NORTH
+				if(params["bent"])
+					target_dir = NORTHEAST
 
 				var/obj/created_object = null
 				if(istype(recipe, /datum/pipe_recipe/pipe))
 					var/datum/pipe_recipe/pipe/R = recipe
-					created_object = new R.construction_type(loc, recipe.pipe_type, NORTH)
+					created_object = new R.construction_type(loc, recipe.pipe_type, target_dir)
 					var/obj/item/pipe/P = created_object
 					P.setPipingLayer(p_layer)
 				else if(istype(recipe, /datum/pipe_recipe/disposal))
 					var/datum/pipe_recipe/disposal/D = recipe
-					var/obj/structure/disposalconstruct/C = new(loc, D.pipe_type, NORTH, 0, D.subtype ? D.subtype : 0)
+					var/obj/structure/disposalconstruct/C = new(loc, D.pipe_type, target_dir, 0, D.subtype ? D.subtype : 0)
 					C.update()
 					created_object = C
 				else if(istype(recipe, /datum/pipe_recipe/meter))

code/game/machinery/pipe/pipe_recipes.dm

@@ -79,10 +79,6 @@ GLOBAL_LIST_INIT(disposal_pipe_recipes, list(
 	var/dirtype							// If using an RPD, this tells more about what previews to show.
 	var/pipe_type
 
-// Render an HTML link to select this pipe type. Returns text.
-/datum/pipe_recipe/proc/Render(dispenser)
-	return "<A href='?src=\ref[dispenser]&[Params()]'>[name]</A><BR>"
-
 // Get preview for UIs
 /datum/pipe_recipe/proc/get_preview(selected_dir)
 	var/list/dirs
@@ -123,10 +119,6 @@ GLOBAL_LIST_INIT(disposal_pipe_recipes, list(
 
 	return rows
 
-// Parameters for the Topic link returned by Render().  Returns text.
-/datum/pipe_recipe/proc/Params()
-	return ""
-
 //
 // Subtype for actual pipes
 //
@@ -144,18 +136,6 @@ GLOBAL_LIST_INIT(disposal_pipe_recipes, list(
 		icon_state_m = "[icon_state]m"
 	paintable = ispath(path, /obj/machinery/atmospherics/pipe) && !(ispath(path, /obj/machinery/atmospherics/pipe/vent))	// VOREStation Add
 
-// Render an HTML link to select this pipe type
-/datum/pipe_recipe/pipe/Render(dispenser)
-	var/dat = ..(dispenser)
-	// Stationary pipe dispensers don't allow you to pre-select pipe directions.
-	// This makes it impossble to spawn bent versions of bendable pipes.
-	// We add a "Bent" pipe type with a preset diagonal direction to work around it.
-	if(istype(dispenser, /obj/machinery/pipedispenser) && (dirtype == PIPE_BENDABLE))
-		dat += "<A href='?src=\ref[dispenser]&[Params()]&dir=[NORTHEAST]'>Bent [name]</A><BR>"
-	return dat
-
-/datum/pipe_recipe/pipe/Params()
-	return "makepipe=[pipe_type]"
 
 //
 // Subtype for meters
@@ -168,9 +148,6 @@ GLOBAL_LIST_INIT(disposal_pipe_recipes, list(
 /datum/pipe_recipe/meter/New(label)
 	name = label
 
-/datum/pipe_recipe/meter/Params()
-	return "makemeter=1"
-
 //
 // Subtype for disposal pipes
 //
@@ -185,9 +162,3 @@ GLOBAL_LIST_INIT(disposal_pipe_recipes, list(
 	subtype = sort
 	if (dirtype == PIPE_TRIN_M)
 		icon_state_m = replacetext(state, "j1", "j2")
-
-/datum/pipe_recipe/disposal/Params()
-	var/param = "dmake=[pipe_type]"
-	if (subtype)
-		param += "&sort=[subtype]"
-	return param

code/modules/reagents/Chemistry-Machinery.dm

@@ -251,9 +251,9 @@
 						return
 					arguments["num"] = num
 					var/amount_per_bottle = CLAMP(reagents.total_volume / num, 0, MAX_UNITS_PER_BOTTLE)
-					var/default_name = "[reagents.get_master_reagent_name()] ([amount_per_bottle]u)"
+					var/default_name = "[reagents.get_master_reagent_name()]"
 					var/bottles_text = num == 1 ? "new bottle" : "[num] new bottles"
-					tgui_modal_input(src, id, "Please name your [bottles_text]:", null, arguments, default_name, MAX_CUSTOM_NAME_LEN)
+					tgui_modal_input(src, id, "Please name your [bottles_text] ([amount_per_bottle]u in bottle):", null, arguments, default_name, MAX_CUSTOM_NAME_LEN)
 				if("create_bottle_multiple")
 					if(condi || !reagents.total_volume)
 						return

tgui/packages/tgui/components/DraggableControl.js

@@ -170,6 +170,7 @@ export class DraggableControl extends Component {
       onDrag,
       children,
       // Input props
+      forcedInputWidth,
       height,
       lineHeight,
       fontSize,
@@ -206,6 +207,7 @@ export class DraggableControl extends Component {
         style={{
           display: !editing ? 'none' : undefined,
           height: height,
+          width: forcedInputWidth,
           'line-height': lineHeight,
           'font-size': fontSize,
         }}

tgui/packages/tgui/components/Knob.js

@@ -21,6 +21,7 @@ export const Knob = props => {
   const {
     // Draggable props (passthrough)
     animated,
+    forcedInputWidth,
     format,
     maxValue,
     minValue,
@@ -48,6 +49,7 @@ export const Knob = props => {
       dragMatrix={[0, -1]}
       {...{
         animated,
+        forcedInputWidth,
         format,
         maxValue,
         minValue,

tgui/packages/tgui/interfaces/AtmosFilter.js

@@ -1,5 +1,5 @@
 import { useBackend } from '../backend';
-import { Button, LabeledList, NumberInput, Section } from '../components';
+import { Button, LabeledList, NumberInput, Section, AnimatedNumber, Box } from '../components';
 import { getGasLabel } from '../constants';
 import { Window } from '../layouts';
 
@@ -22,6 +22,11 @@ export const AtmosFilter = (props, context) => {
                 onClick={() => act('power')} />
             </LabeledList.Item>
             <LabeledList.Item label="Transfer Rate">
+              <Box inline mr={1}>
+                <AnimatedNumber
+                  value={data.last_flow_rate}
+                  format={val => val + " L/s"} />
+              </Box>
               <NumberInput
                 animated
                 value={parseFloat(data.rate)}

tgui/packages/tgui/interfaces/Canister.js

@@ -51,13 +51,13 @@ export const Canister = (props, context) => {
                 position="relative"
                 left="-8px">
                 <Knob
+                  forcedInputWidth="60px"
                   size={1.25}
                   color={!!valveOpen && 'yellow'}
                   value={releasePressure}
                   unit="kPa"
                   minValue={minReleasePressure}
                   maxValue={maxReleasePressure}
-                  step={5}
                   stepPixelSize={1}
                   onDrag={(e, value) => act('pressure', {
                     pressure: value,

tgui/packages/tgui/interfaces/OperatingComputer.js

@@ -225,6 +225,7 @@ const OperatingComputerOptions = (props, context) => {
           value={healthAlarm}
           stepPixelSize="5"
           ml="0"
+          format={val => val + "%"}
           onChange={(e, val) => act('health_adj', {
             new: val,
           })}

tgui/packages/tgui/interfaces/PipeDispenser.js

@@ -63,7 +63,8 @@ export const PipeDispenser = (props, context) => {
               content={recipe.pipe_name}
               title={recipe.pipe_name}
               onClick={() => act('dispense_pipe', {
-                pipe_type: recipe.pipe_index,
+                ref: recipe.ref,
+                bent: recipe.bent,
                 category: shownCategory.cat_name,
               })} />
           ))}

tgui/packages/tgui/interfaces/SmartVend.js

@@ -28,33 +28,42 @@ export const SmartVend = (props, context) => {
           ) || (
             <Table>
               <Table.Row header>
-                <Table.Cell>
+                <Table.Cell collapsing>
                   Item
                 </Table.Cell>
-                <Table.Cell collapsing />
+                <Table.Cell collapsing textAlign="center">
+                  Amount
+                </Table.Cell>
                 <Table.Cell collapsing textAlign="center">
                   Dispense
                 </Table.Cell>
               </Table.Row>
               {map((value, key) => (
                 <Table.Row key={key}>
-                  <Table.Cell>
+                  <Table.Cell collapsing>
                     {value.name}
                   </Table.Cell>
-                  <Table.Cell collapsing textAlign="right">
+                  <Table.Cell collapsing textAlign="center">
-                    {value.amount}
+                    {value.amount} in stock
                   </Table.Cell>
                   <Table.Cell collapsing>
                     <Button
-                      content="One"
+                      content="1"
                       disabled={value.amount < 1}
                       onClick={() => act('Release', {
                         index: value.index,
                         amount: 1,
                       })} />
                     <Button
-                      content="Many"
+                      content="5"
-                      disabled={value.amount <= 1}
+                      disabled={value.amount < 5}
+                      onClick={() => act('Release', {
+                        index: value.index,
+                        amount: 5,
+                      })} />
+                    <Button
+                      content="Custom"
+                      disabled={value.amount < 1}
                       onClick={() => act('Release', {
                         index: value.index,
                       })} />