diff --git a/.gitignore b/.gitignore
index a87737d38e28..0033167e0e60 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/SQL/paradise_schema.sql b/SQL/paradise_schema.sql
index c0d27dd47e06..b6b28ef15841 100644
--- a/SQL/paradise_schema.sql
+++ b/SQL/paradise_schema.sql
@@ -625,13 +625,17 @@ CREATE TABLE `json_datum_saves` (
INDEX `ckey` (`ckey`) USING BTREE
) COLLATE = 'utf8mb4_general_ci' ENGINE = InnoDB;
+
+
--
--- Table structure for table `ckey_whitelist`
+-- SS220 ADDITION AND EDITS
--
+--
+-- Table structure for table `ckey_whitelist`
+--
DROP TABLE IF EXISTS `ckey_whitelist`;
-CREATE TABLE `ckey_whitelist`
-(
+CREATE TABLE `ckey_whitelist` (
`id` INT(11) NOT NULL AUTO_INCREMENT,
`date` DATETIME DEFAULT now() NOT NULL,
`ckey` VARCHAR(32) NOT NULL,
@@ -646,29 +650,13 @@ CREATE TABLE `ckey_whitelist`
--
-- Table structure for table `admin_wl`
--
-
CREATE TABLE `admin_wl` (
- `id` int(11) NOT NULL AUTO_INCREMENT,
- `ckey` varchar(32) COLLATE utf8mb4_unicode_ci NOT NULL,
- `admin_rank` varchar(32) COLLATE utf8mb4_unicode_ci NOT NULL DEFAULT 'Administrator',
- `level` int(2) NOT NULL DEFAULT '0',
- `flags` int(16) NOT NULL DEFAULT '0',
- PRIMARY KEY (`id`),
- KEY `ckey` (`ckey`)
+ `id` int(11) NOT NULL AUTO_INCREMENT,
+ `ckey` varchar(32) COLLATE utf8mb4_unicode_ci NOT NULL,
+ `admin_rank` varchar(32) COLLATE utf8mb4_unicode_ci NOT NULL DEFAULT 'Administrator',
+ `level` int(2) NOT NULL DEFAULT '0',
+ `flags` int(16) NOT NULL DEFAULT '0',
+ PRIMARY KEY (`id`),
+ KEY `ckey` (`ckey`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
---
--- Table structure for table `json_datum_saves`
---
-DROP TABLE IF EXISTS `json_datum_saves`;
-CREATE TABLE `json_datum_saves` (
- `id` INT(11) NOT NULL AUTO_INCREMENT,
- `ckey` VARCHAR(64) NOT NULL COLLATE 'utf8mb4_general_ci',
- `slotname` VARCHAR(32) NOT NULL COLLATE 'utf8mb4_general_ci',
- `slotjson` LONGTEXT NOT NULL COLLATE 'utf8mb4_general_ci',
- `created` DATETIME NOT NULL DEFAULT current_timestamp(),
- `updated` DATETIME NOT NULL DEFAULT current_timestamp() ON UPDATE current_timestamp(),
- PRIMARY KEY (`id`) USING BTREE,
- UNIQUE INDEX `ckey_unique` (`ckey`, `slotname`) USING BTREE,
- INDEX `ckey` (`ckey`) USING BTREE
-) COLLATE = 'utf8mb4_general_ci' ENGINE = InnoDB;
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/_maps/map_files/cyberiad/cyberiad.dmm b/_maps/map_files/cyberiad/cyberiad.dmm
index 540b9610fa07..e92613bb28d9 100644
--- a/_maps/map_files/cyberiad/cyberiad.dmm
+++ b/_maps/map_files/cyberiad/cyberiad.dmm
@@ -66899,6 +66899,11 @@
/obj/machinery/atmospherics/pipe/simple/hidden/cyan{
dir = 4
},
+/obj/structure/cable{
+ d1 = 4;
+ d2 = 8;
+ icon_state = "4-8"
+ },
/turf/simulated/floor/plating,
/area/station/maintenance/asmaint)
"ifN" = (
@@ -73595,6 +73600,15 @@
/obj/effect/spawner/random_spawners/fungus_maybe,
/turf/simulated/wall,
/area/station/legal/courtroom)
+"lQH" = (
+/obj/structure/cable,
+/obj/machinery/power/apc{
+ dir = 8;
+ name = "west bump";
+ pixel_x = -24
+ },
+/turf/simulated/floor/plasteel,
+/area/station/maintenance/asmaint)
"lQS" = (
/obj/structure/shuttle/engine/propulsion/burst{
dir = 8
@@ -74770,6 +74784,11 @@
/area/station/maintenance/apmaint2)
"mAv" = (
/obj/machinery/atmospherics/pipe/manifold/hidden/cyan,
+/obj/structure/cable{
+ d1 = 2;
+ d2 = 8;
+ icon_state = "2-8"
+ },
/turf/simulated/floor/plating,
/area/station/maintenance/asmaint)
"mBl" = (
@@ -76674,11 +76693,11 @@
d2 = 2;
icon_state = "1-2"
},
-/obj/machinery/door/airlock/atmos{
- name = "Aft-Starboard Atmospherics Maintenance"
- },
/obj/effect/mapping_helpers/airlock/access/all/engineering/atmos,
/obj/effect/mapping_helpers/airlock/access/all/engineering/maintenance,
+/obj/machinery/door/airlock/atmos{
+ name = "Fore-Port Secondary Atmospherics Maintenance"
+ },
/turf/simulated/floor/plating,
/area/station/maintenance/fpmaint2)
"nMd" = (
@@ -80941,6 +80960,15 @@
},
/turf/simulated/floor/plasteel,
/area/station/maintenance/apmaint)
+"qmp" = (
+/obj/effect/decal/cleanable/dirt,
+/obj/structure/cable{
+ d1 = 1;
+ d2 = 2;
+ icon_state = "1-2"
+ },
+/turf/simulated/floor/plasteel,
+/area/station/maintenance/asmaint)
"qms" = (
/obj/machinery/atmospherics/pipe/simple/hidden/supply{
dir = 10
@@ -145983,10 +146011,10 @@ hlu
nXc
pfF
mAv
-csL
-csL
-ePu
-hyk
+cOm
+cOm
+qmp
+lQH
cga
hyk
csL
diff --git a/_maps/map_files220/cyberiad/cyberiad.dmm b/_maps/map_files220/cyberiad/cyberiad.dmm
index d6305633a4a9..a034178a8411 100644
--- a/_maps/map_files220/cyberiad/cyberiad.dmm
+++ b/_maps/map_files220/cyberiad/cyberiad.dmm
@@ -9274,16 +9274,17 @@
/turf/simulated/floor/carpet/arcade,
/area/station/public/arcade)
"aGQ" = (
-/obj/machinery/newscaster{
- name = "north bump";
- pixel_y = 28
- },
+/obj/machinery/prize_counter,
/turf/simulated/floor/carpet/arcade,
/area/station/public/arcade)
"aGR" = (
/obj/structure/chair/comfy/black{
dir = 8
},
+/obj/machinery/newscaster{
+ name = "north bump";
+ pixel_y = 28
+ },
/turf/simulated/floor/carpet/arcade,
/area/station/public/arcade)
"aGT" = (
@@ -10423,6 +10424,9 @@
/obj/structure/chair/comfy/black{
dir = 1
},
+/obj/machinery/computer/mob_healer_terminal{
+ pixel_x = -30
+ },
/turf/simulated/floor/carpet/arcade,
/area/station/public/arcade)
"aKK" = (
@@ -10430,12 +10434,14 @@
/turf/simulated/floor/carpet/arcade,
/area/station/public/arcade)
"aKL" = (
-/obj/machinery/hologram/holopad,
/obj/structure/cable{
d1 = 1;
d2 = 2;
icon_state = "1-2"
},
+/obj/structure/chair/stool{
+ dir = 4
+ },
/turf/simulated/floor/carpet/arcade,
/area/station/public/arcade)
"aKO" = (
@@ -10918,11 +10924,6 @@
/obj/effect/decal/warning_stripes/south,
/turf/simulated/floor/plasteel,
/area/station/hallway/secondary/entry)
-"aMC" = (
-/obj/structure/table,
-/obj/machinery/computer/mob_healer_terminal,
-/turf/simulated/floor/carpet/arcade,
-/area/station/public/arcade)
"aMD" = (
/obj/machinery/status_display{
layer = 4;
@@ -11284,10 +11285,10 @@
},
/area/station/service/barber)
"aOb" = (
-/obj/machinery/prize_counter,
/obj/machinery/light{
dir = 8
},
+/obj/machinery/economy/arcade/claw,
/turf/simulated/floor/carpet/arcade,
/area/station/public/arcade)
"aOg" = (
@@ -52649,6 +52650,15 @@
/obj/machinery/economy/slot_machine,
/turf/simulated/floor/wood/fancy/cherry,
/area/station/service/bar/atrium)
+"fio" = (
+/obj/structure/cable{
+ d1 = 4;
+ d2 = 8;
+ icon_state = "4-8"
+ },
+/obj/machinery/hologram/holopad,
+/turf/simulated/floor/carpet/arcade,
+/area/station/public/arcade)
"fiM" = (
/obj/structure/disposalpipe/segment,
/obj/effect/spawner/random_spawners/oil_maybe,
@@ -55201,6 +55211,12 @@
},
/turf/simulated/floor/wood/fancy/cherry,
/area/station/command/office/captain)
+"ggd" = (
+/obj/machinery/computer/arcade/recruiter{
+ dir = 4
+ },
+/turf/simulated/floor/carpet/arcade,
+/area/station/public/arcade)
"ggr" = (
/obj/item/stack/rods{
amount = 4
@@ -65490,6 +65506,8 @@
/area/station/maintenance/asmaint)
"jPN" = (
/obj/machinery/computer/mob_battle_terminal/blue{
+ dir = 2;
+ pixel_y = 0;
pixel_x = -32
},
/turf/simulated/floor/plasteel,
@@ -96191,6 +96209,12 @@
/obj/effect/spawner/window/reinforced,
/turf/simulated/floor/plating,
/area/station/engineering/hallway)
+"uZJ" = (
+/obj/machinery/computer/arcade/recruiter{
+ dir = 8
+ },
+/turf/simulated/floor/carpet/arcade,
+/area/station/public/arcade)
"uZW" = (
/obj/machinery/atmospherics/unary/vent_scrubber/on{
dir = 8
@@ -104434,6 +104458,9 @@
/area/station/maintenance/fpmaint2)
"xYc" = (
/obj/machinery/atmospherics/unary/vent_scrubber/on,
+/obj/structure/chair/stool{
+ dir = 8
+ },
/turf/simulated/floor/carpet/arcade,
/area/station/public/arcade)
"xYi" = (
@@ -139767,7 +139794,7 @@ aFI
aFI
aFI
aFI
-aMC
+aKK
aOb
aFI
aDv
@@ -140793,9 +140820,9 @@ ayb
aFI
aGP
mEs
-aJw
-aKK
fmN
+uZJ
+aJw
lFe
ckc
aQv
@@ -141049,9 +141076,9 @@ aCh
aEw
aFI
aGZ
-mEs
+fio
aJz
-aKK
+ggd
dwg
lFe
aPf
diff --git a/code/datums/datumvars.dm b/code/datums/datumvars.dm
index bd58c8446dcb..af39a46d8ed5 100644
--- a/code/datums/datumvars.dm
+++ b/code/datums/datumvars.dm
@@ -12,8 +12,21 @@
/datum/proc/can_vv_get(var_name)
return TRUE
-// /client/proc/can_vv_get(var_name)
-// return TRUE
+/mob/can_vv_get(var_name)
+ var/static/list/protected_vars = list(
+ "lastKnownIP", "computer_id"
+ )
+ if(!check_rights(R_ADMIN, FALSE, src) && (var_name in protected_vars))
+ return FALSE
+ return TRUE
+
+/client/can_vv_get(var_name)
+ var/static/list/protected_vars = list(
+ "address", "computer_id"
+ )
+ if(!check_rights(R_ADMIN, FALSE, mob) && (var_name in protected_vars))
+ return FALSE
+ return TRUE
/datum/proc/vv_edit_var(var_name, var_value) //called whenever a var is edited
switch(var_name)
diff --git a/code/game/turfs/simulated/floor/fancy_floor.dm b/code/game/turfs/simulated/floor/fancy_floor.dm
index 3ef9491677c8..35b710b4f065 100644
--- a/code/game/turfs/simulated/floor/fancy_floor.dm
+++ b/code/game/turfs/simulated/floor/fancy_floor.dm
@@ -68,10 +68,9 @@
if(..())
return
if(istype(C, /obj/item/shovel))
- new /obj/item/stack/ore/glass(src, 2) //Make some sand if you shovel grass
to_chat(user, "You shovel the grass.")
playsound(src, 'sound/effects/shovel_dig.ogg', 50, 1)
- make_plating()
+ remove_tile()
/turf/simulated/floor/grass/jungle
name = "jungle grass"
diff --git a/modular_ss220/maps220/code/misc.dm b/modular_ss220/maps220/code/misc.dm
index e0f4dc3ca429..db0ae28a11f9 100644
--- a/modular_ss220/maps220/code/misc.dm
+++ b/modular_ss220/maps220/code/misc.dm
@@ -55,7 +55,7 @@
new /obj/structure/closet/syndicate/resources/everything(loc)
if("Бессмертие")
- user.verbs += /mob/living/carbon/human/verb/immortality
+ user.verbs |= /mob/living/carbon/human/proc/immortality
if("Покой")
for(var/mob/living/simple_animal/hostile/faithless/F in GLOB.mob_living_list)
@@ -79,7 +79,7 @@
#define TRAIT_REVIVAL_IN_PROGRESS "revival_in_progress"
-/mob/living/carbon/human/verb/immortality()
+/mob/living/carbon/human/proc/immortality()
set category = "Бессмертие"
set name = "Возрождение"
@@ -96,7 +96,6 @@
addtimer(CALLBACK(src, TYPE_PROC_REF(/mob/living/carbon/human, resurrect)), rand(80 SECONDS, 120 SECONDS))
/mob/living/carbon/human/proc/resurrect()
- // Stolen from ling stasis
revive()
REMOVE_TRAIT(src, TRAIT_REVIVAL_IN_PROGRESS, "Immortality")
to_chat(src, span_notice("Вы вернулись из небытия."))
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 => }
-
+{(props) => }
```
**Box Units**
@@ -161,10 +159,10 @@ Default font size (`1rem`) is equal to `12px`.
- `fontSize: number` - Font size.
- `fontFamily: string` - Font family.
- `lineHeight: number` - Directly affects the height of text lines.
-Useful for adjusting button height.
+ Useful for adjusting button height.
- `inline: boolean` - Forces the `Box` to appear as an `inline-block`,
-or in other words, makes the `Box` flow with the text instead of taking
-all available horizontal space.
+ or in other words, makes the `Box` flow with the text instead of taking
+ all available horizontal space.
- `m: number` - Margin on all sides.
- `mx: number` - Horizontal margin.
- `my: number` - Vertical margin.
@@ -196,7 +194,7 @@ all available horizontal space.
- `#ffffff` - Hex format
- `rgba(255, 255, 255, 1)` - RGB format
- `purple` - Applies an atomic `color-` class to the element.
- See `styles/color-map.scss`.
+ See `styles/color-map.scss`.
- `backgroundColor: string` - Sets background color.
- `#ffffff` - Hex format
- `rgba(255, 255, 255, 1)` - RGB format
@@ -212,21 +210,21 @@ Buttons allow users to take actions, and make choices, with a single click.
- `icon: string` - Adds an icon to the button.
- `color: string` - Button color, as defined in `variables.scss`.
- There is also a special color `transparent` - makes the button
- transparent and slightly dim when inactive.
+ transparent and slightly dim when inactive.
- `disabled: boolean` - Disables and greys out the button.
- `selected: boolean` - Activates the button (gives it a green color).
- `tooltip: string` - A fancy, boxy tooltip, which appears when hovering
-over the button.
+ over the button.
- `tooltipPosition: string` - Position of the tooltip.
- `top` - Show tooltip above the button.
- `bottom` (default) - Show tooltip below the button.
- `left` - Show tooltip on the left of the button.
- `right` - Show tooltip on the right of the button.
- `ellipsis: boolean` - If button width is constrained, button text will
-be truncated with an ellipsis. Be careful however, because this prop breaks
-the baseline alignment.
+ be truncated with an ellipsis. Be careful however, because this prop breaks
+ the baseline alignment.
- `title: string` - A native browser tooltip, which appears when hovering
-over the button.
+ over the button.
- `content/children: any` - Content to render inside the button.
- `onClick: function` - Called when element is clicked.
@@ -260,11 +258,11 @@ commit, while escape cancels.
- See inherited props: [Box](#box)
- `fluid`: fill availible horizontal space
- `onCommit: (e, value) => void`: function that is called after the user
-defocuses the input or presses enter
+ defocuses the input or presses enter
- `currentValue: string`: default string to display when the input is shown
- `defaultValue: string`: default value emitted if the user leaves the box
-blank when hitting enter or defocusing. If left undefined, will cancel the
-change on a blank defocus/enter
+ blank when hitting enter or defocusing. If left undefined, will cancel the
+ change on a blank defocus/enter
### `ByondUi`
@@ -302,8 +300,8 @@ It supports a full set of `Box` properties for layout purposes.
- See inherited props: [Box](#box)
- `params: any` - An object with parameters, which are directly passed to
-the `winset` proc call. You can find a full reference of these parameters
-in [BYOND controls and parameters guide](https://secure.byond.com/docs/ref/skinparams.html).
+ the `winset` proc call. You can find a full reference of these parameters
+ in [BYOND controls and parameters guide](https://secure.byond.com/docs/ref/skinparams.html).
### `Collapsible`
@@ -350,7 +348,7 @@ Works like the good old `` element, but it's fancier.
- `vertical: boolean` - Divide content vertically.
- `hidden: boolean` - Divider can divide content without creating a dividing
-line.
+ line.
### `Dropdown`
@@ -361,7 +359,7 @@ and displays selected entry.
- See inherited props: [Box](#box)
- `options: string[]` - An array of strings which will be displayed in the
-dropdown when open
+ dropdown when open
- `selected: string` - Currently selected entry
- `width: number` - Width of dropdown button and resulting menu
- `over: boolean` - dropdown renders over instead of below
@@ -385,9 +383,7 @@ to the left, and certain elements to the right:
```jsx
-
- Button description
-
+ Button description
@@ -402,19 +398,19 @@ two flex items as far as possible from each other.
- See inherited props: [Box](#box)
- `spacing: number` - Spacing between flex items, in integer units
-(1 unit - 0.5em). Does not directly relate to a flex css property
-(adds a modifier class under the hood), and only integer numbers are
-supported.
+ (1 unit - 0.5em). Does not directly relate to a flex css property
+ (adds a modifier class under the hood), and only integer numbers are
+ supported.
- `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.
@@ -425,22 +421,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`
@@ -449,24 +445,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` - 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.
+ 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` - This defines the ability for a flex item to shrink
-if necessary. Inverse of `grow`.
+ if necessary. Inverse of `grow`.
- `basis: 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.
+ 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`
@@ -482,14 +478,10 @@ Example:
```jsx
-
- Hello world!
-
+ Hello world!
-
- Hello world!
-
+ Hello world!
```
@@ -515,6 +507,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`
@@ -523,10 +516,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.
### `Input`
@@ -540,12 +533,12 @@ 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.
- `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`
@@ -561,30 +554,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`
@@ -612,9 +605,7 @@ column is labels, and second column is content.
```jsx
-
- Content
-
+ Content
```
@@ -623,11 +614,7 @@ to perform some sort of action), there is a way to do that:
```jsx
-
- )}>
+ }>
Content
@@ -654,9 +641,7 @@ Example:
```jsx
-
- Content
-
+ Content
```
@@ -702,22 +687,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.
### `ProgressBar`
@@ -736,18 +721,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.
- `content/children: any` - Content to render inside the progress bar.
@@ -762,20 +748,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
-
- )}>
+}>
Here you can order supply crates.
```
@@ -783,7 +763,7 @@ If you want to have a button on the right side of an section title
- See inherited props: [Box](#box)
- `title: string` - Title of the section.
- `level: number` - Section level in hierarchy. Default is 1, higher number
-means deeper level of nesting. Must be an integer number.
+ means deeper level of nesting. Must be an integer number.
- `buttons: any` - Buttons to render aside the section title.
- `content/children: any` - Content of this section.
@@ -804,23 +784,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.
### `Table`
@@ -833,9 +813,7 @@ Example:
```jsx
-
- Hello world!
-
+ Hello world!
Label
@@ -864,7 +842,7 @@ A straight forward mapping to `
` 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`
@@ -900,9 +878,7 @@ Tabs also support a vertical configuration. This is usually paired with a
```jsx
-
- ...
-
+ ...
Tab content.
@@ -914,7 +890,7 @@ Tabs also support a vertical configuration. This is usually paired with a
- See inherited props: [Box](#box)
- `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`
@@ -926,8 +902,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.
@@ -945,9 +921,7 @@ Usage:
```jsx
Sample text.
-
+
```
@@ -955,7 +929,7 @@ Usage:
- `position: string` - Tooltip position.
- `content/children: 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`
@@ -968,12 +942,8 @@ it in one way or another.
Example:
```jsx
-
-
- Hello, world!
-
+
+ Hello, world!
```
@@ -984,9 +954,9 @@ Example:
- For a list of themes, see `packages/tgui/styles/themes`.
- `resizable: boolean` - Controls resizability of 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/tutorial-and-examples.md b/tgui/docs/tutorial-and-examples.md
index e256fb86a862..aeda9b57330d 100644
--- a/tgui/docs/tutorial-and-examples.md
+++ b/tgui/docs/tutorial-and-examples.md
@@ -13,15 +13,15 @@ ui_act(action, params)
- `src_object` - The atom, which UI corresponds to in the game world.
- `ui_interact` - The proc where you will handle a request to open an
-interface. Typically, you would update an existing UI (if it exists),
-or set up a new instance of UI by calling the `SStgui` subsystem.
+ interface. Typically, you would update an existing UI (if it exists),
+ or set up a new instance of UI by calling the `SStgui` subsystem.
- `ui_data` - In this proc you munges whatever complex data your `src_object`
-has into an associative list, which will then be sent to UI as a JSON string.
+ has into an associative list, which will then be sent to UI as a JSON string.
- `ui_act` - This proc receives user actions and reacts to them by changing
-the state of the game.
+ the state of the game.
- `ui_state` (set in `ui_interact`) - This var dictates under what conditions
-a UI may be interacted with. This may be the standard checks that check if
-you are in range and conscious, or more.
+ a UI may be interacted with. This may be the standard checks that check if
+ you are in range and conscious, or more.
Once backend is complete, you create an new interface component on the
frontend, which will receive this JSON data and render it on screen.
@@ -124,25 +124,19 @@ import { Window } from '../layouts';
export const SampleInterface = (props, context) => {
const { act, data } = useBackend(context);
// Extract `health` and `color` variables from the `data` object.
- const {
- health,
- color,
- } = data;
+ const { health, color } = data;
return (
-
- {health}
-
-
- {color}
-
+ {health}
+ {color}
@@ -155,22 +149,22 @@ export const SampleInterface = (props, context) => {
Here are the key variables you get from a `useBackend(context)` function:
- `config` is part of core tgui. It contains meta-information about the
-interface and who uses it, BYOND refs to various objects, and so forth.
-You are rarely going to use it, but sometimes it can be used to your
-advantage when doing complex UIs.
+ interface and who uses it, BYOND refs to various objects, and so forth.
+ You are rarely going to use it, but sometimes it can be used to your
+ advantage when doing complex UIs.
- `data` is the data returned from `ui_data` and `ui_static_data` procs in
-your DM code. Pretty straight forward.
+ your DM code. Pretty straight forward.
- Note, that javascript doesn't have associative arrays, so when you
- return an associative list from DM, it will be available in `data` as a
- javascript object instead of an array. You can use it normally
- like so: `object.key`, so it's not a problem if it's representing a
- data structure, but common `Array` methods, such as `array.map(item => ...)`,
- are not available on it. Always prefer returning clean arrays from your
- code, since arrays are easier to work with in javascript!
+ return an associative list from DM, it will be available in `data` as a
+ javascript object instead of an array. You can use it normally
+ like so: `object.key`, so it's not a problem if it's representing a
+ data structure, but common `Array` methods, such as `array.map(item => ...)`,
+ are not available on it. Always prefer returning clean arrays from your
+ code, since arrays are easier to work with in javascript!
- `act(name, params)` is a function, which you can call to dispatch an action
-to your DM code. It will be processed in `ui_act` proc. Action name will be
-available in `params["action"]`, mixed together with the rest of parameters
-you have passed in `params` object.
+ to your DM code. It will be processed in `ui_act` proc. Action name will be
+ available in `params["action"]`, mixed together with the rest of parameters
+ you have passed in `params` object.
**Let's talk about the syntax.**
@@ -181,17 +175,19 @@ expressions that look like html, and turns them into function calls.
Take a look at this example:
```jsx
-
- You are in {status} condition!
-
+
You are in {status} condition!
```
After compiling the code above, this is what it becomes:
```js
-createElement('div',
+createElement(
+ 'div',
{ className: 'color-' + status },
- 'You are in ', status, ' condition!');
+ 'You are in ',
+ status,
+ ' condition!'
+);
```
It is very important to remember, that JSX is just a javascript expression
@@ -212,11 +208,7 @@ to a `` element. If `showProgress` is `false`, the whole
expression evaluates to `false`, and `false` is not rendered by React.
```jsx
-
- {showProgress && (
-
- )}
-
+{showProgress && }
```
You can also use the `||` operator (the logical OR), which works the same way,
@@ -229,10 +221,8 @@ and builds a new array based on what was returned by that function.
```jsx
- {items.map(item => (
-
+ {items.map((item) => (
+
{item.content}
))}
@@ -265,22 +255,13 @@ export const SampleInterface = (props, context) => {
const HealthStatus = (props, context) => {
const { act, data } = useBackend(context);
- const {
- user,
- } = props;
- const {
- health,
- color,
- } = data;
+ const { user } = props;
+ const { health, color } = data;
return (
-
+
-
- {health}
-
-
- {color}
-
+ {health}
+ {color}
);
@@ -327,25 +308,19 @@ import { Window } from '../layouts';
export const SampleInterface = (props, context) => {
const { act, data } = useBackend(context);
// Extract `health` and `color` variables from the `data` object.
- const {
- health,
- color,
- } = data;
+ const { health, color } = data;
return (
-
- {health}
-
-
- {color}
-
+ {health}
+ {color}
diff --git a/tgui/jsconfig.json b/tgui/jsconfig.json
index c5e50d3c5396..86e69d8babf9 100644
--- a/tgui/jsconfig.json
+++ b/tgui/jsconfig.json
@@ -14,10 +14,7 @@
"resolveJsonModule": true,
"skipLibCheck": true,
"strict": false,
- "strictNullChecks": true,
- "target": "ES3"
+ "strictNullChecks": true
},
- "include": [
- "./packages"
- ]
-}
\ No newline at end of file
+ "include": ["./packages"]
+}
diff --git a/tgui/package.json b/tgui/package.json
index ef5092792312..bbc158e2c03a 100644
--- a/tgui/package.json
+++ b/tgui/package.json
@@ -7,17 +7,18 @@
],
"scripts": {
"build": "eslint packages && cd packages/tgui && npx webpack --mode=production",
- "watch": "cd packages/tgui-dev-server && node --experimental-modules index.js",
+ "watch": "cd packages/tgui-dev-server && set NODE_OPTIONS=--openssl-legacy-provider --no-experimental-fetch && node --experimental-modules index.js",
"analyze": "cd packages/tgui && npx webpack --mode=production --env.analyze=1",
"lint": "eslint packages",
- "prettier": "prettier --check packages"
+ "prettier": "prettier --check packages",
+ "prettier-write": "prettier --check packages --write"
},
"dependencies": {
- "@babel/eslint-parser": "^7.17.0",
- "eslint": "^8.15.0",
- "eslint-config-prettier": "^8.5.0",
- "eslint-plugin-prettier": "^4.0.0",
- "eslint-plugin-react": "^7.17.0",
- "prettier": "npm:prettierx@0.19.0"
+ "@babel/eslint-parser": "^7.22.15",
+ "eslint": "^8.49.0",
+ "eslint-config-prettier": "^9.0.0",
+ "eslint-plugin-prettier": "^5.0.0",
+ "eslint-plugin-react": "^7.33.2",
+ "prettier": "^3.0.3"
}
}
diff --git a/tgui/packages/tgui/components/Button.js b/tgui/packages/tgui/components/Button.js
index 9bde8582928d..71d2406f5c90 100644
--- a/tgui/packages/tgui/components/Button.js
+++ b/tgui/packages/tgui/components/Button.js
@@ -242,7 +242,7 @@ export class ButtonInput extends Component {
'Button',
fluid && 'Button--fluid',
'Button--color--' + color,
- multiLine + 'Button--multiLine'
+ multiLine + 'Button--multiLine',
])}
{...rest}
onClick={() => this.setInInput(true)}
diff --git a/tgui/packages/tgui/hotkeys.js b/tgui/packages/tgui/hotkeys.js
index 5fef01d521fc..36a21bc8a893 100644
--- a/tgui/packages/tgui/hotkeys.js
+++ b/tgui/packages/tgui/hotkeys.js
@@ -101,27 +101,27 @@ const getKeyData = (e) => {
};
};
-const keyCodeToByond = keyCode => {
+const keyCodeToByond = (keyCode) => {
const dict = {
- 16 : 'Shift',
- 17 : 'Ctrl',
- 18 : 'Alt',
- 33 : 'Northeast',
- 34 : 'Southeast',
- 35 : 'Southwest',
- 36 : 'Northwest',
- 37 : 'West',
- 38 : 'North',
- 39 : 'East',
- 40 : 'South',
- 45 : 'Insert',
- 46 : 'Delete'
- }
+ 16: 'Shift',
+ 17: 'Ctrl',
+ 18: 'Alt',
+ 33: 'Northeast',
+ 34: 'Southeast',
+ 35: 'Southwest',
+ 36: 'Northwest',
+ 37: 'West',
+ 38: 'North',
+ 39: 'East',
+ 40: 'South',
+ 45: 'Insert',
+ 46: 'Delete',
+ };
if (dict[keyCode]) {
return dict[keyCode];
}
- if (keyCode >= 48 && keyCode <= 57 || keyCode >= 65 && keyCode <= 90) {
+ if ((keyCode >= 48 && keyCode <= 57) || (keyCode >= 65 && keyCode <= 90)) {
return String.fromCharCode(keyCode);
}
if (keyCode >= 96 && keyCode <= 105) {
@@ -130,9 +130,15 @@ const keyCodeToByond = keyCode => {
if (keyCode >= 112 && keyCode <= 123) {
return 'F' + (keyCode - 111);
}
- if (keyCode === 188) {return ',';}
- if (keyCode === 189) {return '-';}
- if (keyCode === 190) {return '.';}
+ if (keyCode === 188) {
+ return ',';
+ }
+ if (keyCode === 189) {
+ return '-';
+ }
+ if (keyCode === 190) {
+ return '.';
+ }
};
/**
@@ -154,7 +160,8 @@ const handlePassthrough = (e, eventType) => {
if (NO_PASSTHROUGH_KEYS.includes(keyCode)) {
return;
}
- if (eventType === 'keyup' && keyState[keyCode]) { // this needs to happen regardless of ctrl or shift, else you can get stuck walking one way
+ if (eventType === 'keyup' && keyState[keyCode]) {
+ // this needs to happen regardless of ctrl or shift, else you can get stuck walking one way
logger.debug('passthrough', eventType, keyData);
return callByond('', { __keyup: byondKey });
}
diff --git a/tgui/packages/tgui/interfaces/AIFixer.js b/tgui/packages/tgui/interfaces/AIFixer.js
index ad9d639ba83c..78eb9ac16d07 100644
--- a/tgui/packages/tgui/interfaces/AIFixer.js
+++ b/tgui/packages/tgui/interfaces/AIFixer.js
@@ -100,7 +100,9 @@ export const AIFixer = (props, context) => {
diff --git a/tgui/packages/tgui/interfaces/ATM.js b/tgui/packages/tgui/interfaces/ATM.js
index 843a4179ee70..b424b53d2158 100644
--- a/tgui/packages/tgui/interfaces/ATM.js
+++ b/tgui/packages/tgui/interfaces/ATM.js
@@ -308,7 +308,9 @@ const ViewTransactionLogs = (props, context) => {
{t.time}{t.purpose}
- ${t.amount}
+
+ ${t.amount}
+ {t.target_name}
))}
diff --git a/tgui/packages/tgui/interfaces/AccountsUplinkTerminal.js b/tgui/packages/tgui/interfaces/AccountsUplinkTerminal.js
index 7e3b8ac1ed07..ecd2d7a397c9 100644
--- a/tgui/packages/tgui/interfaces/AccountsUplinkTerminal.js
+++ b/tgui/packages/tgui/interfaces/AccountsUplinkTerminal.js
@@ -54,20 +54,14 @@ export const AccountsUplinkTerminal = (properties, context) => {
const AccountsUplinkTerminalNavigation = (properties, context) => {
const { data } = useBackend(context);
const [tabIndex, setTabIndex] = useLocalState(context, 'tabIndex', 0);
- const {
- login_state,
- } = data
+ const { login_state } = data;
return (
- setTabIndex(0)}>
+ setTabIndex(0)}>
User Accounts
- setTabIndex(1)}>
+ setTabIndex(1)}>
Department Accounts
@@ -130,7 +124,9 @@ const AccountsRecordList = (properties, context) => {
'AccountsUplinkTerminal__listRow--' + account.suspended
}
onClick={() =>
- act('view_account_detail', { account_num: account.account_number })
+ act('view_account_detail', {
+ account_num: account.account_number,
+ })
}
>
@@ -163,24 +159,26 @@ const DepartmentAccountsList = (properties, context) => {
Account StatusAccount Balance
- {department_accounts
- .map((account) => (
- act('view_account_detail', {
- account_num: account.account_number
- })}>
-
- {account.name}
-
- #{account.account_number}
- {account.suspended}
- {account.money}
-
- ))}
+ {department_accounts.map((account) => (
+
+ act('view_account_detail', {
+ account_num: account.account_number,
+ })
+ }
+ >
+
+ {account.name}
+
+ #{account.account_number}
+ {account.suspended}
+ {account.money}
+
+ ))}