+
+
+
{activeCraft && (
+
{
const { socket } = useSocket();
@@ -11,24 +13,12 @@ const InventoryTab = () => {
const [equipment, setEquipment] = useState({});
const [selectedItem, setSelectedItem] = useState(null);
const [showModal, setShowModal] = useState(false);
+
const CONNECT_URL = getServerUrl();
const ASSET_BASE_URL = `${CONNECT_URL}/static/`;
- const equipmentSlots = {
- personal: [
- { id: "personal_helmet", label: "HELMET" },
- { id: "personal_suit", label: "SUIT" },
- { id: "personal_gloves", label: "GLOVES" },
- { id: "personal_boots", label: "BOOTS" },
- { id: "personal_backpack", label: "BACKPACK" },
- { id: "personal_weapons", label: "WEAPON" },
- ],
- ship: [
- { id: "ship_hull", label: "HULL" },
- { id: "ship_shields", label: "SHIELDS" },
- { id: "ship_engines", label: "ENGINES" },
- ],
- };
+ const manifest = GameDataManager.manifest || {};
+ const coreSystems = manifest.core_systems?.categories || {};
const getFullTextureUrl = (path) => {
if (!path) return "/assets/no-image.png";
@@ -36,11 +26,10 @@ const InventoryTab = () => {
return `${ASSET_BASE_URL}${path}`;
};
- const enrichItemData = (serverItem) => {
+ const enrichItemData = (serverItem, currentSlot = null) => {
if (!serverItem || (!serverItem.itemId && !serverItem.id)) return null;
const id = serverItem.itemId || serverItem.id;
const staticData = GameDataManager.getItem(id);
-
return {
...serverItem,
...staticData,
@@ -48,28 +37,29 @@ const InventoryTab = () => {
textureUrl: getFullTextureUrl(staticData?.texture),
canEquip: !!staticData?.meta?.equipmentSlot,
rarity: staticData?.meta?.rarity || "common",
+ currentSlot: currentSlot,
};
};
useEffect(() => {
if (!socket) return;
- const refresh = () => {
+ const refreshData = () => {
socket.emit("player:get_inventory");
socket.emit("player:get_equipment");
};
- refresh();
+ refreshData();
const handleInventory = (rawItems) => {
- setItems(rawItems.map(enrichItemData).filter(Boolean));
+ setItems(rawItems.map((item) => enrichItemData(item)).filter(Boolean));
};
const handleEquipment = (rawEquip) => {
const mapped = {};
Object.keys(rawEquip).forEach((slot) => {
if (rawEquip[slot]) {
- mapped[slot] = enrichItemData({ itemId: rawEquip[slot] });
+ mapped[slot] = enrichItemData({ itemId: rawEquip[slot] }, slot);
}
});
setEquipment(mapped);
@@ -77,39 +67,70 @@ const InventoryTab = () => {
socket.on("player:inventory_data", handleInventory);
socket.on("player:equipment_data", handleEquipment);
+ socket.on("player:item_equipped", refreshData);
+ socket.on("player:item_unequipped", refreshData);
return () => {
socket.off("player:inventory_data", handleInventory);
socket.off("player:equipment_data", handleEquipment);
+ socket.off("player:item_equipped", refreshData);
+ socket.off("player:item_unequipped", refreshData);
};
}, [socket]);
- const handleItemClick = (item) => {
- setSelectedItem(item);
- setShowModal(true);
- };
-
const equipItem = (item) => {
const slot = item.meta?.equipmentSlot;
- if (slot) {
- socket.emit("player:equip_item", { itemId: item.id, slot });
- setShowModal(false);
- }
+ if (slot) socket.emit("player:equip_item", { itemId: item.id, slot });
};
const unequipItem = (slot) => {
socket.emit("player:unequip_item", { slot });
};
+ const equipmentSlots = {
+ personal: Object.keys(coreSystems)
+ .filter(
+ (k) =>
+ k.startsWith("original:personal_") &&
+ !k.includes("accessory") &&
+ k !== "original:personal_weapons",
+ )
+ .map((k) => ({
+ id: k,
+ label: GameDataManager.t(coreSystems[k].displayName),
+ })),
+ weapons: Object.keys(coreSystems)
+ .filter((k) => k === "original:personal_weapons")
+ .map((k) => ({
+ id: k,
+ label: GameDataManager.t(coreSystems[k].displayName),
+ })),
+ accessories: Object.keys(coreSystems)
+ .filter((k) => k.includes("personal_accessory"))
+ .map((k) => ({
+ id: k,
+ label: GameDataManager.t(coreSystems[k].displayName),
+ })),
+ ship: Object.keys(coreSystems)
+ .filter((k) => k.startsWith("original:ship_"))
+ .map((k) => ({
+ id: k,
+ label: GameDataManager.t(coreSystems[k].displayName),
+ })),
+ };
+
const renderSlotGroup = (title, groupSlots) => (
@@ -131,7 +132,8 @@ const ItemListTab = () => {
))}
-
@@ -184,7 +188,7 @@ const CraftingTab = () => {
);
})}
- {title}
-
+
)}
{groupSlots.map((slot) => (
+
equipment[slot.id] && unequipItem(slot.id)}
+ onClick={() =>
+ equipment[slot.id] &&
+ (setSelectedItem(equipment[slot.id]), setShowModal(true))
+ }
>
{slot.label}
- {
{equipment[slot.id] ? (
) : (
@@ -133,88 +153,77 @@ const InventoryTab = () => {
return (
-
-
+ {renderSlotGroup("SUIT_GEAR", equipmentSlots.personal)}
+ {renderSlotGroup("WEAPONRY", equipmentSlots.weapons)}
+ {renderSlotGroup("ACCESSORIES", equipmentSlots.accessories)}
+
+ {renderSlotGroup("SHIP_MODULES", equipmentSlots.ship)}
+
-
+
- {showModal && selectedItem && (
- e?.id === selectedItem.id)
+ }
+ onClose={() => {
+ setShowModal(false);
+ setSelectedItem(null);
+ }}
+ onEquip={equipItem}
+ onUnequip={(slot) => {
+ const actualSlot =
+ slot ||
+ Object.keys(equipment).find(
+ (k) => equipment[k].id === selectedItem.id,
+ );
+ unequipItem(actualSlot);
+ }}
+ formatStatName={(n) => GameDataManager.getStatName(n).toUpperCase()}
+ getStatIcon={(n) => GameDataManager.getStatIcon?.(n)}
+ />,
+ document.body,
+ )}
);
};
diff --git a/client/src/views/GameInterface/tabs/ItemListTab.jsx b/client/src/views/GameInterface/tabs/ItemListTab.jsx
index b018290..56f0c51 100644
--- a/client/src/views/GameInterface/tabs/ItemListTab.jsx
+++ b/client/src/views/GameInterface/tabs/ItemListTab.jsx
@@ -2,6 +2,7 @@ import React, { useState, useEffect } from "react";
import GameDataManager from "../../../services/GameDataManager.js";
import "./styles/ItemListTab.css";
import { config } from "../../../config/api.js";
+import MeteorRegion from "../../../components/Meteor/MeteorRegion.jsx";
const ItemListTab = () => {
const [allItems, setAllItems] = useState([]);
@@ -83,7 +84,7 @@ const ItemListTab = () => {
-
-
TACTICAL_INVENTORY_V2
-
-
- LOAD: {items.length}/50
-
-
- CORE_SYSTEMS
-
- {renderSlotGroup("PERSON", equipmentSlots.personal)}
- {renderSlotGroup("SHIP", equipmentSlots.ship)}
+ STORAGE_UNITS
-
- {items.map((item, idx) => (
-
+ handleItemClick(item)}
- >
- 
- {item.quantity > 1 && (
- {item.quantity}
- )}
-
- ))}
-
+ {items.map((item, idx) => {
+ const isEquipped = Object.values(equipment).some(
+ (e) => e?.id === item.id,
+ );
+ return (
+
+ {
+ setSelectedItem(item);
+ setShowModal(true);
+ }}
+ >
+
+ {isEquipped &&
+ );
+ })}
+ E
}
+ {item.quantity > 1 && (
+ {item.quantity}
+ )}
+ setShowModal(false)}>
-
- )}
+ {showModal &&
+ selectedItem &&
+ ReactDOM.createPortal(
+ e.stopPropagation()}>
-
-
-
-
-
- 
-
- {selectedItem.displayName || selectedItem.id}
-
-
- - {selectedItem.description || "No data available."} -
- -
- {selectedItem.stats &&
- Object.entries(selectedItem.stats).map(([k, v]) => (
-
-
- {selectedItem.canEquip && (
-
- )}
-
-
- {GameDataManager.getStatName?.(k)?.toUpperCase() ||
- k.toUpperCase()}
-
- +{v}
-
- ))}
-
+
)}
- DATA_DESCRIPTION
{selectedItem.description}
@@ -103,7 +104,7 @@ const ItemListTab = () => {
+
+
{filteredItems.map((item) => (
))}
- {