tgui-core 1.0.4 → 1.0.6

package/components/ByondUi.jsx

@@ -10,8 +10,6 @@ import { Component, createRef } from 'react';
 
 import { computeBoxProps } from './Box';
 
-const logger = createLogger('ByondUi');
-
 // Stack of currently allocated BYOND UI element ids.
 const byondUiStack = [];
 
@@ -24,12 +22,10 @@ const createByondUiElement = (elementId) => {
   // Return a control structure
   return {
     render: (params) => {
-      logger.log(`rendering '${id}'`);
       byondUiStack[index] = id;
       Byond.winset(id, params);
     },
     unmount: () => {
-      logger.log(`unmounting '${id}'`);
       byondUiStack[index] = null;
       Byond.winset(id, {
         parent: '',
@@ -43,7 +39,6 @@ window.addEventListener('beforeunload', () => {
   for (let index = 0; index < byondUiStack.length; index++) {
     const id = byondUiStack[index];
     if (typeof id === 'string') {
-      logger.log(`unmounting '${id}' (beforeunload)`);
       byondUiStack[index] = null;
       Byond.winset(id, {
         parent: '',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tgui-core",
-  "version": "1.0.4",
+  "version": "1.0.6",
   "description": "TGUI core component library",
   "keywords": [
     "TGUI",
@@ -19,6 +19,7 @@
     "@types/node": "^20.12.12",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
-    "@types/webpack-env": "^1.18.5"
+    "@types/webpack-env": "^1.18.5",
+    "typescript": "^5.4.5"
   }
 }

package/styles/main.scss

@@ -47,45 +47,6 @@
 @include meta.load-css('./components/TextArea.scss');
 @include meta.load-css('./components/Tooltip.scss');
 
-// Interfaces
-@include meta.load-css('./interfaces/AlertModal.scss');
-@include meta.load-css('./interfaces/Changelog.scss');
-@include meta.load-css('./interfaces/CrewManifest.scss');
-@include meta.load-css('./interfaces/Emojipedia.scss');
-@include meta.load-css('./interfaces/ExperimentConfigure.scss');
-@include meta.load-css('./interfaces/Fabricator.scss');
-@include meta.load-css('./interfaces/Fishing.scss');
-@include meta.load-css('./interfaces/HellishRunes.scss');
-@include meta.load-css('./interfaces/HotKeysHelp.scss');
-@include meta.load-css('./interfaces/Hypertorus.scss');
-@include meta.load-css('./interfaces/IntegratedCircuit.scss');
-@include meta.load-css('./interfaces/LibraryAdmin.scss');
-@include meta.load-css('./interfaces/LibraryComputer.scss');
-@include meta.load-css('./interfaces/ListInput.scss');
-@include meta.load-css('./interfaces/Mecha.scss');
-@include meta.load-css('./interfaces/NtosMessenger.scss');
-@include meta.load-css('./interfaces/NtosNotepad.scss');
-@include meta.load-css('./interfaces/NuclearBomb.scss');
-@include meta.load-css('./interfaces/Orbit.scss');
-@include meta.load-css('./interfaces/Paper.scss');
-@include meta.load-css('./interfaces/PersonalCrafting.scss');
-@include meta.load-css('./interfaces/PreferencesMenu.scss');
-@include meta.load-css('./interfaces/RequestManager.scss');
-@include meta.load-css('./interfaces/Roulette.scss');
-@include meta.load-css('./interfaces/Safe.scss');
-@include meta.load-css('./interfaces/TachyonArray.scss');
-@include meta.load-css('./interfaces/Techweb.scss');
-@include meta.load-css('./interfaces/Trophycase.scss');
-@include meta.load-css('./interfaces/Uplink.scss');
-@include meta.load-css('./interfaces/UtilityModulesPane.scss');
-
-// Layouts
-@include meta.load-css('./layouts/Layout.scss');
-@include meta.load-css('./layouts/NtosHeader.scss');
-@include meta.load-css('./layouts/NtosWindow.scss');
-@include meta.load-css('./layouts/TitleBar.scss');
-@include meta.load-css('./layouts/Window.scss');
-
 @include meta.load-css('highlight.js/scss/github-dark.scss');
 
 // NT Theme

package/debug/KitchenSink.tsx

@@ -1,56 +0,0 @@
-/**
- * @file
- * @copyright 2020 Aleksej Komarov
- * @license MIT
- */
-
-import { useState } from 'react';
-
-import { Flex, Section, Tabs } from '../components';
-import { Pane, Window } from '../layouts';
-
-const r = require.context('../stories', false, /\.stories\.jsx$/);
-
-/**
- * @returns {{
- *   meta: {
- *     title: string,
- *     render: () => any,
- *   },
- * }[]}
- */
-const getStories = () => r.keys().map((path) => r(path));
-
-export const KitchenSink = (props) => {
-  const { panel } = props;
-  const [theme] = useState('');
-  const [pageIndex, setPageIndex] = useState(0);
-  const stories = getStories();
-  const story = stories[pageIndex];
-  const Layout = panel ? Pane : Window;
-  return (
-    <Layout title="Kitchen Sink" width={600} height={500} theme={theme}>
-      <Flex height="100%">
-        <Flex.Item m={1} mr={0}>
-          <Section fill fitted>
-            <Tabs vertical>
-              {stories.map((story, i) => (
-                <Tabs.Tab
-                  key={i}
-                  color="transparent"
-                  selected={i === pageIndex}
-                  onClick={() => setPageIndex(i)}
-                >
-                  {story.meta.title}
-                </Tabs.Tab>
-              ))}
-            </Tabs>
-          </Section>
-        </Flex.Item>
-        <Flex.Item position="relative" grow={1}>
-          <Layout.Content scrollable>{story.meta.render()}</Layout.Content>
-        </Flex.Item>
-      </Flex>
-    </Layout>
-  );
-};

package/debug/actions.ts

@@ -1,11 +0,0 @@
-/**
- * @file
- * @copyright 2020 Aleksej Komarov
- * @license MIT
- */
-
-import { createAction } from '../common/redux';
-
-export const toggleKitchenSink = createAction('debug/toggleKitchenSink');
-export const toggleDebugLayout = createAction('debug/toggleDebugLayout');
-export const openExternalBrowser = createAction('debug/openExternalBrowser');

package/debug/hooks.ts

@@ -1,10 +0,0 @@
-/**
- * @file
- * @copyright 2020 Aleksej Komarov
- * @license MIT
- */
-
-import { useSelector } from '../src/backend';
-import { selectDebug } from './selectors';
-
-export const useDebug = () => useSelector(selectDebug);

package/debug/index.ts

@@ -1,10 +0,0 @@
-/**
- * @file
- * @copyright 2020 Aleksej Komarov
- * @license MIT
- */
-
-export { useDebug } from './hooks';
-export { KitchenSink } from './KitchenSink';
-export { debugMiddleware, relayMiddleware } from './middleware';
-export { debugReducer } from './reducer';

package/debug/middleware.ts

@@ -1,67 +0,0 @@
-/**
- * @file
- * @copyright 2020 Aleksej Komarov
- * @license MIT
- */
-
-import { KEY_BACKSPACE, KEY_F10, KEY_F11, KEY_F12 } from '../common/keycodes';
-
-import { globalEvents } from '../src/events';
-import { acquireHotKey } from '../src/hotkeys';
-import {
-  openExternalBrowser,
-  toggleDebugLayout,
-  toggleKitchenSink,
-} from './actions';
-
-const relayedTypes = ['backend/update', 'chat/message'];
-
-export const debugMiddleware = (store) => {
-  acquireHotKey(KEY_F11);
-  acquireHotKey(KEY_F12);
-  globalEvents.on('keydown', (key) => {
-    if (key.code === KEY_F11) {
-      store.dispatch(toggleDebugLayout());
-    }
-    if (key.code === KEY_F12) {
-      store.dispatch(toggleKitchenSink());
-    }
-    if (key.ctrl && key.alt && key.code === KEY_BACKSPACE) {
-      // NOTE: We need to call this in a timeout, because we need a clean
-      // stack in order for this to be a fatal error.
-      setTimeout(() => {
-        throw new Error(
-          'OOPSIE WOOPSIE!! UwU We made a fucky wucky!! A wittle' +
-            ' fucko boingo! The code monkeys at our headquarters are' +
-            ' working VEWY HAWD to fix this!'
-        );
-      });
-    }
-  });
-  return (next) => (action) => next(action);
-};
-
-export const relayMiddleware = (store) => {
-  const externalBrowser = location.search === '?external';
-  if (externalBrowser) {
-    // todo: implement
-  } else {
-    acquireHotKey(KEY_F10);
-    globalEvents.on('keydown', (key) => {
-      if (key === KEY_F10) {
-        store.dispatch(openExternalBrowser());
-      }
-    });
-  }
-  return (next) => (action) => {
-    const { type, payload, relayed } = action;
-    if (type === openExternalBrowser.type) {
-      window.open(location.href + '?external', '_blank');
-      return;
-    }
-    if (relayedTypes.includes(type) && !relayed && !externalBrowser) {
-      // todo: implement
-    }
-    return next(action);
-  };
-};

package/debug/reducer.ts

@@ -1,27 +0,0 @@
-/**
- * @file
- * @copyright 2020 Aleksej Komarov
- * @license MIT
- */
-
-type DebugState = {
-  kitchenSink: boolean;
-  debugLayout: boolean;
-};
-
-export const debugReducer = (state: DebugState, action) => {
-  const { type } = action;
-  if (type === 'debug/toggleKitchenSink') {
-    return {
-      ...state,
-      kitchenSink: !state.kitchenSink,
-    };
-  }
-  if (type === 'debug/toggleDebugLayout') {
-    return {
-      ...state,
-      debugLayout: !state.debugLayout,
-    };
-  }
-  return state;
-};

package/debug/selectors.ts

@@ -1,7 +0,0 @@
-/**
- * @file
- * @copyright 2020 Aleksej Komarov
- * @license MIT
- */
-
-export const selectDebug = (state) => state.debug;

package/layouts/Layout.tsx

@@ -1,75 +0,0 @@
-/**
- * @file
- * @copyright 2020 Aleksej Komarov
- * @license MIT
- */
-
-import { classes } from '../common/react';
-import { useEffect, useRef } from 'react';
-
-import {
-  BoxProps,
-  computeBoxClassName,
-  computeBoxProps,
-} from '../components/Box';
-import { addScrollableNode, removeScrollableNode } from '../src/events';
-
-type Props = Partial<{
-  theme: string;
-}> &
-  BoxProps;
-
-export function Layout(props: Props) {
-  const { className, theme = 'nanotrasen', children, ...rest } = props;
-
-  return (
-    <div className={'theme-' + theme}>
-      <div
-        className={classes(['Layout', className, computeBoxClassName(rest)])}
-        {...computeBoxProps(rest)}
-      >
-        {children}
-      </div>
-    </div>
-  );
-}
-
-type ContentProps = Partial<{
-  scrollable: boolean;
-}> &
-  BoxProps;
-
-function LayoutContent(props: ContentProps) {
-  const { className, scrollable, children, ...rest } = props;
-  const node = useRef<HTMLDivElement>(null);
-
-  useEffect(() => {
-    const self = node.current;
-
-    if (self && scrollable) {
-      addScrollableNode(self);
-    }
-    return () => {
-      if (self && scrollable) {
-        removeScrollableNode(self);
-      }
-    };
-  }, []);
-
-  return (
-    <div
-      className={classes([
-        'Layout__content',
-        scrollable && 'Layout__content--scrollable',
-        className,
-        computeBoxClassName(rest),
-      ])}
-      ref={node}
-      {...computeBoxProps(rest)}
-    >
-      {children}
-    </div>
-  );
-}
-
-Layout.Content = LayoutContent;

package/layouts/NtosWindow.tsx

@@ -1,162 +0,0 @@
-/**
- * @file
- * @copyright 2020 Aleksej Komarov
- * @license MIT
- */
-
-import { BooleanLike } from '../common/react';
-
-import { resolveAsset } from '../src/assets';
-import { useBackend } from '../src/backend';
-import { Box } from '../components/Box';
-import { Button } from '../components/Button';
-import { Window } from './Window';
-
-export type NTOSData = {
-  authenticatedUser: string | null;
-  authIDName: string;
-  comp_light_color: string;
-  has_id: BooleanLike;
-  has_light: BooleanLike;
-  id_name: string;
-  light_on: BooleanLike;
-  login: Login;
-  pai: string | null;
-  PC_batteryicon: string | null;
-  PC_batterypercent: string | null;
-  PC_device_theme: string;
-  PC_lowpower_mode: BooleanLike;
-  PC_ntneticon: string;
-  PC_programheaders: Program[];
-  PC_showexitprogram: BooleanLike;
-  PC_stationdate: string;
-  PC_stationtime: string;
-  programs: Program[];
-  proposed_login: Login;
-  removable_media: string[];
-  show_imprint: BooleanLike;
-};
-
-type Program = {
-  alert: BooleanLike;
-  desc: string;
-  header_program: BooleanLike;
-  icon: string;
-  name: string;
-  running: BooleanLike;
-};
-
-type Login = {
-  IDInserted?: BooleanLike;
-  IDJob: string | null;
-  IDName: string | null;
-};
-
-export const NtosWindow = (props) => {
-  const { title, width = 575, height = 700, children } = props;
-  const { act, data } = useBackend<NTOSData>();
-  const {
-    PC_device_theme,
-    PC_batteryicon,
-    PC_batterypercent,
-    PC_ntneticon,
-    PC_stationdate,
-    PC_stationtime,
-    PC_programheaders = [],
-    PC_showexitprogram,
-    PC_lowpower_mode,
-  } = data;
-
-  return (
-    <Window title={title} width={width} height={height} theme={PC_device_theme}>
-      <div className="NtosWindow">
-        <div className="NtosWindow__header NtosHeader">
-          <div className="NtosHeader__left">
-            <Box inline bold mr={2}>
-              <Button
-                width="26px"
-                lineHeight="22px"
-                textAlign="left"
-                tooltip={PC_stationdate}
-                color="transparent"
-                icon="calendar"
-                tooltipPosition="bottom"
-              />
-              {PC_stationtime}
-            </Box>
-            <Box inline italic mr={2} opacity={0.33}>
-              {(PC_device_theme === 'syndicate' && 'Syndix') || 'NtOS'}
-              {!!PC_lowpower_mode && ' - RUNNING ON LOW POWER MODE'}
-            </Box>
-          </div>
-          <div className="NtosHeader__right">
-            {PC_programheaders.map((header) => (
-              <Box key={header.icon} inline mr={1}>
-                <img
-                  className="NtosHeader__icon"
-                  src={resolveAsset(header.icon)}
-                />
-              </Box>
-            ))}
-            <Box inline>
-              {PC_ntneticon && (
-                <img
-                  className="NtosHeader__icon"
-                  src={resolveAsset(PC_ntneticon)}
-                />
-              )}
-            </Box>
-            {!!PC_batteryicon && (
-              <Box inline mr={1}>
-                <img
-                  className="NtosHeader__icon"
-                  src={resolveAsset(PC_batteryicon)}
-                />
-                {PC_batterypercent}
-              </Box>
-            )}
-            {!!PC_showexitprogram && (
-              <Button
-                color="transparent"
-                icon="window-minimize-o"
-                tooltip="Minimize"
-                tooltipPosition="bottom"
-                onClick={() => act('PC_minimize')}
-              />
-            )}
-            {!!PC_showexitprogram && (
-              <Button
-                color="transparent"
-                icon="window-close-o"
-                tooltip="Close"
-                tooltipPosition="bottom-start"
-                onClick={() => act('PC_exit')}
-              />
-            )}
-            {!PC_showexitprogram && (
-              <Button
-                textAlign="center"
-                color="transparent"
-                icon="power-off"
-                tooltip="Power off"
-                tooltipPosition="bottom-start"
-                onClick={() => act('PC_shutdown')}
-              />
-            )}
-          </div>
-        </div>
-        {children}
-      </div>
-    </Window>
-  );
-};
-
-const NtosWindowContent = (props) => {
-  return (
-    <div className="NtosWindow__content">
-      <Window.Content {...props} />
-    </div>
-  );
-};
-
-NtosWindow.Content = NtosWindowContent;

package/layouts/Pane.tsx

@@ -1,56 +0,0 @@
-/**
- * @file
- * @copyright 2020 Aleksej Komarov
- * @license MIT
- */
-
-import { classes } from '../common/react';
-
-import { useBackend } from '../src/backend';
-import { Box, BoxProps } from '../components/Box';
-import { useDebug } from '../debug';
-import { Layout } from './Layout';
-
-type Props = Partial<{
-  theme: string;
-}> &
-  BoxProps;
-
-export function Pane(props: Props) {
-  const { theme, children, className, ...rest } = props;
-  const { suspended } = useBackend();
-  const { debugLayout = false } = useDebug();
-
-  return (
-    <Layout className={classes(['Window', className])} theme={theme} {...rest}>
-      <Box fillPositionedParent className={debugLayout && 'debug-layout'}>
-        {!suspended && children}
-      </Box>
-    </Layout>
-  );
-}
-
-type ContentProps = Partial<{
-  fitted: boolean;
-  scrollable: boolean;
-}> &
-  BoxProps;
-
-function PaneContent(props: ContentProps) {
-  const { className, fitted, children, ...rest } = props;
-
-  return (
-    <Layout.Content
-      className={classes(['Window__content', className])}
-      {...rest}
-    >
-      {fitted ? (
-        children
-      ) : (
-        <div className="Window__contentPadding">{children}</div>
-      )}
-    </Layout.Content>
-  );
-}
-
-Pane.Content = PaneContent;