fix: adjusted the left and right ammos to be different.
This commit is contained in:
parent
b29d231914
commit
dd0bbab118
BIN
src/assets/unused_right.png
Normal file
BIN
src/assets/unused_right.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 271 B |
BIN
src/assets/used_right.png
Normal file
BIN
src/assets/used_right.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 231 B |
@ -1,6 +1,8 @@
|
||||
import { type AcaStatusElement as AcaStatusElementType } from 'src/types/element';
|
||||
import UsedBullet from 'src/assets/used.png';
|
||||
import UnusedBullet from 'src/assets/unused.png';
|
||||
import UsedBulletLeft from 'src/assets/used.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">
|
||||
{ammoLeft.map((bullet, index) => (
|
||||
<img
|
||||
key={index}
|
||||
src={getBulletImage(bullet)}
|
||||
alt={bullet}
|
||||
className="w-4 h-10 mx-0.5"
|
||||
/>
|
||||
))}
|
||||
<div className="flex justify-center w-full mb-2 space-x-10">
|
||||
|
||||
<div className="flex space-x-0.5">
|
||||
{[...Array(4)].map((_, index) => (
|
||||
<img
|
||||
key={index}
|
||||
src={getLeftWeaponLoad(index) === 'Used' ? UsedBulletLeft : UnusedBulletLeft}
|
||||
alt="Weapon Load"
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
<div className="flex space-x-0.5">
|
||||
{[...Array(4)].map((_, index) => (
|
||||
<img
|
||||
key={index}
|
||||
src={getRightWeaponLoad(index) === 'Used' ? UsedBulletRight : UnusedBulletRight}
|
||||
alt="Weapon Load"
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
<div className="flex">
|
||||
{ammoRight.map((bullet, index) => (
|
||||
<img
|
||||
key={index}
|
||||
src={getBulletImage(bullet)}
|
||||
alt={bullet}
|
||||
className="w-4 h-10 mx-0.5"
|
||||
/>
|
||||
))}
|
||||
</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`}
|
||||
style={{ width: `${fuelLevel}%` }}
|
||||
></div>
|
||||
<div
|
||||
className={`h-1.5 ${getFuelColor()} rounded-full`}
|
||||
style={{ width: `${fuelLevel * 100}%` }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -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>
|
||||
);
|
||||
|
@ -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,
|
||||
w: 132,
|
||||
h: 72,
|
||||
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,
|
||||
w: 132,
|
||||
h: 72,
|
||||
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,
|
||||
w: 132,
|
||||
h: 72,
|
||||
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,
|
||||
w: 132,
|
||||
h: 72,
|
||||
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,
|
||||
w: 132,
|
||||
h: 72,
|
||||
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,
|
||||
w: 132,
|
||||
h: 72,
|
||||
w: 160,
|
||||
id: uuid(),
|
||||
modality: 'visual',
|
||||
widgetId: 'aca-header',
|
||||
|
Loading…
Reference in New Issue
Block a user