Merge pull request #10 from EgorDinamit/le-oops

Resets tgui interfaces back to old Bungalow stuff

tgui/packages/tgui/interfaces/AirlockElectronics.js

@@ -1,5 +1,5 @@
 import { useBackend } from '../backend';
-import { Button, LabeledList, Section } from '../components';
+import { Button, Input, LabeledList, Section } from '../components';
 import { Window } from '../layouts';
 import { AccessList } from './common/AccessList';
 
@@ -8,6 +8,8 @@ export const AirlockElectronics = (props, context) => {
   const {
     oneAccess,
     unres_direction,
+    passedName,
+    passedCycleId, 
   } = data;
   const regions = data.regions || [];
   const accesses = data.accesses || [];
@@ -56,6 +58,24 @@ export const AirlockElectronics = (props, context) => {
                   unres_direction: '8',
                 })} />
             </LabeledList.Item>
+            <LabeledList.Item
+              label="Airlock Name">
+              <Input fluid
+                maxLength={30}
+                value={passedName}
+                onChange={(e, value) => act('passedName', {
+                  passedName: value,
+                })} />
+            </LabeledList.Item>
+            <LabeledList.Item
+              label="Cycling Id">
+              <Input fluid
+                maxLength={30}
+                value={passedCycleId}
+                onChange={(e, value) => act('passedCycleId', {
+                  passedCycleId: value,
+                })} />
+            </LabeledList.Item>
           </LabeledList>
         </Section>
         <AccessList

tgui/packages/tgui/interfaces/Apc.js

@@ -111,7 +111,7 @@ const ApcContent = (props, context) => {
             color={chargingStatus.color}
             buttons={(
               <Button
-                icon={data.chargeMode ? 'sync' : 'close'}
+                icon={data.chargeMode ? 'sync' : 'times'}
                 content={data.chargeMode ? 'Auto' : 'Off'}
                 disabled={locked}
                 onClick={() => act('charge')} />

tgui/packages/tgui/interfaces/BankMachine.js

@@ -25,7 +25,7 @@ export const BankMachine = (props, context) => {
               buttons={(
                 <Button
                   icon={siphoning ? 'times' : 'sync'}
-                  content={siphoning ? 'Stop Siphoning' : 'Siphon Ahn'}
+                  content={siphoning ? 'Stop Siphoning' : 'Siphon Credits'}
                   selected={siphoning}
                   onClick={() => act(siphoning ? 'halt' : 'siphon')} />
               )}>

tgui/packages/tgui/interfaces/Bepis.js

@@ -44,7 +44,7 @@ export const Bepis = (props, context) => {
             <Grid.Column size={1.5}>
               <Section title="Stored Data and Statistics">
                 <LabeledList>
-                  <LabeledList.Item label="Deposited Ahn">
+                  <LabeledList.Item label="Deposited Credits">
                     {data.stored_cash}
                   </LabeledList.Item>
                   <LabeledList.Item label="Investment Variability">
@@ -74,14 +74,14 @@ export const Bepis = (props, context) => {
               <Box>
                 <Button
                   icon="donate"
-                  content="Deposit Ahn"
+                  content="Deposit Credits"
                   disabled={data.manual_power === 1
                     || data.silicon_check === 1}
                   onClick={() => act('deposit_cash')}
                 />
                 <Button
                   icon="eject"
-                  content="Withdraw Ahn"
+                  content="Withdraw Credits"
                   disabled={data.manual_power === 1}
                   onClick={() => act('withdraw_cash')} />
               </Box>

tgui/packages/tgui/interfaces/Cargo.js

@@ -1,6 +1,6 @@
 import { toArray } from 'common/collections';
 import { useBackend, useSharedState } from '../backend';
-import { AnimatedNumber, Box, Button, Flex, LabeledList, Section, Table, Tabs } from '../components';
+import { AnimatedNumber, Box, Button, Flex, LabeledList, NoticeBox, Section, Table, Tabs } from '../components';
 import { formatMoney } from '../format';
 import { Window } from '../layouts';
 
@@ -45,15 +45,23 @@ export const CargoContent = (props, context) => {
             Requests ({requests.length})
           </Tabs.Tab>
           {!requestonly && (
-            <Tabs.Tab
-              icon="shopping-cart"
-              textColor={tab !== 'cart'
+            <>
+              <Tabs.Tab
+                icon="shopping-cart"
+                textColor={tab !== 'cart'
                 && cart.length > 0
                 && 'yellow'}
-              selected={tab === 'cart'}
-              onClick={() => setTab('cart')}>
-              Checkout ({cart.length})
-            </Tabs.Tab>
+                selected={tab === 'cart'}
+                onClick={() => setTab('cart')}>
+                Checkout ({cart.length})
+              </Tabs.Tab>
+              <Tabs.Tab
+                icon="question"
+                selected={tab === 'help'}
+                onClick={() => setTab('help')}>
+                Help
+              </Tabs.Tab>
+            </>
           )}
         </Tabs>
       </Section>
@@ -66,6 +74,9 @@ export const CargoContent = (props, context) => {
       {tab === 'cart' && (
         <CargoCart />
       )}
+      {tab === 'help' && (
+        <CargoHelp />
+      )}
     </Box>
   );
 };
@@ -388,3 +399,43 @@ const CargoCart = (props, context) => {
     </Section>
   );
 };
+
+const CargoHelp = (props, context) => {
+  return (
+    <>
+      <Section title="MULEbots">
+        MULEbots are slow but loyal delivery bots that will get crates delivered
+        with minimal technician effort required. It is slow, though, and can be
+        tampered with while en route.
+        <br />
+        <b>Setting up a MULEbot is easy:</b><br />
+        <b>1.</b> Drag the crate you want to deliver next to the MULEbot.<br />
+        <b>2.</b> Drag the crate on top of MULEbot. It should load on.<br />
+        <b>3.</b> Open your PDA.<br />
+        <b>4.</b> Click <i>Delivery Bot Control</i>.<br />
+        <b>5.</b> Click <i>Scan for Active Bots</i>.<br />
+        <b>6.</b> Choose your MULE.<br />
+        <b>7.</b> Click on <i>Destination: (set)</i>.<br />
+        <b>8.</b> Choose a destination and click OK.<br />
+        <b>9.</b> Click <i>Proceed</i>.
+      </Section>
+      <Section title="Disposals Delivery System">
+        In addition to MULEs and hand-deliveries, you can also make use of the
+        disposals mailing system. Note that a break in the disposal piping could
+        cause your package to be lost (this hardly ever happens), so this is not
+        always the most secure ways to deliver something. You can wrap up a
+        piece of paper and mail it the same way if you (or someone at the desk)
+        wants to mail a letter.
+        <br />
+        <b>Using the Disposals Delivery System is even easier:</b><br />
+        <b>1.</b> Wrap your item/crate in packaging paper.<br />
+        <b>2.</b> Use the destinations tagger to choose where to send it.<br />
+        <b>3.</b> Tag the package.<br />
+        <b>4.</b> Stick it on the conveyor and let the system handle it.<br />
+      </Section>
+      <NoticeBox textAlign="center" info mb={0}>
+        Pondering something not included here? When in doubt, ask the QM!
+      </NoticeBox>
+    </>
+  );
+};

tgui/packages/tgui/interfaces/CentcomPodLauncher.js

@@ -22,6 +22,7 @@ export const CentcomPodLauncher = (props, context) => {
   const [compact] = useCompact(context);
   return (
     <Window
+      resizable
       key={'CPL_' + compact}
       title={compact
         ? "Use against Helen Weinstein"

tgui/packages/tgui/interfaces/Clipboard.js

@@ -0,0 +1,107 @@
+import { useBackend } from "../backend";
+import {
+  Box,
+  Button,
+  Divider,
+  LabeledList,
+  Flex,
+  Section,
+} from "../components";
+import { Window } from "../layouts";
+
+export const Clipboard = (props, context) => {
+  const { act, data } = useBackend(context);
+  const { pen, top_paper, top_paper_ref, paper, paper_ref } = data;
+  return (
+    <Window title="Clipboard" width={400} height={500}>
+      <Window.Content backgroundColor="#704D25" scrollable>
+        <Section>
+          {pen ? (
+            <LabeledList>
+              <LabeledList.Item
+                label="Pen"
+                buttons={
+                  <Button icon="eject" onClick={() => act("remove_pen")} />
+                }
+              >
+                {pen}
+              </LabeledList.Item>
+            </LabeledList>
+          ) : (
+            <Box color="white" align="center">
+              No pen attached!
+            </Box>
+          )}
+        </Section>
+        <Divider />
+        {top_paper ? (
+          <Flex
+            color="black"
+            backgroundColor="white"
+            style={{ padding: "2px 2px 0 2px" }}
+          >
+            <Flex.Item align="center" grow={1}>
+              <Box align="center">{top_paper}</Box>
+            </Flex.Item>
+            <Flex.Item>
+              <Button
+                icon={pen ? "pen" : "eye"}
+                onClick={() => act("edit_paper", { ref: top_paper_ref })}
+              />
+              <Button
+                icon="tag"
+                onClick={() => act("rename_paper", { ref: top_paper_ref })}
+              />
+              <Button
+                icon="eject"
+                onClick={() => act("remove_paper", { ref: top_paper_ref })}
+              />
+            </Flex.Item>
+          </Flex>
+        ) : (
+          <Section>
+            <Box color="white" align="center">
+              The clipboard is empty!
+            </Box>
+          </Section>
+        )}
+        {paper.length > 0 && <Divider />}
+        {paper.map((paper_item, index) => (
+          <Flex
+            key={paper_ref[index]}
+            color="black"
+            backgroundColor="white"
+            style={{ padding: "2px 2px 0 2px" }}
+            mb={0.5}
+          >
+            <Flex.Item>
+              <Button
+                icon="chevron-up"
+                color="transparent"
+                iconColor="black"
+                onClick={() => act("move_top_paper", { ref: paper_ref[index] })}
+              />
+            </Flex.Item>
+            <Flex.Item align="center" grow={1}>
+              <Box align="center">{paper_item}</Box>
+            </Flex.Item>
+            <Flex.Item>
+              <Button
+                icon={pen ? "pen" : "eye"}
+                onClick={() => act("edit_paper", { ref: paper_ref[index] })}
+              />
+              <Button
+                icon="tag"
+                onClick={() => act("rename_paper", { ref: paper_ref[index] })}
+              />
+              <Button
+                icon="eject"
+                onClick={() => act("remove_paper", { ref: paper_ref[index] })}
+              />
+            </Flex.Item>
+          </Flex>
+        ))}
+      </Window.Content>
+    </Window>
+  );
+};