fix: adjusted the left and right ammos to be different.

src/components/Element/Complex/AcaStatusElement.tsx

@@ -1,6 +1,8 @@
 import { type AcaStatusElement as AcaStatusElementType } from 'src/types/element';
-import UsedBullet from 'src/assets/used.png';
+import UsedBulletLeft from 'src/assets/used.png';
-import UnusedBullet from 'src/assets/unused.png';
+import UnusedBulletLeft from 'src/assets/unused.png';
+import UnusedBulletRight from 'src/assets/unused_right.png';
+import UsedBulletRight from 'src/assets/used_right.png';
 import { useAppDispatch } from 'src/redux/hooks';
 
 type PropsType = {
@@ -9,8 +11,35 @@ type PropsType = {
 
 const AcaStatusElement = ({ element }: PropsType) => {
   const { id, acaId, fuelLevel, h, w, weaponLoad } = element;
+  
   const dispatch = useAppDispatch();
 
+
+  const getFuelColor = () => {
+    if (fuelLevel < 0.2) {
+      return 'bg-red-500';
+    }
+    return 'bg-gray-300';
+  };
+
+
+  const getLeftWeaponLoad = (index:number) => {
+    return index < weaponLoad * 4 ? 'Used' : 'Unused';
+  }
+
+  const getRightWeaponLoad = (index:number) => {
+    return index < weaponLoad * 4 ? 'Used' : 'Unused';
+  }
+
+
+
+  
+  
+
+
+
+
+
   return (
     <div
       style={{ width: w, height: h, backgroundColor: '#2D2D30' }}
@@ -18,36 +47,36 @@ const AcaStatusElement = ({ element }: PropsType) => {
     >
       <div className="flex items-center mb-2">
         <div className={`w-2 h-2 rounded-full bg-blue-500 mr-2`}></div>
-        <span className="text-white text-lg font-bold">ACA{acaId}</span>
+        <span className="text-[20px] text-white text-lg font-bold">ACA-{acaId}</span>
       </div>
-      <div className="flex justify-between w-full mb-2 space-x-4">
+      <div className="flex justify-center w-full mb-2 space-x-10">
-        {/* <div className="flex">
+
-          {ammoLeft.map((bullet, index) => (
+      <div className="flex space-x-0.5">
+        {[...Array(4)].map((_, index) => (
           <img
             key={index}
-              src={getBulletImage(bullet)}
+            src={getLeftWeaponLoad(index) === 'Used' ? UsedBulletLeft : UnusedBulletLeft}
-              alt={bullet}
+            alt="Weapon Load"
-              className="w-4 h-10 mx-0.5"
           />
         ))}
         </div>
-        <div className="flex">
+        <div className="flex space-x-0.5">
-          {ammoRight.map((bullet, index) => (
+          {[...Array(4)].map((_, index) => (
           <img
             key={index}
-              src={getBulletImage(bullet)}
+            src={getRightWeaponLoad(index) === 'Used' ? UsedBulletRight : UnusedBulletRight}
-              alt={bullet}
+            alt="Weapon Load"
-              className="w-4 h-10 mx-0.5"
           />
         ))}
-        </div> */}
         </div>
+      </div>
+
       <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`}
+          className={`h-1.5 ${getFuelColor()} rounded-full`}
-            style={{ width: `${fuelLevel}%` }}
+        style={{ width: `${fuelLevel * 100}%` }}
-          ></div>
+          />
         </div>
       </div>
     </div>

src/components/Widget/AcaHeaderWidget.tsx

@@ -17,13 +17,15 @@ const AcaHeaderWidget = ({ widget }: AcaHeaderWidgetProps) => {
         width: w,
         height: h,
       }}
-      className="absolute bg-[#2D2D30] flex"
+      className="absolute bg-[#1E1E1E] flex space-x-5 pl-4 h-12"
     >
       {elements.map((element) => (
+        <div key={element.id} className="mx-2">
         <AcaStatusElement
           key={element.id}
           element={element as AcaStatusElementType}
         />
+        </div>
       ))}
     </div>
   );

src/prototype/utils/initialAcaHeader.ts

@@ -2,13 +2,14 @@ import { type AcaStatusElement } from 'src/types/element';
 import type { AcaHeaderWidget } from 'src/types/widget';
 import { v4 as uuid } from 'uuid';
 
+
 const aca1: AcaStatusElement = {
   type: 'aca-status',
   acaId: 1,
   fuelLevel: 0.5,
   weaponLoad: 0.5,
-  h: 80,
+  h: 72,
-  w: 132,
+  w: 160,
   id: uuid(),
   modality: 'visual',
   widgetId: 'aca-header',
@@ -16,10 +17,10 @@ const aca1: AcaStatusElement = {
 const aca2: AcaStatusElement = {
   type: 'aca-status',
   acaId: 2,
-  fuelLevel: 0.5,
+  fuelLevel: 0.15,
   weaponLoad: 0.5,
-  h: 80,
+  h: 72,
-  w: 132,
+  w: 160,
   id: uuid(),
   modality: 'visual',
   widgetId: 'aca-header',
@@ -29,8 +30,8 @@ const aca3: AcaStatusElement = {
   acaId: 3,
   fuelLevel: 0.5,
   weaponLoad: 0.5,
-  h: 80,
+  h: 72,
-  w: 132,
+  w: 160,
   id: uuid(),
   modality: 'visual',
   widgetId: 'aca-header',
@@ -38,10 +39,10 @@ const aca3: AcaStatusElement = {
 const aca4: AcaStatusElement = {
   type: 'aca-status',
   acaId: 4,
-  fuelLevel: 0.5,
+  fuelLevel: 0.02,
   weaponLoad: 0.5,
-  h: 80,
+  h: 72,
-  w: 132,
+  w: 160,
   id: uuid(),
   modality: 'visual',
   widgetId: 'aca-header',
@@ -49,10 +50,10 @@ const aca4: AcaStatusElement = {
 const aca5: AcaStatusElement = {
   type: 'aca-status',
   acaId: 5,
-  fuelLevel: 0.5,
+  fuelLevel: 0.15,
   weaponLoad: 0.5,
-  h: 80,
+  h: 72,
-  w: 132,
+  w: 160,
   id: uuid(),
   modality: 'visual',
   widgetId: 'aca-header',
@@ -62,8 +63,8 @@ const aca6: AcaStatusElement = {
   acaId: 1,
   fuelLevel: 0.5,
   weaponLoad: 0.5,
-  h: 80,
+  h: 72,
-  w: 132,
+  w: 160,
   id: uuid(),
   modality: 'visual',
   widgetId: 'aca-header',