diff --git a/src/components/Equipment.module.css b/src/components/Equipment.module.css
index ea9e32e..12808a7 100644
--- a/src/components/Equipment.module.css
+++ b/src/components/Equipment.module.css
@@ -7,7 +7,7 @@
.itemList {
display: grid;
- grid-template-columns: 1fr 10em 5em;
+ grid-template-columns: 5em 10em 2em 1fr;
}
.gridItem {
@@ -20,19 +20,3 @@
background-color: #666;
padding: 4px 8px;
}
-
-.item {
- grid-column: 1;
-}
-
-.quality {
- grid-column: 2;
-}
-
-.bis {
- grid-column: 3;
-}
-
-.actions {
- grid-column: 4;
-}
diff --git a/src/components/Equipment.tsx b/src/components/Equipment.tsx
index 817bbfb..a59fa19 100644
--- a/src/components/Equipment.tsx
+++ b/src/components/Equipment.tsx
@@ -57,8 +57,10 @@ const Slot = ({ slot, onUnequip }: SlotProps) => {
const isBis = state.bisList.includes(item.id);
return (
<>
-
-
+
+ {equiped && (
+
+ )}
{
}
/>
-
- {equiped && (
-
- )}
+
+
>
);
diff --git a/src/components/SourceList.module.css b/src/components/SourceList.module.css
index db52696..f031c45 100644
--- a/src/components/SourceList.module.css
+++ b/src/components/SourceList.module.css
@@ -8,6 +8,17 @@
grid-column: 1 / span 4;
}
+.itemRow {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ gap: 8px;
+}
+
.visibleQuality {
font-weight: bold;
}
+
+.bisCount {
+ color: #ff6327;
+}
diff --git a/src/components/SourceList.tsx b/src/components/SourceList.tsx
index b935a41..5ed4b2a 100644
--- a/src/components/SourceList.tsx
+++ b/src/components/SourceList.tsx
@@ -93,7 +93,9 @@ const SourceInfo = ({ source, items }: SourceInfoProps) => {
onClick={() => toggleIsOpen(quality)}
>
{upgrades[quality].length}{" "}
- {numBiS[quality] > 0 && `(${numBiS[quality]})`}
+ {numBiS[quality] > 0 && (
+
({numBiS[quality]})
+ )}
))}
{QualitiesInGrid.map((quality) => {
@@ -103,7 +105,7 @@ const SourceInfo = ({ source, items }: SourceInfoProps) => {
return (
{upgrades[quality].map((upgrade) => (
-
+
{" "}
{
case "changeQuality":
return {
...state,
- equipedItems: state.equipedItems.map((item) => {
- if (item.id === action.itemId) {
- return {
- id: item.id,
- quality: action.quality,
- };
- }
- return item;
- }),
+ equipedItems: [
+ ...state.equipedItems.filter((item) => item.id !== action.itemId),
+ {
+ id: action.itemId,
+ quality: action.quality,
+ },
+ ],
};
case "setBis":
return {