From 5b49cbbf6dc168291c3032a8aed4e8b9fa5b829f Mon Sep 17 00:00:00 2001
From: CHOMPStation2StaffMirrorBot
 <94713762+CHOMPStation2StaffMirrorBot@users.noreply.github.com>
Date: Sat, 26 Apr 2025 03:23:33 -0700
Subject: [PATCH] [MIRROR] Add a RoundGauge to Canister UI (#10750)

Co-authored-by: ShadowLarkens <shadowlarkens@gmail.com>
---
 tgui/packages/tgui/interfaces/Canister.tsx | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/tgui/packages/tgui/interfaces/Canister.tsx b/tgui/packages/tgui/interfaces/Canister.tsx
index 199bc526b3..9919945192 100644
--- a/tgui/packages/tgui/interfaces/Canister.tsx
+++ b/tgui/packages/tgui/interfaces/Canister.tsx
@@ -8,6 +8,7 @@ import {
   Knob,
   LabeledControls,
   LabeledList,
+  RoundGauge,
   Section,
   Tooltip,
 } from 'tgui-core/components';
@@ -41,7 +42,7 @@ export const Canister = (props) => {
     holding,
   } = data;
   return (
-    <Window width={360} height={242}>
+    <Window width={360} height={300}>
       <Window.Content>
         <Section
           title="Canister"
@@ -57,14 +58,22 @@ export const Canister = (props) => {
         >
           <LabeledControls>
             <LabeledControls.Item minWidth="66px" label="Tank Pressure">
-              <AnimatedNumber
+              <RoundGauge
+                size={2}
                 value={pressure}
+                ranges={{
+                  bad: [0, 101.325],
+                  average: [101.325, 101.325 * 15],
+                  good: [101.325 * 15, 10000],
+                }}
                 format={(value) => {
                   if (value < 10000) {
                     return toFixed(value) + ' kPa';
                   }
                   return formatSiUnit(value * 1000, 1, 'Pa');
                 }}
+                minValue={0}
+                maxValue={10000}
               />
             </LabeledControls.Item>
             <LabeledControls.Item label="Regulator">