Merge branch 'right-screen-and-aca' into demo6
This commit is contained in:
commit
d5e34a5b53
BIN
src/assets/airfield_knots.png
Normal file
BIN
src/assets/airfield_knots.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 91 KiB |
BIN
src/assets/altmeter.png
Normal file
BIN
src/assets/altmeter.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 83 KiB |
BIN
src/assets/plane_direction.png
Normal file
BIN
src/assets/plane_direction.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 89 KiB |
BIN
src/assets/target.png
Normal file
BIN
src/assets/target.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 76 KiB |
BIN
src/assets/turn_coordinator.png
Normal file
BIN
src/assets/turn_coordinator.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 68 KiB |
BIN
src/assets/vertical_speed.png
Normal file
BIN
src/assets/vertical_speed.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 78 KiB |
@ -1,7 +1,7 @@
|
||||
import { type AcaStatusElement as AcaStatusElementType } from 'src/types/element';
|
||||
import UsedBullet from 'src/assets/used.png';
|
||||
import UnusedBullet from 'src/assets/unused.png';
|
||||
import { useAppDispatch } from 'src/redux/hooks';
|
||||
import { useEffect, useState } from 'react';
|
||||
|
||||
type PropsType = {
|
||||
element: AcaStatusElementType;
|
||||
@ -9,11 +9,31 @@ type PropsType = {
|
||||
|
||||
const AcaStatusElement = ({ element }: PropsType) => {
|
||||
const { id, acaId, fuelLevel, h, w, weaponLoad } = element;
|
||||
const dispatch = useAppDispatch();
|
||||
const [fuel, setFuel] = useState(fuelLevel);
|
||||
const [color, setColor] = useState(fuel < 0.2 ? 'bg-red-500' : 'bg-gray-300');
|
||||
|
||||
// const dispatch = useAppDispatch();
|
||||
|
||||
useEffect(() => {
|
||||
const intervalID = setInterval(() => {
|
||||
setFuel((prevFuel) => {
|
||||
const newFuel = prevFuel - 0.005;
|
||||
setColor(newFuel < 0.2 ? 'bg-red-500' : 'bg-gray-300');
|
||||
return newFuel;
|
||||
});
|
||||
}, 100);
|
||||
|
||||
return () => clearInterval(intervalID);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div
|
||||
style={{ width: w, height: h, backgroundColor: '#2D2D30' }}
|
||||
style={{
|
||||
width: w,
|
||||
height: h,
|
||||
backgroundColor: fuel <= 0 ? '#2D2D30' : '#2D2D30',
|
||||
opacity: fuel <= 0 ? 0.5 : 1,
|
||||
}}
|
||||
className="bg-gray-800 rounded-lg flex flex-col justify-between"
|
||||
>
|
||||
<div className="flex items-center mb-2">
|
||||
@ -45,8 +65,8 @@ const AcaStatusElement = ({ element }: PropsType) => {
|
||||
<div className="w-full flex items-center h-6">
|
||||
<div className="h-1.5 w-full bg-gray-500 rounded-full">
|
||||
<div
|
||||
className={`h-1.5 bg-gray-300 rounded-full`}
|
||||
style={{ width: `${fuelLevel}%` }}
|
||||
className={`h-1.5 rounded-full ${fuel <= 0 ? 'bg-transparent' : color}`}
|
||||
style={{ width: `${fuel * 100}%` }}
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -1,8 +1,27 @@
|
||||
import airfieldKnots from "../assets/airfield_knots.png";
|
||||
import altmeter from "../assets/altmeter.png";
|
||||
import planeDirection from "../assets/plane_direction.png";
|
||||
import target from "../assets/target.png";
|
||||
import turnCoordinator from "../assets/turn_coordinator.png";
|
||||
import verticalSpeed from "../assets/vertical_speed.png";
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
const RightScreen = () => {
|
||||
return (
|
||||
<div className="flex h-screen items-center justify-center">
|
||||
<h1 className="text-6xl">Right Screen</h1>
|
||||
</div>
|
||||
<div className="flex h-screen items-center justify-start" style={{ backgroundColor: '#1E1E1E' }}>
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<img src={airfieldKnots} alt="Airfield Knots" />
|
||||
<img src={target} alt="Target" />
|
||||
<img src={turnCoordinator} alt="Turn Coordinator" />
|
||||
<img src={altmeter} alt="Altmeter" />
|
||||
<img src={planeDirection} alt="Plane Direction" />
|
||||
<img src={verticalSpeed} alt="Vertical Speed" />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
|
@ -16,7 +16,7 @@ const aca1: AcaStatusElement = {
|
||||
const aca2: AcaStatusElement = {
|
||||
type: 'aca-status',
|
||||
acaId: 2,
|
||||
fuelLevel: 0.5,
|
||||
fuelLevel: 0.2,
|
||||
weaponLoad: 0.5,
|
||||
h: 80,
|
||||
w: 132,
|
||||
@ -27,7 +27,7 @@ const aca2: AcaStatusElement = {
|
||||
const aca3: AcaStatusElement = {
|
||||
type: 'aca-status',
|
||||
acaId: 3,
|
||||
fuelLevel: 0.5,
|
||||
fuelLevel: 0.1,
|
||||
weaponLoad: 0.5,
|
||||
h: 80,
|
||||
w: 132,
|
||||
@ -38,7 +38,7 @@ const aca3: AcaStatusElement = {
|
||||
const aca4: AcaStatusElement = {
|
||||
type: 'aca-status',
|
||||
acaId: 4,
|
||||
fuelLevel: 0.5,
|
||||
fuelLevel: 0.15,
|
||||
weaponLoad: 0.5,
|
||||
h: 80,
|
||||
w: 132,
|
||||
|
Loading…
Reference in New Issue
Block a user