This commit is contained in:
parent
d25dc1753c
commit
2a266becea
@ -1,4 +1,4 @@
|
||||
import React, { useState, useEffect, useRef } from "react";
|
||||
import React, { useState, useEffect } from "react";
|
||||
import ReactDOM from "react-dom";
|
||||
import { useSocket } from "../../../hooks/useSocket";
|
||||
import GameDataManager from "../../../services/GameDataManager.js";
|
||||
@ -127,10 +127,12 @@ const InventoryTab = () => {
|
||||
<div
|
||||
key={slot.id}
|
||||
className={`equip-row-mini ${equipment[slot.id] ? "occupied" : ""}`}
|
||||
onClick={() =>
|
||||
equipment[slot.id] &&
|
||||
(setSelectedItem(equipment[slot.id]), setShowModal(true))
|
||||
}
|
||||
onClick={() => {
|
||||
if (equipment[slot.id]) {
|
||||
setSelectedItem(equipment[slot.id]);
|
||||
setShowModal(true);
|
||||
}
|
||||
}}
|
||||
>
|
||||
<span className="slot-name-tiny">{slot.label}</span>
|
||||
<div
|
||||
@ -140,6 +142,7 @@ const InventoryTab = () => {
|
||||
<img
|
||||
src={equipment[slot.id].textureUrl}
|
||||
className="item-img-mini"
|
||||
alt=""
|
||||
/>
|
||||
) : (
|
||||
<span className="plus">+</span>
|
||||
@ -167,31 +170,26 @@ const InventoryTab = () => {
|
||||
<section className="inv-panel cargo">
|
||||
<MeteorRegion>
|
||||
<div className="cargo-grid-v2">
|
||||
{items.map((item, idx) => {
|
||||
const isEquipped = Object.values(equipment).some(
|
||||
(e) => e?.id === item.id,
|
||||
);
|
||||
return (
|
||||
<div
|
||||
key={`${item.id}-${idx}`}
|
||||
className={`item-slot ${item.rarity} ${isEquipped ? "equipped-in-storage" : ""}`}
|
||||
onClick={() => {
|
||||
setSelectedItem(item);
|
||||
setShowModal(true);
|
||||
}}
|
||||
>
|
||||
<img
|
||||
src={item.textureUrl}
|
||||
width={62}
|
||||
className="item-img-grid"
|
||||
/>
|
||||
{isEquipped && <div className="equipped-tag">E</div>}
|
||||
{item.quantity > 1 && (
|
||||
<span className="qty-label">{item.quantity}</span>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
{items.map((item, idx) => (
|
||||
<div
|
||||
key={`${item.id}-${idx}`}
|
||||
className={`item-slot ${item.rarity}`}
|
||||
onClick={() => {
|
||||
setSelectedItem(item);
|
||||
setShowModal(true);
|
||||
}}
|
||||
>
|
||||
<img
|
||||
src={item.textureUrl}
|
||||
width={62}
|
||||
className="item-img-grid"
|
||||
alt=""
|
||||
/>
|
||||
{item.quantity > 1 && (
|
||||
<span className="qty-label">{item.quantity}</span>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</MeteorRegion>
|
||||
</section>
|
||||
@ -202,22 +200,15 @@ const InventoryTab = () => {
|
||||
ReactDOM.createPortal(
|
||||
<ItemModal
|
||||
item={selectedItem}
|
||||
isEquipped={
|
||||
!!selectedItem.currentSlot ||
|
||||
Object.values(equipment).some((e) => e?.id === selectedItem.id)
|
||||
}
|
||||
isEquipped={!!selectedItem.currentSlot}
|
||||
onClose={() => {
|
||||
setShowModal(false);
|
||||
setSelectedItem(null);
|
||||
}}
|
||||
onEquip={equipItem}
|
||||
onUnequip={(slot) => {
|
||||
const actualSlot =
|
||||
slot ||
|
||||
Object.keys(equipment).find(
|
||||
(k) => equipment[k].id === selectedItem.id,
|
||||
);
|
||||
unequipItem(actualSlot);
|
||||
unequipItem(slot || selectedItem.currentSlot);
|
||||
setShowModal(false);
|
||||
}}
|
||||
formatStatName={(n) => GameDataManager.getStatName(n).toUpperCase()}
|
||||
getStatIcon={(n) => GameDataManager.getStatIcon?.(n)}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user