Chemheater and sleeper fixes

tgui/packages/tgui/interfaces/ChemHeater.js

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

tgui/packages/tgui/interfaces/Sleeper.js

@@ -1,15 +1,14 @@
 import { useBackend } from '../backend';
-import { Box, Section, LabeledList, Button, ProgressBar } from '../components';
+import { Box, Section, LabeledList, Button, ProgressBar, Flex, AnimatedNumber } from '../components';
 import { Fragment } from 'inferno';
-import { Window } from '../layouts';
 
-export const Sleeper = (props, context) => {
-  const { act, data } = useBackend(context);
+export const Sleeper = props => {
+  const { act, data } = useBackend(props);
 
   const {
-    open,
-    occupant = {},
     occupied,
+    open,
+    occupant = [],
   } = data;
 
   const preSortChems = data.chems || [];
@@ -24,6 +23,18 @@ export const Sleeper = (props, context) => {
     }
     return 0;
   });
+  const preSortSynth = data.synthchems || [];
+  const synthchems = preSortSynth.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 = [
     {
@@ -45,80 +56,128 @@ export const Sleeper = (props, context) => {
   ];
 
   return (
-    <Window>
-      <Window.Content>
-        <Section
-          title={occupant.name ? occupant.name : 'No Occupant'}
-          minHeight="210px"
-          buttons={!!occupant.stat && (
+    <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 => (
             <Box
-              inline
-              bold
-              color={occupant.statstate}>
-              {occupant.stat}
+              key={specificChem.id}
+              color="good" >
+              {specificChem.volume} units of {specificChem.name}
             </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>
-        <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>
+        </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>
   );
 };