From 456f8ae1cc8afe5e23022fad2a71cf71a206c0a6 Mon Sep 17 00:00:00 2001
From: SmArtKar <44720187+SmArtKar@users.noreply.github.com>
Date: Tue, 9 Jun 2026 23:05:57 +0200
Subject: [PATCH] Prettifies RND techweb, adds some more info to designs
 (#96334)

## About The Pull Request

Replaces normal ``<Button>``s with ``<ImageButton>``s and adds
information on where a design can be printed and how much it costs to
print to the RND techweb menu

<img width="640" height="735" alt="image"
src="https://github.com/user-attachments/assets/823d0f9b-2662-4a7e-89ee-328389b69d4e"
/>

(Ignore it being called autolathe and not protolathe, I fixed the label
for ancient lathes already)

## Why It's Good For The Game

Looks better, provides more info to new players who don't know what
designs can be printed where yet.

## Changelog
:cl:
qol: RND Techweb now displays where a design can be printed and how much
it'd cost to print
/:cl:
---
 code/__DEFINES/machines.dm                    | 13 +++++
 .../file_system/programs/techweb.dm           | 27 +++++++++-
 code/modules/research/rdconsole.dm            | 23 +++++++++
 .../tgui/interfaces/Techweb/helpers.ts        | 19 +++++--
 .../interfaces/Techweb/nodes/TechNode.tsx     | 50 +++++++++++++++++--
 .../packages/tgui/interfaces/Techweb/types.ts |  6 ++-
 6 files changed, 128 insertions(+), 10 deletions(-)

diff --git a/code/__DEFINES/machines.dm b/code/__DEFINES/machines.dm
index 1e546cf96b1..0e48cec6ccb 100644
--- a/code/__DEFINES/machines.dm
+++ b/code/__DEFINES/machines.dm
@@ -74,6 +74,19 @@
 /// For wiremod/integrated circuits. Uses various minerals.
 #define COMPONENT_PRINTER (1<<10)
 
+GLOBAL_LIST_INIT(build_types_to_string, list(
+	"[IMPRINTER]" = "Circuit Imprinter",
+	"[PROTOLATHE]" = "Protolathe",
+	"[AUTOLATHE]" = "Autolathe",
+	"[MECHFAB]" = "Exosuit Fabricator",
+	"[BIOGENERATOR]" = "Biogenerator",
+	"[LIMBGROWER]" = "Limb Grower",
+	"[SMELTER]" = "Smelter",
+	"[AWAY_LATHE]" = "Off-Grid Protolathe",
+	"[AWAY_IMPRINTER]" = "Off-Grid Circuit Imprinter",
+	"[COMPONENT_PRINTER]" = "Component Printer",
+))
+
 #define HYPERTORUS_INACTIVE 0 // No or minimal energy
 #define HYPERTORUS_NOMINAL 1 // Normal operation
 #define HYPERTORUS_WARNING 2 // Integrity damaged
diff --git a/code/modules/modular_computers/file_system/programs/techweb.dm b/code/modules/modular_computers/file_system/programs/techweb.dm
index 3f9afa61079..9e623020073 100644
--- a/code/modules/modular_computers/file_system/programs/techweb.dm
+++ b/code/modules/modular_computers/file_system/programs/techweb.dm
@@ -39,7 +39,8 @@
 
 /datum/computer_file/program/science/ui_assets(mob/user)
 	return list(
-		get_asset_datum(/datum/asset/spritesheet_batched/research_designs)
+		get_asset_datum(/datum/asset/spritesheet_batched/sheetmaterials),
+		get_asset_datum(/datum/asset/spritesheet_batched/research_designs),
 	)
 
 // heavy data from this proc should be moved to static data when possible
@@ -168,8 +169,17 @@
 		var/datum/design/design = SSresearch.techweb_designs[design_id] || SSresearch.error_design
 		var/compressed_id = "[compress_id(design.id)]"
 		var/size = spritesheet.icon_size_id(design.id)
+
+		var/cost = list()
+		var/list/materials = design.materials
+		for(var/datum/material/mat in materials)
+			cost[mat.name] = OPTIMAL_COST(materials[mat])
+
 		design_cache[compressed_id] = list(
 			design.name,
+			cost,
+			design.build_type,
+			design.departmental_flags,
 			"[size == size32x32 ? "" : "[size] "][design.id]"
 		)
 
@@ -178,10 +188,23 @@
 	for (var/id in id_cache)
 		flat_id_cache += id
 
+	var/list/department_flags = list()
+	for (var/datum/job_department/department as anything in subtypesof(/datum/job_department))
+		if (department::department_bitflags)
+			department_flags["[department::department_bitflags]"] = department::department_name
+
+	// Don't pass away flags as those are irrelevant to the station
+	var/list/build_types = GLOB.build_types_to_string.Copy()
+	build_types -= "[AWAY_IMPRINTER]"
+	build_types -= "[AWAY_LATHE]"
+
 	.["static_data"] = list(
 		"node_cache" = node_cache,
 		"design_cache" = design_cache,
-		"id_cache" = flat_id_cache
+		"id_cache" = flat_id_cache,
+		"SHEET_MATERIAL_AMOUNT" = SHEET_MATERIAL_AMOUNT,
+		"build_types" = build_types,
+		"department_flags" = department_flags,
 	)
 
 /**
diff --git a/code/modules/research/rdconsole.dm b/code/modules/research/rdconsole.dm
index 60fa5907556..1e2e0de6f02 100644
--- a/code/modules/research/rdconsole.dm
+++ b/code/modules/research/rdconsole.dm
@@ -189,6 +189,7 @@ Nothing else in the console has ID requirements.
 
 /obj/machinery/computer/rdconsole/ui_assets(mob/user)
 	return list(
+		get_asset_datum(/datum/asset/spritesheet_batched/sheetmaterials),
 		get_asset_datum(/datum/asset/spritesheet_batched/research_designs),
 	)
 
@@ -317,8 +318,17 @@ Nothing else in the console has ID requirements.
 		var/datum/design/design = SSresearch.techweb_designs[design_id] || SSresearch.error_design
 		var/compressed_id = "[compress_id(design.id)]"
 		var/size = spritesheet.icon_size_id(design.id)
+
+		var/cost = list()
+		var/list/materials = design.materials
+		for(var/datum/material/mat in materials)
+			cost[mat.name] = OPTIMAL_COST(materials[mat])
+
 		design_cache[compressed_id] = list(
 			design.name,
+			cost,
+			design.build_type,
+			design.departmental_flags,
 			"[size == size32x32 ? "" : "[size] "][design.id]"
 		)
 
@@ -327,10 +337,23 @@ Nothing else in the console has ID requirements.
 	for (var/id in id_cache)
 		flat_id_cache += id
 
+	var/list/department_flags = list()
+	for (var/datum/job_department/department as anything in subtypesof(/datum/job_department))
+		if (department::department_bitflags)
+			department_flags["[department::department_bitflags]"] = department::department_name
+
+	// Don't pass away flags as those are irrelevant to the station
+	var/list/build_types = GLOB.build_types_to_string.Copy()
+	build_types -= "[AWAY_IMPRINTER]"
+	build_types -= "[AWAY_LATHE]"
+
 	.["static_data"] = list(
 		"node_cache" = node_cache,
 		"design_cache" = design_cache,
 		"id_cache" = flat_id_cache,
+		"SHEET_MATERIAL_AMOUNT" = SHEET_MATERIAL_AMOUNT,
+		"build_types" = build_types,
+		"department_flags" = department_flags,
 	)
 
 /obj/machinery/computer/rdconsole/ui_act(action, list/params, datum/tgui/ui, datum/ui_state/state)
diff --git a/tgui/packages/tgui/interfaces/Techweb/helpers.ts b/tgui/packages/tgui/interfaces/Techweb/helpers.ts
index 8215572d64f..11368fc8e7e 100644
--- a/tgui/packages/tgui/interfaces/Techweb/helpers.ts
+++ b/tgui/packages/tgui/interfaces/Techweb/helpers.ts
@@ -1,6 +1,7 @@
 import { map } from 'es-toolkit/compat';
 
 import { useBackend } from '../../backend';
+import type { Design } from '../Fabrication/Types';
 import type { NodeCache, TechWebData } from './types';
 
 type Cost = {
@@ -13,9 +14,10 @@ type RemappedNode = NodeCache & {
   costs: Cost[];
 };
 
-type RemappedDesignCache = {
-  name: string;
+type RemappedDesignCache = Design & {
   class: string;
+  department_flags: number;
+  build_type: number;
 };
 
 // Data reshaping / ingestion (thanks stylemistake for the help, very cool!)
@@ -58,16 +60,27 @@ function selectRemappedStaticData(data: TechWebData) {
   // Do the same as the above for the design cache
   const design_cache = {} as RemappedDesignCache;
   for (const id of Object.keys(data.static_data.design_cache)) {
-    const [name, classes] = data.static_data.design_cache[id];
+    const [name, cost, build_types, department_flags, classes] =
+      data.static_data.design_cache[id];
     design_cache[remapId(id)] = {
       name: name,
+      cost: cost,
+      build_types: build_types,
+      department_flags: department_flags,
       class: classes.startsWith('design') ? classes : `design32x32 ${classes}`,
     };
   }
 
+  const SHEET_MATERIAL_AMOUNT = data.static_data.SHEET_MATERIAL_AMOUNT;
+  const build_types = data.static_data.build_types;
+  const department_flags = data.static_data.department_flags;
+
   return {
     node_cache,
     design_cache,
+    build_types,
+    department_flags,
+    SHEET_MATERIAL_AMOUNT,
   };
 }
 
diff --git a/tgui/packages/tgui/interfaces/Techweb/nodes/TechNode.tsx b/tgui/packages/tgui/interfaces/Techweb/nodes/TechNode.tsx
index 613fe82708d..03852a4b7c2 100644
--- a/tgui/packages/tgui/interfaces/Techweb/nodes/TechNode.tsx
+++ b/tgui/packages/tgui/interfaces/Techweb/nodes/TechNode.tsx
@@ -2,13 +2,14 @@ import {
   Box,
   Button,
   Collapsible,
+  ImageButton,
   ProgressBar,
   Section,
   Stack,
 } from 'tgui-core/components';
 import type { BooleanLike } from 'tgui-core/react';
-
 import { Experiment } from '../../ExperimentConfigure';
+import { MaterialCostSequence } from '../../Fabrication/MaterialCostSequence';
 import { useRemappedBackend } from '../helpers';
 import { useTechWebRoute } from '../hooks';
 import { LockedExperiment } from '../LockedExperiment';
@@ -26,6 +27,9 @@ export function TechNode(props: Props) {
   const {
     node_cache,
     design_cache,
+    SHEET_MATERIAL_AMOUNT,
+    build_types,
+    department_flags,
     experiments,
     points = [],
     nodes,
@@ -201,10 +205,48 @@ export function TechNode(props: Props) {
       </Box>
       <Box className="Techweb__NodeUnlockedDesigns" mb={2}>
         {design_ids.map((k, i) => (
-          <Button
+          <ImageButton
             key={k}
-            className={`${design_cache[k].class} Techweb__DesignIcon`}
-            tooltip={design_cache[k].name}
+            className={`$Techweb__DesignIcon`}
+            imageSize={32}
+            asset={['', design_cache[k].class]}
+            tooltip={
+              <Stack vertical>
+                <Stack.Item mt={0.3} ml={0.3}>
+                  {design_cache[k].name}
+                </Stack.Item>
+                <Stack.Item mt={-2} mb={-2} ml={-3}>
+                  <ul>
+                    <li>
+                      {Object.keys(build_types)
+                        .filter((key) => design_cache[k].build_types & +key)
+                        .map((key) => build_types[key])
+                        .join(', ')}
+                    </li>
+                    {!!Object.keys(department_flags).find(
+                      (key) => !(+key & design_cache[k].department_flags),
+                    ) && (
+                      <li>
+                        {Object.keys(department_flags)
+                          .filter(
+                            (key) => design_cache[k].department_flags & +key,
+                          )
+                          .map((key) => department_flags[key])
+                          .join(', ')}
+                      </li>
+                    )}
+                  </ul>
+                </Stack.Item>
+                <Stack.Divider />
+                <Stack.Item mt={-1}>
+                  <MaterialCostSequence
+                    design={design_cache[k]}
+                    amount={1}
+                    SHEET_MATERIAL_AMOUNT={SHEET_MATERIAL_AMOUNT}
+                  />
+                </Stack.Item>
+              </Stack>
+            }
             tooltipPosition={i % 15 < 7 ? 'right' : 'left'}
           />
         ))}
diff --git a/tgui/packages/tgui/interfaces/Techweb/types.ts b/tgui/packages/tgui/interfaces/Techweb/types.ts
index 9ccfd0d3991..07eb343bf0a 100644
--- a/tgui/packages/tgui/interfaces/Techweb/types.ts
+++ b/tgui/packages/tgui/interfaces/Techweb/types.ts
@@ -1,5 +1,6 @@
 import type { BooleanLike } from 'tgui-core/react';
 import type { ExperimentData } from '../ExperimentConfigure';
+import type { MaterialMap } from '../Fabrication/Types';
 
 type StoredDesigns = Record<string, 1>;
 
@@ -41,9 +42,12 @@ export type TechwebNode = {
 
 // Unmapped static data
 type StaticData = {
-  design_cache: Record<string, [string, string]>;
+  design_cache: Record<string, [string, MaterialMap, number, number, string]>;
   id_cache: string[];
   node_cache: Record<string, DefaultNode>;
+  build_types: Record<string, string>;
+  department_flags: Record<string, string>;
+  SHEET_MATERIAL_AMOUNT: number;
 };
 
 export type TechWebData = {