From a8678235050ad976eb13e36ce8f40d5e745bf3fd Mon Sep 17 00:00:00 2001 From: Batrachophreno Date: Fri, 5 Jun 2026 17:31:54 -0400 Subject: [PATCH] More TGUI Hotfixes (#22628) This PR will remain open/WIP for a short period of time for me to add more bugfixes to it as they are reported. changes: - bugfix: "Fixes LateJoin and Manifest interfaces not displaying department colors by creating a shared component for both interfaces to use." - bugfix: "Fixes the Manifest interface not displaying colors for crew status." --- html/changelogs/Bat-TGUIHotfixes2.yml | 5 ++ .../packages/tgui/interfaces/CrewManifest.tsx | 6 +- tgui/packages/tgui/interfaces/LateJoin.tsx | 3 +- .../interfaces/common/ManifestSection.tsx | 3 +- .../tgui/interfaces/common/departmentClass.ts | 5 ++ .../tgui/styles/interfaces/CrewManifest.scss | 61 +++++++++++++------ 6 files changed, 59 insertions(+), 24 deletions(-) create mode 100644 html/changelogs/Bat-TGUIHotfixes2.yml create mode 100644 tgui/packages/tgui/interfaces/common/departmentClass.ts diff --git a/html/changelogs/Bat-TGUIHotfixes2.yml b/html/changelogs/Bat-TGUIHotfixes2.yml new file mode 100644 index 00000000000..e967e332d8e --- /dev/null +++ b/html/changelogs/Bat-TGUIHotfixes2.yml @@ -0,0 +1,5 @@ +author: Batrachophrenoboocosmomachia +delete-after: True +changes: + - bugfix: "Fixes LateJoin and Manifest interfaces not displaying department colors by creating a shared component for both interfaces to use." + - bugfix: "Fixes the Manifest interface not displaying colors for crew status." diff --git a/tgui/packages/tgui/interfaces/CrewManifest.tsx b/tgui/packages/tgui/interfaces/CrewManifest.tsx index 05af24f3652..cd2861773ae 100644 --- a/tgui/packages/tgui/interfaces/CrewManifest.tsx +++ b/tgui/packages/tgui/interfaces/CrewManifest.tsx @@ -1,11 +1,11 @@ import { Window } from '../layouts'; -import { Manifest } from './common/Manifest'; +import { ManifestSection } from './common/ManifestSection'; export const CrewManifest = () => { return ( - + - + ); diff --git a/tgui/packages/tgui/interfaces/LateJoin.tsx b/tgui/packages/tgui/interfaces/LateJoin.tsx index 09739f9e8fa..6a29e54e4d7 100644 --- a/tgui/packages/tgui/interfaces/LateJoin.tsx +++ b/tgui/packages/tgui/interfaces/LateJoin.tsx @@ -8,6 +8,7 @@ import { import type { BooleanLike } from 'tgui-core/react'; import { useBackend } from '../backend'; import { Window } from '../layouts'; +import { departmentClass } from './common/departmentClass'; export type LateJoinData = { character_name: string; @@ -90,7 +91,7 @@ export const JobsList = (props) => {
{data.jobs_list .filter((job) => job.department === department) diff --git a/tgui/packages/tgui/interfaces/common/ManifestSection.tsx b/tgui/packages/tgui/interfaces/common/ManifestSection.tsx index aced7f1c8ab..2ac6cb977e9 100644 --- a/tgui/packages/tgui/interfaces/common/ManifestSection.tsx +++ b/tgui/packages/tgui/interfaces/common/ManifestSection.tsx @@ -1,6 +1,7 @@ import { Button, Icon, Section, Table, Tooltip } from 'tgui-core/components'; import type { BooleanLike } from 'tgui-core/react'; import { useBackend } from '../../backend'; +import { departmentClass } from './departmentClass'; type ManifestData = { manifest: { department: Crew[] }; @@ -28,7 +29,7 @@ export const ManifestSection = (props) => { key={dept} title={dept} textAlign="center" - className={`border-dept-${dept.toLowerCase()}`} + className={departmentClass(dept)} backgroundColor="rgba(10, 10, 10, 0.75)" > diff --git a/tgui/packages/tgui/interfaces/common/departmentClass.ts b/tgui/packages/tgui/interfaces/common/departmentClass.ts new file mode 100644 index 00000000000..6d82db8ce3e --- /dev/null +++ b/tgui/packages/tgui/interfaces/common/departmentClass.ts @@ -0,0 +1,5 @@ +export const departmentClass = (department: string) => + `border-dept-${department + .toLowerCase() + .replace(/[^a-z0-9]+/g, '-') + .replace(/^-|-$/g, '')}`; diff --git a/tgui/packages/tgui/styles/interfaces/CrewManifest.scss b/tgui/packages/tgui/styles/interfaces/CrewManifest.scss index 85895c60af1..a7d21bade05 100644 --- a/tgui/packages/tgui/styles/interfaces/CrewManifest.scss +++ b/tgui/packages/tgui/styles/interfaces/CrewManifest.scss @@ -1,29 +1,52 @@ $department_map: ( - 'Cargo': var(--color-brown), - 'Command': var(--color-yellow), - 'Security': var(--color-red), - 'Engineering': var(--color-orange), - 'Medical': var(--color-teal), - 'Misc': var(--color-white), - 'Science': var(--color-purple), - 'Service': var(--color-green), - 'Silicon': var(--color-pink), + 'cargo': var(--color-brown), + 'operations': var(--color-brown), + 'command': var(--color-yellow), + 'command-support': var(--color-blue), + 'security': var(--color-red), + 'engineering': var(--color-orange), + 'medical': var(--color-teal), + 'misc': var(--color-white), + 'miscellaneous': var(--color-white), + 'science': var(--color-purple), + 'service': var(--color-green), + 'civilian': var(--color-green), + 'silicon': var(--color-pink), + 'equipment': var(--color-pink), + 'off-ship': var(--color-white), ); -.CrewManifest { - @each $department-name, $color-value in $department_map { - &--#{$department-name} { - .Section { - &__title { - border-color: $color-value; - } - &__titleText { - color: $color-value; - } +$manifest_status_map: ( + 'active': var(--color-green), + 'online': var(--color-green), + 'away-mission': var(--color-blue), + 'ssd': var(--color-yellow), + 'deceased': var(--color-red), + 'missing': var(--color-orange), + 'physically-unfit': var(--color-orange), + 'disabled': var(--color-grey), +); + +@each $department-name, $color-value in $department_map { + .border-dept-#{$department-name} { + .Section { + &__title { + border-color: $color-value; + } + &__titleText { + color: $color-value; } } } +} +@each $status-name, $color-value in $manifest_status_map { + .manifest-indicator-#{$status-name} { + color: $color-value; + } +} + +.CrewManifest { &__Cell { padding: var(--space-s) 0;