Fixed datapack overflow
This commit is contained in:
MaksSlyzar
parent
0308b3c931
commit
1254db3963
@ -58,90 +58,92 @@ const DatapackTab = () => {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="tab-content active datapack-tab-wrapper">
|
<div className="tab-content active datapack-tab-wrapper">
|
||||||
<div className="datapack-controls">
|
<MeteorRegion>
|
||||||
<div className="section-selector">
|
<div className="datapack-controls">
|
||||||
{sections.map((s) => (
|
<div className="section-selector">
|
||||||
<button
|
{sections.map((s) => (
|
||||||
key={s.id}
|
<button
|
||||||
className={`section-btn ${activeSection === s.id ? "active" : ""}`}
|
key={s.id}
|
||||||
onClick={() => setActiveSection(s.id)}
|
className={`section-btn ${activeSection === s.id ? "active" : ""}`}
|
||||||
>
|
onClick={() => setActiveSection(s.id)}
|
||||||
<i className={`fas ${s.icon}`}></i>
|
>
|
||||||
<span>{s.label}</span>
|
<i className={`fas ${s.icon}`}></i>
|
||||||
</button>
|
<span>{s.label}</span>
|
||||||
))}
|
</button>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="search-bar">
|
||||||
|
<i className="fas fa-search"></i>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
placeholder="Search ID or Name..."
|
||||||
|
value={searchQuery}
|
||||||
|
onChange={(e) => setSearchQuery(e.target.value)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="search-bar">
|
<div className="datapack-content">
|
||||||
<i className="fas fa-search"></i>
|
<div className="datapack-grid">
|
||||||
<input
|
{displayList.map((item) => (
|
||||||
type="text"
|
<div
|
||||||
placeholder="Search ID or Name..."
|
key={item.id}
|
||||||
value={searchQuery}
|
className={`datapack-card ${activeSection === "hostiles" ? "hostile-card" : ""}`}
|
||||||
onChange={(e) => setSearchQuery(e.target.value)}
|
onClick={() =>
|
||||||
/>
|
setSelectedItem({ ...item, sectionType: activeSection })
|
||||||
</div>
|
}
|
||||||
</div>
|
>
|
||||||
|
<div className="card-icon">
|
||||||
<MeteorRegion className="datapack-content">
|
{item.texture ? (
|
||||||
<div className="datapack-grid">
|
<img
|
||||||
{displayList.map((item) => (
|
src={`${config.serverUrl}/static/${item.texture}`}
|
||||||
<div
|
alt=""
|
||||||
key={item.id}
|
/>
|
||||||
className={`datapack-card ${activeSection === "hostiles" ? "hostile-card" : ""}`}
|
) : (
|
||||||
onClick={() =>
|
<div className="fallback-icon">
|
||||||
setSelectedItem({ ...item, sectionType: activeSection })
|
{item.displayName?.[0] || "?"}
|
||||||
}
|
|
||||||
>
|
|
||||||
<div className="card-icon">
|
|
||||||
{item.texture ? (
|
|
||||||
<img
|
|
||||||
src={`${config.serverUrl}/static/${item.texture}`}
|
|
||||||
alt=""
|
|
||||||
/>
|
|
||||||
) : (
|
|
||||||
<div className="fallback-icon">
|
|
||||||
{item.displayName?.[0] || "?"}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="card-info">
|
|
||||||
<span className="card-name">{item.displayName}</span>
|
|
||||||
<span className="card-id">{item.id}</span>
|
|
||||||
|
|
||||||
{/* Секція луту без картинок, лише текст або іконка коробки */}
|
|
||||||
{activeSection === "hostiles" &&
|
|
||||||
item.loot &&
|
|
||||||
item.loot.length > 0 && (
|
|
||||||
<div className="card-loot-preview">
|
|
||||||
{item.loot.map((lootEntry, idx) => {
|
|
||||||
const lootData = GameDataManager.getItem(lootEntry.id);
|
|
||||||
return (
|
|
||||||
<div
|
|
||||||
key={`${item.id}-loot-${idx}`}
|
|
||||||
className="loot-mini-slot-text"
|
|
||||||
title={`${lootData?.displayName || lootEntry.id} (${(lootEntry.chance * 100).toFixed(0)}%)`}
|
|
||||||
>
|
|
||||||
<i
|
|
||||||
className="fas fa-box-open"
|
|
||||||
style={{ fontSize: "10px", marginRight: "4px" }}
|
|
||||||
></i>
|
|
||||||
<span>
|
|
||||||
{lootData?.displayName ||
|
|
||||||
lootEntry.id.split(":").pop()}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="card-info">
|
||||||
|
<span className="card-name">{item.displayName}</span>
|
||||||
|
<span className="card-id">{item.id}</span>
|
||||||
|
|
||||||
|
{activeSection === "hostiles" &&
|
||||||
|
item.loot &&
|
||||||
|
item.loot.length > 0 && (
|
||||||
|
<div className="card-loot-preview">
|
||||||
|
{item.loot.map((lootEntry, idx) => {
|
||||||
|
const lootData = GameDataManager.getItem(
|
||||||
|
lootEntry.id,
|
||||||
|
);
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
key={`${item.id}-loot-${idx}`}
|
||||||
|
className="loot-mini-slot-text"
|
||||||
|
title={`${lootData?.displayName || lootEntry.id} (${(lootEntry.chance * 100).toFixed(0)}%)`}
|
||||||
|
>
|
||||||
|
<i
|
||||||
|
className="fas fa-box-open"
|
||||||
|
style={{ fontSize: "10px", marginRight: "4px" }}
|
||||||
|
></i>
|
||||||
|
<span>
|
||||||
|
{lootData?.displayName ||
|
||||||
|
lootEntry.id.split(":").pop()}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
))}
|
||||||
))}
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</MeteorRegion>
|
</MeteorRegion>
|
||||||
|
|
||||||
{selectedItem && (
|
{selectedItem && (
|
||||||
<DatapackDetailsModal
|
<DatapackDetailsModal
|
||||||
data={selectedItem}
|
data={selectedItem}
|
||||||
|
|||||||
Reference in New Issue
Block a user