[MIRROR] Add a transition effect to opening PDA apps and color to flashlight (#9007)

Co-authored-by: Heroman3003 <31296024+Heroman3003@users.noreply.github.com>
Co-authored-by: CHOMPStation2 <chompsation2@gmail.com>

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<Data>();
 
+  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 && (
+        <Box className="Pda__Transition">
+          <Icon name={showTransition} size={4} />
+        </Box>
+      )}
       <Box>
         <LabeledList>
           <LabeledList.Item label="Owner" color="average">
@@ -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}
                     </Button>

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);
+  }
+}

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');