From b10094c44e464e6d40be99b11935a63bd79a49ce Mon Sep 17 00:00:00 2001 From: CHOMPStation2StaffMirrorBot <94713762+CHOMPStation2StaffMirrorBot@users.noreply.github.com> Date: Fri, 25 Apr 2025 18:28:49 -0700 Subject: [PATCH] [MIRROR] Pretty animations and UI overhaul for RIGSuits (#10743) Co-authored-by: ShadowLarkens --- code/modules/clothing/spacesuits/rig/rig.dm | 2 + .../clothing/spacesuits/rig/rig_tgui.dm | 3 + icons/hud/rig_ui_slots.dmi | Bin 0 -> 3734 bytes .../interfaces/RIGSuit/RIGSuitHardware.tsx | 279 ++++++++++++++---- .../tgui/interfaces/RIGSuit/RIGSuitLoader.tsx | 118 ++++++++ .../tgui/interfaces/RIGSuit/RIGSuitStatus.tsx | 53 +--- .../tgui/interfaces/RIGSuit/index.tsx | 9 +- .../tgui/styles/interfaces/RIGSuit.scss | 51 ++++ tgui/packages/tgui/styles/main.scss | 1 + 9 files changed, 401 insertions(+), 115 deletions(-) create mode 100644 icons/hud/rig_ui_slots.dmi create mode 100644 tgui/packages/tgui/interfaces/RIGSuit/RIGSuitLoader.tsx create mode 100644 tgui/packages/tgui/styles/interfaces/RIGSuit.scss diff --git a/code/modules/clothing/spacesuits/rig/rig.dm b/code/modules/clothing/spacesuits/rig/rig.dm index 9e6a1df3be..23c72fc036 100644 --- a/code/modules/clothing/spacesuits/rig/rig.dm +++ b/code/modules/clothing/spacesuits/rig/rig.dm @@ -803,6 +803,8 @@ /obj/item/rig/dropped(mob/user) . = ..(user) + // So the next user will see the boot animation + tgui_shared_states.Cut() for(var/piece in list("helmet","gauntlets","chest","boots")) toggle_piece(piece, user, ONLY_RETRACT) if(wearer && wearer.wearing_rig == src) diff --git a/code/modules/clothing/spacesuits/rig/rig_tgui.dm b/code/modules/clothing/spacesuits/rig/rig_tgui.dm index 2aa11cd859..8f93cb11ce 100644 --- a/code/modules/clothing/spacesuits/rig/rig_tgui.dm +++ b/code/modules/clothing/spacesuits/rig/rig_tgui.dm @@ -1,3 +1,6 @@ +// Just used to force the icon into the rsc, Byond.iconRefMap does the rest +GLOBAL_DATUM_INIT(rigsuit_ui_icon, /icon, 'icons/hud/rig_ui_slots.dmi') + /* * This defines the global UI for RIGSuits. * It has all of the relevant TGUI procs, but it's entry point is in rig_verbs.dm diff --git a/icons/hud/rig_ui_slots.dmi b/icons/hud/rig_ui_slots.dmi new file mode 100644 index 0000000000000000000000000000000000000000..a0909b688a2595ed81262908f838ae96a0a3bc3d GIT binary patch literal 3734 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 z { const { act, data } = useBackend(); const { + sealed, + aioverride, + cooling, // Disables buttons while the suit is busy sealing, // Each piece @@ -23,68 +34,212 @@ export const RIGSuitHardware = (props) => { return (
- - act('toggle_piece', { piece: 'helmet' })} - > - {helmetDeployed ? 'Deployed' : 'Deploy'} - - } + + + + + + act('toggle_piece', { piece: 'helmet' })} + /> + act('toggle_piece', { piece: 'chest' })} + /> + act('toggle_piece', { piece: 'gauntlets' })} + /> + act('toggle_piece', { piece: 'boots' })} + /> + + + + + - {helmet ? capitalize(helmet) : 'ERROR'} - - act('toggle_piece', { piece: 'gauntlets' })} - > - {gauntletsDeployed ? 'Deployed' : 'Deploy'} - - } - > - {gauntlets ? capitalize(gauntlets) : 'ERROR'} - - act('toggle_piece', { piece: 'boots' })} - > - {bootsDeployed ? 'Deployed' : 'Deploy'} - - } - > - {boots ? capitalize(boots) : 'ERROR'} - - act('toggle_piece', { piece: 'chest' })} - > - {chestDeployed ? 'Deployed' : 'Deploy'} - - } - > - {chest ? capitalize(chest) : 'ERROR'} - - +   + + + + + + + act('toggle_seals')} + > + + + + + + + + + act('toggle_ai_control')} + > + + + + + + + + + act('toggle_cooling')} + > + + + + + + + + + act('tank_settings')} + > + + + + + + + + + + +
); }; + +const HardwarePiece = (props: { + name: string; + icon: string; + selected: BooleanLike; + disabled: BooleanLike; + onClick: () => void; +}) => { + let filter; + if (props.disabled) { + filter = 'grayscale(100%) brightness(0.5)'; + } else if (props.selected) { + filter = undefined; + } else { + filter = 'grayscale(80%)'; + } + + return ( + + + + + + ); +}; diff --git a/tgui/packages/tgui/interfaces/RIGSuit/RIGSuitLoader.tsx b/tgui/packages/tgui/interfaces/RIGSuit/RIGSuitLoader.tsx new file mode 100644 index 0000000000..c917217106 --- /dev/null +++ b/tgui/packages/tgui/interfaces/RIGSuit/RIGSuitLoader.tsx @@ -0,0 +1,118 @@ +import { useEffect, useState } from 'react'; +import { Window } from 'tgui/layouts'; +import { Box, Stack } from 'tgui-core/components'; + +// This work is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License. +// http://creativecommons.org/licenses/by-sa/4.0/ +const NTLogoReact = (props) => { + return ( + + + + + + ); +}; + +const LoadingText = (props: { onFinish?: () => void }) => { + const onFinish = props.onFinish ? props.onFinish : () => {}; + useEffect(() => { + const timer = setTimeout(() => { + onFinish(); + }, 5000); + + return () => { + clearTimeout(timer); + }; + }, []); + + return ( + + RigOS Loading... + + Starting Power-On Self Test... + + + POST:{' '} + + GOOD. + + + + Loading UI... + + + All Systems Ready! + + + ); +}; + +export const LoaderNT = (props: { onFinish?: () => void }) => { + const [showLogo, setShowLogo] = useState(true); + + useEffect(() => { + setTimeout(() => { + setShowLogo(false); + }, 3500); + }, []); + + if (showLogo) { + return ( + + + + + + ); + } + + return ; +}; + +export const RIGSuitLoader = (props: { onFinish?: () => void }) => { + // You can skip to the end by clicking + const onFinish = props.onFinish ? props.onFinish : () => {}; + + return ( + + onFinish()} + style={{ cursor: 'pointer' }} + > + + + + + + ); +}; diff --git a/tgui/packages/tgui/interfaces/RIGSuit/RIGSuitStatus.tsx b/tgui/packages/tgui/interfaces/RIGSuit/RIGSuitStatus.tsx index e9b463054d..a2b6ad9b2d 100644 --- a/tgui/packages/tgui/interfaces/RIGSuit/RIGSuitStatus.tsx +++ b/tgui/packages/tgui/interfaces/RIGSuit/RIGSuitStatus.tsx @@ -5,7 +5,6 @@ import { LabeledList, ProgressBar, Section, - Stack, } from 'tgui-core/components'; import type { Data } from './types'; @@ -31,57 +30,7 @@ export const RIGSuitStatus = (props) => { } = data; return ( -
- - - - -