From bcd29944b76dc7e0ed36c0126ecfb9c2ae683fa1 Mon Sep 17 00:00:00 2001 From: Cody Brittain <1779662+Generalcamo@users.noreply.github.com> Date: Wed, 28 Jan 2026 02:16:34 -0500 Subject: [PATCH] Prettier update (#21722) No player-facing changes. Ports several PRs from tgstation, including: https://github.com/tgstation/tgstation/pull/66862 https://github.com/tgstation/tgstation/pull/80189 https://github.com/tgstation/tgstation/pull/90317 https://github.com/tgstation/tgstation/pull/91379 In addition, removes IntelliCode from the recommended extensions. This is deprecated, and we prefer not to force the replacement onto contributors. Contributors may individually choose to use this instead. --- .editorconfig | 23 +- .prettierignore | 22 +- .prettierrc.yml | 1 + .vscode/extensions.json | 27 +- .vscode/settings.json | 31 +- html/changelogs/GeneralCamo - VSCode Imp.yml | 61 + tgui/.prettierignore | 21 +- tgui/.prettierrc.yml | 19 +- tgui/.yarn/sdks/eslint/package.json | 5 +- tgui/.yarn/sdks/prettier/bin/prettier.cjs | 20 + tgui/.yarn/sdks/prettier/index.cjs | 20 + tgui/.yarn/sdks/prettier/index.js | 20 - tgui/.yarn/sdks/prettier/package.json | 7 +- tgui/.yarn/sdks/typescript/lib/tsserver.js | 187 ++- .../sdks/typescript/lib/tsserverlibrary.js | 187 ++- tgui/.yarn/sdks/typescript/lib/typescript.js | 6 +- tgui/.yarn/sdks/typescript/package.json | 6 +- tgui/.yarnrc.yml | 2 +- tgui/README.md | 3 +- tgui/docs/component-reference.md | 299 ++-- tgui/docs/converting-old-tgui-interfaces.md | 104 +- tgui/docs/tgui-for-custom-html-popups.md | 14 +- tgui/docs/tutorial-and-examples.md | 97 +- tgui/package.json | 8 +- tgui/packages/common/collections.ts | 12 +- tgui/packages/common/color.js | 6 +- tgui/packages/common/redux.test.ts | 11 +- tgui/packages/common/redux.ts | 20 +- tgui/packages/common/storage.js | 8 +- tgui/packages/common/timer.js | 2 +- tgui/packages/common/uuid.js | 2 +- tgui/packages/tgfont/icons/ATTRIBUTIONS.md | 2 + tgui/packages/tgfont/static/tgfont.css | 51 +- tgui/packages/tgui-bench/lib/benchmark.d.ts | 2 +- .../tgui-bench/tests/Tooltip.test.tsx | 2 +- tgui/packages/tgui-dev-server/dreamseeker.js | 2 +- tgui/packages/tgui-dev-server/link/retrace.js | 2 +- tgui/packages/tgui-dev-server/reloader.js | 6 +- tgui/packages/tgui-panel/Panel.js | 3 +- .../tgui-panel/audio/NowPlayingWidget.js | 13 +- .../tgui-panel/chat/ChatPageSettings.js | 30 +- tgui/packages/tgui-panel/chat/ChatPanel.js | 9 +- tgui/packages/tgui-panel/chat/ChatTabs.js | 12 +- tgui/packages/tgui-panel/chat/middleware.js | 25 +- tgui/packages/tgui-panel/chat/reducer.js | 11 +- tgui/packages/tgui-panel/chat/renderer.js | 27 +- .../tgui-panel/chat/replaceInTextNode.js | 2 +- tgui/packages/tgui-panel/index.js | 2 +- tgui/packages/tgui-panel/ping/reducer.js | 8 +- tgui/packages/tgui-panel/reconnect.tsx | 6 +- .../tgui-panel/settings/SettingsPanel.js | 80 +- tgui/packages/tgui-panel/settings/actions.js | 6 +- .../tgui-panel/settings/middleware.ts | 16 +- tgui/packages/tgui-panel/settings/reducer.js | 13 +- tgui/packages/tgui-panel/styles/main.scss | 2 +- .../tgui-panel/styles/tgchat/chat-dark.scss | 33 +- .../tgui-panel/styles/tgchat/chat-light.scss | 33 +- .../tgui-panel/styles/themes/light.scss | 4 +- tgui/packages/tgui-say/TguiSay.tsx | 8 +- tgui/packages/tgui-say/timers.ts | 4 +- tgui/packages/tgui/backend.ts | 8 +- tgui/packages/tgui/components/Blink.js | 3 +- .../tgui/components/BodyZoneSelector.tsx | 23 +- tgui/packages/tgui/components/Box.tsx | 2 +- tgui/packages/tgui/components/Button.js | 10 +- tgui/packages/tgui/components/Chart.js | 3 +- tgui/packages/tgui/components/Collapsible.js | 3 +- tgui/packages/tgui/components/ColorBox.js | 3 +- tgui/packages/tgui/components/Dialog.tsx | 3 +- .../tgui/components/DraggableControl.js | 4 +- tgui/packages/tgui/components/Dropdown.js | 16 +- tgui/packages/tgui/components/FitText.tsx | 3 +- tgui/packages/tgui/components/Flex.tsx | 2 +- tgui/packages/tgui/components/Icon.js | 3 +- .../packages/tgui/components/InfinitePlane.js | 23 +- tgui/packages/tgui/components/Input.js | 3 +- tgui/packages/tgui/components/Knob.js | 19 +- .../tgui/components/LabeledControls.js | 6 +- tgui/packages/tgui/components/LabeledList.tsx | 9 +- tgui/packages/tgui/components/MenuBar.tsx | 18 +- tgui/packages/tgui/components/Modal.js | 3 +- tgui/packages/tgui/components/NumberInput.js | 9 +- tgui/packages/tgui/components/Popper.tsx | 4 +- tgui/packages/tgui/components/ProgressBar.js | 2 +- .../tgui/components/RestrictedInput.js | 11 +- tgui/packages/tgui/components/RoundGauge.js | 13 +- tgui/packages/tgui/components/Section.tsx | 6 +- tgui/packages/tgui/components/Slider.js | 11 +- tgui/packages/tgui/components/Stack.tsx | 9 +- tgui/packages/tgui/components/Table.js | 3 +- tgui/packages/tgui/components/Tabs.js | 6 +- tgui/packages/tgui/components/TextArea.js | 10 +- tgui/packages/tgui/components/Tooltip.tsx | 4 +- tgui/packages/tgui/contants.test.ts | 7 +- tgui/packages/tgui/debug/KitchenSink.js | 3 +- tgui/packages/tgui/debug/middleware.js | 6 +- tgui/packages/tgui/drag.ts | 24 +- tgui/packages/tgui/events.test.ts | 8 +- tgui/packages/tgui/events.ts | 2 +- tgui/packages/tgui/format.test.ts | 8 +- tgui/packages/tgui/format.ts | 6 +- tgui/packages/tgui/http.ts | 2 +- .../tgui/interfaces/AIMaintenance.tsx | 12 +- tgui/packages/tgui/interfaces/ATM.tsx | 25 +- .../tgui/interfaces/AccessTerminal.tsx | 3 +- .../tgui/interfaces/AccountDatabase.tsx | 30 +- tgui/packages/tgui/interfaces/AgentID.tsx | 8 +- .../tgui/interfaces/AlarmMonitoring.tsx | 21 +- tgui/packages/tgui/interfaces/AlertModal.tsx | 20 +- tgui/packages/tgui/interfaces/Apc.tsx | 12 +- .../tgui/interfaces/AppearanceChanger.tsx | 18 +- tgui/packages/tgui/interfaces/ArmorValues.tsx | 2 +- .../packages/tgui/interfaces/AtmoScrubber.tsx | 47 +- .../tgui/interfaces/AtmosAlarmControl.tsx | 7 +- .../packages/tgui/interfaces/AtmosControl.tsx | 5 +- tgui/packages/tgui/interfaces/AtmosPump.tsx | 11 +- tgui/packages/tgui/interfaces/Autolathe.tsx | 55 +- .../tgui/interfaces/AwayShuttleManifest.tsx | 19 +- .../tgui/interfaces/BluespaceDrive.tsx | 8 +- tgui/packages/tgui/interfaces/BodyScanner.tsx | 58 +- .../tgui/interfaces/CameraMonitoring.tsx | 10 +- tgui/packages/tgui/interfaces/Canister.tsx | 15 +- .../packages/tgui/interfaces/CargoControl.tsx | 30 +- .../tgui/interfaces/CargoDelivery.tsx | 9 +- tgui/packages/tgui/interfaces/CargoOrder.tsx | 31 +- tgui/packages/tgui/interfaces/Changelog.js | 29 +- tgui/packages/tgui/interfaces/ChatClient.tsx | 152 +- tgui/packages/tgui/interfaces/ChemCodex.tsx | 33 +- tgui/packages/tgui/interfaces/ChemMaster.tsx | 90 +- .../tgui/interfaces/ChemicalDispenser.tsx | 22 +- .../tgui/interfaces/CircuitPrinter.tsx | 5 +- .../tgui/interfaces/CommandCommunications.tsx | 17 +- .../packages/tgui/interfaces/CookingCodex.tsx | 5 +- .../tgui/interfaces/CoolingUnitThermostat.tsx | 12 +- .../tgui/interfaces/CrusherControl.tsx | 6 +- tgui/packages/tgui/interfaces/CryoTube.tsx | 56 +- tgui/packages/tgui/interfaces/DamageMenu.tsx | 4 +- .../tgui/interfaces/DiagnosticsUnit.tsx | 3 +- .../tgui/interfaces/DigitalWarrant.tsx | 6 +- .../tgui/interfaces/DockingAirlockConsole.tsx | 3 +- tgui/packages/tgui/interfaces/Doors.tsx | 20 +- .../EscapeShuttleControlConsole.tsx | 2 +- .../tgui/interfaces/FactionSelect.tsx | 31 +- tgui/packages/tgui/interfaces/Fax.tsx | 9 +- tgui/packages/tgui/interfaces/FileManager.tsx | 6 +- tgui/packages/tgui/interfaces/FireAlarm.tsx | 3 +- tgui/packages/tgui/interfaces/FlavorText.tsx | 2 +- tgui/packages/tgui/interfaces/FollowMenu.tsx | 7 +- tgui/packages/tgui/interfaces/Freezer.tsx | 9 +- tgui/packages/tgui/interfaces/FusionCodex.tsx | 25 +- .../tgui/interfaces/FusionCoreControl.tsx | 18 +- .../tgui/interfaces/FusionGyrotronControl.tsx | 11 +- .../tgui/interfaces/FusionInjectorControl.tsx | 13 +- tgui/packages/tgui/interfaces/GPS.tsx | 3 +- .../packages/tgui/interfaces/GhostSpawner.tsx | 49 +- tgui/packages/tgui/interfaces/Helm.tsx | 24 +- .../tgui/interfaces/HivenetManifest.tsx | 6 +- tgui/packages/tgui/interfaces/Holopad.tsx | 9 +- .../tgui/interfaces/IDCardModification.tsx | 11 +- .../tgui/interfaces/IPCDiagnostics.tsx | 33 +- tgui/packages/tgui/interfaces/Janitor.tsx | 5 +- tgui/packages/tgui/interfaces/Jukebox.tsx | 8 +- .../tgui/interfaces/KineticHarvester.tsx | 6 +- tgui/packages/tgui/interfaces/LateJoin.tsx | 13 +- tgui/packages/tgui/interfaces/LawManager.tsx | 236 +-- .../tgui/interfaces/LightingControl.tsx | 3 +- .../tgui/interfaces/ListInputModal.tsx | 30 +- tgui/packages/tgui/interfaces/ListViewer.tsx | 6 +- tgui/packages/tgui/interfaces/Map.tsx | 32 +- tgui/packages/tgui/interfaces/Merchant.tsx | 21 +- tgui/packages/tgui/interfaces/MobTracker.tsx | 29 +- tgui/packages/tgui/interfaces/NTMonitor.tsx | 12 +- tgui/packages/tgui/interfaces/NTOSArcade.tsx | 21 +- .../tgui/interfaces/NTOSClientManager.tsx | 28 +- tgui/packages/tgui/interfaces/NTOSConfig.tsx | 29 +- .../tgui/interfaces/NTOSDownloader.tsx | 28 +- tgui/packages/tgui/interfaces/NTOSMain.tsx | 6 +- .../tgui/interfaces/NTOSNewsBrowser.tsx | 21 +- .../packages/tgui/interfaces/NarratePanel.tsx | 22 +- tgui/packages/tgui/interfaces/Nav.tsx | 3 +- .../tgui/interfaces/NeuralConfiguration.tsx | 14 +- .../tgui/interfaces/NumberInputModal.tsx | 3 +- .../packages/tgui/interfaces/OdysseyPanel.tsx | 9 +- tgui/packages/tgui/interfaces/Operating.tsx | 18 +- .../tgui/interfaces/OrderTerminal.tsx | 14 +- tgui/packages/tgui/interfaces/OreDetector.tsx | 6 +- tgui/packages/tgui/interfaces/Photocopier.tsx | 12 +- tgui/packages/tgui/interfaces/PlayerPanel.tsx | 7 +- .../tgui/interfaces/PortableGenerator.tsx | 21 +- .../packages/tgui/interfaces/PortablePump.tsx | 15 +- .../packages/tgui/interfaces/PowerMonitor.tsx | 18 +- tgui/packages/tgui/interfaces/Proximity.tsx | 3 +- tgui/packages/tgui/interfaces/PsionicShop.tsx | 22 +- tgui/packages/tgui/interfaces/PussyWagon.tsx | 9 +- tgui/packages/tgui/interfaces/QuikPay.tsx | 14 +- tgui/packages/tgui/interfaces/RCON.tsx | 28 +- tgui/packages/tgui/interfaces/Records.tsx | 112 +- tgui/packages/tgui/interfaces/SMES.tsx | 31 +- tgui/packages/tgui/interfaces/SeedStorage.tsx | 3 +- tgui/packages/tgui/interfaces/Sensors.tsx | 39 +- .../tgui/interfaces/ShieldCapacitor.tsx | 16 +- .../tgui/interfaces/ShieldGenerator.tsx | 3 +- tgui/packages/tgui/interfaces/Signaler.tsx | 3 +- tgui/packages/tgui/interfaces/Sleeper.tsx | 34 +- tgui/packages/tgui/interfaces/SmartFridge.tsx | 20 +- tgui/packages/tgui/interfaces/SpaceHeater.tsx | 13 +- tgui/packages/tgui/interfaces/SuitSensors.tsx | 26 +- tgui/packages/tgui/interfaces/Supermatter.tsx | 3 +- .../tgui/interfaces/SuspensionGenerator.tsx | 6 +- .../tgui/interfaces/SyntheticFabricator.tsx | 28 +- tgui/packages/tgui/interfaces/Tank.tsx | 29 +- .../tgui/interfaces/TextInputModal.tsx | 5 +- tgui/packages/tgui/interfaces/Timer.tsx | 3 +- tgui/packages/tgui/interfaces/TrainEngine.tsx | 3 +- .../tgui/interfaces/TurbineComputer.js | 14 +- tgui/packages/tgui/interfaces/Uplink.tsx | 25 +- tgui/packages/tgui/interfaces/Vending.tsx | 20 +- .../tgui/interfaces/VitalsMonitor.tsx | 12 +- tgui/packages/tgui/interfaces/VotePanel.tsx | 31 +- tgui/packages/tgui/interfaces/Voting.tsx | 6 +- tgui/packages/tgui/interfaces/Wires.tsx | 12 +- .../tgui/interfaces/common/AccessConfig.js | 12 +- .../tgui/interfaces/common/AccessList.js | 23 +- .../tgui/interfaces/common/AtmosControls.tsx | 6 +- .../tgui/interfaces/common/AtmosHandbook.tsx | 55 +- .../tgui/interfaces/common/EditableText.tsx | 5 +- .../tgui/interfaces/common/GasmixParser.tsx | 35 +- .../tgui/interfaces/common/InputButtons.tsx | 9 +- .../tgui/interfaces/common/JobToIcon.ts | 50 +- .../interfaces/common/ManifestSection.tsx | 9 +- .../tgui/interfaces/common/MinimapView.tsx | 12 +- .../tgui/interfaces/common/PortableAtmos.js | 14 +- .../tgui/interfaces/common/RecipeLookup.js | 25 +- .../common/StatusDisplayControls.tsx | 4 +- tgui/packages/tgui/interfaces/pAIDoorjack.tsx | 3 +- .../tgui/interfaces/pAIRecruitment.tsx | 3 +- tgui/packages/tgui/layouts/Layout.js | 6 +- tgui/packages/tgui/layouts/NtosWindow.js | 5 +- tgui/packages/tgui/layouts/Pane.js | 3 +- tgui/packages/tgui/layouts/Window.js | 22 +- tgui/packages/tgui/links.test.ts | 2 +- tgui/packages/tgui/renderer.ts | 2 +- tgui/packages/tgui/sanitize.ts | 2 +- tgui/packages/tgui/store.ts | 21 +- tgui/packages/tgui/stories/ByondUi.stories.js | 11 +- tgui/packages/tgui/stories/Flex.stories.js | 11 +- tgui/packages/tgui/stories/Input.stories.js | 15 +- .../tgui/stories/LabeledList.stories.js | 6 +- tgui/packages/tgui/stories/Popper.stories.js | 12 +- .../tgui/stories/ProgressBar.stories.js | 21 +- tgui/packages/tgui/stories/Storage.stories.js | 6 +- tgui/packages/tgui/stories/Tabs.stories.js | 6 +- .../tgui/styles/components/Button.scss | 12 +- .../tgui/styles/components/ProgressBar.scss | 4 +- .../tgui/styles/components/Tooltip.scss | 2 +- .../tgui/styles/interfaces/AlertModal.scss | 4 +- .../tgui/styles/interfaces/FactionSelect.scss | 3 +- .../tgui/styles/interfaces/ListInput.scss | 4 +- .../tgui/styles/layouts/TitleBar.scss | 8 +- .../packages/tgui/styles/themes/abductor.scss | 4 +- tgui/packages/tgui/styles/themes/admin.scss | 16 +- .../tgui/styles/themes/cardtable.scss | 4 +- .../tgui/styles/themes/hackerman.scss | 4 +- .../tgui/styles/themes/hammertail.scss | 14 +- .../tgui/styles/themes/hephaestus.scss | 6 +- tgui/packages/tgui/styles/themes/idris.scss | 8 +- .../tgui/styles/themes/malfunction.scss | 4 +- .../tgui/styles/themes/nanotrasen.scss | 8 +- tgui/packages/tgui/styles/themes/neutral.scss | 14 +- tgui/packages/tgui/styles/themes/ntOS95.scss | 20 +- tgui/packages/tgui/styles/themes/ntos.scss | 4 +- .../packages/tgui/styles/themes/ntos_cat.scss | 19 +- .../tgui/styles/themes/ntos_darkmode.scss | 10 +- .../tgui/styles/themes/ntos_lightmode.scss | 10 +- .../tgui/styles/themes/ntos_spooky.scss | 4 +- .../tgui/styles/themes/ntos_synth.scss | 16 +- .../tgui/styles/themes/ntos_terminal.scss | 19 +- tgui/packages/tgui/styles/themes/paper.scss | 4 +- tgui/packages/tgui/styles/themes/retro.scss | 6 +- .../tgui/styles/themes/spookyconsole.scss | 4 +- .../tgui/styles/themes/syndicate.scss | 4 +- tgui/packages/tgui/styles/themes/vaurca.scss | 4 +- tgui/packages/tgui/styles/themes/wizard.scss | 16 +- .../tgui/styles/themes/zavodskoi.scss | 4 +- tgui/packages/tgui/styles/themes/zenghu.scss | 4 +- tgui/public/tgui.html | 1346 +++++++++-------- tgui/webpack.config.js | 2 +- tgui/yarn.lock | 1213 ++------------- 288 files changed, 3974 insertions(+), 3715 deletions(-) create mode 100644 .prettierrc.yml create mode 100644 html/changelogs/GeneralCamo - VSCode Imp.yml create mode 100644 tgui/.yarn/sdks/prettier/bin/prettier.cjs create mode 100644 tgui/.yarn/sdks/prettier/index.cjs delete mode 100644 tgui/.yarn/sdks/prettier/index.js diff --git a/.editorconfig b/.editorconfig index 58fd1cf290f..c07643f1122 100644 --- a/.editorconfig +++ b/.editorconfig @@ -2,24 +2,11 @@ root = true [*] -indent_style = tab -end_of_line = lf charset = utf-8 -trim_trailing_whitespace = true +end_of_line = lf +indent_style = space insert_final_newline = true +trim_trailing_whitespace = true -[*.yml] -indent_style = space -indent_size = 2 - -[*.py] -indent_style = space - -[*.sql] -indent_style = space - -[*.md] -trim_trailing_whitespace = false - -[Dockerfile] -indent_style = space +[*.{dm,json,md}] +indent_style = tab diff --git a/.prettierignore b/.prettierignore index 2b7500b2316..b4e6fd6e264 100644 --- a/.prettierignore +++ b/.prettierignore @@ -1,5 +1,19 @@ -# We don't want prettier to run on anything outside of the TGUI folder, so we have to do this. -/* +# Directories +changelogs +data +font-awesome +jquery +juke -# We want it to run into the TGUI folder, however. -!/tgui +## Tgui +node_modules +.yarn +# Avoid running on any bundles. +tgui/public +# Running it on tgui.html is fine, however. +!/tgui/public/tgui.html +# Specific files +package-lock.json +# File names / types +*.min.* +*.pnp.* diff --git a/.prettierrc.yml b/.prettierrc.yml new file mode 100644 index 00000000000..62d77065e7a --- /dev/null +++ b/.prettierrc.yml @@ -0,0 +1 @@ +# This file is okay being empty as it will tell prettier to run in the repo \ No newline at end of file diff --git a/.vscode/extensions.json b/.vscode/extensions.json index b14aef5fc2d..d0ecf1ccc9a 100644 --- a/.vscode/extensions.json +++ b/.vscode/extensions.json @@ -1,19 +1,12 @@ { - "recommendations": [ - "ss13.byond", - "gbasood.byond-dm-language-support", - "platymuus.dm-langclient", - "anturk.dmi-editor", - "eamodio.gitlens", - "github.vscode-github-actions", - "github.vscode-pull-request-github", - "stylemistake.auto-comment-blocks", - "dbaeumer.vscode-eslint", - "vscode.typescript-language-features", - "redhat.vscode-yaml", - "visualstudioexptteam.vscodeintellicode", - "esbenp.prettier-vscode", - "rome.rome", - "editorconfig.editorconfig" - ] + "recommendations": [ + "ss13.byond", + "github.vscode-github-actions", + "github.vscode-pull-request-github", + "dbaeumer.vscode-eslint", + "vscode.typescript-language-features", + "redhat.vscode-yaml", + "esbenp.prettier-vscode", + "rome.rome" + ] } diff --git a/.vscode/settings.json b/.vscode/settings.json index 053af42a14d..4a44976f9ca 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -1,7 +1,7 @@ { "eslint.nodePath": "./tgui/.yarn/sdks", "eslint.workingDirectories": ["./tgui"], - "prettier.prettierPath": "./tgui/.yarn/sdks/prettier/index.js", + "prettier.prettierPath": "./tgui/.yarn/sdks/prettier/index.cjs", "typescript.tsdk": "./tgui/.yarn/sdks/typescript/lib", "typescript.enablePromptUseWorkspaceTsdk": true, "search.exclude": { @@ -11,35 +11,18 @@ "editor.codeActionsOnSave": { "source.fixAll.eslint": "explicit" }, + "editor.insertSpaces": false, "files.eol": "\n", "files.insertFinalNewline": true, + "files.trimTrailingWhitespace": true, "gitlens.advanced.blame.customArguments": ["-w"], - "[javascript]": { + "[javascript][typescript][typescriptreact][javascriptreact][html][scss][css][json][jsonc][markdown][yaml]": { "editor.rulers": [80], "editor.defaultFormatter": "esbenp.prettier-vscode", "editor.formatOnSave": true }, - "[javascriptreact]": { - "editor.rulers": [80], - "editor.defaultFormatter": "esbenp.prettier-vscode", - "editor.formatOnSave": true + "workbench.editorAssociations": { + "*.dmi": "dmiEditor.dmiEditor" }, - "[typescript]": { - "editor.rulers": [80], - "editor.defaultFormatter": "esbenp.prettier-vscode", - "editor.formatOnSave": true - }, - "[typescriptreact]": { - "editor.rulers": [80], - "editor.defaultFormatter": "esbenp.prettier-vscode", - "editor.formatOnSave": true - }, - "[scss]": { - "editor.rulers": [80], - "editor.defaultFormatter": "esbenp.prettier-vscode", - "editor.formatOnSave": true - }, - "rust-analyzer.linkedProjects": [ - "rust/bapi/Cargo.toml" - ] + "rust-analyzer.linkedProjects": ["rust/bapi/Cargo.toml"] } diff --git a/html/changelogs/GeneralCamo - VSCode Imp.yml b/html/changelogs/GeneralCamo - VSCode Imp.yml new file mode 100644 index 00000000000..dcac92ffff0 --- /dev/null +++ b/html/changelogs/GeneralCamo - VSCode Imp.yml @@ -0,0 +1,61 @@ +################################ +# Example Changelog File +# +# Note: This file, and files beginning with ".", and files that don't end in ".yml" will not be read. If you change this file, you will look really dumb. +# +# Your changelog will be merged with a master changelog. (New stuff added only, and only on the date entry for the day it was merged.) +# When it is, any changes listed below will disappear. +# +# Valid Prefixes: +# bugfix +# - (fixes bugs) +# wip +# - (work in progress) +# qol +# - (quality of life) +# soundadd +# - (adds a sound) +# sounddel +# - (removes a sound) +# rscadd +# - (adds a feature) +# rscdel +# - (removes a feature) +# imageadd +# - (adds an image or sprite) +# imagedel +# - (removes an image or sprite) +# spellcheck +# - (fixes spelling or grammar) +# experiment +# - (experimental change) +# balance +# - (balance changes) +# code_imp +# - (misc internal code change) +# refactor +# - (refactors code) +# config +# - (makes a change to the config files) +# admin +# - (makes changes to administrator tools) +# server +# - (miscellaneous changes to server) +################################# + +# Your name. +author: GeneralCamo + +# Optional: Remove this file after generating master changelog. Useful for PR changelogs that won't get used again. +delete-after: True + +# Any changes you've made. See valid prefix list above. +# INDENT WITH TWO SPACES. NOT TABS. SPACES. +# SCREW THIS UP AND IT WON'T WORK. +# Also, this gets changed to [] after reading. Just remove the brackets when you add new shit. +# Please surround your changes in double quotes ("). It works without them, but if you use certain characters it screws up compiling. The quotes will not show up in the changelog. +changes: + - config: "Replaced prettierx with prettier." + - config: "Prettier now runs on the entire repository." + - config: "Removed Intellicode as a recommended extensions for VSCode (Deprecated)." + - config: "Removed BYOND DM Language Support as a recommended extension for VSCode (SpacemanDMM replaced this)." diff --git a/tgui/.prettierignore b/tgui/.prettierignore index 79e703c9544..97d37c5a6fa 100644 --- a/tgui/.prettierignore +++ b/tgui/.prettierignore @@ -1,15 +1,8 @@ -## NPM -/**/node_modules +.pnp.* +.yarn +node_modules -## Yarn -/.yarn -/yarn.lock -/.pnp.* - -/docs -/public -/packages/tgui-polyfill -/packages/tgfont/static -**/*.json -**/*.yml -**/*.md +# Avoid running on any bundles. +/public/**/* +# Running it on tgui.html is fine, however. +!/public/tgui.html diff --git a/tgui/.prettierrc.yml b/tgui/.prettierrc.yml index 1eebe6098b1..e3cf66636e8 100644 --- a/tgui/.prettierrc.yml +++ b/tgui/.prettierrc.yml @@ -1,15 +1,6 @@ -arrowParens: always -breakLongMethodChains: true -endOfLine: lf -importFormatting: oneline -jsxBracketSameLine: true -jsxSingleQuote: false -offsetTernaryExpressions: true -printWidth: 80 -proseWrap: preserve -quoteProps: preserve -semi: true singleQuote: true -tabWidth: 2 -trailingComma: es5 -useTabs: false +overrides: + - files: 'public/tgui.html' + options: + trailingComma: es5 + arrowParens: always diff --git a/tgui/.yarn/sdks/eslint/package.json b/tgui/.yarn/sdks/eslint/package.json index 744a7732103..b29322a1ffb 100644 --- a/tgui/.yarn/sdks/eslint/package.json +++ b/tgui/.yarn/sdks/eslint/package.json @@ -2,5 +2,8 @@ "name": "eslint", "version": "7.32.0-sdk", "main": "./lib/api.js", - "type": "commonjs" + "type": "commonjs", + "bin": { + "eslint": "./bin/eslint.js" + } } diff --git a/tgui/.yarn/sdks/prettier/bin/prettier.cjs b/tgui/.yarn/sdks/prettier/bin/prettier.cjs new file mode 100644 index 00000000000..99a6b3e6025 --- /dev/null +++ b/tgui/.yarn/sdks/prettier/bin/prettier.cjs @@ -0,0 +1,20 @@ +#!/usr/bin/env node + +const { existsSync } = require(`fs`); +const { createRequire } = require(`module`); +const { resolve } = require(`path`); + +const relPnpApiPath = '../../../../.pnp.cjs'; + +const absPnpApiPath = resolve(__dirname, relPnpApiPath); +const absRequire = createRequire(absPnpApiPath); + +if (existsSync(absPnpApiPath)) { + if (!process.versions.pnp) { + // Setup the environment to be able to require prettier/bin/prettier.cjs + require(absPnpApiPath).setup(); + } +} + +// Defer to the real prettier/bin/prettier.cjs your application uses +module.exports = absRequire(`prettier/bin/prettier.cjs`); diff --git a/tgui/.yarn/sdks/prettier/index.cjs b/tgui/.yarn/sdks/prettier/index.cjs new file mode 100644 index 00000000000..27ef078785e --- /dev/null +++ b/tgui/.yarn/sdks/prettier/index.cjs @@ -0,0 +1,20 @@ +#!/usr/bin/env node + +const { existsSync } = require(`fs`); +const { createRequire } = require(`module`); +const { resolve } = require(`path`); + +const relPnpApiPath = '../../../.pnp.cjs'; + +const absPnpApiPath = resolve(__dirname, relPnpApiPath); +const absRequire = createRequire(absPnpApiPath); + +if (existsSync(absPnpApiPath)) { + if (!process.versions.pnp) { + // Setup the environment to be able to require prettier + require(absPnpApiPath).setup(); + } +} + +// Defer to the real prettier your application uses +module.exports = absRequire(`prettier`); diff --git a/tgui/.yarn/sdks/prettier/index.js b/tgui/.yarn/sdks/prettier/index.js deleted file mode 100644 index 81f9bec5fe8..00000000000 --- a/tgui/.yarn/sdks/prettier/index.js +++ /dev/null @@ -1,20 +0,0 @@ -#!/usr/bin/env node - -const {existsSync} = require(`fs`); -const {createRequire} = require(`module`); -const {resolve} = require(`path`); - -const relPnpApiPath = "../../../.pnp.cjs"; - -const absPnpApiPath = resolve(__dirname, relPnpApiPath); -const absRequire = createRequire(absPnpApiPath); - -if (existsSync(absPnpApiPath)) { - if (!process.versions.pnp) { - // Setup the environment to be able to require prettier/index.js - require(absPnpApiPath).setup(); - } -} - -// Defer to the real prettier/index.js your application uses -module.exports = absRequire(`prettier/index.js`); diff --git a/tgui/.yarn/sdks/prettier/package.json b/tgui/.yarn/sdks/prettier/package.json index 0cbd71ff32d..ad2a6d3baa2 100644 --- a/tgui/.yarn/sdks/prettier/package.json +++ b/tgui/.yarn/sdks/prettier/package.json @@ -1,6 +1,7 @@ { "name": "prettier", - "version": "0.19.0-sdk", - "main": "./index.js", - "type": "commonjs" + "version": "3.5.3-sdk", + "main": "./index.cjs", + "type": "commonjs", + "bin": "./bin/prettier.cjs" } diff --git a/tgui/.yarn/sdks/typescript/lib/tsserver.js b/tgui/.yarn/sdks/typescript/lib/tsserver.js index 0fb2ac10797..a70516cdf8b 100644 --- a/tgui/.yarn/sdks/typescript/lib/tsserver.js +++ b/tgui/.yarn/sdks/typescript/lib/tsserver.js @@ -1,29 +1,31 @@ #!/usr/bin/env node -const {existsSync} = require(`fs`); -const {createRequire} = require(`module`); -const {resolve} = require(`path`); +const { existsSync } = require(`fs`); +const { createRequire } = require(`module`); +const { resolve } = require(`path`); -const relPnpApiPath = "../../../../.pnp.cjs"; +const relPnpApiPath = '../../../../.pnp.cjs'; const absPnpApiPath = resolve(__dirname, relPnpApiPath); const absRequire = createRequire(absPnpApiPath); -const moduleWrapper = tsserver => { +const moduleWrapper = (tsserver) => { if (!process.versions.pnp) { return tsserver; } - const {isAbsolute} = require(`path`); + const { isAbsolute } = require(`path`); const pnpApi = require(`pnpapi`); - const isVirtual = str => str.match(/\/(\$\$virtual|__virtual__)\//); - const isPortal = str => str.startsWith("portal:/"); - const normalize = str => str.replace(/\\/g, `/`).replace(/^\/?/, `/`); + const isVirtual = (str) => str.match(/\/(\$\$virtual|__virtual__)\//); + const isPortal = (str) => str.startsWith('portal:/'); + const normalize = (str) => str.replace(/\\/g, `/`).replace(/^\/?/, `/`); - const dependencyTreeRoots = new Set(pnpApi.getDependencyTreeRoots().map(locator => { - return `${locator.name}@${locator.reference}`; - })); + const dependencyTreeRoots = new Set( + pnpApi.getDependencyTreeRoots().map((locator) => { + return `${locator.name}@${locator.reference}`; + }) + ); // VSCode sends the zip paths to TS using the "zip://" prefix, that TS // doesn't understand. This layer makes sure to remove the protocol @@ -31,7 +33,11 @@ const moduleWrapper = tsserver => { function toEditorPath(str) { // We add the `zip:` prefix to both `.zip/` paths and virtual paths - if (isAbsolute(str) && !str.match(/^\^?(zip:|\/zip\/)/) && (str.match(/\.zip\//) || isVirtual(str))) { + if ( + isAbsolute(str) && + !str.match(/^\^?(zip:|\/zip\/)/) && + (str.match(/\.zip\//) || isVirtual(str)) + ) { // We also take the opportunity to turn virtual paths into physical ones; // this makes it much easier to work with workspaces that list peer // dependencies, since otherwise Ctrl+Click would bring us to the virtual @@ -45,7 +51,11 @@ const moduleWrapper = tsserver => { const resolved = isVirtual(str) ? pnpApi.resolveVirtual(str) : str; if (resolved) { const locator = pnpApi.findPackageLocator(resolved); - if (locator && (dependencyTreeRoots.has(`${locator.name}@${locator.reference}`) || isPortal(locator.reference))) { + if ( + locator && + (dependencyTreeRoots.has(`${locator.name}@${locator.reference}`) || + isPortal(locator.reference)) + ) { str = resolved; } } @@ -73,43 +83,59 @@ const moduleWrapper = tsserver => { // Before | ^/zip/c:/foo/bar.zip/package.json // After | ^/zip//c:/foo/bar.zip/package.json // - case `vscode <1.61`: { - str = `^zip:${str}`; - } break; + case `vscode <1.61`: + { + str = `^zip:${str}`; + } + break; - case `vscode <1.66`: { - str = `^/zip/${str}`; - } break; + case `vscode <1.66`: + { + str = `^/zip/${str}`; + } + break; - case `vscode <1.68`: { - str = `^/zip${str}`; - } break; + case `vscode <1.68`: + { + str = `^/zip${str}`; + } + break; - case `vscode`: { - str = `^/zip/${str}`; - } break; + case `vscode`: + { + str = `^/zip/${str}`; + } + break; // To make "go to definition" work, // We have to resolve the actual file system path from virtual path // and convert scheme to supported by [vim-rzip](https://github.com/lbrayner/vim-rzip) - case `coc-nvim`: { - str = normalize(resolved).replace(/\.zip\//, `.zip::`); - str = resolve(`zipfile:${str}`); - } break; + case `coc-nvim`: + { + str = normalize(resolved).replace(/\.zip\//, `.zip::`); + str = resolve(`zipfile:${str}`); + } + break; // Support neovim native LSP and [typescript-language-server](https://github.com/theia-ide/typescript-language-server) // We have to resolve the actual file system path from virtual path, // everything else is up to neovim - case `neovim`: { - str = normalize(resolved).replace(/\.zip\//, `.zip::`); - str = `zipfile://${str}`; - } break; + case `neovim`: + { + str = normalize(resolved).replace(/\.zip\//, `.zip::`); + str = `zipfile://${str}`; + } + break; - default: { - str = `zip:${str}`; - } break; + default: + { + str = `zip:${str}`; + } + break; } } + } else { + str = str.replace(/^\/?/, process.platform === `win32` ? `` : `/`); } return str; @@ -117,26 +143,35 @@ const moduleWrapper = tsserver => { function fromEditorPath(str) { switch (hostInfo) { - case `coc-nvim`: { - str = str.replace(/\.zip::/, `.zip/`); - // The path for coc-nvim is in format of //zipfile://.yarn/... - // So in order to convert it back, we use .* to match all the thing - // before `zipfile:` - return process.platform === `win32` - ? str.replace(/^.*zipfile:\//, ``) - : str.replace(/^.*zipfile:/, ``); - } break; + case `coc-nvim`: + { + str = str.replace(/\.zip::/, `.zip/`); + // The path for coc-nvim is in format of //zipfile://.yarn/... + // So in order to convert it back, we use .* to match all the thing + // before `zipfile:` + return process.platform === `win32` + ? str.replace(/^.*zipfile:\//, ``) + : str.replace(/^.*zipfile:/, ``); + } + break; - case `neovim`: { - str = str.replace(/\.zip::/, `.zip/`); - // The path for neovim is in format of zipfile:////.yarn/... - return str.replace(/^zipfile:\/\//, ``); - } break; + case `neovim`: + { + str = str.replace(/\.zip::/, `.zip/`); + // The path for neovim is in format of zipfile:////.yarn/... + return str.replace(/^zipfile:\/\//, ``); + } + break; case `vscode`: - default: { - return str.replace(/^\^?(zip:|\/zip(\/ts-nul-authority)?)\/+/, process.platform === `win32` ? `` : `/`) - } break; + default: + { + return str.replace( + /^\^?(zip:|\/zip(\/ts-nul-authority)?)\/+/, + process.platform === `win32` ? `` : `/` + ); + } + break; } } @@ -148,8 +183,9 @@ const moduleWrapper = tsserver => { // TypeScript already does local loads and if this code is running the user trusts the workspace // https://github.com/microsoft/vscode/issues/45856 const ConfiguredProject = tsserver.server.ConfiguredProject; - const {enablePluginsWithOptions: originalEnablePluginsWithOptions} = ConfiguredProject.prototype; - ConfiguredProject.prototype.enablePluginsWithOptions = function() { + const { enablePluginsWithOptions: originalEnablePluginsWithOptions } = + ConfiguredProject.prototype; + ConfiguredProject.prototype.enablePluginsWithOptions = function () { this.projectService.allowLocalPluginLoads = true; return originalEnablePluginsWithOptions.apply(this, arguments); }; @@ -159,7 +195,8 @@ const moduleWrapper = tsserver => { // like an absolute path of ours and normalize it. const Session = tsserver.server.Session; - const {onMessage: originalOnMessage, send: originalSend} = Session.prototype; + const { onMessage: originalOnMessage, send: originalSend } = + Session.prototype; let hostInfo = `unknown`; Object.assign(Session.prototype, { @@ -175,10 +212,12 @@ const moduleWrapper = tsserver => { ) { hostInfo = parsedMessage.arguments.hostInfo; if (hostInfo === `vscode` && process.env.VSCODE_IPC_HOOK) { - const [, major, minor] = (process.env.VSCODE_IPC_HOOK.match( - // The RegExp from https://semver.org/ but without the caret at the start - /(0|[1-9]\d*)\.(0|[1-9]\d*)\.(0|[1-9]\d*)(?:-((?:0|[1-9]\d*|\d*[a-zA-Z-][0-9a-zA-Z-]*)(?:\.(?:0|[1-9]\d*|\d*[a-zA-Z-][0-9a-zA-Z-]*))*))?(?:\+([0-9a-zA-Z-]+(?:\.[0-9a-zA-Z-]+)*))?$/ - ) ?? []).map(Number) + const [, major, minor] = ( + process.env.VSCODE_IPC_HOOK.match( + // The RegExp from https://semver.org/ but without the caret at the start + /(0|[1-9]\d*)\.(0|[1-9]\d*)\.(0|[1-9]\d*)(?:-((?:0|[1-9]\d*|\d*[a-zA-Z-][0-9a-zA-Z-]*)(?:\.(?:0|[1-9]\d*|\d*[a-zA-Z-][0-9a-zA-Z-]*))*))?(?:\+([0-9a-zA-Z-]+(?:\.[0-9a-zA-Z-]+)*))?$/ + ) ?? [] + ).map(Number); if (major === 1) { if (minor < 61) { @@ -192,21 +231,31 @@ const moduleWrapper = tsserver => { } } - const processedMessageJSON = JSON.stringify(parsedMessage, (key, value) => { - return typeof value === 'string' ? fromEditorPath(value) : value; - }); + const processedMessageJSON = JSON.stringify( + parsedMessage, + (key, value) => { + return typeof value === 'string' ? fromEditorPath(value) : value; + } + ); return originalOnMessage.call( this, - isStringMessage ? processedMessageJSON : JSON.parse(processedMessageJSON) + isStringMessage + ? processedMessageJSON + : JSON.parse(processedMessageJSON) ); }, send(/** @type {any} */ msg) { - return originalSend.call(this, JSON.parse(JSON.stringify(msg, (key, value) => { - return typeof value === `string` ? toEditorPath(value) : value; - }))); - } + return originalSend.call( + this, + JSON.parse( + JSON.stringify(msg, (key, value) => { + return typeof value === `string` ? toEditorPath(value) : value; + }) + ) + ); + }, }); return tsserver; diff --git a/tgui/.yarn/sdks/typescript/lib/tsserverlibrary.js b/tgui/.yarn/sdks/typescript/lib/tsserverlibrary.js index e7033a81782..f4cd40128cf 100644 --- a/tgui/.yarn/sdks/typescript/lib/tsserverlibrary.js +++ b/tgui/.yarn/sdks/typescript/lib/tsserverlibrary.js @@ -1,29 +1,31 @@ #!/usr/bin/env node -const {existsSync} = require(`fs`); -const {createRequire} = require(`module`); -const {resolve} = require(`path`); +const { existsSync } = require(`fs`); +const { createRequire } = require(`module`); +const { resolve } = require(`path`); -const relPnpApiPath = "../../../../.pnp.cjs"; +const relPnpApiPath = '../../../../.pnp.cjs'; const absPnpApiPath = resolve(__dirname, relPnpApiPath); const absRequire = createRequire(absPnpApiPath); -const moduleWrapper = tsserver => { +const moduleWrapper = (tsserver) => { if (!process.versions.pnp) { return tsserver; } - const {isAbsolute} = require(`path`); + const { isAbsolute } = require(`path`); const pnpApi = require(`pnpapi`); - const isVirtual = str => str.match(/\/(\$\$virtual|__virtual__)\//); - const isPortal = str => str.startsWith("portal:/"); - const normalize = str => str.replace(/\\/g, `/`).replace(/^\/?/, `/`); + const isVirtual = (str) => str.match(/\/(\$\$virtual|__virtual__)\//); + const isPortal = (str) => str.startsWith('portal:/'); + const normalize = (str) => str.replace(/\\/g, `/`).replace(/^\/?/, `/`); - const dependencyTreeRoots = new Set(pnpApi.getDependencyTreeRoots().map(locator => { - return `${locator.name}@${locator.reference}`; - })); + const dependencyTreeRoots = new Set( + pnpApi.getDependencyTreeRoots().map((locator) => { + return `${locator.name}@${locator.reference}`; + }) + ); // VSCode sends the zip paths to TS using the "zip://" prefix, that TS // doesn't understand. This layer makes sure to remove the protocol @@ -31,7 +33,11 @@ const moduleWrapper = tsserver => { function toEditorPath(str) { // We add the `zip:` prefix to both `.zip/` paths and virtual paths - if (isAbsolute(str) && !str.match(/^\^?(zip:|\/zip\/)/) && (str.match(/\.zip\//) || isVirtual(str))) { + if ( + isAbsolute(str) && + !str.match(/^\^?(zip:|\/zip\/)/) && + (str.match(/\.zip\//) || isVirtual(str)) + ) { // We also take the opportunity to turn virtual paths into physical ones; // this makes it much easier to work with workspaces that list peer // dependencies, since otherwise Ctrl+Click would bring us to the virtual @@ -45,7 +51,11 @@ const moduleWrapper = tsserver => { const resolved = isVirtual(str) ? pnpApi.resolveVirtual(str) : str; if (resolved) { const locator = pnpApi.findPackageLocator(resolved); - if (locator && (dependencyTreeRoots.has(`${locator.name}@${locator.reference}`) || isPortal(locator.reference))) { + if ( + locator && + (dependencyTreeRoots.has(`${locator.name}@${locator.reference}`) || + isPortal(locator.reference)) + ) { str = resolved; } } @@ -73,43 +83,59 @@ const moduleWrapper = tsserver => { // Before | ^/zip/c:/foo/bar.zip/package.json // After | ^/zip//c:/foo/bar.zip/package.json // - case `vscode <1.61`: { - str = `^zip:${str}`; - } break; + case `vscode <1.61`: + { + str = `^zip:${str}`; + } + break; - case `vscode <1.66`: { - str = `^/zip/${str}`; - } break; + case `vscode <1.66`: + { + str = `^/zip/${str}`; + } + break; - case `vscode <1.68`: { - str = `^/zip${str}`; - } break; + case `vscode <1.68`: + { + str = `^/zip${str}`; + } + break; - case `vscode`: { - str = `^/zip/${str}`; - } break; + case `vscode`: + { + str = `^/zip/${str}`; + } + break; // To make "go to definition" work, // We have to resolve the actual file system path from virtual path // and convert scheme to supported by [vim-rzip](https://github.com/lbrayner/vim-rzip) - case `coc-nvim`: { - str = normalize(resolved).replace(/\.zip\//, `.zip::`); - str = resolve(`zipfile:${str}`); - } break; + case `coc-nvim`: + { + str = normalize(resolved).replace(/\.zip\//, `.zip::`); + str = resolve(`zipfile:${str}`); + } + break; // Support neovim native LSP and [typescript-language-server](https://github.com/theia-ide/typescript-language-server) // We have to resolve the actual file system path from virtual path, // everything else is up to neovim - case `neovim`: { - str = normalize(resolved).replace(/\.zip\//, `.zip::`); - str = `zipfile://${str}`; - } break; + case `neovim`: + { + str = normalize(resolved).replace(/\.zip\//, `.zip::`); + str = `zipfile://${str}`; + } + break; - default: { - str = `zip:${str}`; - } break; + default: + { + str = `zip:${str}`; + } + break; } } + } else { + str = str.replace(/^\/?/, process.platform === `win32` ? `` : `/`); } return str; @@ -117,26 +143,35 @@ const moduleWrapper = tsserver => { function fromEditorPath(str) { switch (hostInfo) { - case `coc-nvim`: { - str = str.replace(/\.zip::/, `.zip/`); - // The path for coc-nvim is in format of //zipfile://.yarn/... - // So in order to convert it back, we use .* to match all the thing - // before `zipfile:` - return process.platform === `win32` - ? str.replace(/^.*zipfile:\//, ``) - : str.replace(/^.*zipfile:/, ``); - } break; + case `coc-nvim`: + { + str = str.replace(/\.zip::/, `.zip/`); + // The path for coc-nvim is in format of //zipfile://.yarn/... + // So in order to convert it back, we use .* to match all the thing + // before `zipfile:` + return process.platform === `win32` + ? str.replace(/^.*zipfile:\//, ``) + : str.replace(/^.*zipfile:/, ``); + } + break; - case `neovim`: { - str = str.replace(/\.zip::/, `.zip/`); - // The path for neovim is in format of zipfile:////.yarn/... - return str.replace(/^zipfile:\/\//, ``); - } break; + case `neovim`: + { + str = str.replace(/\.zip::/, `.zip/`); + // The path for neovim is in format of zipfile:////.yarn/... + return str.replace(/^zipfile:\/\//, ``); + } + break; case `vscode`: - default: { - return str.replace(/^\^?(zip:|\/zip(\/ts-nul-authority)?)\/+/, process.platform === `win32` ? `` : `/`) - } break; + default: + { + return str.replace( + /^\^?(zip:|\/zip(\/ts-nul-authority)?)\/+/, + process.platform === `win32` ? `` : `/` + ); + } + break; } } @@ -148,8 +183,9 @@ const moduleWrapper = tsserver => { // TypeScript already does local loads and if this code is running the user trusts the workspace // https://github.com/microsoft/vscode/issues/45856 const ConfiguredProject = tsserver.server.ConfiguredProject; - const {enablePluginsWithOptions: originalEnablePluginsWithOptions} = ConfiguredProject.prototype; - ConfiguredProject.prototype.enablePluginsWithOptions = function() { + const { enablePluginsWithOptions: originalEnablePluginsWithOptions } = + ConfiguredProject.prototype; + ConfiguredProject.prototype.enablePluginsWithOptions = function () { this.projectService.allowLocalPluginLoads = true; return originalEnablePluginsWithOptions.apply(this, arguments); }; @@ -159,7 +195,8 @@ const moduleWrapper = tsserver => { // like an absolute path of ours and normalize it. const Session = tsserver.server.Session; - const {onMessage: originalOnMessage, send: originalSend} = Session.prototype; + const { onMessage: originalOnMessage, send: originalSend } = + Session.prototype; let hostInfo = `unknown`; Object.assign(Session.prototype, { @@ -175,10 +212,12 @@ const moduleWrapper = tsserver => { ) { hostInfo = parsedMessage.arguments.hostInfo; if (hostInfo === `vscode` && process.env.VSCODE_IPC_HOOK) { - const [, major, minor] = (process.env.VSCODE_IPC_HOOK.match( - // The RegExp from https://semver.org/ but without the caret at the start - /(0|[1-9]\d*)\.(0|[1-9]\d*)\.(0|[1-9]\d*)(?:-((?:0|[1-9]\d*|\d*[a-zA-Z-][0-9a-zA-Z-]*)(?:\.(?:0|[1-9]\d*|\d*[a-zA-Z-][0-9a-zA-Z-]*))*))?(?:\+([0-9a-zA-Z-]+(?:\.[0-9a-zA-Z-]+)*))?$/ - ) ?? []).map(Number) + const [, major, minor] = ( + process.env.VSCODE_IPC_HOOK.match( + // The RegExp from https://semver.org/ but without the caret at the start + /(0|[1-9]\d*)\.(0|[1-9]\d*)\.(0|[1-9]\d*)(?:-((?:0|[1-9]\d*|\d*[a-zA-Z-][0-9a-zA-Z-]*)(?:\.(?:0|[1-9]\d*|\d*[a-zA-Z-][0-9a-zA-Z-]*))*))?(?:\+([0-9a-zA-Z-]+(?:\.[0-9a-zA-Z-]+)*))?$/ + ) ?? [] + ).map(Number); if (major === 1) { if (minor < 61) { @@ -192,21 +231,31 @@ const moduleWrapper = tsserver => { } } - const processedMessageJSON = JSON.stringify(parsedMessage, (key, value) => { - return typeof value === 'string' ? fromEditorPath(value) : value; - }); + const processedMessageJSON = JSON.stringify( + parsedMessage, + (key, value) => { + return typeof value === 'string' ? fromEditorPath(value) : value; + } + ); return originalOnMessage.call( this, - isStringMessage ? processedMessageJSON : JSON.parse(processedMessageJSON) + isStringMessage + ? processedMessageJSON + : JSON.parse(processedMessageJSON) ); }, send(/** @type {any} */ msg) { - return originalSend.call(this, JSON.parse(JSON.stringify(msg, (key, value) => { - return typeof value === `string` ? toEditorPath(value) : value; - }))); - } + return originalSend.call( + this, + JSON.parse( + JSON.stringify(msg, (key, value) => { + return typeof value === `string` ? toEditorPath(value) : value; + }) + ) + ); + }, }); return tsserver; diff --git a/tgui/.yarn/sdks/typescript/lib/typescript.js b/tgui/.yarn/sdks/typescript/lib/typescript.js index e14fa87beaa..0e0bf801128 100644 --- a/tgui/.yarn/sdks/typescript/lib/typescript.js +++ b/tgui/.yarn/sdks/typescript/lib/typescript.js @@ -11,10 +11,10 @@ const absRequire = createRequire(absPnpApiPath); if (existsSync(absPnpApiPath)) { if (!process.versions.pnp) { - // Setup the environment to be able to require typescript/lib/typescript.js + // Setup the environment to be able to require typescript/ require(absPnpApiPath).setup(); } } -// Defer to the real typescript/lib/typescript.js your application uses -module.exports = absRequire(`typescript/lib/typescript.js`); +// Defer to the real typescript your application uses +module.exports = absRequire(`typescript`); diff --git a/tgui/.yarn/sdks/typescript/package.json b/tgui/.yarn/sdks/typescript/package.json index 6aac31b1840..656833d45b6 100644 --- a/tgui/.yarn/sdks/typescript/package.json +++ b/tgui/.yarn/sdks/typescript/package.json @@ -2,5 +2,9 @@ "name": "typescript", "version": "4.9.4-sdk", "main": "./lib/typescript.js", - "type": "commonjs" + "type": "commonjs", + "bin": { + "tsc": "./bin/tsc", + "tsserver": "./bin/tsserver" + } } diff --git a/tgui/.yarnrc.yml b/tgui/.yarnrc.yml index b6387e8e46e..086484a243a 100644 --- a/tgui/.yarnrc.yml +++ b/tgui/.yarnrc.yml @@ -8,7 +8,7 @@ logFilters: plugins: - path: .yarn/plugins/@yarnpkg/plugin-interactive-tools.cjs - spec: "@yarnpkg/plugin-interactive-tools" + spec: '@yarnpkg/plugin-interactive-tools' pnpEnableEsmLoader: false diff --git a/tgui/README.md b/tgui/README.md index e8713024342..4a1915d5c89 100644 --- a/tgui/README.md +++ b/tgui/README.md @@ -71,6 +71,7 @@ However, if you want finer control over the installation or build process, you w - `tools/build/build tgui-clean` - Clean up tgui folder. > With Juke Build, you can run multiple targets together, e.g.: +> > ``` > tools/build/build tgui tgui-lint tgui-tsc tgui-test > ``` @@ -137,7 +138,7 @@ Press `F12` or click the green bug to open the KitchenSink interface. This inter playground to test various tgui components. **Layout Debugger.** -Press `F11` to toggle the *layout debugger*. It will show outlines of +Press `F11` to toggle the _layout debugger_. It will show outlines of all tgui elements, which makes it easy to understand how everything comes together, and can reveal certain layout bugs which are not normally visible. diff --git a/tgui/docs/component-reference.md b/tgui/docs/component-reference.md index 4c44798b92a..560549ecd5c 100644 --- a/tgui/docs/component-reference.md +++ b/tgui/docs/component-reference.md @@ -68,14 +68,14 @@ Event handlers are callbacks that you can attack to various element to listen for browser events. Inferno supports camelcase (`onClick`) and lowercase (`onclick`) event names. -- Camel case names are what's called *synthetic* events, and are the -**preferred way** of handling events in React, for efficiency and -performance reasons. Please read -[Inferno Event Handling](https://infernojs.org/docs/guides/event-handling) -to understand what this is about. +- Camel case names are what's called _synthetic_ events, and are the + **preferred way** of handling events in React, for efficiency and + performance reasons. Please read + [Inferno Event Handling](https://infernojs.org/docs/guides/event-handling) + to understand what this is about. - Lower case names are native browser events and should be used sparingly, -for example when you need an explicit IE8 support. **DO NOT** use -lowercase event handlers unless you really know what you are doing. + for example when you need an explicit IE8 support. **DO NOT** use + lowercase event handlers unless you really know what you are doing. ## `tgui/components` @@ -87,13 +87,13 @@ This component provides animations for numeric values. - `value: number` - Value to animate. - `initial: number` - Initial value to use in animation when element -first appears. If you set initial to `0` for example, number will always -animate starting from `0`, and if omitted, it will not play an initial -animation. + first appears. If you set initial to `0` for example, number will always + animate starting from `0`, and if omitted, it will not play an initial + animation. - `format: value => value` - Output formatter. - Example: `value => Math.round(value)`. - `children: (formattedValue, rawValue) => any` - Pull the animated number to -animate more complex things deeper in the DOM tree. + animate more complex things deeper in the DOM tree. - Example: `(_, value) => ` ### `BlockQuote` @@ -129,9 +129,7 @@ To workaround this problem, the Box children accept a render props function. This way, `Button` can pull out the `className` generated by the `Box`. ```jsx - - {props => + ``` @@ -410,17 +404,17 @@ effectively places the last flex item to the very end of the flex container. - See inherited props: [Box](#box) - ~~`spacing: number`~~ - **Removed in tgui 4.3**, -use [Stack](#stack) instead. + use [Stack](#stack) instead. - `inline: boolean` - Makes flexbox container inline, with similar behavior -to an `inline` property on a `Box`. + to an `inline` property on a `Box`. - `direction: string` - This establishes the main-axis, thus defining the -direction flex items are placed in the flex container. + direction flex items are placed in the flex container. - `row` (default) - left to right. - `row-reverse` - right to left. - `column` - top to bottom. - `column-reverse` - bottom to top. - `wrap: string` - By default, flex items will all try to fit onto one line. -You can change that and allow the items to wrap as needed with this property. + You can change that and allow the items to wrap as needed with this property. - `nowrap` (default) - all flex items will be on one line - `wrap` - flex items will wrap onto multiple lines, from top to bottom. - `wrap-reverse` - flex items will wrap onto multiple lines from bottom to top. @@ -431,22 +425,22 @@ You can change that and allow the items to wrap as needed with this property. - `center` - items are centered on the cross axis. - `baseline` - items are aligned such as their baselines align. - `justify: string` - This defines the alignment along the main axis. -It helps distribute extra free space leftover when either all the flex -items on a line are inflexible, or are flexible but have reached their -maximum size. It also exerts some control over the alignment of items -when they overflow the line. + It helps distribute extra free space leftover when either all the flex + items on a line are inflexible, or are flexible but have reached their + maximum size. It also exerts some control over the alignment of items + when they overflow the line. - `flex-start` (default) - items are packed toward the start of the - flex-direction. + flex-direction. - `flex-end` - items are packed toward the end of the flex-direction. - `space-between` - items are evenly distributed in the line; first item is - on the start line, last item on the end line + on the start line, last item on the end line - `space-around` - items are evenly distributed in the line with equal space - around them. Note that visually the spaces aren't equal, since all the items - have equal space on both sides. The first item will have one unit of space - against the container edge, but two units of space between the next item - because that next item has its own spacing that applies. + around them. Note that visually the spaces aren't equal, since all the items + have equal space on both sides. The first item will have one unit of space + against the container edge, but two units of space between the next item + because that next item has its own spacing that applies. - `space-evenly` - items are distributed so that the spacing between any two - items (and the space to the edges) is equal. + items (and the space to the edges) is equal. - TBD (not all properties are supported in IE11). ### `Flex.Item` @@ -455,24 +449,24 @@ when they overflow the line. - See inherited props: [Box](#box) - `order: number` - By default, flex items are laid out in the source order. -However, the order property controls the order in which they appear in the -flex container. + However, the order property controls the order in which they appear in the + flex container. - `grow: number | boolean` - This defines the ability for a flex item to grow -if necessary. It accepts a unitless value that serves as a proportion. It -dictates what amount of the available space inside the flex container the -item should take up. This number is unit-less and is relative to other -siblings. + if necessary. It accepts a unitless value that serves as a proportion. It + dictates what amount of the available space inside the flex container the + item should take up. This number is unit-less and is relative to other + siblings. - `shrink: number | boolean` - This defines the ability for a flex item to -shrink if necessary. Inverse of `grow`. + shrink if necessary. Inverse of `grow`. - `basis: number | string` - This defines the default size of an element -before any flex-related calculations are done. Has to be a length -(e.g. `20%`, `5rem`), an `auto` or `content` keyword. + before any flex-related calculations are done. Has to be a length + (e.g. `20%`, `5rem`), an `auto` or `content` keyword. - **Important:** IE11 flex is buggy, and auto width/height calculations - can sometimes end up in a circular dependency. This usually happens, when - working with tables inside flex (they have wacky internal widths and such). - Setting basis to `0` breaks the loop and fixes all of the problems. + can sometimes end up in a circular dependency. This usually happens, when + working with tables inside flex (they have wacky internal widths and such). + Setting basis to `0` breaks the loop and fixes all of the problems. - `align: string` - This allows the default alignment (or the one specified by -align-items) to be overridden for individual flex items. See: [Flex](#flex). + align-items) to be overridden for individual flex items. See: [Flex](#flex). ### `Grid` @@ -488,14 +482,10 @@ Example: ```jsx -
- Hello world! -
+
Hello world!
 -
- Hello world! -
+
Hello world!
 ``` @@ -521,6 +511,7 @@ Renders one of the FontAwesome icons of your choice. To smoothen the transition from v4 to v5, we have added a v4 semantic to transform names with `-o` suffixes to FA Regular icons. For example: + - `square` will get transformed to `fas square` - `square-o` will get transformed to `far square` @@ -529,10 +520,10 @@ transform names with `-o` suffixes to FA Regular icons. For example: - See inherited props: [Box](#box) - `name: string` - Icon name. - `size: number` - Icon size. `1` is normal size, `2` is two times bigger. -Fractional numbers are supported. + Fractional numbers are supported. - `rotation: number` - Icon rotation, in degrees. - `spin: boolean` - Whether an icon should be spinning. Good for load -indicators. + indicators. ### `Icon.Stack` @@ -562,13 +553,13 @@ A basic text input, which allow users to enter text into a UI. - See inherited props: [Box](#box) - `value: string` - Value of an input. - `placeholder: string` - Text placed into Input box when it's empty, -otherwise nothing. Clears automatically when focused. + otherwise nothing. Clears automatically when focused. - `fluid: boolean` - Fill all available horizontal space. - `strict: boolean` - Prevent the onChange event from firing on unfocus. - `selfClear: boolean` - Clear after hitting enter, as well as remain focused -when this happens. Useful for things like chat inputs. + when this happens. Useful for things like chat inputs. - `onChange: (e, value) => void` - An event, which fires when you commit -the text by either unfocusing the input box, or by pressing the Enter key. + the text by either unfocusing the input box, or by pressing the Enter key. - `onInput: (e, value) => void` - An event, which fires on every keypress. ### `Knob` @@ -584,30 +575,30 @@ Single click opens an input box to manually type in a number. - `animated: boolean` - Animates the value if it was changed externally. - `bipolar: boolean` - Knob can be bipolar or unipolar. - `size: number` - Relative size of the knob. `1` is normal size, `2` is two -times bigger. Fractional numbers are supported. + times bigger. Fractional numbers are supported. - `color: string` - Color of the outer ring around the knob. - `value: number` - Value itself, controls the position of the cursor. - `unit: string` - Unit to display to the right of value. - `minValue: number` - Lowest possible value. - `maxValue: number` - Highest possible value. - `fillValue: number` - If set, this value will be used to set the fill -percentage of the outer ring independently of the main value. + percentage of the outer ring independently of the main value. - `ranges: { color: [from, to] }` - Applies a `color` to the outer ring around -the knob based on whether the value lands in the range between `from` and `to`. -See an example of this prop in [ProgressBar](#progressbar). + the knob based on whether the value lands in the range between `from` and `to`. + See an example of this prop in [ProgressBar](#progressbar). - `step: number` (default: 1) - Adjust value by this amount when -dragging the input. + dragging the input. - `stepPixelSize: number` (default: 1) - Screen distance mouse needs -to travel to adjust value by one `step`. + to travel to adjust value by one `step`. - `format: value => value` - Format value using this function before -displaying it. + displaying it. - `suppressFlicker: number` - A number in milliseconds, for which the input -will hold off from updating while events propagate through the backend. -Default is about 250ms, increase it if you still see flickering. + will hold off from updating while events propagate through the backend. + Default is about 250ms, increase it if you still see flickering. - `onChange: (e, value) => void` - An event, which fires when you release -the input, or successfully enter a number. + the input, or successfully enter a number. - `onDrag: (e, value) => void` - An event, which fires about every 500ms -when you drag the input up and down, on release and on manual editing. + when you drag the input up and down, on release and on manual editing. ### `LabeledControls` @@ -635,9 +626,7 @@ column is labels, and second column is content. ```jsx - - Content - + Content ``` @@ -646,13 +635,7 @@ to perform some sort of action), there is a way to do that: ```jsx - - Click me! - - )}> + Click me!}> Content @@ -691,9 +674,7 @@ Example: ```jsx - - Content - + Content ``` @@ -739,22 +720,22 @@ to fine tune the value, or single click it to manually type a number. - `minValue: number` - Lowest possible value. - `maxValue: number` - Highest possible value. - `step: number` (default: 1) - Adjust value by this amount when -dragging the input. + dragging the input. - `stepPixelSize: number` (default: 1) - Screen distance mouse needs -to travel to adjust value by one `step`. + to travel to adjust value by one `step`. - `width: string|number` - Width of the element, in `Box` units or pixels. - `height: string|numer` - Height of the element, in `Box` units or pixels. - `lineHeight: string|number` - lineHeight of the element, in `Box` units or pixels. - `fontSize: string|number` - fontSize of the element, in `Box` units or pixels. - `format: value => value` - Format value using this function before -displaying it. + displaying it. - `suppressFlicker: number` - A number in milliseconds, for which the input -will hold off from updating while events propagate through the backend. -Default is about 250ms, increase it if you still see flickering. + will hold off from updating while events propagate through the backend. + Default is about 250ms, increase it if you still see flickering. - `onChange: (e, value) => void` - An event, which fires when you release -the input, or successfully enter a number. + the input, or successfully enter a number. - `onDrag: (e, value) => void` - An event, which fires about every 500ms -when you drag the input up and down, on release and on manual editing. + when you drag the input up and down, on release and on manual editing. ### `Popper` @@ -783,18 +764,19 @@ Usage of `ranges` prop: average: [0.25, 0.5], bad: [-Infinity, 0.25], }} - value={0.6} /> + value={0.6} +/> ``` **Props:** - `value: number` - Current progress as a floating point number between -`minValue` (default: 0) and `maxValue` (default: 1). Determines the -percentage and how filled the bar is. + `minValue` (default: 0) and `maxValue` (default: 1). Determines the + percentage and how filled the bar is. - `minValue: number` - Lowest possible value. - `maxValue: number` - Highest possible value. - `ranges: { color: [from, to] }` - Applies a `color` to the progress bar -based on whether the value lands in the range between `from` and `to`. + based on whether the value lands in the range between `from` and `to`. - `color: string` - Color of the progress bar. Can take any of the following formats: - `#ffffff` - Hex format - `rgb(r,g,b) / rgba(r,g,b,a)` - RGB format @@ -812,13 +794,14 @@ The RoundGauge component provides a visual representation of a single metric, as value={tankPressure} minValue={0} maxValue={pressureLimit} - alertAfter={pressureLimit * 0.70} + alertAfter={pressureLimit * 0.7} ranges={{ - "good": [0, pressureLimit * 0.70], - "average": [pressureLimit * 0.70, pressureLimit * 0.85], - "bad": [pressureLimit * 0.85, pressureLimit], + good: [0, pressureLimit * 0.7], + average: [pressureLimit * 0.7, pressureLimit * 0.85], + bad: [pressureLimit * 0.85, pressureLimit], }} - format={formatPressure} /> + format={formatPressure} +/> ``` The alert on the gauge is optional, and will only be shown if the `alertAfter` prop is defined. When defined, the alert will begin to flash the respective color upon which the needle currently rests, as defined in the `ranges` prop. @@ -846,22 +829,14 @@ clearly indicates hierarchy. Section can also be titled to clearly define its purpose. ```jsx -
- Here you can order supply crates. -
+
Here you can order supply crates.
``` If you want to have a button on the right side of an section title (for example, to perform some sort of action), there is a way to do that: ```jsx -
- Send shuttle - - )}> +
Send shuttle}> Here you can order supply crates.
``` @@ -895,23 +870,23 @@ Single click opens an input box to manually type in a number. - `minValue: number` - Lowest possible value. - `maxValue: number` - Highest possible value. - `fillValue: number` - If set, this value will be used to set the fill -percentage of the progress bar filler independently of the main value. + percentage of the progress bar filler independently of the main value. - `ranges: { color: [from, to] }` - Applies a `color` to the slider -based on whether the value lands in the range between `from` and `to`. -See an example of this prop in [ProgressBar](#progressbar). + based on whether the value lands in the range between `from` and `to`. + See an example of this prop in [ProgressBar](#progressbar). - `step: number` (default: 1) - Adjust value by this amount when -dragging the input. + dragging the input. - `stepPixelSize: number` (default: 1) - Screen distance mouse needs -to travel to adjust value by one `step`. + to travel to adjust value by one `step`. - `format: value => value` - Format value using this function before -displaying it. + displaying it. - `suppressFlicker: number` - A number in milliseconds, for which the input -will hold off from updating while events propagate through the backend. -Default is about 250ms, increase it if you still see flickering. + will hold off from updating while events propagate through the backend. + Default is about 250ms, increase it if you still see flickering. - `onChange: (e, value) => void` - An event, which fires when you release -the input, or successfully enter a number. + the input, or successfully enter a number. - `onDrag: (e, value) => void` - An event, which fires about every 500ms -when you drag the input up and down, on release and on manual editing. + when you drag the input up and down, on release and on manual editing. ### `Stack` @@ -927,13 +902,9 @@ Stacks can be vertical by adding a `vertical` property. ```jsx - - Button description - + Button description - + ``` @@ -948,9 +919,7 @@ Make sure to use the `fill` property. -
- Sidebar -
+
Sidebar
 @@ -960,9 +929,7 @@ Make sure to use the `fill` property.
-
- Bottom pane -
+
Bottom pane
 @@ -994,9 +961,7 @@ Example: ```jsx - - Hello world! - + Hello world! Label @@ -1025,7 +990,7 @@ A straight forward mapping to ` diff --git a/tgui/packages/tgui/components/MenuBar.tsx b/tgui/packages/tgui/components/MenuBar.tsx index 35de61ec9cd..a9d3de1151b 100644 --- a/tgui/packages/tgui/components/MenuBar.tsx +++ b/tgui/packages/tgui/components/MenuBar.tsx @@ -53,7 +53,8 @@ class Menu extends Component { className={'MenuBar__menu'} style={{ width: width, - }}> + }} + > {children} ); @@ -106,14 +107,16 @@ class MenuBarButton extends Component { ])} {...rest} onClick={disabled ? undefined : onClick} - onmouseover={onMouseOver}> + onmouseover={onMouseOver} + > {display} {open && ( + onOutsideClick={onOutsideClick} + > {children} )} @@ -169,7 +172,8 @@ export const Dropdown = (props: MenuBarItemProps) => { if (openOnHover) { setOpenMenuBar(entry); } - }}> + }} + > {children} ); @@ -185,7 +189,8 @@ const MenuItemToggle = (props) => { 'MenuBar__MenuItemToggle', 'MenuBar__hover', ])} - onClick={() => onClick(value)}> + onClick={() => onClick(value)} + >
{checked && }
@@ -205,7 +210,8 @@ const MenuItem = (props) => { 'MenuBar__MenuItem', 'MenuBar__hover', ])} - onClick={() => onClick(value)}> + onClick={() => onClick(value)} + > {displayText} ); diff --git a/tgui/packages/tgui/components/Modal.js b/tgui/packages/tgui/components/Modal.js index 9cf990c45bb..0e0181acee6 100644 --- a/tgui/packages/tgui/components/Modal.js +++ b/tgui/packages/tgui/components/Modal.js @@ -14,7 +14,8 @@ export const Modal = (props) => {
+ {...computeBoxProps(rest)} + > {children}
diff --git a/tgui/packages/tgui/components/NumberInput.js b/tgui/packages/tgui/components/NumberInput.js index e264d811d37..d2a16920115 100644 --- a/tgui/packages/tgui/components/NumberInput.js +++ b/tgui/packages/tgui/components/NumberInput.js @@ -40,7 +40,7 @@ export class NumberInput extends Component { this.setState({ suppressingFlicker: false, }), - suppressFlicker + suppressFlicker, ); } }; @@ -87,13 +87,13 @@ export class NumberInput extends Component { state.internalValue = clamp( state.internalValue + (offset * step) / stepPixelSize, minValue - step, - maxValue + step + maxValue + step, ); // Clamp the final value state.value = clamp( state.internalValue - (state.internalValue % step) + stepOffset, minValue, - maxValue + maxValue, ); state.origin = e.screenY; } else if (Math.abs(offset) > 4) { @@ -189,7 +189,8 @@ export class NumberInput extends Component { minHeight={height} lineHeight={lineHeight} fontSize={fontSize} - onMouseDown={this.handleDragStart}> + onMouseDown={this.handleDragStart} + >
{ this.popperInstance = createPopper( domNode, this.renderedContent, - options + options, ); }); } @@ -74,7 +74,7 @@ export class Popper extends Component { this.props.popperContent || null, this.renderedContent, callback, - this.context + this.context, ); } diff --git a/tgui/packages/tgui/components/ProgressBar.js b/tgui/packages/tgui/components/ProgressBar.js index 86116732c3f..7980cdcbc6e 100644 --- a/tgui/packages/tgui/components/ProgressBar.js +++ b/tgui/packages/tgui/components/ProgressBar.js @@ -37,7 +37,7 @@ export const ProgressBar = (props) => { computeBoxClassName(rest), ]; const fillStyles = { - 'width': clamp01(scaledValue) * 100 + '%', + width: clamp01(scaledValue) * 100 + '%', }; if (CSS_COLORS.includes(effectiveColor) || effectiveColor === 'default') { // If the color is a color- class, just use that. diff --git a/tgui/packages/tgui/components/RestrictedInput.js b/tgui/packages/tgui/components/RestrictedInput.js index 1b082296ca5..209a4d8f234 100644 --- a/tgui/packages/tgui/components/RestrictedInput.js +++ b/tgui/packages/tgui/components/RestrictedInput.js @@ -47,7 +47,7 @@ export class RestrictedInput extends Component { e.target.value, minValue, maxValue, - allowFloats + allowFloats, ); if (onChange) { onChange(e, +e.target.value); @@ -76,7 +76,7 @@ export class RestrictedInput extends Component { e.target.value, minValue, maxValue, - allowFloats + allowFloats, ); this.setEditing(false); if (onChange) { @@ -110,7 +110,7 @@ export class RestrictedInput extends Component { nextValue, minValue, maxValue, - allowFloats + allowFloats, ); } if (this.props.autoFocus || this.props.autoSelect) { @@ -136,7 +136,7 @@ export class RestrictedInput extends Component { nextValue, minValue, maxValue, - allowFloats + allowFloats, ); } } @@ -158,7 +158,8 @@ export class RestrictedInput extends Component { monospace && 'Input--monospace', className, ])} - {...rest}> + {...rest} + >
.
{ const scaledValue = scale(value, minValue, maxValue); const clampedValue = clamp01(scaledValue); - const scaledRanges = ranges ? {} : { 'primary': [0, 1] }; + const scaledRanges = ranges ? {} : { primary: [0, 1] }; if (ranges) { Object.keys(ranges).forEach((x) => { const range = ranges[x]; @@ -77,14 +77,16 @@ export const RoundGauge = (props) => { ...style, }, ...rest, - })}> + })} + > {(alertAfter || alertBefore) && ( + ])} + > )} @@ -101,7 +103,7 @@ export const RoundGauge = (props) => { style={{ 'stroke-dashoffset': Math.max( (2.0 - (col_ranges[1] - col_ranges[0])) * Math.PI * 50, - 0 + 0, ), }} transform={`rotate(${180 + 180 * col_ranges[0]} 50 50)`} @@ -114,7 +116,8 @@ export const RoundGauge = (props) => { + transform={`rotate(${clampedValue * 180 - 90} 50 50)`} + > { className, computeBoxClassName(rest), ])} - {...computeBoxProps(rest)}> + {...computeBoxProps(rest)} + > {hasTitle && (
{title} @@ -93,7 +94,8 @@ export class Section extends Component {
+ className="Section__content" + > {children}
diff --git a/tgui/packages/tgui/components/Slider.js b/tgui/packages/tgui/components/Slider.js index 84ee8421a9a..7465d2a6a95 100644 --- a/tgui/packages/tgui/components/Slider.js +++ b/tgui/packages/tgui/components/Slider.js @@ -52,7 +52,8 @@ export const Slider = (props) => { suppressFlicker, unit, value, - }}> + }} + > {(control) => { const { dragging, @@ -68,7 +69,7 @@ export const Slider = (props) => { const scaledFillValue = scale( fillValue ?? displayValue, minValue, - maxValue + maxValue, ); const scaledDisplayValue = scale(displayValue, minValue, maxValue); // prettier-ignore @@ -84,7 +85,8 @@ export const Slider = (props) => { computeBoxClassName(rest), ])} {...computeBoxProps(rest)} - onMouseDown={handleDragStart}> + onMouseDown={handleDragStart} + >
{ className="Slider__cursorOffset" style={{ width: clamp01(scaledDisplayValue) * 100 + '%', - }}> + }} + >
{dragging && ( diff --git a/tgui/packages/tgui/components/Stack.tsx b/tgui/packages/tgui/components/Stack.tsx index 9abf13e651b..738235b2b82 100644 --- a/tgui/packages/tgui/components/Stack.tsx +++ b/tgui/packages/tgui/components/Stack.tsx @@ -6,7 +6,14 @@ import { classes } from 'common/react'; import { RefObject } from 'inferno'; -import { computeFlexClassName, computeFlexItemClassName, computeFlexItemProps, computeFlexProps, FlexItemProps, FlexProps } from './Flex'; +import { + computeFlexClassName, + computeFlexItemClassName, + computeFlexItemProps, + computeFlexProps, + FlexItemProps, + FlexProps, +} from './Flex'; type StackProps = FlexProps & { vertical?: boolean; diff --git a/tgui/packages/tgui/components/Table.js b/tgui/packages/tgui/components/Table.js index e936b914480..aae47df427c 100644 --- a/tgui/packages/tgui/components/Table.js +++ b/tgui/packages/tgui/components/Table.js @@ -17,7 +17,8 @@ export const Table = (props) => { className, computeBoxClassName(rest), ])} - {...computeBoxProps(rest)}> + {...computeBoxProps(rest)} + >
{children}
` element. - See inherited props: [Box](#box) - `collapsing: boolean` - Collapses table cell to the smallest possible size, -and stops any text inside from wrapping. + and stops any text inside from wrapping. ### `Tabs` @@ -1061,9 +1026,7 @@ Tabs also support a vertical configuration. This is usually paired with ```jsx - - ... - + ... Tab content. @@ -1077,9 +1040,7 @@ component: ```jsx
- - ... - + ... ... other things ...
``` @@ -1089,9 +1050,9 @@ component: - See inherited props: [Box](#box) - `fluid: boolean` - If true, tabs will take all available horizontal space. - `fill: boolean` - Similarly to `fill` on [Section](#section), tabs will fill -all available vertical space. Only makes sense in a vertical configuration. + all available vertical space. Only makes sense in a vertical configuration. - `vertical: boolean` - Use a vertical configuration, where tabs will be -stacked vertically. + stacked vertically. - `children: Tab[]` - This component only accepts tabs as its children. ### `Tabs.Tab` @@ -1103,8 +1064,8 @@ a lot of `Button` props. - See inherited props: [Button](#button) - `altSelection` - Whether the tab buttons select via standard select (color -change) or by adding a white indicator to the selected tab. -Intended for usage on interfaces where tab color has relevance. + change) or by adding a white indicator to the selected tab. + Intended for usage on interfaces where tab color has relevance. - `icon: string` - Tab icon. - `children: any` - Tab text. - `onClick: function` - Called when element is clicked. @@ -1121,9 +1082,7 @@ Usage: ```jsx - - Sample text. - + Sample text. ``` @@ -1131,7 +1090,7 @@ Usage: - `position?: string` - Tooltip position. See [`Popper`](#Popper) for valid options. Defaults to "auto". - `content: string` - Content of the tooltip. Must be a plain string. -Fragments or other elements are **not** supported. + Fragments or other elements are **not** supported. ## `tgui/layouts` @@ -1145,9 +1104,7 @@ Example: ```jsx - - Hello, world! - + Hello, world! ``` @@ -1162,9 +1119,9 @@ Example: - `height: number` - Window height. - `canClose: boolean` - Controls the ability to close the window. - `children: any` - Child elements, which are rendered directly inside the -window. If you use a [Dimmer](#dimmer) or [Modal](#modal) in your UI, -they should be put as direct childs of a Window, otherwise you should be -putting your content into [Window.Content](#windowcontent). + window. If you use a [Dimmer](#dimmer) or [Modal](#modal) in your UI, + they should be put as direct childs of a Window, otherwise you should be + putting your content into [Window.Content](#windowcontent). ### `Window.Content` diff --git a/tgui/docs/converting-old-tgui-interfaces.md b/tgui/docs/converting-old-tgui-interfaces.md index a090fcfd155..2763d1f6030 100644 --- a/tgui/docs/converting-old-tgui-interfaces.md +++ b/tgui/docs/converting-old-tgui-interfaces.md @@ -6,7 +6,7 @@ This guide is going to assume you already know roughly how tgui-next works, how Backend in almost every case does not require any changes. In particularly heavy ui cases, something to be aware of is the new `ui_static_data()` proc. This proc allows you to split some data sent to the interface off into data that will only be sent on ui initialize and when manually updated by elsewhere in the code. Useful for things like cargo where you have a very large set of mostly identical code. -Keep in mind that for uis where *all* data doesn't need to be live updating, you can just toggle off autoupdate for the ui instead of messing with static data. +Keep in mind that for uis where _all_ data doesn't need to be live updating, you can just toggle off autoupdate for the ui instead of messing with static data. ## Frontend @@ -23,7 +23,9 @@ Ractive has a fairly different templating syntax from React. You likely already know that React data inserts look like this ```jsx -{data.example_data} +{ + data.example_data; +} ``` Ractive looks very similar, the only real difference is that React uses one paranthesis instead of two. @@ -37,7 +39,7 @@ However, you may occasionally come across data inserts that instead of referenci `AnimatedNumber` is used like this ```jsx - + ``` Make sure you don't forget to import it. @@ -57,9 +59,9 @@ A ractive `if` (only render if result of expression is true) looks like this The equivalent React would be ```jsx -{!!data.condition && ( - Example Render -)} +{ + !!data.condition && Example Render; +} ``` This might look a bit intimidating compared to the reactive part but it's not as complicated as it seems: @@ -73,6 +75,7 @@ This might look a bit intimidating compared to the reactive part but it's not as You don't really need to know all this to understand how to use it, but I find it helps with understanding when things go wrong. Ractive conditionals can have an `else` as well + ```ractive {{#if data.condition}} value @@ -85,30 +88,28 @@ Similarly to the previous example, just add a `||` operator to handle the "falsy" condition: ```jsx -{!!data.condition && ( - - value - -) || ( - - other value - -)} +{ + (!!data.condition && value) || ( + other value + ); +} ``` There's also our good old friend - the ternary: ```jsx -{data.condition ? 'value' : 'other value'} +{ + data.condition ? 'value' : 'other value'; +} ``` Keep in mind you can also use tags here like the conditional example, and you can mix string literals, values, and tags as well. ```jsx -{data.is_robot ? ( - {(settings.visible && ) || ( diff --git a/tgui/packages/tgui-panel/audio/NowPlayingWidget.js b/tgui/packages/tgui-panel/audio/NowPlayingWidget.js index 4495c2a8a1f..af5380a7a5b 100644 --- a/tgui/packages/tgui-panel/audio/NowPlayingWidget.js +++ b/tgui/packages/tgui-panel/audio/NowPlayingWidget.js @@ -22,10 +22,10 @@ export const NowPlayingWidget = (props, context) => { duration = audio.meta?.duration, date = !isNaN(upload_date) ? upload_date?.substring(0, 4) + - '-' + - upload_date?.substring(4, 6) + - '-' + - upload_date?.substring(6, 8) + '-' + + upload_date?.substring(4, 6) + + '-' + + upload_date?.substring(6, 8) : upload_date; return ( @@ -36,9 +36,10 @@ export const NowPlayingWidget = (props, context) => { grow={1} style={{ 'white-space': 'nowrap', - 'overflow': 'hidden', + overflow: 'hidden', 'text-overflow': 'ellipsis', - }}> + }} + > {
diff --git a/tgui/packages/tgui-panel/chat/ChatPageSettings.js b/tgui/packages/tgui-panel/chat/ChatPageSettings.js index c0d9962d253..dff19b2041c 100644 --- a/tgui/packages/tgui-panel/chat/ChatPageSettings.js +++ b/tgui/packages/tgui-panel/chat/ChatPageSettings.js @@ -5,7 +5,14 @@ */ import { useDispatch, useSelector } from 'common/redux'; -import { Button, Collapsible, Divider, Input, Section, Stack } from 'tgui/components'; +import { + Button, + Collapsible, + Divider, + Input, + Section, + Stack, +} from 'tgui/components'; import { removeChatPage, toggleAcceptedType, updateChatPage } from './actions'; import { MESSAGE_TYPES } from './constants'; import { selectCurrentChatPage } from './selectors'; @@ -25,7 +32,7 @@ export const ChatPageSettings = (props, context) => { updateChatPage({ pageId: page.id, name: value, - }) + }), ) } /> @@ -38,9 +45,10 @@ export const ChatPageSettings = (props, context) => { dispatch( removeChatPage({ pageId: page.id, - }) + }), ) - }> + } + > Remove @@ -48,7 +56,7 @@ export const ChatPageSettings = (props, context) => {
{MESSAGE_TYPES.filter( - (typeDef) => !typeDef.important && !typeDef.admin + (typeDef) => !typeDef.important && !typeDef.admin, ).map((typeDef) => ( { toggleAcceptedType({ pageId: page.id, type: typeDef.type, - }) + }), ) - }> + } + > {typeDef.name} ))} {MESSAGE_TYPES.filter( - (typeDef) => !typeDef.important && typeDef.admin + (typeDef) => !typeDef.important && typeDef.admin, ).map((typeDef) => ( { toggleAcceptedType({ pageId: page.id, type: typeDef.type, - }) + }), ) - }> + } + > {typeDef.name} ))} diff --git a/tgui/packages/tgui-panel/chat/ChatPanel.js b/tgui/packages/tgui-panel/chat/ChatPanel.js index 3132a66ce7f..1577e933fb4 100644 --- a/tgui/packages/tgui-panel/chat/ChatPanel.js +++ b/tgui/packages/tgui-panel/chat/ChatPanel.js @@ -26,7 +26,7 @@ export class ChatPanel extends Component { chatRenderer.mount(this.ref.current); chatRenderer.events.on( 'scrollTrackingChanged', - this.handleScrollTrackingChange + this.handleScrollTrackingChange, ); this.componentDidUpdate(); } @@ -34,7 +34,7 @@ export class ChatPanel extends Component { componentWillUnmount() { chatRenderer.events.off( 'scrollTrackingChanged', - this.handleScrollTrackingChange + this.handleScrollTrackingChange, ); } @@ -46,7 +46,7 @@ export class ChatPanel extends Component { !prevProps || shallowDiffers(this.props, prevProps); if (shouldUpdateStyle) { chatRenderer.assignStyle({ - 'width': '100%', + width: '100%', 'white-space': 'pre-wrap', 'font-size': this.props.fontSize, 'line-height': this.props.lineHeight, @@ -63,7 +63,8 @@ export class ChatPanel extends Component { )} diff --git a/tgui/packages/tgui-panel/chat/ChatTabs.js b/tgui/packages/tgui-panel/chat/ChatTabs.js index 1d4f6f65edf..601cd111589 100644 --- a/tgui/packages/tgui-panel/chat/ChatTabs.js +++ b/tgui/packages/tgui-panel/chat/ChatTabs.js @@ -15,11 +15,12 @@ const UnreadCountWidget = ({ value }) => ( style={{ 'font-size': '0.7em', 'border-radius': '0.25em', - 'width': '1.7em', + width: '1.7em', 'line-height': '1.55em', 'background-color': 'crimson', - 'color': '#fff', - }}> + color: '#fff', + }} + > {Math.min(value, 99)} ); @@ -45,9 +46,10 @@ export const ChatTabs = (props, context) => { dispatch( changeChatPage({ pageId: page.id, - }) + }), ) - }> + } + > {page.name} ))} diff --git a/tgui/packages/tgui-panel/chat/middleware.js b/tgui/packages/tgui-panel/chat/middleware.js index 23e7d232cd7..c9a9b8ec436 100644 --- a/tgui/packages/tgui-panel/chat/middleware.js +++ b/tgui/packages/tgui-panel/chat/middleware.js @@ -6,9 +6,26 @@ import DOMPurify from 'dompurify'; import { storage } from 'common/storage'; -import { loadSettings, updateSettings, addHighlightSetting, removeHighlightSetting, updateHighlightSetting } from '../settings/actions'; +import { + loadSettings, + updateSettings, + addHighlightSetting, + removeHighlightSetting, + updateHighlightSetting, +} from '../settings/actions'; import { selectSettings } from '../settings/selectors'; -import { addChatPage, changeChatPage, changeScrollTracking, loadChat, rebuildChat, removeChatPage, saveChatToDisk, clearChatMessages, toggleAcceptedType, updateMessageCount } from './actions'; +import { + addChatPage, + changeChatPage, + changeScrollTracking, + loadChat, + rebuildChat, + removeChatPage, + saveChatToDisk, + clearChatMessages, + toggleAcceptedType, + updateMessageCount, +} from './actions'; import { MESSAGE_SAVE_INTERVAL, MESSAGE_PRUNE_INTERVAL } from './constants'; import { createMessage, serializeMessage } from './model'; import { chatRenderer } from './renderer'; @@ -27,7 +44,7 @@ const saveChatToStorage = async (store) => { } else { const fromIndex = Math.max( 0, - chatRenderer.messages.length - settings.maxMessages + chatRenderer.messages.length - settings.maxMessages, ); const messages = chatRenderer.messages .slice(fromIndex) @@ -145,7 +162,7 @@ export const chatMiddleware = (store) => { const settings = selectSettings(store.getState()); chatRenderer.setHighlight( settings.highlightSettings, - settings.highlightSettingById + settings.highlightSettingById, ); return; diff --git a/tgui/packages/tgui-panel/chat/reducer.js b/tgui/packages/tgui-panel/chat/reducer.js index b727a7c1bab..e75fbd06e43 100644 --- a/tgui/packages/tgui-panel/chat/reducer.js +++ b/tgui/packages/tgui-panel/chat/reducer.js @@ -4,7 +4,16 @@ * @license MIT */ -import { addChatPage, changeChatPage, loadChat, removeChatPage, toggleAcceptedType, updateChatPage, updateMessageCount, changeScrollTracking } from './actions'; +import { + addChatPage, + changeChatPage, + loadChat, + removeChatPage, + toggleAcceptedType, + updateChatPage, + updateMessageCount, + changeScrollTracking, +} from './actions'; import { canPageAcceptType, createMainPage } from './model'; const mainPage = createMainPage(); diff --git a/tgui/packages/tgui-panel/chat/renderer.js b/tgui/packages/tgui-panel/chat/renderer.js index 196846ccfac..318388b568e 100644 --- a/tgui/packages/tgui-panel/chat/renderer.js +++ b/tgui/packages/tgui-panel/chat/renderer.js @@ -7,7 +7,16 @@ import { EventEmitter } from 'common/events'; import { classes } from 'common/react'; import { createLogger } from 'tgui/logging'; -import { COMBINE_MAX_MESSAGES, COMBINE_MAX_TIME_WINDOW, IMAGE_RETRY_DELAY, IMAGE_RETRY_LIMIT, IMAGE_RETRY_MESSAGE_AGE, MESSAGE_TYPES, MESSAGE_TYPE_INTERNAL, MESSAGE_TYPE_UNKNOWN } from './constants'; +import { + COMBINE_MAX_MESSAGES, + COMBINE_MAX_TIME_WINDOW, + IMAGE_RETRY_DELAY, + IMAGE_RETRY_LIMIT, + IMAGE_RETRY_MESSAGE_AGE, + MESSAGE_TYPES, + MESSAGE_TYPE_INTERNAL, + MESSAGE_TYPE_UNKNOWN, +} from './constants'; import { render } from 'inferno'; import { canPageAcceptType, createMessage, isSameMessage } from './model'; import { highlightNode, linkifyNode } from './replaceInTextNode'; @@ -27,8 +36,8 @@ export const TGUI_CHAT_COMPONENTS = { // List of injectable attibute names mapped to their proper prop // We need this because attibutes don't support lowercase names export const TGUI_CHAT_ATTRIBUTES_TO_PROPS = { - 'position': 'position', - 'content': 'content', + position: 'position', + content: 'content', }; const findNearestScrollableParent = (startingNode) => { @@ -205,7 +214,7 @@ class ChatRenderer { // Must be alphanumeric (with some punctuation) allowedRegex.test(str) && // Reset lastIndex so it does not mess up the next word - ((allowedRegex.lastIndex = 0) || true) + ((allowedRegex.lastIndex = 0) || true), ); let highlightWords; let highlightRegex; @@ -400,7 +409,7 @@ class ChatRenderer { , - childNode + childNode, ); /* eslint-enable react/no-danger */ } @@ -412,16 +421,16 @@ class ChatRenderer { node, parser.highlightRegex, parser.highlightWords, - (text) => createHighlightNode(text, parser.highlightColor) + (text) => createHighlightNode(text, parser.highlightColor), ); if (highlighted && parser.highlightWholeMessage) { node.style.setProperty( '--highlight-color', - parser.backgroundHighlightColor || 'rgba(255, 221, 68)' + parser.backgroundHighlightColor || 'rgba(255, 221, 68)', ); node.style.setProperty( '--highlight-color-opacity', - (parser.backgroundHighlightOpacity ?? 10) / 100 + (parser.backgroundHighlightOpacity ?? 10) / 100, ); node.className += ' ChatMessage--highlighted'; } @@ -521,7 +530,7 @@ class ChatRenderer { { const fromIndex = Math.max( 0, - this.messages.length - max_visible_messages + this.messages.length - max_visible_messages, ); if (fromIndex > 0) { this.messages = this.messages.slice(fromIndex); diff --git a/tgui/packages/tgui-panel/chat/replaceInTextNode.js b/tgui/packages/tgui-panel/chat/replaceInTextNode.js index 753997b3b82..5062b88831b 100644 --- a/tgui/packages/tgui-panel/chat/replaceInTextNode.js +++ b/tgui/packages/tgui-panel/chat/replaceInTextNode.js @@ -149,7 +149,7 @@ export const highlightNode = ( node, regex, words, - createNode = createHighlightNode + createNode = createHighlightNode, ) => { if (!createNode) { createNode = createHighlightNode; diff --git a/tgui/packages/tgui-panel/index.js b/tgui/packages/tgui-panel/index.js index 78807f5b408..945a9ecff4e 100644 --- a/tgui/packages/tgui-panel/index.js +++ b/tgui/packages/tgui-panel/index.js @@ -82,7 +82,7 @@ const setupApp = () => { // Resize the panel to match the non-browser output Byond.winget('output').then((output) => { Byond.winset('browseroutput', { - 'size': output.size, + size: output.size, }); }); diff --git a/tgui/packages/tgui-panel/ping/reducer.js b/tgui/packages/tgui-panel/ping/reducer.js index b1e3d679cbc..49b9522c06f 100644 --- a/tgui/packages/tgui-panel/ping/reducer.js +++ b/tgui/packages/tgui-panel/ping/reducer.js @@ -6,7 +6,11 @@ import { clamp01, scale } from 'common/math'; import { pingFail, pingSuccess } from './actions'; -import { PING_MAX_FAILS, PING_ROUNDTRIP_BEST, PING_ROUNDTRIP_WORST } from './constants'; +import { + PING_MAX_FAILS, + PING_ROUNDTRIP_BEST, + PING_ROUNDTRIP_WORST, +} from './constants'; export const pingReducer = (state = {}, action) => { const { type, payload } = action; @@ -28,7 +32,7 @@ export const pingReducer = (state = {}, action) => { if (type === pingFail.type) { const { failCount = 0 } = state; const networkQuality = clamp01( - state.networkQuality - failCount / PING_MAX_FAILS + state.networkQuality - failCount / PING_MAX_FAILS, ); const nextState = { ...state, diff --git a/tgui/packages/tgui-panel/reconnect.tsx b/tgui/packages/tgui-panel/reconnect.tsx index ecfd7671692..6d3e6d9759e 100644 --- a/tgui/packages/tgui-panel/reconnect.tsx +++ b/tgui/packages/tgui-panel/reconnect.tsx @@ -21,7 +21,8 @@ export const ReconnectButton = () => { color="white" onClick={() => { Byond.command('.reconnect'); - }}> + }} + > Reconnect diff --git a/tgui/packages/tgui-panel/settings/SettingsPanel.js b/tgui/packages/tgui-panel/settings/SettingsPanel.js index 354d0f741e2..9c49a6c6b94 100644 --- a/tgui/packages/tgui-panel/settings/SettingsPanel.js +++ b/tgui/packages/tgui-panel/settings/SettingsPanel.js @@ -7,14 +7,43 @@ import { toFixed } from 'common/math'; import { useLocalState } from 'tgui/backend'; import { useDispatch, useSelector } from 'common/redux'; -import { Box, Button, ColorBox, Divider, Dropdown, Flex, Input, LabeledList, NumberInput, Section, Stack, Tabs, TextArea } from 'tgui/components'; +import { + Box, + Button, + ColorBox, + Divider, + Dropdown, + Flex, + Input, + LabeledList, + NumberInput, + Section, + Stack, + Tabs, + TextArea, +} from 'tgui/components'; import { ChatPageSettings } from '../chat'; -import { rebuildChat, saveChatToDisk, clearChatMessages } from '../chat/actions'; +import { + rebuildChat, + saveChatToDisk, + clearChatMessages, +} from '../chat/actions'; import { THEMES } from '../themes'; -import { changeSettingsTab, updateSettings, addHighlightSetting, removeHighlightSetting, updateHighlightSetting } from './actions'; +import { + changeSettingsTab, + updateSettings, + addHighlightSetting, + removeHighlightSetting, + updateHighlightSetting, +} from './actions'; import { SETTINGS_TABS, FONTS, MAX_HIGHLIGHT_SETTINGS } from './constants'; import { resetPaneSplitters, setEditPaneSplitters } from './scaling'; -import { selectActiveTab, selectSettings, selectHighlightSettings, selectHighlightSettingById } from './selectors'; +import { + selectActiveTab, + selectSettings, + selectHighlightSettings, + selectHighlightSettingById, +} from './selectors'; import { IMPL_IFRAME_INDEXED_DB, storage } from 'common/storage'; export const SettingsPanel = (props, context) => { @@ -33,9 +62,10 @@ export const SettingsPanel = (props, context) => { dispatch( changeSettingsTab({ tabId: tab.id, - }) + }), ) - }> + } + > {tab.name} ))} @@ -54,14 +84,14 @@ export const SettingsPanel = (props, context) => { export const SettingsGeneral = (props, context) => { const { theme, fontFamily, fontSize, lineHeight, maxMessages } = useSelector( context, - selectSettings + selectSettings, ); const dispatch = useDispatch(context); const [freeFont, setFreeFont] = useLocalState(context, 'freeFont', false); const [editingPanes, setEditingPanes] = useLocalState( context, 'uiScaling', - false + false, ); return (
@@ -74,7 +104,7 @@ export const SettingsGeneral = (props, context) => { dispatch( updateSettings({ theme: value, - }) + }), ) } /> @@ -90,7 +120,8 @@ export const SettingsGeneral = (props, context) => { }) } color={editingPanes ? 'red' : undefined} - icon={editingPanes ? 'save' : undefined}> + icon={editingPanes ? 'save' : undefined} + > {editingPanes ? 'Save' : 'Adjust UI Sizes'} @@ -112,7 +143,7 @@ export const SettingsGeneral = (props, context) => { dispatch( updateSettings({ fontFamily: value, - }) + }), ) } /> @@ -123,7 +154,7 @@ export const SettingsGeneral = (props, context) => { dispatch( updateSettings({ fontFamily: value, - }) + }), ) } /> @@ -156,7 +187,7 @@ export const SettingsGeneral = (props, context) => { dispatch( updateSettings({ fontSize: value, - }) + }), ) } /> @@ -174,7 +205,7 @@ export const SettingsGeneral = (props, context) => { dispatch( updateSettings({ lineHeight: value, - }) + }), ) } /> @@ -198,7 +229,7 @@ export const SettingsGeneral = (props, context) => { dispatch( updateSettings({ maxMessages: value, - }) + }), ); }} /> @@ -248,7 +279,8 @@ const TextHighlightSettings = (props, context) => { @@ -284,7 +316,7 @@ const TextHighlightSetting = (props, context) => { dispatch( removeHighlightSetting({ id: id, - }) + }), ) } /> @@ -307,7 +339,7 @@ const TextHighlightSetting = (props, context) => { updateHighlightSetting({ id: id, backgroundHighlightOpacity: value, - }) + }), ) } /> @@ -329,7 +361,7 @@ const TextHighlightSetting = (props, context) => { updateHighlightSetting({ id: id, backgroundHighlightColor: value, - }) + }), ) } /> @@ -347,7 +379,7 @@ const TextHighlightSetting = (props, context) => { updateHighlightSetting({ id: id, highlightWholeMessage: !highlightWholeMessage, - }) + }), ) } /> @@ -363,7 +395,7 @@ const TextHighlightSetting = (props, context) => { updateHighlightSetting({ id: id, matchWord: !matchWord, - }) + }), ) } /> @@ -378,7 +410,7 @@ const TextHighlightSetting = (props, context) => { updateHighlightSetting({ id: id, matchCase: !matchCase, - }) + }), ) } /> @@ -395,7 +427,7 @@ const TextHighlightSetting = (props, context) => { updateHighlightSetting({ id: id, highlightColor: value, - }) + }), ) } /> @@ -410,7 +442,7 @@ const TextHighlightSetting = (props, context) => { updateHighlightSetting({ id: id, highlightText: value, - }) + }), ) } /> diff --git a/tgui/packages/tgui-panel/settings/actions.js b/tgui/packages/tgui-panel/settings/actions.js index 1550bef80ba..52febd21c9c 100644 --- a/tgui/packages/tgui-panel/settings/actions.js +++ b/tgui/packages/tgui-panel/settings/actions.js @@ -16,11 +16,11 @@ export const addHighlightSetting = createAction( 'settings/addHighlightSetting', () => ({ payload: createHighlightSetting(), - }) + }), ); export const removeHighlightSetting = createAction( - 'settings/removeHighlightSetting' + 'settings/removeHighlightSetting', ); export const updateHighlightSetting = createAction( - 'settings/updateHighlightSetting' + 'settings/updateHighlightSetting', ); diff --git a/tgui/packages/tgui-panel/settings/middleware.ts b/tgui/packages/tgui-panel/settings/middleware.ts index 8a32c5fe2c4..09a327cd5a2 100644 --- a/tgui/packages/tgui-panel/settings/middleware.ts +++ b/tgui/packages/tgui-panel/settings/middleware.ts @@ -6,7 +6,13 @@ import { storage } from 'common/storage'; import { setClientTheme } from '../themes'; -import { addHighlightSetting, loadSettings, removeHighlightSetting, updateHighlightSetting, updateSettings } from './actions'; +import { + addHighlightSetting, + loadSettings, + removeHighlightSetting, + updateHighlightSetting, + updateSettings, +} from './actions'; import { selectSettings } from './selectors'; import { FONTS_DISABLED } from './constants'; import { setDisplayScaling } from './scaling'; @@ -43,7 +49,7 @@ function updateGlobalOverrideRule() { function setGlobalFontSize( fontSize: string, statFontSize: string, - statLinked: boolean + statLinked: boolean, ) { overrideFontSize = `${fontSize}px`; @@ -52,13 +58,13 @@ function setGlobalFontSize( Byond.command( `.output statbrowser:set_font_size ${ statLinked ? fontSize : statFontSize - }px` + }px`, ); statFontTimer = setTimeout(() => { Byond.command( `.output statbrowser:set_font_size ${ statLinked ? fontSize : statFontSize - }px` + }px`, ); }, 1500); } @@ -111,7 +117,7 @@ export const settingsMiddleware = (store) => { setGlobalFontSize( settings.fontSize, settings.statFontSize, - settings.statLinked + settings.statLinked, ); setGlobalFontFamily(settings.fontFamily); updateGlobalOverrideRule(); diff --git a/tgui/packages/tgui-panel/settings/reducer.js b/tgui/packages/tgui-panel/settings/reducer.js index 83c9eb64581..4bdc77893b0 100644 --- a/tgui/packages/tgui-panel/settings/reducer.js +++ b/tgui/packages/tgui-panel/settings/reducer.js @@ -4,7 +4,16 @@ * @license MIT */ -import { changeSettingsTab, loadSettings, openChatSettings, toggleSettings, updateSettings, addHighlightSetting, removeHighlightSetting, updateHighlightSetting } from './actions'; +import { + changeSettingsTab, + loadSettings, + openChatSettings, + toggleSettings, + updateSettings, + addHighlightSetting, + removeHighlightSetting, + updateHighlightSetting, +} from './actions'; import { createDefaultHighlightSetting } from './model'; import { SETTINGS_TABS, FONTS, MAX_HIGHLIGHT_SETTINGS } from './constants'; @@ -132,7 +141,7 @@ export const settingsReducer = (state = initialState, action) => { } else { delete nextState.highlightSettingById[id]; nextState.highlightSettings = nextState.highlightSettings.filter( - (sid) => sid !== id + (sid) => sid !== id, ); if (!nextState.highlightSettings.length) { nextState.highlightSettings.push(defaultHighlightSetting.id); diff --git a/tgui/packages/tgui-panel/styles/main.scss b/tgui/packages/tgui-panel/styles/main.scss index ee96a9c5a65..08e60d18ee6 100644 --- a/tgui/packages/tgui-panel/styles/main.scss +++ b/tgui/packages/tgui-panel/styles/main.scss @@ -10,7 +10,7 @@ @use '~tgui/styles/base.scss' with ( $color-bg: #202020, $color-bg-section: color.adjust(#202020, $lightness: -5%), - $color-bg-grad-spread: 0%, + $color-bg-grad-spread: 0% ); // Core styles diff --git a/tgui/packages/tgui-panel/styles/tgchat/chat-dark.scss b/tgui/packages/tgui-panel/styles/tgchat/chat-dark.scss index b30f04ec270..b964df57275 100644 --- a/tgui/packages/tgui-panel/styles/tgchat/chat-dark.scss +++ b/tgui/packages/tgui-panel/styles/tgchat/chat-dark.scss @@ -374,7 +374,8 @@ em { background-color: #000; display: block; - text-shadow: 0.05em 0 0 rgba(255, 0, 0, 0.75), + text-shadow: + 0.05em 0 0 rgba(255, 0, 0, 0.75), -0.05em -0.025em 0 rgba(0, 255, 0, 0.75), -0.025em 0.05em 0 rgba(0, 0, 255, 0.75); @@ -388,7 +389,8 @@ em { background-color: #000; display: block; - text-shadow: 0.05em 0 0 rgba(255, 0, 0, 0.75), + text-shadow: + 0.05em 0 0 rgba(255, 0, 0, 0.75), -0.05em -0.025em 0 rgba(0, 255, 0, 0.75), -0.025em 0.05em 0 rgba(0, 0, 255, 0.75); @@ -687,35 +689,44 @@ em { @keyframes glitch { 0% { - text-shadow: 0.05em 0 0 rgba(255, 0, 0, 0.85), + text-shadow: + 0.05em 0 0 rgba(255, 0, 0, 0.85), -0.04em -0.03em 0 rgba(0, 255, 0, 0.85), -0.03em 0.05em 0 rgba(0, 0, 255, 0.85); } 20% { - text-shadow: 0.05em 0 0 rgba(255, 0, 0, 0.85), + text-shadow: + 0.05em 0 0 rgba(255, 0, 0, 0.85), -0.04em -0.03em 0 rgba(0, 255, 0, 0.85), -0.03em 0.05em 0 rgba(0, 0, 255, 0.85); } 21% { - text-shadow: -0.04em -0.03em 0 rgba(255, 0, 0, 0.85), + text-shadow: + -0.04em -0.03em 0 rgba(255, 0, 0, 0.85), 0.025em 0.025em 0 rgba(0, 255, 0, 0.85), -0.04em -0.04em 0 rgba(0, 0, 255, 0.85); } 49% { - text-shadow: -0.04em -0.03em 0 rgba(255, 0, 0, 0.85), + text-shadow: + -0.04em -0.03em 0 rgba(255, 0, 0, 0.85), 0.025em 0.025em 0 rgba(0, 255, 0, 0.85), -0.04em -0.04em 0 rgba(0, 0, 255, 0.85); } 50% { - text-shadow: 0.025em 0.05em 0 rgba(255, 0, 0, 0.85), - 0.05em 0 0 rgba(0, 255, 0, 0.85), 0 -0.04em 0 rgba(0, 0, 255, 0.85); + text-shadow: + 0.025em 0.05em 0 rgba(255, 0, 0, 0.85), + 0.05em 0 0 rgba(0, 255, 0, 0.85), + 0 -0.04em 0 rgba(0, 0, 255, 0.85); } 99% { - text-shadow: 0.025em 0.05em 0 rgba(255, 0, 0, 0.85), - 0.05em 0 0 rgba(0, 255, 0, 0.85), 0 -0.04em 0 rgba(0, 0, 255, 0.85); + text-shadow: + 0.025em 0.05em 0 rgba(255, 0, 0, 0.85), + 0.05em 0 0 rgba(0, 255, 0, 0.85), + 0 -0.04em 0 rgba(0, 0, 255, 0.85); } 100% { - text-shadow: -0.03em 0 0 rgba(255, 0, 0, 0.85), + text-shadow: + -0.03em 0 0 rgba(255, 0, 0, 0.85), -0.03em -0.03em 0 rgba(0, 255, 0, 0.85), -0.03em -0.04em 0 rgba(0, 0, 255, 0.85); } diff --git a/tgui/packages/tgui-panel/styles/tgchat/chat-light.scss b/tgui/packages/tgui-panel/styles/tgchat/chat-light.scss index 70276b4f127..3981f89d769 100644 --- a/tgui/packages/tgui-panel/styles/tgchat/chat-light.scss +++ b/tgui/packages/tgui-panel/styles/tgchat/chat-light.scss @@ -387,7 +387,8 @@ em { background-color: #000; display: block; - text-shadow: 0.05em 0 0 rgba(255, 0, 0, 0.75), + text-shadow: + 0.05em 0 0 rgba(255, 0, 0, 0.75), -0.05em -0.025em 0 rgba(0, 255, 0, 0.75), -0.025em 0.05em 0 rgba(0, 0, 255, 0.75); @@ -401,7 +402,8 @@ em { background-color: #000; display: block; - text-shadow: 0.05em 0 0 rgba(255, 0, 0, 0.75), + text-shadow: + 0.05em 0 0 rgba(255, 0, 0, 0.75), -0.05em -0.025em 0 rgba(0, 255, 0, 0.75), -0.025em 0.05em 0 rgba(0, 0, 255, 0.75); @@ -705,35 +707,44 @@ h2.alert { @keyframes glitch { 0% { - text-shadow: 0.05em 0 0 rgba(255, 0, 0, 0.85), + text-shadow: + 0.05em 0 0 rgba(255, 0, 0, 0.85), -0.04em -0.03em 0 rgba(0, 255, 0, 0.85), -0.03em 0.05em 0 rgba(0, 0, 255, 0.85); } 20% { - text-shadow: 0.05em 0 0 rgba(255, 0, 0, 0.85), + text-shadow: + 0.05em 0 0 rgba(255, 0, 0, 0.85), -0.04em -0.03em 0 rgba(0, 255, 0, 0.85), -0.03em 0.05em 0 rgba(0, 0, 255, 0.85); } 21% { - text-shadow: -0.04em -0.03em 0 rgba(255, 0, 0, 0.85), + text-shadow: + -0.04em -0.03em 0 rgba(255, 0, 0, 0.85), 0.025em 0.025em 0 rgba(0, 255, 0, 0.85), -0.04em -0.04em 0 rgba(0, 0, 255, 0.85); } 49% { - text-shadow: -0.04em -0.03em 0 rgba(255, 0, 0, 0.85), + text-shadow: + -0.04em -0.03em 0 rgba(255, 0, 0, 0.85), 0.025em 0.025em 0 rgba(0, 255, 0, 0.85), -0.04em -0.04em 0 rgba(0, 0, 255, 0.85); } 50% { - text-shadow: 0.025em 0.05em 0 rgba(255, 0, 0, 0.85), - 0.05em 0 0 rgba(0, 255, 0, 0.85), 0 -0.04em 0 rgba(0, 0, 255, 0.85); + text-shadow: + 0.025em 0.05em 0 rgba(255, 0, 0, 0.85), + 0.05em 0 0 rgba(0, 255, 0, 0.85), + 0 -0.04em 0 rgba(0, 0, 255, 0.85); } 99% { - text-shadow: 0.025em 0.05em 0 rgba(255, 0, 0, 0.85), - 0.05em 0 0 rgba(0, 255, 0, 0.85), 0 -0.04em 0 rgba(0, 0, 255, 0.85); + text-shadow: + 0.025em 0.05em 0 rgba(255, 0, 0, 0.85), + 0.05em 0 0 rgba(0, 255, 0, 0.85), + 0 -0.04em 0 rgba(0, 0, 255, 0.85); } 100% { - text-shadow: -0.03em 0 0 rgba(255, 0, 0, 0.85), + text-shadow: + -0.03em 0 0 rgba(255, 0, 0, 0.85), -0.03em -0.03em 0 rgba(0, 255, 0, 0.85), -0.03em -0.04em 0 rgba(0, 0, 255, 0.85); } diff --git a/tgui/packages/tgui-panel/styles/themes/light.scss b/tgui/packages/tgui-panel/styles/themes/light.scss index 1f752d51d63..e0c86fed8c3 100644 --- a/tgui/packages/tgui-panel/styles/themes/light.scss +++ b/tgui/packages/tgui-panel/styles/themes/light.scss @@ -16,13 +16,13 @@ // Commenting out color maps will adjust all colors based on the lightness // settings above, but will add extra 10KB to the theme. // $fg-map-keys: (), - // $bg-map-keys: (), + // $bg-map-keys: (), ); @use '~tgui/styles/base.scss' with ( $color-fg: #000000, $color-bg: #eeeeee, $color-bg-section: #ffffff, - $color-bg-grad-spread: 0%, + $color-bg-grad-spread: 0% ); // A fat warning to anyone who wants to use this: this only half works. diff --git a/tgui/packages/tgui-say/TguiSay.tsx b/tgui/packages/tgui-say/TguiSay.tsx index 16c2300bae3..5b77391ac7c 100644 --- a/tgui/packages/tgui-say/TguiSay.tsx +++ b/tgui/packages/tgui-say/TguiSay.tsx @@ -285,7 +285,7 @@ export class TguiSay extends Component<{}, State> { if (!this.scale) { window.document.body.style.setProperty( 'zoom', - `${100 / window.devicePixelRatio}%` + `${100 / window.devicePixelRatio}%`, ); } else { window.document.body.style.setProperty('zoom', ''); @@ -339,7 +339,8 @@ export class TguiSay extends Component<{}, State> { )} @@ -356,7 +357,8 @@ export class TguiSay extends Component<{}, State> { className={`button button-${theme}`} onClick={this.handleClose} type="submit" - style={{ width: '2rem', marginRight: '5px' }}> + style={{ width: '2rem', marginRight: '5px' }} + > X )} diff --git a/tgui/packages/tgui-say/timers.ts b/tgui/packages/tgui-say/timers.ts index 7b9fffc87fc..85c58f7424a 100644 --- a/tgui/packages/tgui-say/timers.ts +++ b/tgui/packages/tgui-say/timers.ts @@ -7,12 +7,12 @@ export const byondMessages = { // Debounce: Prevents spamming the server channelIncrementMsg: debounce( (visible: boolean) => Byond.sendMessage('thinking', { visible }), - 0.4 * SECONDS + 0.4 * SECONDS, ), forceSayMsg: debounce( (entry: string) => Byond.sendMessage('force', { entry, channel: 'Say' }), 1 * SECONDS, - true + true, ), // Throttle: Prevents spamming the server typingMsg: throttle(() => Byond.sendMessage('typing'), 4 * SECONDS), diff --git a/tgui/packages/tgui/backend.ts b/tgui/packages/tgui/backend.ts index 0501de0c1b8..6d529e26907 100644 --- a/tgui/packages/tgui/backend.ts +++ b/tgui/packages/tgui/backend.ts @@ -206,7 +206,7 @@ export const backendMiddleware = (store) => { if (process.env.NODE_ENV !== 'production') { logger.log( 'visible in', - perf.measure('render/finish', 'resume/finish') + perf.measure('render/finish', 'resume/finish'), ); } }); @@ -303,7 +303,7 @@ type StateWithSetter = [T, (nextState: T) => void]; export const useLocalState = ( context: any, key: string, - initialState: T + initialState: T, ): StateWithSetter => { const { store } = context; const state = selectBackend(store.getState()); @@ -319,7 +319,7 @@ export const useLocalState = ( typeof nextState === 'function' ? nextState(sharedState) : nextState, - }) + }), ); }, ]; @@ -342,7 +342,7 @@ export const useLocalState = ( export const useSharedState = ( context: any, key: string, - initialState: T + initialState: T, ): StateWithSetter => { const { store } = context; const state = selectBackend(store.getState()); diff --git a/tgui/packages/tgui/components/Blink.js b/tgui/packages/tgui/components/Blink.js index bd781336b46..e1cd50dcb54 100644 --- a/tgui/packages/tgui/components/Blink.js +++ b/tgui/packages/tgui/components/Blink.js @@ -60,7 +60,8 @@ export class Blink extends Component { + }} + > {props.children} ); diff --git a/tgui/packages/tgui/components/BodyZoneSelector.tsx b/tgui/packages/tgui/components/BodyZoneSelector.tsx index c9248bf9095..747aca662e1 100644 --- a/tgui/packages/tgui/components/BodyZoneSelector.tsx +++ b/tgui/packages/tgui/components/BodyZoneSelector.tsx @@ -83,7 +83,8 @@ export class BodyZoneSelector extends Component< width: `${32 * scale}px`, height: `${32 * scale}px`, position: 'relative', - }}> + }} + > @@ -125,9 +126,9 @@ export class BodyZoneSelector extends Component< style={{ '-ms-interpolation-mode': 'nearest-neighbor', 'pointer-events': 'none', - 'position': 'absolute', - 'width': `${32 * scale}px`, - 'height': `${32 * scale}px`, + position: 'absolute', + width: `${32 * scale}px`, + height: `${32 * scale}px`, }} /> )} @@ -138,11 +139,11 @@ export class BodyZoneSelector extends Component< src={resolveAsset(`body_zones.${hoverZone}.png`)} style={{ '-ms-interpolation-mode': 'nearest-neighbor', - 'opacity': 0.5, + opacity: 0.5, 'pointer-events': 'none', - 'position': 'absolute', - 'width': `${32 * scale}px`, - 'height': `${32 * scale}px`, + position: 'absolute', + width: `${32 * scale}px`, + height: `${32 * scale}px`, }} /> )} diff --git a/tgui/packages/tgui/components/Box.tsx b/tgui/packages/tgui/components/Box.tsx index ed10072b623..3fb5585676a 100644 --- a/tgui/packages/tgui/components/Box.tsx +++ b/tgui/packages/tgui/components/Box.tsx @@ -271,7 +271,7 @@ export const Box: SFC = (props: BoxProps) => { children, ChildFlags.UnknownChildren, computedProps, - undefined + undefined, ); }; diff --git a/tgui/packages/tgui/components/Button.js b/tgui/packages/tgui/components/Button.js index ef434d04c7a..cc35cece93c 100644 --- a/tgui/packages/tgui/components/Button.js +++ b/tgui/packages/tgui/components/Button.js @@ -45,7 +45,7 @@ export const Button = (props) => { `Lowercase 'onclick' is not supported on Button and lowercase` + ` prop names are discouraged in general. Please use a camelCase` + `'onClick' instead and read: ` + - `https://infernojs.org/docs/guides/event-handling` + `https://infernojs.org/docs/guides/event-handling`, ); } rest.onClick = (e) => { @@ -99,7 +99,8 @@ export const Button = (props) => { return; } }} - {...computeBoxProps(rest)}> + {...computeBoxProps(rest)} + >
{icon && iconPosition !== 'right' && ( this.setInInput(true)}> + onClick={() => this.setInInput(true)} + > {icon && }
{content}
{ diff --git a/tgui/packages/tgui/components/Chart.js b/tgui/packages/tgui/components/Chart.js index fac444bd1da..9a6ddc1eff5 100644 --- a/tgui/packages/tgui/components/Chart.js +++ b/tgui/packages/tgui/components/Chart.js @@ -101,7 +101,8 @@ class LineChart extends Component { right: 0, bottom: 0, overflow: 'hidden', - }}> + }} + > this.setState({ open: !open })} - {...rest}> + {...rest} + > {title}
diff --git a/tgui/packages/tgui/components/ColorBox.js b/tgui/packages/tgui/components/ColorBox.js index a6203ca4694..01fa733ef98 100644 --- a/tgui/packages/tgui/components/ColorBox.js +++ b/tgui/packages/tgui/components/ColorBox.js @@ -22,7 +22,8 @@ export const ColorBox = (props) => { return (
+ {...computeBoxProps(rest)} + > {content || '.'}
); diff --git a/tgui/packages/tgui/components/Dialog.tsx b/tgui/packages/tgui/components/Dialog.tsx index 277a03b284d..897ce236a4a 100644 --- a/tgui/packages/tgui/components/Dialog.tsx +++ b/tgui/packages/tgui/components/Dialog.tsx @@ -52,7 +52,8 @@ const DialogButton = (props: DialogButtonProps) => { ); diff --git a/tgui/packages/tgui/components/DraggableControl.js b/tgui/packages/tgui/components/DraggableControl.js index 8ada6f2fa4d..3c86293ac92 100644 --- a/tgui/packages/tgui/components/DraggableControl.js +++ b/tgui/packages/tgui/components/DraggableControl.js @@ -97,13 +97,13 @@ export class DraggableControl extends Component { state.internalValue = clamp( state.internalValue + (offset * step) / stepPixelSize, minValue - step, - maxValue + step + maxValue + step, ); // Clamp the final value state.value = clamp( state.internalValue - (state.internalValue % step) + stepOffset, minValue, - maxValue + maxValue, ); state.origin = getScalarScreenOffset(e, dragMatrix); } else if (Math.abs(offset) > 4) { diff --git a/tgui/packages/tgui/components/Dropdown.js b/tgui/packages/tgui/components/Dropdown.js index e6fe8a840a5..67da3b0c3b1 100644 --- a/tgui/packages/tgui/components/Dropdown.js +++ b/tgui/packages/tgui/components/Dropdown.js @@ -66,7 +66,8 @@ export class Dropdown extends Component { className="Dropdown__menuentry" onClick={() => { this.setSelected(value); - }}> + }} + > {displayText} ); @@ -106,12 +107,13 @@ export class Dropdown extends Component { }} tabIndex="-1" style={{ - 'width': openWidth, + width: openWidth, }} className={classes([ (noscroll && 'Dropdown__menu-noscroll') || 'Dropdown__menu', over && 'Dropdown__over', - ])}> + ])} + > {this.buildMenu()} ) : null; @@ -137,15 +139,17 @@ export class Dropdown extends Component { if (props.onOpen) { props.onOpen(event); } - }}> + }} + > {icon && ( )} + overflow: clipSelectedText ? 'hidden' : 'visible', + }} + > {displayText ? displayText : this.state.selected} {!!nochevron || ( diff --git a/tgui/packages/tgui/components/FitText.tsx b/tgui/packages/tgui/components/FitText.tsx index 334eb970733..47e165c6cce 100644 --- a/tgui/packages/tgui/components/FitText.tsx +++ b/tgui/packages/tgui/components/FitText.tsx @@ -83,7 +83,8 @@ export class FitText extends Component { 'font-size': `${this.state.fontSize}px`, ...(typeof this.props.native?.style === 'object' && this.props.native.style), - }}> + }} + > {this.props.children} ); diff --git a/tgui/packages/tgui/components/Flex.tsx b/tgui/packages/tgui/components/Flex.tsx index f67738280ba..84820646b89 100644 --- a/tgui/packages/tgui/components/Flex.tsx +++ b/tgui/packages/tgui/components/Flex.tsx @@ -93,7 +93,7 @@ export const computeFlexItemProps = (props: FlexItemProps) => { 'flex-grow': grow !== undefined && Number(grow), 'flex-shrink': shrink !== undefined && Number(shrink), 'flex-basis': unit(computedBasis), - 'order': order, + order: order, 'align-self': align, }, ...rest, diff --git a/tgui/packages/tgui/components/Icon.js b/tgui/packages/tgui/components/Icon.js index 4be82fdbaf9..5f1c56de307 100644 --- a/tgui/packages/tgui/components/Icon.js +++ b/tgui/packages/tgui/components/Icon.js @@ -68,7 +68,8 @@ export const IconStack = (props) => { return ( + {...computeBoxProps(rest)} + > {children} ); diff --git a/tgui/packages/tgui/components/InfinitePlane.js b/tgui/packages/tgui/components/InfinitePlane.js index 74f60f1e4d4..ad87d01ffe3 100644 --- a/tgui/packages/tgui/components/InfinitePlane.js +++ b/tgui/packages/tgui/components/InfinitePlane.js @@ -139,14 +139,15 @@ export class InfinitePlane extends Component { overflow: 'hidden', position: 'relative', }, - })}> + })} + >
+ height: '100%', + width: '100%', + }} + > {children}
@@ -174,7 +176,8 @@ export class InfinitePlane extends Component { + maxValue={ZOOM_MAX_VAL} + > {zoom}x diff --git a/tgui/packages/tgui/components/Input.js b/tgui/packages/tgui/components/Input.js index bfc73cf187d..72daf49f926 100644 --- a/tgui/packages/tgui/components/Input.js +++ b/tgui/packages/tgui/components/Input.js @@ -140,7 +140,8 @@ export class Input extends Component { monospace && 'Input--monospace', className, ])} - {...rest}> + {...rest} + >
.
{ suppressFlicker, unit, value, - }}> + }} + > {(control) => { const { dragging, @@ -71,7 +72,7 @@ export const Knob = (props) => { const scaledFillValue = scale( fillValue ?? displayValue, minValue, - maxValue + maxValue, ); const scaledDisplayValue = scale(displayValue, minValue, maxValue); const effectiveColor = @@ -93,13 +94,15 @@ export const Knob = (props) => { }, ...rest, })} - onMouseDown={handleDragStart}> + onMouseDown={handleDragStart} + >
+ }} + >
@@ -108,12 +111,14 @@ export const Knob = (props) => { )} + viewBox="0 0 100 100" + > + viewBox="0 0 100 100" + > { ((bipolar ? 2.75 : 2.0) - scaledFillValue * 1.5) * Math.PI * 50, - 0 + 0, ), }} cx="50" diff --git a/tgui/packages/tgui/components/LabeledControls.js b/tgui/packages/tgui/components/LabeledControls.js index eea3b2c29bd..f19bd4eb933 100644 --- a/tgui/packages/tgui/components/LabeledControls.js +++ b/tgui/packages/tgui/components/LabeledControls.js @@ -14,7 +14,8 @@ export const LabeledControls = (props) => { wrap={wrap} align="stretch" justify="space-between" - {...rest}> + {...rest} + > {children} ); @@ -30,7 +31,8 @@ const LabeledControlsItem = (props) => { align="center" textAlign="center" justify="space-between" - {...rest}> + {...rest} + > {children} {label} diff --git a/tgui/packages/tgui/components/LabeledList.tsx b/tgui/packages/tgui/components/LabeledList.tsx index 283c0a2b912..1bd264dbd9d 100644 --- a/tgui/packages/tgui/components/LabeledList.tsx +++ b/tgui/packages/tgui/components/LabeledList.tsx @@ -57,7 +57,8 @@ const LabeledListItem = (props: LabeledListItemProps) => { // Kinda flipped because we want nowrap as default. Cleaner CSS this way though. !labelWrap && 'LabeledList__label--nowrap', ])} - verticalAlign={verticalAlign}> + verticalAlign={verticalAlign} + > {label ? (typeof label === 'string' ? label + ':' : label) : null} { textAlign={textAlign} className={classes(['LabeledList__cell', 'LabeledList__content'])} colSpan={buttons ? undefined : 2} - verticalAlign={verticalAlign}> + verticalAlign={verticalAlign} + > {content} {children} @@ -92,7 +94,8 @@ const LabeledListDivider = (props: LabeledListDividerProps) => { style={{ 'padding-top': padding, 'padding-bottom': padding, - }}> + }} + >
); diff --git a/tgui/packages/tgui/components/Tabs.js b/tgui/packages/tgui/components/Tabs.js index 46d1b078a85..e5b1ea18358 100644 --- a/tgui/packages/tgui/components/Tabs.js +++ b/tgui/packages/tgui/components/Tabs.js @@ -20,7 +20,8 @@ export const Tabs = (props) => { className, computeBoxClassName(rest), ])} - {...computeBoxProps(rest)}> + {...computeBoxProps(rest)} + > {children} ); @@ -47,7 +48,8 @@ const Tab = (props) => { className, ...computeBoxClassName(rest), ])} - {...computeBoxProps(rest)}> + {...computeBoxProps(rest)} + > {(canRender(leftSlot) &&
{leftSlot}
) || (!!icon && (
diff --git a/tgui/packages/tgui/components/TextArea.js b/tgui/packages/tgui/components/TextArea.js index 3fe2cd985d4..07a9d9b62d6 100644 --- a/tgui/packages/tgui/components/TextArea.js +++ b/tgui/packages/tgui/components/TextArea.js @@ -196,7 +196,8 @@ export class TextArea extends Component { noborder && 'TextArea--noborder', className, ])} - {...rest}> + {...rest} + > {!!displayedValue && (
+ transform: `translateY(-${scrolledAmount}px)`, + }} + > {displayedValue}
@@ -228,7 +230,7 @@ export class TextArea extends Component { onScroll={this.handleScroll} maxLength={maxLength} style={{ - 'color': displayedValue ? 'rgba(0, 0, 0, 0)' : 'inherit', + color: displayedValue ? 'rgba(0, 0, 0, 0)' : 'inherit', }} /> diff --git a/tgui/packages/tgui/components/Tooltip.tsx b/tgui/packages/tgui/components/Tooltip.tsx index cb35425e740..9d1eb386a4a 100644 --- a/tgui/packages/tgui/components/Tooltip.tsx +++ b/tgui/packages/tgui/components/Tooltip.tsx @@ -115,7 +115,7 @@ export class Tooltip extends Component { { ...DEFAULT_OPTIONS, placement: this.props.position || 'auto', - } + }, ); Tooltip.singletonPopper = singletonPopper; @@ -128,7 +128,7 @@ export class Tooltip extends Component { singletonPopper.update(); } }, - this.context + this.context, ); } diff --git a/tgui/packages/tgui/contants.test.ts b/tgui/packages/tgui/contants.test.ts index e71a8b6d770..abc51349563 100644 --- a/tgui/packages/tgui/contants.test.ts +++ b/tgui/packages/tgui/contants.test.ts @@ -1,4 +1,9 @@ -import { getGasColor, getGasFromId, getGasFromPath, getGasLabel } from './constants'; +import { + getGasColor, + getGasFromId, + getGasFromPath, + getGasLabel, +} from './constants'; describe('gas helper functions', () => { it('should get the proper gas label', () => { diff --git a/tgui/packages/tgui/debug/KitchenSink.js b/tgui/packages/tgui/debug/KitchenSink.js index 246b4f50b47..bede561946d 100644 --- a/tgui/packages/tgui/debug/KitchenSink.js +++ b/tgui/packages/tgui/debug/KitchenSink.js @@ -38,7 +38,8 @@ export const KitchenSink = (props, context) => { key={i} color="transparent" selected={i === pageIndex} - onClick={() => setPageIndex(i)}> + onClick={() => setPageIndex(i)} + > {story.meta.title} ))} diff --git a/tgui/packages/tgui/debug/middleware.js b/tgui/packages/tgui/debug/middleware.js index 75687f25417..821582df0bb 100644 --- a/tgui/packages/tgui/debug/middleware.js +++ b/tgui/packages/tgui/debug/middleware.js @@ -7,7 +7,11 @@ import { KEY_BACKSPACE, KEY_F10, KEY_F11, KEY_F12 } from 'common/keycodes'; import { globalEvents } from '../events'; import { acquireHotKey } from '../hotkeys'; -import { openExternalBrowser, toggleDebugLayout, toggleKitchenSink } from './actions'; +import { + openExternalBrowser, + toggleDebugLayout, + toggleKitchenSink, +} from './actions'; // prettier-ignore const relayedTypes = [ diff --git a/tgui/packages/tgui/drag.ts b/tgui/packages/tgui/drag.ts index e17303cdcd2..88db74880ff 100644 --- a/tgui/packages/tgui/drag.ts +++ b/tgui/packages/tgui/drag.ts @@ -76,7 +76,7 @@ const getScreenSize = (): [number, number] => [ export const touchRecents = ( recents: string[], touchedItem: string, - limit = 50 + limit = 50, ): [string[], string | undefined] => { const nextRecents: string[] = [touchedItem]; let trimmedItem: string | undefined; @@ -105,7 +105,7 @@ const storeWindowGeometry = async () => { // Update the list of stored geometries const [geometries, trimmedKey] = touchRecents( (await storage.get('geometries')) || [], - windowKey + windowKey, ); if (trimmedKey) { storage.remove(trimmedKey); @@ -121,7 +121,7 @@ export const recallWindowGeometry = async ( size?: [number, number]; locked?: boolean; scale?: boolean; - } = {} + } = {}, ) => { const geometry = options.fancy && (await storage.get(windowKey)); if (geometry) { @@ -137,11 +137,11 @@ export const recallWindowGeometry = async ( if (!options.scale) { document.body.style.setProperty( 'zoom', - `${100 / window.devicePixelRatio}%` + `${100 / window.devicePixelRatio}%`, ); document.documentElement.style.setProperty( '--scaling-amount', - window.devicePixelRatio.toString() + window.devicePixelRatio.toString(), ); } else { document.body.style.setProperty('zoom', ''); @@ -171,7 +171,7 @@ export const recallWindowGeometry = async ( pos = vecAdd( vecScale(areaAvailable, 0.5), vecScale(size, -0.5), - vecScale(screenOffset, -1.0) + vecScale(screenOffset, -1.0), ); setWindowPosition(pos); } @@ -196,7 +196,7 @@ export const setupDrag = async () => { */ const constraintPosition = ( pos: [number, number], - size: [number, number] + size: [number, number], ): [boolean, [number, number]] => { const screenPos = getScreenPosition(); const screenSize = getScreenSize(); @@ -222,7 +222,7 @@ export const dragStartHandler = (event: MouseEvent) => { dragging = true; dragPointOffset = vecSubtract( [event.screenX * pixelRatio, event.screenY * pixelRatio], - getWindowPosition() + getWindowPosition(), ); // Focus click target (event.target as HTMLElement)?.focus(); @@ -250,8 +250,8 @@ const dragMoveHandler = (event: MouseEvent) => { setWindowPosition( vecSubtract( [event.screenX * pixelRatio, event.screenY * pixelRatio], - dragPointOffset - ) as [number, number] + dragPointOffset, + ) as [number, number], ); }; @@ -263,7 +263,7 @@ export const resizeStartHandler = resizing = true; dragPointOffset = vecSubtract( [event.screenX * pixelRatio, event.screenY * pixelRatio], - getWindowPosition() + getWindowPosition(), ); initialSize = getWindowSize(); // Focus click target @@ -291,7 +291,7 @@ const resizeMoveHandler = (event: MouseEvent) => { event.preventDefault(); const currentOffset = vecSubtract( [event.screenX * pixelRatio, event.screenY * pixelRatio], - getWindowPosition() + getWindowPosition(), ); const delta = vecSubtract(currentOffset, dragPointOffset); // Extra 1x1 area is added to ensure the browser can see the cursor diff --git a/tgui/packages/tgui/events.test.ts b/tgui/packages/tgui/events.test.ts index 8f3e8e3109c..c5c4c7f2d78 100644 --- a/tgui/packages/tgui/events.test.ts +++ b/tgui/packages/tgui/events.test.ts @@ -1,4 +1,10 @@ -import { KeyEvent, addScrollableNode, canStealFocus, removeScrollableNode, setupGlobalEvents } from './events'; +import { + KeyEvent, + addScrollableNode, + canStealFocus, + removeScrollableNode, + setupGlobalEvents, +} from './events'; describe('focusEvents', () => { afterEach(() => { diff --git a/tgui/packages/tgui/events.ts b/tgui/packages/tgui/events.ts index e3a5fa7fe55..3ac9850391a 100644 --- a/tgui/packages/tgui/events.ts +++ b/tgui/packages/tgui/events.ts @@ -14,7 +14,7 @@ export const globalEvents = new EventEmitter(); let ignoreWindowFocus = false; export const setupGlobalEvents = ( - options: { ignoreWindowFocus?: boolean } = {} + options: { ignoreWindowFocus?: boolean } = {}, ): void => { ignoreWindowFocus = !!options.ignoreWindowFocus; }; diff --git a/tgui/packages/tgui/format.test.ts b/tgui/packages/tgui/format.test.ts index 011d9e9e6c0..8fdc6683c42 100644 --- a/tgui/packages/tgui/format.test.ts +++ b/tgui/packages/tgui/format.test.ts @@ -1,4 +1,10 @@ -import { formatDb, formatMoney, formatSiBaseTenUnit, formatSiUnit, formatTime } from './format'; +import { + formatDb, + formatMoney, + formatSiBaseTenUnit, + formatSiUnit, + formatTime, +} from './format'; describe('formatSiUnit', () => { it('formats base values correctly', () => { diff --git a/tgui/packages/tgui/format.ts b/tgui/packages/tgui/format.ts index c3b5be30000..86a9c290780 100644 --- a/tgui/packages/tgui/format.ts +++ b/tgui/packages/tgui/format.ts @@ -36,7 +36,7 @@ const SI_BASE_INDEX = SI_SYMBOLS.indexOf(' '); export const formatSiUnit = ( value: number, minBase1000 = -SI_BASE_INDEX, - unit = '' + unit = '', ): string => { if (!isFinite(value)) { return value.toString(); @@ -123,7 +123,7 @@ const SI_BASE_TEN_UNITS = [ export const formatSiBaseTenUnit = ( value: number, minBase1000 = 0, - unit = '' + unit = '', ): string => { if (!isFinite(value)) { return 'NaN'; @@ -147,7 +147,7 @@ export const formatSiBaseTenUnit = ( */ export const formatTime = ( val: number, - formatType: 'short' | 'default' = 'default' + formatType: 'short' | 'default' = 'default', ): string => { const totalSeconds = Math.floor(val / 10); const hours = Math.floor(totalSeconds / 3600); diff --git a/tgui/packages/tgui/http.ts b/tgui/packages/tgui/http.ts index a0ea97c3b63..b9dfe9c60cf 100644 --- a/tgui/packages/tgui/http.ts +++ b/tgui/packages/tgui/http.ts @@ -4,7 +4,7 @@ export const fetchRetry = ( url: string, options?: RequestInit, - retryTimer: number = 1000 + retryTimer: number = 1000, ): Promise => { return fetch(url, options).catch(() => { return new Promise((resolve) => { diff --git a/tgui/packages/tgui/interfaces/AIMaintenance.tsx b/tgui/packages/tgui/interfaces/AIMaintenance.tsx index 1e0cacd84e0..2eb5e59d3c2 100644 --- a/tgui/packages/tgui/interfaces/AIMaintenance.tsx +++ b/tgui/packages/tgui/interfaces/AIMaintenance.tsx @@ -1,6 +1,13 @@ import { BooleanLike } from '../../common/react'; import { useBackend } from '../backend'; -import { Button, LabeledList, NoticeBox, ProgressBar, Section, Table } from '../components'; +import { + Button, + LabeledList, + NoticeBox, + ProgressBar, + Section, + Table, +} from '../components'; import { NtosWindow } from '../layouts'; export type AIData = { @@ -100,7 +107,8 @@ export const MaintenanceWindow = (props, context) => { onClick={() => act('PRG_uploadNTDefault')} /> - }> + } + > {data.ai_laws && data.ai_laws.length ? ( diff --git a/tgui/packages/tgui/interfaces/ATM.tsx b/tgui/packages/tgui/interfaces/ATM.tsx index a3e55b63ed2..87c5c22106b 100644 --- a/tgui/packages/tgui/interfaces/ATM.tsx +++ b/tgui/packages/tgui/interfaces/ATM.tsx @@ -1,6 +1,17 @@ import { BooleanLike } from '../../common/react'; import { useBackend, useLocalState, useSharedState } from '../backend'; -import { Box, Button, Divider, Input, LabeledList, NoticeBox, NumberInput, Section, Stack, Table } from '../components'; +import { + Box, + Button, + Divider, + Input, + LabeledList, + NoticeBox, + NumberInput, + Section, + Stack, + Table, +} from '../components'; import { Window } from '../layouts'; export type ATMData = { @@ -46,7 +57,8 @@ export const ATM = (props, context) => { onClick={() => act('logout')} /> ) - }> + } + > {data.ticks_left_locked_down ? ( This machine is locked down! Please contact Idris technical @@ -116,19 +128,19 @@ export const AuthenticatedWindow = (props, context) => { const [security, setSecurity] = useLocalState( context, 'security', - false + false, ); const [transfer, setTransfer] = useLocalState( context, 'transfer', - false + false, ); const [target, setTarget] = useLocalState(context, 'target', ''); const [funds, setFunds] = useLocalState(context, 'funds', 0); const [purpose, setPurpose] = useLocalState( context, 'purpose', - 'Funds transfer' + 'Funds transfer', ); const [logs, setLogs] = useLocalState(context, 'logs', false); @@ -292,7 +304,8 @@ export const AuthenticatedWindow = (props, context) => { icon="print" onClick={() => act('print_transaction')} /> - }> + } + >
Date diff --git a/tgui/packages/tgui/interfaces/AccessTerminal.tsx b/tgui/packages/tgui/interfaces/AccessTerminal.tsx index cc748420261..32d17197735 100644 --- a/tgui/packages/tgui/interfaces/AccessTerminal.tsx +++ b/tgui/packages/tgui/interfaces/AccessTerminal.tsx @@ -27,7 +27,8 @@ export const AccessTerminal = (props, context) => { ) : ( ); diff --git a/tgui/packages/tgui/interfaces/Apc.tsx b/tgui/packages/tgui/interfaces/Apc.tsx index e285ad28705..121232b0003 100644 --- a/tgui/packages/tgui/interfaces/Apc.tsx +++ b/tgui/packages/tgui/interfaces/Apc.tsx @@ -1,6 +1,13 @@ import { BooleanLike } from '../../common/react'; import { useBackend } from '../backend'; -import { Section, Box, Button, BlockQuote, LabeledList, ProgressBar } from '../components'; +import { + Section, + Box, + Button, + BlockQuote, + LabeledList, + ProgressBar, +} from '../components'; import { Window } from '../layouts'; export type APCData = { @@ -55,7 +62,8 @@ export const FailWindow = (props, context) => { color="bad" onClick={() => act('reboot')} /> - }> + } + > I/O regulator malfuction detected! Waiting for system reboot... diff --git a/tgui/packages/tgui/interfaces/AppearanceChanger.tsx b/tgui/packages/tgui/interfaces/AppearanceChanger.tsx index 62d3d26a5e4..a9819d68a3b 100644 --- a/tgui/packages/tgui/interfaces/AppearanceChanger.tsx +++ b/tgui/packages/tgui/interfaces/AppearanceChanger.tsx @@ -199,15 +199,15 @@ export const CultureWindow = (props, context) => {
{data.valid_speech_bubbles.length ? data.valid_speech_bubbles.map((new_speech_bubble) => ( -
diff --git a/tgui/packages/tgui/interfaces/ArmorValues.tsx b/tgui/packages/tgui/interfaces/ArmorValues.tsx index 596fa381fc8..2d9376cdfb2 100644 --- a/tgui/packages/tgui/interfaces/ArmorValues.tsx +++ b/tgui/packages/tgui/interfaces/ArmorValues.tsx @@ -36,7 +36,7 @@ export const ArmorValues = (props, context) => { /> - ) : null + ) : null, )} diff --git a/tgui/packages/tgui/interfaces/AtmoScrubber.tsx b/tgui/packages/tgui/interfaces/AtmoScrubber.tsx index b95f6056192..8b88af400a6 100644 --- a/tgui/packages/tgui/interfaces/AtmoScrubber.tsx +++ b/tgui/packages/tgui/interfaces/AtmoScrubber.tsx @@ -1,6 +1,12 @@ import { useBackend } from '../backend'; import { useLocalState } from '../backend'; -import { Button, Section, LabeledList, ProgressBar, Slider } from '../components'; +import { + Button, + Section, + LabeledList, + ProgressBar, + Slider, +} from '../components'; import { Window } from '../layouts'; import { BooleanLike } from '../../common/react'; @@ -28,22 +34,22 @@ export const AtmoScrubber = (props, context) => { const tank_presure_color = tank_color ? { color: tank_color } : { - ranges: { - good: [-Infinity, 500], - bad: [750, Infinity], - average: [500, 750], - }, - }; + ranges: { + good: [-Infinity, 500], + bad: [750, Infinity], + average: [500, 750], + }, + }; const cell_charge_color = cell_color ? { color: cell_color } : { - ranges: { - good: [data.cellMaxCharge / 2, Infinity], - bad: [-Infinity, data.cellMaxCharge / 4], - average: [data.cellMaxCharge / 4, data.cellMaxCharge / 2], - }, - }; + ranges: { + good: [data.cellMaxCharge / 2, Infinity], + bad: [-Infinity, data.cellMaxCharge / 4], + average: [data.cellMaxCharge / 4, data.cellMaxCharge / 2], + }, + }; return ( @@ -55,7 +61,8 @@ export const AtmoScrubber = (props, context) => { {...tank_presure_color} minValue={0} maxValue={1024} - value={data.tankPressure}> + value={data.tankPressure} + > {data.tankPressure} kPa @@ -68,7 +75,8 @@ export const AtmoScrubber = (props, context) => { {...cell_charge_color} minValue={0} maxValue={data.cellMaxCharge} - value={data.cellCharge}> + value={data.cellCharge} + > {data.cellCharge} @@ -81,7 +89,8 @@ export const AtmoScrubber = (props, context) => { label="Tank Label" buttons={
Deck @@ -58,7 +59,7 @@ export const AtmosAlarmControl = (props, context) => { (alarm) => alarm.searchname ?.toLowerCase() - .indexOf(searchTerm.toLowerCase()) > -1 + .indexOf(searchTerm.toLowerCase()) > -1, ) .sort((a, b) => a.dept?.localeCompare(b?.dept)) .map((alarm) => ( diff --git a/tgui/packages/tgui/interfaces/AtmosControl.tsx b/tgui/packages/tgui/interfaces/AtmosControl.tsx index fbac5671efe..be05696114b 100644 --- a/tgui/packages/tgui/interfaces/AtmosControl.tsx +++ b/tgui/packages/tgui/interfaces/AtmosControl.tsx @@ -40,12 +40,13 @@ export const SensorData = (props, context) => { datapoint.data !== null ? ( + label={capitalize(datapoint.datapoint)} + > {datapoint.data} {datapoint.unit} ) : ( '' - ) + ), )} diff --git a/tgui/packages/tgui/interfaces/AtmosPump.tsx b/tgui/packages/tgui/interfaces/AtmosPump.tsx index feecc26eb4e..c412bb244a7 100644 --- a/tgui/packages/tgui/interfaces/AtmosPump.tsx +++ b/tgui/packages/tgui/interfaces/AtmosPump.tsx @@ -1,6 +1,12 @@ import { BooleanLike } from 'common/react'; import { useBackend } from '../backend'; -import { Button, LabeledList, ProgressBar, NumberInput, Section } from '../components'; +import { + Button, + LabeledList, + ProgressBar, + NumberInput, + Section, +} from '../components'; import { Window } from '../layouts'; type Data = { @@ -111,7 +117,8 @@ export const AtmosPump = (props, context) => { })()} minValue={0} maxValue={max_power_draw} - value={power_draw}> + value={power_draw} + > {power_draw} W diff --git a/tgui/packages/tgui/interfaces/Autolathe.tsx b/tgui/packages/tgui/interfaces/Autolathe.tsx index cd4f17b67e2..cab3cc97381 100644 --- a/tgui/packages/tgui/interfaces/Autolathe.tsx +++ b/tgui/packages/tgui/interfaces/Autolathe.tsx @@ -2,7 +2,18 @@ import { round } from '../../common/math'; import { BooleanLike } from '../../common/react'; import { capitalizeAll } from '../../common/string'; import { useBackend, useLocalState } from '../backend'; -import { Box, Button, Input, LabeledList, NoticeBox, ProgressBar, Section, Stack, Table, Tabs } from '../components'; +import { + Box, + Button, + Input, + LabeledList, + NoticeBox, + ProgressBar, + Section, + Stack, + Table, + Tabs, +} from '../components'; import { Window } from '../layouts'; export type AutolatheData = { @@ -65,7 +76,8 @@ export const Autolathe = (props, context) => { {capitalizeAll(material.material)} - }> + } + > { }} value={round(material.stored, 1)} maxValue={material.max_capacity} - minValue={0}> + minValue={0} + > {material.stored} / {material.max_capacity} @@ -96,7 +109,8 @@ export const Autolathe = (props, context) => { textAlign="center" selected={category === tab} key={category} - onClick={() => setTab(category)}> + onClick={() => setTab(category)} + > {category} ))} @@ -121,7 +135,7 @@ export const CategoryData = (props, context) => { const [searchTerm, setSearchTerm] = useLocalState( context, `searchTerm`, - `` + ``, ); const [amount, setAmount] = useLocalState(context, 'amount', 1); @@ -140,7 +154,8 @@ export const CategoryData = (props, context) => { }} value={searchTerm} /> - }> + } + >
Recipe @@ -148,7 +163,7 @@ export const CategoryData = (props, context) => { {data.recipes .filter( - (c) => c.name?.toLowerCase().indexOf(searchTerm.toLowerCase()) > -1 + (c) => c.name?.toLowerCase().indexOf(searchTerm.toLowerCase()) > -1, ) .map((recipe) => recipe.category === tab || tab === 'All' ? ( @@ -206,9 +221,9 @@ export const CategoryData = (props, context) => { !recipe.enabled || recipe.can_make ? null : act('make', { - multiplier: 5, - recipe: recipe.recipe, - }) + multiplier: 5, + recipe: recipe.recipe, + }) } />
@@ -300,7 +315,8 @@ export const QueueData = (props, context) => { data.queue.map((queue_item) => ( + label={capitalizeAll(queue_item.order)} + > { queue_item.build_time * 0.5, ], bad: [0, queue_item.build_time * 0.25], - }}> + }} + > {queue_item.remaining_time / 10} seconds ); diff --git a/tgui/packages/tgui/interfaces/ListViewer.tsx b/tgui/packages/tgui/interfaces/ListViewer.tsx index 21884f2be74..3b965964ed9 100644 --- a/tgui/packages/tgui/interfaces/ListViewer.tsx +++ b/tgui/packages/tgui/interfaces/ListViewer.tsx @@ -23,7 +23,8 @@ export const ListViewer = (props, context) => { - }> + } + > Key @@ -39,7 +40,8 @@ export const ListViewer = (props, context) => { diff --git a/tgui/packages/tgui/interfaces/Map.tsx b/tgui/packages/tgui/interfaces/Map.tsx index de9836031f5..314c92a4d68 100644 --- a/tgui/packages/tgui/interfaces/Map.tsx +++ b/tgui/packages/tgui/interfaces/Map.tsx @@ -20,17 +20,17 @@ export const Map = (props, context) => { const [minimapZoom, setMinimapZoom] = useLocalState( context, `minimapZoom`, - 150 + 150, ); const [showLegend, setShowLegend] = useLocalState( context, `showLegend`, - false + false, ); const pois = data.pois?.filter( - (poi) => poi.z === (data.z_override ? data.z_override : data.user_z) + (poi) => poi.z === (data.z_override ? data.z_override : data.user_z), ); const map_size = 255; @@ -50,16 +50,16 @@ export const Map = (props, context) => { data.z_override === station_level ? '#4972a1' : null } icon={data.user_z === station_level ? 'user' : 'minus'} - onClick={() => - act('z_override', { z_override: station_level }) - }> + onClick={() => act('z_override', { z_override: station_level })} + > {station_level} ))} {data.z_override ? ( act('z_override', { z_override: 0 })}> + onClick={() => act('z_override', { z_override: 0 })} + > Clear Override ) : ( @@ -67,7 +67,8 @@ export const Map = (props, context) => { )} setShowLegend(!showLegend)}> + onClick={() => setShowLegend(!showLegend)} + > {showLegend ? 'Hide Legend' : 'Show Legend'} @@ -92,14 +93,16 @@ export const Map = (props, context) => { value={minimapZoom} minValue={100} maxValue={200} - onChange={(e, value) => setMinimapZoom(value)}> + onChange={(e, value) => setMinimapZoom(value)} + > Zoom: {minimapZoom}% + overflow={'hidden'} + > { (map_size * (zoom_mod - 1.0)) / -2 + (255 / 2 - (map_size - data.user_y)) } - )`}> + )`} + > { transform={`translate( ${poi.x * zoom_mod} ${(map_size - poi.y) * zoom_mod} - )`}> + )`} + > { stroke="#FFFF00" stroke-width="0.1" font-size="9" - text-anchor={poi.x > data.user_x ? 'start' : 'end'}> + text-anchor={poi.x > data.user_x ? 'start' : 'end'} + > {poi.name} diff --git a/tgui/packages/tgui/interfaces/Merchant.tsx b/tgui/packages/tgui/interfaces/Merchant.tsx index c37fb78afe9..d1eb9d5e153 100644 --- a/tgui/packages/tgui/interfaces/Merchant.tsx +++ b/tgui/packages/tgui/interfaces/Merchant.tsx @@ -1,7 +1,14 @@ import { BooleanLike } from '../../common/react'; import { capitalizeAll } from '../../common/string'; import { useBackend } from '../backend'; -import { Box, Button, LabeledControls, LabeledList, NoticeBox, Section } from '../components'; +import { + Box, + Button, + LabeledControls, + LabeledList, + NoticeBox, + Section, +} from '../components'; import { NtosWindow } from '../layouts'; export type MerchantData = { @@ -47,7 +54,8 @@ export const ModeWindow = (props, context) => { onClick={() => act('PRG_scroll', { PRG_scroll: 'right' })} /> - }> + } + > {data.traderName} @@ -68,7 +76,8 @@ export const Hailed = (props, context) => { title="Communications" buttons={ diff --git a/tgui/packages/tgui/interfaces/NTOSConfig.tsx b/tgui/packages/tgui/interfaces/NTOSConfig.tsx index c75165af819..8e6745c7632 100644 --- a/tgui/packages/tgui/interfaces/NTOSConfig.tsx +++ b/tgui/packages/tgui/interfaces/NTOSConfig.tsx @@ -1,7 +1,17 @@ import { toFixed } from 'common/math'; import { BooleanLike } from 'common/react'; import { useBackend } from '../backend'; -import { BlockQuote, Box, Button, Divider, LabeledList, ProgressBar, Section, Slider, Stack } from '../components'; +import { + BlockQuote, + Box, + Button, + Divider, + LabeledList, + ProgressBar, + Section, + Slider, + Stack, +} from '../components'; import { NtosWindow } from '../layouts'; type BatteryData = { @@ -81,7 +91,8 @@ const ResourceUsage = (props, context) => { average: [0.5, 0.75], bad: [0.75, Infinity], }} - value={disk_used / disk_size}> + value={disk_used / disk_size} + > {remainingSpace} GQ free of {disk_size} GQ ( {toFixed((disk_used / disk_size) * 100)}%) @@ -126,9 +137,7 @@ export const NTOSConfig = (props, context) => { value={message_range} step={1} stepPixelSize={30} - onChange={(_, value) => - act('audmessage', { 'new_range': value }) - } + onChange={(_, value) => act('audmessage', { new_range: value })} /> {!(typeof brightness === 'undefined') && ( @@ -140,7 +149,7 @@ export const NTOSConfig = (props, context) => { stepPixelSize={30} value={brightness} onChange={(_, value) => - act('brightness', { 'new_brightness': value }) + act('brightness', { new_brightness: value }) } /> @@ -164,15 +173,17 @@ export const NTOSConfig = (props, context) => { color={!critical && enabled ? 'bad' : 'good'} icon="power-off" onClick={() => - act('PC_toggle_component', { 'component': name }) - }> + act('PC_toggle_component', { component: name }) + } + > {critical ? 'N/A' : enabled ? 'Power Off' : 'Power On'} - }> + } + >
{desc}
{power_usage > 0 && ( Power Usage: {power_usage} W diff --git a/tgui/packages/tgui/interfaces/NTOSDownloader.tsx b/tgui/packages/tgui/interfaces/NTOSDownloader.tsx index c81bdbfa31c..7b2c0f4aa59 100644 --- a/tgui/packages/tgui/interfaces/NTOSDownloader.tsx +++ b/tgui/packages/tgui/interfaces/NTOSDownloader.tsx @@ -1,6 +1,15 @@ import { toFixed } from 'common/math'; import { useBackend } from '../backend'; -import { Box, BlockQuote, Button, Collapsible, Section, Stack, ProgressBar, Divider } from '../components'; +import { + Box, + BlockQuote, + Button, + Collapsible, + Section, + Stack, + ProgressBar, + Divider, +} from '../components'; import { NtosWindow } from '../layouts'; type NTOSProgram = { @@ -53,7 +62,8 @@ const AvailableDownloads = (props, context) => { onClick={() => act('download', prg)} disabled={prg.size > remainingSpace} /> - }> + } + >
{prg.desc}
@@ -82,9 +92,10 @@ const DownloadQueue = (props, context) => { mx={4} mb={2} mt={1} - style={{ 'border': '2px solid #4972a1' }} + style={{ border: '2px solid #4972a1' }} backgroundColor={'#111'} - fitted> + fitted + > {queue.map((prg) => { return (
{ - }> + } + > + color={prg.filename === active_download ? 'good' : 'label'} + > {prg.progress} GQ of {prg.size} GQ ({speed} GQps)
@@ -132,7 +145,8 @@ export const NTOSDownloader = (props, context) => { + ranges={{ average: [0.75, 0.9], bad: [0.9, Infinity] }} + > {remainingSpace} GQ free of {disk_size} GQ ( {toFixed((disk_used / disk_size) * 100)}%) diff --git a/tgui/packages/tgui/interfaces/NTOSMain.tsx b/tgui/packages/tgui/interfaces/NTOSMain.tsx index 620980b9df1..215c49fcab0 100644 --- a/tgui/packages/tgui/interfaces/NTOSMain.tsx +++ b/tgui/packages/tgui/interfaces/NTOSMain.tsx @@ -25,9 +25,9 @@ export const NTOSMain = (props, context) => { const { act, data } = useBackend(context); const { programs = [], services = [] } = data; return ( - + -
+
{programs.map((program) => { return ( @@ -58,7 +58,7 @@ export const NTOSMain = (props, context) => { })}
-
+
{services.map((service) => { return ( diff --git a/tgui/packages/tgui/interfaces/NTOSNewsBrowser.tsx b/tgui/packages/tgui/interfaces/NTOSNewsBrowser.tsx index 83a0e9cee61..83f7bd8bbad 100644 --- a/tgui/packages/tgui/interfaces/NTOSNewsBrowser.tsx +++ b/tgui/packages/tgui/interfaces/NTOSNewsBrowser.tsx @@ -1,6 +1,13 @@ import { BooleanLike } from '../../common/react'; import { useBackend } from '../backend'; -import { Box, Button, Divider, LabeledList, ProgressBar, Section } from '../components'; +import { + Box, + Button, + Divider, + LabeledList, + ProgressBar, + Section, +} from '../components'; import { NtosWindow } from '../layouts'; import { sanitizeText } from '../sanitize'; @@ -50,7 +57,8 @@ export const ErrorMessage = (props, context) => { return (
act('PRG_reset')} />}> + buttons={
); @@ -68,7 +76,8 @@ export const ShowArticle = (props, context) => {
ETA to Next Grid: diff --git a/tgui/packages/tgui/interfaces/NeuralConfiguration.tsx b/tgui/packages/tgui/interfaces/NeuralConfiguration.tsx index 99b7fd601bf..529f12bdb1f 100644 --- a/tgui/packages/tgui/interfaces/NeuralConfiguration.tsx +++ b/tgui/packages/tgui/interfaces/NeuralConfiguration.tsx @@ -25,7 +25,8 @@ export const NeuralConfiguration = (props, context) => { data.neural_coherence > data.max_neural_coherence * 0.75 ? 'spookyconsole' : 'scc' - }> + } + >
@@ -45,11 +46,12 @@ export const NeuralConfiguration = (props, context) => { bold textColor={neuralCoherenceLabel( data.neural_coherence, - data.max_neural_coherence - )}> + data.max_neural_coherence, + )} + > {describeNeuralCoherence( data.neural_coherence, - data.max_neural_coherence + data.max_neural_coherence, )} . @@ -118,7 +120,7 @@ export const NeuralConfiguration = (props, context) => { export const describeNeuralCoherence = ( neuralCoherence, - maxNeuralCoherence = 200 + maxNeuralCoherence = 200, ) => { if (neuralCoherence > maxNeuralCoherence * 0.8) { return 'F̷͈͈̥͉̀͌̓̓̀̈́̆̓͒̓̊A̷͖͔̮̯͕̖̼̜͛̄̈́̐͘̕L̶̛͎̞̪̋̎̀̎͐̐̉͆͂́̇̅͘͠L̸̢̹̘̟̈́͘͝I̵̢̢̛̪͍̭͖̝͔͉̙̱͎̼̭̝͒̅͆̾̍͛̎̀̅̐N̶̨̘̭͒͑͛͛̈̚̚͜G̶͙͖̊̍̋̔͝͝͝͠ ̷̢̖̞̣̲̠͊̊ͅȂ̸̛̹̟̻̘̭͓̣̺̱͙͎͉͖͇̲͗͐̓P̴̧̲̬̗̥͖̤̫͓̲̝͉̓͋͜Ȁ̸̹̈́̊͗̌̾́̽͑̓̕R̸̢̡͇͋̔̔̓̒͂̉̎̍̎͜T̸̡͕̥̖̳͚͓̜͇̱͚̤̮̰̔̉̒͛͌͛̀̈́̓͝ͅ'; @@ -137,7 +139,7 @@ export const describeNeuralCoherence = ( export const neuralCoherenceLabel = ( neuralCoherence, - maxNeuralCoherence = 200 + maxNeuralCoherence = 200, ) => { if (neuralCoherence > maxNeuralCoherence * 0.75) { return 'bad'; diff --git a/tgui/packages/tgui/interfaces/NumberInputModal.tsx b/tgui/packages/tgui/interfaces/NumberInputModal.tsx index 76f1306d159..3bc4f4ccdf8 100644 --- a/tgui/packages/tgui/interfaces/NumberInputModal.tsx +++ b/tgui/packages/tgui/interfaces/NumberInputModal.tsx @@ -50,7 +50,8 @@ export const NumberInputModal = (props, context) => { if (keyCode === KEY_ESCAPE) { act('cancel'); } - }}> + }} + >
diff --git a/tgui/packages/tgui/interfaces/OdysseyPanel.tsx b/tgui/packages/tgui/interfaces/OdysseyPanel.tsx index 37d4acf2c02..39b129f8e20 100644 --- a/tgui/packages/tgui/interfaces/OdysseyPanel.tsx +++ b/tgui/packages/tgui/interfaces/OdysseyPanel.tsx @@ -35,7 +35,8 @@ export const OdysseyPanel = (props, context) => { disabled={!data.is_storyteller} onClick={() => act('edit_scenario_name')} /> - }> + } + > {data.scenario_desc}{' '}
@@ -84,7 +91,8 @@ export const ItemWindow = (props, context) => { onClick={() => act('confirm')} /> - }> + } + > {data.buying.length < 1 ? ( 'Your shopping cart is empty.' ) : ( diff --git a/tgui/packages/tgui/interfaces/OreDetector.tsx b/tgui/packages/tgui/interfaces/OreDetector.tsx index 160e580d907..fd7a3a65864 100644 --- a/tgui/packages/tgui/interfaces/OreDetector.tsx +++ b/tgui/packages/tgui/interfaces/OreDetector.tsx @@ -43,7 +43,8 @@ export const OreDetector = (props, context) => { disabled={!data.search_ores.length} onClick={() => act('toggle')} /> - }> + } + > {get_status()} @@ -58,7 +59,8 @@ export const OreDetector = (props, context) => { - }> + } + > {ore_enabled(ore) ? 'ENABLED' : 'DISABLED'} ))} diff --git a/tgui/packages/tgui/interfaces/Photocopier.tsx b/tgui/packages/tgui/interfaces/Photocopier.tsx index 3cb8aaf658a..529cf02d53c 100644 --- a/tgui/packages/tgui/interfaces/Photocopier.tsx +++ b/tgui/packages/tgui/interfaces/Photocopier.tsx @@ -1,5 +1,12 @@ import { useBackend } from '../backend'; -import { Section, ProgressBar, Box, NumberInput, Button, BlockQuote } from '../components'; +import { + Section, + ProgressBar, + Box, + NumberInput, + Button, + BlockQuote, +} from '../components'; import { Window } from '../layouts'; export type PhotocopierData = { @@ -37,7 +44,8 @@ export const Photocopier = (props, context) => { ) : ( '' ) - }> + } + > {data.gotitem ? ( ) : ( diff --git a/tgui/packages/tgui/interfaces/PlayerPanel.tsx b/tgui/packages/tgui/interfaces/PlayerPanel.tsx index 8acbf65a239..c9b2eea4bb0 100644 --- a/tgui/packages/tgui/interfaces/PlayerPanel.tsx +++ b/tgui/packages/tgui/interfaces/PlayerPanel.tsx @@ -28,7 +28,7 @@ export const PlayerPanel = (props, context) => { const [searchTerm, setSearchTerm] = useLocalState( context, `searchTerm`, - `` + ``, ); return ( @@ -48,7 +48,8 @@ export const PlayerPanel = (props, context) => { }} value={searchTerm} /> - }> + } + >
Name @@ -70,7 +71,7 @@ export const PlayerPanel = (props, context) => { .indexOf(searchTerm.toLowerCase()) > -1 || player.assigment ?.toLowerCase() - .indexOf(searchTerm.toLowerCase()) > -1 + .indexOf(searchTerm.toLowerCase()) > -1, ) .map((player) => ( diff --git a/tgui/packages/tgui/interfaces/PortableGenerator.tsx b/tgui/packages/tgui/interfaces/PortableGenerator.tsx index e3d3093552c..efb9f21c783 100644 --- a/tgui/packages/tgui/interfaces/PortableGenerator.tsx +++ b/tgui/packages/tgui/interfaces/PortableGenerator.tsx @@ -1,6 +1,13 @@ import { BooleanLike } from '../../common/react'; import { useBackend } from '../backend'; -import { Button, Box, LabeledList, Section, ProgressBar, Knob } from '../components'; +import { + Button, + Box, + LabeledList, + Section, + ProgressBar, + Knob, +} from '../components'; import { capitalizeAll } from '../../common/string'; import { Window } from '../layouts'; @@ -46,7 +53,8 @@ export const PortableGenerator = (props, context) => { onClick={() => act(data.active ? 'disable' : 'enable')} disabled={data.is_broken} /> - }> + } + > @@ -75,7 +83,8 @@ export const PortableGenerator = (props, context) => { }} value={data.fuel.fuel_stored} maxValue={data.fuel.fuel_capacity} - minValue={0}> + minValue={0} + > {data.fuel.fuel_stored} cm³ / {data.fuel.fuel_capacity} cm³ @@ -109,7 +118,8 @@ export const PortableGenerator = (props, context) => { : data.output_set <= data.output_safe ? 'good' : '' - }> + } + > {data.output_set} / {data.output_max} ({data.output_watts} W) @@ -142,7 +152,8 @@ export const PortableGenerator = (props, context) => { }} value={data.temperature_current} minValue={data.temperature_min} - maxValue={data.temperature_max * 1.5}> + maxValue={data.temperature_max * 1.5} + > {Math.max(data.temperature_min, data.temperature_current)}C diff --git a/tgui/packages/tgui/interfaces/PortablePump.tsx b/tgui/packages/tgui/interfaces/PortablePump.tsx index bbc7e2e48bb..533ac872372 100644 --- a/tgui/packages/tgui/interfaces/PortablePump.tsx +++ b/tgui/packages/tgui/interfaces/PortablePump.tsx @@ -1,6 +1,13 @@ import { BooleanLike } from 'common/react'; import { useBackend } from '../backend'; -import { Section, Box, ProgressBar, Button, Knob, LabeledList } from '../components'; +import { + Section, + Box, + ProgressBar, + Button, + Knob, + LabeledList, +} from '../components'; import { Window } from '../layouts'; export type PumpData = { @@ -46,7 +53,8 @@ export const PortablePump = (props, context) => { onClick={() => act('direction')} /> - }> + } + > {data.tankPressure} kPa @@ -81,7 +89,8 @@ export const PortablePump = (props, context) => { onClick={() => act('remove_tank')} /> ) - }> + } + > {data.hasHoldingTank ? ( ) : ( diff --git a/tgui/packages/tgui/interfaces/PowerMonitor.tsx b/tgui/packages/tgui/interfaces/PowerMonitor.tsx index b9e203c15dd..a476dcc8e0b 100644 --- a/tgui/packages/tgui/interfaces/PowerMonitor.tsx +++ b/tgui/packages/tgui/interfaces/PowerMonitor.tsx @@ -1,6 +1,13 @@ import { BooleanLike } from '../../common/react'; import { useBackend } from '../backend'; -import { Box, Button, LabeledList, NoticeBox, Section, Table } from '../components'; +import { + Box, + Button, + LabeledList, + NoticeBox, + Section, + Table, +} from '../components'; import { NtosWindow } from '../layouts'; import { sortBy } from 'es-toolkit'; @@ -54,7 +61,8 @@ export const ShowMasterList = (props, context) => { return (
act('refresh')} />}> + buttons={
{data.active.security.crimes}
@@ -790,8 +808,8 @@ export const ListActive = (props, context) => {
{data.active.ccia_actions.length ? data.active.ccia_actions.map((line) => ( - {line} - )) + {line} + )) : 'No CCIA actions on record.'}
) : ( diff --git a/tgui/packages/tgui/interfaces/SMES.tsx b/tgui/packages/tgui/interfaces/SMES.tsx index f597cb1a995..5921afbfd4b 100644 --- a/tgui/packages/tgui/interfaces/SMES.tsx +++ b/tgui/packages/tgui/interfaces/SMES.tsx @@ -1,6 +1,14 @@ import { BooleanLike } from '../../common/react'; import { useBackend } from '../backend'; -import { Box, BlockQuote, Button, LabeledList, Section, ProgressBar, NumberInput } from '../components'; +import { + Box, + BlockQuote, + Button, + LabeledList, + Section, + ProgressBar, + NumberInput, +} from '../components'; import { Window } from '../layouts'; export type SMESData = { @@ -47,7 +55,8 @@ export const FailWindow = (props, context) => { color="bad" onClick={() => act('reboot')} /> - }> + } + > I/O regulator malfuction detected! Waiting for system reboot...
Automatic reboot in {data.fail_time} seconds...
@@ -71,15 +80,15 @@ export const SMESWindow = (props, context) => { {data.charge_mode === 1 ? `Charge will complete in ${time_remaining( - data.time, - data.wtime - )}.` + data.time, + data.wtime, + )}.` : data.charge_mode === 2 ? 'Output and input balanced.' : `Charge will run out in ${time_remaining( - data.time, - data.wtime - )}.`} + data.time, + data.wtime, + )}.`}
@@ -115,7 +124,8 @@ export const SMESWindow = (props, context) => { color={data.charge_taken < data.charge_level ? 'average' : 'good'} value={data.charge_taken} minValue={0} - maxValue={data.charge_max}> + maxValue={data.charge_max} + > {data.charge_taken} W @@ -154,7 +164,8 @@ export const SMESWindow = (props, context) => { color={data.output_load < data.output_level ? 'average' : 'good'} value={data.output_load} minValue={0} - maxValue={data.output_max}> + maxValue={data.output_max} + > {data.output_load} W diff --git a/tgui/packages/tgui/interfaces/SeedStorage.tsx b/tgui/packages/tgui/interfaces/SeedStorage.tsx index 32f3531c290..4969c3cacc7 100644 --- a/tgui/packages/tgui/interfaces/SeedStorage.tsx +++ b/tgui/packages/tgui/interfaces/SeedStorage.tsx @@ -44,7 +44,8 @@ export const SeedStorage = (props, context) => { color="bad" onClick={() => act('purge')} /> - }> + } + >
Name diff --git a/tgui/packages/tgui/interfaces/Sensors.tsx b/tgui/packages/tgui/interfaces/Sensors.tsx index ec72ca0e109..be39e378778 100644 --- a/tgui/packages/tgui/interfaces/Sensors.tsx +++ b/tgui/packages/tgui/interfaces/Sensors.tsx @@ -1,6 +1,13 @@ import { BooleanLike } from '../../common/react'; import { useBackend } from '../backend'; -import { Box, Button, Section, Table, ProgressBar, Slider } from '../components'; +import { + Box, + Button, + Section, + Table, + ProgressBar, + Slider, +} from '../components'; import { NtosWindow } from '../layouts'; import { round, clamp } from 'common/math'; import { Color } from 'common/color'; @@ -79,7 +86,8 @@ const SensorSection = function (act, data: SensorsData) { } onClick={() => act('viewing')} /> - }> + } + >
State: @@ -108,7 +116,8 @@ const SensorSection = function (act, data: SensorsData) { default: return null; } - })()}> + })()} + > {data.status} @@ -124,7 +133,8 @@ const SensorSection = function (act, data: SensorsData) { maxValue={range_choice_max} onChange={(e, value) => act('range_choice', { range_choice: value }) - }> + } + > Desired Range: {data.desired_range} / {range_choice_max} + value={data.range} + > Current Range: {data.range} / {range_choice_max} @@ -166,7 +177,7 @@ const SensorSection = function (act, data: SensorsData) { backgroundColor={Color.lerp( Color.fromHex('#20b142'), Color.fromHex('#db2828'), - data.health / data.max_health + data.health / data.max_health, )} color={(() => { if (data.health > (data.max_health / 3) * 2) { @@ -179,7 +190,8 @@ const SensorSection = function (act, data: SensorsData) { })()} minValue={0} maxValue={data.max_health} - value={data.health}> + value={data.health} + > {data.health} / {data.max_health} @@ -192,7 +204,7 @@ const SensorSection = function (act, data: SensorsData) { backgroundColor={Color.lerp( Color.fromHex('#20b142'), Color.fromHex('#db2828'), - data.heat / data.critical_heat + data.heat / data.critical_heat, )} color={(() => { if (data.heat > (data.critical_heat / 3) * 2) { @@ -205,7 +217,8 @@ const SensorSection = function (act, data: SensorsData) { })()} minValue={0} maxValue={data.critical_heat} - value={data.heat}> + value={data.heat} + > {data.heat} / {data.critical_heat} @@ -362,7 +375,8 @@ const CompassSection = function (context, act, data: SensorsData) { text-anchor="middle" fill="white" font-size="5" - transform={'rotate(' + contact.bearing + ' 50 50)'}> + transform={'rotate(' + contact.bearing + ' 50 50)'} + > {contact.bearing} @@ -375,7 +389,8 @@ const CompassSection = function (context, act, data: SensorsData) { text-anchor="middle" fill="white" font-size="8" - transform={'rotate(' + b + ' 50 50)'}> + transform={'rotate(' + b + ' 50 50)'} + > {b} ))} diff --git a/tgui/packages/tgui/interfaces/ShieldCapacitor.tsx b/tgui/packages/tgui/interfaces/ShieldCapacitor.tsx index 1d84c14e30f..59d0f48e933 100644 --- a/tgui/packages/tgui/interfaces/ShieldCapacitor.tsx +++ b/tgui/packages/tgui/interfaces/ShieldCapacitor.tsx @@ -1,6 +1,14 @@ import { BooleanLike } from '../../common/react'; import { useBackend } from '../backend'; -import { Box, Button, LabeledList, NoticeBox, NumberInput, ProgressBar, Section } from '../components'; +import { + Box, + Button, + LabeledList, + NoticeBox, + NumberInput, + ProgressBar, + Section, +} from '../components'; import { Window } from '../layouts'; export type CapacitorData = { @@ -46,7 +54,8 @@ export const CapacitorWindow = (props, context) => { disabled={!data.anchored && !data.active} onClick={() => act('toggle')} /> - }> + } + > Capacitor status:{' '} 2 ? 'good' : 'bad'}> @@ -63,7 +72,8 @@ export const CapacitorWindow = (props, context) => { }} value={data.stored_charge} minValue={0} - maxValue={data.max_charge}> + maxValue={data.max_charge} + > {data.stored_charge} / {data.max_charge} W diff --git a/tgui/packages/tgui/interfaces/ShieldGenerator.tsx b/tgui/packages/tgui/interfaces/ShieldGenerator.tsx index 4461e28cb2d..306b6a550eb 100644 --- a/tgui/packages/tgui/interfaces/ShieldGenerator.tsx +++ b/tgui/packages/tgui/interfaces/ShieldGenerator.tsx @@ -35,7 +35,8 @@ export const ShieldGenerator = (props, context) => { icon={data.active ? 'power-off' : 'times'} onClick={() => act('toggle')} /> - }> + } + > {data.owned_capacitor ? ( diff --git a/tgui/packages/tgui/interfaces/Signaler.tsx b/tgui/packages/tgui/interfaces/Signaler.tsx index af2f4c0f875..909bea4e3fe 100644 --- a/tgui/packages/tgui/interfaces/Signaler.tsx +++ b/tgui/packages/tgui/interfaces/Signaler.tsx @@ -22,7 +22,8 @@ export const Signaler = (props, context) => { icon="wifi" onClick={() => act('send')} /> - }> + } + > { icon="person-booth" onClick={() => act('eject')} /> - }> + } + > + color={consciousnessLabel(data.stat)} + > {consciousnessText(data.stat)} @@ -99,28 +109,33 @@ export const OccupantStatus = (props, context) => { }} value={data.brain_activity} minValue={0} - maxValue={100}> + maxValue={100} + > {data.brain_activity}% + color={progressClass(data.brain_activity)} + > {data.pulse} + color={getPressureClass(data.blood_pressure_level)} + > {data.blood_pressure} + color={progressClass(data.blood_o2)} + > {Math.round(data.blood_o2)} + color={bacClass(data.bac)} + > {data.bac} @@ -193,7 +208,8 @@ export const OccupantStatus = (props, context) => { disabled={!data.beaker} onClick={() => act('beaker')} /> - }> + } + > - }> + } + > {user.singleSelection && choice.name === user.singleSelection && ( { - }> + } + > {user.multiSelection && user.multiSelection[user.ckey.concat(choice.name)] === 1 ? ( @@ -261,7 +275,8 @@ const TimePanel = (props, context) => { )} diff --git a/tgui/packages/tgui/interfaces/Voting.tsx b/tgui/packages/tgui/interfaces/Voting.tsx index ab4721e7122..8c5fb32556b 100644 --- a/tgui/packages/tgui/interfaces/Voting.tsx +++ b/tgui/packages/tgui/interfaces/Voting.tsx @@ -66,7 +66,8 @@ export const VoteWindow = (props, context) => { ) : ( '' ) - }> + } + >
@@ -104,7 +105,8 @@ export const VoteWindow = (props, context) => { } else { return 'gray'; } - })()}> + })()} + > {choice.required_players ? choice.required_players : ''} )} diff --git a/tgui/packages/tgui/interfaces/Wires.tsx b/tgui/packages/tgui/interfaces/Wires.tsx index 6b406bc63b2..2d60515a141 100644 --- a/tgui/packages/tgui/interfaces/Wires.tsx +++ b/tgui/packages/tgui/interfaces/Wires.tsx @@ -1,6 +1,13 @@ import { BooleanLike } from 'common/react'; import { useBackend } from '../backend'; -import { Box, Button, LabeledList, NoticeBox, Section, Stack } from '../components'; +import { + Box, + Button, + LabeledList, + NoticeBox, + Section, + Stack, +} from '../components'; import { Window } from '../layouts'; import { capitalize } from '../../common/string'; @@ -100,7 +107,8 @@ const WireMap = (props, context) => { } /> - }> + } + > {!!wire.wire && ({wire.wire})} ))} diff --git a/tgui/packages/tgui/interfaces/common/AccessConfig.js b/tgui/packages/tgui/interfaces/common/AccessConfig.js index 69c0d241397..e9a9ebaa233 100644 --- a/tgui/packages/tgui/interfaces/common/AccessConfig.js +++ b/tgui/packages/tgui/interfaces/common/AccessConfig.js @@ -15,13 +15,13 @@ export const AccessConfig = (props, context) => { const [selectedAccessName, setSelectedAccessName] = useLocalState( context, 'accessName', - accesses[0]?.name + accesses[0]?.name, ); const selectedAccess = accesses.find( - (access) => access.name === selectedAccessName + (access) => access.name === selectedAccessName, ); const selectedAccessEntries = sortBy((entry) => entry.desc)( - selectedAccess?.accesses || [] + selectedAccess?.accesses || [], ); const checkAccessIcon = (accesses) => { @@ -61,7 +61,8 @@ export const AccessConfig = (props, context) => { onClick={() => denyAll()} /> - }> + } + > @@ -76,7 +77,8 @@ export const AccessConfig = (props, context) => { color={color} icon={icon} selected={access.name === selectedAccessName} - onClick={() => setSelectedAccessName(access.name)}> + onClick={() => setSelectedAccessName(access.name)} + > {access.name} ); diff --git a/tgui/packages/tgui/interfaces/common/AccessList.js b/tgui/packages/tgui/interfaces/common/AccessList.js index 6b64b93435a..b70e4e98be3 100644 --- a/tgui/packages/tgui/interfaces/common/AccessList.js +++ b/tgui/packages/tgui/interfaces/common/AccessList.js @@ -19,7 +19,7 @@ export const AccessList = (props, context) => { const [wildcardTab, setWildcardTab] = useSharedState( context, 'wildcardSelected', - showBasic ? 'None' : Object.keys(wildcardSlots)[0] + showBasic ? 'None' : Object.keys(wildcardSlots)[0], ); let selectedWildcard; @@ -136,7 +136,7 @@ export const FormatWildcards = (props, context) => { const [wildcardTab, setWildcardTab] = useSharedState( context, 'wildcardSelected', - showBasic ? 'None' : Object.keys(wildcardSlots)[0] + showBasic ? 'None' : Object.keys(wildcardSlots)[0], ); let selectedWildcard; @@ -153,7 +153,8 @@ export const FormatWildcards = (props, context) => { {showBasic && ( setWildcardTab('None')}> + onClick={() => setWildcardTab('None')} + > Trim:
{basicUsed + '/' + basicMax} @@ -173,7 +174,8 @@ export const FormatWildcards = (props, context) => { setWildcardTab(wildcard)}> + onClick={() => setWildcardTab(wildcard)} + > {wildcard + ':'}
{wcLeftStr} @@ -190,7 +192,7 @@ const RegionTabList = (props, context) => { const [selectedAccessName, setSelectedAccessName] = useSharedState( context, 'accessName', - accesses[0]?.name + accesses[0]?.name, ); return ( @@ -207,7 +209,8 @@ const RegionTabList = (props, context) => { minWidth={'100%'} altSelection selected={access.name === selectedAccessName} - onClick={() => setSelectedAccessName(access.name)}> + onClick={() => setSelectedAccessName(access.name)} + > {access.name} ); @@ -231,7 +234,7 @@ const RegionAccessList = (props, context) => { const [wildcardTab, setWildcardTab] = useSharedState( context, 'wildcardSelected', - showBasic ? 'None' : Object.keys(wildcardSlots)[0] + showBasic ? 'None' : Object.keys(wildcardSlots)[0], ); let selWildcard; @@ -246,14 +249,14 @@ const RegionAccessList = (props, context) => { const [selectedAccessName] = useSharedState( context, 'accessName', - accesses[0]?.name + accesses[0]?.name, ); const selectedAccess = accesses.find( - (access) => access.name === selectedAccessName + (access) => access.name === selectedAccessName, ); const selectedAccessEntries = sortBy((entry) => entry.desc)( - selectedAccess?.accesses || [] + selectedAccess?.accesses || [], ); const allWildcards = Object.keys(wildcardSlots); diff --git a/tgui/packages/tgui/interfaces/common/AtmosControls.tsx b/tgui/packages/tgui/interfaces/common/AtmosControls.tsx index 099de593558..e3e40ebf601 100644 --- a/tgui/packages/tgui/interfaces/common/AtmosControls.tsx +++ b/tgui/packages/tgui/interfaces/common/AtmosControls.tsx @@ -61,7 +61,8 @@ export const Vent = (props: VentProps, context) => { }) } /> - }> + } + > ); @@ -43,7 +44,8 @@ export const InputButtons = (props: InputButtonsProps, context) => { pr={2} pt={large_buttons ? 0.33 : 0} textAlign="center" - width={!large_buttons && 6}> + width={!large_buttons && 6} + > {large_buttons ? 'CANCEL' : 'Cancel'} ); @@ -53,7 +55,8 @@ export const InputButtons = (props: InputButtonsProps, context) => { align="center" direction={!swapped_buttons ? 'row' : 'row-reverse'} fill - justify="space-around"> + justify="space-around" + > {large_buttons ? ( {cancelButton} ) : ( diff --git a/tgui/packages/tgui/interfaces/common/JobToIcon.ts b/tgui/packages/tgui/interfaces/common/JobToIcon.ts index cb48cb6c429..60b005b19be 100644 --- a/tgui/packages/tgui/interfaces/common/JobToIcon.ts +++ b/tgui/packages/tgui/interfaces/common/JobToIcon.ts @@ -1,41 +1,41 @@ /** Icon map of jobs to their fontawesome5 (free) counterpart. */ export const JOB2ICON = { - 'AI': 'eye', - 'Assistant': 'toolbox', + AI: 'eye', + Assistant: 'toolbox', 'Atmospheric Technician': 'fan', - 'Bartender': 'cocktail', - 'Botanist': 'seedling', - 'Captain': 'crown', + Bartender: 'cocktail', + Botanist: 'seedling', + Captain: 'crown', 'Cargo Technician': 'box', 'CentCom Commander': 'star', 'CentCom Head Intern': 'pen-fancy', 'CentCom Intern': 'pen-alt', 'CentCom Official': 'medal', - 'Chaplain': 'cross', - 'Chef': 'utensils', - 'Chemist': 'prescription-bottle', + Chaplain: 'cross', + Chef: 'utensils', + Chemist: 'prescription-bottle', 'Chief Engineer': 'user-astronaut', 'Chief Medical Officer': 'user-md', - 'Clown': 'face-grin-tears', - 'Cook': 'utensils', - 'Curator': 'book', - 'Cyborg': 'robot', - 'Detective': 'user-secret', - 'Geneticist': 'dna', + Clown: 'face-grin-tears', + Cook: 'utensils', + Curator: 'book', + Cyborg: 'robot', + Detective: 'user-secret', + Geneticist: 'dna', 'Head of Personnel': 'dog', 'Head of Security': 'user-shield', - 'Janitor': 'soap', - 'Lawyer': 'gavel', + Janitor: 'soap', + Lawyer: 'gavel', 'Medical Doctor': 'staff-snake', - 'Mime': 'comment-slash', - 'Paramedic': 'truck-medical', + Mime: 'comment-slash', + Paramedic: 'truck-medical', 'Personal AI': 'mobile-alt', - 'Prisoner': 'lock', - 'Psychologist': 'brain', - 'Quartermaster': 'sack-dollar', + Prisoner: 'lock', + Psychologist: 'brain', + Quartermaster: 'sack-dollar', 'Research Director': 'user-graduate', - 'Roboticist': 'battery-half', - 'Scientist': 'flask', + Roboticist: 'battery-half', + Scientist: 'flask', 'Security Officer (Cargo)': 'shield-halved', 'Security Officer (Engineering)': 'shield-halved', 'Security Officer (Medical)': 'shield-halved', @@ -44,8 +44,8 @@ export const JOB2ICON = { 'Shaft Miner': 'digging', 'Station Engineer': 'gears', 'Syndicate Operative': 'dragon', - 'Virologist': 'virus', - 'Warden': 'handcuffs', + Virologist: 'virus', + Warden: 'handcuffs', } as const; export type AvailableJob = keyof typeof JOB2ICON; diff --git a/tgui/packages/tgui/interfaces/common/ManifestSection.tsx b/tgui/packages/tgui/interfaces/common/ManifestSection.tsx index 7055f42c405..025040c99b4 100644 --- a/tgui/packages/tgui/interfaces/common/ManifestSection.tsx +++ b/tgui/packages/tgui/interfaces/common/ManifestSection.tsx @@ -30,14 +30,16 @@ export const ManifestSection = (props, context) => { title={dept} textAlign="center" className={'border-dept-' + dept.toLowerCase()} - backgroundColor="rgba(10, 10, 10, 0.75)"> + backgroundColor="rgba(10, 10, 10, 0.75)" + >
{deptCrew.map((crewmate) => { return ( + overflow="hidden" + > {crewmate.name} @@ -46,7 +48,8 @@ export const ManifestSection = (props, context) => { textAlign="right" pr="2%" pt="10px" - nowrap> + nowrap + > {crewmate.rank} diff --git a/tgui/packages/tgui/interfaces/common/MinimapView.tsx b/tgui/packages/tgui/interfaces/common/MinimapView.tsx index ca650e93fa5..5d3ff57d66d 100644 --- a/tgui/packages/tgui/interfaces/common/MinimapView.tsx +++ b/tgui/packages/tgui/interfaces/common/MinimapView.tsx @@ -16,7 +16,8 @@ export const MinimapView = (props: MinimapViewProps) => { height={'250px'} width={'100%'} viewBox={`0 0 ${map_size} ${map_size}`} - overflow={'hidden'}> + overflow={'hidden'} + > { (map_size * (zoom_mod - 1.0)) / -2 + (255 / 2 - (map_size - center_point_y)) } - )`}> + )`} + > { transform={`translate( ${center_point_x * zoom_mod} ${(map_size - center_point_y) * zoom_mod} - )`}> + )`} + > {props.x} { transform={`translate( ${center_point_x * zoom_mod} ${(map_size - center_point_y) * zoom_mod} - )`}> + )`} + > {props.y} diff --git a/tgui/packages/tgui/interfaces/common/PortableAtmos.js b/tgui/packages/tgui/interfaces/common/PortableAtmos.js index 4370c503acb..4c7dea2dfc1 100644 --- a/tgui/packages/tgui/interfaces/common/PortableAtmos.js +++ b/tgui/packages/tgui/interfaces/common/PortableAtmos.js @@ -1,5 +1,11 @@ import { useBackend } from '../../backend'; -import { AnimatedNumber, Box, Button, LabeledList, Section } from '../../components'; +import { + AnimatedNumber, + Box, + Button, + LabeledList, + Section, +} from '../../components'; export const PortableBasicInfo = (props, context) => { const { act, data } = useBackend(context); @@ -22,7 +28,8 @@ export const PortableBasicInfo = (props, context) => { selected={on} onClick={() => act('power')} /> - }> + } + > @@ -55,7 +62,8 @@ export const PortableBasicInfo = (props, context) => { disabled={!holding} onClick={() => act('eject')} /> - }> + } + > {holding ? ( {holding.name} diff --git a/tgui/packages/tgui/interfaces/common/RecipeLookup.js b/tgui/packages/tgui/interfaces/common/RecipeLookup.js index 0a97ca15545..a87e234ed3d 100644 --- a/tgui/packages/tgui/interfaces/common/RecipeLookup.js +++ b/tgui/packages/tgui/interfaces/common/RecipeLookup.js @@ -1,5 +1,13 @@ import { useBackend } from '../../backend'; -import { Box, Button, Chart, Flex, Icon, LabeledList, Tooltip } from '../../components'; +import { + Box, + Button, + Chart, + Flex, + Icon, + LabeledList, + Tooltip, +} from '../../components'; export const RecipeLookup = (props, context) => { const { recipe, bookmarkedReactions } = props; @@ -177,7 +185,8 @@ export const RecipeLookup = (props, context) => { position="relative" style={{ 'background-color': 'black', - }}> + }} + > { recipe.isColdRecipe ? 'The temperature at which it is underheated, causing negative effects on the reaction.' : 'The minimum temperature needed for this reaction to start. Heating it up past this point will increase the reaction rate.' - }> + } + > + textColor={recipe.isColdRecipe && 'red'} + > {recipe.isColdRecipe ? recipe.explodeTemp + 'K' : recipe.tempMin + 'K'} @@ -220,10 +231,12 @@ export const RecipeLookup = (props, context) => { recipe.isColdRecipe ? 'The minimum temperature needed for this reaction to start. Heating it up past this point will increase the reaction rate.' : 'The temperature at which it is overheated, causing negative effects on the reaction.' - }> + } + > + textColor={!recipe.isColdRecipe && 'red'} + > {recipe.isColdRecipe ? recipe.tempMin + 'K' : recipe.explodeTemp + 'K'} diff --git a/tgui/packages/tgui/interfaces/common/StatusDisplayControls.tsx b/tgui/packages/tgui/interfaces/common/StatusDisplayControls.tsx index f5d5cad689b..0f1eb93065f 100644 --- a/tgui/packages/tgui/interfaces/common/StatusDisplayControls.tsx +++ b/tgui/packages/tgui/interfaces/common/StatusDisplayControls.tsx @@ -18,12 +18,12 @@ export const StatusDisplayControls = (props, context) => { const [upperText, setUpperText] = useSharedState( context, 'statusUpperText', - initialUpper + initialUpper, ); const [lowerText, setLowerText] = useSharedState( context, 'statusLowerText', - initialLower + initialLower, ); return ( diff --git a/tgui/packages/tgui/interfaces/pAIDoorjack.tsx b/tgui/packages/tgui/interfaces/pAIDoorjack.tsx index 4ca2256fcc2..4af1c9c2324 100644 --- a/tgui/packages/tgui/interfaces/pAIDoorjack.tsx +++ b/tgui/packages/tgui/interfaces/pAIDoorjack.tsx @@ -36,7 +36,8 @@ export const pAIDoorjack = (props, context) => { + minValue={0} + > {data.progress / 10}% {' '} - }> + } + > setCode(e.target.value)}> + onChange={(e) => setCode(e.target.value)} + > {code} diff --git a/tgui/packages/tgui/stories/Flex.stories.js b/tgui/packages/tgui/stories/Flex.stories.js index dd96c6fe171..64dc79edfc4 100644 --- a/tgui/packages/tgui/stories/Flex.stories.js +++ b/tgui/packages/tgui/stories/Flex.stories.js @@ -17,7 +17,7 @@ const Story = (props, context) => { const [direction, setDirection] = useLocalState( context, 'fs_direction', - 'column' + 'column', ); const [fill, setFill] = useLocalState(context, 'fs_fill', true); const [hasTitle, setHasTitle] = useLocalState(context, 'fs_title', true); @@ -29,7 +29,8 @@ const Story = (props, context) => { fluid onClick={() => setDirection(direction === 'column' ? 'row' : 'column') - }> + } + > {`Flex direction="${direction}"`} @@ -51,7 +53,8 @@ const Story = (props, context) => { + grow={grow} + >
Content
diff --git a/tgui/packages/tgui/stories/Input.stories.js b/tgui/packages/tgui/stories/Input.stories.js index beca0acb417..66fcd602b32 100644 --- a/tgui/packages/tgui/stories/Input.stories.js +++ b/tgui/packages/tgui/stories/Input.stories.js @@ -5,7 +5,17 @@ */ import { useLocalState } from '../backend'; -import { Box, DraggableControl, Icon, Input, Knob, LabeledList, NumberInput, Section, Slider } from '../components'; +import { + Box, + DraggableControl, + Icon, + Input, + Knob, + LabeledList, + NumberInput, + Section, + Slider, +} from '../components'; export const meta = { title: 'Input', @@ -91,7 +101,8 @@ const Story = (props, context) => { dragMatrix={[0, -1]} step={1} stepPixelSize={5} - onDrag={(e, value) => setNumber(value)}> + onDrag={(e, value) => setNumber(value)} + > {(control) => ( { + label="Very very very very very very very very very very very very very long label with labelWrap" + > Entry 7 + label="Very very very very very very very very very very very very very long label with labelWrap and verticalAlign" + > Entry 8 diff --git a/tgui/packages/tgui/stories/Popper.stories.js b/tgui/packages/tgui/stories/Popper.stories.js index 08fd430fb27..5a984ac6fea 100644 --- a/tgui/packages/tgui/stories/Popper.stories.js +++ b/tgui/packages/tgui/stories/Popper.stories.js @@ -14,13 +14,15 @@ const Story = () => { style={{ background: 'white', border: '2px solid blue', - }}> + }} + > Loogatme! } options={{ placement: 'bottom', - }}> + }} + > { style={{ background: 'white', border: '2px solid blue', - }}> + }} + > I am on the right! } options={{ placement: 'right', - }}> + }} + > { const color_data = color ? { color: color } : { - ranges: { - good: [0.5, Infinity], - bad: [-Infinity, 0.1], - average: [0, 0.5], - }, - }; + ranges: { + good: [0.5, Infinity], + bad: [-Infinity, 0.1], + average: [0, 0.5], + }, + }; return (
diff --git a/tgui/packages/tgui/stories/Storage.stories.js b/tgui/packages/tgui/stories/Storage.stories.js index be42dd49e52..3172a097d24 100644 --- a/tgui/packages/tgui/stories/Storage.stories.js +++ b/tgui/packages/tgui/stories/Storage.stories.js @@ -26,10 +26,12 @@ const Story = (props, context) => { onClick={() => { localStorage.clear(); storage.clear(); - }}> + }} + > Clear - }> + } + > {localStorage.length} diff --git a/tgui/packages/tgui/stories/Tabs.stories.js b/tgui/packages/tgui/stories/Tabs.stories.js index 333890032db..b2b51c3ea74 100644 --- a/tgui/packages/tgui/stories/Tabs.stories.js +++ b/tgui/packages/tgui/stories/Tabs.stories.js @@ -108,7 +108,8 @@ const TabsPrefab = (props, context) => { + textAlign={tabProps.centered && 'center'} + > {TAB_RANGE.map((text, i) => ( {