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