diff --git a/.gitignore b/.gitignore index 8940b2c85721..cc2f12101d10 100644 --- a/.gitignore +++ b/.gitignore @@ -25,6 +25,7 @@ stddef.dm .atom-build.json *.vscode/* !/.vscode/extensions.json +!/.vscode/tasks.json # ignore DMI tool build cache /tools/dmitool/bin/ diff --git a/.vscode/extensions.json b/.vscode/extensions.json index 62f6e9cb4563..b5147f210dd7 100644 --- a/.vscode/extensions.json +++ b/.vscode/extensions.json @@ -6,6 +6,7 @@ "dbaeumer.vscode-eslint", "eamodio.gitlens", "usernamehw.errorlens", - "anturk.dmi-editor" + "anturk.dmi-editor", + "esbenp.prettier-vscode" ] } diff --git a/.vscode/tasks.json b/.vscode/tasks.json new file mode 100644 index 000000000000..dca695c03ccc --- /dev/null +++ b/.vscode/tasks.json @@ -0,0 +1,54 @@ +{ + "version": "2.0.0", + "tasks": [ + { + "type": "dreammaker", + "dme": "paradise.dme", + "problemMatcher": [ + "$dreammaker" + ], + "group": "build", + "label": "dm: build - paradise.dme" + }, + { + "type": "shell", + "command": "tgui/bin/tgui-build", + "windows": { + "command": ".\\tgui\\bin\\tgui-build.bat" + }, + "problemMatcher": [ + "$tsc", + "$eslint-stylish" + ], + "group": "build", + "label": "tgui: build" + }, + { + "type": "shell", + "command": "tgui/bin/tgui-dev-server", + "windows": { + "command": ".\\tgui\\bin\\tgui-dev-server.bat" + }, + "problemMatcher": [ + "$tsc", + "$eslint-stylish" + ], + "group": "build", + "label": "tgui: run dev server" + } + , + { + "type": "shell", + "command": "tgui/bin/tgui-formatting", + "windows": { + "command": ".\\tgui\\bin\\tgui-formatting.bat" + }, + "problemMatcher": [ + "$tsc", + "$eslint-stylish" + ], + "group": "build", + "label": "tgui: run prettier formatting" + } + ] +} diff --git a/_build_dependencies.sh b/_build_dependencies.sh index b6f31ad2eb09..e824c19d87b0 100644 --- a/_build_dependencies.sh +++ b/_build_dependencies.sh @@ -2,7 +2,7 @@ # For dreamchecker export SPACEMANDMM_TAG=suite-1.7.1 # For TGUI -export NODE_VERSION=12 +export NODE_VERSION=18 # Stable Byond Major export STABLE_BYOND_MAJOR=514 # Stable Byond Minor diff --git a/tgui/.eslintrc-harder.yml b/tgui/.eslintrc-harder.yml index eb06f5b33db9..75399d2677f0 100644 --- a/tgui/.eslintrc-harder.yml +++ b/tgui/.eslintrc-harder.yml @@ -4,11 +4,6 @@ rules: ## Enforce consistent brace style for blocks brace-style: [error, stroustrup, { allowSingleLine: false }] ## Enforce the consistent use of either backticks, double, or single quotes - quotes: [error, single, { - avoidEscape: true, - allowTemplateLiterals: true, - }] - react/jsx-closing-bracket-location: [error, { - selfClosing: after-props, - nonEmpty: after-props, - }] + quotes: [error, single, { avoidEscape: true, allowTemplateLiterals: true }] + react/jsx-closing-bracket-location: + [error, { selfClosing: after-props, nonEmpty: after-props }] diff --git a/tgui/.eslintrc.yml b/tgui/.eslintrc.yml index d73592fe8f3c..34a47789fba3 100644 --- a/tgui/.eslintrc.yml +++ b/tgui/.eslintrc.yml @@ -1,4 +1,4 @@ -parser: "@babel/eslint-parser" +parser: '@babel/eslint-parser' parserOptions: ecmaVersion: 2019 sourceType: module @@ -16,7 +16,6 @@ settings: react: version: '16.10' rules: - ## Possible Errors ## ---------------------------------------- @@ -370,10 +369,10 @@ rules: ## Enforce a maximum line length #max-len: [error, { # code: 80, - ## Ignore imports - #ignorePattern: '^(import\s.+\sfrom\s|.*require\()', - #ignoreUrls: true, - #ignoreRegExpLiterals: true, + ## Ignore imports + #ignorePattern: '^(import\s.+\sfrom\s|.*require\()', + #ignoreUrls: true, + #ignoreRegExpLiterals: true, #}] ## Enforce a maximum number of lines per file # max-lines: error diff --git a/tgui/.prettierignore b/tgui/.prettierignore new file mode 100644 index 000000000000..aafde4f3b8b6 --- /dev/null +++ b/tgui/.prettierignore @@ -0,0 +1,2 @@ +# Ignore built packages: +packages/tgui/public diff --git a/tgui/.prettierrc.yml b/tgui/.prettierrc.yml index fe51f01cc4db..2911fcd522dd 100644 --- a/tgui/.prettierrc.yml +++ b/tgui/.prettierrc.yml @@ -1,7 +1,6 @@ arrowParens: always bracketSpacing: true endOfLine: lf -jsxBracketSameLine: true jsxSingleQuote: false printWidth: 80 proseWrap: preserve diff --git a/tgui/README.md b/tgui/README.md index 5ddeb18fdda7..66e4868a0832 100644 --- a/tgui/README.md +++ b/tgui/README.md @@ -27,7 +27,7 @@ API to React. Take your time to read these guides: - [React guide](https://reactjs.org/docs/hello-world.html) - [Inferno documentation](https://infernojs.org/docs/guides/components) - -highlights differences with React. + highlights differences with React. If you were already familiar with an older, Ractive-based tgui, and want to translate concepts between old and new tgui, read this @@ -62,23 +62,23 @@ Run one of the following: - `bin/tgui` - build the project in production mode. - `bin/tgui --dev` - launch a development server. - tgui development server provides you with incremental compilation, - hot module replacement and logging facilities in all running instances - of tgui. In short, this means that you will instantly see changes in the - game as you code it. Very useful, highly recommended. + hot module replacement and logging facilities in all running instances + of tgui. In short, this means that you will instantly see changes in the + game as you code it. Very useful, highly recommended. - In order to use it, you should start the game server first, connect to it - and wait until the world has been properly loaded and you are no longer - in the lobby. Start tgui dev server. You'll know that it's hooked correctly - if data gets dumped to the log when tgui windows are opened. + and wait until the world has been properly loaded and you are no longer + in the lobby. Start tgui dev server. You'll know that it's hooked correctly + if data gets dumped to the log when tgui windows are opened. - `bin/tgui --dev --reload` - reload byond cache once. - `bin/tgui --dev --debug` - run server with debug logging enabled. - `bin/tgui --dev --no-hot` - disable hot module replacement (helps when -doing development on IE8). + doing development on IE8). - `bin/tgui --lint` - show problems with the code. - `bin/tgui --lint --fix` - auto-fix problems with the code. - `bin/tgui --analyze` - run a bundle analyzer. - `bin/tgui --clean` - clean up project repo. - `bin/tgui [webpack options]` - build the project with custom webpack -options. + options. **For everyone else:** @@ -138,7 +138,7 @@ Press `Ctrl+Alt+=` to open the KitchenSink interface. This interface is a playground to test various tgui components. **Layout Debugger.** -Press `Ctrl+Alt+-` to toggle the *layout debugger*. It will show outlines of +Press `Ctrl+Alt+-` 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. @@ -149,30 +149,30 @@ together, and can reveal certain layout bugs which are not normally visible. - `/packages/tgui/index.js` - Application entry point. - `/packages/tgui/components` - Basic UI building blocks. - `/packages/tgui/interfaces` - Actual in-game interfaces. -Interface takes data via the `state` prop and outputs an html-like stucture, -which you can build using existing UI components. + Interface takes data via the `state` prop and outputs an html-like stucture, + which you can build using existing UI components. - `/packages/tgui/layouts` - Root level UI components, that affect the final -look and feel of the browser window. They usually hold various window -elements, like the titlebar and resize handlers, and control the UI theme. + look and feel of the browser window. They usually hold various window + elements, like the titlebar and resize handlers, and control the UI theme. - `/packages/tgui/routes.js` - This is where tgui decides which interface to -pull and render. + pull and render. - `/packages/tgui/layout.js` - A root-level component, holding the -window elements, like the titlebar, buttons, resize handlers. Calls -`routes.js` to decide which component to render. + window elements, like the titlebar, buttons, resize handlers. Calls + `routes.js` to decide which component to render. - `/packages/tgui/styles/main.scss` - CSS entry point. - `/packages/tgui/styles/functions.scss` - Useful SASS functions. -Stuff like `lighten`, `darken`, `luminance` are defined here. + Stuff like `lighten`, `darken`, `luminance` are defined here. - `/packages/tgui/styles/atomic` - Atomic CSS classes. -These are very simple, tiny, reusable CSS classes which you can use and -combine to change appearance of your elements. Keep them small. + These are very simple, tiny, reusable CSS classes which you can use and + combine to change appearance of your elements. Keep them small. - `/packages/tgui/styles/components` - CSS classes which are used -in UI components. These stylesheets closely follow the -[BEM](https://en.bem.info/methodology/) methodology. + in UI components. These stylesheets closely follow the + [BEM](https://en.bem.info/methodology/) methodology. - `/packages/tgui/styles/interfaces` - Custom stylesheets for your interfaces. -Add stylesheets here if you really need a fine control over your UI styles. + Add stylesheets here if you really need a fine control over your UI styles. - `/packages/tgui/styles/layouts` - Layout-related styles. - `/packages/tgui/styles/themes` - Contains all the various themes you can -use in tgui. Each theme must be registered in `webpack.config.js` file. + use in tgui. Each theme must be registered in `webpack.config.js` file. ## Component Reference @@ -180,7 +180,7 @@ See: [Component Reference](docs/component-reference.md). ## License -All code is licensed with the parent license of *tgstation*, **AGPL-3.0**. +All code is licensed with the parent license of _tgstation_, **AGPL-3.0**. See the main [README](../README.md) for more details. diff --git a/tgui/babel.config.js b/tgui/babel.config.js index 09fc48d03bd8..d83569ca2fe2 100644 --- a/tgui/babel.config.js +++ b/tgui/babel.config.js @@ -4,24 +4,30 @@ * @license MIT */ -const createBabelConfig = options => { +const createBabelConfig = (options) => { const { presets = [], plugins = [], removeConsole } = options; return { presets: [ - [require.resolve('@babel/preset-env'), { - modules: 'commonjs', - useBuiltIns: 'entry', - corejs: '3', - spec: false, - loose: true, - targets: [], - }], + [ + require.resolve('@babel/preset-env'), + { + modules: 'commonjs', + useBuiltIns: 'entry', + corejs: '3', + spec: false, + loose: true, + targets: [], + }, + ], ...presets, ].filter(Boolean), plugins: [ - [require.resolve('@babel/plugin-proposal-class-properties'), { - loose: true, - }], + [ + require.resolve('@babel/plugin-proposal-class-properties'), + { + loose: true, + }, + ], require.resolve('@babel/plugin-transform-jscript'), require.resolve('babel-plugin-inferno'), removeConsole && require.resolve('babel-plugin-transform-remove-console'), @@ -31,7 +37,7 @@ const createBabelConfig = options => { }; }; -module.exports = api => { +module.exports = (api) => { api.cache(true); const mode = process.env.NODE_ENV; return createBabelConfig({ mode }); diff --git a/tgui/bin/tgui-formatting.bat b/tgui/bin/tgui-formatting.bat new file mode 100644 index 000000000000..1fe87c1bf4c8 --- /dev/null +++ b/tgui/bin/tgui-formatting.bat @@ -0,0 +1,5 @@ +@echo off +cd "%~dp0\.." +call yarn install +call yarn prettier --write +timeout /t 9 diff --git a/tgui/docs/component-reference.md b/tgui/docs/component-reference.md index b853fee4de37..c892cb628be9 100644 --- a/tgui/docs/component-reference.md +++ b/tgui/docs/component-reference.md @@ -65,16 +65,16 @@ 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. - [Button](#button) component does not support the lowercase `onclick` event. -Use the camel case `onClick` instead. + Use the camel case `onClick` instead. ## `tgui/components` @@ -86,13 +86,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` @@ -128,9 +128,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 => @@ -473,8 +503,8 @@ const ParametersSection = (props, context) => { const status = malfunctioning ? 'Malfunctioning' : active - ? 'Active' - : 'Inactive'; + ? 'Active' + : 'Inactive'; return (
@@ -486,7 +516,8 @@ const ParametersSection = (props, context) => { content={active ? 'Deactivate' : 'Activate'} onClick={() => act('activate')} /> - }> + } + > {status} { content={locked ? 'Unlock' : 'Lock'} onClick={() => act('lock')} /> - }> + } + > {locked ? 'Locked' : 'Unlocked'} @@ -577,7 +609,7 @@ const InfoSection = (props, context) => { return (
- + {(info_modules.length !== 0 && info_modules.map((module) => { const Module = ID2MODULE[module.id]; @@ -596,7 +628,11 @@ const InfoSection = (props, context) => { const ModuleSection = (props, context) => { const { act, data } = useBackend(context); const { complexity_max, modules } = data; - const [configureState, setConfigureState] = useLocalState(context, 'module_configuration', null); + const [configureState, setConfigureState] = useLocalState( + context, + 'module_configuration', + null + ); return (
@@ -730,7 +766,7 @@ export const MODsuitContent = (props, context) => { return (
{(!!interface_break && ) || ( - + @@ -753,9 +789,7 @@ export const MODsuit = (props, context) => { const { act, data } = useBackend(context); const { ui_theme, interface_break } = data; return ( - + diff --git a/tgui/packages/tgui/interfaces/MedicalRecords.js b/tgui/packages/tgui/interfaces/MedicalRecords.js index 81c68968c7cb..34bc43ec6af5 100644 --- a/tgui/packages/tgui/interfaces/MedicalRecords.js +++ b/tgui/packages/tgui/interfaces/MedicalRecords.js @@ -10,7 +10,7 @@ import { Section, Tabs, Flex, - Table + Table, } from '../components'; import { ComplexModal, @@ -233,7 +233,8 @@ const MedicalRecordsView = (_properties, context) => { ml="0.5rem" onClick={() => act('print_record')} /> - }> + } + >
{ content="Delete Medical Record" onClick={() => act('del_med_record')} /> - }> + } + >
@@ -345,7 +347,8 @@ const MedicalRecordsViewMedical = (_properties, context) => { content="Add Entry" onClick={() => modalOpen(context, 'add_comment')} /> - }> + } + > {medical.comments.length === 0 ? ( No comments found. ) : ( @@ -375,62 +378,58 @@ const MedicalRecordsViruses = (_properties, context) => { const { virus } = data; const [searchText, setSearchText] = useLocalState(context, 'searchText', ''); const [sortId2, _setSortId2] = useLocalState(context, 'sortId2', 'name'); - const [sortOrder2, _setSortOrder2] = useLocalState(context, 'sortOrder2', true); - return( - - - - setSearchText(value)} - /> - - -
- - - Name - Max Stages - Severity - - {virus - .filter( - createSearch(searchText, (vir) => { - return ( - vir.name + - '|' + - vir.max_stages + - '|' + - vir.severity - ); + const [sortOrder2, _setSortOrder2] = useLocalState( + context, + 'sortOrder2', + true + ); + return ( + + + + setSearchText(value)} + /> + + +
+
+ + Name + Max Stages + Severity + + {virus + .filter( + createSearch(searchText, (vir) => { + return vir.name + '|' + vir.max_stages + '|' + vir.severity; + }) + ) + .sort((a, b) => { + const i = sortOrder2 ? 1 : -1; + return a[sortId2].localeCompare(b[sortId2]) * i; }) - ) - .sort((a, b) => { - const i = sortOrder2 ? 1 : -1; - return a[sortId2].localeCompare(b[sortId2]) * i; - }) - .map((vir) => ( - act('vir', { vir: vir.D })} - > - - {vir.name} - - {vir.max_stages} - - {vir.severity} - - - ))} -
-
- - ) + .map((vir) => ( + act('vir', { vir: vir.D })} + > + + {vir.name} + + {vir.max_stages} + + {vir.severity} + + + ))} + +
+ + ); }; const MedicalRecordsMedbots = (_properties, context) => { @@ -439,7 +438,7 @@ const MedicalRecordsMedbots = (_properties, context) => { if (medbots.length === 0) { return There are no Medibots.; } - return( + return (
@@ -449,31 +448,33 @@ const MedicalRecordsMedbots = (_properties, context) => { StatusChemicals - {medbots - .map((medbot) => ( - - - {medbot.name} - - {medbot.area || 'Unknown'} ({medbot.x}, {medbot.y}) - {medbot.on - ? (Online) - : (Offline)} - - - {medbot.use_beaker - ? 'Reservoir: ' + - medbot.total_volume + - '/' + - medbot.maximum_volume - : 'Using internal synthesizer'} - - + {medbots.map((medbot) => ( + + + {medbot.name} + + + {medbot.area || 'Unknown'} ({medbot.x}, {medbot.y}) + + + {medbot.on ? ( + Online + ) : ( + Offline + )} + + + {medbot.use_beaker + ? 'Reservoir: ' + + medbot.total_volume + + '/' + + medbot.maximum_volume + : 'Using internal synthesizer'} + + ))}
@@ -510,7 +511,11 @@ const SortButton = (properties, context) => { const SortButton2 = (properties, context) => { const [sortId2, setSortId2] = useLocalState(context, 'sortId2', 'name'); - const [sortOrder2, setSortOrder2] = useLocalState(context, 'sortOrder2', true); + const [sortOrder2, setSortOrder2] = useLocalState( + context, + 'sortOrder2', + true + ); const { id, children } = properties; return ( @@ -542,34 +547,38 @@ const MedicalRecordsNavigation = (_properties, context) => { {act('screen', { screen: 2 })}} + onClick={() => { + act('screen', { screen: 2 }); + }} > - + List Records {act('screen', { screen: 5 })}} + onClick={() => { + act('screen', { screen: 5 }); + }} > - + Virus Database act('screen', { screen: 6 })} > - + Medibot Tracking {screen === 3 && ( - + Record Maintenance )} {screen === 4 && general && !general.empty && ( - + Record: {general.fields[0].value} )} diff --git a/tgui/packages/tgui/interfaces/MerchVendor.js b/tgui/packages/tgui/interfaces/MerchVendor.js index 36b100028bd4..2f79f79f93f0 100644 --- a/tgui/packages/tgui/interfaces/MerchVendor.js +++ b/tgui/packages/tgui/interfaces/MerchVendor.js @@ -6,9 +6,7 @@ import { Window } from '../layouts'; const VendingRow = (props, context) => { const { act, data } = useBackend(context); const { product, productImage, productCategory } = props; - const { - user_money, - } = data; + const { user_money } = data; return ( @@ -30,9 +28,10 @@ const VendingRow = (props, context) => { icon="shopping-cart" content={product.price} textAlign="left" - onClick={() => act('purchase', { + onClick={() => + act('purchase', { 'name': product.name, - 'category' : productCategory, + 'category': productCategory, }) } /> @@ -44,12 +43,9 @@ const VendingRow = (props, context) => { const MerchProducts = (props, context) => { const { data } = useBackend(context); const [tabIndex] = useLocalState(context, 'tabIndex', 1); - const { - products, - imagelist, - } = data; + const { products, imagelist } = data; - const categories = ["apparel", "toy", "decoration"]; + const categories = ['apparel', 'toy', 'decoration']; return ( @@ -67,28 +63,27 @@ const MerchProducts = (props, context) => { export const MerchVendor = (props, context) => { const { act, data } = useBackend(context); - const { - user_cash, - inserted_cash, - } = data; + const { user_cash, inserted_cash } = data; return (
- Doing your job and not getting any recognition at work? Well, welcome to the - merch shop! Here, you can buy cool things in exchange for money you earn when you have - completed your Job Objectives. + Doing your job and not getting any recognition at work? Well, + welcome to the merch shop! Here, you can buy cool things in exchange + for money you earn when you have completed your Job Objectives. - {user_cash !== null && + {user_cash !== null && ( Your balance is {user_cash ? user_cash : 0} credits. - } + )} - There is {inserted_cash} credits inserted. + + There is {inserted_cash} credits inserted. +
- - + +
@@ -114,20 +108,14 @@ export const MerchVendor = (props, context) => { const MerchVendorNavigation = (properties, context) => { const { data } = useBackend(context); const [tabIndex, setTabIndex] = useLocalState(context, 'tabIndex', 1); - const { - login_state, - } = data + const { login_state } = data; return ( - setTabIndex(1)}> + setTabIndex(1)}> Toys - setTabIndex(2)}> + setTabIndex(2)}> Decorations diff --git a/tgui/packages/tgui/interfaces/NTRecruiter.js b/tgui/packages/tgui/interfaces/NTRecruiter.js index 975fd6f61fd9..bfd20fb64040 100644 --- a/tgui/packages/tgui/interfaces/NTRecruiter.js +++ b/tgui/packages/tgui/interfaces/NTRecruiter.js @@ -9,119 +9,131 @@ export const NTRecruiter = (props, context) => { gamestatus, cand_name, cand_gender, - cand_age, - cand_species, - cand_planet, - cand_job, - cand_records, - cand_curriculum, + cand_age, + cand_species, + cand_planet, + cand_job, + cand_records, + cand_curriculum, reason, } = data; if (gamestatus === 0) { - return ( - - -
- - - Nanotrasen Recruiter Simulator - - - Work as the Nanotrasen recruiter and avoid hiring incompetent employees! - - -
- - - )} - if (gamestatus === 1) { - return ( - - -
+ +
+ + + Nanotrasen Recruiter Simulator + + + Work as the Nanotrasen recruiter and avoid hiring incompetent + employees! + + +
- - - )} - if (gamestatus === 2) { +
+ + + ); + } + if (gamestatus === 1) { + return ( + + +
act('back_to_menu')} + /> + } + > + + + To win this game you must hire/dismiss FIVE candidates, + one wrongly made choice leads to a game over. + + + Make the right choice by truly putting yourself into the skin of + a recruiter working for Nanotrasen! + + + Unique characters may appear, pay attention to them! + + + Make sure to pay attention to details like age, planet names, + the requested job and even the species of the candidate! + + + Not every employment record is good, remember to make your + choice based on the company morals! + + + The planet of origin has no restriction on the species of the + candidate, don't think too much when you see humans that + came from Boron! + + + Pay attention to typos and missing words, these do + make for bad applications! + + + Remember, you are recruiting people to work at one of the many + NT stations, so no hiring for jobs that they{' '} + don't offer! + + + Keep your eyes open for incompatible naming schemes, no + company wants a Vox named Joe! + + +
+ + + ); + } + if (gamestatus === 2) { return ( - - -
- - Candidate Number #{cand_curriculum} - -
+ + +
+ + Candidate Number #{cand_curriculum} + +
{cand_name} @@ -145,59 +157,68 @@ export const NTRecruiter = (props, context) => { {cand_records} -
-
-
- - - )} - if (gamestatus === 3) { - return ( - - -
- - {"Game Over"} - - - {reason} - - - FINAL SCORE: {cand_curriculum-1}/5 - - +
+
- - - )}} +
+ + + ); + } + if (gamestatus === 3) { + return ( + + +
+ + {'Game Over'} + + + {reason} + + + FINAL SCORE: {cand_curriculum - 1}/5 + + +
+ + + ); + } +}; diff --git a/tgui/packages/tgui/interfaces/Newscaster.js b/tgui/packages/tgui/interfaces/Newscaster.js index 049bea1b9659..52a438887fa3 100644 --- a/tgui/packages/tgui/interfaces/Newscaster.js +++ b/tgui/packages/tgui/interfaces/Newscaster.js @@ -449,7 +449,7 @@ const NewscasterJobs = (properties, context) => { const Story = (properties, context) => { const { act, data } = useBackend(context); const { story, wanted = false } = properties; - const {is_admin} = data; + const { is_admin } = data; const [fullStories, setFullStories] = useLocalState( context, 'fullStories', @@ -492,10 +492,7 @@ const Story = (properties, context) => { {story.author} |  {!!is_admin && ( - - ckey: {story.author_ckey}{' '} - |  - + ckey: {story.author_ckey} |  )} {!wanted && ( diff --git a/tgui/packages/tgui/interfaces/Orbit.js b/tgui/packages/tgui/interfaces/Orbit.js index 56f71b5f2a98..148a06ac8707 100644 --- a/tgui/packages/tgui/interfaces/Orbit.js +++ b/tgui/packages/tgui/interfaces/Orbit.js @@ -89,7 +89,17 @@ const OrbitedButton = (props, context) => { export const Orbit = (props, context) => { const { act, data } = useBackend(context); - const { alive, antagonists, highlights, response_teams, auto_observe, dead, ghosts, misc, npcs } = data; + const { + alive, + antagonists, + highlights, + response_teams, + auto_observe, + dead, + ghosts, + misc, + npcs, + } = data; const [searchText, setSearchText] = useLocalState(context, 'searchText', ''); @@ -162,7 +172,11 @@ export const Orbit = (props, context) => { {antagonists.length > 0 && (
{sortedAntagonists.map(([name, antags]) => ( -
+
{antags .filter(searchFor(searchText)) .sort(compareNumberedText) @@ -180,7 +194,7 @@ export const Orbit = (props, context) => { searchText={searchText} color={'teal'} /> - )} + )} { }; /* -********* SHEETS BOX PROPERTIES ********* -*/ + ********* SHEETS BOX PROPERTIES ********* + */ const SheetLine = (properties, context) => { const { act } = useBackend(context); @@ -224,52 +224,48 @@ const SheetLine = (properties, context) => { src={'sheet-' + cleanId + '.png'} verticalAlign="middle" ml="0rem" - /> - {ore.name} - - = 1 ? 'good' : 'gray'} - bold={ore.amount >= 1} - align="center" - > - {ore.amount.toLocaleString('en-US')} - - - {ore.value} - - - - act(ore.value ? 'sheet' : 'alloy', { - 'id': ore.id, - 'amount': value, - }) - } - /> - + /> + {ore.name} + + = 1 ? 'good' : 'gray'} + bold={ore.amount >= 1} + align="center" + > + {ore.amount.toLocaleString('en-US')} + + + {ore.value} + + + + act(ore.value ? 'sheet' : 'alloy', { + 'id': ore.id, + 'amount': value, + }) + } + /> + ); }; /* -********* ALLOYS BOX PROPERTIES ********* -*/ + ********* ALLOYS BOX PROPERTIES ********* + */ const AlloyLine = (properties, context) => { const { act } = useBackend(context); @@ -281,55 +277,51 @@ const AlloyLine = (properties, context) => { - - - {ore.name} - - = 1 ? 'good' : 'gray'} - align="center" - > - {ore.description} - - = 1 ? 'good' : 'gray'} - bold={ore.amount >= 1} - align="center" - > - {ore.amount.toLocaleString('en-US')} - - - - act(ore.value ? 'sheet' : 'alloy', { - 'id': ore.id, - 'amount': value, - }) - } - /> - - + /> + + + {ore.name} + + = 1 ? 'good' : 'gray'} + align="center" + > + {ore.description} + + = 1 ? 'good' : 'gray'} + bold={ore.amount >= 1} + align="center" + > + {ore.amount.toLocaleString('en-US')} + + + + act(ore.value ? 'sheet' : 'alloy', { + 'id': ore.id, + 'amount': value, + }) + } + /> + + ); }; diff --git a/tgui/packages/tgui/interfaces/ParticleAccelerator.js b/tgui/packages/tgui/interfaces/ParticleAccelerator.js index f166e3cce19a..44205f67d4fe 100644 --- a/tgui/packages/tgui/interfaces/ParticleAccelerator.js +++ b/tgui/packages/tgui/interfaces/ParticleAccelerator.js @@ -4,28 +4,24 @@ import { Window } from '../layouts'; export const ParticleAccelerator = (props, context) => { const { act, data } = useBackend(context); - const { - assembled, - power, - strength, - max_strength - } = data; + const { assembled, power, strength, max_strength } = data; return ( -
act('scan')} /> - )}> + icon={'sync'} + content={'Connect'} + onClick={() => act('scan')} + /> + } + > - - {assembled - ? "Operational" - : "Error: Verify Configuration"} + + {assembled ? 'Operational' : 'Error: Verify Configuration'} @@ -34,20 +30,23 @@ export const ParticleAccelerator = (props, context) => { content={power ? 'On' : 'Off'} selected={power} disabled={!assembled} - onClick={() => act('power')} /> + onClick={() => act('power')} + />
diff --git a/tgui/packages/tgui/interfaces/PdaPainter.js b/tgui/packages/tgui/interfaces/PdaPainter.js index 3096f181bb6d..90cab0a152fc 100644 --- a/tgui/packages/tgui/interfaces/PdaPainter.js +++ b/tgui/packages/tgui/interfaces/PdaPainter.js @@ -1,11 +1,5 @@ import { useBackend } from '../backend'; -import { - Button, - Flex, - Icon, - Section, - Table, -} from '../components'; +import { Button, Flex, Icon, Section, Table } from '../components'; import { Window } from '../layouts'; export const PdaPainter = (props, context) => { @@ -13,16 +7,10 @@ export const PdaPainter = (props, context) => { const { has_pda } = data; return ( - - {!has_pda ? ( - - ) : ( - - )} - + {!has_pda ? : } ); -} +}; const PdaInsert = (props, context) => { const { act } = useBackend(context); @@ -35,13 +23,9 @@ const PdaInsert = (props, context) => { textAlign="center" align="center" color="silver" - > - -
+ > + +
- ) -} + ); +}; const PdaMenu = (props, context) => { const { act, data } = useBackend(context); const { pda_colors } = data; return ( - + - +
-
+
{Object.keys(pda_colors).map((sprite_name) => ( { act('choose_pda', { selectedPda: sprite_name }) } > - - - + + + {sprite_name} ))} @@ -92,33 +77,33 @@ const PdaMenu = (props, context) => { - ) -} + ); +}; const PdaImage = (props, context) => { const { act, data } = useBackend(context); const { current_appearance, preview_appearance } = data; return ( -
+
-
+
{ width: '160px', margin: '0px', 'margin-left': '0px', - '-ms-interpolation-mode': 'nearest-neighbor' + '-ms-interpolation-mode': 'nearest-neighbor', }} - /> + />
- ) -} + ); +}; diff --git a/tgui/packages/tgui/interfaces/PrisonerImplantManager.js b/tgui/packages/tgui/interfaces/PrisonerImplantManager.js index 2d995dccb9a6..6a669ad3c608 100644 --- a/tgui/packages/tgui/interfaces/PrisonerImplantManager.js +++ b/tgui/packages/tgui/interfaces/PrisonerImplantManager.js @@ -8,12 +8,7 @@ import { Window } from '../layouts'; export const PrisonerImplantManager = (props, context) => { const { act, data } = useBackend(context); - const { - loginState, - prisonerInfo, - chemicalInfo, - trackingInfo, - } = data; + const { loginState, prisonerInfo, chemicalInfo, trackingInfo } = data; let body; if (!loginState.logged_in) { @@ -26,7 +21,7 @@ export const PrisonerImplantManager = (props, context) => { ); } - let injectionAmount = [1, 5, 10] // used for auto generating chemical implant inject buttons + let injectionAmount = [1, 5, 10]; // used for auto generating chemical implant inject buttons return ( @@ -37,89 +32,110 @@ export const PrisonerImplantManager = (props, context) => {
- {trackingInfo - .map(implant => ( - <> - Subject: {implant.subject} - - {implant.location} - {implant.health} - -
- {chemicalInfo - .map(implant => ( - <> - Subject: {implant.name} - - - {implant.volume} - - {injectionAmount.map(amount => ( -
diff --git a/tgui/packages/tgui/interfaces/PrisonerShuttleConsole.js b/tgui/packages/tgui/interfaces/PrisonerShuttleConsole.js index 99d8e497aa87..21521e8403fb 100644 --- a/tgui/packages/tgui/interfaces/PrisonerShuttleConsole.js +++ b/tgui/packages/tgui/interfaces/PrisonerShuttleConsole.js @@ -1,49 +1,37 @@ import { useBackend } from '../backend'; -import { - Button, - ProgressBar, - LabeledList, - Section, -} from '../components'; +import { Button, ProgressBar, LabeledList, Section } from '../components'; import { Window } from '../layouts'; export const PrisonerShuttleConsole = (props, context) => { const { act, data } = useBackend(context); - const { - can_go_home, - emagged, - id_inserted, - id_name, - id_points, - id_goal, - } = data; + const { can_go_home, emagged, id_inserted, id_name, id_points, id_goal } = + data; const bad_progress = emagged ? 0 : 1; let completionStatus = can_go_home ? 'Completed!' : 'Insufficient'; if (emagged) { - completionStatus = 'ERR0R' + completionStatus = 'ERR0R'; } - let statusBlock = 'No ID inserted' + let statusBlock = 'No ID inserted'; if (id_inserted) { statusBlock = ( - {id_points + ' / ' + id_goal + ' ' + completionStatus} - ) - } - else if (emagged) { - statusBlock = 'ERR0R COMPLETED?!@' + value={id_points / id_goal} + ranges={{ + good: [bad_progress, Infinity], + bad: [-Infinity, bad_progress], + }} + > + {id_points + ' / ' + id_goal + ' ' + completionStatus} + + ); + } else if (emagged) { + statusBlock = 'ERR0R COMPLETED?!@'; } return ( - - {statusBlock} - + {statusBlock}
); }; diff --git a/tgui/packages/tgui/interfaces/RemoteSignaler.js b/tgui/packages/tgui/interfaces/RemoteSignaler.js index 79c7c8529918..50c4ecbdaba5 100644 --- a/tgui/packages/tgui/interfaces/RemoteSignaler.js +++ b/tgui/packages/tgui/interfaces/RemoteSignaler.js @@ -28,4 +28,4 @@ export const RemoteSignaler = (props, context) => { ); -} +}; diff --git a/tgui/packages/tgui/interfaces/SeedExtractor.js b/tgui/packages/tgui/interfaces/SeedExtractor.js index ecb0c5aa65eb..adfb56a75227 100644 --- a/tgui/packages/tgui/interfaces/SeedExtractor.js +++ b/tgui/packages/tgui/interfaces/SeedExtractor.js @@ -4,10 +4,7 @@ import { Window } from '../layouts'; export const SeedExtractor = (props, context) => { const { act, data } = useBackend(context); - const { - stored_seeds, - vend_amount, - } = data; + const { stored_seeds, vend_amount } = data; return ( @@ -16,23 +13,20 @@ export const SeedExtractor = (props, context) => {
Set Amount to be Vended:  - act('set_vend_amount', { - vend_amount: value, - }) - } - /> + animated + value={vend_amount} + width="40px" + minValue={1} + maxValue={25} + stepPixelSize={3} + onDrag={(e, value) => + act('set_vend_amount', { + vend_amount: value, + }) + } + />
- {stored_seeds?.length - ? - : "No Seeds" - } + {stored_seeds?.length ? : 'No Seeds'} @@ -41,9 +35,7 @@ export const SeedExtractor = (props, context) => { const SeedsContent = (props, context) => { const { act, data } = useBackend(context); - const { - stored_seeds, - } = data; + const { stored_seeds } = data; return (
@@ -57,7 +49,7 @@ const SeedsContent = (props, context) => { PotencyStock - {stored_seeds.map((seed, index)=> ( + {stored_seeds.map((seed, index) => ( { }} /> {seed.name} - {seed.variant ? " (" + seed.variant + ")" : ""} + {seed.variant ? ' (' + seed.variant + ')' : ''} {seed.lifespan} {seed.endurance} @@ -82,10 +74,14 @@ const SeedsContent = (props, context) => {
diff --git a/tgui/packages/tgui/interfaces/SpecMenu.js b/tgui/packages/tgui/interfaces/SpecMenu.js index aa2316ae119b..b48133320068 100644 --- a/tgui/packages/tgui/interfaces/SpecMenu.js +++ b/tgui/packages/tgui/interfaces/SpecMenu.js @@ -31,7 +31,8 @@ const HemoMenu = (props, context) => {

Vampiric claws: Unlocked at 150 blood, allows you to summon a - robust pair of claws that attack rapidly, drain a targets blood, and heal you. + robust pair of claws that attack rapidly, drain a targets blood, and + heal you.

Blood Barrier: Unlocked at 250 blood, allows you to select two @@ -82,12 +83,12 @@ const UmbrMenu = (props, context) => { While active, burn damage is more effective against you.

- Shadow anchor: Unlocked at 250 blood, casting it will create - an anchor at the cast location after a short delay. - If you then cast the ability again, you are teleported back to the anchor. - If you do not cast again within 2 minutes, you will do a fake recall, - causing a clone to appear at the anchor and making yourself invisible. - It will not teleport you between Z levels. + Shadow anchor: Unlocked at 250 blood, casting it will create an + anchor at the cast location after a short delay. If you then cast the + ability again, you are teleported back to the anchor. If you do not + cast again within 2 minutes, you will do a fake recall, causing a + clone to appear at the anchor and making yourself invisible. It will + not teleport you between Z levels.

Shadow snare: Unlocked at 250 blood, allows you to summon a @@ -102,8 +103,8 @@ const UmbrMenu = (props, context) => { Extinguish: Unlocked at 600 blood, allows you to snuff out nearby electronic light sources and glowshrooms.

- Shadow boxing: Unlocked at 800 blood, sends out shadow - clones towards a target, damaging them while you remain in range. + Shadow boxing: Unlocked at 800 blood, sends out shadow clones + towards a target, damaging them while you remain in range.

Full power @@ -136,8 +137,8 @@ const GarMenu = (props, context) => { active you cannot fire guns.

- Seismic stomp: Unlocked at 250 blood, allows you to stomp the ground - to send out a shockwave, knocking people back. + Seismic stomp: Unlocked at 250 blood, allows you to stomp the + ground to send out a shockwave, knocking people back.

Blood rush: Unlocked at 250 blood, gives you a short speed @@ -153,20 +154,21 @@ const GarMenu = (props, context) => { In addition, you cannot be pushed or pulled while it is active.

- Demonic grasp: Unlocked at 800 blood, allows you to send out a - demonic hand to snare someone. If you are on disarm/grab intent you will - push/pull the target, respectively. + Demonic grasp: Unlocked at 800 blood, allows you to send out a + demonic hand to snare someone. If you are on disarm/grab intent you + will push/pull the target, respectively.

- Charge: Unlocked at 800 blood, you gain the ability to charge at a target. Destroying - and knocking back pretty much anything you collide with. + Charge: Unlocked at 800 blood, you gain the ability to charge + at a target. Destroying and knocking back pretty much anything you + collide with.

Full Power Desecrated Duel: Leap towards a visible enemy, creating an - arena upon landing, infusing you with increased regeneration, and granting - you resistance to internal damages. + arena upon landing, infusing you with increased regeneration, and + granting you resistance to internal damages.

@@ -196,8 +198,8 @@ const DantMenu = (props, context) => { your thralls, your thralls can talk back in the same way.

- Subspace swap: Unlocked at 250 blood, allows you to swap positions - with a target. + Subspace swap: Unlocked at 250 blood, allows you to swap + positions with a target.

Pacify: Unlocked at 250 blood, allows you to pacify a target, @@ -208,13 +210,14 @@ const DantMenu = (props, context) => { out an illusion to fool everyone nearby.

- Rally thralls: Unlocked at 600 blood, removes all incapacitating effects from nearby thralls. + Rally thralls: Unlocked at 600 blood, removes all + incapacitating effects from nearby thralls.

- Blood bond: Unlocked at 800 blood, when cast, all nearby thralls - become linked to you. If anyone in the network takes damage, it is shared - equally between everyone in the network. If a thrall goes out of range, - they will be removed from the network. + Blood bond: Unlocked at 800 blood, when cast, all nearby + thralls become linked to you. If anyone in the network takes damage, + it is shared equally between everyone in the network. If a thrall goes + out of range, they will be removed from the network.

Full Power diff --git a/tgui/packages/tgui/interfaces/TempGun.js b/tgui/packages/tgui/interfaces/TempGun.js index b8358896811e..a530830f4838 100644 --- a/tgui/packages/tgui/interfaces/TempGun.js +++ b/tgui/packages/tgui/interfaces/TempGun.js @@ -1,6 +1,12 @@ import { toFixed } from 'common/math'; import { useBackend } from '../backend'; -import { LabeledList, NumberInput, Section, AnimatedNumber, Box } from '../components'; +import { + LabeledList, + NumberInput, + Section, + AnimatedNumber, + Box, +} from '../components'; import { Window } from '../layouts'; import { round } from 'common/math'; @@ -28,17 +34,21 @@ export const TempGun = (props, context) => { target_temperature: value, }) } - />°C + /> + °C - 500-273.15}> - °C + 500 - 273.15} + > + + °C - {Temp2Cost(temperature)} + {Temp2Cost(temperature)} @@ -46,7 +56,7 @@ export const TempGun = (props, context) => { ); -} +}; const Temp2Color = (temp) => { if (temp <= -100) { @@ -66,32 +76,32 @@ const Temp2Color = (temp) => { // These temps are the same as the ones in switch(temperature) for the gun, just - 273.15 for conversion between kelvin and celcius const Temp2Cost = (temp) => { - if (temp <= 100 - 273.15){ + if (temp <= 100 - 273.15) { return 'High'; } - if (temp <= 250 - 273.15){ + if (temp <= 250 - 273.15) { return 'Medium'; } - if (temp <= 300 - 273.15){ + if (temp <= 300 - 273.15) { return 'Low'; } - if (temp <= 400 - 273.15){ + if (temp <= 400 - 273.15) { return 'Medium'; } return 'High'; -} +}; const Temp2CostColor = (temp) => { - if (temp <= 100 - 273.15){ + if (temp <= 100 - 273.15) { return 'red'; } - if (temp <= 250 - 273.15){ + if (temp <= 250 - 273.15) { return 'orange'; } - if (temp <= 300 - 273.15){ + if (temp <= 300 - 273.15) { return 'green'; } - if (temp <= 400 - 273.15){ + if (temp <= 400 - 273.15) { return 'orange'; } return 'red'; diff --git a/tgui/packages/tgui/interfaces/TurbineComputer.js b/tgui/packages/tgui/interfaces/TurbineComputer.js index 26e85950d018..d010709fc96f 100644 --- a/tgui/packages/tgui/interfaces/TurbineComputer.js +++ b/tgui/packages/tgui/interfaces/TurbineComputer.js @@ -5,19 +5,17 @@ import { toFixed } from 'common/math'; export const TurbineComputer = (props, context) => { const { act, data } = useBackend(context); - const { - compressor, - compressor_broken, - turbine, - turbine_broken, - online - } = data; - const operational = Boolean(compressor && !compressor_broken && turbine && !turbine_broken); + const { compressor, compressor_broken, turbine, turbine_broken, online } = + data; + const operational = Boolean( + compressor && !compressor_broken && turbine && !turbine_broken + ); return ( -

@@ -46,28 +42,21 @@ export const TurbineComputer = (props, context) => { // Element Tree for if the turbine is broken const TurbineBroken = (props, context) => { const { data } = useBackend(context); - const { - compressor, - compressor_broken, - turbine, - turbine_broken, - online - } = data; + const { compressor, compressor_broken, turbine, turbine_broken, online } = + data; return ( - {compressor_broken - ? compressor ? 'Offline' : 'Missing' - : 'Online'} + color={!compressor || compressor_broken ? 'bad' : 'good'} + > + {compressor_broken ? (compressor ? 'Offline' : 'Missing') : 'Online'} - {turbine_broken - ? turbine ? 'Offline' : 'Missing' - : 'Online'} + color={!turbine || turbine_broken ? 'bad' : 'good'} + > + {turbine_broken ? (turbine ? 'Offline' : 'Missing') : 'Online'} ); @@ -76,23 +65,12 @@ const TurbineBroken = (props, context) => { // Element Tree for if the turbine is working const TurbineWorking = (props, context) => { const { data } = useBackend(context); - const { - rpm, - temperature, - power, - bearing_heat, - } = data; + const { rpm, temperature, power, bearing_heat } = data; return ( - - {rpm} RPM - - - {temperature} K - - - {power} W - + {rpm} RPM + {temperature} K + {power} W { good: [-Infinity, 60], average: [60, 90], bad: [90, Infinity], - }}> + }} + > {toFixed(bearing_heat) + '%'} - + ); diff --git a/tgui/packages/tgui/interfaces/Uplink.js b/tgui/packages/tgui/interfaces/Uplink.js index be8f67eba57b..24a501e17008 100644 --- a/tgui/packages/tgui/interfaces/Uplink.js +++ b/tgui/packages/tgui/interfaces/Uplink.js @@ -23,7 +23,7 @@ export const Uplink = (props, context) => { const { act, data } = useBackend(context); const [tabIndex, setTabIndex] = useLocalState(context, 'tabIndex', 0); - const [searchText, setSearchText] = useLocalState(context, "searchText", ""); + const [searchText, setSearchText] = useLocalState(context, 'searchText', ''); return ( @@ -34,9 +34,9 @@ export const Uplink = (props, context) => { key="PurchasePage" selected={tabIndex === 0} onClick={() => { - setTabIndex(0); - setSearchText(""); - }} + setTabIndex(0); + setSearchText(''); + }} icon="shopping-cart" > Purchase Equipment @@ -46,8 +46,8 @@ export const Uplink = (props, context) => { selected={tabIndex === 1} onClick={() => { setTabIndex(1); - setSearchText(""); - }} + setSearchText(''); + }} icon="user" > Exploitable Information @@ -77,30 +77,26 @@ const ItemsPage = (_properties, context) => { cats[0].items ); - const [searchText, setSearchText] = useLocalState(context, "searchText", ""); - const SelectEquipment = (cat, searchText = "") => { - const EquipmentSearch = createSearch(searchText, item => { - let is_hijack = item.hijack_only === 1 ? "|" + "hijack" : "" - return ( - item.name + - '|' + - item.desc + - '|' + - item.cost + "tc" + - is_hijack); + const [searchText, setSearchText] = useLocalState(context, 'searchText', ''); + const SelectEquipment = (cat, searchText = '') => { + const EquipmentSearch = createSearch(searchText, (item) => { + let is_hijack = item.hijack_only === 1 ? '|' + 'hijack' : ''; + return item.name + '|' + item.desc + '|' + item.cost + 'tc' + is_hijack; }); return flow([ - filter(item => item?.name), // Make sure it has a name + filter((item) => item?.name), // Make sure it has a name searchText && filter(EquipmentSearch), // Search for anything - sortBy(item => item?.name), // Sort by name + sortBy((item) => item?.name), // Sort by name ])(cat); }; const handleSearch = (value) => { - if(value === "") { + if (value === '') { return setUplinkItems(cats[0].items); } setSearchText(value); - setUplinkItems(SelectEquipment(cats.map(category => category.items).flat(), value)); + setUplinkItems( + SelectEquipment(cats.map((category) => category.items).flat(), value) + ); }; return ( @@ -136,11 +132,11 @@ const ItemsPage = (_properties, context) => { {cats.map((c) => ( { setUplinkItems(c.items); - setSearchText(""); - }} + setSearchText(''); + }} > {c.cat} diff --git a/tgui/packages/tgui/interfaces/Vending.js b/tgui/packages/tgui/interfaces/Vending.js index 535fb09b3c2d..fb0cee5b05f0 100644 --- a/tgui/packages/tgui/interfaces/Vending.js +++ b/tgui/packages/tgui/interfaces/Vending.js @@ -27,7 +27,7 @@ const VendingRow = (props, context) => { let buttonDisabled = !vend_ready || productStock === 0 || - (!free && (product.price > usermoney && product.price > inserted_cash)); + (!free && product.price > usermoney && product.price > inserted_cash); return ( @@ -100,25 +100,25 @@ export const Vending = (props, context) => { {!!chargesMoney && (
- {(user && ( + {user && ( Welcome, {user.name}, {user.job || 'Unemployed'}!
Your balance is {usermoney} credits.
- ))} + )} - There is {inserted_cash} credits of space cash inserted. -
-
)} {!!inserted_item_name && ( diff --git a/tgui/packages/tgui/interfaces/VotePanel.js b/tgui/packages/tgui/interfaces/VotePanel.js index 966adad78dc0..6ac3ae767f52 100644 --- a/tgui/packages/tgui/interfaces/VotePanel.js +++ b/tgui/packages/tgui/interfaces/VotePanel.js @@ -4,32 +4,27 @@ import { Window } from '../layouts'; export const VotePanel = (props, context) => { const { act, data } = useBackend(context); - const { - remaining, - question, - choices, - user_vote, - counts, - show_counts, - } = data; + const { remaining, question, choices, user_vote, counts, show_counts } = data; return (
- - Time remaining: {Math.round(remaining / 10)}s - - {choices.map(choice => ( + Time remaining: {Math.round(remaining / 10)}s + {choices.map((choice) => (
); -} +}; diff --git a/tgui/packages/tgui/interfaces/common/BotStatus.js b/tgui/packages/tgui/interfaces/common/BotStatus.js index 9e37207f949a..02606f757353 100644 --- a/tgui/packages/tgui/interfaces/common/BotStatus.js +++ b/tgui/packages/tgui/interfaces/common/BotStatus.js @@ -1,13 +1,6 @@ // ********* COMMON STATUS - GENERAL SETTINGS PAGE FOR BOTS ********* import { useBackend } from '../../backend'; -import { - Button, - LabeledList, - NoticeBox, - Section, - Box, -} from '../../components'; - +import { Button, LabeledList, NoticeBox, Section, Box } from '../../components'; export const BotStatus = (props, context) => { const { act, data } = useBackend(context); @@ -37,17 +30,17 @@ export const BotStatus = (props, context) => { onClick={() => act('power')} /> - {autopatrol !== null && - - act('autopatrol')} - /> - - } + {autopatrol !== null && ( + + act('autopatrol')} + /> + + )} {!!maintpanel && ( Panel Open! diff --git a/tgui/packages/tgui/interfaces/pda/pda_messenger.js b/tgui/packages/tgui/interfaces/pda/pda_messenger.js index 8f919469bc71..f4764f138a37 100644 --- a/tgui/packages/tgui/interfaces/pda/pda_messenger.js +++ b/tgui/packages/tgui/interfaces/pda/pda_messenger.js @@ -1,6 +1,13 @@ import { filter } from 'common/collections'; -import { useBackend, useLocalState } from "../../backend"; -import { Box, Button, Icon, Input, LabeledList, Section } from "../../components"; +import { useBackend, useLocalState } from '../../backend'; +import { + Box, + Button, + Icon, + Input, + LabeledList, + Section, +} from '../../components'; export const pda_messenger = (props, context) => { const { act, data } = useBackend(context); @@ -206,12 +213,27 @@ export const MessengerList = (props, context) => { No current conversations )) || ( - Search: { setSearchTerm(value); }} /> - { + setSearchTerm(value); + }} + /> + - + searchTerm={searchTerm} + /> + )} @@ -224,12 +246,7 @@ const PDAList = (props, context) => { const { act } = useBackend(context); const data = props.data; - const { - pdas, - title, - msgAct, - searchTerm, - } = props; + const { pdas, title, msgAct, searchTerm } = props; const { charges, plugins } = data; @@ -244,23 +261,30 @@ const PDAList = (props, context) => { return (
{pdas - .filter(pda => { return pda.Name.toLowerCase().includes(searchTerm.toLowerCase()); }) - .map(pda => ( + .filter((pda) => { + return pda.Name.toLowerCase().includes(searchTerm.toLowerCase()); + }) + .map((pda) => (
diff --git a/tgui/packages/tgui/interfaces/pda/pda_mule.js b/tgui/packages/tgui/interfaces/pda/pda_mule.js index f1076f4ca455..3a154e70bc86 100644 --- a/tgui/packages/tgui/interfaces/pda/pda_mule.js +++ b/tgui/packages/tgui/interfaces/pda/pda_mule.js @@ -95,7 +95,7 @@ const BotStatus = (props, context) => { onClick={() => act('set_pickup_type', { // Using just ! doesnt work here, because !null is still null - autopick: (pick ? 0 : 1), + autopick: pick ? 0 : 1, }) } /> @@ -107,7 +107,7 @@ const BotStatus = (props, context) => { onClick={() => act('set_auto_return', { // Using just ! doesnt work here, because !null is still null - autoret: (retn ? 0 : 1), + autoret: retn ? 0 : 1, }) } /> diff --git a/tgui/packages/tgui/interfaces/pda/pda_nanobank.js b/tgui/packages/tgui/interfaces/pda/pda_nanobank.js index 60664a81b46f..b70910e5ba4c 100644 --- a/tgui/packages/tgui/interfaces/pda/pda_nanobank.js +++ b/tgui/packages/tgui/interfaces/pda/pda_nanobank.js @@ -1,6 +1,18 @@ import { createSearch } from 'common/string'; -import { useBackend, useLocalState } from "../../backend"; -import { Box, Button, Dropdown, Icon, Input, LabeledList, Section, Tabs, Table, Divider, Flex } from "../../components"; +import { useBackend, useLocalState } from '../../backend'; +import { + Box, + Button, + Dropdown, + Icon, + Input, + LabeledList, + Section, + Tabs, + Table, + Divider, + Flex, +} from '../../components'; import { FlexItem } from '../../components/Flex'; export const pda_nanobank = (props, context) => { @@ -8,17 +20,15 @@ export const pda_nanobank = (props, context) => { const { logged_in, owner_name, money } = data; if (!logged_in) { - return ( - - ); + return ; } return ( <> - {owner_name} - ${money} + {owner_name} + ${money} @@ -26,9 +36,7 @@ export const pda_nanobank = (props, context) => { - ); - }; const NanoBankNavigation = (properties, context) => { @@ -37,21 +45,15 @@ const NanoBankNavigation = (properties, context) => { return ( - setTabIndex(1)}> + setTabIndex(1)}> Transfers - setTabIndex(2)}> + setTabIndex(2)}> Account Actions - setTabIndex(3)}> + setTabIndex(3)}> Transaction History @@ -65,11 +67,7 @@ const NanoBankTabContent = (props, context) => { const { db_status } = data; if (!db_status) { - return ( - - Account Database Connection Severed - - ); + return Account Database Connection Severed; } switch (tabIndex) { @@ -88,14 +86,18 @@ const Transfer = (props, context) => { const { act, data } = useBackend(context); const { requests, available_accounts, money } = data; - const [selectedAccount, setSelectedAccount] = useLocalState(context, 'selectedAccount'); - const [transferAmount, setTransferAmount] = useLocalState(context, 'transferAmount'); + const [selectedAccount, setSelectedAccount] = useLocalState( + context, + 'selectedAccount' + ); + const [transferAmount, setTransferAmount] = useLocalState( + context, + 'transferAmount' + ); const [searchText, setSearchText] = useLocalState(context, 'searchText', ''); - let accountMap = [] - available_accounts.map(account => ( - accountMap[account.name] = account.UID - )) + let accountMap = []; + available_accounts.map((account) => (accountMap[account.name] = account.UID)); return ( <> @@ -111,14 +113,17 @@ const Transfer = (props, context) => { options={available_accounts .filter( createSearch(searchText, (account) => { - return ( - account.name - ); + return account.name; }) ) .map((account) => account.name)} - selected={available_accounts.filter(account => account.UID === selectedAccount)[0]?.name} - onSelected={(val) => setSelectedAccount(accountMap[val])} /> + selected={ + available_accounts.filter( + (account) => account.UID === selectedAccount + )[0]?.name + } + onSelected={(val) => setSelectedAccount(accountMap[val])} + /> { /> - act('transfer', { - amount: transferAmount, - transfer_to_account: selectedAccount - })} /> -