Fucking clockcult

tgui/packages/tgui/index.js

@@ -12,12 +12,12 @@ import './polyfills/inferno';
 
 // Themes
 import './styles/main.scss';
-import './styles/themes/cardtable.scss';
 import './styles/themes/malfunction.scss';
 import './styles/themes/ntos.scss';
 import './styles/themes/hackerman.scss';
 import './styles/themes/retro.scss';
 import './styles/themes/syndicate.scss';
+import './styles/themes/clockcult.scss';
 
 import { loadCSS } from 'fg-loadcss';
 import { render } from 'inferno';

tgui/packages/tgui/interfaces/ClockworkSlab.js

@@ -1,17 +1,135 @@
-import { useBackend } from '../backend';
-import { AnimatedNumber, Box, Button, Flex, LabeledList, Section, Table, Tabs } from '../components';
+import { map } from 'common/collections';
 import { Fragment } from 'inferno';
+import { useBackend, useSharedState } from '../backend';
+import { Button, Flex, LabeledList, NoticeBox, Section, Tabs, AnimatedNumber } from '../components';
+import { Window } from '../layouts';
 
 export const ClockworkSlab = (props, context) => {
-  const { data } = useBackend(context);
-  const { power } = data;
+  const { act, data } = useBackend(context);
+  const {
+    detail_view,
+    disk,
+    has_disk,
+    has_program,
+    scripture = {},
+  } = data;
+  const [
+    selectedScripture,
+    setSelectedScripture,
+  ] = useSharedState(context, 'category');
+  const scriptureInCategory = scripture
+    && scripture[selectedScripture]
+    || [];
   return (
-    <Window
-      theme="syndicate"
-      resizable>
-      <Window.Content scrollable>
-        <GenericSlab
-         Content={power} />
+    <Window resizable>
+      <Window.Content theme="clockcult" scrollable>
+        <Section
+          title="Scripture Disk"
+          buttons={(
+            <AnimatedNumber
+              value={data.power} />
+          )}>
+          {has_disk ? (
+            has_program ? (
+              <LabeledList>
+                <LabeledList.Item label="Program Name">
+                  {disk.name}
+                </LabeledList.Item>
+                <LabeledList.Item label="Description">
+                  {disk.desc}
+                </LabeledList.Item>
+              </LabeledList>
+            ) : (
+              <NoticeBox>
+                No Program Installed
+              </NoticeBox>
+            )
+          ) : (
+            <NoticeBox>
+              Insert Disk
+            </NoticeBox>
+          )}
+        </Section>
+        <Section
+          title="Programs"
+          buttons={(
+            <Fragment>
+              <Button
+                icon={detail_view ? 'info' : 'list'}
+                content={detail_view ? 'Detailed' : 'Compact'}
+                onClick={() => act('toggle_details')} />
+              <Button
+                icon="sync"
+                content="Sync Research"
+                onClick={() => act('refresh')} />
+            </Fragment>
+          )}>
+          {scripture !== null ? (
+            <Flex>
+              <Flex.Item minWidth="110px">
+                <Tabs vertical>
+                  {map((cat_contents, category) => {
+                    const progs = cat_contents || [];
+                    // Backend was sending stupid data that would have been
+                    // annoying to fix
+                    const tabLabel = category
+                      .substring(0, category.length - 8);
+                    return (
+                      <Tabs.Tab
+                        key={category}
+                        selected={category === selectedScripture}
+                        onClick={() => setSelectedScripture(category)}>
+                        {tabLabel}
+                      </Tabs.Tab>
+                    );
+                  })(scripture)}
+                </Tabs>
+              </Flex.Item>
+              <Flex.Item grow={1} basis={0}>
+                {detail_view ? (
+                  scriptureInCategory.map(program => (
+                    <Section
+                      key={program.id}
+                      title={program.name}
+                      level={2}
+                      buttons={(
+                        <Button
+                          icon="download"
+                          content="Download"
+                          disabled={!has_disk}
+                          onClick={() => act('download', {
+                            program_id: program.id,
+                          })} />
+                      )}>
+                      {program.desc}
+                    </Section>
+                  ))
+                ) : (
+                  <LabeledList>
+                    {scriptureInCategory.map(program => (
+                      <LabeledList.Item
+                        key={program.id}
+                        label={program.name}
+                        buttons={(
+                          <Button
+                            icon="download"
+                            content="Download"
+                            disabled={!has_disk}
+                            onClick={() => act('download', {
+                              program_id: program.id,
+                            })} />
+                        )} />
+                    ))}
+                  </LabeledList>
+                )}
+              </Flex.Item>
+            </Flex>
+          ) : (
+            <NoticeBox>
+              No nanite scripture are currently researched.
+            </NoticeBox>
+          )}
+        </Section>
       </Window.Content>
     </Window>
   );

tgui/packages/tgui/styles/themes/clockcult.scss

@@ -18,6 +18,7 @@
 
   // Components
   @include meta.load-css('../components/Button.scss', $with: (
+    'color-backround' : #170800,
     'color-default': colors.$primary,
     'color-disabled': #2D1400,
     'color-selected': #CFBA47,