bug fix-creating for escalation animation
This commit is contained in:
parent
116260e908
commit
4d7e346308
@ -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.');
|
||||
}
|
||||
|
@ -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>
|
||||
|
@ -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'],
|
||||
|
Loading…
Reference in New Issue
Block a user