bug fix-creating for escalation animation

src/components/Element/Complex/EscalationModeElement.tsx

@@ -1,4 +1,4 @@
-import { Key, useEffect, useState, useRef } from 'react';
+import { Key, useEffect, useState } from 'react';
 import { v4 as uuid } from 'uuid';
 import { useAppSelector } from 'src/redux/hooks';
 import { getGazesAndKeys } from 'src/redux/slices/gazeSlice';
@@ -8,6 +8,7 @@ import MissileIcon from 'src/assets/icons/threats/missile-lg-emph.svg';
 
 type EscalationModeElementProps = {
   element: EscalationModeElementType;
+  onAction?: (action: 'approve' | 'deny') => void;
 };
 
 
@@ -15,6 +16,8 @@ const EscalationModeElement = ({
     element, 
 }: 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 = {
@@ -45,11 +48,31 @@ const EscalationModeElement = ({
   }
 
   useEffect(() => {
-}, [gazesAndKeys]);
+    if (animation === 'approve' || animation === 'deny') {
+      setAnimationClass('animate-blur-away');
+    }
+
+    const handleKeyPress = (e: KeyboardEvent) => {
+      if (animation !== 'deny' && e.key === 'h') { // left mouse button
+        setAnimation('deny');
+        onAction?.('deny');
+      } else if (animation !== 'approve' && e.key === 'l') { // right mouse button
+        setAnimation('approve');
+        onAction?.('approve');
+      }
+    };
+
+    window.addEventListener('keypress', handleKeyPress);
+
+    return () => {
+      window.removeEventListener('keypress', handleKeyPress);
+    };
+  }, [animation, onAction]);
+
 
 
   return (
-    <><div className="alert-element bg-#1E1E1E text-white shadow-lg p-7" style={{ width: '800px', height: '985px', boxShadow: '8px 0px 60px 0px #000000', zIndex: 1000}}>
+    <><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' }}>
@@ -75,7 +98,7 @@ const EscalationModeElement = ({
               </div>
           </div>
       </div>
-      <div className="alert-element bg-#252526 text-white shadow-lg p-4" style={{ width: '560px', height: '985px' }}>
+      <div className={`alert-element bg-#1E1E1E text-white shadow-lg p-7 ${animationClass}`}  style={{ width: '560px', height: '985px' }}>
               <div className="w-1/2 pl-4">
                   <h4 style={{ fontSize: '38px', height: '39px', width: '421px', marginBottom: '30px', marginTop: '50px', color: '#B7B7B7' }}>Additional Information</h4>
                   <table className="table-auto" style={{ fontSize: '32px', height: '711px', width: '443px', borderCollapse: 'collapse' }}>
@@ -136,4 +159,8 @@ const EscalationModeElement = ({
   
 };
 
-export default EscalationModeElement;
+export default EscalationModeElement;
+
+function onAction(arg0: string) {
+    throw new Error('Function not implemented.');
+}

src/components/Widget/EscalationWidget.tsx

@@ -11,7 +11,6 @@ const EscalationWidget = ({ widget}: EscalationWidgetProps) => {
     const { x, y, h, w, elements } = widget;
 
     var firstElements = structuredClone(elements);
-    console.log('elements: ' + elements)
 
     return(
         <div
@@ -28,6 +27,9 @@ const EscalationWidget = ({ widget}: EscalationWidgetProps) => {
                 <EscalationModeElement
                     key={element.id}
                     element={element as EscalationModeElementType}
+                    onAction={(action) => {
+                        // Handle any additional logic when action is taken, e.g., logging, state updates
+                      }}
             />
                 ))}
         </div>

tailwind.config.js

@@ -1,34 +1,34 @@
-/** @type {import('tailwindcss').Config} */
-
 const config = {
   content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
   theme: {
     extend: {
       animation: {
-        "slide-in-left": 'slide-in-left 10s ease-out forwards'
+        "slide-in-right": 'slide-in-right 2s ease-out forwards',
+        "blur-away": 'blur-away 7s ease-out forwards',
       },
       keyframes: {
-        "slide-in-left": {
+        "slide-in-right": {
           '0%': {
             transform: 'translateX(100%)',
-            opacity: 1,
-          },
-          '50%': {
-            transform: 'translateX(50%)',
-            opacity: 0.75,
-          },
-          '75%': {
-            opacity: 0.50,
-          },
-          '87%': {
-            opacity: 0.25,
+            opacity: 0,
           },
           '100%': {
             transform: 'translateX(560px)',
-            opacity: 0,
+            opacity: 1,
           },
-        }
-      }
+        },
+        "blur-away": {
+          '0%': {
+            opacity: 1,
+          },
+          '20%': {
+            opacity: 1,
+          },
+          '100%': {
+            opacity: 1,
+          },
+        },
+      },
     },
     fontFamily: {
       sans: ['Roboto Condensed', 'system-ui', 'sans-serif'],