diff --git a/tgui/packages/tgui/interfaces/Pda/pda_screens/pda_main_menu.tsx b/tgui/packages/tgui/interfaces/Pda/pda_screens/pda_main_menu.tsx index f28d9dc497..804d3f31ba 100644 --- a/tgui/packages/tgui/interfaces/Pda/pda_screens/pda_main_menu.tsx +++ b/tgui/packages/tgui/interfaces/Pda/pda_screens/pda_main_menu.tsx @@ -1,6 +1,7 @@ import { BooleanLike } from 'common/react'; +import { useState } from 'react'; import { useBackend } from 'tgui/backend'; -import { Box, Button, LabeledList, Section } from 'tgui/components'; +import { Box, Button, Icon, LabeledList, Section } from 'tgui/components'; type Data = { owner: string; @@ -19,13 +20,43 @@ type category = { ref: string; }; +const specialIconColors = { + 'Enable Flashlight': '#0f0', + 'Disable Flashlight': '#f00', +}; + export const pda_main_menu = (props) => { const { act, data } = useBackend(); + const [showTransition, setShowTransition] = useState(''); + + const startProgram = (program: category) => { + if ( + program.name.startsWith('Enable') || + program.name.startsWith('Disable') + ) { + // Special case, instant + act('StartProgram', { program: program.ref }); + return; + } + + setShowTransition(program.icon); + + setTimeout(() => { + setShowTransition(''); + act('StartProgram', { program: program.ref }); + }, 200); + }; + const { owner, ownjob, idInserted, categories, pai, notifying, apps } = data; return ( <> + {showTransition && ( + + + + )} @@ -57,8 +88,13 @@ export const pda_main_menu = (props) => { key={app.ref} icon={app.ref in notifying ? app.notify_icon : app.icon} iconSpin={app.ref in notifying} + iconColor={ + app.name in specialIconColors + ? specialIconColors[app.name] + : null + } color={app.ref in notifying ? 'red' : 'transparent'} - onClick={() => act('StartProgram', { program: app.ref })} + onClick={() => startProgram(app)} > {app.name} diff --git a/tgui/packages/tgui/styles/interfaces/Pda.scss b/tgui/packages/tgui/styles/interfaces/Pda.scss new file mode 100644 index 0000000000..39ff88c3fa --- /dev/null +++ b/tgui/packages/tgui/styles/interfaces/Pda.scss @@ -0,0 +1,37 @@ +.Pda__Transition { + display: flex; + justify-content: center; + align-items: center; + // Fill positioned parent + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + z-index: 1; + // Dim + animation: dim 0.4s forwards; +} + +.Pda__Transition > i { + animation: center-scale 0.4s forwards; + transform-origin: center center; +} + +@keyframes dim { + from { + background: rgba(0, 0, 0, 0); + } + to { + background: rgba(0, 0, 0, 0.5); + } +} + +@keyframes center-scale { + from { + transform: scale(1); + } + to { + transform: scale(4); + } +} diff --git a/tgui/packages/tgui/styles/main.scss b/tgui/packages/tgui/styles/main.scss index 3e2b99c02d..4f115f75d9 100644 --- a/tgui/packages/tgui/styles/main.scss +++ b/tgui/packages/tgui/styles/main.scss @@ -58,6 +58,7 @@ @include meta.load-css('./interfaces/ExperimentConfigure.scss'); @include meta.load-css('./interfaces/NuclearBomb.scss'); @include meta.load-css('./interfaces/Paper.scss'); +@include meta.load-css('./interfaces/Pda.scss'); @include meta.load-css('./interfaces/Roulette.scss'); @include meta.load-css('./interfaces/Safe.scss'); @include meta.load-css('./interfaces/TachyonArray.scss');