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 {