[MIRROR] Fixes TGUI debugging tools (#1921) (#2840)

* Fixes TGUI debugging tools (#82569) This project doesn't interfere with the game logic and aims to fix multiple debugging features that are currently broken. Unfortunately, kitchen sink and debug layout became broken after migration to Redux. This PR aims to fix those features. * Fixes TGUI debugging tools --------- Co-authored-by: NovaBot <[email protected]> Co-authored-by: Interception&? <[email protected]>
Fluffy-Frontier · Apr 11, 2024 · 87888cc · 87888cc
1 parent b35d62a
commit 87888cc
Show file tree

Hide file tree

Showing 5 changed files with 18 additions and 26 deletions.
diff --git a/tgui/packages/tgui/backend.ts b/tgui/packages/tgui/backend.ts
@@ -274,10 +274,6 @@ type BackendState<TData> = {
   shared: Record<string, any>;
   suspending: boolean;
   suspended: boolean;
-  debug?: {
-    debugLayout: boolean;
-    kitchenSink: boolean;
-  };
 };
 
 /**

diff --git a/tgui/packages/tgui/debug/KitchenSink.jsx b/tgui/packages/tgui/debug/KitchenSink.jsx
@@ -4,11 +4,12 @@
  * @license MIT
  */
 
-import { useLocalState } from '../backend';
+import { useState } from 'react';
+
 import { Flex, Section, Tabs } from '../components';
 import { Pane, Window } from '../layouts';
 
-const r = require.context('../stories', false, /\.stories\.js$/);
+const r = require.context('../stories', false, /\.stories\.jsx$/);
 
 /**
  * @returns {{
@@ -22,8 +23,8 @@ const getStories = () => r.keys().map((path) => r(path));
 
 export const KitchenSink = (props) => {
   const { panel } = props;
-  const [theme] = useLocalState('kitchenSinkTheme');
-  const [pageIndex, setPageIndex] = useLocalState('pageIndex', 0);
+  const [theme] = useState(null);
+  const [pageIndex, setPageIndex] = useState(0);
   const stories = getStories();
   const story = stories[pageIndex];
   const Layout = panel ? Pane : Window;

diff --git a/tgui/packages/tgui/layouts/Pane.tsx b/tgui/packages/tgui/layouts/Pane.tsx
@@ -9,6 +9,7 @@ import { classes } from 'common/react';
 import { useBackend } from '../backend';
 import { Box } from '../components';
 import { BoxProps } from '../components/Box';
+import { useDebug } from '../debug';
 import { Layout } from './Layout';
 
 type Props = Partial<{
@@ -18,11 +19,8 @@ type Props = Partial<{
 
 export function Pane(props: Props) {
   const { theme, children, className, ...rest } = props;
-  const { suspended, debug } = useBackend();
-  let debugLayout = false;
-  if (debug) {
-    debugLayout = debug.debugLayout;
-  }
+  const { suspended } = useBackend();
+  const { debugLayout = false } = useDebug();
 
   return (
     <Layout className={classes(['Window', className])} theme={theme} {...rest}>

diff --git a/tgui/packages/tgui/layouts/Window.tsx b/tgui/packages/tgui/layouts/Window.tsx
@@ -13,6 +13,7 @@ import { globalStore } from '../backend';
 import { Icon } from '../components';
 import { BoxProps } from '../components/Box';
 import { UI_DISABLED, UI_INTERACTIVE, UI_UPDATE } from '../constants';
+import { useDebug } from '../debug';
 import { toggleKitchenSink } from '../debug/actions';
 import {
   dragStartHandler,
@@ -48,10 +49,8 @@ export const Window = (props: Props) => {
     height,
   } = props;
 
-  const { config, suspended, debug } = useBackend();
-  if (suspended) {
-    return null;
-  }
+  const { config, suspended } = useBackend();
+  const { debugLayout = false } = useDebug();
 
   useEffect(() => {
     const updateGeometry = () => {
@@ -80,11 +79,6 @@ export const Window = (props: Props) => {
     };
   }, [width, height]);
 
-  let debugLayout = false;
-  if (debug) {
-    debugLayout = debug.debugLayout;
-  }
-
   const dispatch = globalStore.dispatch;
   const fancy = config.window?.fancy;
 
@@ -95,11 +89,11 @@ export const Window = (props: Props) => {
       ? config.status < UI_DISABLED
       : config.status < UI_INTERACTIVE);
 
-  return (
+  return suspended ? null : (
     <Layout className="Window" theme={theme}>
       <TitleBar
         className="Window__titleBar"
-        title={!suspended && (title || decodeHtmlEntities(config.title))}
+        title={title || decodeHtmlEntities(config.title)}
         status={config.status}
         fancy={fancy}
         onDragStart={dragStartHandler}

diff --git a/tgui/packages/tgui/routes.tsx b/tgui/packages/tgui/routes.tsx
@@ -5,6 +5,7 @@
  */
 
 import { useBackend } from './backend';
+import { useDebug } from './debug';
 import { LoadingScreen } from './interfaces/common/LoadingToolbox';
 import { Window } from './layouts';
 
@@ -52,7 +53,9 @@ const RefreshingWindow = () => {
 
 // Get the component for the current route
 export const getRoutedComponent = () => {
-  const { suspended, config, debug } = useBackend();
+  const { suspended, config } = useBackend();
+  const { kitchenSink = false } = useDebug();
+
   if (suspended) {
     return SuspendedWindow;
   }
@@ -61,7 +64,7 @@ export const getRoutedComponent = () => {
   }
   if (process.env.NODE_ENV !== 'production') {
     // Show a kitchen sink
-    if (debug?.kitchenSink) {
+    if (kitchenSink) {
       return require('./debug').KitchenSink;
     }
   }