fixing chem, color mate and vore panel ui styles and moving them to chomp folder (#7715)

tgui/packages/tgui/interfaces/chompstation/ChemMaster.jsx

@@ -0,0 +1,473 @@
+import { Fragment } from 'react';
+
+import { useBackend } from '../../backend';
+import {
+  Box,
+  Button,
+  Flex,
+  Icon,
+  LabeledList,
+  Section,
+} from '../../components';
+import { Window } from '../../layouts';
+import { BeakerContents } from '.././common/BeakerContents';
+import {
+  ComplexModal,
+  modalOpen,
+  modalRegisterBodyOverride,
+} from '.././common/ComplexModal';
+
+const transferAmounts = [1, 5, 10, 30, 60];
+const bottleStyles = [
+  'bottle.png',
+  'small_bottle.png',
+  'wide_bottle.png',
+  'round_bottle.png',
+  'reagent_bottle.png',
+];
+
+const analyzeModalBodyOverride = (modal) => {
+  const { act, data } = useBackend();
+  const result = modal.args.analysis;
+  return (
+    <Section
+      level={2}
+      m="-1rem"
+      pb="1rem"
+      title={data.condi ? 'Condiment Analysis' : 'Reagent Analysis'}
+    >
+      <Box mx="0.5rem">
+        <LabeledList>
+          <LabeledList.Item label="Name">{result.name}</LabeledList.Item>
+          <LabeledList.Item label="Description">
+            {(result.desc || '').length > 0 ? result.desc : 'N/A'}
+          </LabeledList.Item>
+          {result.blood_type && (
+            <>
+              <LabeledList.Item label="Blood type">
+                {result.blood_type}
+              </LabeledList.Item>
+              <LabeledList.Item
+                label="Blood DNA"
+                className="LabeledList__breakContents"
+              >
+                {result.blood_dna}
+              </LabeledList.Item>
+            </>
+          )}
+          {!data.condi && (
+            <Button
+              icon={data.printing ? 'spinner' : 'print'}
+              disabled={data.printing}
+              iconSpin={!!data.printing}
+              ml="0.5rem"
+              content="Print"
+              onClick={() =>
+                act('print', {
+                  idx: result.idx,
+                  beaker: modal.args.beaker,
+                })
+              }
+            />
+          )}
+        </LabeledList>
+      </Box>
+    </Section>
+  );
+};
+
+export const ChemMaster = (props) => {
+  const { data } = useBackend();
+  const {
+    condi,
+    beaker,
+    beaker_reagents = [],
+    buffer_reagents = [],
+    mode,
+  } = data;
+  return (
+    <Window width={575} height={500}>
+      <ComplexModal />
+      <Window.Content scrollable className="Layout__content--flexColumn">
+        <ChemMasterBeaker
+          beaker={beaker}
+          beakerReagents={beaker_reagents}
+          bufferNonEmpty={buffer_reagents.length > 0}
+        />
+        <ChemMasterBuffer mode={mode} bufferReagents={buffer_reagents} />
+        <ChemMasterProduction
+          isCondiment={condi}
+          bufferNonEmpty={buffer_reagents.length > 0}
+        />
+        <ChemMasterCustomization />
+        {/* CHOMPEdit - Enable customizing pill bottle type */}
+      </Window.Content>
+    </Window>
+  );
+};
+
+const ChemMasterBeaker = (props) => {
+  const { act, data } = useBackend();
+  const { beaker, beakerReagents, bufferNonEmpty } = props;
+
+  let headerButton = bufferNonEmpty ? (
+    <Button.Confirm
+      icon="eject"
+      disabled={!beaker}
+      content="Eject and Clear Buffer"
+      onClick={() => act('eject')}
+    />
+  ) : (
+    <Button
+      icon="eject"
+      disabled={!beaker}
+      content="Eject and Clear Buffer"
+      onClick={() => act('eject')}
+    />
+  );
+
+  return (
+    <Section title="Beaker" buttons={headerButton}>
+      {beaker ? (
+        <BeakerContents
+          beakerLoaded
+          beakerContents={beakerReagents}
+          buttons={(chemical, i) => (
+            <Box mb={i < beakerReagents.length - 1 && '2px'}>
+              <Button
+                content="Analyze"
+                mb="0"
+                onClick={() =>
+                  modalOpen('analyze', {
+                    idx: i + 1,
+                    beaker: 1,
+                  })
+                }
+              />
+              {transferAmounts.map((am, j) => (
+                <Button
+                  key={j}
+                  content={am}
+                  mb="0"
+                  onClick={() =>
+                    act('add', {
+                      id: chemical.id,
+                      amount: am,
+                    })
+                  }
+                />
+              ))}
+              <Button
+                content="All"
+                mb="0"
+                onClick={() =>
+                  act('add', {
+                    id: chemical.id,
+                    amount: chemical.volume,
+                  })
+                }
+              />
+              <Button
+                content="Custom.."
+                mb="0"
+                onClick={() =>
+                  modalOpen('addcustom', {
+                    id: chemical.id,
+                  })
+                }
+              />
+            </Box>
+          )}
+        />
+      ) : (
+        <Box color="label">No beaker loaded.</Box>
+      )}
+    </Section>
+  );
+};
+
+const ChemMasterBuffer = (props) => {
+  const { act } = useBackend();
+  const { mode, bufferReagents = [] } = props;
+  return (
+    <Section
+      title="Buffer"
+      buttons={
+        <Box color="label">
+          Transferring to&nbsp;
+          <Button
+            icon={mode ? 'flask' : 'trash'}
+            color={!mode && 'bad'}
+            content={mode ? 'Beaker' : 'Disposal'}
+            onClick={() => act('toggle')}
+          />
+        </Box>
+      }
+    >
+      {bufferReagents.length > 0 ? (
+        <BeakerContents
+          beakerLoaded
+          beakerContents={bufferReagents}
+          buttons={(chemical, i) => (
+            <Box mb={i < bufferReagents.length - 1 && '2px'}>
+              <Button
+                content="Analyze"
+                mb="0"
+                onClick={() =>
+                  modalOpen('analyze', {
+                    idx: i + 1,
+                    beaker: 0,
+                  })
+                }
+              />
+              {transferAmounts.map((am, i) => (
+                <Button
+                  key={i}
+                  content={am}
+                  mb="0"
+                  onClick={() =>
+                    act('remove', {
+                      id: chemical.id,
+                      amount: am,
+                    })
+                  }
+                />
+              ))}
+              <Button
+                content="All"
+                mb="0"
+                onClick={() =>
+                  act('remove', {
+                    id: chemical.id,
+                    amount: chemical.volume,
+                  })
+                }
+              />
+              <Button
+                content="Custom.."
+                mb="0"
+                onClick={() =>
+                  modalOpen('removecustom', {
+                    id: chemical.id,
+                  })
+                }
+              />
+            </Box>
+          )}
+        />
+      ) : (
+        <Box color="label">Buffer is empty.</Box>
+      )}
+    </Section>
+  );
+};
+
+const ChemMasterProduction = (props) => {
+  const { act, data } = useBackend();
+  if (!props.bufferNonEmpty) {
+    return (
+      <Section
+        title="Production"
+        flexGrow="1"
+        buttons={
+          <Button
+            disabled={!data.loaded_pill_bottle}
+            icon="eject"
+            content={
+              data.loaded_pill_bottle
+                ? data.loaded_pill_bottle_name +
+                  ' (' +
+                  data.loaded_pill_bottle_contents_len +
+                  '/' +
+                  data.loaded_pill_bottle_storage_slots +
+                  ')'
+                : 'No pill bottle loaded'
+            }
+            mb="0.5rem"
+            onClick={() => act('ejectp')}
+          />
+        }
+      >
+        <Flex height="100%">
+          <Flex.Item grow="1" align="center" textAlign="center" color="label">
+            <Icon name="tint-slash" mt="0.5rem" mb="0.5rem" size="5" />
+            <br />
+            Buffer is empty.
+          </Flex.Item>
+        </Flex>
+      </Section>
+    );
+  }
+
+  return (
+    <Section
+      title="Production"
+      flexGrow="1"
+      buttons={
+        <Button
+          disabled={!data.loaded_pill_bottle}
+          icon="eject"
+          content={
+            data.loaded_pill_bottle
+              ? data.loaded_pill_bottle_name +
+                ' (' +
+                data.loaded_pill_bottle_contents_len +
+                '/' +
+                data.loaded_pill_bottle_storage_slots +
+                ')'
+              : 'No pill bottle loaded'
+          }
+          mb="0.5rem"
+          onClick={() => act('ejectp')}
+        />
+      }
+    >
+      {!props.isCondiment ? (
+        <ChemMasterProductionChemical />
+      ) : (
+        <ChemMasterProductionCondiment />
+      )}
+    </Section>
+  );
+};
+
+const ChemMasterProductionChemical = (props) => {
+  const { act, data } = useBackend();
+  return (
+    <LabeledList>
+      <LabeledList.Item label="Pills">
+        <Button
+          icon="circle"
+          content="One (60u max)"
+          mr="0.5rem"
+          onClick={() => modalOpen('create_pill')}
+        />
+        <Button
+          icon="plus-circle"
+          content="Multiple"
+          mb="0.5rem"
+          onClick={() => modalOpen('create_pill_multiple')}
+        />
+        <br />
+        <Button onClick={() => modalOpen('change_pill_style')}>
+          <div
+            style={{
+              display: 'inline-block',
+              width: '16px;',
+              height: '16px',
+              verticalAlign: 'middle;',
+              background: 'url(pill' + data.pillsprite + '.png)',
+              backgroundSize: '200%',
+              backgroundPosition: 'left -10px bottom -6px',
+            }}
+          />
+          Style
+        </Button>
+      </LabeledList.Item>
+      <LabeledList.Item label="Patches">
+        <Button
+          icon="square"
+          content="One (60u max)"
+          mr="0.5rem"
+          onClick={() => modalOpen('create_patch')}
+        />
+        <Button
+          icon="plus-square"
+          content="Multiple"
+          onClick={() => modalOpen('create_patch_multiple')}
+        />
+      </LabeledList.Item>
+      <LabeledList.Item label="Bottle">
+        <Button
+          icon="wine-bottle"
+          content="Create bottle (60u max)"
+          mr="0.5rem"
+          mb="0.5rem"
+          onClick={() => modalOpen('create_bottle')}
+        />
+        <Button
+          icon="plus-square"
+          content="Multiple"
+          onClick={() => modalOpen('create_bottle_multiple')}
+        />
+        <br />
+        <Button mb="0.5rem" onClick={() => modalOpen('change_bottle_style')}>
+          <div
+            style={{
+              display: 'inline-block',
+              width: '16px',
+              height: '16px',
+              verticalAlign: 'middle',
+              background: 'url(bottle-' + data.bottlesprite + '.png)',
+              backgroundSize: '200%',
+              backgroundPosition: 'left -10px bottom -6px',
+            }}
+          />
+          Style
+        </Button>
+      </LabeledList.Item>
+    </LabeledList>
+  );
+};
+
+const ChemMasterProductionCondiment = (props) => {
+  const { act } = useBackend();
+  return (
+    <>
+      <Button
+        icon="box"
+        content="Create condiment pack (10u max)"
+        mb="0.5rem"
+        onClick={() => modalOpen('create_condi_pack')}
+      />
+      <br />
+      <Button
+        icon="wine-bottle"
+        content="Create bottle (60u max)"
+        mb="0"
+        onClick={() => act('create_condi_bottle')}
+      />
+    </>
+  );
+};
+
+// CHOMPEdit Start - Enable customizing pill bottle type
+const ChemMasterCustomization = (props) => {
+  const { act, data } = useBackend();
+  if (!data.loaded_pill_bottle) {
+    return (
+      <Section title="Pill Bottle Customization">
+        <Box color="label">None loaded.</Box>
+      </Section>
+    );
+  }
+
+  return (
+    <Section title="Pill Bottle Customization">
+      <Button
+        disabled={!data.loaded_pill_bottle}
+        content="Customize Bottle Color"
+        onClick={() => modalOpen(context, 'change_pill_bottle_style')}
+      />
+      <Button
+        disabled={!data.loaded_pill_bottle}
+        icon="eject"
+        content={
+          data.loaded_pill_bottle
+            ? data.loaded_pill_bottle_name +
+              ' (' +
+              data.loaded_pill_bottle_contents_len +
+              '/' +
+              data.loaded_pill_bottle_storage_slots +
+              ')'
+            : 'None loaded'
+        }
+        mb="0.5rem"
+        onClick={() => act('ejectp')}
+      />
+    </Section>
+  );
+};
+// CHOMPEdit End
+
+modalRegisterBodyOverride('analyze', analyzeModalBodyOverride);

tgui/packages/tgui/interfaces/chompstation/ChemSynthesizer.jsx

@@ -1,8 +1,8 @@
-import { useBackend } from '../backend';
-import { Box, Button, Flex, LabeledList, Section } from '../components';
-import { Window } from '../layouts';
-import { BeakerContents } from './common/BeakerContents';
-import { ComplexModal, modalOpen } from './common/ComplexModal';
+import { useBackend } from '../../backend';
+import { Box, Button, Flex, LabeledList, Section } from '../../components';
+import { Window } from '../../layouts';
+import { BeakerContents } from '.././common/BeakerContents';
+import { ComplexModal, modalOpen } from '.././common/ComplexModal';
 
 export const ChemSynthesizer = (props, context) => {
   return (
@@ -75,7 +75,7 @@ const ChemSynthesizerQueueRecipes = (props, context) => {
               queue.map((item) => {
                 if (item.index === 1 && !!busy) {
                   return (
-                    <LabeledList.Item label={item.name} labelColor="bad">
+                    <LabeledList.Item key="" label={item.name} labelColor="bad">
                       {
                         <Box>
                           <Button disabled icon="trash">
@@ -87,7 +87,7 @@ const ChemSynthesizerQueueRecipes = (props, context) => {
                   );
                 }
                 return (
-                  <LabeledList.Item label={item.name}>
+                  <LabeledList.Item key="" label={item.name}>
                     <Button
                       icon="trash"
                       onClick={() =>
@@ -121,7 +121,7 @@ const ChemSynthesizerQueueRecipes = (props, context) => {
             {(recipes.length &&
               recipes.map((item) => {
                 return (
-                  <LabeledList.Item label={item.name}>
+                  <LabeledList.Item key="" label={item.name}>
                     <Button
                       icon="plus"
                       tooltip="Add to Queue"
@@ -310,17 +310,15 @@ const ChemSynthesizerSettings = (props, context) => {
               />
               <Button onClick={() => modalOpen(context, 'change_bottle_style')}>
                 <div
-                  style={
-                    'display: inline-block;' +
-                    'width: 16px;' +
-                    'height: 16px;' +
-                    'vertical-align: middle;' +
-                    'background: url(bottle-' +
-                    data.bottle_icon +
-                    '.png);' +
-                    'background-size: 200%;' +
-                    'background-position: left -10px bottom -6px;'
-                  }
+                  style={{
+                    display: 'inline-block',
+                    width: '16px',
+                    height: '16px',
+                    verticalAlign: 'middle',
+                    background: 'url(bottle-' + data.bottle_icon + '.png)',
+                    backgroundSize: '200%',
+                    backgroundPosition: 'left -10px bottom -6px',
+                  }}
                 />
                 Style
               </Button>
@@ -335,17 +333,15 @@ const ChemSynthesizerSettings = (props, context) => {
               />
               <Button onClick={() => modalOpen(context, 'change_pill_style')}>
                 <div
-                  style={
-                    'display: inline-block;' +
-                    'width: 16px;' +
-                    'height: 16px;' +
-                    'vertical-align: middle;' +
-                    'background: url(pill' +
-                    data.pill_icon +
-                    '.png);' +
-                    'background-size: 200%;' +
-                    'background-position: left -10px bottom -6px;'
-                  }
+                  style={{
+                    display: 'inline-block',
+                    width: '16px',
+                    height: '16px',
+                    verticalAlign: 'middle',
+                    background: 'url(pill' + data.pill_icon + '.png)',
+                    backgroundSize: '200%',
+                    backgroundPosition: 'left -10px bottom -6px',
+                  }}
                 />
                 Style
               </Button>
@@ -360,17 +356,15 @@ const ChemSynthesizerSettings = (props, context) => {
               />
               <Button onClick={() => modalOpen(context, 'change_patch_style')}>
                 <div
-                  style={
-                    'display: inline-block;' +
-                    'width: 16px;' +
-                    'height: 16px;' +
-                    'vertical-align: middle;' +
-                    'background: url(patch' +
-                    data.patch_icon +
-                    '.png);' +
-                    'background-size: 200%;' +
-                    'background-position: left -10px bottom -6px;'
-                  }
+                  style={{
+                    display: 'inline-block',
+                    width: '16px',
+                    height: '16px',
+                    verticalAlign: 'middle',
+                    background: 'url(patch' + data.patch_icon + '.png)',
+                    backgroundSize: '200%',
+                    backgroundPosition: 'left -10px bottom -6px',
+                  }}
                 />
                 Style
               </Button>

tgui/packages/tgui/interfaces/chompstation/ColorMate.jsx

@@ -1,4 +1,6 @@
-import { useBackend } from '../backend';
+import { toFixed } from 'common/math';
+
+import { useBackend } from '../../backend';
 import {
   Button,
   Icon,
@@ -8,8 +10,8 @@ import {
   Slider,
   Table,
   Tabs,
-} from '../components';
-import { Window } from '../layouts';
+} from '../../components';
+import { Window } from '../../layouts';
 
 export const ColorMate = (props, context) => {
   const { act, data } = useBackend(context);
@@ -20,7 +22,7 @@ export const ColorMate = (props, context) => {
       <Window.Content overflow="auto">
         <Section>
           {temp ? <NoticeBox>{temp}</NoticeBox> : null}
-          {Object.keys(item).length ? (
+          {item && Object.keys(item).length ? (
             <>
               <Table>
                 <Table.Cell width="50%">
@@ -146,13 +148,14 @@ export const ColorMateMatrix = (props, context) => {
     <Table>
       <Table.Cell>
         <Table.Row>
-          RR:{' '}
+          RR:
           <NumberInput
             width="50px"
             minValue={-10}
             maxValue={10}
             step={0.01}
             value={matrixcolors.rr}
+            format={(value) => toFixed(value, 2)}
             onChange={(e, value) =>
               act('set_matrix_color', {
                 color: 1,
@@ -162,13 +165,14 @@ export const ColorMateMatrix = (props, context) => {
           />
         </Table.Row>
         <Table.Row>
-          GR:{' '}
+          GR:
           <NumberInput
             width="50px"
             minValue={-10}
             maxValue={10}
             step={0.01}
             value={matrixcolors.gr}
+            format={(value) => toFixed(value, 2)}
             onChange={(e, value) =>
               act('set_matrix_color', {
                 color: 4,
@@ -178,13 +182,14 @@ export const ColorMateMatrix = (props, context) => {
           />
         </Table.Row>
         <Table.Row>
-          BR:{' '}
+          BR:
           <NumberInput
             width="50px"
             minValue={-10}
             maxValue={10}
             step={0.01}
             value={matrixcolors.br}
+            format={(value) => toFixed(value, 2)}
             onChange={(e, value) =>
               act('set_matrix_color', {
                 color: 7,
@@ -196,13 +201,14 @@ export const ColorMateMatrix = (props, context) => {
       </Table.Cell>
       <Table.Cell>
         <Table.Row>
-          RG:{' '}
+          RG:
           <NumberInput
             width="50px"
             minValue={-10}
             maxValue={10}
             step={0.01}
             value={matrixcolors.rg}
+            format={(value) => toFixed(value, 2)}
             onChange={(e, value) =>
               act('set_matrix_color', {
                 color: 2,
@@ -212,13 +218,14 @@ export const ColorMateMatrix = (props, context) => {
           />
         </Table.Row>
         <Table.Row>
-          GG:{' '}
+          GG:
           <NumberInput
             width="50px"
             minValue={-10}
             maxValue={10}
             step={0.01}
             value={matrixcolors.gg}
+            format={(value) => toFixed(value, 2)}
             onChange={(e, value) =>
               act('set_matrix_color', {
                 color: 5,
@@ -228,13 +235,14 @@ export const ColorMateMatrix = (props, context) => {
           />
         </Table.Row>
         <Table.Row>
-          BG:{' '}
+          BG:
           <NumberInput
             width="50px"
             minValue={-10}
             maxValue={10}
             step={0.01}
             value={matrixcolors.bg}
+            format={(value) => toFixed(value, 2)}
             onChange={(e, value) =>
               act('set_matrix_color', {
                 color: 8,
@@ -246,13 +254,14 @@ export const ColorMateMatrix = (props, context) => {
       </Table.Cell>
       <Table.Cell>
         <Table.Row>
-          RB:{' '}
+          RB:
           <NumberInput
             width="50px"
             minValue={-10}
             maxValue={10}
             step={0.01}
             value={matrixcolors.rb}
+            format={(value) => toFixed(value, 2)}
             onChange={(e, value) =>
               act('set_matrix_color', {
                 color: 3,
@@ -262,13 +271,14 @@ export const ColorMateMatrix = (props, context) => {
           />
         </Table.Row>
         <Table.Row>
-          GB:{' '}
+          GB:
           <NumberInput
             width="50px"
             minValue={-10}
             maxValue={10}
             step={0.01}
             value={matrixcolors.gb}
+            format={(value) => toFixed(value, 2)}
             onChange={(e, value) =>
               act('set_matrix_color', {
                 color: 6,
@@ -278,13 +288,14 @@ export const ColorMateMatrix = (props, context) => {
           />
         </Table.Row>
         <Table.Row>
-          BB:{' '}
+          BB:
           <NumberInput
             width="50px"
             minValue={-10}
             maxValue={10}
             step={0.01}
             value={matrixcolors.bb}
+            format={(value) => toFixed(value, 2)}
             onChange={(e, value) =>
               act('set_matrix_color', {
                 color: 9,
@@ -296,13 +307,14 @@ export const ColorMateMatrix = (props, context) => {
       </Table.Cell>
       <Table.Cell>
         <Table.Row>
-          CR:{' '}
+          CR:
           <NumberInput
             width="50px"
             minValue={-10}
             maxValue={10}
             step={0.01}
             value={matrixcolors.cr}
+            format={(value) => toFixed(value, 2)}
             onChange={(e, value) =>
               act('set_matrix_color', {
                 color: 10,
@@ -312,13 +324,14 @@ export const ColorMateMatrix = (props, context) => {
           />
         </Table.Row>
         <Table.Row>
-          CG:{' '}
+          CG:
           <NumberInput
             width="50px"
             minValue={-10}
             maxValue={10}
             step={0.01}
             value={matrixcolors.cg}
+            format={(value) => toFixed(value, 2)}
             onChange={(e, value) =>
               act('set_matrix_color', {
                 color: 11,
@@ -328,13 +341,14 @@ export const ColorMateMatrix = (props, context) => {
           />
         </Table.Row>
         <Table.Row>
-          CB:{' '}
+          CB:
           <NumberInput
             width="50px"
             minValue={-10}
             maxValue={10}
             step={0.01}
             value={matrixcolors.cb}
+            format={(value) => toFixed(value, 2)}
             onChange={(e, value) =>
               act('set_matrix_color', {
                 color: 12,
@@ -384,6 +398,7 @@ export const ColorMateHSV = (props, context) => {
             maxValue={10}
             step={0.01}
             value={buildsat}
+            format={(value) => toFixed(value, 2)}
             onDrag={(e, value) =>
               act('set_sat', {
                 buildsat: value,
@@ -400,6 +415,7 @@ export const ColorMateHSV = (props, context) => {
             maxValue={10}
             step={0.01}
             value={buildval}
+            format={(value) => toFixed(value, 2)}
             onDrag={(e, value) =>
               act('set_val', {
                 buildval: value,

tgui/packages/tgui/interfaces/chompstation/VorePanel.jsx

@@ -1631,8 +1631,8 @@ const VoreSelectedBellyVisuals = (props) => {
           >
             Disabled
           </Button>
-          {Object.keys(possible_fullscreens).map((key) => (
-            <span style={{ width: '256px' }}>
+          {Object.keys(possible_fullscreens).map((key, index) => (
+            <span key={index} style={{ width: '256px' }}>
               <Button
                 key={key}
                 width="256px"