Files
ArrisFairburne e9061e8b19 Blacksmith Revamp (#5360)
## About The Pull Request

Makes a number of changes to blacksmithing to make the role more
appealing, convenient, and special:

<details>
<summary>New Additions</summary>

- [ ] Added a new blacksmith recipe that requires legendary skill and
the skillchip: parts for a classical single-action revolver. High
damage, but finnicky to use; no safety mechanism, can't accept speed
loaders, and the hammer has to be cocked before each shot. Cocking the
hammer is faster if both hands are free, allowing for fanning the
hammer.
- [ ] Smiths can now make new storage options: a cowboy holster that
stores a handgun and multiple ammo boxes, a charging belt that recharges
one energy gun, a botany bag with expanded storage, and multiple types
of scabbards.
- [ ] Added a new skillchip specific to blacksmithing; without the
skillchip, your options on what you can produce via smithing are
reduced. This is to make it so that the smithing job role (or at least,
whoever has been given the skillchip from the QM's locker) is more
special. Currently smithing is just sort of something anyone can do, the
only things unique about spawning in as the blacksmith is that you have
cargo access and smithing-specific bounties.
- [ ] Replaced the water barrel with a new structure: the reagent
quenching trough. This spawns in filled with a new reagent, quenching
oil. Quenching a smithing item in the trough with any reagent will imbue
it for zero reagent use, and heat the trough's reagent.
</details>

<details>
<summary>General direction changes</summary>

- [ ] Perfect hits are no longer probability-dependant; they're based on
the player's timing. Except if the player is max level at blacksmithing,
in which case all hits are perfects.
- [ ] Right-clicking with a hammer on the anvil will allow the player to
automatically forge the item they're working on, with a slower pace
compared to manual forging. This is mostly meant to allow talking to
someone while working on forges.
- [ ] Removed multi-anvil smithing; blacksmithing lacks a dedicated
space on most maps and so must occupy a hallway or something else
instead. "Playing optimally" with multi-anvil smithing means taking up
significantly more space, in addition to looking extremely silly and
bypassing part of the loop with blacksmithing (levelling up the smithing
skills to produce equipment faster); the smithing chip will reduce the
swings needed to finish a job to compensate.
- [ ] Reworked reagent imbued equipment; removed the bonus from leaving
a weapon unimbued. This bonus can now be regained specifically by
imbuing smithing oil (smithing oil is special; imbuing it doesn't
inflict it as a reagent for effects, but makes the armor/weapon/etc.
better by numbers). Also, reagent imbued equipment no longer has a big
damage multiplier but will merely stop applying reagents after a certain
integrity threshold is passed.
- [ ] Significantly reduced the income from smithing cargo bounties. It
honestly kind of sucks that blacksmiths' value to the station is that
they print money and not for the actual quality of their items.
- [ ] Blacksmiths now have weapon access by default. It's honestly kind
of weird that the guy whose whole schtick is making weapons, didn't have
weapon access to start.
- [ ] Moved the crusader belt from the general crafting menu to the
smithing crafting menu; it now requires lv7 smithing and the smithing
chip. This change is because it's highly contingent on blacksmithing
equipment for its main storage so it seems most sensible for a smith to
work it.
- [ ] The leather apron that blacksmiths roundstart with now has
dedicated storage for various smithing and glassblowing tools.
</details>
<details>
<summary>Interactivity changes</summary>

- [ ] Trying to pick up a heated blacksmith item will now burn your
hand.
- [ ] Various quenched smithing items now have associated force values
for dealing damage, but will also (usually) cut the user's hand for
doing so.
- [ ] You can now use water tiles or certain reagent containers (needs
at least 300 units) to quench smithing equipment.
- [ ] The forge now heats up it's surroundings and burns carbon dioxide
while doing so. The wall-mounted heater now auto charges it's cell to
compensate for this.
- [ ] You can now weapon-bash your blacksmithing shields, similar to how
you can slap your baton against your riot shields to intimidate.
</details>

<details>
<summary>Convenience and misc.</summary>

- [ ] Changed the Rapier sprites to match the other smithing weapon
sprites.
- [ ] Added more tutorial tooltips when inspecting blacksmith equipment.
- [ ] The blacksmithing noises are quieter, thank god.
- [ ] Using tongs on a stack now pulls only one item from the stack,
instead of pulling all items in the stack. You never actually want to
have more than one sheet in the tongs so there's no reason to include it
really.
- [ ] Completed blacksmith items can now be picked up with tongs and
placed into the crafting bench with them. This is meant to reduce the
tool-juggling for moving the item from the anvil to the basin, then
moving the item from the basin to the bench.
- [ ] The blacksmith ID trim now has an actual icon 
- [ ] Commented out the cortical borer cage recipe. We don't really need
this since we don't run cortical borers.
- [ ] Halved the number of necessary chains and plates for all recipes,
but doubled the time needed to hammer them; this is to reduce how much
item juggling is needed.
- [ ] Cargo guards and cargo secoffs now have blacksmithing access.
- [ ] Ensure that Ashwalkers, Primal Podpeople, and feral nekos have all
the same mechanics as a skillchipped crewie, except cannot make the
revolver
</details>

<details>
<summary>Code refactoring</summary>

- [ ] The reagent clothing and reagent weapon components now come from a
general reagent imbued parent component.
- [ ] Refactored how anvil smithing works; it now relies on an item
component that handles item heat, hammer strikes, and quenching, instead
of all the code being handled within the anvil itself.
- [ ] Removed the skyrat_obj_flags variable that only functioned for the
anvil_repair flag and nothing else. We have different ways to check for
the stuff it relied on so it's not really needed.
- [ ] Removed the in_use code from various forging objects. It's a
really cumbersome system and annoying to manage all the time. Doafters
with interaction_key stand as a replacement.
</details>

Overall, in the hands of blacksmiths, smithing-chipped characters, and
the tribal factions, this should feel like a general buff. For everyone
else, this should feel like a nerf, and they should go to the blacksmith
or get skillchipped so they can make smithing stuff. It should also feel
less 'shallow' and a bit more interactive with the rest of the game.

## Proof Of Testing
<details>
<summary>Screenshots/Videos</summary>

<img width="180" height="108" alt="image"
src="https://github.com/user-attachments/assets/fff5bf67-2f6b-42e6-b8a6-920b5ef8bf26"
/>

<img width="399" height="52" alt="image"
src="https://github.com/user-attachments/assets/f7a1f395-d060-49ad-848f-52d0e4303177"
/>

https://youtu.be/hcPZXzCOSIU

https://youtu.be/V7GeLetcRtk

https://youtu.be/YEyW9pKidTU

</details>

## Changelog
🆑
add: Way, way too many blacksmith job features & smithing system changes
to list. But here's the highlights:
balance: Forged blacksmith weapons can now be used nonlethally via
striking with pommels, spear shafts, etc. which knocks down victims and
stamina damages them like a weaker baton.
qol: Blacksmith tongs now only pull one item at a time, if used on a
stackable item.
qol: Blacksmiths can now auto-smith at an anvil by right clicking with a
hammer.
qol: Blacksmithing tools now have more tooltips to tutorialize their
usage.
qol: Blacksmithing crafting bench can now store item stacks, forging
plates, and forging chains. Right-click to view what's in it.
balance: Removed multi-anvil smithing. Individual smithing pieces can
now be made faster with the smithing chip and other means to compensate.
add: Blacksmiths can now build a single action revolver if they are
fully levelled.
add: Blacksmiths can build a variety of new equipment at the crafting
bench -- gun-charging holsters, knife belts, multiple types of
scabbards, and even a new expanded-storage botany bag.
add: Replaced the water barrel for smithing with a barrel of smithing
oil; smithing oil is now used to grant the bonuses that was previously
given by leaving the item unimbued. The new barrel can have its contents
changed for reagent imbuing.
add: A new reagent "smithing oil" which gives innate bonuses to any
blacksmith equipment imbued using it.
balance: Material types now affect the quality of resulting items and
how quickly they can be forged.
balance: The reagent smithing hammer now has increased toolspeed if
forged well.
balance: Reagent imbuing's durability penalty has been altered; it
reduces durability for each time an imbue effect procs, and then stops
functioning for such when below a certain durability percentage.
/🆑

---------

Co-authored-by: Mathilde <146444134+ibexgoetia@users.noreply.github.com>
Co-authored-by: The Sharkening <95130227+StrangeWeirdKitten@users.noreply.github.com>
Co-authored-by: LT3 <83487515+lessthnthree@users.noreply.github.com>
Co-authored-by: Roxy <75404941+TealSeer@users.noreply.github.com>
2026-07-03 15:05:07 -04:00
..
2026-07-03 15:05:07 -04:00

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 youll 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

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.

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 here or Open PowerShell window here.

Via Juke Build (cross-platform(No)):

  • tools/build/build.sh tgui - Build tgui in production mode.
  • tools/build/build.sh tgui-dev - Build tgui in production mode.
    • tools/build/build.sh tgui-dev --reload - Reload byond cache once.
    • tools/build/build.sh tgui-dev --debug - Run server with debug logging enabled.
  • tools/build/build.sh tgui-lint - Show (and auto-fix) problems with the code.
  • tools/build/build.sh tgui-test - Run unit and integration tests.
  • tools/build/build.sh tgui-analyze - Run a bundle analyzer.
  • tools/build/build.sh tgui-clean - Clean up tgui folder.

With Juke Build, you can run multiple targets together, e.g.:

tools/build/build.sh tgui tgui-lint tgui-tsc tgui-test

Via Bun (cross-platform):

Run bun install once to install tgui dependencies.

  • bun tgui:build - Build tgui in production mode.
    • bun tgui:build [options] - Build tgui with custom webpack options.
  • bun tgui:dev - Launch a development server.
    • bun tgui:dev --reload - Reload byond cache once.
    • bun tgui:dev --debug - Run server with debug logging enabled.
  • bun tgui:lint - Show (and auto-fix) problems with the code.
  • bun tgui:tsc - Check code with TypeScript compiler.
  • bun tgui:test - Run unit and integration tests.
  • bun tgui:analyze - Run a bundle analyzer.
  • bun tgfont:build - Build icon fonts.

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.

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 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.
  • /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.ts file.

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.