Clockworkslab, skillpanel, telecoms works now

tgui/packages/tgui/interfaces/ClockworkSlab.js

@@ -16,6 +16,7 @@ export const ClockworkSlab = (props, context) => {
     recollection = true,
     recollection_categories = [],
     rec_section = null,
+    rec_binds = [],
     scripture = {}, // this is a {}, not a []
     tier_infos = {},
     power = "0 W",
@@ -88,38 +89,37 @@ export const ClockworkSlab = (props, context) => {
                   </Fragment>
                 )}
               </Box>
-              {!!recollection_categories
-                && recollection_categories.map(cat => {
-                  return (
-                    <Fragment key={cat.name} >
-                      <br />
-                      <Button
-                        content={cat.name}
-                        tooltip={cat.desc}
-                        tooltipPosition={'right'}
-                        onClick={() => act('rec_category', {
-                          "category": cat.name,
-                        })} />
-                    </Fragment>
-                  );
-                })}
+              {recollection_categories?.map(cat => {
+                return (
+                  <Fragment key={cat.name} >
+                    <br />
+                    <Button
+                      content={cat.name}
+                      tooltip={cat.desc}
+                      tooltipPosition={'right'}
+                      onClick={() => act('rec_category', {
+                        "category": cat.name,
+                      })} />
+                  </Fragment>
+                );
+              })}
               <Box>
                 {data.rec_section}
                 <Box
                   as={'span'}
                   textColor={'#BE8700'}
                   fontSize={2.3}>
-                  {rec_section ? (
-                    '500 Server Internal archives not found.'
-                  ) : (
+                  {rec_section?.title ? (
                     rec_section.title
+                  ) : (
+                    '500 Server Internal archives not found.'
                   )}
                 </Box>
                 <br /><br />
-                {rec_section ? (
-                  "One of the cogscarabs must've misplaced this section."
-                ) : (
+                {rec_section?.info ? (
                   rec_section.info
+                ) : (
+                  "One of the cogscarabs must've misplaced this section."
                 )}
               </Box>
               <br />
@@ -136,7 +136,7 @@ export const ClockworkSlab = (props, context) => {
                   action buttons for easy use.
                 </Box>
                 <br /><br />
-                {!!data.rec_binds && data.rec_binds.map(bind => (
+                {rec_binds?.map(bind => (
                   <Fragment key={bind.name}>
                     A <b>Quickbind</b> slot ({data.rec_binds[bind]}),
                     currently set to
@@ -144,7 +144,7 @@ export const ClockworkSlab = (props, context) => {
                       as={'span'}
                       textColor={bind ? bind.color : "#BE8700"}
                       bold>
-                      {bind ? bind.name : "None"}
+                      {bind?.name ? bind.name : "None"}
                     </Box>
                     .
                     <br />

tgui/packages/tgui/interfaces/SkillPanel.js

@@ -1,6 +1,7 @@
 import { Fragment } from 'inferno';
 import { useBackend } from '../backend';
-import { Box, Button, LabeledList, ProgressBar, Section, Window } from '../components';
+import { Window } from '../layouts';
+import { Box, Button, LabeledList, ProgressBar, Section } from '../components';
 
 export const SkillPanel = (props, context) => {
   const { act, data } = useBackend(context);
@@ -31,7 +32,7 @@ export const SkillPanel = (props, context) => {
                 <span style={skillyellow}>
                   {skill.desc}
                   <br />
-                  `Modifiers: ${skill.modifiers}`
+                  Modifiers: {skill.modifiers}
                 </span>
                 <br />
                 {!!skill.level_based && (

tgui/packages/tgui/interfaces/TelecommsInteraction.js

@@ -68,7 +68,7 @@ export const TelecommsInteraction = (props, context) => {
                     color={power ? 'good' : 'bad'}>
                     {prefab ? 'TRUE' : 'FALSE'}
                   </LabeledList.Item>
-                  {isrelay ? (
+                  {!!isrelay && (
                     <Fragment>
                       <LabeledList.Item label="Broadcasting">
                         <Button
@@ -91,8 +91,6 @@ export const TelecommsInteraction = (props, context) => {
                         />
                       </LabeledList.Item>
                     </Fragment>
-                  ) : (
-                    ''
                   )}
                   {!!isbus && (
                     <LabeledList.Item label="Change Signal Frequency">
@@ -210,6 +208,7 @@ export const TelecommsInteraction = (props, context) => {
                       return (
                         <Button
                           key={thing}
+                          icon="times"
                           content={valid ? (
                             <span style={`color: ${valid.color}`}>
                               {`${thing} (${valid.name})`}

tgui/packages/tgui/interfaces/TelecommsLogBrowser.js

@@ -17,9 +17,9 @@ export const TelecommsLogBrowser = (props, context) => {
     setTab,
   ] = useSharedState(context, 'tab', 'servers');
   const operational = (selected && selected.status);
-  if (!operational) { // some sanity checks.
-    setTab("servers");
-  }
+  // if (!operational) { // some sanity checks.
+  //   setTab("servers");
+  // }
   return (
     <Window theme="ntos">
       <Window.Content scrollable>
@@ -102,11 +102,13 @@ export const TelecommsLogBrowser = (props, context) => {
           <Tabs>
             <Tabs.Tab
               selected={tab === "servers"}
+              icon="server"
               onClick={() => setTab("servers")}>
               Servers
             </Tabs.Tab>
             <Tabs.Tab
               disabled={!operational}
+              icon="file"
               selected={tab === "messages"}
               onClick={() => setTab("messages")}>
               Messages

tgui/packages/tgui/interfaces/TelecommsMonitor.js

@@ -19,9 +19,10 @@ export const TelecommsMonitor = (props, context) => {
     setTab,
   ] = useSharedState(context, 'tab', 'network-entity');
   const operational = (selected && selected.status);
-  if (!selected) { // some sanity checks.
-    setTab("network-entity");
-  }
+  // if (!selected) { // some sanity checks.
+  //   setTab("network-entity");
+  // }
+
   return (
     <Window theme="ntos" resizable>
       <Window.Content scrollable>
@@ -93,11 +94,13 @@ export const TelecommsMonitor = (props, context) => {
           <Tabs>
             <Tabs.Tab
               selected={tab === "network-entity"}
+              icon="server"
               onClick={() => setTab("network-entity")}>
               Network Entities
             </Tabs.Tab>
             <Tabs.Tab
               disabled={!selected}
+              icon="tasks"
               selected={tab === "network-stat"}
               onClick={() => setTab("network-stat")}>
               Entity Status

tgui/packages/tgui/interfaces/TelecommsPDALog.js

@@ -1,15 +1,9 @@
 import { Fragment } from 'inferno';
 import { Window } from '../layouts';
 import { useBackend, useSharedState } from '../backend';
-import { act as _act } from '../byond'; // something something image shit (untested)
+import { callByond } from '../byond';
 import { Button, LabeledList, NoticeBox, Section, Tabs, Input } from '../components';
 
-const prioritycolorMap = {
-  'Normal': 'warning',
-  'High': 'bad',
-  'Extreme': 'bad',
-};
-
 // This is the entrypoint, don't mind the others
 export const TelecommsPDALog = (props, context) => {
   const { act, data } = useBackend(context);
@@ -18,6 +12,8 @@ export const TelecommsPDALog = (props, context) => {
     notice = "",
     authenticated = false,
     canhack = false,
+    silicon = false,
+    hack_status = null,
     selected = null,
     servers = [],
   } = data;
@@ -26,41 +22,46 @@ export const TelecommsPDALog = (props, context) => {
     setTab,
   ] = useSharedState(context, 'tab', 'pdalog-servers');
   const valid = (selected && selected.status && authenticated);
-  if (!valid || data.hacking) { // a sanity check.
-    setTab('pdalog-servers');
-  }
-  if (data.hacking) {
+  // if (!valid || data.hacking) { // a sanity check.
+  //   setTab('pdalog-servers');
+  // }
+  if (hack_status) {
     return ( // should have used en -> jp unicode -> other encoding method->utf8
-      <NoticeBox>
-        <b>
-          <h3>
-            {"INTRN@L ACfES VIOL<4F>TIa█ DEtE₡TED! Ree3ARcinG A█ \
-            BAaKUP RdST<53>RE PbINT [0xcff32ca] - PLfASE aAIT"}
-          </h3>
-        </b>
-        <i>
-          {data.borg ? (
-            <Fragment>
-              Brute-forcing for server key. <br />
-              It will take 20 seconds for every character that the password has.
-              <br />
-              In the meantime, this console can reveal your
-              true intentions if you let someone access it.
-              Make sure no humans enter the room during that time.
-            </Fragment>
-          ) : (
-            <Fragment>
-              QnJ1dGUtZm9yY2luZyBmb3Igc2VydmVyIGtleS48YnI+IEl0IHdpbG<br />
-              wgdGFrZSAyMCBzZWNvbmRzIGZvciBldmVyeSBjaGFyYWN0ZXIgdGhh<br />
-              dCB0aGUgcGFzc3dvcmQgaGFzLiBJbiB0aGUgbWVhbnRpbWUsIHRoaX<br />
-              MgY29uc29sZSBjYW4gcmV2ZWFsIHlvdXIgdHJ1ZSBpbnRlbnRpb25z<br />
-              IGlmIHlvdSBsZXQgc29tZW9uZSBhY2Nlc3MgaXQuIE1ha2Ugc3VyZS<br />
-              BubyBodW1hbnMgZW50ZXIgdGhlIHJvb20gZHVyaW5nIHRoYXQgdGltZS4=<br />
-              <br />
-            </Fragment>
-          )}
-        </i>
-      </NoticeBox>
+      <Window theme="ntos" resizable>
+        <Window.Content scrollable>
+          <NoticeBox>
+            <b>
+              <h3>
+                {"INTRN@L ACfES VIOL<4F>TIa█ DEtE₡TED! Ree3ARcinG A█ \
+                BAaKUP RdST<53>RE PbINT [0xcff32ca] - PLfASE aAIT"}
+              </h3>
+            </b>
+            <i>
+              {(silicon && !hack_status.emagging) ? (
+                <Fragment>
+                  Brute-forcing for server key. <br />
+                  It will take 20 seconds for every character that
+                  the password has.
+                  <br />
+                  In the meantime, this console can reveal your
+                  true intentions if you let someone access it.
+                  Make sure no humans enter the room during that time.
+                </Fragment>
+              ) : (
+                <Fragment>
+                  QnJ1dGUtZm9yY2luZyBmb3Igc2VydmVyIGtleS48YnI+IEl0IHdpbG<br />
+                  wgdGFrZSAyMCBzZWNvbmRzIGZvciBldmVyeSBjaGFyYWN0ZXIgdGhh<br />
+                  dCB0aGUgcGFzc3dvcmQgaGFzLiBJbiB0aGUgbWVhbnRpbWUsIHRoaX<br />
+                  MgY29uc29sZSBjYW4gcmV2ZWFsIHlvdXIgdHJ1ZSBpbnRlbnRpb25z<br />
+                  IGlmIHlvdSBsZXQgc29tZW9uZSBhY2Nlc3MgaXQuIE1ha2Ugc3VyZS<br />
+                  BubyBodW1hbnMgZW50ZXIgdGhlIHJvb20gZHVyaW5nIHRoYXQgdGltZS4=
+                  <br /><br />
+                </Fragment>
+              )}
+            </i>
+          </NoticeBox>
+        </Window.Content>
+      </Window>
     );
   }
 
@@ -171,24 +172,28 @@ export const TelecommsPDALog = (props, context) => {
           </Section>
           <Tabs>
             <Tabs.Tab
+              icon="server"
               selected={tab === "pdalog-servers"}
               onClick={() => setTab("pdalog-servers")}>
               Servers
             </Tabs.Tab>
             <Tabs.Tab
               disabled={!valid}
+              icon="file"
               selected={tab === "pdalog-message"}
               onClick={() => setTab("pdalog-message")}>
               Message Logs
             </Tabs.Tab>
             <Tabs.Tab
               disabled={!valid}
+              icon="file"
               selected={tab === "pdalog-reqmsg"}
               onClick={() => setTab("pdalog-reqmsg")}>
               Req. Console Logs
             </Tabs.Tab>
             <Tabs.Tab
               disabled={!valid}
+              icon="server"
               selected={tab === "pdalog-custommsg"}
               onClick={() => setTab("pdalog-custommsg")}>
               Set Admin Message
@@ -223,13 +228,13 @@ export const TelecommsPDALog = (props, context) => {
             </Section>
           ) : (
             <Fragment>
-              {tab === "pdalog-message" && valid && (
+              {tab === "pdalog-message" && (
                 <TeleLogs />
               )}
-              {tab === "pdalog-reqmsg" && valid && (
+              {tab === "pdalog-reqmsg" && (
                 <TeleLogs msgs_log />
               )}
-              {tab === "pdalog-custommsg" && valid && (
+              {tab === "pdalog-custommsg" && (
                 <CustomMsg />
               )}
             </Fragment>
@@ -250,6 +255,11 @@ export const TeleLogs = (props, context) => {
     message_logs = [],
     recon_logs = [],
   } = data;
+  const prioritycolorMap = {
+    'Normal': 'warning',
+    'High': 'bad',
+    'Extreme': 'bad',
+  };
   const log_to_use = (msgs_log ? recon_logs : message_logs) || [];
   return (
     <Section title="Logs">
@@ -269,91 +279,89 @@ export const TeleLogs = (props, context) => {
       <Section
         title="Messages"
         level={2}>
-        {(log_to_use && log_to_use.length) ? (
-          log_to_use.map(message => {
-            return (
-              <Section key={message.ref}>
-                <LabeledList>
-                  <LabeledList.Item
-                    label={msgs_log ? "Sending Dep." : "Sender"}
-                    buttons={(
-                      <Button
-                        content="Delete"
-                        onClick={() => act('del_log', {
-                          'ref': message.ref,
+        {log_to_use?.map(message => {
+          return (
+            <Section key={message.ref}>
+              <LabeledList>
+                <LabeledList.Item
+                  label={msgs_log ? "Sending Dep." : "Sender"}
+                  buttons={(
+                    <Button
+                      content="Delete"
+                      onClick={() => act('del_log', {
+                        'ref': message.ref,
+                      })}
+                    />
+                  )}>
+                  {message.sender}
+                </LabeledList.Item>
+                <LabeledList.Item
+                  label={msgs_log ? "Receiving Dep." : "Recipient"}>
+                  {message.recipient}
+                </LabeledList.Item>
+                <LabeledList.Item
+                  label="Message"
+                  buttons={(
+                    !!message.picture && ( // don't send img over req
+                      <Button // Had to use _act for this.
+                        content="Image"
+                        icon="image"
+                        onClick={() => callByond('', {
+                          'src': message.ref,
+                          'photo': 1,
                         })}
                       />
-                    )}>
-                    {message.sender}
-                  </LabeledList.Item>
-                  <LabeledList.Item
-                    label={msgs_log ? "Receiving Dep." : "Recipient"}>
-                    {message.recipient}
-                  </LabeledList.Item>
-                  <LabeledList.Item
-                    label="Message"
-                    buttons={(
-                      message.image && !msgs_log && ( // don't send img over req
-                        <Button // Had to use _act for this.
-                          content="Image"
-                          onClick={() => _act(message.ref, 'photo')}
-                        />
-                      )
-                    )}>
-                    {message.message}
-                  </LabeledList.Item>
-                  {!!msgs_log && (
-                    <Fragment>
-                      <LabeledList.Item
-                        label="Stamp"
-                        color={message.stamp !== "Unstamped" ? (
-                          'label'
-                        ) : (
-                          'bad'
-                        )}>
-                        {message.stamp !== 'Unstamped' ? (
-                          <b>{message.stamp}</b>
-                        ) : (
-                          message.stamp
-                        )}
-                      </LabeledList.Item>
-                      <LabeledList.Item
-                        label="ID Authentication"
-                        color={message.auth !== "Unauthenticated" ? (
-                          'good'
-                        ) : (
-                          'bad'
-                        )}>
-                        {message.auth}
-                      </LabeledList.Item>
-                      <LabeledList.Item
-                        label="Priority"
-                        color={(message.priority in prioritycolorMap) ? (
-                          prioritycolorMap[message.priority]
-                        ) : (
-                          'good'
-                        )}>
-                        {message.priority === 'Extreme' ? (
-                          <b>!!{message.priority}!!</b>
-                        ) : (
-                          message.priority
-                        )}
-                      </LabeledList.Item>
-                    </Fragment>
-                  )}
-                </LabeledList>
-              </Section>
-            );
-          })
-        ) : (
-          'Error: Logs empty'
-        )}
+                    )
+                  )}>
+                  {message.message}
+                </LabeledList.Item>
+                {!!msgs_log && (
+                  <Fragment>
+                    <LabeledList.Item
+                      label="Stamp"
+                      color={message.stamp !== "Unstamped" ? (
+                        'label'
+                      ) : (
+                        'bad'
+                      )}
+                      bold={message.stamp !== 'Unstamped'}>
+                      {message.stamp}
+                    </LabeledList.Item>
+                    <LabeledList.Item
+                      label="ID Authentication"
+                      color={message.auth !== "Unauthenticated" ? (
+                        'good'
+                      ) : (
+                        'bad'
+                      )}>
+                      {message.auth}
+                    </LabeledList.Item>
+                    <LabeledList.Item
+                      label="Priority"
+                      color={(message.priority in prioritycolorMap) ? (
+                        prioritycolorMap[message.priority]
+                      ) : (
+                        'good'
+                      )}
+                      bold={message.priority === 'Extreme'}>
+                      {message.priority === 'Extreme' ? (
+                        `!!${message.priority}!!`
+                      ) : (
+                        message.priority
+                      )}
+                    </LabeledList.Item>
+                  </Fragment>
+                )}
+              </LabeledList>
+            </Section>
+          );
+        })}
       </Section>
     </Section>
   );
 };
 
-const CustomMsg = (props, context) => {
+export const CustomMsg = (props, context) => {
   const { act, data } = useBackend(context);
   const fake_message = data.fake_message || {
     'sender': 'System Administrator',