Merge branch 'right-screen-and-aca' into demo6

src/components/Element/Complex/AcaStatusElement.tsx

@@ -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>

src/pages/RightScreen.tsx

@@ -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>
   );
 };
 

src/prototype/utils/initialAcaHeader.ts

@@ -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,