d841c9df40
Refactors most of blood handling code untouched by #90593 and completely rewrites all blood decals, components and reagents. - Blood types now have behavioral flags which allow them to control where they leave decals/DNA/viruses. Oil no longer transfers DNA and viruses with it, while podpeople water-blood doesn't leave visible decals on turfs and items, but still can be picked up by DNA scanners. - Multiple blood types have received unique handling - liquid electricity blood now glows in the dark, oil trails are flammable and lube ones are slippery. Oil blood can be restored with fuel, lube with silicon and slime with stable plasma (as normal plasma already passively regenerates their blood), instead of everything using iron. Saline solution only supplements on iron-based blood and won't do anything to help with bloodloss for species who rely on different blood types. (Roundstart this applies only to Ethereals) - All blood logic has been moved away from the blood reagent itself into a blood element that is assigned to the blood reagent by default, and to any reagent that's drawn from a mob as their "blood" (in ``transfer_blood_to``). This means that blood you draw from lizards will be green and have lizard's blood description instead of mentioning red blood cells, Ethereal "blood" will actually contain their DNA and genes, etc. - Refactored all blood decals. Blood states are no more, everything is now handled via blood DNA. Credits to MrMelbert and Maplestation, as a significant amount of code has been taken from https://github.com/MrMelbert/MapleStationCode/pull/436 and many of his followup PRs. Oil and xenomorph splatters are now subtypes of blood, blood drying is now animated, blood trails now curve and can be diagonal. - Rewrote bloodysoles and bloody_spreader components, credits to Melbert again for the former, while latter now makes more sense with its interactions. Bloody soles no longer share blood DNA with your hands. - Ported Melbert's bloody footprint sprites and bot-blood-spreading functionality. - Removed all species-side reagent interactions, instead they're handled by said species' livers. (This previously included exotic blood handling, thus the removal) - Slightly optimized human rendering by removing inbetween overlay holders for clothing when they're not needed. - Blood-transmitted diseases will now get added to many more decals than before. - Cleaned up and partially refactored replica pods, fixed an issue where monkeys/manipulators were unable to harvest mindless pods. - Exotic bloodtype on species now automatically assigns their blood reagent, without the need to assign them separately. - Clown mobs now bleed (with colorful reagent instead of blood during april fools), and so do vatbeasts (lizard blood) - Implemented generic procs for handling bleeding checks, all sorts of scanners now also correctly call your blood for what it is. - Podpeople's guts are now lime-green like their organs, instead of being weirdly greyish like their water-blood. (Their bleeding overlays are still grey, as they're bleeding water) - Slimepeople now can bleed. Their jelly is pale purple in color, but their wound overlays copy their body color. - Injecting/spraying/splashing/etc mob with a reagent preserves its data, so you could theoretically recycle fine wines from someone's bloodstream - Fixed burdened chaplain's sect never actually giving a blessing when applying effects, and giving a blessing when nothing can be healed. Inverted check strikes again. - Closes #91039 A lot of blood here has dried, visually the blood colors are almost exactly the same as before either of the blood refactors.  
tgui
Introduction
tgui is a robust user interface framework of /tg/station.
tgui is very different from most UIs you will encounter in BYOND programming. It is heavily reliant on Javascript and web technologies as opposed to DM. If you are familiar with NanoUI (a library which can be found on almost every other SS13 codebase), tgui should be fairly easy to pick up.
Learn tgui
People come to tgui from different backgrounds and with different learning styles. Whether you prefer a more theoretical or a practical approach, we hope you’ll find this section helpful.
Practical Tutorial
If you are completely new to frontend and prefer to learn by doing, start with our practical tutorial.
Guides
This project uses React. Take your time to read the guide:
If you were already familiar with an older, Ractive-based tgui and want to translate concepts between old and new tgui, read this interface conversion guide.
Other Documentation
- Component Reference - UI building blocks
- Tgui Core - The component library for tgui.
- Using TGUI and Byond API for custom HTML popups
- Chat Embedded Components
- Writing Tests
Pre-requisites
If you are using the tooling provided in this repo, everything is included! Feel free to skip this step.
However, if you want finer control over the installation or build process, you will need these:
- Node v22.11+
- LTS release is recommended instead of latest
- DO NOT install Chocolatey if Node installer asks you to!
- Yarn v4.8.1+
- Yarn is normally installed with corepack.
Usage
Via provided cmd scripts (Windows):
bin/tgui-build- Build tgui in production mode and run a full suite of code checks.bin/tgui-dev- Launch a development server.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).
bin/tgui-sonar- Analyze code with SonarQube.bin/tgui-bench- Run benchmarks.
To open a CMD or PowerShell window in any open folder, right click while holding Shift on any free space in the folder, then click on either
Open command window hereorOpen PowerShell window here.
Via Juke Build (cross-platform):
tools/build/build tgui- Build tgui in production mode.tools/build/build tgui-dev- Build tgui in production mode.tools/build/build tgui-dev --reload- Reload byond cache once.tools/build/build tgui-dev --debug- Run server with debug logging enabled.tools/build/build tgui-dev --no-hot- Disable hot module replacement (helps when doing development on IE8).
tools/build/build tgui-lint- Show (and auto-fix) problems with the code.tools/build/build tgui-sonar- Analyze code with SonarQube.tools/build/build tgui-test- Run unit and integration tests.tools/build/build tgui-analyze- Run a bundle analyzer.tools/build/build tgui-bench- Run benchmarks.tools/build/build tgui-clean- Clean up tgui folder.
With Juke Build, you can run multiple targets together, e.g.:
tools/build/build tgui tgui-lint tgui-tsc tgui-test
Via Yarn (cross-platform):
Run yarn install once to install tgui dependencies.
yarn tgui:build- Build tgui in production mode.yarn tgui:build [options]- Build tgui with custom webpack options.
yarn tgui:dev- Launch a development server.yarn tgui:dev --reload- Reload byond cache once.yarn tgui:dev --debug- Run server with debug logging enabled.yarn tgui:dev --no-hot- Disable hot module replacement (helps when doing development on IE8).
yarn tgui:lint- Show (and auto-fix) problems with the code.yarn tgui:sonar- Analyze code with SonarQube.yarn tgui:tsc- Check code with TypeScript compiler.yarn tgui:test- Run unit and integration tests.yarn tgui:analyze- Run a bundle analyzer.yarn tgui:bench- Run benchmarks.yarn tgfont:build- Build icon fonts.yarn tgui-polyfill:build- Build polyfills. You need to run it when updating any of the static (numbered) polyfills.
Important Memo
Remember to always run a full build of tgui before submitting a PR, because it comes with the full suite of CI checks, and runs much faster on your computer than on GitHub servers. It will save you some time and possibly a few broken commits! Address the issues that are reported by the tooling as much as possible, because maintainers will beat you with a ruler and force you to address them anyway (unless it's a false positive or something unfixable).
Troubleshooting
Development server isn't attaching to the game
Make sure that you have a tgui window open before you run the dev server. Then, once it's running, you may need to press F5 to refresh the page.
Development server is crashing
Make sure path to your working directory does not contain spaces, special unicode characters, exclamation marks or any other special symbols. If so, move codebase to a location which does not contain these characters.
This is a known issue with Yarn (and some other tools, like Webpack), and fix is going to happen eventually.
Development server doesn't find my BYOND cache!
This happens if your Documents folder in Windows has a custom location, for
example in E:\Libraries\Documents. Development server tries its best to find
this non-standard location (searches for a Windows Registry key), but it can
fail. You have to run the dev server with an additional environmental variable,
with a full path to BYOND cache.
BYOND_CACHE="E:/Libraries/Documents/BYOND/cache"
Webpack errors out with some cryptic messages!
Example:
No template for dependency: PureExpressionDependency
Webpack stores its cache on disk since tgui 4.3, and it is very sensitive to build configuration. So if you update webpack, or share the same cache directory between development and production build, it will start hallucinating.
To fix this kind of problem, run bin/tgui --clean and try again.
Dev Server Tools
When developing with tgui-dev-server, you will have access to certain
development only features.
Debug Logs. When running server via bin/tgui --dev --debug, server will
print debug logs and time spent on rendering. Use this information to optimize
your code, and try to keep re-renders below 16ms.
Kitchen Sink. Press F12 or click the green bug to open the KitchenSink
interface. This interface is a playground to test various tgui components.
Layout Debugger. Press F11 to toggle the layout debugger. It will show
outlines of all tgui elements, which makes it easy to understand how everything
comes together, and can reveal certain layout bugs which are not normally
visible.
Browser Developer Tools
WebView2 is chromium based, so you can access the dev tools much easier than its predecessor. Simply go to debug tab in your stat panel and click "Allow Browser Inspection". You can then f12 to open the standard chrome dev tools.
Project Structure
/packages- Each folder here represents a self-contained Node module./packages/common- Helper functions that are used throughout all packages./packages/tgui/index.ts- Application entry point./packages/tgui/interfaces- Actual in-game interfaces./packages/tgui/layouts- Root level UI components, that affect the final look and feel of the browser window. These hold various window elements, like the titlebar and resize handlers, and control the UI theme./packages/tgui/routes.ts- This is where tgui decides which interface to pull and render./packages/tgui/styles/main.scss- CSS entry point./packages/tgui/styles/functions.scss- Useful SASS functions. Stuff likelighten,darken,luminanceare 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./packages/tgui/styles/interfaces- Custom stylesheets for your interfaces. 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 themes that you can use in tgui. Each theme must be registered in/packages/tgui/index.tsfile.
License
Source code is covered by /tg/station's parent license - AGPL-3.0 (see the main README), unless otherwise indicated.
Some files are annotated with a copyright header, which explicitly states the copyright holder and license of the file. Most of the core tgui source code is available under the MIT license.
The Authors retain all copyright to their respective work here submitted.