agony

tgui/packages/tgui/interfaces/ClockworkSlab.js

@@ -1,3 +1,11 @@
+/**
+ * @file
+ * @copyright 2021 LetterN (https://github.com/LetterN)
+ * @author Original LetterN (https://github.com/LetterN)
+ * @author Changes arturlang
+ * @license MIT
+ */
+
 import { useBackend, useSharedState } from '../backend';
 import { map } from 'common/collections';
 import { Section, Tabs, Table, Button, Box, NoticeBox, Divider } from '../components';
@@ -15,14 +23,9 @@ export const ClockworkSlab = (props, context) => {
   const { act, data } = useBackend(context);
   const {
     recollection = true,
-    recollection_categories = [],
-    rec_section = null,
-    rec_binds = [],
     scripture = {},
     tier_infos = {},
     power = "0 W",
-    power_unformatted = 0,
-    HONOR_RATVAR = false, // is ratvar free yet?
   } = data;
   const [
     tab,
@@ -42,117 +45,7 @@ export const ClockworkSlab = (props, context) => {
       height={420}>
       <Window.Content scrollable>
         {recollection ? ( // tutorial
-          <Section
-            title="Recollection"
-            buttons={(
-              <Button
-                icon="cog"
-                tooltipPosition={"left"}
-                onClick={() => act('toggle')}>
-                Recital
-              </Button>
-            )}>
-            <Box>
-              {HONOR_RATVAR ? (
-                <Box
-                  as="span"
-                  textColor="#BE8700"
-                  fontSize={2}
-                  bold>
-                  {REC_RATVAR}
-                </Box>
-              ) : (
-                <Fragment>
-                  <Box
-                    as="span"
-                    textColor="#BE8700"
-                    fontSize={2} // 2rem
-                    bold>
-                    Chetr nyy hagehguf naq ubabe Ratvar.
-                  </Box>
-                  <NoticeBox>
-                    NOTICE: This information is out of date.
-                    Read the Ark &amp; You primer in your backpack
-                    or read the wiki page for current info.
-                  </NoticeBox>
-                  <Box>
-                    These pages serve as the archives of Ratvar, the
-                    Clockwork Justiciar. This section of your slab
-                    has information on being as a Servant, advice
-                    for what to do next, and pointers for serving the
-                    master well. You should recommended that you check this
-                    area for help if you get stuck or need guidance on
-                    what to do next.
-                    <br /> <br />
-                    Disclaimer: Many objects, terms, and phrases, such as
-                    Servant, Cache, and Slab, are capitalized like proper
-                    nouns. This is a quirk of the Ratvarian language do
-                    not let it confuse you! You are free to use the names
-                    in pronoun form when speaking in normal languages.
-                  </Box>
-                </Fragment>
-              )}
-            </Box>
-            {recollection_categories?.map(cat => (
-              <Fragment key={cat.name}>
-                <br />
-                <Button
-                  tooltip={cat.desc}
-                  tooltipPosition={'right'}
-                  onClick={() => act('rec_category', {
-                    "category": cat.name,
-                  })} >
-                  {cat.name}
-                </Button>
-              </Fragment>
-            ))}
-            <Divider />
-            <Box>
-              <Box
-                as={'span'}
-                textColor={'#BE8700'}
-                fontSize={2.3}>
-                {rec_section?.title ? (
-                  rec_section.title
-                ) : (
-                  '500 Slab Internal archives not found.'
-                )}
-              </Box>
-              <br /><br />
-              {rec_section?.info ? (
-                rec_section.info
-              ) : (
-                "One of the cogscarabs must've misplaced this section."
-              )}
-            </Box>
-            <br />
-            <Divider />
-            <Box>
-              <Box
-                as={'span'}
-                textColor={'#BE8700'}
-                fontSize={2.3}>
-                Quickbound Scripture
-              </Box>
-              <br />
-              <Box as={'span'} italic>
-                You can have up to five scriptures bound to
-                action buttons for easy use.
-              </Box>
-              <br /><br />
-              {rec_binds?.map(bind => (
-                <Fragment key={bind.name ? bind.name : "none"}>
-                  A <b>Quickbind</b> slot ({rec_binds.indexOf(bind)+1}),
-                  currently set to&nbsp;
-                  <span style={`color:${bind ? bind.color : "#BE8700"}`}>
-                    {bind?.name ? bind.name : "None"}
-                  </span>
-                  .
-                  <br />
-                </Fragment>
-              ))}
-            </Box>
-          </Section>
+          <CSTutorial />
         ) : (
           <Section
             title="Power"
@@ -216,54 +109,7 @@ export const ClockworkSlab = (props, context) => {
               </Box>
               <Divider />
               <Table>
-                {scriptInTab?.map(script => (
-                  <Table.Row
-                    key={script.name}
-                    className="candystripe">
-                    <Table.Cell
-                      italic={!!script.important}
-                      color={script.fontcolor}>
-                      <b>
-                        {script.name}
-                      </b>
-                      {`
-                          ${script.descname}
-                          ${script.invokers || ''}
-                        `}
-                    </Table.Cell>
-                    <Table.Cell
-                      collapsing
-                      textAlign="right">
-                      <Button
-                        disabled={
-                          script.required_unformatted >= power_unformatted
-                        }
-                        tooltip={script.tip}
-                        tooltipPosition={'left'}
-                        onClick={() => act('recite', {
-                          'script': script.type,
-                        })} >
-                        {`Recite ${script.required}`}
-                      </Button>
-                    </Table.Cell>
-                    <Table.Cell
-                      collapsing
-                      textAlign="center">
-                      <Button
-                        fluid
-                        disabled={!script.quickbind}
-                        onClick={() => act('bind', {
-                          'script': script.type,
-                        })}>
-                        content={script.bound ? (
-                          `Unbind ${script.bound}`
-                        ) : (
-                          'Quickbind'
-                        )}
-                      </Button>
-                    </Table.Cell>
-                  </Table.Row>
-                ))}
+                <CSScripture scriptInTab={scriptInTab} />
               </Table>
             </Section>
           </Section>
@@ -272,3 +118,187 @@ export const ClockworkSlab = (props, context) => {
     </Window>
   );
 };
+
+export const CSScripture = (props, context) => {
+  const { act, data } = useBackend(context);
+  const {
+    power_unformatted = 0,
+  } = data;
+  const {
+    scriptInTab,
+  } = props;
+
+  return (
+    scriptInTab?.map(script => (
+      <Table.Row
+        key={script.name}
+        className="candystripe">
+        <Table.Cell
+          italic={!!script.important}
+          color={script.fontcolor}>
+          <b>
+            {script.name}
+          </b>
+          {`
+              ${script.descname}
+              ${script.invokers || ''}
+            `}
+        </Table.Cell>
+        <Table.Cell
+          collapsing
+          textAlign="right">
+          <Button
+            disabled={
+              script.required_unformatted >= power_unformatted
+            }
+            tooltip={script.tip}
+            tooltipPosition={'left'}
+            onClick={() => act('recite', {
+              'script': script.type,
+            })} >
+            {`Recite ${script.required}`}
+          </Button>
+        </Table.Cell>
+        <Table.Cell
+          collapsing
+          textAlign="center">
+          <Button
+            fluid
+            disabled={!script.quickbind}
+            onClick={() => act('bind', {
+              'script': script.type,
+            })}>
+            content={script.bound ? (
+              `Unbind ${script.bound}`
+            ) : (
+              'Quickbind'
+            )}
+          </Button>
+        </Table.Cell>
+      </Table.Row>
+    ))
+  );
+};
+
+export const CSTutorial = (props, context) => {
+  const { act, data } = useBackend(context);
+  const {
+    recollection_categories = [],
+    rec_section = null,
+    rec_binds = [],
+    HONOR_RATVAR = false, // is ratvar free yet?
+  } = data;
+  return (
+    <Section
+      title="Recollection"
+      buttons={(
+        <Button
+          icon="cog"
+          tooltipPosition={"left"}
+          onClick={() => act('toggle')}>
+          Recital
+        </Button>
+      )}>
+      <Box>
+        {HONOR_RATVAR ? (
+          <Box
+            as="span"
+            textColor="#BE8700"
+            fontSize={2}
+            bold>
+            {REC_RATVAR}
+          </Box>
+        ) : (
+          <Fragment>
+            <Box
+              as="span"
+              textColor="#BE8700"
+              fontSize={2} // 2rem
+              bold>
+              Chetr nyy hagehguf naq ubabe Ratvar.
+            </Box>
+            <NoticeBox warning>
+              NOTICE: This information is out of date.
+              Read the Ark &amp; You primer in your backpack
+              or read the wiki page for current info.
+            </NoticeBox>
+            These pages serve as the archives of Ratvar, the
+            Clockwork Justiciar. This section of your slab
+            has information on being as a Servant, advice
+            for what to do next, and pointers for serving the
+            master well. You should recommended that you check this
+            area for help if you get stuck or need guidance on
+            what to do next.
+            <br /> <br />
+            <NoticeBox info>
+              Disclaimer: Many objects, terms, and phrases, such as
+              Servant, Cache, and Slab, are capitalized like proper
+              nouns. This is a quirk of the Ratvarian language do
+              not let it confuse you! You are free to use the names
+              in pronoun form when speaking in normal languages.
+            </NoticeBox>
+          </Fragment>
+        )}
+      </Box>
+      {recollection_categories?.map(cat => (
+        <Fragment key={cat.name}>
+          <br />
+          <Button
+            tooltip={cat.desc}
+            tooltipPosition={'right'}
+            onClick={() => act('rec_category', {
+              "category": cat.name,
+            })} >
+            {cat.name}
+          </Button>
+        </Fragment>
+      ))}
+      <Divider />
+      <Box>
+        <Box
+          as={'span'}
+          textColor={'#BE8700'}
+          fontSize={2.3}>
+          {rec_section?.title ? (
+            rec_section.title
+          ) : (
+            '500 Slab Internal archives not found.'
+          )}
+        </Box>
+        <br /><br />
+        {rec_section?.info ? (
+          rec_section.info
+        ) : (
+          "One of the cogscarabs must've misplaced this section."
+        )}
+      </Box>
+      <br />
+      <Divider />
+      <Box>
+        <Box
+          as={'span'}
+          textColor={'#BE8700'}
+          fontSize={2.3}>
+          Quickbound Scripture
+        </Box>
+        <br />
+        <Box as={'span'} italic>
+          You can have up to five scriptures bound to
+          action buttons for easy use.
+        </Box>
+        <br /><br />
+        {rec_binds?.map(bind => (
+          <Fragment key={bind.name ? bind.name : "none"}>
+            A <b>Quickbind</b> slot ({rec_binds.indexOf(bind)+1}),
+            currently set to&nbsp;
+            <span style={`color:${bind ? bind.color : "#BE8700"}`}>
+              {bind?.name ? bind.name : "None"}
+            </span>
+            .
+            <br />
+          </Fragment>
+        ))}
+      </Box>
+    </Section>
+  );
+};

tgui/packages/tgui/interfaces/CommunicationsConsole.js

@@ -15,7 +15,7 @@ const SWIPE_NEEDED = "SWIPE_NEEDED";
 
 const sortByCreditCost = sortBy(shuttle => shuttle.creditCost);
 
-const AlertButton = (props, context) => {
+export const AlertButton = (props, context) => {
   const { act, data } = useBackend(context);
   const { alertLevelTick, canSetAlertLevel } = data;
   const { alertLevel, setShowAlertLevelConfirm } = props;
@@ -44,7 +44,7 @@ const AlertButton = (props, context) => {
   );
 };
 
-const MessageModal = (props, context) => {
+export const MessageModal = (props, context) => {
   const { data } = useBackend(context);
   const { maxMessageLength } = data;
 
@@ -106,7 +106,7 @@ const MessageModal = (props, context) => {
   );
 };
 
-const NoConnectionModal = () => {
+export const NoConnectionModal = () => {
   return (
     <Dimmer>
       <Flex direction="column" textAlign="center" width="300px">
@@ -140,7 +140,7 @@ const NoConnectionModal = () => {
   );
 };
 
-const PageBuyingShuttle = (props, context) => {
+export const PageBuyingShuttle = (props, context) => {
   const { act, data } = useBackend(context);
 
   return (
@@ -196,7 +196,7 @@ const PageBuyingShuttle = (props, context) => {
   );
 };
 
-const PageChangingStatus = (props, context) => {
+export const PageChangingStatus = (props, context) => {
   const { act, data } = useBackend(context);
   const { maxStatusLineLength } = data;
 
@@ -294,7 +294,7 @@ const PageChangingStatus = (props, context) => {
   );
 };
 
-const PageMain = (props, context) => {
+export const PageMain = (props, context) => {
   const { act, data } = useBackend(context);
   const {
     alertLevel,
@@ -336,9 +336,9 @@ const PageMain = (props, context) => {
   return (
     <Box>
       <Section title="Emergency Shuttle">
-        {
-          shuttleCalled
-            ? <Button.Confirm
+        {shuttleCalled
+          ? (
+            <Button.Confirm
               icon="space-shuttle"
               content="Recall Emergency Shuttle"
               color="bad"
@@ -353,7 +353,8 @@ const PageMain = (props, context) => {
               tooltipPosition="bottom-right"
               onClick={() => act("recallShuttle")}
             />
-            : <Button
+          ) : (
+            <Button
               icon="space-shuttle"
               content="Call Emergency Shuttle"
               disabled={shuttleCanEvacOrFailReason !== 1}
@@ -364,8 +365,7 @@ const PageMain = (props, context) => {
               }
               tooltipPosition="bottom-right"
               onClick={() => setCallingShuttle(true)}
-            />
-        }
+            />)}
 
         {!!shuttleCalledPreviously && (
           shuttleLastCalled && (
@@ -605,7 +605,7 @@ const PageMain = (props, context) => {
   );
 };
 
-const PageMessages = (props, context) => {
+export const PageMessages = (props, context) => {
   const { act, data } = useBackend(context);
   const messages = data.messages || [];