Added drink capacity element to UI

Author: Scrambledeggs00

code/modules/food_and_drinks/kitchen_machinery/food_cart_TGUI.dm

@@ -9,7 +9,7 @@
 	//Max amount of items that can be in the cart's contents list
 	var/contents_capacity = 80
 	//How many drinking glasses the cart has
-	var/glass_quantity = 0
+	var/glass_quantity = 10
 	//Max amount of drink glasses the cart can have
 	var/glass_capacity = 30
 	//Max amount of reagents that can be in cart's mixer
@@ -90,6 +90,9 @@
 	data["storage_capacity"] = contents_capacity
 	data["glass_quantity"] = glass_quantity
 	data["glass_capacity"] = glass_capacity
+	//Add the total_volumne of both cart and mixer storage for quantity
+	data["drink_quantity"] = mixer.reagents.total_volume + reagents.total_volume
+	data["drink_capacity"] = reagent_capacity
 
 	//Send stored information to UI	
 	return data

tgui/packages/tgui/interfaces/FoodCart.tsx

@@ -44,6 +44,8 @@ type StorageStats = {
   storage_capacity: number;
   glass_quantity: number;
   glass_capacity: number;
+  drink_quantity: number;
+  drink_capacity: number;
 }
 
 export const FoodCart = (props, context) => {
@@ -216,6 +218,13 @@ const DrinkTab = (props, context) => {
         <GlassRow />
       </Section>
     </Stack.Item>
+    <Stack.Item>
+      <Section
+      title="Drink Capacity"
+      textAlign="center">
+        <DrinkCapacityRow />
+      </Section>
+    </Stack.Item>
     <Stack.Item>
       <Section
       title="Cart Drink Storage"
@@ -248,17 +257,37 @@ const GlassRow = (props, context) => {
       fontSize="14px"
       textAlign="center"
       bold>
-        {/* Show the vat's current contents and its max contents */}
         {glass_quantity}/{glass_capacity}
       </Table.Cell>
     </Table.Row>
   </Table>
   );
 };
 
+const DrinkCapacityRow = (props, context) => {
+  // Get data from ui_data in backend code
+  const { data } = useBackend<StorageStats>(context);
+  // Get needed variables from StorageStats
+  const { drink_quantity } = data;
+  const { drink_capacity } = data;
+
+  return (
+    <Table>
+    <Table.Row>
+      <Table.Cell
+      fontSize="14px"
+      textAlign="center"
+      bold>
+        {drink_quantity}/{drink_capacity}
+      </Table.Cell>
+    </Table.Row>
+  </Table>
+  );
+}
+
 const MainDrinkRow = (props, context) => {
   // Get data from ui_data in backend code
-    const { act, data } = useBackend<Tab>(context);
+  const { act, data } = useBackend<Tab>(context);
   // Get drink information for cart's container from data
   const { mainDrinks = [] } = data;
 
@@ -287,6 +316,7 @@ const MainDrinkRow = (props, context) => {
                 {/* Remove from cart storage */}
                 <Button
                 fluid
+                color="red"
                 content="Purge"
                 textAlign="center"
                 fontSize="16px"
@@ -338,7 +368,7 @@ const MainDrinkRow = (props, context) => {
 
 const MixerDrinkRow = (props, context) => {
   // Get data from ui_data in backend code
-    const { act, data } = useBackend<Tab>(context);
+  const { act, data } = useBackend<Tab>(context);
   // Get drink information for cart's container from data
   const { mixerDrinks = [] } = data;