tgui-core 1.0.2 → 1.0.4

package/{src/debug/KitchenSink.jsx → debug/KitchenSink.tsx}

@@ -1,56 +1,56 @@
-/**
- * @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(null);
-  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>
-  );
-};
+/**
+ * @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/{src/debug/actions.js → debug/actions.ts}

@@ -1,11 +1,11 @@
-/**
- * @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');
+/**
+ * @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/{src/debug/hooks.js → debug/hooks.ts}

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

package/{src/debug/middleware.js → debug/middleware.ts}

@@ -1,86 +1,67 @@
-/**
- * @file
- * @copyright 2020 Aleksej Komarov
- * @license MIT
- */
-
-import { KEY_BACKSPACE, KEY_F10, KEY_F11, KEY_F12 } from 'common/keycodes';
-
-import { globalEvents } from '../events';
-import { acquireHotKey } from '../hotkeys';
-import {
-  openExternalBrowser,
-  toggleDebugLayout,
-  toggleKitchenSink,
-} from './actions';
-
-// prettier-ignore
-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(() => {
-        // prettier-ignore
-        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 devServer = require('tgui-dev-server/link/client.cjs');
-  const externalBrowser = location.search === '?external';
-  if (externalBrowser) {
-    devServer.subscribe((msg) => {
-      const { type, payload } = msg;
-      if (type === 'relay' && payload.windowId === Byond.windowId) {
-        store.dispatch({
-          ...payload.action,
-          relayed: true,
-        });
-      }
-    });
-  } 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) {
-      devServer.sendMessage({
-        type: 'relay',
-        payload: {
-          windowId: Byond.windowId,
-          action,
-        },
-      });
-    }
-    return next(action);
-  };
-};
+/**
+ * @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/{src/debug/reducer.js → debug/reducer.ts}

@@ -1,22 +1,27 @@
-/**
- * @file
- * @copyright 2020 Aleksej Komarov
- * @license MIT
- */
-
-export const debugReducer = (state = {}, action) => {
-  const { type, payload } = action;
-  if (type === 'debug/toggleKitchenSink') {
-    return {
-      ...state,
-      kitchenSink: !state.kitchenSink,
-    };
-  }
-  if (type === 'debug/toggleDebugLayout') {
-    return {
-      ...state,
-      debugLayout: !state.debugLayout,
-    };
-  }
-  return state;
-};
+/**
+ * @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/{src/debug/selectors.js → debug/selectors.ts}

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

package/{src/layouts → layouts}/Layout.tsx

@@ -1,75 +1,75 @@
-/**
- * @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 '../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;
+/**
+ * @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;