From 16194555e9d91f6fe44711e24f7721a03af1ed3c Mon Sep 17 00:00:00 2001 From: paulrpg Date: Thu, 18 Jan 2024 23:15:36 +0000 Subject: [PATCH 1/6] got react working --- tgui/.eslintignore | 1 - tgui/babel.config.js | 40 ++- tgui/package.json | 5 +- tgui/packages/common/keys.ts | 39 +++ tgui/packages/common/react.ts | 9 - tgui/packages/common/redux.ts | 16 - tgui/packages/tgui-bench/package.json | 3 +- .../packages/tgui-bench/tests/Button.test.tsx | 2 +- .../tgui-panel/{Panel.js => Panel.jsx} | 14 +- .../tgui-panel/audio/NowPlayingWidget.js | 71 ----- .../tgui-panel/audio/NowPlayingWidget.jsx | 109 +++++++ tgui/packages/tgui-panel/audio/hooks.js | 8 +- .../tgui-panel/audio/{index.js => index.ts} | 0 .../tgui-panel/chat/ChatPageSettings.js | 8 +- tgui/packages/tgui-panel/chat/ChatPanel.js | 2 +- tgui/packages/tgui-panel/chat/ChatTabs.js | 10 +- tgui/packages/tgui-panel/chat/renderer.js | 2 +- tgui/packages/tgui-panel/game/hooks.js | 6 +- .../tgui-panel/{index.js => index.jsx} | 11 +- tgui/packages/tgui-panel/package.json | 4 +- .../packages/tgui-panel/ping/PingIndicator.js | 6 +- .../{SettingsPanel.js => SettingsPanel.jsx} | 32 +- tgui/packages/tgui-panel/settings/hooks.js | 8 +- .../packages/tgui-say/components/dragzone.tsx | 2 +- .../tgui-say/helpers/ChannelIterator.ts | 50 ++++ tgui/packages/tgui-say/helpers/ChatHistory.ts | 59 ++++ tgui/packages/tgui-say/interfaces/TguiSay.tsx | 12 +- tgui/packages/tgui-say/package.json | 3 +- tgui/packages/tgui-say/timers.ts | 19 ++ tgui/packages/tgui-say/types/index.tsx | 2 +- tgui/packages/tgui/backend.ts | 48 +-- .../tgui/components/AnimatedNumber.tsx | 2 +- tgui/packages/tgui/components/Autofocus.tsx | 26 +- tgui/packages/tgui/components/Blink.jsx | 2 +- .../tgui/components/BodyZoneSelector.tsx | 2 +- tgui/packages/tgui/components/Box.tsx | 277 +++++++++--------- tgui/packages/tgui/components/Button.jsx | 2 +- tgui/packages/tgui/components/ByondUi.jsx | 2 +- tgui/packages/tgui/components/Chart.jsx | 2 +- tgui/packages/tgui/components/Collapsible.jsx | 2 +- .../tgui/components/DraggableControl.jsx | 2 +- tgui/packages/tgui/components/Dropdown.jsx | 2 +- tgui/packages/tgui/components/FitText.tsx | 15 +- tgui/packages/tgui/components/Flex.tsx | 81 +++-- .../tgui/components/InfinitePlane.jsx | 2 +- tgui/packages/tgui/components/Input.jsx | 2 +- tgui/packages/tgui/components/KeyListener.tsx | 6 +- tgui/packages/tgui/components/LabeledList.tsx | 95 +++--- tgui/packages/tgui/components/NumberInput.jsx | 2 +- tgui/packages/tgui/components/Popper.tsx | 31 +- .../tgui/components/RestrictedInput.jsx | 2 +- tgui/packages/tgui/components/Section.tsx | 149 ++++------ tgui/packages/tgui/components/Stack.tsx | 31 +- tgui/packages/tgui/components/TextArea.jsx | 6 +- tgui/packages/tgui/components/TimeDisplay.jsx | 2 +- tgui/packages/tgui/components/Tooltip.tsx | 64 ++-- .../tgui/components/TrackOutsideClicks.tsx | 8 +- tgui/packages/tgui/debug/KitchenSink.jsx | 6 +- tgui/packages/tgui/debug/hooks.js | 4 +- tgui/packages/tgui/drag.ts | 4 +- tgui/packages/tgui/index.tsx | 13 +- tgui/packages/tgui/interfaces/AcidVest.jsx | 4 +- tgui/packages/tgui/interfaces/Adminhelp.tsx | 12 +- tgui/packages/tgui/interfaces/AlertModal.tsx | 14 +- .../tgui/interfaces/AlmayerControl.jsx | 10 +- .../interfaces/AltitudeControlConsole.jsx | 4 +- .../tgui/interfaces/AntiAirConsole.jsx | 9 +- tgui/packages/tgui/interfaces/Apc.jsx | 6 +- .../tgui/interfaces/AresInterface.jsx | 64 ++-- .../tgui/interfaces/Autodispenser.jsx | 4 +- tgui/packages/tgui/interfaces/Autolathe.jsx | 33 +-- tgui/packages/tgui/interfaces/Binoculars.jsx | 4 +- .../tgui/interfaces/BioSyntheticPrinter.jsx | 4 +- .../packages/tgui/interfaces/BotanyEditor.jsx | 10 +- .../tgui/interfaces/BotanyExtractor.jsx | 10 +- tgui/packages/tgui/interfaces/BrigCell.jsx | 8 +- .../tgui/interfaces/CameraConsole.jsx | 10 +- tgui/packages/tgui/interfaces/CanvasLayer.jsx | 2 +- tgui/packages/tgui/interfaces/CardMod.jsx | 29 +- tgui/packages/tgui/interfaces/CasSim.tsx | 5 +- tgui/packages/tgui/interfaces/Centrifuge.jsx | 4 +- tgui/packages/tgui/interfaces/Changelog.jsx | 8 +- .../tgui/interfaces/ChemDispenser.jsx | 4 +- tgui/packages/tgui/interfaces/ChooseFruit.jsx | 10 +- tgui/packages/tgui/interfaces/ChooseResin.jsx | 10 +- .../tgui/interfaces/ColorMatrixEditor.tsx | 4 +- .../tgui/interfaces/CommandTablet.jsx | 4 +- tgui/packages/tgui/interfaces/CrewConsole.jsx | 8 +- tgui/packages/tgui/interfaces/Cryo.jsx | 4 +- tgui/packages/tgui/interfaces/DemoSim.tsx | 5 +- tgui/packages/tgui/interfaces/Disposals.jsx | 4 +- tgui/packages/tgui/interfaces/DrawnMap.jsx | 2 +- .../tgui/interfaces/DropshipFlightControl.tsx | 45 ++- .../interfaces/DropshipWeaponsConsole.tsx | 26 +- .../tgui/interfaces/ElevatorControl.tsx | 20 +- .../tgui/interfaces/EscapePodConsole.tsx | 4 +- tgui/packages/tgui/interfaces/FaxMachine.jsx | 20 +- tgui/packages/tgui/interfaces/Filteriffic.jsx | 48 ++- .../tgui/interfaces/FiltrationControl.jsx | 4 +- tgui/packages/tgui/interfaces/HealthScan.jsx | 16 +- tgui/packages/tgui/interfaces/HiveFaction.jsx | 4 +- tgui/packages/tgui/interfaces/HiveLeaders.jsx | 4 +- tgui/packages/tgui/interfaces/HiveStatus.jsx | 48 +-- .../packages/tgui/interfaces/IcMedalsPanel.js | 5 +- tgui/packages/tgui/interfaces/JoeEmotes.tsx | 11 +- tgui/packages/tgui/interfaces/KeyBinds.jsx | 30 +- tgui/packages/tgui/interfaces/KillPanel.jsx | 14 +- .../packages/tgui/interfaces/LanguageMenu.jsx | 10 +- tgui/packages/tgui/interfaces/ListInput.jsx | 30 +- .../tgui/interfaces/ListInputModal.tsx | 15 +- tgui/packages/tgui/interfaces/MarkMenu.tsx | 25 +- tgui/packages/tgui/interfaces/MedalsPanel.jsx | 10 +- .../packages/tgui/interfaces/MedalsViewer.tsx | 4 +- .../tgui/interfaces/MfdPanels/CameraPanel.tsx | 10 +- .../interfaces/MfdPanels/EquipmentPanel.tsx | 29 +- .../interfaces/MfdPanels/FiremissionPanel.tsx | 57 ++-- .../tgui/interfaces/MfdPanels/FultonPanel.tsx | 9 +- .../tgui/interfaces/MfdPanels/MGPanel.tsx | 8 +- .../tgui/interfaces/MfdPanels/MapPanel.tsx | 8 +- .../interfaces/MfdPanels/MedevacPanel.tsx | 9 +- .../MfdPanels/MultifunctionDisplay.tsx | 22 +- .../tgui/interfaces/MfdPanels/SentryPanel.tsx | 10 +- .../interfaces/MfdPanels/SpotlightPanel.tsx | 8 +- .../interfaces/MfdPanels/SupportPanel.tsx | 8 +- .../interfaces/MfdPanels/TargetAquisition.tsx | 90 +++--- .../tgui/interfaces/MfdPanels/WeaponPanel.tsx | 27 +- .../interfaces/MfdPanels/stateManagers.ts | 55 +--- .../tgui/interfaces/MfdPanels/types.ts | 4 +- tgui/packages/tgui/interfaces/Microwave.tsx | 4 +- tgui/packages/tgui/interfaces/Mortar.jsx | 20 +- .../tgui/interfaces/NavigationShuttle.tsx | 39 ++- tgui/packages/tgui/interfaces/NoticeBoard.tsx | 4 +- tgui/packages/tgui/interfaces/NuclearBomb.jsx | 4 +- .../tgui/interfaces/NumberInputModal.tsx | 10 +- tgui/packages/tgui/interfaces/Orbit/index.tsx | 56 ++-- .../tgui/interfaces/OrbitalCannonConsole.jsx | 4 +- .../tgui/interfaces/OverwatchConsole.jsx | 63 ++-- .../tgui/interfaces/PartFabricator.jsx | 8 +- .../interfaces/ParticleEdit/EntriesBasic.tsx | 36 +-- .../ParticleEdit/EntriesGenerators.tsx | 22 +- .../interfaces/ParticleEdit/Generators.tsx | 4 +- .../tgui/interfaces/ParticleEdit/Tutorial.tsx | 4 +- .../tgui/interfaces/ParticleEdit/index.tsx | 6 +- tgui/packages/tgui/interfaces/PhoneMenu.jsx | 16 +- tgui/packages/tgui/interfaces/PlayerPanel.jsx | 55 ++-- tgui/packages/tgui/interfaces/Playtime.tsx | 10 +- tgui/packages/tgui/interfaces/PodLauncher.jsx | 134 ++++----- .../tgui/interfaces/PortableVendor.tsx | 12 +- tgui/packages/tgui/interfaces/Proximity.jsx | 4 +- .../tgui/interfaces/PublishedDocsHud.tsx | 4 +- tgui/packages/tgui/interfaces/Radar.tsx | 18 +- tgui/packages/tgui/interfaces/Radio.jsx | 4 +- .../tgui/interfaces/ResearchDoorDisplay.jsx | 4 +- .../tgui/interfaces/ResearchMemories.jsx | 16 +- .../tgui/interfaces/ResearchTerminal.tsx | 74 ++--- tgui/packages/tgui/interfaces/STUI.jsx | 28 +- .../tgui/interfaces/SelfDestructConsole.jsx | 9 +- tgui/packages/tgui/interfaces/Sentencing.jsx | 25 +- tgui/packages/tgui/interfaces/SentryGunUI.tsx | 97 +++--- .../tgui/interfaces/ShuttleManipulator.tsx | 17 +- tgui/packages/tgui/interfaces/Signaller.jsx | 4 +- tgui/packages/tgui/interfaces/SkillsMenu.jsx | 14 +- tgui/packages/tgui/interfaces/Sleeper.jsx | 35 ++- tgui/packages/tgui/interfaces/SmartFridge.tsx | 36 +-- tgui/packages/tgui/interfaces/Smes.jsx | 4 +- tgui/packages/tgui/interfaces/SquadInfo.tsx | 46 ++- tgui/packages/tgui/interfaces/SquadMod.jsx | 4 +- .../tgui/interfaces/StatbrowserOptions.jsx | 16 +- .../tgui/interfaces/StationAlertConsole.jsx | 9 +- .../tgui/interfaces/SupplyDropConsole.jsx | 4 +- .../tgui/interfaces/TacmapAdminPanel.jsx | 10 +- tgui/packages/tgui/interfaces/TacticalMap.tsx | 21 +- tgui/packages/tgui/interfaces/Tank.jsx | 4 +- tgui/packages/tgui/interfaces/TechControl.jsx | 6 +- .../packages/tgui/interfaces/TechMemories.jsx | 16 +- tgui/packages/tgui/interfaces/TechNode.jsx | 4 +- .../tgui/interfaces/TeleporterConsole.jsx | 4 +- .../tgui/interfaces/TextInputModal.tsx | 14 +- tgui/packages/tgui/interfaces/Timer.jsx | 4 +- .../packages/tgui/interfaces/TutorialMenu.tsx | 18 +- .../tgui/interfaces/VehicleStatus.jsx | 22 +- tgui/packages/tgui/interfaces/Vending.tsx | 36 +-- .../tgui/interfaces/VendingSorted.tsx | 37 ++- tgui/packages/tgui/interfaces/VoteMenu.jsx | 18 +- tgui/packages/tgui/interfaces/VoxPanel.jsx | 47 ++- .../packages/tgui/interfaces/VultureScope.tsx | 28 +- tgui/packages/tgui/interfaces/WeaponStats.jsx | 97 +++--- tgui/packages/tgui/interfaces/Wires.jsx | 9 +- tgui/packages/tgui/interfaces/WorkingJoe.jsx | 36 +-- .../packages/tgui/interfaces/YautjaEmotes.tsx | 11 +- .../tgui/interfaces/common/AccessList.jsx | 8 +- tgui/packages/tgui/interfaces/common/Dpad.tsx | 20 +- .../interfaces/common/ElectricalPanel.tsx | 20 +- .../tgui/interfaces/common/InputButtons.tsx | 4 +- .../common/InterfaceLockNoticeBox.jsx | 4 +- .../tgui/interfaces/common/TimedCallback.tsx | 2 +- tgui/packages/tgui/layouts/NtosWindow.jsx | 4 +- tgui/packages/tgui/layouts/Pane.jsx | 6 +- tgui/packages/tgui/layouts/Window.jsx | 202 ------------- tgui/packages/tgui/layouts/Window.tsx | 231 +++++++++++++++ tgui/packages/tgui/package.json | 6 +- tgui/packages/tgui/renderer.ts | 2 +- tgui/packages/tgui/routes.tsx | 13 +- tgui/packages/tgui/store.ts | 19 +- tgui/packages/tgui/stories/Blink.stories.jsx | 2 +- .../tgui/stories/BlockQuote.stories.jsx | 2 +- tgui/packages/tgui/stories/Box.stories.jsx | 2 +- tgui/packages/tgui/stories/Button.stories.jsx | 2 +- .../packages/tgui/stories/ByondUi.stories.jsx | 3 +- .../tgui/stories/Collapsible.stories.jsx | 2 +- tgui/packages/tgui/stories/Flex.stories.jsx | 14 +- tgui/packages/tgui/stories/Input.stories.jsx | 6 +- .../tgui/stories/LabeledList.stories.jsx | 2 +- .../tgui/stories/ProgressBar.stories.jsx | 6 +- tgui/packages/tgui/stories/Stack.stories.jsx | 2 +- .../packages/tgui/stories/Storage.stories.jsx | 2 +- tgui/packages/tgui/stories/Tabs.stories.jsx | 10 +- tgui/packages/tgui/stories/Themes.stories.jsx | 4 +- tgui/yarn.lock | 241 ++++++++++----- 219 files changed, 2377 insertions(+), 2390 deletions(-) create mode 100644 tgui/packages/common/keys.ts rename tgui/packages/tgui-panel/{Panel.js => Panel.jsx} (93%) delete mode 100644 tgui/packages/tgui-panel/audio/NowPlayingWidget.js create mode 100644 tgui/packages/tgui-panel/audio/NowPlayingWidget.jsx rename tgui/packages/tgui-panel/audio/{index.js => index.ts} (100%) rename tgui/packages/tgui-panel/{index.js => index.jsx} (94%) rename tgui/packages/tgui-panel/settings/{SettingsPanel.js => SettingsPanel.jsx} (90%) create mode 100644 tgui/packages/tgui-say/helpers/ChannelIterator.ts create mode 100644 tgui/packages/tgui-say/helpers/ChatHistory.ts create mode 100644 tgui/packages/tgui-say/timers.ts delete mode 100644 tgui/packages/tgui/layouts/Window.jsx create mode 100644 tgui/packages/tgui/layouts/Window.tsx diff --git a/tgui/.eslintignore b/tgui/.eslintignore index a59187b933ae..7965d0731a6e 100644 --- a/tgui/.eslintignore +++ b/tgui/.eslintignore @@ -3,4 +3,3 @@ /**/*.bundle.* /**/*.chunk.* /**/*.hot-update.* -/packages/inferno/** diff --git a/tgui/babel.config.js b/tgui/babel.config.js index e702c9a7119d..69a5a401cc77 100644 --- a/tgui/babel.config.js +++ b/tgui/babel.config.js @@ -6,28 +6,36 @@ const createBabelConfig = (options) => { const { presets = [], plugins = [], removeConsole } = options; - // prettier-ignore return { presets: [ - [require.resolve('@babel/preset-typescript'), { - allowDeclareFields: true, - }], - [require.resolve('@babel/preset-env'), { - modules: 'commonjs', - useBuiltIns: 'entry', - corejs: '3', - spec: false, - loose: true, - targets: [], - }], + [ + require.resolve('@babel/preset-typescript'), + { + allowDeclareFields: true, + }, + ], + [ + require.resolve('@babel/preset-env'), + { + modules: 'commonjs', + useBuiltIns: 'entry', + corejs: '3.3.2', + spec: false, + loose: true, + targets: [], + }, + ], + [require.resolve('@babel/preset-react'), { runtime: 'automatic' }], ...presets, ].filter(Boolean), plugins: [ - [require.resolve('@babel/plugin-proposal-class-properties'), { - loose: true, - }], + [ + require.resolve('@babel/plugin-transform-class-properties'), + { + loose: true, + }, + ], require.resolve('@babel/plugin-transform-jscript'), - require.resolve('babel-plugin-inferno'), removeConsole && require.resolve('babel-plugin-transform-remove-console'), require.resolve('common/string.babel-plugin.cjs'), ...plugins, diff --git a/tgui/package.json b/tgui/package.json index c52d0f754bdd..77ff3be9b01f 100644 --- a/tgui/package.json +++ b/tgui/package.json @@ -22,9 +22,10 @@ "dependencies": { "@babel/core": "^7.15.0", "@babel/eslint-parser": "^7.15.0", - "@babel/plugin-proposal-class-properties": "^7.14.5", + "@babel/plugin-transform-class-properties": "^7.23.3", "@babel/plugin-transform-jscript": "^7.14.5", "@babel/preset-env": "^7.15.0", + "@babel/preset-react": "^7.23.3", "@babel/preset-typescript": "^7.15.0", "@types/jest": "^27.0.1", "@types/jsdom": "^16.2.13", @@ -34,7 +35,6 @@ "@typescript-eslint/parser": "^4.29.1", "babel-jest": "^27.0.6", "babel-loader": "^8.2.2", - "babel-plugin-inferno": "^6.3.0", "babel-plugin-transform-remove-console": "^6.9.4", "common": "workspace:*", "css-loader": "^5.2.7", @@ -44,7 +44,6 @@ "eslint-plugin-react": "^7.24.0", "eslint-plugin-unused-imports": "^1.1.4", "file-loader": "^6.2.0", - "inferno": "^7.4.8", "jest": "^27.0.6", "jest-circus": "^27.0.6", "jsdom": "^16.7.0", diff --git a/tgui/packages/common/keys.ts b/tgui/packages/common/keys.ts new file mode 100644 index 000000000000..34ac9e1614dd --- /dev/null +++ b/tgui/packages/common/keys.ts @@ -0,0 +1,39 @@ +/** + * ### Key codes. + * event.keyCode is deprecated, use this reference instead. + * + * Handles modifier keys (Shift, Alt, Control) and arrow keys. + * + * For alphabetical keys, use the actual character (e.g. 'a') instead of the key code. + * + * Something isn't here that you want? Just add it: + * @url https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key/Key_Values + * @usage + * ```ts + * import { KEY } from 'tgui/common/keys'; + * + * if (event.key === KEY.Enter) { + * // do something + * } + * ``` + */ +export enum KEY { + Alt = 'Alt', + Backspace = 'Backspace', + Control = 'Control', + Delete = 'Delete', + Down = 'ArrowDown', + End = 'End', + Enter = 'Enter', + Escape = 'Escape', + Home = 'Home', + Insert = 'Insert', + Left = 'ArrowLeft', + PageDown = 'PageDown', + PageUp = 'PageUp', + Right = 'ArrowRight', + Shift = 'Shift', + Space = ' ', + Tab = 'Tab', + Up = 'ArrowUp', +} diff --git a/tgui/packages/common/react.ts b/tgui/packages/common/react.ts index 8e42d0971ab4..dd6430953445 100644 --- a/tgui/packages/common/react.ts +++ b/tgui/packages/common/react.ts @@ -51,15 +51,6 @@ export const shallowDiffers = (a: object, b: object) => { return false; }; -/** - * Default inferno hooks for pure components. - */ -export const pureComponentHooks = { - onComponentShouldUpdate: (lastProps, nextProps) => { - return shallowDiffers(lastProps, nextProps); - }, -}; - /** * A helper to determine whether the object is renderable by React. */ diff --git a/tgui/packages/common/redux.ts b/tgui/packages/common/redux.ts index 4e618bddafd0..7b4999d93b1a 100644 --- a/tgui/packages/common/redux.ts +++ b/tgui/packages/common/redux.ts @@ -194,19 +194,3 @@ export const createAction = ( return actionCreator; }; - -// Implementation specific -// -------------------------------------------------------- - -export const useDispatch = (context: { - store: Store; -}): Dispatch => { - return context.store.dispatch; -}; - -export const useSelector = ( - context: { store: Store }, - selector: (state: State) => Selected -): Selected => { - return selector(context.store.getState()); -}; diff --git a/tgui/packages/tgui-bench/package.json b/tgui/packages/tgui-bench/package.json index 49bc0c423c28..7cdb0ce7e3cf 100644 --- a/tgui/packages/tgui-bench/package.json +++ b/tgui/packages/tgui-bench/package.json @@ -6,10 +6,9 @@ "common": "workspace:*", "fastify": "^3.29.4", "fastify-static": "^4.2.3", - "inferno": "^7.4.8", - "inferno-vnode-flags": "^7.4.8", "lodash": "^4.17.21", "platform": "^1.3.6", + "react": "^18.2.0", "tgui": "workspace:*" } } diff --git a/tgui/packages/tgui-bench/tests/Button.test.tsx b/tgui/packages/tgui-bench/tests/Button.test.tsx index 6b806d720ab8..6340e915c079 100644 --- a/tgui/packages/tgui-bench/tests/Button.test.tsx +++ b/tgui/packages/tgui-bench/tests/Button.test.tsx @@ -1,4 +1,4 @@ -import { linkEvent } from 'inferno'; +import { linkEvent } from 'react'; import { Button } from 'tgui/components'; import { createRenderer } from 'tgui/renderer'; diff --git a/tgui/packages/tgui-panel/Panel.js b/tgui/packages/tgui-panel/Panel.jsx similarity index 93% rename from tgui/packages/tgui-panel/Panel.js rename to tgui/packages/tgui-panel/Panel.jsx index 83150ab6ef13..cb6b1416494a 100644 --- a/tgui/packages/tgui-panel/Panel.js +++ b/tgui/packages/tgui-panel/Panel.jsx @@ -14,17 +14,17 @@ import { PingIndicator } from './ping'; import { ReconnectButton } from './reconnect'; import { SettingsPanel, useSettings } from './settings'; -export const Panel = (props, context) => { +export const Panel = (props) => { // IE8-10: Needs special treatment due to missing Flex support if (Byond.IS_LTE_IE10) { return ; } - const audio = useAudio(context); - const settings = useSettings(context); - const game = useGame(context); + const audio = useAudio(); + const settings = useSettings(); + const game = useGame(); if (process.env.NODE_ENV !== 'production') { const { useDebug, KitchenSink } = require('tgui/debug'); - const debug = useDebug(context); + const debug = useDebug(); if (debug.kitchenSink) { return ; } @@ -103,8 +103,8 @@ export const Panel = (props, context) => { ); }; -const HoboPanel = (props, context) => { - const settings = useSettings(context); +const HoboPanel = (props) => { + const settings = useSettings(); return ( diff --git a/tgui/packages/tgui-panel/audio/NowPlayingWidget.js b/tgui/packages/tgui-panel/audio/NowPlayingWidget.js deleted file mode 100644 index 672ecfad7cec..000000000000 --- a/tgui/packages/tgui-panel/audio/NowPlayingWidget.js +++ /dev/null @@ -1,71 +0,0 @@ -/** - * @file - * @copyright 2020 Aleksej Komarov - * @license MIT - */ - -import { toFixed } from 'common/math'; -import { useDispatch, useSelector } from 'common/redux'; -import { Button, Flex, Knob } from 'tgui/components'; -import { useSettings } from '../settings'; -import { selectAudio } from './selectors'; - -export const NowPlayingWidget = (props, context) => { - const audio = useSelector(context, selectAudio); - const dispatch = useDispatch(context); - const settings = useSettings(context); - const title = audio.meta?.title; - return ( - - {(audio.playing && ( - <> - - Now playing: - - - {title || 'Unknown Track'} - - - )) || ( - - Nothing to play. - - )} - {audio.playing && ( - - @@ -82,9 +82,9 @@ export class TguiSay extends Component<{}, State> { )} diff --git a/tgui/packages/tgui-say/package.json b/tgui/packages/tgui-say/package.json index 5ee9e432606f..6fc66ade82f1 100644 --- a/tgui/packages/tgui-say/package.json +++ b/tgui/packages/tgui-say/package.json @@ -3,8 +3,9 @@ "name": "tgui-say", "version": "1.0.0", "dependencies": { + "@types/react": "^18.2.39", "common": "workspace:*", - "inferno": "^7.4.8", + "react": "^18.2.0", "tgui": "workspace:*", "tgui-polyfill": "workspace:*" } diff --git a/tgui/packages/tgui-say/timers.ts b/tgui/packages/tgui-say/timers.ts new file mode 100644 index 000000000000..7b9fffc87fc2 --- /dev/null +++ b/tgui/packages/tgui-say/timers.ts @@ -0,0 +1,19 @@ +import { debounce, throttle } from 'common/timer'; + +const SECONDS = 1000; + +/** Timers: Prevents overloading the server, throttles messages */ +export const byondMessages = { + // Debounce: Prevents spamming the server + channelIncrementMsg: debounce( + (visible: boolean) => Byond.sendMessage('thinking', { visible }), + 0.4 * SECONDS + ), + forceSayMsg: debounce( + (entry: string) => Byond.sendMessage('force', { entry, channel: 'Say' }), + 1 * SECONDS, + true + ), + // Throttle: Prevents spamming the server + typingMsg: throttle(() => Byond.sendMessage('typing'), 4 * SECONDS), +} as const; diff --git a/tgui/packages/tgui-say/types/index.tsx b/tgui/packages/tgui-say/types/index.tsx index abd29630ff68..02da4b1ddea7 100644 --- a/tgui/packages/tgui-say/types/index.tsx +++ b/tgui/packages/tgui-say/types/index.tsx @@ -1,4 +1,4 @@ -import { RefObject } from 'inferno'; +import { RefObject } from 'react'; export type Modal = { events: Events; diff --git a/tgui/packages/tgui/backend.ts b/tgui/packages/tgui/backend.ts index dd4cae9e6227..746e511a5027 100644 --- a/tgui/packages/tgui/backend.ts +++ b/tgui/packages/tgui/backend.ts @@ -21,6 +21,12 @@ import { resumeRenderer, suspendRenderer } from './renderer'; const logger = createLogger('backend'); +export let globalStore; + +export const setGlobalStore = (store) => { + globalStore = store; +}; + export const backendUpdate = createAction('backend/update'); export const backendSetSharedState = createAction('backend/setSharedState'); export const backendSuspendStart = createAction('backend/suspendStart'); @@ -267,6 +273,10 @@ type BackendState = { shared: Record; suspending: boolean; suspended: boolean; + debug?: { + debugLayout: boolean; + kitchenSink: boolean; + }; }; /** @@ -280,9 +290,9 @@ export const selectBackend = (state: any): BackendState => * * Includes the `act` function for performing DM actions. */ -export const useBackend = (context: any) => { - const { store } = context; - const state = selectBackend(store.getState()); +export const useBackend = () => { + const state: BackendState = globalStore?.getState()?.backend; + return { ...state, act: sendAct, @@ -308,18 +318,16 @@ type StateWithSetter = [T, (nextState: T) => void]; * @param initialState Initializes your global variable with this value. */ export const useLocalState = ( - context: any, key: string, initialState: T ): StateWithSetter => { - const { store } = context; - const state = selectBackend(store.getState()); - const sharedStates = state.shared ?? {}; + const state = globalStore?.getState()?.backend; + const sharedStates = state?.shared ?? {}; const sharedState = key in sharedStates ? sharedStates[key] : initialState; return [ sharedState, (nextState) => { - store.dispatch( + globalStore.dispatch( backendSetSharedState({ key, nextState: @@ -347,27 +355,31 @@ export const useLocalState = ( * @param initialState Initializes your global variable with this value. */ export const useSharedState = ( - context: any, key: string, initialState: T ): StateWithSetter => { - const { store } = context; - const state = selectBackend(store.getState()); - const sharedStates = state.shared ?? {}; + const state = globalStore?.getState()?.backend; + const sharedStates = state?.shared ?? {}; const sharedState = key in sharedStates ? sharedStates[key] : initialState; return [ sharedState, (nextState) => { - // prettier-ignore Byond.sendMessage({ type: 'setSharedState', key, - value: JSON.stringify( - typeof nextState === 'function' - ? nextState(sharedState) - : nextState - ) || '', + value: + JSON.stringify( + typeof nextState === 'function' ? nextState(sharedState) : nextState + ) || '', }); }, ]; }; + +export const useDispatch = () => { + return globalStore.dispatch; +}; + +export const useSelector = (selector: (state: any) => any) => { + return selector(globalStore?.getState()); +}; diff --git a/tgui/packages/tgui/components/AnimatedNumber.tsx b/tgui/packages/tgui/components/AnimatedNumber.tsx index ed3be2e5ef3d..956dc0a8232c 100644 --- a/tgui/packages/tgui/components/AnimatedNumber.tsx +++ b/tgui/packages/tgui/components/AnimatedNumber.tsx @@ -5,7 +5,7 @@ */ import { clamp, toFixed } from 'common/math'; -import { Component, createRef } from 'inferno'; +import { Component, createRef } from 'react'; const isSafeNumber = (value: number) => { // prettier-ignore diff --git a/tgui/packages/tgui/components/Autofocus.tsx b/tgui/packages/tgui/components/Autofocus.tsx index 28945dd7aa48..a0b3f6f76590 100644 --- a/tgui/packages/tgui/components/Autofocus.tsx +++ b/tgui/packages/tgui/components/Autofocus.tsx @@ -1,19 +1,17 @@ -import { Component, createRef } from 'inferno'; +import { createRef, PropsWithChildren, useEffect } from 'react'; -export class Autofocus extends Component { - ref = createRef(); +export const Autofocus = (props: PropsWithChildren) => { + const ref = createRef(); - componentDidMount() { + useEffect(() => { setTimeout(() => { - this.ref.current?.focus(); + ref.current?.focus(); }, 1); - } + }, []); - render() { - return ( -
- {this.props.children} -
- ); - } -} + return ( +
+ {props.children} +
+ ); +}; diff --git a/tgui/packages/tgui/components/Blink.jsx b/tgui/packages/tgui/components/Blink.jsx index bd781336b463..70d2f1393eb2 100644 --- a/tgui/packages/tgui/components/Blink.jsx +++ b/tgui/packages/tgui/components/Blink.jsx @@ -1,4 +1,4 @@ -import { Component } from 'inferno'; +import { Component } from 'react'; const DEFAULT_BLINKING_INTERVAL = 1000; const DEFAULT_BLINKING_TIME = 1000; diff --git a/tgui/packages/tgui/components/BodyZoneSelector.tsx b/tgui/packages/tgui/components/BodyZoneSelector.tsx index eb845458cd23..5daf2960a570 100644 --- a/tgui/packages/tgui/components/BodyZoneSelector.tsx +++ b/tgui/packages/tgui/components/BodyZoneSelector.tsx @@ -1,4 +1,4 @@ -import { Component, createRef } from 'inferno'; +import { Component, createRef } from 'react'; import { resolveAsset } from '../assets'; import { Box } from './Box'; diff --git a/tgui/packages/tgui/components/Box.tsx b/tgui/packages/tgui/components/Box.tsx index ed10072b6239..8da3235553fa 100644 --- a/tgui/packages/tgui/components/Box.tsx +++ b/tgui/packages/tgui/components/Box.tsx @@ -4,59 +4,58 @@ * @license MIT */ -import { BooleanLike, classes, pureComponentHooks } from 'common/react'; -import { createVNode, InfernoNode, SFC } from 'inferno'; -import { ChildFlags, VNodeFlags } from 'inferno-vnode-flags'; +import { BooleanLike, classes } from 'common/react'; +import { createElement, ReactNode } from 'react'; import { CSS_COLORS } from '../constants'; export type BoxProps = { [key: string]: any; - as?: string; - className?: string | BooleanLike; - children?: InfernoNode; - position?: string | BooleanLike; - overflow?: string | BooleanLike; - overflowX?: string | BooleanLike; - overflowY?: string | BooleanLike; - top?: string | BooleanLike; - bottom?: string | BooleanLike; - left?: string | BooleanLike; - right?: string | BooleanLike; - width?: string | BooleanLike; - minWidth?: string | BooleanLike; - maxWidth?: string | BooleanLike; - height?: string | BooleanLike; - minHeight?: string | BooleanLike; - maxHeight?: string | BooleanLike; - fontSize?: string | BooleanLike; - fontFamily?: string; - lineHeight?: string | BooleanLike; - opacity?: number; - textAlign?: string | BooleanLike; - verticalAlign?: string | BooleanLike; - inline?: BooleanLike; - bold?: BooleanLike; - italic?: BooleanLike; - nowrap?: BooleanLike; - preserveWhitespace?: BooleanLike; - m?: string | BooleanLike; - mx?: string | BooleanLike; - my?: string | BooleanLike; - mt?: string | BooleanLike; - mb?: string | BooleanLike; - ml?: string | BooleanLike; - mr?: string | BooleanLike; - p?: string | BooleanLike; - px?: string | BooleanLike; - py?: string | BooleanLike; - pt?: string | BooleanLike; - pb?: string | BooleanLike; - pl?: string | BooleanLike; - pr?: string | BooleanLike; - color?: string | BooleanLike; - textColor?: string | BooleanLike; - backgroundColor?: string | BooleanLike; - fillPositionedParent?: boolean; + readonly as?: string; + readonly className?: string | BooleanLike; + readonly children?: ReactNode; + readonly position?: string | BooleanLike; + readonly overflow?: string | BooleanLike; + readonly overflowX?: string | BooleanLike; + readonly overflowY?: string | BooleanLike; + readonly top?: string | BooleanLike; + readonly bottom?: string | BooleanLike; + readonly left?: string | BooleanLike; + readonly right?: string | BooleanLike; + readonly width?: string | BooleanLike; + readonly minWidth?: string | BooleanLike; + readonly maxWidth?: string | BooleanLike; + readonly height?: string | BooleanLike; + readonly minHeight?: string | BooleanLike; + readonly maxHeight?: string | BooleanLike; + readonly fontSize?: string | BooleanLike; + readonly fontFamily?: string; + readonly lineHeight?: string | BooleanLike; + readonly opacity?: number; + readonly textAlign?: string | BooleanLike; + readonly verticalAlign?: string | BooleanLike; + readonly inline?: BooleanLike; + readonly bold?: BooleanLike; + readonly italic?: BooleanLike; + readonly nowrap?: BooleanLike; + readonly preserveWhitespace?: BooleanLike; + readonly m?: string | BooleanLike; + readonly mx?: string | BooleanLike; + readonly my?: string | BooleanLike; + readonly mt?: string | BooleanLike; + readonly mb?: string | BooleanLike; + readonly ml?: string | BooleanLike; + readonly mr?: string | BooleanLike; + readonly p?: string | BooleanLike; + readonly px?: string | BooleanLike; + readonly py?: string | BooleanLike; + readonly pt?: string | BooleanLike; + readonly pb?: string | BooleanLike; + readonly pl?: string | BooleanLike; + readonly pr?: string | BooleanLike; + readonly color?: string | BooleanLike; + readonly textColor?: string | BooleanLike; + readonly backgroundColor?: string | BooleanLike; + readonly fillPositionedParent?: boolean; }; /** @@ -65,15 +64,12 @@ export type BoxProps = { export const unit = (value: unknown): string | undefined => { if (typeof value === 'string') { // Transparently convert pixels into rem units - if (value.endsWith('px') && !Byond.IS_LTE_IE8) { + if (value.endsWith('px')) { return parseFloat(value) / 12 + 'rem'; } return value; } if (typeof value === 'number') { - if (Byond.IS_LTE_IE8) { - return value * 12 + 'px'; - } return value + 'rem'; } }; @@ -128,70 +124,66 @@ const mapColorPropTo = (attrName) => (style, value) => { } }; -const styleMapperByPropName = { - // Direct mapping - position: mapRawPropTo('position'), - overflow: mapRawPropTo('overflow'), - overflowX: mapRawPropTo('overflow-x'), - overflowY: mapRawPropTo('overflow-y'), - top: mapUnitPropTo('top', unit), +// String / number props +const stringStyleMap = { bottom: mapUnitPropTo('bottom', unit), + fontFamily: mapRawPropTo('fontFamily'), + fontSize: mapUnitPropTo('fontSize', unit), + height: mapUnitPropTo('height', unit), left: mapUnitPropTo('left', unit), + maxHeight: mapUnitPropTo('maxHeight', unit), + maxWidth: mapUnitPropTo('maxWidth', unit), + minHeight: mapUnitPropTo('minHeight', unit), + minWidth: mapUnitPropTo('minWidth', unit), + opacity: mapRawPropTo('opacity'), + overflow: mapRawPropTo('overflow'), + overflowX: mapRawPropTo('overflowX'), + overflowY: mapRawPropTo('overflowY'), + position: mapRawPropTo('position'), right: mapUnitPropTo('right', unit), + textAlign: mapRawPropTo('textAlign'), + top: mapUnitPropTo('top', unit), + verticalAlign: mapRawPropTo('verticalAlign'), width: mapUnitPropTo('width', unit), - minWidth: mapUnitPropTo('min-width', unit), - maxWidth: mapUnitPropTo('max-width', unit), - height: mapUnitPropTo('height', unit), - minHeight: mapUnitPropTo('min-height', unit), - maxHeight: mapUnitPropTo('max-height', unit), - fontSize: mapUnitPropTo('font-size', unit), - fontFamily: mapRawPropTo('font-family'), + lineHeight: (style, value) => { if (typeof value === 'number') { - style['line-height'] = value; + style['lineHeight'] = value; } else if (typeof value === 'string') { - style['line-height'] = unit(value); + style['lineHeight'] = unit(value); } }, - opacity: mapRawPropTo('opacity'), - textAlign: mapRawPropTo('text-align'), - verticalAlign: mapRawPropTo('vertical-align'), - // Boolean props - inline: mapBooleanPropTo('display', 'inline-block'), - bold: mapBooleanPropTo('font-weight', 'bold'), - italic: mapBooleanPropTo('font-style', 'italic'), - nowrap: mapBooleanPropTo('white-space', 'nowrap'), - preserveWhitespace: mapBooleanPropTo('white-space', 'pre-wrap'), // Margin m: mapDirectionalUnitPropTo('margin', halfUnit, [ - 'top', - 'bottom', - 'left', - 'right', + 'Top', + 'Bottom', + 'Left', + 'Right', ]), - mx: mapDirectionalUnitPropTo('margin', halfUnit, ['left', 'right']), - my: mapDirectionalUnitPropTo('margin', halfUnit, ['top', 'bottom']), - mt: mapUnitPropTo('margin-top', halfUnit), - mb: mapUnitPropTo('margin-bottom', halfUnit), - ml: mapUnitPropTo('margin-left', halfUnit), - mr: mapUnitPropTo('margin-right', halfUnit), + mx: mapDirectionalUnitPropTo('margin', halfUnit, ['Left', 'Right']), + my: mapDirectionalUnitPropTo('margin', halfUnit, ['Top', 'Bottom']), + mt: mapUnitPropTo('marginTop', halfUnit), + mb: mapUnitPropTo('marginBottom', halfUnit), + ml: mapUnitPropTo('marginLeft', halfUnit), + mr: mapUnitPropTo('marginRight', halfUnit), // Padding p: mapDirectionalUnitPropTo('padding', halfUnit, [ - 'top', - 'bottom', - 'left', - 'right', + 'Top', + 'Bottom', + 'Left', + 'Right', ]), - px: mapDirectionalUnitPropTo('padding', halfUnit, ['left', 'right']), - py: mapDirectionalUnitPropTo('padding', halfUnit, ['top', 'bottom']), - pt: mapUnitPropTo('padding-top', halfUnit), - pb: mapUnitPropTo('padding-bottom', halfUnit), - pl: mapUnitPropTo('padding-left', halfUnit), - pr: mapUnitPropTo('padding-right', halfUnit), + px: mapDirectionalUnitPropTo('padding', halfUnit, ['Left', 'Right']), + py: mapDirectionalUnitPropTo('padding', halfUnit, ['Top', 'Bottom']), + pt: mapUnitPropTo('paddingTop', halfUnit), + pb: mapUnitPropTo('paddingBottom', halfUnit), + pl: mapUnitPropTo('paddingLeft', halfUnit), + pr: mapUnitPropTo('paddingRight', halfUnit), // Color props color: mapColorPropTo('color'), textColor: mapColorPropTo('color'), - backgroundColor: mapColorPropTo('background-color'), + backgroundColor: mapColorPropTo('backgroundColor'), + // Utility props fillPositionedParent: (style, value) => { if (value) { @@ -202,44 +194,42 @@ const styleMapperByPropName = { style['right'] = 0; } }, -}; +} as const; + +// Boolean props +const booleanStyleMap = { + bold: mapBooleanPropTo('fontWeight', 'bold'), + inline: mapBooleanPropTo('display', 'inline-block'), + italic: mapBooleanPropTo('fontStyle', 'italic'), + nowrap: mapBooleanPropTo('whiteSpace', 'nowrap'), + preserveWhitespace: mapBooleanPropTo('whiteSpace', 'pre-wrap'), +} as const; + +export const computeBoxProps = (props) => { + const computedProps: Record = {}; + const computedStyles: Record = {}; -export const computeBoxProps = (props: BoxProps) => { - const computedProps: HTMLAttributes = {}; - const computedStyles = {}; // Compute props for (let propName of Object.keys(props)) { if (propName === 'style') { continue; } - // IE8: onclick workaround - if (Byond.IS_LTE_IE8 && propName === 'onClick') { - computedProps.onclick = props[propName]; - continue; - } + const propValue = props[propName]; - const mapPropToStyle = styleMapperByPropName[propName]; + + const mapPropToStyle = + stringStyleMap[propName] || booleanStyleMap[propName]; + if (mapPropToStyle) { mapPropToStyle(computedStyles, propValue); } else { computedProps[propName] = propValue; } } - // Concatenate styles - let style = ''; - for (let attrName of Object.keys(computedStyles)) { - const attrValue = computedStyles[attrName]; - style += attrName + ':' + attrValue + ';'; - } - if (props.style) { - for (let attrName of Object.keys(props.style)) { - const attrValue = props.style[attrName]; - style += attrName + ':' + attrValue + ';'; - } - } - if (style.length > 0) { - computedProps.style = style; - } + + // Merge computed styles and any directly provided styles + computedProps.style = { ...computedStyles, ...props.style }; + return computedProps; }; @@ -252,27 +242,26 @@ export const computeBoxClassName = (props: BoxProps) => { ]); }; -export const Box: SFC = (props: BoxProps) => { +export const Box = (props: BoxProps) => { const { as = 'div', className, children, ...rest } = props; - // Render props - if (typeof children === 'function') { - return children(computeBoxProps(props)); - } - const computedClassName = - typeof className === 'string' - ? className + ' ' + computeBoxClassName(rest) - : computeBoxClassName(rest); + + // Compute class name and styles + const computedClassName = className + ? `${className} ${computeBoxClassName(rest)}` + : computeBoxClassName(rest); const computedProps = computeBoxProps(rest); - // Render a wrapper element - return createVNode( - VNodeFlags.HtmlElement, - as, - computedClassName, - children, - ChildFlags.UnknownChildren, - computedProps, - undefined + + if (as === 'img') { + computedProps.style['-ms-interpolation-mode'] = 'nearest-neighbor'; + } + + // Render the component + return createElement( + typeof as === 'string' ? as : 'div', + { + ...computedProps, + className: computedClassName, + }, + children ); }; - -Box.defaultHooks = pureComponentHooks; diff --git a/tgui/packages/tgui/components/Button.jsx b/tgui/packages/tgui/components/Button.jsx index ef434d04c7aa..d02bd8fb828f 100644 --- a/tgui/packages/tgui/components/Button.jsx +++ b/tgui/packages/tgui/components/Button.jsx @@ -6,7 +6,7 @@ import { KEY_ENTER, KEY_ESCAPE, KEY_SPACE } from 'common/keycodes'; import { classes, pureComponentHooks } from 'common/react'; -import { Component, createRef } from 'inferno'; +import { Component, createRef } from 'react'; import { createLogger } from '../logging'; import { Box, computeBoxClassName, computeBoxProps } from './Box'; import { Icon } from './Icon'; diff --git a/tgui/packages/tgui/components/ByondUi.jsx b/tgui/packages/tgui/components/ByondUi.jsx index 4623fe577015..dc263b9482ff 100644 --- a/tgui/packages/tgui/components/ByondUi.jsx +++ b/tgui/packages/tgui/components/ByondUi.jsx @@ -6,7 +6,7 @@ import { shallowDiffers } from 'common/react'; import { debounce } from 'common/timer'; -import { Component, createRef } from 'inferno'; +import { Component, createRef } from 'react'; import { createLogger } from '../logging'; import { computeBoxProps } from './Box'; diff --git a/tgui/packages/tgui/components/Chart.jsx b/tgui/packages/tgui/components/Chart.jsx index fac444bd1da9..b8a9c62f8929 100644 --- a/tgui/packages/tgui/components/Chart.jsx +++ b/tgui/packages/tgui/components/Chart.jsx @@ -6,7 +6,7 @@ import { map, zipWith } from 'common/collections'; import { pureComponentHooks } from 'common/react'; -import { Component, createRef } from 'inferno'; +import { Component, createRef } from 'react'; import { Box } from './Box'; const normalizeData = (data, scale, rangeX, rangeY) => { diff --git a/tgui/packages/tgui/components/Collapsible.jsx b/tgui/packages/tgui/components/Collapsible.jsx index f91eeddb4568..805fc7d129c2 100644 --- a/tgui/packages/tgui/components/Collapsible.jsx +++ b/tgui/packages/tgui/components/Collapsible.jsx @@ -4,7 +4,7 @@ * @license MIT */ -import { Component } from 'inferno'; +import { Component } from 'react'; import { Box } from './Box'; import { Button } from './Button'; diff --git a/tgui/packages/tgui/components/DraggableControl.jsx b/tgui/packages/tgui/components/DraggableControl.jsx index 8ada6f2fa4d0..018118dd7966 100644 --- a/tgui/packages/tgui/components/DraggableControl.jsx +++ b/tgui/packages/tgui/components/DraggableControl.jsx @@ -6,7 +6,7 @@ import { clamp } from 'common/math'; import { pureComponentHooks } from 'common/react'; -import { Component, createRef } from 'inferno'; +import { Component, createRef } from 'react'; import { AnimatedNumber } from './AnimatedNumber'; const DEFAULT_UPDATE_RATE = 400; diff --git a/tgui/packages/tgui/components/Dropdown.jsx b/tgui/packages/tgui/components/Dropdown.jsx index e6fe8a840a5f..fe306b8225d8 100644 --- a/tgui/packages/tgui/components/Dropdown.jsx +++ b/tgui/packages/tgui/components/Dropdown.jsx @@ -5,7 +5,7 @@ */ import { classes } from 'common/react'; -import { Component } from 'inferno'; +import { Component } from 'react'; import { Box } from './Box'; import { Icon } from './Icon'; diff --git a/tgui/packages/tgui/components/FitText.tsx b/tgui/packages/tgui/components/FitText.tsx index 751a2f8980b9..0632626aeb12 100644 --- a/tgui/packages/tgui/components/FitText.tsx +++ b/tgui/packages/tgui/components/FitText.tsx @@ -1,4 +1,4 @@ -import { Component, createRef, RefObject } from 'inferno'; +import { Component, createRef, HTMLAttributes, PropsWithChildren, RefObject } from 'react'; const DEFAULT_ACCEPTABLE_DIFFERENCE = 5; @@ -7,7 +7,7 @@ type Props = { readonly maxWidth: number; readonly maxFontSize: number; readonly native?: HTMLAttributes; -}; +} & PropsWithChildren; type State = { fontSize: number; @@ -19,8 +19,8 @@ export class FitText extends Component { fontSize: 0, }; - constructor() { - super(); + constructor(props: Props) { + super(props); this.resize = this.resize.bind(this); @@ -80,9 +80,10 @@ export class FitText extends Component { {this.props.children} diff --git a/tgui/packages/tgui/components/Flex.tsx b/tgui/packages/tgui/components/Flex.tsx index f67738280bac..da063f0296f5 100644 --- a/tgui/packages/tgui/components/Flex.tsx +++ b/tgui/packages/tgui/components/Flex.tsx @@ -4,16 +4,19 @@ * @license MIT */ -import { BooleanLike, classes, pureComponentHooks } from 'common/react'; +import { classes } from 'common/react'; import { BoxProps, computeBoxClassName, computeBoxProps, unit } from './Box'; -export type FlexProps = BoxProps & { - direction?: string | BooleanLike; - wrap?: string | BooleanLike; - align?: string | BooleanLike; - justify?: string | BooleanLike; - inline?: BooleanLike; -}; +export type FlexProps = Partial<{ + align: string | boolean; + direction: string; + inline: boolean; + justify: string; + scrollable: boolean; + style: Partial; + wrap: string | boolean; +}> & + BoxProps; export const computeFlexClassName = (props: FlexProps) => { return classes([ @@ -27,13 +30,14 @@ export const computeFlexClassName = (props: FlexProps) => { export const computeFlexProps = (props: FlexProps) => { const { className, direction, wrap, align, justify, inline, ...rest } = props; + return computeBoxProps({ style: { ...rest.style, - 'flex-direction': direction, - 'flex-wrap': wrap === true ? 'wrap' : wrap, - 'align-items': align, - 'justify-content': justify, + flexDirection: direction, + flexWrap: wrap === true ? 'wrap' : wrap, + alignItems: align, + justifyContent: justify, }, ...rest, }); @@ -49,15 +53,15 @@ export const Flex = (props) => { ); }; -Flex.defaultHooks = pureComponentHooks; - -export type FlexItemProps = BoxProps & { - grow?: number; - order?: number; - shrink?: number; - basis?: string | BooleanLike; - align?: string | BooleanLike; -}; +export type FlexItemProps = BoxProps & + Partial<{ + grow: number | boolean; + order: number; + shrink: number | boolean; + basis: string | number; + align: string | boolean; + style: Partial; + }>; export const computeFlexItemClassName = (props: FlexItemProps) => { return classes([ @@ -68,33 +72,26 @@ export const computeFlexItemClassName = (props: FlexItemProps) => { }; export const computeFlexItemProps = (props: FlexItemProps) => { - // prettier-ignore - const { - className, - style, - grow, - order, - shrink, - basis, - align, - ...rest - } = props; - // prettier-ignore - const computedBasis = basis + const { className, style, grow, order, shrink, basis, align, ...rest } = + props; + + const computedBasis = + basis ?? // IE11: Set basis to specified width if it's known, which fixes certain // bugs when rendering tables inside the flex. - ?? props.width + props.width ?? // If grow is used, basis should be set to 0 to be consistent with // flex css shorthand `flex: 1`. - ?? (grow !== undefined ? 0 : undefined); + (grow !== undefined ? 0 : undefined); + return computeBoxProps({ style: { ...style, - 'flex-grow': grow !== undefined && Number(grow), - 'flex-shrink': shrink !== undefined && Number(shrink), - 'flex-basis': unit(computedBasis), - 'order': order, - 'align-self': align, + flexGrow: grow !== undefined && Number(grow), + flexShrink: shrink !== undefined && Number(shrink), + flexBasis: unit(computedBasis), + order: order, + alignSelf: align, }, ...rest, }); @@ -110,6 +107,4 @@ const FlexItem = (props) => { ); }; -FlexItem.defaultHooks = pureComponentHooks; - Flex.Item = FlexItem; diff --git a/tgui/packages/tgui/components/InfinitePlane.jsx b/tgui/packages/tgui/components/InfinitePlane.jsx index 74f60f1e4d4c..e298537b46df 100644 --- a/tgui/packages/tgui/components/InfinitePlane.jsx +++ b/tgui/packages/tgui/components/InfinitePlane.jsx @@ -2,7 +2,7 @@ import { computeBoxProps } from './Box'; import { Stack } from './Stack'; import { ProgressBar } from './ProgressBar'; import { Button } from './Button'; -import { Component } from 'inferno'; +import { Component } from 'react'; const ZOOM_MIN_VAL = 0.5; const ZOOM_MAX_VAL = 1.5; diff --git a/tgui/packages/tgui/components/Input.jsx b/tgui/packages/tgui/components/Input.jsx index ac7ce6eef360..0eac3d05ebf1 100644 --- a/tgui/packages/tgui/components/Input.jsx +++ b/tgui/packages/tgui/components/Input.jsx @@ -6,7 +6,7 @@ import { KEY_ENTER, KEY_ESCAPE } from 'common/keycodes'; import { classes } from 'common/react'; -import { Component, createRef } from 'inferno'; +import { Component, createRef } from 'react'; import { Box } from './Box'; // prettier-ignore diff --git a/tgui/packages/tgui/components/KeyListener.tsx b/tgui/packages/tgui/components/KeyListener.tsx index 62509cae96d6..d401642a3cff 100644 --- a/tgui/packages/tgui/components/KeyListener.tsx +++ b/tgui/packages/tgui/components/KeyListener.tsx @@ -1,4 +1,4 @@ -import { Component } from 'inferno'; +import { Component } from 'react'; import { KeyEvent } from '../events'; import { listenForKeyEvents } from '../hotkeys'; @@ -11,8 +11,8 @@ type KeyListenerProps = Partial<{ export class KeyListener extends Component { dispose: () => void; - constructor() { - super(); + constructor(props) { + super(props); this.dispose = listenForKeyEvents((key) => { if (this.props.onKey) { diff --git a/tgui/packages/tgui/components/LabeledList.tsx b/tgui/packages/tgui/components/LabeledList.tsx index 0c4c608f25f3..8bb3ab82fd64 100644 --- a/tgui/packages/tgui/components/LabeledList.tsx +++ b/tgui/packages/tgui/components/LabeledList.tsx @@ -4,35 +4,32 @@ * @license MIT */ -import { BooleanLike, classes, pureComponentHooks } from 'common/react'; -import { InfernoNode } from 'inferno'; +import { BooleanLike, classes } from 'common/react'; +import { PropsWithChildren, ReactNode } from 'react'; import { Box, unit } from './Box'; import { Divider } from './Divider'; +import { Tooltip } from './Tooltip'; -type LabeledListProps = { - readonly children?: any; -}; - -export const LabeledList = (props: LabeledListProps) => { +export const LabeledList = (props: PropsWithChildren) => { const { children } = props; return {children}
; }; -LabeledList.defaultHooks = pureComponentHooks; - -type LabeledListItemProps = { - readonly className?: string | BooleanLike; - readonly label?: string | InfernoNode | BooleanLike; - readonly labelColor?: string | BooleanLike; - readonly labelWrap?: boolean; - readonly color?: string | BooleanLike; - readonly textAlign?: string | BooleanLike; - readonly buttons?: InfernoNode; +type LabeledListItemProps = Partial<{ + buttons: ReactNode; + className: string | BooleanLike; + color: string; + key: string | number; + label: string | ReactNode | BooleanLike; + labelColor: string; + labelWrap: boolean; + textAlign: string; /** @deprecated */ - readonly content?: any; - readonly children?: InfernoNode; - readonly verticalAlign?: string; -}; + content: any; + children: ReactNode; + verticalAlign: string; + tooltip: string; +}>; const LabeledListItem = (props: LabeledListItemProps) => { const { @@ -46,20 +43,46 @@ const LabeledListItem = (props: LabeledListItemProps) => { content, children, verticalAlign = 'baseline', + tooltip, } = props; + + let innerLabel; + if (label) { + innerLabel = label; + if (typeof label === 'string') innerLabel += ':'; + } + + if (tooltip !== undefined) { + innerLabel = ( + + + {innerLabel} + + + ); + } + + let labelChild = ( + + {innerLabel} + + ); + return ( - - {label ? (typeof label === 'string' ? label + ':' : label) : null} - + {labelChild} { ); }; -LabeledListItem.defaultHooks = pureComponentHooks; - type LabeledListDividerProps = { readonly size?: number; }; @@ -90,8 +111,8 @@ const LabeledListDivider = (props: LabeledListDividerProps) => { @@ -99,7 +120,5 @@ const LabeledListDivider = (props: LabeledListDividerProps) => { ); }; -LabeledListDivider.defaultHooks = pureComponentHooks; - LabeledList.Item = LabeledListItem; LabeledList.Divider = LabeledListDivider; diff --git a/tgui/packages/tgui/components/NumberInput.jsx b/tgui/packages/tgui/components/NumberInput.jsx index e264d811d37b..91baf95faf03 100644 --- a/tgui/packages/tgui/components/NumberInput.jsx +++ b/tgui/packages/tgui/components/NumberInput.jsx @@ -6,7 +6,7 @@ import { clamp } from 'common/math'; import { classes, pureComponentHooks } from 'common/react'; -import { Component, createRef } from 'inferno'; +import { Component, createRef } from 'react'; import { AnimatedNumber } from './AnimatedNumber'; import { Box } from './Box'; diff --git a/tgui/packages/tgui/components/Popper.tsx b/tgui/packages/tgui/components/Popper.tsx index 08875d7f8d6c..51319b71c7d4 100644 --- a/tgui/packages/tgui/components/Popper.tsx +++ b/tgui/packages/tgui/components/Popper.tsx @@ -1,21 +1,26 @@ import { createPopper } from '@popperjs/core'; import { ArgumentsOf } from 'common/types'; -import { Component, findDOMfromVNode, InfernoNode, render } from 'inferno'; +import { Component, CSSProperties, JSXElementConstructor, PropsWithChildren, ReactElement, RefObject } from 'react'; +import { findDOMNode, render } from 'react-dom'; type PopperProps = { - readonly popperContent: InfernoNode; + readonly popperContent: ReactElement< + any, + string | JSXElementConstructor + >; readonly options?: ArgumentsOf[2]; readonly additionalStyles?: CSSProperties; -}; +} & PropsWithChildren; export class Popper extends Component { static id: number = 0; + popperRef: RefObject; renderedContent: HTMLDivElement; popperInstance: ReturnType; - constructor() { - super(); + constructor(props) { + super(props); Popper.id += 1; } @@ -35,15 +40,16 @@ export class Popper extends Component { document.body.appendChild(this.renderedContent); // HACK: We don't want to create a wrapper, as it could break the layout - // of consumers, so we do the inferno equivalent of `findDOMNode(this)`. + // of consumers, so we use findDOMNode. // This is usually bad as refs are usually better, but refs did // not work in this case, as they weren't propagating correctly. // A previous attempt was made as a render prop that passed an ID, // but this made consuming use too unwieldly. - // This code is copied from `findDOMNode` in inferno-extras. // Because this component is written in TypeScript, we will know // immediately if this internal variable is removed. - const domNode = findDOMfromVNode(this.$LI, true); + // + // eslint-disable-next-line react/no-find-dom-node + const domNode = findDOMNode(this) as Element; if (!domNode) { return; } @@ -62,7 +68,7 @@ export class Popper extends Component { componentWillUnmount() { this.popperInstance?.destroy(); - render(null, this.renderedContent, () => { + render(<> , this.renderedContent, () => { this.renderedContent.remove(); }); } @@ -70,12 +76,7 @@ export class Popper extends Component { renderPopperContent(callback: () => void) { // `render` errors when given false, so we convert it to `null`, // which is supported. - render( - this.props.popperContent || null, - this.renderedContent, - callback, - this.context - ); + render(this.props.popperContent || null, this.renderedContent, callback); } render() { diff --git a/tgui/packages/tgui/components/RestrictedInput.jsx b/tgui/packages/tgui/components/RestrictedInput.jsx index 21f357239df7..082fc606d998 100644 --- a/tgui/packages/tgui/components/RestrictedInput.jsx +++ b/tgui/packages/tgui/components/RestrictedInput.jsx @@ -1,6 +1,6 @@ import { classes } from 'common/react'; import { clamp } from 'common/math'; -import { Component, createRef } from 'inferno'; +import { Component, createRef } from 'react'; import { Box } from './Box'; import { KEY_ESCAPE, KEY_ENTER } from 'common/keycodes'; diff --git a/tgui/packages/tgui/components/Section.tsx b/tgui/packages/tgui/components/Section.tsx index 27b7898e1067..9b5170e3774e 100644 --- a/tgui/packages/tgui/components/Section.tsx +++ b/tgui/packages/tgui/components/Section.tsx @@ -4,100 +4,79 @@ * @license MIT */ -import { canRender, classes } from 'common/react'; -import { Component, createRef, InfernoNode, RefObject } from 'inferno'; -import { addScrollableNode, removeScrollableNode } from '../events'; import { BoxProps, computeBoxClassName, computeBoxProps } from './Box'; +import { ReactNode, RefObject, createRef, useEffect } from 'react'; +import { addScrollableNode, removeScrollableNode } from '../events'; +import { canRender, classes } from 'common/react'; -type SectionProps = BoxProps & { - readonly className?: string; - readonly title?: InfernoNode; - readonly buttons?: InfernoNode; - readonly fill?: boolean; - readonly fitted?: boolean; - readonly scrollable?: boolean; - readonly scrollableHorizontal?: boolean; - /** @deprecated This property no longer works, please remove it. */ - readonly level?: boolean; - /** @deprecated Please use `scrollable` property */ - readonly overflowY?: any; +export type SectionProps = Partial<{ + buttons: ReactNode; + fill: boolean; + fitted: boolean; + scrollable: boolean; + scrollableHorizontal: boolean; + title: ReactNode; /** @member Allows external control of scrolling. */ - readonly scrollableRef?: RefObject; + scrollableRef: RefObject; /** @member Callback function for the `scroll` event */ - readonly onScroll?: (this: GlobalEventHandlers, ev: Event) => any; -}; + onScroll: ((this: GlobalEventHandlers, ev: Event) => any) | null; +}> & + BoxProps; -export class Section extends Component { - scrollableRef: RefObject; - scrollable: boolean; - onScroll?: (this: GlobalEventHandlers, ev: Event) => any; - scrollableHorizontal: boolean; +export const Section = (props: SectionProps) => { + const { + className, + title, + buttons, + fill, + fitted, + scrollable, + scrollableHorizontal, + children, + onScroll, + ...rest + } = props; - constructor(props) { - super(props); - this.scrollableRef = props.scrollableRef || createRef(); - this.scrollable = props.scrollable; - this.onScroll = props.onScroll; - this.scrollableHorizontal = props.scrollableHorizontal; - } + const scrollableRef = props.scrollableRef || createRef(); + const hasTitle = canRender(title) || canRender(buttons); - componentDidMount() { - if (this.scrollable || this.scrollableHorizontal) { - addScrollableNode(this.scrollableRef.current as HTMLElement); - if (this.onScroll && this.scrollableRef.current) { - this.scrollableRef.current.onscroll = this.onScroll; + useEffect(() => { + if (scrollable || scrollableHorizontal) { + addScrollableNode(scrollableRef.current as HTMLElement); + if (onScroll && scrollableRef.current) { + scrollableRef.current.onscroll = onScroll; } } - } - - componentWillUnmount() { - if (this.scrollable || this.scrollableHorizontal) { - removeScrollableNode(this.scrollableRef.current as HTMLElement); - } - } + return () => { + if (scrollable || scrollableHorizontal) { + removeScrollableNode(scrollableRef.current as HTMLElement); + } + }; + }, []); - render() { - const { - className, - title, - buttons, - fill, - fitted, - scrollable, - scrollableHorizontal, - children, - onScroll, - ...rest - } = this.props; - const hasTitle = canRender(title) || canRender(buttons); - return ( -
- {hasTitle && ( -
- {title} -
{buttons}
-
- )} -
-
- {children} -
+ return ( +
+ {hasTitle && ( +
+ {title} +
{buttons}
+
+ )} +
+
+ {children}
- ); - } -} +
+ ); +}; diff --git a/tgui/packages/tgui/components/Stack.tsx b/tgui/packages/tgui/components/Stack.tsx index 77c92796a085..3eb31bd32560 100644 --- a/tgui/packages/tgui/components/Stack.tsx +++ b/tgui/packages/tgui/components/Stack.tsx @@ -5,22 +5,25 @@ */ import { classes } from 'common/react'; -import { RefObject } from 'inferno'; +import { RefObject } from 'react'; import { computeFlexClassName, computeFlexItemClassName, computeFlexItemProps, computeFlexProps, FlexItemProps, FlexProps } from './Flex'; -type StackProps = FlexProps & { - readonly vertical?: boolean; - readonly fill?: boolean; -}; +type Props = Partial<{ + vertical: boolean; + fill: boolean; + zebra: boolean; +}> & + FlexProps; -export const Stack = (props: StackProps) => { - const { className, vertical, fill, ...rest } = props; +export const Stack = (props: Props) => { + const { className, vertical, fill, zebra, ...rest } = props; return (
{ ); }; -type StackItemProps = FlexProps & { - readonly innerRef?: RefObject; -}; +type StackItemProps = FlexItemProps & + Partial<{ + innerRef: RefObject; + }>; const StackItem = (props: StackItemProps) => { const { className, innerRef, ...rest } = props; @@ -53,9 +57,10 @@ const StackItem = (props: StackItemProps) => { Stack.Item = StackItem; -type StackDividerProps = FlexItemProps & { - readonly hidden?: boolean; -}; +type StackDividerProps = FlexItemProps & + Partial<{ + hidden: boolean; + }>; const StackDivider = (props: StackDividerProps) => { const { className, hidden, ...rest } = props; diff --git a/tgui/packages/tgui/components/TextArea.jsx b/tgui/packages/tgui/components/TextArea.jsx index 76db8272aa38..1ca70488c9d9 100644 --- a/tgui/packages/tgui/components/TextArea.jsx +++ b/tgui/packages/tgui/components/TextArea.jsx @@ -6,14 +6,14 @@ */ import { classes } from 'common/react'; -import { Component, createRef } from 'inferno'; +import { Component, createRef } from 'react'; import { Box } from './Box'; import { toInputValue } from './Input'; import { KEY_ENTER, KEY_ESCAPE, KEY_TAB } from 'common/keycodes'; export class TextArea extends Component { - constructor(props, context) { - super(props, context); + constructor(props) { + super(props); this.textareaRef = props.innerRef || createRef(); this.state = { editing: false, diff --git a/tgui/packages/tgui/components/TimeDisplay.jsx b/tgui/packages/tgui/components/TimeDisplay.jsx index 6b87ee5260ac..bbdd747701cc 100644 --- a/tgui/packages/tgui/components/TimeDisplay.jsx +++ b/tgui/packages/tgui/components/TimeDisplay.jsx @@ -1,5 +1,5 @@ import { formatTime } from '../format'; -import { Component } from 'inferno'; +import { Component } from 'react'; // AnimatedNumber Copypaste const isSafeNumber = (value) => { diff --git a/tgui/packages/tgui/components/Tooltip.tsx b/tgui/packages/tgui/components/Tooltip.tsx index f2004f96302a..b565e6fda475 100644 --- a/tgui/packages/tgui/components/Tooltip.tsx +++ b/tgui/packages/tgui/components/Tooltip.tsx @@ -1,9 +1,10 @@ import { createPopper, Placement, VirtualElement } from '@popperjs/core'; -import { Component, findDOMfromVNode, InfernoNode, render } from 'inferno'; +import { Component, ReactNode } from 'react'; +import { findDOMNode, render } from 'react-dom'; type TooltipProps = { - readonly children?: InfernoNode; - readonly content: InfernoNode; + readonly children?: ReactNode; + readonly content: ReactNode; readonly position?: Placement; }; @@ -50,14 +51,16 @@ export class Tooltip extends Component { getDOMNode() { // HACK: We don't want to create a wrapper, as it could break the layout - // of consumers, so we do the inferno equivalent of `findDOMNode(this)`. - // My attempt to avoid this was a render prop that passed in - // callbacks to onmouseenter and onmouseleave, but this was unwiedly - // to consumers, specifically buttons. - // This code is copied from `findDOMNode` in inferno-extras. + // of consumers, so we use findDOMNode. + // This is usually bad as refs are usually better, but refs did + // not work in this case, as they weren't propagating correctly. + // A previous attempt was made as a render prop that passed an ID, + // but this made consuming use too unwieldly. // Because this component is written in TypeScript, we will know // immediately if this internal variable is removed. - return findDOMfromVNode(this.$LI, true); + // + // eslint-disable-next-line react/no-find-dom-node + return findDOMNode(this) as Element; } componentDidMount() { @@ -103,33 +106,28 @@ export class Tooltip extends Component { return; } - render( - {this.props.content}, - renderedTooltip, - () => { - let singletonPopper = Tooltip.singletonPopper; - if (singletonPopper === undefined) { - singletonPopper = createPopper( - Tooltip.virtualElement, - renderedTooltip!, - { - ...DEFAULT_OPTIONS, - placement: this.props.position || 'auto', - } - ); - - Tooltip.singletonPopper = singletonPopper; - } else { - singletonPopper.setOptions({ + render({this.props.content}, renderedTooltip, () => { + let singletonPopper = Tooltip.singletonPopper; + if (singletonPopper === undefined) { + singletonPopper = createPopper( + Tooltip.virtualElement, + renderedTooltip!, + { ...DEFAULT_OPTIONS, placement: this.props.position || 'auto', - }); + } + ); - singletonPopper.update(); - } - }, - this.context - ); + Tooltip.singletonPopper = singletonPopper; + } else { + singletonPopper.setOptions({ + ...DEFAULT_OPTIONS, + placement: this.props.position || 'auto', + }); + + singletonPopper.update(); + } + }); } componentDidUpdate() { diff --git a/tgui/packages/tgui/components/TrackOutsideClicks.tsx b/tgui/packages/tgui/components/TrackOutsideClicks.tsx index 8ba46ffb5bd7..13cfb8443edb 100644 --- a/tgui/packages/tgui/components/TrackOutsideClicks.tsx +++ b/tgui/packages/tgui/components/TrackOutsideClicks.tsx @@ -1,14 +1,14 @@ -import { Component, createRef } from 'inferno'; +import { Component, createRef, PropsWithChildren } from 'react'; type Props = { readonly onOutsideClick: () => void; -}; +} & PropsWithChildren; export class TrackOutsideClicks extends Component { ref = createRef(); - constructor() { - super(); + constructor(props) { + super(props); this.handleOutsideClick = this.handleOutsideClick.bind(this); diff --git a/tgui/packages/tgui/debug/KitchenSink.jsx b/tgui/packages/tgui/debug/KitchenSink.jsx index e25751722c52..23cf96698101 100644 --- a/tgui/packages/tgui/debug/KitchenSink.jsx +++ b/tgui/packages/tgui/debug/KitchenSink.jsx @@ -20,10 +20,10 @@ const r = require.context('../stories', false, /\.stories\.jsx$/); */ const getStories = () => r.keys().map((path) => r(path)); -export const KitchenSink = (props, context) => { +export const KitchenSink = (props) => { const { panel } = props; - const [theme] = useLocalState(context, 'kitchenSinkTheme'); - const [pageIndex, setPageIndex] = useLocalState(context, 'pageIndex', 0); + const [theme] = useLocalState('kitchenSinkTheme'); + const [pageIndex, setPageIndex] = useLocalState('pageIndex', 0); const stories = getStories(); const story = stories[pageIndex]; const Layout = panel ? Pane : Window; diff --git a/tgui/packages/tgui/debug/hooks.js b/tgui/packages/tgui/debug/hooks.js index d324dd68d88f..fc4901c49657 100644 --- a/tgui/packages/tgui/debug/hooks.js +++ b/tgui/packages/tgui/debug/hooks.js @@ -4,7 +4,7 @@ * @license MIT */ -import { useSelector } from 'common/redux'; +import { useSelector } from '../backend'; import { selectDebug } from './selectors'; -export const useDebug = (context) => useSelector(context, selectDebug); +export const useDebug = () => useSelector(selectDebug); diff --git a/tgui/packages/tgui/drag.ts b/tgui/packages/tgui/drag.ts index 4b6f82e1207e..a34c49ac4622 100644 --- a/tgui/packages/tgui/drag.ts +++ b/tgui/packages/tgui/drag.ts @@ -203,7 +203,7 @@ const constraintPosition = ( }; // Start dragging the window -export const dragStartHandler = (event: MouseEvent) => { +export const dragStartHandler = (event) => { logger.log('drag start'); dragging = true; dragPointOffset = vecSubtract( @@ -218,7 +218,7 @@ export const dragStartHandler = (event: MouseEvent) => { }; // End dragging the window -const dragEndHandler = (event: MouseEvent) => { +const dragEndHandler = (event) => { logger.log('drag end'); dragMoveHandler(event); document.removeEventListener('mousemove', dragMoveHandler); diff --git a/tgui/packages/tgui/index.tsx b/tgui/packages/tgui/index.tsx index 97640d062a86..153a8486bbab 100644 --- a/tgui/packages/tgui/index.tsx +++ b/tgui/packages/tgui/index.tsx @@ -32,8 +32,9 @@ import { setupHotReloading } from 'tgui-dev-server/link/client.cjs'; import { setupHotKeys } from './hotkeys'; import { captureExternalLinks } from './links'; import { createRenderer } from './renderer'; -import { configureStore, StoreProvider } from './store'; +import { configureStore } from './store'; import { setupGlobalEvents } from './events'; +import { setGlobalStore } from './backend'; perf.mark('inception', window.performance?.timing?.navigationStart); perf.mark('init'); @@ -41,13 +42,11 @@ perf.mark('init'); const store = configureStore(); const renderApp = createRenderer(() => { + setGlobalStore(store); + const { getRoutedComponent } = require('./routes'); - const Component = getRoutedComponent(store); - return ( - - - - ); + const Component = getRoutedComponent(); + return ; }); const setupApp = () => { diff --git a/tgui/packages/tgui/interfaces/AcidVest.jsx b/tgui/packages/tgui/interfaces/AcidVest.jsx index adf0e37a2eb6..fffbb178764f 100644 --- a/tgui/packages/tgui/interfaces/AcidVest.jsx +++ b/tgui/packages/tgui/interfaces/AcidVest.jsx @@ -2,8 +2,8 @@ import { useBackend } from '../backend'; import { Button, LabeledList, Section, Slider, Flex, Box } from '../components'; import { Window } from '../layouts'; -export const AcidVest = (_props, context) => { - const { act, data } = useBackend(context); +export const AcidVest = (_props) => { + const { act, data } = useBackend(); const damageList = data.configList.Damage; const vitalsList = data.configList.Vitals; diff --git a/tgui/packages/tgui/interfaces/Adminhelp.tsx b/tgui/packages/tgui/interfaces/Adminhelp.tsx index 817e25e37cb6..c2a888cdc33c 100644 --- a/tgui/packages/tgui/interfaces/Adminhelp.tsx +++ b/tgui/packages/tgui/interfaces/Adminhelp.tsx @@ -10,8 +10,8 @@ type AdminhelpData = { urgentAhelpPromptMessage: string; }; -export const Adminhelp = (props, context) => { - const { act, data } = useBackend(context); +export const Adminhelp = (props) => { + const { act, data } = useBackend(); const { adminCount, urgentAhelpEnabled, @@ -19,20 +19,14 @@ export const Adminhelp = (props, context) => { urgentAhelpPromptMessage, } = data; const [requestForAdmin, setRequestForAdmin] = useLocalState( - context, 'request_for_admin', false ); const [currentlyInputting, setCurrentlyInputting] = useLocalState( - context, 'confirm_request', false ); - const [ahelpMessage, setAhelpMessage] = useLocalState( - context, - 'ahelp_message', - '' - ); + const [ahelpMessage, setAhelpMessage] = useLocalState('ahelp_message', ''); const confirmationText = 'alert admins'; return ( diff --git a/tgui/packages/tgui/interfaces/AlertModal.tsx b/tgui/packages/tgui/interfaces/AlertModal.tsx index ee53a0f1b637..60f60c94c524 100644 --- a/tgui/packages/tgui/interfaces/AlertModal.tsx +++ b/tgui/packages/tgui/interfaces/AlertModal.tsx @@ -17,8 +17,8 @@ type AlertModalData = { const KEY_DECREMENT = -1; const KEY_INCREMENT = 1; -export const AlertModal = (props, context) => { - const { act, data } = useBackend(context); +export const AlertModal = (props) => { + const { act, data } = useBackend(); const { autofocus, buttons = [], @@ -27,7 +27,7 @@ export const AlertModal = (props, context) => { timeout, title, } = data; - const [selected, setSelected] = useLocalState(context, 'selected', 0); + const [selected, setSelected] = useLocalState('selected', 0); // Dynamically sets window dimensions const windowHeight = 115 + @@ -89,8 +89,8 @@ export const AlertModal = (props, context) => { * Technically this handles more than 2 buttons, but you * should just be using a list input in that case. */ -const ButtonDisplay = (props, context) => { - const { data } = useBackend(context); +const ButtonDisplay = (props) => { + const { data } = useBackend(); const { buttons = [], large_buttons, swapped_buttons } = data; const { selected } = props; @@ -127,8 +127,8 @@ const ButtonDisplay = (props, context) => { /** * Displays a button with variable sizing. */ -const AlertButton = (props, context) => { - const { act, data } = useBackend(context); +const AlertButton = (props) => { + const { act, data } = useBackend(); const { large_buttons } = data; const { button, selected } = props; const buttonWidth = button.length > 7 ? button.length : 7; diff --git a/tgui/packages/tgui/interfaces/AlmayerControl.jsx b/tgui/packages/tgui/interfaces/AlmayerControl.jsx index 6cc44737626c..7a5133a3b19c 100644 --- a/tgui/packages/tgui/interfaces/AlmayerControl.jsx +++ b/tgui/packages/tgui/interfaces/AlmayerControl.jsx @@ -1,10 +1,10 @@ -import { Fragment } from 'inferno'; +import { Fragment } from 'react'; import { useBackend } from '../backend'; import { Button, Section, Flex, NoticeBox, Collapsible, Divider, Box } from '../components'; import { Window } from '../layouts'; -export const AlmayerControl = (_props, context) => { - const { act, data } = useBackend(context); +export const AlmayerControl = (_props) => { + const { act, data } = useBackend(); const worldTime = data.worldtime; const messages = data.messages; @@ -225,7 +225,7 @@ export const AlmayerControl = (_props, context) => { {messages && ( - + <> @@ -251,7 +251,7 @@ export const AlmayerControl = (_props, context) => { })} - + )} diff --git a/tgui/packages/tgui/interfaces/AltitudeControlConsole.jsx b/tgui/packages/tgui/interfaces/AltitudeControlConsole.jsx index 48550514fd4d..fd92602a3492 100644 --- a/tgui/packages/tgui/interfaces/AltitudeControlConsole.jsx +++ b/tgui/packages/tgui/interfaces/AltitudeControlConsole.jsx @@ -2,8 +2,8 @@ import { useBackend } from '../backend'; import { Button, ProgressBar, Box, Section } from '../components'; import { Window } from '../layouts'; import { createLogger } from '../logging'; -export const AltitudeControlConsole = (_props, context) => { - const { act, data } = useBackend(context); +export const AltitudeControlConsole = () => { + const { act, data } = useBackend(); const logger = createLogger('Debug'); logger.warn(data); return ( diff --git a/tgui/packages/tgui/interfaces/AntiAirConsole.jsx b/tgui/packages/tgui/interfaces/AntiAirConsole.jsx index 8bfc80bb763e..cd9b68ac782f 100644 --- a/tgui/packages/tgui/interfaces/AntiAirConsole.jsx +++ b/tgui/packages/tgui/interfaces/AntiAirConsole.jsx @@ -2,8 +2,8 @@ import { useBackend, useLocalState } from '../backend'; import { Stack, Section, Tabs, Button, NoticeBox, Box, Dimmer, Icon } from '../components'; import { Window } from '../layouts'; -export const AntiAirConsole = (props, context) => { - const { act, data } = useBackend(context); +export const AntiAirConsole = (props) => { + const { act, data } = useBackend(); return ( @@ -13,13 +13,12 @@ export const AntiAirConsole = (props, context) => { ); }; -const GeneralPanel = (props, context) => { - const { act, data } = useBackend(context); +const GeneralPanel = (props) => { + const { act, data } = useBackend(); const sections = data.sections; const [selectedSection, setSelectedSection] = useLocalState( - context, 'selected_section', null ); diff --git a/tgui/packages/tgui/interfaces/Apc.jsx b/tgui/packages/tgui/interfaces/Apc.jsx index 434d91f4e428..24decabb1cdc 100644 --- a/tgui/packages/tgui/interfaces/Apc.jsx +++ b/tgui/packages/tgui/interfaces/Apc.jsx @@ -3,7 +3,7 @@ import { Box, Button, LabeledList, NoticeBox, ProgressBar, Section } from '../co import { Window } from '../layouts'; import { InterfaceLockNoticeBox } from './common/InterfaceLockNoticeBox'; -export const Apc = (props, context) => { +export const Apc = (props) => { return ( @@ -31,8 +31,8 @@ const powerStatusMap = { }, }; -const ApcContent = (props, context) => { - const { act, data } = useBackend(context); +const ApcContent = (props) => { + const { act, data } = useBackend(); const locked = data.locked && !data.siliconUser; const externalPowerStatus = powerStatusMap[data.externalPower] || powerStatusMap[0]; diff --git a/tgui/packages/tgui/interfaces/AresInterface.jsx b/tgui/packages/tgui/interfaces/AresInterface.jsx index aae115d150b0..f2ced09014f6 100644 --- a/tgui/packages/tgui/interfaces/AresInterface.jsx +++ b/tgui/packages/tgui/interfaces/AresInterface.jsx @@ -20,8 +20,8 @@ const PAGES = { 'emergency': () => Emergency, }; -export const AresInterface = (props, context) => { - const { data } = useBackend(context); +export const AresInterface = (props) => { + const { data } = useBackend(); const { current_menu, sudo } = data; const PageComponent = PAGES[current_menu](); @@ -41,8 +41,8 @@ export const AresInterface = (props, context) => { ); }; -const Login = (props, context) => { - const { act } = useBackend(context); +const Login = (props) => { + const { act } = useBackend(); return ( { ); }; -const MainMenu = (props, context) => { - const { data, act } = useBackend(context); +const MainMenu = (props) => { + const { data, act } = useBackend(); const { logged_in, access_text, @@ -352,8 +352,8 @@ const MainMenu = (props, context) => { ); }; -const AnnouncementLogs = (props, context) => { - const { data, act } = useBackend(context); +const AnnouncementLogs = (props) => { + const { data, act } = useBackend(); const { logged_in, access_text, @@ -448,8 +448,8 @@ const AnnouncementLogs = (props, context) => { ); }; -const BioscanLogs = (props, context) => { - const { data, act } = useBackend(context); +const BioscanLogs = (props) => { + const { data, act } = useBackend(); const { logged_in, access_text, @@ -544,8 +544,8 @@ const BioscanLogs = (props, context) => { ); }; -const BombardmentLogs = (props, context) => { - const { data, act } = useBackend(context); +const BombardmentLogs = (props) => { + const { data, act } = useBackend(); const { logged_in, access_text, @@ -644,8 +644,8 @@ const BombardmentLogs = (props, context) => { ); }; -const ApolloLog = (props, context) => { - const { data, act } = useBackend(context); +const ApolloLog = (props) => { + const { data, act } = useBackend(); const { logged_in, access_text, last_page, current_menu, apollo_log } = data; return ( @@ -700,8 +700,8 @@ const ApolloLog = (props, context) => { ); }; -const AccessLogs = (props, context) => { - const { data, act } = useBackend(context); +const AccessLogs = (props) => { + const { data, act } = useBackend(); const { logged_in, access_text, last_page, current_menu, access_log } = data; return ( @@ -756,8 +756,8 @@ const AccessLogs = (props, context) => { ); }; -const DeletionLogs = (props, context) => { - const { data, act } = useBackend(context); +const DeletionLogs = (props) => { + const { data, act } = useBackend(); const { logged_in, access_text, last_page, current_menu, records_deletion } = data; @@ -842,8 +842,8 @@ const DeletionLogs = (props, context) => { ); }; -const ARESTalk = (props, context) => { - const { data, act } = useBackend(context); +const ARESTalk = (props) => { + const { data, act } = useBackend(); const { logged_in, access_text, @@ -942,8 +942,8 @@ const ARESTalk = (props, context) => { ); }; -const DeletedTalks = (props, context) => { - const { data, act } = useBackend(context); +const DeletedTalks = (props) => { + const { data, act } = useBackend(); const { logged_in, access_text, @@ -1032,8 +1032,8 @@ const DeletedTalks = (props, context) => { ); }; -const ReadingTalks = (props, context) => { - const { data, act } = useBackend(context); +const ReadingTalks = (props) => { + const { data, act } = useBackend(); const { logged_in, access_text, @@ -1093,8 +1093,8 @@ const ReadingTalks = (props, context) => { ); }; -const Requisitions = (props, context) => { - const { data, act } = useBackend(context); +const Requisitions = (props) => { + const { data, act } = useBackend(); const { logged_in, access_text, @@ -1185,8 +1185,8 @@ const Requisitions = (props, context) => { ); }; -const FlightLogs = (props, context) => { - const { data, act } = useBackend(context); +const FlightLogs = (props) => { + const { data, act } = useBackend(); const { logged_in, access_text, @@ -1280,8 +1280,8 @@ const FlightLogs = (props, context) => { ); }; -const Security = (props, context) => { - const { data, act } = useBackend(context); +const Security = (props) => { + const { data, act } = useBackend(); const { logged_in, access_text, @@ -1375,8 +1375,8 @@ const Security = (props, context) => { ); }; -const Emergency = (props, context) => { - const { data, act } = useBackend(context); +const Emergency = (props) => { + const { data, act } = useBackend(); const { logged_in, access_text, diff --git a/tgui/packages/tgui/interfaces/Autodispenser.jsx b/tgui/packages/tgui/interfaces/Autodispenser.jsx index 5d029b72b894..249965e6d46c 100644 --- a/tgui/packages/tgui/interfaces/Autodispenser.jsx +++ b/tgui/packages/tgui/interfaces/Autodispenser.jsx @@ -2,8 +2,8 @@ import { useBackend } from '../backend'; import { Section, ProgressBar, Box, Flex, NoticeBox, Button, LabeledList, NumberInput } from '../components'; import { Window } from '../layouts'; -export const Autodispenser = (_props, context) => { - const { act, data } = useBackend(context); +export const Autodispenser = () => { + const { act, data } = useBackend(); const { energy, status, diff --git a/tgui/packages/tgui/interfaces/Autolathe.jsx b/tgui/packages/tgui/interfaces/Autolathe.jsx index ceb343eae0d9..6b21f7b6ece7 100644 --- a/tgui/packages/tgui/interfaces/Autolathe.jsx +++ b/tgui/packages/tgui/interfaces/Autolathe.jsx @@ -3,11 +3,11 @@ import { Section, Flex, ProgressBar, Box, Button, Tabs, Stack, Input } from '../ import { capitalize } from 'common/string'; import { Window } from '../layouts'; import { ElectricalPanel } from './common/ElectricalPanel'; -import { Fragment } from 'inferno'; +import { Fragment } from 'react'; import { createLogger } from '../logging'; -export const Autolathe = (_props, context) => { - const { act, data } = useBackend(context); +export const Autolathe = () => { + const { act, data } = useBackend(); const { materials, @@ -30,8 +30,8 @@ export const Autolathe = (_props, context) => { ); }; -const MaterialsData = (props, context) => { - const { act, data } = useBackend(context); +const MaterialsData = (props) => { + const { act, data } = useBackend(); const { materials, capacity, @@ -63,8 +63,8 @@ const MaterialsData = (props, context) => { ); }; -const CurrentlyMaking = (props, context) => { - const { act, data } = useBackend(context); +const CurrentlyMaking = (props) => { + const { act, data } = useBackend(); const { currently_making } = data; const MakingName = @@ -82,8 +82,8 @@ const CurrentlyMaking = (props, context) => { ); }; -const QueueList = (props, context) => { - const { act, data } = useBackend(context); +const QueueList = (props) => { + const { act, data } = useBackend(); const { materials, capacity, @@ -132,8 +132,8 @@ const QueueList = (props, context) => { }; // the below all has to be in one section due to the categories and search params -const PrintablesSection = (props, context) => { - const { act, data } = useBackend(context); +const PrintablesSection = (props) => { + const { act, data } = useBackend(); const logger = createLogger('autolathe'); @@ -146,11 +146,7 @@ const PrintablesSection = (props, context) => { queuemax, } = data; - const [currentSearch, setSearch] = useLocalState( - context, - 'current_search', - '' - ); + const [currentSearch, setSearch] = useLocalState('current_search', ''); const categories = []; printables @@ -158,7 +154,6 @@ const PrintablesSection = (props, context) => { .map((x) => x.recipe_category); const [currentCategory, setCategory] = useLocalState( - context, 'current_category', 'All' ); @@ -226,7 +221,7 @@ const PrintablesSection = (props, context) => { {(val.has_multipliers && ( - + <> @@ -250,7 +245,7 @@ const PrintablesSection = (props, context) => { )} - + )) || null} diff --git a/tgui/packages/tgui/interfaces/Binoculars.jsx b/tgui/packages/tgui/interfaces/Binoculars.jsx index d846a62a6545..7306cea90bbc 100644 --- a/tgui/packages/tgui/interfaces/Binoculars.jsx +++ b/tgui/packages/tgui/interfaces/Binoculars.jsx @@ -2,8 +2,8 @@ import { useBackend } from '../backend'; import { Section, Box } from '../components'; import { Window } from '../layouts'; -export const Binoculars = (_props, context) => { - const { data } = useBackend(context); +export const Binoculars = () => { + const { data } = useBackend(); const x_coord = data.xcoord; const y_coord = data.ycoord; diff --git a/tgui/packages/tgui/interfaces/BioSyntheticPrinter.jsx b/tgui/packages/tgui/interfaces/BioSyntheticPrinter.jsx index 283ff26a7b5f..8f39b0c5991b 100644 --- a/tgui/packages/tgui/interfaces/BioSyntheticPrinter.jsx +++ b/tgui/packages/tgui/interfaces/BioSyntheticPrinter.jsx @@ -2,8 +2,8 @@ import { useBackend } from '../backend'; import { Section, Button, Box, LabeledList, ProgressBar, NoticeBox, Divider } from '../components'; import { Window } from '../layouts'; -export const BioSyntheticPrinter = (_props, context) => { - const { act, data } = useBackend(context); +export const BioSyntheticPrinter = () => { + const { act, data } = useBackend(); const Working = data.working; diff --git a/tgui/packages/tgui/interfaces/BotanyEditor.jsx b/tgui/packages/tgui/interfaces/BotanyEditor.jsx index 425ffc9a5d5f..09a655e92814 100644 --- a/tgui/packages/tgui/interfaces/BotanyEditor.jsx +++ b/tgui/packages/tgui/interfaces/BotanyEditor.jsx @@ -1,10 +1,10 @@ -import { Fragment } from 'inferno'; +import { Fragment } from 'react'; import { useBackend } from '../backend'; import { Section, Button, Stack, LabeledList, NoticeBox } from '../components'; import { Window } from '../layouts'; -export const BotanyEditor = (_props, context) => { - const { act, data } = useBackend(context); +export const BotanyEditor = () => { + const { act, data } = useBackend(); const { disk, seed, degradation, sourceName, locus } = data; @@ -36,7 +36,7 @@ export const BotanyEditor = (_props, context) => {
- + <> {!disk && ( No disk! Genetic data cannot be applied. @@ -45,7 +45,7 @@ export const BotanyEditor = (_props, context) => { {!seed && ( No seeds to apply genetic data to! )} - + {!!disk && ( {sourceName} diff --git a/tgui/packages/tgui/interfaces/BotanyExtractor.jsx b/tgui/packages/tgui/interfaces/BotanyExtractor.jsx index eca098a9d9f6..fe675384684e 100644 --- a/tgui/packages/tgui/interfaces/BotanyExtractor.jsx +++ b/tgui/packages/tgui/interfaces/BotanyExtractor.jsx @@ -1,10 +1,10 @@ -import { Fragment } from 'inferno'; +import { Fragment } from 'react'; import { useBackend } from '../backend'; import { Section, Button, LabeledList, Box, Stack, NoticeBox } from '../components'; import { Window } from '../layouts'; -export const BotanyExtractor = (_props, context) => { - const { act, data } = useBackend(context); +export const BotanyExtractor = () => { + const { act, data } = useBackend(); const { disk, seed, geneMasks, degradation, hasGenetics, sourceName } = data; @@ -49,7 +49,7 @@ export const BotanyExtractor = (_props, context) => {
{(!!hasGenetics && ( - + <> {!disk && ( No disk! Genetic data cannot be extracted. @@ -86,7 +86,7 @@ export const BotanyExtractor = (_props, context) => { disabled={!hasGenetics} onClick={() => act('clear_buffer')} /> - + )) || No genetic data stored!}
diff --git a/tgui/packages/tgui/interfaces/BrigCell.jsx b/tgui/packages/tgui/interfaces/BrigCell.jsx index f0eb325e0e60..23c7bf91d1b1 100644 --- a/tgui/packages/tgui/interfaces/BrigCell.jsx +++ b/tgui/packages/tgui/interfaces/BrigCell.jsx @@ -3,8 +3,8 @@ import { addZeros } from 'common/math'; import { Window } from '../layouts'; import { Box, ColorBox, NoticeBox, Flex, ProgressBar, Button, LabeledList, Divider } from '../components'; -export const BrigCell = (props, context) => { - const { data, act } = useBackend(context); +export const BrigCell = (props) => { + const { data, act } = useBackend(); const { viewing_incident, incidents, bit_active } = data; return ( @@ -90,8 +90,8 @@ const getTimeLeft = function (data) { return Math.max(0, timeLeft); }; -const IncidentDetails = (props, context) => { - const { data, act } = useBackend(context); +const IncidentDetails = (props) => { + const { data, act } = useBackend(); const { suspect, can_pardon, diff --git a/tgui/packages/tgui/interfaces/CameraConsole.jsx b/tgui/packages/tgui/interfaces/CameraConsole.jsx index 89f4cc4e6d92..b790100e980c 100644 --- a/tgui/packages/tgui/interfaces/CameraConsole.jsx +++ b/tgui/packages/tgui/interfaces/CameraConsole.jsx @@ -37,8 +37,8 @@ export const selectCameras = (cameras, searchText = '') => { ])(cameras); }; -export const CameraConsole = (props, context) => { - const { act, data } = useBackend(context); +export const CameraConsole = (props) => { + const { act, data } = useBackend(); const { mapRef, activeCamera } = data; const cameras = selectCameras(data.cameras); const [prevCameraName, nextCameraName] = prevNextCamera( @@ -89,9 +89,9 @@ export const CameraConsole = (props, context) => { ); }; -export const CameraConsoleContent = (props, context) => { - const { act, data } = useBackend(context); - const [searchText, setSearchText] = useLocalState(context, 'searchText', ''); +export const CameraConsoleContent = (props) => { + const { act, data } = useBackend(); + const [searchText, setSearchText] = useLocalState('searchText', ''); const { activeCamera } = data; const cameras = selectCameras(data.cameras, searchText); return ( diff --git a/tgui/packages/tgui/interfaces/CanvasLayer.jsx b/tgui/packages/tgui/interfaces/CanvasLayer.jsx index e647ae765b1c..cf87e2f601fb 100644 --- a/tgui/packages/tgui/interfaces/CanvasLayer.jsx +++ b/tgui/packages/tgui/interfaces/CanvasLayer.jsx @@ -1,5 +1,5 @@ import { Box, Icon, Tooltip } from '../components'; -import { Component, createRef } from 'inferno'; +import { Component, createRef } from 'react'; // this file should probably not be in interfaces, should move it later. export class CanvasLayer extends Component { diff --git a/tgui/packages/tgui/interfaces/CardMod.jsx b/tgui/packages/tgui/interfaces/CardMod.jsx index 6b27125f0995..6580cb18dfeb 100644 --- a/tgui/packages/tgui/interfaces/CardMod.jsx +++ b/tgui/packages/tgui/interfaces/CardMod.jsx @@ -1,12 +1,12 @@ -import { Fragment } from 'inferno'; +import { Fragment } from 'react'; import { useBackend, useLocalState } from '../backend'; import { Box, Button, Stack, Input, Section, Tabs, Table, NumberInput } from '../components'; import { Window } from '../layouts'; import { AccessList } from './common/AccessList'; import { map } from 'common/collections'; -export const CardMod = (props, context) => { - const [tab2, setTab2] = useLocalState(context, 'tab2', 1); +export const CardMod = (props) => { + const [tab2, setTab2] = useLocalState('tab2', 1); return ( @@ -27,8 +27,8 @@ export const CardMod = (props, context) => { ); }; -export const CrewManifest = (props, context) => { - const { act, data } = useBackend(context); +export const CrewManifest = (props) => { + const { act, data } = useBackend(); const { manifest = {} } = data; return (
{ ); }; -export const CardContent = (props, context) => { - const { act, data } = useBackend(context); - const [tab, setTab] = useLocalState(context, 'tab', 1); +export const CardContent = (props) => { + const { act, data } = useBackend(); + const [tab, setTab] = useLocalState('tab', 1); const { authenticated, regions = [], @@ -75,13 +75,12 @@ export const CardContent = (props, context) => { id_account, } = data; const [selectedDepartment, setSelectedDepartment] = useLocalState( - context, 'department', Object.keys(jobs)[0] ); const departmentJobs = jobs[selectedDepartment] || []; return ( - + <>
{ ) } buttons={ - + <>
{!!has_id && !!authenticated && ( @@ -229,6 +228,6 @@ export const CardContent = (props, context) => { )} )} -
+ ); }; diff --git a/tgui/packages/tgui/interfaces/CasSim.tsx b/tgui/packages/tgui/interfaces/CasSim.tsx index cac23cde1833..f88bf65feab9 100644 --- a/tgui/packages/tgui/interfaces/CasSim.tsx +++ b/tgui/packages/tgui/interfaces/CasSim.tsx @@ -9,10 +9,9 @@ interface CasSimData { detonation_cooldown: number; } -export const CasSim = (_props, context) => { - const { act, data } = useBackend(context); +export const CasSim = () => { + const { act, data } = useBackend(); const [simulationView, setSimulationView] = useLocalState( - context, 'simulation_view', false ); diff --git a/tgui/packages/tgui/interfaces/Centrifuge.jsx b/tgui/packages/tgui/interfaces/Centrifuge.jsx index 45ed7bb4b6d7..94a1e7594fd3 100644 --- a/tgui/packages/tgui/interfaces/Centrifuge.jsx +++ b/tgui/packages/tgui/interfaces/Centrifuge.jsx @@ -2,8 +2,8 @@ import { useBackend } from '../backend'; import { Section, Flex, Button, Box, Input, NoticeBox } from '../components'; import { Window } from '../layouts'; -export const Centrifuge = (_props, context) => { - const { act, data } = useBackend(context); +export const Centrifuge = () => { + const { act, data } = useBackend(); return ( diff --git a/tgui/packages/tgui/interfaces/Changelog.jsx b/tgui/packages/tgui/interfaces/Changelog.jsx index 73982f2718a9..5d2fa9447b47 100644 --- a/tgui/packages/tgui/interfaces/Changelog.jsx +++ b/tgui/packages/tgui/interfaces/Changelog.jsx @@ -1,6 +1,6 @@ import { classes } from 'common/react'; import { useBackend } from '../backend'; -import { Component, Fragment } from 'inferno'; +import { Component, Fragment } from 'react'; import { Box, Button, Dropdown, Icon, Section, Stack, Table } from '../components'; import { Window } from '../layouts'; import { resolveAsset } from '../assets'; @@ -60,7 +60,7 @@ export class Changelog extends Component { } getData = (date, attemptNumber = 1) => { - const { act } = useBackend(this.context); + const { act } = useBackend(); const self = this; const maxAttempts = 6; @@ -92,7 +92,7 @@ export class Changelog extends Component { componentDidMount() { const { data: { dates = [] }, - } = useBackend(this.context); + } = useBackend(); if (dates) { dates.forEach((date) => @@ -107,7 +107,7 @@ export class Changelog extends Component { const { data, selectedDate, selectedIndex } = this.state; const { data: { dates }, - } = useBackend(this.context); + } = useBackend(); const { dateChoices } = this; const dateDropdown = dateChoices.length > 0 && ( diff --git a/tgui/packages/tgui/interfaces/ChemDispenser.jsx b/tgui/packages/tgui/interfaces/ChemDispenser.jsx index d4dadb58cfbe..77e4cac58a5f 100644 --- a/tgui/packages/tgui/interfaces/ChemDispenser.jsx +++ b/tgui/packages/tgui/interfaces/ChemDispenser.jsx @@ -3,8 +3,8 @@ import { useBackend } from '../backend'; import { AnimatedNumber, Box, Button, LabeledList, NoticeBox, ProgressBar, Section } from '../components'; import { Window } from '../layouts'; -export const ChemDispenser = (props, context) => { - const { act, data } = useBackend(context); +export const ChemDispenser = (props) => { + const { act, data } = useBackend(); const beakerTransferAmounts = data.beakerTransferAmounts || []; const beakerContents = data.beakerContents || []; return ( diff --git a/tgui/packages/tgui/interfaces/ChooseFruit.jsx b/tgui/packages/tgui/interfaces/ChooseFruit.jsx index 576897b16262..1a1ee9f85341 100644 --- a/tgui/packages/tgui/interfaces/ChooseFruit.jsx +++ b/tgui/packages/tgui/interfaces/ChooseFruit.jsx @@ -3,15 +3,11 @@ import { useBackend, useLocalState } from '../backend'; import { Tabs, Box, Section, Stack, Button } from '../components'; import { Window } from '../layouts'; -export const ChooseFruit = (props, context) => { - const { act, data } = useBackend(context); +export const ChooseFruit = (props) => { + const { act, data } = useBackend(); const { fruits, selected_fruit } = data; - const [compact, setCompact] = useLocalState( - context, - 'choosefruit_compact', - false - ); + const [compact, setCompact] = useLocalState('choosefruit_compact', false); let heightScale = 80; if (compact) heightScale = 45; diff --git a/tgui/packages/tgui/interfaces/ChooseResin.jsx b/tgui/packages/tgui/interfaces/ChooseResin.jsx index 47f91110c0ca..4a031ce9d91f 100644 --- a/tgui/packages/tgui/interfaces/ChooseResin.jsx +++ b/tgui/packages/tgui/interfaces/ChooseResin.jsx @@ -5,15 +5,11 @@ import { Window } from '../layouts'; export const INFINITE_BUILD_AMOUNT = -1; -export const ChooseResin = (props, context) => { - const { act, data } = useBackend(context); +export const ChooseResin = (props) => { + const { act, data } = useBackend(); const { constructions, selected_resin } = data; - const [compact, setCompact] = useLocalState( - context, - 'chooseresin_compact', - false - ); + const [compact, setCompact] = useLocalState('chooseresin_compact', false); let heightScale = 80; if (compact) heightScale = 45; diff --git a/tgui/packages/tgui/interfaces/ColorMatrixEditor.tsx b/tgui/packages/tgui/interfaces/ColorMatrixEditor.tsx index 93edd6f1b2c8..ec5f775c35f4 100644 --- a/tgui/packages/tgui/interfaces/ColorMatrixEditor.tsx +++ b/tgui/packages/tgui/interfaces/ColorMatrixEditor.tsx @@ -10,8 +10,8 @@ type Data = { const PREFIXES = ['r', 'g', 'b', 'a', 'c'] as const; -export const ColorMatrixEditor = (props, context) => { - const { act, data } = useBackend(context); +export const ColorMatrixEditor = (props) => { + const { act, data } = useBackend(); const { mapRef, currentColor } = data; return ( diff --git a/tgui/packages/tgui/interfaces/CommandTablet.jsx b/tgui/packages/tgui/interfaces/CommandTablet.jsx index 8b334d1dac62..429cc943db94 100644 --- a/tgui/packages/tgui/interfaces/CommandTablet.jsx +++ b/tgui/packages/tgui/interfaces/CommandTablet.jsx @@ -2,8 +2,8 @@ import { useBackend } from '../backend'; import { Button, Section, Flex, NoticeBox } from '../components'; import { Window } from '../layouts'; -export const CommandTablet = (_props, context) => { - const { act, data } = useBackend(context); +export const CommandTablet = () => { + const { act, data } = useBackend(); const evacstatus = data.evac_status; diff --git a/tgui/packages/tgui/interfaces/CrewConsole.jsx b/tgui/packages/tgui/interfaces/CrewConsole.jsx index 15c49d28061e..e84827ca7c57 100644 --- a/tgui/packages/tgui/interfaces/CrewConsole.jsx +++ b/tgui/packages/tgui/interfaces/CrewConsole.jsx @@ -100,8 +100,8 @@ export const CrewConsole = () => { ); }; -const CrewTable = (props, context) => { - const { act, data } = useBackend(context); +const CrewTable = (props) => { + const { act, data } = useBackend(); const sensors = sortBy((s) => s.ijob)(data.sensors ?? []); return ( @@ -127,8 +127,8 @@ const CrewTable = (props, context) => { ); }; -const CrewTableEntry = (props, context) => { - const { act, data } = useBackend(context); +const CrewTableEntry = (props) => { + const { act, data } = useBackend(); const { link_allowed } = data; const { sensor_data } = props; const { diff --git a/tgui/packages/tgui/interfaces/Cryo.jsx b/tgui/packages/tgui/interfaces/Cryo.jsx index 240352836476..338717f2d0ca 100644 --- a/tgui/packages/tgui/interfaces/Cryo.jsx +++ b/tgui/packages/tgui/interfaces/Cryo.jsx @@ -32,8 +32,8 @@ export const Cryo = () => { ); }; -const CryoContent = (props, context) => { - const { act, data } = useBackend(context); +const CryoContent = (props) => { + const { act, data } = useBackend(); return ( <>
diff --git a/tgui/packages/tgui/interfaces/DemoSim.tsx b/tgui/packages/tgui/interfaces/DemoSim.tsx index 87dfa81236be..4b2a1487146e 100644 --- a/tgui/packages/tgui/interfaces/DemoSim.tsx +++ b/tgui/packages/tgui/interfaces/DemoSim.tsx @@ -10,10 +10,9 @@ interface DemoSimData { detonation_cooldown: number; } -export const DemoSim = (_props, context) => { - const { act, data } = useBackend(context); +export const DemoSim = () => { + const { act, data } = useBackend(); const [simulationView, setSimulationView] = useLocalState( - context, 'simulation_view', false ); diff --git a/tgui/packages/tgui/interfaces/Disposals.jsx b/tgui/packages/tgui/interfaces/Disposals.jsx index c64a55a91334..7fa8098869b9 100644 --- a/tgui/packages/tgui/interfaces/Disposals.jsx +++ b/tgui/packages/tgui/interfaces/Disposals.jsx @@ -2,8 +2,8 @@ import { useBackend } from '../backend'; import { Section, ProgressBar, Button, Box } from '../components'; import { Window } from '../layouts'; -export const Disposals = (_props, context) => { - const { act, data } = useBackend(context); +export const Disposals = () => { + const { act, data } = useBackend(); const { pressure, mode, flush } = data; diff --git a/tgui/packages/tgui/interfaces/DrawnMap.jsx b/tgui/packages/tgui/interfaces/DrawnMap.jsx index cd5a9539f847..0e789b631d39 100644 --- a/tgui/packages/tgui/interfaces/DrawnMap.jsx +++ b/tgui/packages/tgui/interfaces/DrawnMap.jsx @@ -1,5 +1,5 @@ import { Box } from '../components'; -import { Component, createRef } from 'inferno'; +import { Component, createRef } from 'react'; export class DrawnMap extends Component { constructor(props) { diff --git a/tgui/packages/tgui/interfaces/DropshipFlightControl.tsx b/tgui/packages/tgui/interfaces/DropshipFlightControl.tsx index 64486c66ad82..2ae9a17fe35f 100644 --- a/tgui/packages/tgui/interfaces/DropshipFlightControl.tsx +++ b/tgui/packages/tgui/interfaces/DropshipFlightControl.tsx @@ -27,8 +27,8 @@ interface DropshipNavigationProps extends NavigationProps { playing_launch_announcement_alarm: boolean; } -const DropshipDoorControl = (_, context) => { - const { data, act } = useBackend(context); +const DropshipDoorControl = () => { + const { data, act } = useBackend(); const in_flight = data.shuttle_mode === 'called' || data.shuttle_mode === 'pre-arrival'; const disable_door_controls = in_flight; @@ -111,10 +111,9 @@ const DropshipDoorControl = (_, context) => { ); }; -export const DropshipDestinationSelection = (_, context) => { - const { data, act } = useBackend(context); +export const DropshipDestinationSelection = () => { + const { data, act } = useBackend(); const [siteselection, setSiteSelection] = useSharedState( - context, 'target_site', undefined ); @@ -149,8 +148,8 @@ interface DestinationProps { readonly availableOnly?: boolean; } -const DestinationSelector = (props: DestinationProps, context) => { - const { data } = useBackend(context); +const DestinationSelector = (props: DestinationProps) => { + const { data } = useBackend(); return ( <> {props.options @@ -186,8 +185,8 @@ const DestinationSelector = (props: DestinationProps, context) => { ); }; -export const TouchdownCooldown = (_, context) => { - const { data } = useBackend(context); +export const TouchdownCooldown = () => { + const { data } = useBackend(); return (
@@ -210,13 +209,12 @@ export const TouchdownCooldown = (_, context) => { ); }; -const AutopilotConfig = (props, context) => { - const { data, act } = useBackend(context); +const AutopilotConfig = (props) => { + const { data, act } = useBackend(); const [automatedHangar, setAutomatedHangar] = useSharedState< string | undefined - >(context, 'autopilot_hangar', undefined); + >('autopilot_hangar', undefined); const [automatedLZ, setAutomatedLZ] = useSharedState( - context, 'autopilot_groundside', undefined ); @@ -281,8 +279,8 @@ const AutopilotConfig = (props, context) => { ); }; -const StopLaunchAnnouncementAlarm = (_, context) => { - const { act } = useBackend(context); +const StopLaunchAnnouncementAlarm = () => { + const { act } = useBackend(); return (
{props.data @@ -57,9 +57,9 @@ const PlaytimeTable = (props: { readonly data: PlaytimeRecord[] }, context) => { ); }; -export const Playtime = (props, context) => { - const { data } = useBackend(context); - const [selected, setSelected] = useLocalState(context, 'selected', 'human'); +export const Playtime = (props) => { + const { data } = useBackend(); + const [selected, setSelected] = useLocalState('selected', 'human'); const humanTime = data.stored_human_playtime.length > 0 ? data.stored_human_playtime[0].playtime diff --git a/tgui/packages/tgui/interfaces/PodLauncher.jsx b/tgui/packages/tgui/interfaces/PodLauncher.jsx index 751fe1d386af..22f44abaf53c 100644 --- a/tgui/packages/tgui/interfaces/PodLauncher.jsx +++ b/tgui/packages/tgui/interfaces/PodLauncher.jsx @@ -2,7 +2,7 @@ import { toFixed } from 'common/math'; import { storage } from 'common/storage'; import { multiline } from 'common/string'; import { createUuid } from 'common/uuid'; -import { Component, Fragment } from 'inferno'; +import { Component, Fragment } from 'react'; import { useBackend, useLocalState } from '../backend'; import { Box, Button, ByondUi, Divider, Input, Knob, LabeledControls, NumberInput, Section, Flex, Slider } from '../components'; import { Window } from '../layouts'; @@ -11,7 +11,7 @@ const pod_grey = { color: 'grey', }; -export const PodLauncher = (props, context) => { +export const PodLauncher = (props) => { return ( @@ -19,7 +19,7 @@ export const PodLauncher = (props, context) => { ); }; -const PodLauncherContent = (props, context) => { +const PodLauncherContent = (props) => { return ( @@ -132,8 +132,8 @@ const EFFECTS_LOAD = [ selected: (data) => { return data['launch_choice'] === data.glob_launch_options.LAUNCH_ALL; }, - onClick: (context) => { - const { act, data } = useBackend(context); + onClick: () => { + const { act, data } = useBackend(); act('set_launch_option', { launch_option: 'LAUNCH_ALL' }); }, }, @@ -143,8 +143,8 @@ const EFFECTS_LOAD = [ selected: (data) => { return data['launch_choice'] === data.glob_launch_options.LAUNCH_RANDOM; }, - onClick: (context) => { - const { act, data } = useBackend(context); + onClick: () => { + const { act, data } = useBackend(); act('set_launch_option', { launch_option: 'LAUNCH_RANDOM' }); }, }, @@ -157,8 +157,8 @@ const EFFECTS_LOAD = [ selected: (data) => { return !data['launch_random_item']; }, - onClick: (context) => { - const { act, data } = useBackend(context); + onClick: () => { + const { act, data } = useBackend(); act('launch_random_item', { should_do: false }); }, }, @@ -168,8 +168,8 @@ const EFFECTS_LOAD = [ selected: (data) => { return data['launch_random_item']; }, - onClick: (context) => { - const { act, data } = useBackend(context); + onClick: () => { + const { act, data } = useBackend(); act('launch_random_item', { should_do: true }); }, }, @@ -180,8 +180,8 @@ const EFFECTS_LOAD = [ title: 'Clone', icon: 'clone', selected: (data) => data['launch_clone'], - onClick: (context) => { - const { act, data } = useBackend(context); + onClick: () => { + const { act, data } = useBackend(); act('launch_clone', { should_do: !data['launch_clone'] }); }, }, @@ -189,8 +189,8 @@ const EFFECTS_LOAD = [ title: 'Recall', icon: 'redo', selected: (data) => data['should_recall'], - onClick: (context) => { - const { act, data } = useBackend(context); + onClick: () => { + const { act, data } = useBackend(); act('set_should_recall', { should_do: !data['should_recall'] }); }, }, @@ -203,8 +203,8 @@ const EFFECTS_NORMAL = [ selected: (data) => { return data['gib_on_land']; }, - onClick: (context) => { - const { act, data } = useBackend(context); + onClick: () => { + const { act, data } = useBackend(); act('set_gib_on_land', { should_do: !data['gib_on_land'] }); }, }, @@ -214,8 +214,8 @@ const EFFECTS_NORMAL = [ selected: (data) => { return data['stealth']; }, - onClick: (context) => { - const { act, data } = useBackend(context); + onClick: () => { + const { act, data } = useBackend(); act('set_stealth', { should_do: !data['stealth'] }); }, }, @@ -225,8 +225,8 @@ const EFFECTS_NORMAL = [ selected: (data) => { return data['can_be_opened']; }, - onClick: (context) => { - const { act, data } = useBackend(context); + onClick: () => { + const { act, data } = useBackend(); act('set_can_be_opened', { should_do: !data['can_be_opened'] }); }, }, @@ -246,13 +246,9 @@ const EFFECTS_ALL = [ }, ]; -const ViewTabHolder = (props, context) => { - const { act, data } = useBackend(context); - const [tabPageIndex, setTabPageIndex] = useLocalState( - context, - 'tabPageIndex', - 1 - ); +const ViewTabHolder = (props) => { + const { act, data } = useBackend(); + const [tabPageIndex, setTabPageIndex] = useLocalState('tabPageIndex', 1); const { glob_tab_indexes, custom_dropoff, map_ref } = data; const TabPageComponent = TABPAGES[tabPageIndex].component(); return ( @@ -342,7 +338,7 @@ const ViewTabHolder = (props, context) => { ); }; -const TabPod = (props, context) => { +const TabPod = (props) => { return ( Note: You can right click on this @@ -352,8 +348,8 @@ const TabPod = (props, context) => { ); }; -const TabBay = (props, context) => { - const { act, data } = useBackend(context); +const TabBay = (props) => { + const { act, data } = useBackend(); return ( <>
{props.items @@ -43,16 +43,12 @@ const ContentsTable = ( ); }; -const Contents = ( - props: { - readonly isLocal: boolean; - readonly items: StorageItem[]; - readonly title: string; - }, - context -) => { +const Contents = (props: { + readonly isLocal: boolean; + readonly items: StorageItem[]; + readonly title: string; +}) => { const [tabIndex, setTabIndex] = useLocalState( - context, `contentsTab_${props.isLocal}`, 'all' ); @@ -109,11 +105,11 @@ const Contents = ( ); }; -const ContentItem = ( - props: { readonly isLocal: boolean; readonly item: StorageItem }, - context -) => { - const { data, act } = useBackend(context); +const ContentItem = (props: { + readonly isLocal: boolean; + readonly item: StorageItem; +}) => { + const { data, act } = useBackend(); const { item } = props; const itemref = { 'index': item.index, 'amount': 1, isLocal: props.isLocal }; return ( @@ -149,8 +145,8 @@ const ContentItem = ( ); }; -export const SmartFridge = (_, context) => { - const { data } = useBackend(context); +export const SmartFridge = () => { + const { data } = useBackend(); return ( diff --git a/tgui/packages/tgui/interfaces/Smes.jsx b/tgui/packages/tgui/interfaces/Smes.jsx index 47f6e11991f1..7dce4bf1949f 100644 --- a/tgui/packages/tgui/interfaces/Smes.jsx +++ b/tgui/packages/tgui/interfaces/Smes.jsx @@ -6,8 +6,8 @@ import { Window } from '../layouts'; // Common power multiplier const POWER_MUL = 1e3; -export const Smes = (props, context) => { - const { act, data } = useBackend(context); +export const Smes = (props) => { + const { act, data } = useBackend(); const { capacityPercent, capacity, diff --git a/tgui/packages/tgui/interfaces/SquadInfo.tsx b/tgui/packages/tgui/interfaces/SquadInfo.tsx index 4bd0068850e2..112c1b9b2d99 100644 --- a/tgui/packages/tgui/interfaces/SquadInfo.tsx +++ b/tgui/packages/tgui/interfaces/SquadInfo.tsx @@ -47,11 +47,8 @@ interface SquadProps { objective: { primary?: string; secondary?: string }; } -const FireTeamLeadLabel = ( - props: { readonly ftl: SquadMarineEntry }, - context -) => { - const { data } = useBackend(context); +const FireTeamLeadLabel = (props: { readonly ftl: SquadMarineEntry }) => { + const { data } = useBackend(); const { ftl } = props; return ( <> @@ -75,11 +72,11 @@ const FireTeamLeadLabel = ( ); }; -const FireTeamLead = ( - props: { readonly fireteam: FireTeamEntry; readonly ft: string }, - context -) => { - const { data, act } = useBackend(context); +const FireTeamLead = (props: { + readonly fireteam: FireTeamEntry; + readonly ft: string; +}) => { + const { data, act } = useBackend(); const fireteamLead = props.fireteam.tl; const isNotAssigned = fireteamLead === undefined || @@ -114,7 +111,7 @@ interface FireteamBoxProps extends BoxProps { readonly isEmpty: boolean; } -const FireteamBox = (props: FireteamBoxProps, context) => { +const FireteamBox = (props: FireteamBoxProps) => { return (
{props.name}
@@ -123,8 +120,8 @@ const FireteamBox = (props: FireteamBoxProps, context) => { ); }; -const FireTeam = (props: { readonly ft: string }, context) => { - const { data, act } = useBackend(context); +const FireTeam = (props: { readonly ft: string }) => { + const { data, act } = useBackend(); const fireteam: FireTeamEntry = data.fireteams[props.ft]; const members: SquadMarineEntry[] = @@ -193,15 +190,12 @@ const FireTeam = (props: { readonly ft: string }, context) => { ); }; -const FireTeamMember = ( - props: { - readonly member: SquadMarineEntry; - readonly team: string; - readonly fireteam?: FireTeamEntry; - }, - context -) => { - const { data, act } = useBackend(context); +const FireTeamMember = (props: { + readonly member: SquadMarineEntry; + readonly team: string; + readonly fireteam?: FireTeamEntry; +}) => { + const { data, act } = useBackend(); const assignFT1 = { target_ft: 'FT1', target_marine: props.member.name }; const assignFT2 = { target_ft: 'FT2', target_marine: props.member.name }; const assignFT3 = { target_ft: 'FT3', target_marine: props.member.name }; @@ -273,8 +267,8 @@ const FireTeamMember = ( ); }; -const SquadObjectives = (props, context) => { - const { data } = useBackend(context); +const SquadObjectives = (props) => { + const { data } = useBackend(); const primaryObjective = data.objective?.primary ?? 'Unset'; const secondaryObjective = data.objective?.secondary ?? 'Unset'; return ( @@ -289,8 +283,8 @@ const SquadObjectives = (props, context) => { ); }; -export const SquadInfo = (_, context) => { - const { data } = useBackend(context); +export const SquadInfo = () => { + const { data } = useBackend(); const fireteams = ['FT1', 'FT2', 'FT3', 'Unassigned']; return ( diff --git a/tgui/packages/tgui/interfaces/SquadMod.jsx b/tgui/packages/tgui/interfaces/SquadMod.jsx index 15ce727a5341..d2b7722bd8a0 100644 --- a/tgui/packages/tgui/interfaces/SquadMod.jsx +++ b/tgui/packages/tgui/interfaces/SquadMod.jsx @@ -2,8 +2,8 @@ import { useBackend } from '../backend'; import { Button, Stack, Section, NoticeBox } from '../components'; import { Window } from '../layouts'; -export const SquadMod = (props, context) => { - const { act, data } = useBackend(context); +export const SquadMod = (props) => { + const { act, data } = useBackend(); const { squads = [], human, id_name, has_id } = data; return ( diff --git a/tgui/packages/tgui/interfaces/StatbrowserOptions.jsx b/tgui/packages/tgui/interfaces/StatbrowserOptions.jsx index d4a1a482336e..2b1712453360 100644 --- a/tgui/packages/tgui/interfaces/StatbrowserOptions.jsx +++ b/tgui/packages/tgui/interfaces/StatbrowserOptions.jsx @@ -2,14 +2,10 @@ import { useBackend, useLocalState } from '../backend'; import { Flex, NumberInput, Section } from '../components'; import { Window } from '../layouts'; -export const StatbrowserOptions = (props, context) => { - const { act, data } = useBackend(context); +export const StatbrowserOptions = (props) => { + const { act, data } = useBackend(); const { current_fontsize } = data; - const [fontsize, setFontsize] = useLocalState( - context, - 'fontsize', - current_fontsize - ); + const [fontsize, setFontsize] = useLocalState('fontsize', current_fontsize); return ( @@ -33,7 +29,7 @@ export const StatbrowserOptions = (props, context) => { ); }; -const Options = (props, context) => { +const Options = (props) => { const { children } = props; return ( @@ -49,7 +45,7 @@ const Options = (props, context) => { ); }; -const Option = (props, context) => { +const Option = (props) => { const { category, input } = props; return ( @@ -60,7 +56,7 @@ const Option = (props, context) => { ); }; -const NumberOption = (props, context) => { +const NumberOption = (props) => { const { category, ...rest } = props; return