add animation
Co-authored-by: Paul Chon <Polfish@users.noreply.github.com>
This commit is contained in:
Elena Schramme
parent
fba546aa59
commit
df07a4c0ad
@ -1,4 +1,4 @@
|
||||
import { useEffect, useState } from 'react';
|
||||
import { Key, useEffect, useState, useRef } from 'react';
|
||||
import { v4 as uuid } from 'uuid';
|
||||
import { useAppSelector } from 'src/redux/hooks';
|
||||
import { getGazesAndKeys } from 'src/redux/slices/gazeSlice';
|
||||
@ -10,7 +10,12 @@ type EscalationModeElementProps = {
|
||||
element: EscalationModeElementType;
|
||||
};
|
||||
|
||||
const EscalationModeElement = ({ element }: EscalationModeElementProps) => {
|
||||
|
||||
const EscalationModeElement = ({
|
||||
element,
|
||||
}: EscalationModeElementProps) => {
|
||||
|
||||
|
||||
const gazesAndKeys = useAppSelector(getGazesAndKeys);
|
||||
const approveDenyButtonElement = {
|
||||
id: uuid(),
|
||||
@ -40,40 +45,42 @@ const EscalationModeElement = ({ element }: EscalationModeElementProps) => {
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
}, [gazesAndKeys]);
|
||||
}, [gazesAndKeys]);
|
||||
|
||||
|
||||
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" 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'}}>
|
||||
<img src={MissileIcon} alt="Missile Icon" className="ml-4" style={{ width: '80px', height: '80px', marginLeft: '67px', marginRight: '26px', marginTop: '40px' }} />
|
||||
<h3 className="text-lg font-semibold" style={{ fontSize: '64px', marginBottom: '40px', height: '128px', width: '488px',lineHeight: '64px', marginTop: '80px' }}>Missile Heading Towards Ownship!</h3>
|
||||
<div className="flex items-center mb-4" style={{ width: '800px' }}>
|
||||
<img src={MissileIcon} alt="Missile Icon" className="ml-4" style={{ width: '80px', height: '80px', marginLeft: '67px', marginRight: '26px', marginTop: '40px' }} />
|
||||
<h3 className="text-lg font-semibold" style={{ fontSize: '64px', marginBottom: '40px', height: '128px', width: '488px', lineHeight: '64px', marginTop: '80px' }}>Missile Heading Towards Ownship!</h3>
|
||||
</div>
|
||||
<p style={{ fontSize: '38px', marginBottom: '70px' , height: '39px', width: '421px', color: '#BCBCBC', marginLeft: '43px'}}>ACA-7 detected launch</p>
|
||||
<table className="table-auto mb-4 no-outer-border" style={{ fontSize: '38px', width: '708px', height: '120px', marginLeft: '15px', borderCollapse: 'collapse'}}>
|
||||
<tbody>
|
||||
<tr style={{background: '#151515'}}>
|
||||
<td style={{ border: '1px solid #585864', padding: '8px', color: '#BCBCBC', borderLeft: '0px' }}>Time to Impact:</td>
|
||||
<td style={{ border: '1px solid #585864', padding: '8px', fontSize: '38px', borderRight: '0px' }} className="text-lg font-bold">45 seconds</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style={{ border: '1px solid #585864', padding: '8px', color: '#BCBCBC', borderLeft: '0px' }}>Missile Type:</td>
|
||||
<td style={{ border: '1px solid #585864', padding: '8px', fontSize: '38px', borderRight: '0px' }} className="text-lg font-bold">SAM</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<p style={{ fontSize: '38px', marginBottom: '70px', height: '39px', width: '421px', color: '#BCBCBC', marginLeft: '43px' }}>ACA-7 detected launch</p>
|
||||
<table className="table-auto mb-4 no-outer-border" style={{ fontSize: '38px', width: '708px', height: '120px', marginLeft: '15px', borderCollapse: 'collapse' }}>
|
||||
<tbody>
|
||||
<tr style={{ background: '#151515' }}>
|
||||
<td style={{ border: '1px solid #585864', padding: '8px', color: '#BCBCBC', borderLeft: '0px' }}>Time to Impact:</td>
|
||||
<td style={{ border: '1px solid #585864', padding: '8px', fontSize: '38px', borderRight: '0px' }} className="text-lg font-bold">45 seconds</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style={{ border: '1px solid #585864', padding: '8px', color: '#BCBCBC', borderLeft: '0px' }}>Missile Type:</td>
|
||||
<td style={{ border: '1px solid #585864', padding: '8px', fontSize: '38px', borderRight: '0px' }} className="text-lg font-bold">SAM</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div style={{ transform: 'scale(1.5)', marginTop: '100px', marginLeft: '106px'}}>
|
||||
<ApproveDenyButtonElement element={approveDenyButtonElement} />
|
||||
<div style={{ transform: 'scale(1.5)', marginTop: '100px', marginLeft: '106px' }}>
|
||||
<ApproveDenyButtonElement element={approveDenyButtonElement} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div><div className="alert-element bg-#252526 text-white shadow-lg p-4" style={{ width: '560px', height: '985px' }}>
|
||||
</div>
|
||||
<div className="alert-element bg-#252526 text-white shadow-lg p-4" 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' }}>
|
||||
<tbody>
|
||||
<tr style={{background: '#151515'}}>
|
||||
<tr style={{ background: '#151515' }}>
|
||||
<td className="pr-4" style={tablestyleLeftRow}>reporter:</td>
|
||||
<td style={tablestyleRightRow}>ACA-7</td>
|
||||
</tr>
|
||||
@ -81,7 +88,7 @@ const EscalationModeElement = ({ element }: EscalationModeElementProps) => {
|
||||
<td className="pr-4" style={tablestyleLeftRow}>threat:</td>
|
||||
<td style={tablestyleRightRow}>SA_4</td>
|
||||
</tr>
|
||||
<tr style={{background: '#151515'}}>
|
||||
<tr style={{ background: '#151515' }}>
|
||||
<td className="pr-4" style={tablestyleLeftRow}>location:</td>
|
||||
<td style={tablestyleRightRow}>34° N, 118° W</td>
|
||||
</tr>
|
||||
@ -89,7 +96,7 @@ const EscalationModeElement = ({ element }: EscalationModeElementProps) => {
|
||||
<td className="pr-4" style={tablestyleLeftRow}>distance:</td>
|
||||
<td style={tablestyleRightRow}>620 mi</td>
|
||||
</tr>
|
||||
<tr style={{background: '#151515'}}>
|
||||
<tr style={{ background: '#151515' }}>
|
||||
<td className="pr-4" style={tablestyleLeftRow}>altitude:</td>
|
||||
<td style={tablestyleRightRow}>20,000 ft</td>
|
||||
</tr>
|
||||
@ -97,7 +104,7 @@ const EscalationModeElement = ({ element }: EscalationModeElementProps) => {
|
||||
<td className="pr-4" style={tablestyleLeftRow}>time to impact:</td>
|
||||
<td style={tablestyleRightRow}>45 sec</td>
|
||||
</tr>
|
||||
<tr style={{background: '#151515'}}>
|
||||
<tr style={{ background: '#151515' }}>
|
||||
<td className="pr-4" style={tablestyleLeftRow}>priority:</td>
|
||||
<td style={tablestyleRightRow}>high</td>
|
||||
</tr>
|
||||
@ -105,7 +112,7 @@ const EscalationModeElement = ({ element }: EscalationModeElementProps) => {
|
||||
<td className="pr-4" style={tablestyleLeftRow}>threat-level:</td>
|
||||
<td style={tablestyleRightRow}>high</td>
|
||||
</tr>
|
||||
<tr style={{background: '#151515'}}>
|
||||
<tr style={{ background: '#151515' }}>
|
||||
<td className="pr-4" style={tablestyleLeftRow}>survivability:</td>
|
||||
<td style={tablestyleRightRow}>80%</td>
|
||||
</tr>
|
||||
@ -113,7 +120,7 @@ const EscalationModeElement = ({ element }: EscalationModeElementProps) => {
|
||||
<td className="pr-4" style={tablestyleLeftRow}>col. damage:</td>
|
||||
<td style={tablestyleRightRow}>29%</td>
|
||||
</tr>
|
||||
<tr style={{background: '#151515'}}>
|
||||
<tr style={{ background: '#151515' }}>
|
||||
<td className="pr-4" style={tablestyleLeftRow}>missile type:</td>
|
||||
<td style={tablestyleRightRow}>SAM</td>
|
||||
</tr>
|
||||
|
||||
@ -21,7 +21,7 @@ const EscalationWidget = ({ widget}: EscalationWidgetProps) => {
|
||||
height: h,
|
||||
zIndex: '1000',
|
||||
}}
|
||||
className="absolute bg-[#252526] flex gap-4 py-2"
|
||||
className="absolute bg-[#252526] flex gap-4 py-2 animate-slide-in-left"
|
||||
>
|
||||
{firstElements.map((element) => (
|
||||
<EscalationModeElement
|
||||
|
||||
@ -8,6 +8,31 @@ const config = {
|
||||
// default: 'url(https://i.stack.imgur.com/UOvLJ.png), default',
|
||||
// pointer: 'url(https://i.stack.imgur.com/UOvLJ.png), pointer',
|
||||
// },
|
||||
animation: {
|
||||
"slide-in-left": 'slide-in-left 10s ease-out'
|
||||
},
|
||||
keyframes: {
|
||||
"slide-in-left": {
|
||||
'0%': {
|
||||
transform: 'translateX(100%)'
|
||||
},
|
||||
'25%': {
|
||||
transform: 'translateX(0)'
|
||||
},
|
||||
'50%': {
|
||||
opacity: 0.75
|
||||
},
|
||||
'75%': {
|
||||
opacity: 0.50
|
||||
},
|
||||
'87%': {
|
||||
opacity: 0.25
|
||||
},
|
||||
'100%': {
|
||||
opacity: 0
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
fontFamily: {
|
||||
sans: ['Roboto Condensed', 'system-ui', 'sans-serif'],
|
||||
|
||||
Loading…
Reference in New Issue
Block a user