Trying to get the sleeper and clockworkslab to work

code/modules/antagonists/clockcult/clock_items/clockwork_slab.dm

@@ -171,7 +171,7 @@
 		return FALSE
 	if(!is_servant_of_ratvar(user))
 		to_chat(user, "<span class='warning'>The information on [src]'s display shifts rapidly. After a moment, your head begins to pound, and you tear your eyes away.</span>")
-		if(user.confused || user.dizziness) //We dont want this to stack.
+		if(user.confused || user.dizziness)
 			user.confused += 5
 			user.dizziness += 5
 		return FALSE
@@ -201,7 +201,7 @@
 	if(!ui)
 		ui = new(user, src, ui_key, "ClockworkSlab", name, ui_x, ui_z, master_ui, state)
 		ui.open()
-	
+
 /obj/item/clockwork/slab/proc/recite_scripture(datum/clockwork_scripture/scripture, mob/living/user)
 	if(!scripture || !user || !user.canUseTopic(src) || (!no_cost && !can_recite_scripture(user)))
 		return FALSE
@@ -432,40 +432,26 @@
 	data["scriptures"] = list()
 	for(var/s in GLOB.all_scripture)
 		var/datum/clockwork_scripture/S = GLOB.all_scripture[s]
-		if(S.tier == selected_scripture) //display only scriptures of the selected tier
-			var/scripture_color = get_component_color_bright(S.primary_component)
-			var/list/temp_info = list("name" = "<font color=[scripture_color]><b>[S.name]</b></font>",
-			"descname" = "<font color=[scripture_color]>([S.descname])</font>",
-			"tip" = "[S.desc]\n[S.usage_tip]",
-			"required" = "([DisplayPower(S.power_cost)][S.special_power_text ? "+ [replacetext(S.special_power_text, "POWERCOST", "[DisplayPower(S.special_power_cost)]")]" : ""])",
-			"type" = "[S.type]",
-			"quickbind" = S.quickbind)
-			if(S.important)
-				temp_info["name"] = "<i>[temp_info["name"]]</i>"
-			var/found = quickbound.Find(S.type)
-			if(found)
-				temp_info["bound"] = "<b>[found]</b>"
-			if(S.invokers_required > 1)
-				temp_info["invokers"] = "<font color=#B18B25>Invokers: <b>[S.invokers_required]</b></font>"
-			data["scripture"] += list(temp_info)
-			return data
+		var/scripture_color = get_component_color_bright(S.primary_component)
+		var/list/temp_info = list("name" = "<font color=[scripture_color]><b>[S.name]</b></font>",
+		"descname" = "<font color=[scripture_color]>([S.descname])</font>",
+		"tip" = "[S.desc]\n[S.usage_tip]",
+		"required" = "([DisplayPower(S.power_cost)][S.special_power_text ? "+ [replacetext(S.special_power_text, "POWERCOST", "[DisplayPower(S.special_power_cost)]")]" : ""])",
+		"type" = "[S.type]",
+		"quickbind" = S.quickbind)
+		if(S.important)
+			temp_info["name"] = "<i>[temp_info["name"]]</i>"
+		var/found = quickbound.Find(S.type)
+		if(found)
+			temp_info["bound"] = "<b>[found]</b>"
+		if(S.invokers_required > 1)
+			temp_info["invokers"] = "<font color=#B18B25>Invokers: <b>[S.invokers_required]</b></font>"
+		data["scripture"] += list(temp_info)
+	return data
 
 /obj/item/clockwork/slab/ui_static_data(mob/user)
 	var/list/data = list()
-	switch(selected_scripture) //display info based on selected scripture tier
-		if(SCRIPTURE_DRIVER)
-			data["tier_info"] = "<font color=#B18B25><b>These scriptures are permanently unlocked.</b></font>"
-		if(SCRIPTURE_SCRIPT)
-			if(SSticker.scripture_states[SCRIPTURE_SCRIPT])
-				data["tier_info"] = "<font color=#B18B25><b>These scriptures are permanently unlocked.</b></font>"
-			else
-				data["tier_info"] = "<font color=#B18B25><i>These scriptures will automatically unlock when the Ark is halfway ready or if [DisplayPower(SCRIPT_UNLOCK_THRESHOLD)] of power is reached.</i></font>"
-		if(SCRIPTURE_APPLICATION)
-			if(SSticker.scripture_states[SCRIPTURE_APPLICATION])
-				data["tier_info"] = "<font color=#B18B25><b>These scriptures are permanently unlocked.</b></font>"
-			else
-				data["tier_info"] = "<font color=#B18B25><i>Unlock these optional scriptures by converting another servant or if [DisplayPower(APPLICATION_UNLOCK_THRESHOLD)] of power is reached..</i></font>"
-
+	data["tier_info"] = "<font color=#B18B25><b>These scriptures are permanently unlocked.</b></font>"
 	data["selected"] = selected_scripture
 	data["scripturecolors"] = "<font color=#DAAA18>Scriptures in <b>yellow</b> are related to construction and building.</font><br>\
 	<font color=#6E001A>Scriptures in <b>red</b> are related to attacking and offense.</font><br>\
@@ -474,19 +460,18 @@
 	<font color=#DAAA18><i>Scriptures with italicized names are important to success.</i></font>"
 	generate_all_scripture()
 	data["recollection"] = recollecting
-	if(recollecting)
-		data["recollection_categories"] = GLOB.ratvar_awakens ? list() : list(\
-		list("name" = "Getting Started", "desc" = "First-time servant? Read this first."), \
-		list("name" = "Basics", "desc" = "A primer on how to play as a servant."), \
-		list("name" = "Terminology", "desc" = "Common acronyms, words, and terms."), \
-		list("name" = "Components", "desc" = "Information on components, your primary resource."), \
-		list("name" = "Scripture", "desc" = "Information on scripture, ancient tools used by the cult."), \
-		list("name" = "Power", "desc" = "The power system that certain objects use to function."), \
-		list("name" = "Conversion", "desc" = "Converting the crew, cyborgs, and very walls to your cause."), \
-		)
-		data["rec_text"] = recollection()
-		data["rec_section"] = GLOB.ratvar_awakens ? "" : get_recollection_text(recollection_category)
-		data["rec_binds"] = GLOB.ratvar_awakens ? "" : get_recollection_quickbinds()
+	data["recollection_categories"] = GLOB.ratvar_awakens ? list() : list(\
+	list("name" = "Getting Started", "desc" = "First-time servant? Read this first."), \
+	list("name" = "Basics", "desc" = "A primer on how to play as a servant."), \
+	list("name" = "Terminology", "desc" = "Common acronyms, words, and terms."), \
+	list("name" = "Components", "desc" = "Information on components, your primary resource."), \
+	list("name" = "Scripture", "desc" = "Information on scripture, ancient tools used by the cult."), \
+	list("name" = "Power", "desc" = "The power system that certain objects use to function."), \
+	list("name" = "Conversion", "desc" = "Converting the crew, cyborgs, and very walls to your cause."), \
+	)
+	data["rec_text"] = recollection()
+	data["rec_section"] = GLOB.ratvar_awakens ? "" : get_recollection_text(recollection_category)
+	data["rec_binds"] = GLOB.ratvar_awakens ? "" : get_recollection_quickbinds()
 	return data
 
 /obj/item/clockwork/slab/ui_act(action, params)

code/modules/reagents/chemistry/machinery/chem_heater.dm

@@ -103,7 +103,7 @@
 										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, "ChemHeater", name, 275, 400, master_ui, state)
+		ui = new(user, src, ui_key, "ChemHeater", name, 280, 400, master_ui, state)
 		ui.open()
 
 /obj/machinery/chem_heater/ui_data()

tgui/packages/tgui/interfaces/ChemHeater.js

@@ -62,7 +62,7 @@ export const ChemHeater = (props, context) => {
             <Fragment>
               <Box inline color="label" mr={2}>
                 {beakerCurrentVolume} / {beakerMaxVolume} units,
-                {data.beakerCurrentpH} pH
+                {data.currentpH} pH
               </Box>
               <Button
                 icon="eject"

tgui/packages/tgui/interfaces/ClockworkSlab.js

@@ -1,165 +1,124 @@
-import { Fragment } from 'inferno';
 import { useBackend } from '../backend';
-import { Button, LabeledList, Section, Tabs, Input } from '../components';
+import { Box, Section, LabeledList, Button, ProgressBar } from '../components';
+import { Fragment } from 'inferno';
+import { Window } from '../layouts';
 
+export const Sleeper = (props, context) => {
+  const { act, data } = useBackend(context);
 
-export const ClockworkSlab = props => {
-  const { act, data } = useBackend(props);
   const {
-    recollection,
-    rec_text,
-    recollection_categories,
-    rec_section,
-    rec_binds,
+    open,
+    occupant = {},
+    occupied,
   } = data;
 
+  const preSortChems = data.chems || [];
+  const chems = preSortChems.sort((a, b) => {
+    const descA = a.name.toLowerCase();
+    const descB = b.name.toLowerCase();
+    if (descA < descB) {
+      return -1;
+    }
+    if (descA > descB) {
+      return 1;
+    }
+    return 0;
+  });
+
+  const damageTypes = [
+    {
+      label: 'Brute',
+      type: 'bruteLoss',
+    },
+    {
+      label: 'Burn',
+      type: 'fireLoss',
+    },
+    {
+      label: 'Toxin',
+      type: 'toxLoss',
+    },
+    {
+      label: 'Oxygen',
+      type: 'oxyLoss',
+    },
+  ];
+
   return (
-    <Fragment theme="syndicate">
-      <Section>
-        <Button
-          content={recollection ? "Recital" : "Recollection"}
-          onClick={() => act('toggle')}
-        />
-      </Section>
-      {!!recollection && (
-        <Section title="Recollection">
-          {rec_text}
-          {recollection_categories.map(categories => {
-            return (
-              <Fragment key={categories.name} >
-                <br />
-                <Button
-                  content={`${categories.name} - ${categories.desc}`}
-                  onClick={() => act('rec_category', {
-                    "category": categories.name,
-                  })} />
-              </Fragment>
-            );
-          })}
-          {rec_section}
-          {rec_binds}
+    <Window>
+      <Window.Content>
+        <Section
+          title={occupant.name ? occupant.name : 'No Occupant'}
+          minHeight="210px"
+          buttons={!!occupant.stat && (
+            <Box
+              inline
+              bold
+              color={occupant.statstate}>
+              {occupant.stat}
+            </Box>
+          )}>
+          {!!occupied && (
+            <Fragment>
+              <ProgressBar
+                value={occupant.health}
+                minValue={occupant.minHealth}
+                maxValue={occupant.maxHealth}
+                ranges={{
+                  good: [50, Infinity],
+                  average: [0, 50],
+                  bad: [-Infinity, 0],
+                }} />
+              <Box mt={1} />
+              <LabeledList>
+                {damageTypes.map(type => (
+                  <LabeledList.Item
+                    key={type.type}
+                    label={type.label}>
+                    <ProgressBar
+                      value={occupant[type.type]}
+                      minValue={0}
+                      maxValue={occupant.maxHealth}
+                      color="bad" />
+                  </LabeledList.Item>
+                ))}
+                <LabeledList.Item
+                  label="Cells"
+                  color={occupant.cloneLoss ? 'bad' : 'good'}>
+                  {occupant.cloneLoss ? 'Damaged' : 'Healthy'}
+                </LabeledList.Item>
+                <LabeledList.Item
+                  label="Brain"
+                  color={occupant.brainLoss ? 'bad' : 'good'}>
+                  {occupant.brainLoss ? 'Abnormal' : 'Healthy'}
+                </LabeledList.Item>
+              </LabeledList>
+            </Fragment>
+          )}
         </Section>
-      )}
-      {recollection && (
-        <Fragment>
-          <Section title="Power">
-            {data.power}
-          </Section>
-          <Section title="Recital">
-            {data.tier_info}
-            {data.scripturecolors}
-            <Tabs>
-              <Tabs.Tab
-                key="driver"
-                label="Driver">
-                {() => (
-                  <Section>
-                    <LabeledList>
-                      {data.scripture.driver.map(script => {
-                        return (
-                          <LabeledList.Item
-                            key={script.name}
-                            label={script.name}
-                            buttons={(
-                              <Fragment>
-                                <Button
-                                  content={`Recite (${script.required} W)`}
-                                  onClick={() => act('recite', {
-                                    'category': script.name,
-                                  })} />
-                                <Button
-                                  content={
-                                    script.quickbind
-                                      ? `Unbind ${script.quickbind}`
-                                      : 'Quickbind'
-                                  }
-                                  onClick={() => act('bind', {
-                                    'category': script.name,
-                                  })} />
-                              </Fragment>
-                            )}>
-                            {`${script.descname} ${script.invokers}`}
-                          </LabeledList.Item>
-                        );
-                      })}
-                    </LabeledList>
-                  </Section>
-                )}
-              </Tabs.Tab>
-              <Tabs.Tab
-                key="script"
-                label="Script">
-                {() => (
-                  <Section>
-                    <LabeledList>
-                      {data.scripture.script.map(script => {
-                        return (
-                          <LabeledList.Item
-                            key={script.name}
-                            label={script.name}
-                            buttons={(
-                              <Fragment>
-                                <Button
-                                  content={`Recite (${script.required} W)`}
-                                  onClick={() => act('recite', {
-                                    'category': script.name,
-                                  })} />
-                                <Button
-                                  content={script.quickbind
-                                    ? `Unbind ${script.quickbind}`
-                                    : 'Quickbind'}
-                                  onClick={() => act('bind', {
-                                    'category': script.name,
-                                  })} />
-                              </Fragment>
-                            )}>
-                            {`${script.descname} ${script.invokers}`}
-                          </LabeledList.Item>
-                        );
-                      })}
-                    </LabeledList>
-                  </Section>
-                )}
-              </Tabs.Tab>
-              <Tabs.Tab
-                key="application"
-                label="Application">
-                {() => (
-                  <Section>
-                    <LabeledList>
-                      {data.scripture.application.map(script => {
-                        return (
-                          <LabeledList.Item
-                            key={script.name}
-                            label={script.name}
-                            buttons={(
-                              <Fragment>
-                                <Button
-                                  content={`Recite (${script.required} W)`}
-                                  onClick={() => act('recite', {
-                                    'category': script.name,
-                                  })} />
-                                <Button
-                                  content={script.quickbind
-                                    ? `Unbind ${script.quickbind}`
-                                    : 'Quickbind'}
-                                  onClick={() => act('bind', {
-                                    'category': script.name,
-                                  })} />
-                              </Fragment>
-                            )}>
-                            {`${script.descname} ${script.invokers}`}
-                          </LabeledList.Item>
-                        );
-                      })}
-                    </LabeledList>
-                  </Section>
-                )}
-              </Tabs.Tab>
-            </Tabs>
-          </Section>
-        </Fragment>
-      )}
-    </Fragment>
+        <Section
+          title="Medicines"
+          minHeight="205px"
+          buttons={(
+            <Button
+              icon={open ? 'door-open' : 'door-closed'}
+              content={open ? 'Open' : 'Closed'}
+              onClick={() => act('door')} />
+          )}>
+          {chems.map(chem => (
+            <Button
+              key={chem.name}
+              icon="flask"
+              content={chem.name}
+              disabled={!(occupied && chem.allowed)}
+              width="140px"
+              onClick={() => act('inject', {
+                chem: chem.id,
+              })}
+            />
+          ))}
+        </Section>
+      </Window.Content>
+    </Window>
   );
 };

tgui/packages/tgui/interfaces/Sleeper.js

@@ -1,10 +1,10 @@
 import { useBackend } from '../backend';
-import { Box, Section, LabeledList, Button, ProgressBar, Flex, AnimatedNumber } from '../components';
+import { Box, Section, LabeledList, Button, ProgressBar, AnimatedNumber } from '../components';
 import { Fragment } from 'inferno';
+import { Window } from '../layouts';
 
 export const Sleeper = props => {
   const { act, data } = useBackend(props);
-
   const {
     occupied,
     open,
@@ -56,128 +56,129 @@ export const Sleeper = props => {
   ];
 
   return (
-    <Fragment>
-      <Section
-        title={occupant.name
-          ? occupant.name
-          : 'No Occupant'}
-        minHeight="210px"
-        buttons={!!occupant.stat && (
-          <Box
-            inline
-            bold
-            color={occupant.statstate}>
-            {occupant.stat}
-          </Box>
-        )}>
-        {!!occupied && (
-          <Fragment>
-            <ProgressBar
-              value={occupant.health}
-              minValue={occupant.minHealth}
-              maxValue={occupant.maxHealth}
-              ranges={{
-                good: [50, Infinity],
-                average: [0, 50],
-                bad: [-Infinity, 0],
-              }} />
-            <Box mt={1} />
-            <LabeledList>
-              {damageTypes.map(type => (
-                <LabeledList.Item
-                  key={type.type}
-                  label={type.label}>
-                  <ProgressBar
-                    value={occupant[type.type]}
-                    minValue={0}
-                    maxValue={occupant.maxHealth}
-                    color="bad" />
-                </LabeledList.Item>
-              ))}
-              <LabeledList.Item
-                label={'Blood'}>
-                <ProgressBar
-                  value={data.blood_levels/100}
-                  color="bad">
-                  <AnimatedNumber value={data.blood_levels} />
-                </ProgressBar>
-                {data.blood_status}
-              </LabeledList.Item>
-              <LabeledList.Item
-                label="Cells"
-                color={occupant.cloneLoss ? 'bad' : 'good'}>
-                {occupant.cloneLoss ? 'Damaged' : 'Healthy'}
-              </LabeledList.Item>
-              <LabeledList.Item
-                label="Brain"
-                color={occupant.brainLoss ? 'bad' : 'good'}>
-                {occupant.brainLoss ? 'Abnormal' : 'Healthy'}
-              </LabeledList.Item>
-            </LabeledList>
-          </Fragment>
-        )}
-      </Section>
-      <Section title="Chemical Analysis">
-        <LabeledList.Item label="Chemical Contents">
-          {data.chemical_list.map(specificChem => (
+    <Window>
+      <Window.Content>
+        <Section
+          title={occupant.name ? occupant.name : 'No Occupant'}
+          minHeight="210px"
+          buttons={!!occupant.stat && (
             <Box
-              key={specificChem.id}
-              color="good" >
-              {specificChem.volume} units of {specificChem.name}
+              inline
+              bold
+              color={occupant.statstate}>
+              {occupant.stat}
             </Box>
-          ),
+          )}>
+          {!!occupied && (
+            <Fragment>
+              <ProgressBar
+                value={occupant.health}
+                minValue={occupant.minHealth}
+                maxValue={occupant.maxHealth}
+                ranges={{
+                  good: [50, Infinity],
+                  average: [0, 50],
+                  bad: [-Infinity, 0],
+                }} />
+              <Box mt={1} />
+              <LabeledList>
+                {damageTypes.map(type => (
+                  <LabeledList.Item
+                    key={type.type}
+                    label={type.label}>
+                    <ProgressBar
+                      value={occupant[type.type]}
+                      minValue={0}
+                      maxValue={occupant.maxHealth}
+                      color="bad" />
+                  </LabeledList.Item>
+                ))}
+                <LabeledList.Item
+                  label={'Blood'}>
+                  <ProgressBar
+                    value={data.blood_levels/100}
+                    color="bad">
+                    <AnimatedNumber value={data.blood_levels} />
+                  </ProgressBar>
+                  {data.blood_status}
+                </LabeledList.Item>
+                <LabeledList.Item
+                  label="Cells"
+                  color={occupant.cloneLoss ? 'bad' : 'good'}>
+                  {occupant.cloneLoss ? 'Damaged' : 'Healthy'}
+                </LabeledList.Item>
+                <LabeledList.Item
+                  label="Brain"
+                  color={occupant.brainLoss ? 'bad' : 'good'}>
+                  {occupant.brainLoss ? 'Abnormal' : 'Healthy'}
+                </LabeledList.Item>
+              </LabeledList>
+            </Fragment>
           )}
-        </LabeledList.Item>
-      </Section>
-      <Section
-        title="Inject Chemicals"
-        minHeight="105px"
-        buttons={(
-          <Button
-            icon={open ? 'door-open' : 'door-closed'}
-            content={open ? 'Open' : 'Closed'}
-            onClick={() => act('door')} />
-        )}>
-        {chems.map(chem => (
-          <Button
-            key={chem.name}
-            icon="flask"
-            content={chem.name}
-            disabled={!(occupied && chem.allowed)}
-            width="140px"
-            onClick={() => act('inject', {
-              chem: chem.id,
-            })}
-          />
-        ))}
-      </Section>
-      <Section
-        title="Synthesize Chemicals">
-        {synthchems.map(chem => (
-          <Button
-            key={chem.name}
-            content={chem.name}
-            width="140px"
-            onClick={() => act('synth', {
-              chem: chem.id,
-            })}
-          />
-        ))}
-      </Section>
-      <Section
-        title="Purge Chemicals">
-        {chems.map(chem => (
-          <Button
-            key={chem.name}
-            content={chem.name}
-            disabled={!(chem.allowed)}
-            width="140px"
-            onClick={() => act('purge', {
-              chem: chem.id,
-            })}
-          />
-        ))}
-      </Section>
-    </Fragment>
+        </Section>
+        <Section title="Chemical Analysis">
+          <LabeledList.Item label="Chemical Contents">
+            {data.chemical_list.map(specificChem => (
+              <Box
+                key={specificChem.id}
+                color="good" >
+                {specificChem.volume} units of {specificChem.name}
+              </Box>
+            ),
+            )}
+          </LabeledList.Item>
+        </Section>
+        <Section
+          title="Inject Chemicals"
+          minHeight="105px"
+          buttons={(
+            <Button
+              icon={open ? 'door-open' : 'door-closed'}
+              content={open ? 'Open' : 'Closed'}
+              onClick={() => act('door')} />
+          )}>
+          {chems.map(chem => (
+            <Button
+              key={chem.name}
+              icon="flask"
+              content={chem.name}
+              disabled={!(occupied && chem.allowed)}
+              width="140px"
+              onClick={() => act('inject', {
+                chem: chem.id,
+              })}
+            />
+          ))}
+        </Section>
+        <Section
+          title="Synthesize Chemicals">
+          {synthchems.map(chem => (
+            <Button
+              key={chem.name}
+              content={chem.name}
+              width="140px"
+              onClick={() => act('synth', {
+                chem: chem.id,
+              })}
+            />
+          ))}
+        </Section>
+        <Section
+          title="Purge Chemicals">
+          {chems.map(chem => (
+            <Button
+              key={chem.name}
+              content={chem.name}
+              disabled={!(chem.allowed)}
+              width="140px"
+              onClick={() => act('purge', {
+                chem: chem.id,
+              })}
+            />
+          ))}
+        </Section>
+      </Window.Content>
+    </Window>
+
   );
 };