TGUI Interface Hotfix

code/__defines/time.dm

@@ -0,0 +1,33 @@
+/// Define that just has the current in-universe year for use in whatever context you might want to display that in. (For example, 2022 -> 2562 given a 540 year offset)
+#define CURRENT_STATION_YEAR (GLOB.year_integer + STATION_YEAR_OFFSET)
+
+/// In-universe, SS13 is set 300 years in the future from the real-world day, hence this number for determining the year-offset for the in-game year.
+#define STATION_YEAR_OFFSET 300
+
+#define MILISECOND * 0.01
+#define MILLISECONDS * 0.01
+
+#define DECISECONDS *1 //the base unit all of these defines are scaled by, because byond uses that as a unit of measurement for some reason
+
+#define SECOND *10
+#define SECONDS *10
+
+#define MINUTE *600
+#define MINUTES *600
+
+#define HOUR *36000
+#define HOURS *36000
+
+#define DAY *864000
+#define DAYS *864000
+
+#define TICK *world.tick_lag
+#define TICKS *world.tick_lag
+
+#define DS2TICKS(DS) ((DS)/world.tick_lag)
+
+#define TICKS2DS(T) ((T) TICKS)
+
+#define MS2DS(T) ((T) MILLISECONDS)
+
+#define DS2MS(T) ((T) * 100)

code/_global_vars/time_vars.dm

@@ -0,0 +1,2 @@
+GLOBAL_VAR_INIT(year, time2text(world.realtime,"YYYY"))
+GLOBAL_VAR_INIT(year_integer, text2num(year)) // = 2013???

code/_helpers/time.dm

@@ -1,32 +1,8 @@
-#define MILISECOND * 0.01
-#define MILLISECONDS * 0.01
-
-#define SECOND *10
-#define SECONDS *10
-
-#define MINUTE *600
-#define MINUTES *600
-
-#define HOUR *36000
-#define HOURS *36000
-
-#define DAY *864000
-#define DAYS *864000
-
 #define TimeOfGame (get_game_time())
 #define TimeOfTick (TICK_USAGE*0.01*world.tick_lag)
 
-#define TICK *world.tick_lag
-#define TICKS *world.tick_lag
-
-#define DS2TICKS(DS) ((DS)/world.tick_lag)	// Convert deciseconds to ticks
-#define TICKS2DS(T) ((T) TICKS) 				// Convert ticks to deciseconds
 #define DS2NEARESTTICK(DS) TICKS2DS(-round(-(DS2TICKS(DS))))
 
-#define MS2DS(T) ((T) MILLISECONDS)
-
-#define DS2MS(T) ((T) * 100)
-
 var/world_startup_time
 
 /proc/get_game_time()

code/controllers/subsystems/tgui.dm

@@ -27,6 +27,7 @@ SUBSYSTEM_DEF(tgui)
 	var/polyfill = file2text('tgui/public/tgui-polyfill.min.js')
 	polyfill = "<script>\n[polyfill]\n</script>"
 	basehtml = replacetextEx(basehtml, "<!-- tgui:inline-polyfill -->", polyfill)
+	basehtml = replacetextEx(basehtml, "<!-- tgui:nt-copyright -->", "Nanotrasen (c) 2284-[CURRENT_STATION_YEAR]")
 
 /datum/controller/subsystem/tgui/Shutdown()
 	close_all_uis()
@@ -344,4 +345,4 @@ SUBSYSTEM_DEF(tgui)
 		target.tgui_open_uis.Add(ui)
 	// Clear the old list.
 	source.tgui_open_uis.Cut()
-	return TRUE
+	return TRUE

tgui/packages/tgui/interfaces/Biogenerator.js

@@ -3,7 +3,6 @@ import { Fragment } from 'inferno';
 import { useBackend, useLocalState } from '../backend';
 import { Box, Button, Collapsible, Dropdown, Flex, Input, Section } from '../components';
 import { Window } from '../layouts';
-import { refocusLayout } from '../layouts';
 
 const sortTypes = {
   'Alphabetical': (a, b) => a - b,
@@ -68,8 +67,17 @@ const BiogeneratorItems = (props, context) => {
   });
   return (
     <Flex.Item grow="1" overflow="auto">
+<<<<<<< HEAD
       <Section onClick={(e) => refocusLayout()}>
         {has_contents ? contents : <Box color="label">No items matching your criteria was found!</Box>}
+=======
+      <Section>
+        {has_contents ? (
+          contents
+        ) : (
+          <Box color="label">No items matching your criteria was found!</Box>
+        )}
+>>>>>>> dd49b83167... Merge pull request #14964 from ItsSelis/selis-tgui-patch
       </Section>
     </Flex.Item>
   );

tgui/packages/tgui/interfaces/CasinoPrizeDispenserCh.js

@@ -3,7 +3,6 @@ import { Fragment } from 'inferno';
 import { useBackend, useLocalState } from '../backend';
 import { Box, Button, Collapsible, Dropdown, Flex, Input, Section } from '../components';
 import { Window } from '../layouts';
-import { refocusLayout } from '../layouts';
 
 const sortTypes = {
   'Alphabetical': (a, b) => a - b,
@@ -90,8 +89,17 @@ const CasinoPrizeDispenserChItems = (props, context) => {
   });
   return (
     <Flex.Item grow="1" overflow="auto">
+<<<<<<< HEAD:tgui/packages/tgui/interfaces/CasinoPrizeDispenserCh.js
       <Section onClick={(e) => refocusLayout()}>
         {has_contents ? contents : <Box color="label">No items matching your criteria was found!</Box>}
+=======
+      <Section>
+        {has_contents ? (
+          contents
+        ) : (
+          <Box color="label">No items matching your criteria was found!</Box>
+        )}
+>>>>>>> dd49b83167... Merge pull request #14964 from ItsSelis/selis-tgui-patch:tgui/packages/tgui/interfaces/CasinoPrizeDispenser.js
       </Section>
     </Flex.Item>
   );

tgui/packages/tgui/interfaces/ChemDispenser.js

@@ -26,24 +26,19 @@ const ChemDispenserSettings = (properties, context) => {
     <Section title="Settings" flex="content">
       <LabeledList>
         <LabeledList.Item label="Dispense" verticalAlign="middle">
-          <Flex direction="row" wrap="wrap" spacing="1">
+          {dispenseAmounts.map((a, i) => (
-            {dispenseAmounts.map((a, i) => (
+            <Button
-              <Flex.Item key={i} grow="1">
+              textAlign="center"
-                <Button
+              selected={amount === a}
-                  textAlign="center"
+              content={a + 'u'}
-                  selected={amount === a}
+              m="0"
-                  content={a + 'u'}
+              onClick={() =>
-                  m="0"
+                act('amount', {
-                  fluid
+                  amount: a,
-                  onClick={() =>
+                })
-                    act('amount', {
+              }
-                      amount: a,
+            />
-                    })
+          ))}
-                  }
-                />
-              </Flex.Item>
-            ))}
-          </Flex>
         </LabeledList.Item>
         <LabeledList.Item label="Custom Amount">
           <Slider

tgui/packages/tgui/interfaces/MedicalRecords.js

@@ -233,14 +233,16 @@ const MedicalRecordsViewMedical = (_properties, context) => {
     <Fragment>
       <LabeledList>
         {medical.fields.map((field, i) => (
-          <LabeledList.Item key={i} label={field.field} preserveWhitespace>
+          <LabeledList.Item key={i} label={field.field}>
-            {field.value}
+            <Box preserveWhitespace>
-            <Button
+              {field.value}
-              icon="pen"
+              <Button
-              ml="0.5rem"
+                icon="pen"
-              mb={field.line_break ? '1rem' : 'initial'}
+                ml="0.5rem"
-              onClick={() => doEdit(context, field)}
+                mb={field.line_break ? '1rem' : 'initial'}
-            />
+                onClick={() => doEdit(context, field)}
+              />
+            </Box>
           </LabeledList.Item>
         ))}
       </LabeledList>

tgui/packages/tgui/interfaces/MiningVendor.js

@@ -2,7 +2,6 @@ import { createSearch } from 'common/string';
 import { useBackend, useLocalState } from '../backend';
 import { Box, Button, Collapsible, Dropdown, Flex, Input, Section } from '../components';
 import { Window } from '../layouts';
-import { refocusLayout } from '../layouts';
 import { MiningUser } from './common/Mining';
 
 const sortTypes = {
@@ -55,8 +54,17 @@ const MiningVendorItems = (props, context) => {
   });
   return (
     <Flex.Item grow="1" overflow="auto">
+<<<<<<< HEAD
       <Section onClick={(e) => refocusLayout()}>
         {has_contents ? contents : <Box color="label">No items matching your criteria was found!</Box>}
+=======
+      <Section>
+        {has_contents ? (
+          contents
+        ) : (
+          <Box color="label">No items matching your criteria was found!</Box>
+        )}
+>>>>>>> dd49b83167... Merge pull request #14964 from ItsSelis/selis-tgui-patch
       </Section>
     </Flex.Item>
   );

tgui/packages/tgui/interfaces/NtosCameraConsole.js

@@ -0,0 +1,108 @@
+import { filter, sortBy } from '../../common/collections';
+import { flow } from '../../common/fp';
+import { createSearch } from '../../common/string';
+import { useBackend } from '../backend';
+import { Button, ByondUi } from '../components';
+import { NtosWindow } from '../layouts';
+import { CameraConsoleContent } from './CameraConsole';
+
+/**
+ * Returns previous and next camera names relative to the currently
+ * active camera.
+ */
+export const prevNextCamera = (cameras, activeCamera) => {
+  if (!activeCamera) {
+    return [];
+  }
+  const index = cameras.findIndex(
+    (camera) => camera.name === activeCamera.name
+  );
+  return [cameras[index - 1]?.name, cameras[index + 1]?.name];
+};
+
+/**
+ * Camera selector.
+ *
+ * Filters cameras, applies search terms and sorts the alphabetically.
+ */
+export const selectCameras = (cameras, searchText = '', networkFilter = '') => {
+  const testSearch = createSearch(searchText, (camera) => camera.name);
+  return flow([
+    // Null camera filter
+    filter((camera) => camera?.name),
+    // Optional search term
+    searchText && filter(testSearch),
+    // Optional network filter
+    networkFilter &&
+      filter((camera) => camera.networks.includes(networkFilter)),
+    // Slightly expensive, but way better than sorting in BYOND
+    sortBy((camera) => camera.name),
+  ])(cameras);
+};
+
+export const NtosCameraConsole = (props, context) => {
+  const { act, data } = useBackend(context);
+  const { mapRef, activeCamera } = data;
+  const cameras = selectCameras(data.cameras);
+  const [prevCameraName, nextCameraName] = prevNextCamera(
+    cameras,
+    activeCamera
+  );
+  return (
+    <NtosWindow width={870} height={708} resizable>
+      <NtosWindow.Content>
+        <div className="CameraConsole__left">
+          <CameraConsoleContent />
+        </div>
+        <div className="CameraConsole__right">
+          <div className="CameraConsole__toolbar">
+            <b>Camera: </b>
+            {(activeCamera && activeCamera.name) || '—'}
+          </div>
+          <div className="CameraConsole__toolbarRight">
+            SEL:
+            <Button
+              icon="chevron-left"
+              disabled={!prevCameraName}
+              onClick={() =>
+                act('switch_camera', {
+                  name: prevCameraName,
+                })
+              }
+            />
+            <Button
+              icon="chevron-right"
+              disabled={!nextCameraName}
+              onClick={() =>
+                act('switch_camera', {
+                  name: nextCameraName,
+                })
+              }
+            />
+            | PAN:
+            <Button
+              icon="chevron-left"
+              onClick={() => act('pan', { dir: 8 })}
+            />
+            <Button icon="chevron-up" onClick={() => act('pan', { dir: 1 })} />
+            <Button
+              icon="chevron-right"
+              onClick={() => act('pan', { dir: 4 })}
+            />
+            <Button
+              icon="chevron-down"
+              onClick={() => act('pan', { dir: 2 })}
+            />
+          </div>
+          <ByondUi
+            className="CameraConsole__map"
+            params={{
+              id: mapRef,
+              type: 'map',
+            }}
+          />
+        </div>
+      </NtosWindow.Content>
+    </NtosWindow>
+  );
+};

tgui/packages/tgui/interfaces/NtosCameraConsole.tsx

@@ -1,12 +0,0 @@
-import { NtosWindow } from '../layouts';
-import { CameraConsoleContent } from './CameraConsole';
-
-export const NtosCameraConsole = () => {
-  return (
-    <NtosWindow width={870} height={708} resizable>
-      <NtosWindow.Content>
-        <CameraConsoleContent />
-      </NtosWindow.Content>
-    </NtosWindow>
-  );
-};

tgui/packages/tgui/interfaces/SecurityRecords.js

@@ -191,14 +191,16 @@ const SecurityRecordsViewSecurity = (_properties, context) => {
     <Fragment>
       <LabeledList>
         {security.fields.map((field, i) => (
-          <LabeledList.Item key={i} label={field.field} preserveWhitespace>
+          <LabeledList.Item key={i} label={field.field}>
-            {field.value}
+            <Box preserveWhitespace>
-            <Button
+              {field.value}
-              icon="pen"
+              <Button
-              ml="0.5rem"
+                icon="pen"
-              mb={field.line_break ? '1rem' : 'initial'}
+                ml="0.5rem"
-              onClick={() => doEdit(context, field)}
+                mb={field.line_break ? '1rem' : 'initial'}
-            />
+                onClick={() => doEdit(context, field)}
+              />
+            </Box>
           </LabeledList.Item>
         ))}
       </LabeledList>

tgui/packages/tgui/interfaces/SuitCycler.js

@@ -75,7 +75,7 @@ const SuitCyclerContent = (props, context) => {
           <LabeledList.Item label="Target Paintjob">
             <Dropdown
               noscroll
-              width="100%"
+              width="150px"
               options={departments}
               selected={departments[0]}
               onSelected={(val) => act('department', { department: val })}
@@ -83,7 +83,7 @@ const SuitCyclerContent = (props, context) => {
           </LabeledList.Item>
           <LabeledList.Item label="Target Species">
             <Dropdown
-              width="100%"
+              width="150px"
               maxHeight="160px"
               options={species}
               selected={species[0]}

tgui/packages/tgui/styles/components/Button.scss

@@ -138,3 +138,29 @@ $bg-map: colors.$bg-map !default;
 .Button--selected {
   @include button-color($color-selected);
 }
+
+.Button--flex {
+  display: inline-flex; //Inline even for fluid
+  flex-direction: column;
+}
+
+.Button--flex--fluid {
+  width: 100%;
+}
+
+.Button--verticalAlignContent--top {
+  justify-content: flex-start;
+}
+
+.Button--verticalAlignContent--middle {
+  justify-content: center;
+}
+
+.Button--verticalAlignContent--bottom {
+  justify-content: flex-end;
+}
+
+.Button__content {
+  display: block;
+  align-self: stretch;
+}

tgui/packages/tgui/styles/components/LabeledList.scss

@@ -32,10 +32,9 @@
   padding: 0.25em 0.5em;
   border: 0;
   text-align: left;
-  vertical-align: baseline;
 }
 
-.LabeledList__label {
+.LabeledList__label--nowrap {
   width: 1%;
   white-space: nowrap;
   min-width: 5em;

vorestation.dme

@@ -106,6 +106,7 @@
 #include "code\__defines\tgs.config.dm"
 #include "code\__defines\tgs.dm"
 #include "code\__defines\tgui.dm"
+#include "code\__defines\time.dm"
 #include "code\__defines\tools.dm"
 #include "code\__defines\traits.dm"
 #include "code\__defines\turfs.dm"
@@ -124,7 +125,11 @@
 #include "code\_global_vars\misc.dm"
 #include "code\_global_vars\mobs.dm"
 #include "code\_global_vars\sensitive.dm"
+<<<<<<< HEAD
 #include "code\_global_vars\traits.dm"
+=======
+#include "code\_global_vars\time_vars.dm"
+>>>>>>> dd49b83167... Merge pull request #14964 from ItsSelis/selis-tgui-patch
 #include "code\_global_vars\typecache.dm"
 #include "code\_global_vars\lists\mapping.dm"
 #include "code\_global_vars\lists\misc.dm"