improvements for escalation mode

src/components/Element/Complex/EscalationModeElement.tsx

@@ -1,4 +1,4 @@
-import { Key, useEffect, useState } from 'react';
+import { type Dispatch, Key, type SetStateAction, useEffect, useState } from 'react';
 import { v4 as uuid } from 'uuid';
 import { useAppSelector } from 'src/redux/hooks';
 import { getGazesAndKeys } from 'src/redux/slices/gazeSlice';
@@ -8,17 +8,23 @@ import MissileIcon from 'src/assets/icons/threats/missile-lg-emph.svg';
 
 type EscalationModeElementProps = {
   element: EscalationModeElementType;
+  animation: string
+  animationClass: string
+  setAnimation: (action: 'approve' | 'deny') => void;
+  setAnimationClass: Dispatch<SetStateAction<string>>
   onAction?: (action: 'approve' | 'deny') => void;
 };
 
 
 const EscalationModeElement = ({ 
     element, 
+    onAction,
+    setAnimation,
+    setAnimationClass,
+    animation,
+    animationClass
 }: EscalationModeElementProps) => {
 
-  const [animation, setAnimation] = useState<'approve' | 'deny' | 'moreInfo' | 'up' | undefined>(undefined,);
-  const [animationClass, setAnimationClass] = useState('animate-slide-in-right');
-
   const gazesAndKeys = useAppSelector(getGazesAndKeys);
   const approveDenyButtonElement = {
     id: uuid(),
@@ -47,6 +53,16 @@ const EscalationModeElement = ({
     borderRight: '0px'
   }
 
+  const handleApprove = () => {
+    setAnimation('approve');
+    if (onAction) onAction('approve');
+  };
+
+  const handleDeny = () => {
+    setAnimation('deny');
+    if (onAction) onAction('deny');
+  };
+
   useEffect(() => {
     if (animation === 'approve' || animation === 'deny') {
       setAnimationClass('animate-blur-away');
@@ -72,7 +88,8 @@ const EscalationModeElement = ({
 
 
   return (
-    <><div className={`alert-element bg-#1E1E1E text-white shadow-lg p-7 ${animationClass}`}  style={{ width: '800px', height: '985px', boxShadow: '8px 0px 60px 0px #000000', zIndex: 1000}}>
+    <><div className='bg-[rgba(37,37,38,0.5)] text-white shadow-lg p-7' style={{opacity:0, width: '560px' }}></div>
+    <><div className={`alert-element bg-#1E1E1E text-white shadow-lg p-7 ${animationClass}`} style={{ width: '800px', height: '985px', boxShadow: '8px 0px 60px 0px #000000', zIndex: 1000 }}>
           <div className="w-1/2 pr-4">
               <div className="mb-4" style={{ width: '488px', height: '128px' }}>
                   <div className="flex items-center mb-4" style={{ width: '800px' }}>
@@ -154,7 +171,7 @@ const EscalationModeElement = ({
                       </tbody>
                   </table>
               </div>
-          </div></>
+          </div></></>
   );
   
 };

src/components/Widget/EscalationWidget.tsx

@@ -1,4 +1,4 @@
-import NOTCH from 'src/assets/icons/Ownship Notch.svg';
+import { useState, useEffect } from 'react';
 import type { EscalationModeWidget as EscalationModeWidgetType } from 'src/types/widget';
 import type { EscalationModeElement as EscalationModeElementType } from 'src/types/element';
 import EscalationModeElement from 'src/components/Element/Complex/EscalationModeElement';
@@ -7,12 +7,22 @@ type EscalationWidgetProps = {
   widget: EscalationModeWidgetType;
 };
 
-const EscalationWidget = ({ widget}: EscalationWidgetProps) => {
+const EscalationWidget = ({ widget }: EscalationWidgetProps) => {
   const { x, y, h, w, elements } = widget;
+  const [initial, setInitial] = useState(true);
+  const [animation, setAnimation] = useState<'approve' | 'deny' | undefined>(undefined,);
+  const [animationClass, setAnimationClass] = useState('animate-slide-in-right');
 
-    var firstElements = structuredClone(elements);
+  useEffect(() => {
+    const timer = setTimeout(() => setInitial(false), 10000); // remove slide-in after 10 seconds
+    return () => clearTimeout(timer);
+  }, []);
 
-    return(
+  const handleAction = (action: 'approve' | 'deny') => {
+    // Logic to handle approve/deny action
+  };
+
+  return (
     <div
       style={{
         top: y,
@@ -21,19 +31,21 @@ const EscalationWidget = ({ widget}: EscalationWidgetProps) => {
         height: h,
         zIndex: '1000',
       }}
-            className="absolute bg-[#252526] flex gap-4 py-2 animate-slide-in-left"
+      className={`absolute bg-[#252526] flex gap-4 py-2 ${animationClass}`}
     >
-            {firstElements.map((element) => (
+      {elements.map((element) => (
         <EscalationModeElement
           key={element.id}
           element={element as EscalationModeElementType}
-                    onAction={(action) => {
-                        // Handle any additional logic when action is taken, e.g., logging, state updates
-                      }}
+          onAction={handleAction}
+          animation={animation!}
+          animationClass={animationClass}
+          setAnimation={setAnimation}
+          setAnimationClass={setAnimationClass}
         />
       ))}
     </div>
-    )
+  );
 };
 
 export default EscalationWidget;

src/prototype/lpd/stress/highLPD.ts

@@ -222,10 +222,10 @@ const missileToOwnshipDetectedMessageHigh = (
       id: minimapWidgetId1, // this should be something static?
       sectionType: 'minimap',
       type: 'escalation',
-      x: 560,
+      x: 0,
       y: 85,
       h: 979,
-      w: 1360,
+      w: 1919,
       screen: '/minimap',
       canOverlap: false,
       useElementLocation: false,

tailwind.config.js

@@ -4,7 +4,7 @@ const config = {
     extend: {
       animation: {
         "slide-in-right": 'slide-in-right 2s ease-out forwards',
-        "blur-away": 'blur-away 7s ease-out forwards',
+        "blur-away": 'blur-away 9s ease-out forwards',
       },
       keyframes: {
         "slide-in-right": {
@@ -13,7 +13,7 @@ const config = {
             opacity: 0,
           },
           '100%': {
-            transform: 'translateX(560px)',
+            transform: 'translateX(0%)',
             opacity: 1,
           },
         },
@@ -21,11 +21,11 @@ const config = {
           '0%': {
             opacity: 1,
           },
-          '20%': {
+          '80%': {
             opacity: 1,
           },
           '100%': {
-            opacity: 1,
+            opacity: 0,
           },
         },
       },