"100% functional" commit

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

@@ -37,6 +37,7 @@
 	active_power_usage = 150
 	anchored = TRUE
 	unacidable = TRUE
+	density = TRUE
 	panel_open = TRUE
 
 	var/busy = FALSE
@@ -45,7 +46,9 @@
 	var/delay_modifier = 3 // This is multiplied by the volume of a step to determine how long each step takes. Bigger volume = slower.
 	var/obj/item/weapon/reagent_containers/glass/catalyst = null // This is where the user adds catalyst. Usually phoron.
 
-	var/list/recipes = list(list()) // This holds chemical recipes up to a maximum determined by SYNTHESIZER_MAX_RECIPES. Two-dimensional.
+	var/list/debug_data // DELETE THIS ONCE DONE TESTNG
+
+	var/list/recipes = list() // This holds chemical recipes up to a maximum determined by SYNTHESIZER_MAX_RECIPES. Two-dimensional.
 	var/list/queue = list() // This holds the recipe id's for queued up recipes.
 	var/list/catalyst_ids = list() // This keeps track of the chemicals in the catalyst to remove before bottling.
 	var/list/cartridges = list() // Associative, label -> cartridge
@@ -221,13 +224,15 @@
 	data["use_catalyst"] = use_catalyst
 
 	// Queue and recipe lists might not be formatted correctly here. Delete this once you've confirmed.
-	data["queue"] = queue
+	var/list/tmp_queue = list()
+	for(var/i = 1, i <= queue.len, i++)
+		tmp_queue.Add(list(list("name" = queue[i], "index" = i))) // Thanks byond
+	data["queue"] = tmp_queue
 
 	// Convert the recipes list into an array of strings. The UI does not need the associative list attached to each string.
 	var/list/tmp_recipes = list()
-	if(recipes)
+	for(var/i = 1, i <= recipes.len, i++)
-		for(var/i = 1, i <= recipes.len, i++)
+		tmp_recipes.Add(list(list("name" = recipes[i])))
-			tmp_recipes[i] = recipes[i]
 	data["recipes"] = tmp_recipes
 
 
@@ -245,12 +250,20 @@
 		for(var/datum/reagent/R in catalyst.reagents.reagent_list)
 			catalyst_reagents_list[++catalyst_reagents_list.len] = list("name" = R.name, "volume" = R.volume, "description" = R.description, "id" = R.id)
 
+	if(catalyst)
+		data["catalystCurrentVolume"] = catalyst.reagents.total_volume
+		data["catalystMaxVolume"] = catalyst.reagents.maximum_volume
+	else
+		data["catalystCurrentVolume"] = null
+		data["catalystMaxVolume"] = null
+
 	var/chemicals[0]
 	for(var/label in cartridges)
 		var/obj/item/weapon/reagent_containers/chem_disp_cartridge/C = cartridges[label]
 		chemicals.Add(list(list("title" = label, "id" = label, "amount" = C.reagents.total_volume))) // list in a list because Byond merges the first list
 	data["chemicals"] = chemicals
 
+	debug_data = data
 	return data
 
 /obj/machinery/chemical_synthesizer/tgui_act(action, params)
@@ -262,7 +275,7 @@
 		if("start_queue")
 			// Start up the queue.
 			if(!busy)
-				start_queue()
+				start_queue(usr)
 		if("rem_queue")
 			// Remove a single entry from the queue. Sanity checks also prevent removing the first entry if the machine is busy though UI should already prevent that.
 			var/index = text2num(params["q_index"])
@@ -303,7 +316,7 @@
 			if(!busy)
 				panel_open = !panel_open
 		if("mode_toggle")
-			// Toggles production mode. 
+			// Toggles production mode.
 			production_mode = !production_mode
 		if("add_recipe")
 			// Allows the user to add a recipe. Kinda vital for this machine to do anything useful.
@@ -321,11 +334,11 @@
 				if(confirm == "Yes")
 					var/index = params["rm_index"]
 					if(index in recipes)
-						recipes -= recipes[index]
+						recipes.Remove(list(index)) // Fuck off Byond.
 			else
 				to_chat(usr, "<span class='warning'>You cannot remove recipes while the machine is running!</span>")
 		if("exp_recipe")
-			// Allows the user to export recipes to chat formatted for easy importing. 
+			// Allows the user to export recipes to chat formatted for easy importing.
 			var/index = params["exp_index"]
 			export_recipe(usr, index)
 		if("add_queue")
@@ -336,7 +349,7 @@
 			var/index = params["qa_index"]
 			// If you forgot, this is a string returned by the user pressing the "add to queue" button on a recipe.
 			if(index in recipes)
-				queue[queue.len + 1] = index
+				queue[++queue.len] = index
 
 	add_fingerprint(usr)
 
@@ -360,19 +373,23 @@
 		to_chat(user, "Please provide a unique recipe name!")
 		return
 
-	var/steps = 2 * CLAMP(round(input(user, "How many steps does your recipe contain (16 max)?", "Steps", null)), 0, RECIPE_MAX_STEPS) // Round to get a whole integer, clamp to ensure proper range.
+	var/steps = 2 * CLAMP(round(input(user, "How many steps does your recipe contain (16 max)?", "Steps", null) as num), 0, RECIPE_MAX_STEPS) // Round to get a whole integer, clamp to ensure proper range.
-	var/new_rec = list() // This holds the actual recipe.
+	if(!steps)
+		to_chat(user, "Please input a valid number of steps!")
+		return
+
+	var/list/new_rec = list() // This holds the actual recipe.
 	for(var/i = 1, i < steps, i += 2) // For the user, 1 step is both text and volume. For list arithmetic, that's 2 steps.
 		var/label = tgui_input_list(user, "Which chemical would you like to use?", "Chemical Synthesizer", cartridges)
 		if(!label)
 			to_chat(user, "Please select a chemical!")
 			return
-		new_rec[i] = label // Add the reagent ID.
+		new_rec[++new_rec.len] = label // Add the reagent ID.
-		var/amount = CLAMP(round(input(user, "How much of the chemical would you like to add?", "Volume", null)), 0, src.reagents.maximum_volume)
+		var/amount = CLAMP(round(input(user, "How much of the chemical would you like to add?", "Volume", null) as num), 0, src.reagents.maximum_volume)
 		if(!amount)
 			to_chat(user, "Please select a volume!")
 			return
-		new_rec[i+1] = amount // Add the amount of reagent.
+		new_rec[++new_rec.len] = amount // Add the amount of reagent.
 
 	recipes[rec_name] = new_rec
 	SStgui.update_uis(src)
@@ -386,18 +403,18 @@
 		to_chat(user, "Please provide a unique recipe name!")
 		return
 
-	var/rec_input = input(user, "Input your recipe as 'Chem1,Vol1,Chem2,Vol2,...'", "Import recipe", null)
+	var/rec_input = input(user, "Input your recipe as 'Chem1,vol1,Chem2,vol2,...'", "Import recipe", null)
 	if(!rec_input || (length(rec_input) > RECIPE_MAX_STRING) || !findtext(rec_input, ",")) // The smallest possible recipe will contain 1 comma.
 		to_chat(user, "Invalid input or recipe max length exceeded!")
 		return
 
 	rec_input = trim(rec_input) // Sanitize.
-	var/new_rec = list() // This holds the actual recipe.
+	var/list/new_rec = list() // This holds the actual recipe.
 	var/vol = FALSE // This tracks if the next step is a chemical name or a volume.
 	var/index = findtext(rec_input, ",") // This tracks the delineation index in the user-provided string. Should never be null at this point.
 	var/i = 1 // This tracks the index for new_rec, the actual list which gets added to recipes[rec_name].
 	while(index) // Alternates between text strings and numbers. When false, the rest of rec_input is the final step.
-		new_rec[i] = copytext(rec_input, 1, index)
+		new_rec[++new_rec.len] = copytext(rec_input, 1, index)
 		if(vol)
 			new_rec[i] = text2num(new_rec[i]) // If it's a volume step, convert to a number.
 			vol = FALSE
@@ -408,7 +425,7 @@
 		index = findtext(rec_input, ",")
 
 	if(rec_input) // The remainder of rec_input should be the final volume step of the recipe. The if() is a sanity check.
-		new_rec[i] = text2num(rec_input)
+		new_rec[++new_rec.len] = text2num(rec_input)
 
 	recipes[rec_name] = new_rec // Finally, add the recipe to the recipes list.
 	SStgui.update_uis(src)
@@ -543,11 +560,11 @@
 		B.update_icon()
 
 	// Sanity check when manual bottling is triggered.
-	if(queue)
+	if(queue.len)
 		queue -= queue[1]
 
 	// If the queue is now empty, we're done. Otherwise, re-add catalyst and proceed to the next recipe.
-	if(queue)
+	if(queue.len)
 		if(use_catalyst)
 			for(var/datum/reagent/chem in catalyst.reagents.reagent_list)
 				catalyst_ids += chem.id
@@ -573,4 +590,4 @@
 #undef SYNTHESIZER_MAX_RECIPES
 #undef SYNTHESIZER_MAX_QUEUE
 #undef RECIPE_MAX_STRING
-#undef RECIPE_MAX_STEPS
+#undef RECIPE_MAX_STEPS

tgui/packages/tgui/interfaces/ChemSynthesizer.js

@@ -7,15 +7,22 @@ import { BeakerContents } from './common/BeakerContents';
 export const ChemSynthesizer = (props, context) => {
   return (
     <Window
-      width={575}
+      width={1100}
-      height={500}
+      height={640}
       resizable>
-      <Window.Content className="Layout__content--flexColumn">
+      <Window.Content>
-        <ChemSynthesizerQueueRecipes />
+        <Flex
-        <ChemSynthesizerQueueList />
+          height="100%">
-        <ChemSynthesizerRecipeList />
+          <Flex.Item grow={1} maxWidth="33%" >
-        <ChemSynthesizerChemicals />
+            <ChemSynthesizerQueueRecipes />
-        <ChemSynthesizerSettings />
+          </Flex.Item>
+          <Flex.Item grow={1}>
+            <ChemSynthesizerChemicals />
+          </Flex.Item>
+          <Flex.Item grow={1}>
+            <ChemSynthesizerSettings />
+          </Flex.Item>
+        </Flex>
       </Window.Content>
     </Window>
   );
@@ -27,6 +34,7 @@ const ChemSynthesizerQueueRecipes = (props, context) => {
     busy,
     use_catalyst,
     queue = [],
+    recipes = [],
     production_mode,
   } = data;
 
@@ -36,15 +44,16 @@ const ChemSynthesizerQueueRecipes = (props, context) => {
       width="100%"
       direction="column">
       <Flex.Item
-        height={0}
+        maxHeight="50%"
-        grow={1}>
+        grow={1}
+        basis={0}>
         <Section
           height="100%"
           title="Queue"
-          overflowY="auto"
+          overflowY="scroll"
           buttons={
             <Fragment>
-              <Button 
+              <Button
                 disabled={!!busy}
                 color={use_catalyst ? "green" : "bad"}
                 icon="wrench"
@@ -66,118 +75,93 @@ const ChemSynthesizerQueueRecipes = (props, context) => {
               ))}
             </Fragment>
           }>
-          <Flex
+          <LabeledList>
-            direction="column"
+          {(queue.length && queue.map((item) => {
-            height="100%">
+            if ((item.index === 1) && !!busy) {
-            <Flex.Item>
+              return (
-              <ChemSynthesizerQueueList />
+                <LabeledList.Item label={item.name} labelColor="bad">
-            </Flex.Item>
+                  {
-          </Flex>
+                    <Box>
+                      <Button
+                        disabled icon="trash">
+                        Delete
+                      </Button>
+                    </Box>
+                  }
+                </LabeledList.Item>
+              );
+            }
+              return (
+                <LabeledList.Item label={item.name}>
+                  <Button
+                    icon="trash"
+                    onClick={() => act("rem_queue", {
+                      q_index: item.index,
+                    })}>
+                    Delete
+                  </Button>
+                </LabeledList.Item>
+              );
+            })) || (
+            <Box m={1}>
+              Queue Empty.
+            </Box>
+          )}
+          </LabeledList>
         </Section>
+      </Flex.Item>
+      <Flex.Item
+        maxHeight="50%"
+        grow={1}
+        basis={0}>
         <Section
           height="100%"
           title="Recipes"
-          overflowY="auto"
+          overflowY="scroll"
           buttons={
             <Button
               icon="plus"
               tooltip={production_mode ? "Import Recipe" : "Generate Recipe"}
               onClick={() => act("add_recipe")} />
           }>
-          <Flex
+          <LabeledList>
-            direction="column"
+          {(recipes.length && recipes.map((item) => {
-            height="100%">
+              return (
-            <Flex.Item>
+                <LabeledList.Item label={item.name}>
-              <ChemSynthesizerRecipeList />
+                  <Button
-            </Flex.Item>
+                    icon="plus"
-          </Flex>
+                    tooltip="Add to Queue"
+                    onClick={() => act("add_queue", {
+                      qa_index: item.name,
+                    })} />
+                  <Button
+                    icon="inbox"
+                    tooltip="Export Recipe"
+                    onClick={() => act("exp_recipe", {
+                      exp_index: item.name,
+                    })} />
+                  <Button
+                    color="bad"
+                    icon="minus-circle"
+                    tooltip="Delete Recipe"
+                    disabled={!!busy}
+                    onClick={() => act("rem_recipe", {
+                      rm_index: item.name,
+                    })} />
+                </LabeledList.Item>
+              );
+            })) || (
+            <Box m={1}>
+              No recipes found.
+            </Box>
+          )}
+          </LabeledList>
         </Section>
       </Flex.Item>
     </Flex>
   );
 };
 
-const ChemSynthesizerQueueList = (props, context) => {
-  const { act, data } = useBackend(context);
-  const {
-    queue = [],
-    busy,
-  } = data;
-
-  return (
-    <LabeledList>
-      {queue.length && queue.map(item => {
-        if ((item.index === 1) && !!busy) {
-          return (
-            <LabeledList.Item label={item.name} labelColor="bad">
-              {
-                <Box>
-                  <Button
-                    disabled icon="trash">
-                    Delete
-                  </Button>
-                </Box>
-              }
-            </LabeledList.Item>
-          );
-        
-          return (
-            <LabeledList.Item label={item.name}>
-              <Button
-                icon="trash"
-                onClick={() => act("rem_queue", {
-                  q_index: item.index,
-                })}>
-                Delete
-              </Button>
-            </LabeledList.Item>
-          );
-        } }) || (
-        <Box m={1}>
-          Queue Empty.
-        </Box>
-      )}
-    </LabeledList>
-  );
-};
-
-const ChemSynthesizerRecipeList = (props, context) => {
-  const { act, data } = useBackend(context);
-  const {
-    recipes = [],
-    busy,
-  } = data;
-
-  return (
-    <Flex>
-      {recipes.map(item => {
-        <Flex.Item>
-          <Button
-            color="bad"
-            icon="minus"
-            disabled={!!busy}
-            onClick={() => act("rem_recipe", { 
-              rm_index: item.name,
-            })} />
-          <Button
-            icon="inbox"
-            onClick={() => act("exp_recipe", { 
-              exp_index: item.name,
-            })} />
-          <Button
-            icon="plus"
-            onClick={() => act("add_queue", { 
-              qa_index: item.name,
-            })} />
-          <Box>
-            {item.name}
-          </Box>
-        </Flex.Item>;
-      })}
-    </Flex>
-  ); 
-};
-
 const ChemSynthesizerChemicals = (props, context) => {
   const { act, data } = useBackend(context);
   const {
@@ -185,6 +169,8 @@ const ChemSynthesizerChemicals = (props, context) => {
     chemicals = [],
     rxn_vessel = [],
     catalyst,
+    catalystCurrentVolume,
+    catalystMaxVolume,
     catalyst_reagents = [],
   } = data;
 
@@ -193,7 +179,8 @@ const ChemSynthesizerChemicals = (props, context) => {
     flexFillers.push(true);
   }
   return (
-    <Flex>
+    <Flex
+    direction="column">
       <Section
         title="Cartridge Reagents"
         flexGrow="1">
@@ -203,11 +190,16 @@ const ChemSynthesizerChemicals = (props, context) => {
           height="100%"
           align="flex-start">
           {chemicals.map((c, i) => (
-            <Flex.Item key={i} grow="1" m={0.2} basis="40%" height="20px">
+          <Flex.Item key={i} grow="1" m={0.2} basis="40%" height="20px">
-              <Box>
+            <Button
-                {c.title + " (" + c.amount + ")"}
+              icon="arrow-circle-down"
-              </Box>
+              width="100%"
-            </Flex.Item>
+              height="100%"
+              align="flex-start"
+              disabled={1}
+              content={c.title + ' (' + c.amount + ')'}
+            />
+          </Flex.Item>
           ))}
           {flexFillers.map((_, i) => (
             <Flex.Item key={i} grow="1" basis="25%" height="20px" />
@@ -235,9 +227,9 @@ const ChemSynthesizerChemicals = (props, context) => {
         minHeight="25%"
         buttons={(
           <Box>
-            {!!beaker && (
+            {!!catalyst && (
               <Box inline color="label" mr={2}>
-                {beakerCurrentVolume} / {beakerMaxVolume} units
+                {catalystCurrentVolume} / {catalystMaxVolume} units
               </Box>
             )}
             <Button
@@ -277,20 +269,25 @@ const ChemSynthesizerSettings = (props, context) => {
         <Section
           height="100%"
           title="Settings"
-          overflowY="auto"
+          overflowY="auto">
-          buttons={
+            <Flex
-            <Fragment>
+              direction="column">
-              <Button 
+              <Flex.Item>
+              <Button
                 color={production_mode ? "green" : "bad"}
                 icon="wrench"
                 content={production_mode ? "Recipe mode: Import" : "Recipe mode: Tutorial"}
-                onClick={() => act("panel_toggle")} />
+                onClick={() => act("mode_toggle")} />
-              <Button 
+              </Flex.Item>
+              <Flex.Item>
+              <Button
                 disabled={!!busy}
                 color={panel_open ? "bad" : "green"}
                 icon="wrench"
                 content={panel_open ? "Panel Open" : "Panel Closed"}
                 onClick={() => act("panel_toggle")} />
+              </Flex.Item>
+              <Flex.Item>
               {(!busy && (
                 <Button
                   disabled={!rxn_vessel.length}
@@ -300,15 +297,18 @@ const ChemSynthesizerSettings = (props, context) => {
                   content="Bottle Manually"
                   onClick={() => act("bottle_product")} />
               ))}
+              </Flex.Item>
+              <Flex.Item>
               <Button
                 disabled={!busy}
                 color="bad"
                 icon="minus-circle"
                 content="EMERGENCY STOP"
                 onClick={() => act("emergency_stop")} />
-            </Fragment>
+              </Flex.Item>
-          } />
+            </Flex>
+        </Section>
       </Flex.Item>
     </Flex>
   );
-};
+};