Updated DebugTab, loot

client/src/services/GameDataManager.js

@@ -31,7 +31,7 @@ class GameDataManager {
     if (Array.isArray(data.rooms)) {
       data.rooms.forEach((r) => this.rooms.set(r.id, r));
     }
-
+    console.log(this.hostiles);
     if (data.languages) {
       this.translations = data.languages;
     }

client/src/views/GameInterface/tabs/DatapackTab.jsx

@@ -88,7 +88,7 @@ const DatapackTab = () => {
           {displayList.map((item) => (
             <div
               key={item.id}
-              className="datapack-card"
+              className={`datapack-card ${activeSection === "hostiles" ? "hostile-card" : ""}`}
               onClick={() =>
                 setSelectedItem({ ...item, sectionType: activeSection })
               }
@@ -105,9 +105,37 @@ const DatapackTab = () => {
                   </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>
           ))}

client/src/views/GameInterface/tabs/components/DatapackDetailsModal.css

@@ -91,3 +91,61 @@
     opacity: 1;
   }
 }
+
+.loot-list-full {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  background: rgba(0, 0, 0, 0.2);
+  padding: 12px;
+  border-radius: 8px;
+}
+
+.loot-detail-item {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 8px;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+}
+
+.loot-detail-item:last-child {
+  border-bottom: none;
+}
+
+.loot-item-icon {
+  width: 40px;
+  height: 40px;
+  background: rgba(255, 255, 255, 0.05);
+  border-radius: 6px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.loot-item-icon img {
+  width: 32px;
+  height: 32px;
+  object-fit: contain;
+}
+
+.loot-item-info {
+  display: flex;
+  flex-direction: column;
+}
+
+.loot-item-name {
+  font-weight: 600;
+  color: #fff;
+  font-size: 14px;
+}
+
+.loot-item-meta {
+  font-size: 12px;
+  color: #aaa;
+}
+
+.fallback-mini {
+  color: #444;
+  font-weight: bold;
+}

client/src/views/GameInterface/tabs/components/DatapackDetailsModal.jsx

@@ -22,6 +22,49 @@ const DatapackDetailsModal = ({ data, onClose }) => {
     );
   };
 
+  const renderLoot = () => {
+    if (!data.loot || data.loot.length === 0) return null;
+
+    return (
+      <div className="details-section">
+        <h4>Loot Table</h4>
+        <div className="loot-list-full">
+          {data.loot.map((entry, idx) => {
+            const itemInfo = GameDataManager.getItem(entry.id);
+            const countDisplay =
+              typeof entry.count === "object"
+                ? `${entry.count.min}-${entry.count.max}`
+                : entry.count;
+
+            return (
+              <div key={idx} className="loot-detail-item">
+                <div className="loot-item-icon">
+                  {itemInfo?.texture ? (
+                    <img
+                      src={`${config.serverUrl}/static/${itemInfo.texture}`}
+                      alt={itemInfo.displayName}
+                    />
+                  ) : (
+                    <div className="fallback-mini">?</div>
+                  )}
+                </div>
+                <div className="loot-item-info">
+                  <span className="loot-item-name">
+                    {itemInfo?.displayName || entry.id}
+                  </span>
+                  <span className="loot-item-meta">
+                    {Math.round(entry.chance * 100)}% chance • Amount:{" "}
+                    {countDisplay}
+                  </span>
+                </div>
+              </div>
+            );
+          })}
+        </div>
+      </div>
+    );
+  };
+
   return (
     <div className="modal-overlay" onClick={onClose}>
       <div
@@ -63,6 +106,8 @@ const DatapackDetailsModal = ({ data, onClose }) => {
             )}
           </div>
 
+          {data.sectionType === "hostiles" && renderLoot()}
+
           {data.ingredients && (
             <div className="details-section">
               <h4>Recipe Requirements</h4>

game-server/datapacks/original/data/enemies/hostiles/tutorial/tutorial_hostile.json

@@ -6,8 +6,19 @@
       "health": 30,
       "defense": 0.0,
       "damage": 2,
-      "critical,chance": 0.0,
+      "critical.chance": 0.0,
       "attack.rate": 1
-    }
+    },
+    "loot": [
+      {
+        "id": "original:alloy_steel",
+        "chance": 0.4,
+        "count": {
+          "min": 1,
+          "max": 2
+        }
+      }
+    ],
+    "meta": {}
   }
 }