package.json, mobile version

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

@@ -8,26 +8,30 @@ const ItemListTab = () => {
   const [searchQuery, setSearchQuery] = useState("");
   const [selectedCategory, setSelectedCategory] = useState("all");
   const [selectedItem, setSelectedItem] = useState(null);
+  const [isMobile, setIsMobile] = useState(window.innerWidth <= 768);
 
   const ASSET_BASE_URL = "http://localhost:5003/static/";
 
   useEffect(() => {
+    const handleResize = () => setIsMobile(window.innerWidth <= 768);
+    window.addEventListener("resize", handleResize);
+
     const itemsArray = Array.from(GameDataManager.items.keys()).map((id) =>
       GameDataManager.getItem(id),
     );
     setAllItems(itemsArray);
     setFilteredItems(itemsArray);
+
+    return () => window.removeEventListener("resize", handleResize);
   }, []);
 
   useEffect(() => {
     let result = allItems;
-
     if (selectedCategory !== "all") {
       result = result.filter(
         (item) => item.meta?.category === selectedCategory,
       );
     }
-
     if (searchQuery) {
       const q = searchQuery.toLowerCase();
       result = result.filter(
@@ -36,7 +40,6 @@ const ItemListTab = () => {
           item.id.toLowerCase().includes(q),
       );
     }
-
     setFilteredItems(result);
   }, [searchQuery, selectedCategory, allItems]);
 
@@ -50,19 +53,72 @@ const ItemListTab = () => {
     ...new Set(allItems.map((i) => i.meta?.category).filter(Boolean)),
   ];
 
+  const renderInspector = () => (
+    <div
+      className={`item-inspector ${isMobile && selectedItem ? "mobile-modal" : ""}`}
+      onClick={() => isMobile && setSelectedItem(null)}
+    >
+      {selectedItem && (
+        <div className="inspector-content" onClick={(e) => e.stopPropagation()}>
+          {isMobile && (
+            <button
+              className="close-inspector"
+              onClick={() => setSelectedItem(null)}
+            >
+              &times;
+            </button>
+          )}
+
+          <div className={`inspector-header ${selectedItem.meta?.rarity}`}>
+            <div className="header-visual">
+              <img src={getFullTextureUrl(selectedItem.texture)} alt="" />
+            </div>
+            <div className="header-info">
+              <div className="id-tag">{selectedItem.id}</div>
+              <h1>{selectedItem.displayName}</h1>
+              <span className="rarity-label">
+                {selectedItem.meta?.rarity?.toUpperCase()}
+              </span>
+            </div>
+          </div>
+
+          <div className="inspector-grid">
+            <div className="inspector-section">
+              <div className="section-title">DATA_DESCRIPTION</div>
+              <p>{selectedItem.description}</p>
+            </div>
+
+            {selectedItem.stats &&
+              Object.keys(selectedItem.stats).length > 0 && (
+                <div className="inspector-section">
+                  <div className="section-title">PARAMETER_READOUT</div>
+                  <div className="stat-pills">
+                    {Object.entries(selectedItem.stats).map(([k, v]) => (
+                      <div key={k} className="stat-pill">
+                        <span>{GameDataManager.getStatName(k)}</span>
+                        <span>+{v}</span>
+                      </div>
+                    ))}
+                  </div>
+                </div>
+              )}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+
   return (
     <div className="item-list-container">
       <div className="item-list-sidebar">
         <div className="search-box">
-          <i className="fas fa-search"></i>
           <input
             type="text"
-            placeholder="FILTER_BY_DATABASE_ID..."
+            placeholder="SEARCH_ID_OR_NAME..."
             value={searchQuery}
             onChange={(e) => setSearchQuery(e.target.value)}
           />
         </div>
-
         <div className="category-filters">
           {categories.map((cat) => (
             <button
@@ -74,7 +130,6 @@ const ItemListTab = () => {
             </button>
           ))}
         </div>
-
         <div className="items-list-scroll">
           {filteredItems.map((item) => (
             <div
@@ -89,80 +144,11 @@ const ItemListTab = () => {
                 <div className="item-row-title">{item.displayName}</div>
                 <div className="item-row-subtitle">{item.id}</div>
               </div>
-              <div className="item-row-rarity-indicator"></div>
-            </div>
-          ))}
-          {filteredItems.length === 0 && (
-            <div className="no-results">NO_RECORDS_FOUND</div>
-          )}
-        </div>
-      </div>
-
-      <div className="item-inspector">
-        {selectedItem ? (
-          <div className="inspector-content">
-            <div className={`inspector-header ${selectedItem.meta?.rarity}`}>
-              <div className="header-visual">
-                <img src={getFullTextureUrl(selectedItem.texture)} alt="" />
-              </div>
-              <div className="header-info">
-                <div className="id-tag">{selectedItem.id}</div>
-                <h1>{selectedItem.displayName}</h1>
-                <div className="rarity-label">
-                  {selectedItem.meta?.rarity?.toUpperCase()}
-                </div>
-              </div>
-            </div>
-
-            <div className="inspector-grid">
-              <div className="inspector-section main-desc">
-                <div className="section-title">DATA_DESCRIPTION</div>
-                <p>{selectedItem.description}</p>
-              </div>
-
-              {selectedItem.stats &&
-                Object.keys(selectedItem.stats).length > 0 && (
-                  <div className="inspector-section stats">
-                    <div className="section-title">PARAMETER_READOUT</div>
-                    <div className="stat-pills">
-                      {Object.entries(selectedItem.stats).map(([k, v]) => (
-                        <div key={k} className="stat-pill">
-                          <span className="p-label">
-                            {GameDataManager.getStatName(k)}
-                          </span>
-                          <span className="p-value">+{v}</span>
             </div>
           ))}
         </div>
       </div>
-                )}
+      {(!isMobile || (isMobile && selectedItem)) && renderInspector()}
-
-              <div className="inspector-section meta">
-                <div className="section-title">OBJECT_METADATA</div>
-                <div className="meta-list">
-                  <div className="meta-item">
-                    <span>CATEGORY</span>
-                    <span>{selectedItem.meta?.category || "general"}</span>
-                  </div>
-                  <div className="meta-item">
-                    <span>EQUIP_SLOT</span>
-                    <span>{selectedItem.meta?.equipmentSlot || "none"}</span>
-                  </div>
-                  <div className="meta-item">
-                    <span>STACK_LIMIT</span>
-                    <span>{selectedItem.meta?.stackable ? "64" : "1"}</span>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        ) : (
-          <div className="inspector-placeholder">
-            <div className="scanner-line"></div>
-            <p>AWAITING_OBJECT_SELECTION...</p>
-          </div>
-        )}
-      </div>
     </div>
   );
 };

client/src/views/GameInterface/tabs/styles/ItemListTab.css

@@ -6,9 +6,9 @@
   font-family: "Rajdhani", "Segoe UI", sans-serif;
   border-top: 1px solid rgba(0, 255, 255, 0.1);
   overflow: hidden;
+  position: relative;
 }
 
-/* SIDEBAR & SEARCH */
 .item-list-sidebar {
   width: 380px;
   border-right: 1px solid rgba(0, 255, 255, 0.1);
@@ -19,7 +19,6 @@
 
 .search-box {
   padding: 20px;
-  position: relative;
 }
 
 .search-box input {
@@ -31,16 +30,8 @@
   text-transform: uppercase;
   letter-spacing: 1px;
   font-size: 14px;
-  transition: all 0.3s;
 }
 
-.search-box input:focus {
-  outline: none;
-  border-color: #00ffff;
-  box-shadow: 0 0 10px rgba(0, 255, 255, 0.2);
-}
-
-/* CATEGORY FILTERS */
 .category-filters {
   display: flex;
   flex-wrap: wrap;
@@ -55,17 +46,14 @@
   padding: 4px 10px;
   font-size: 11px;
   cursor: pointer;
-  transition: 0.2s;
 }
 
-.filter-btn.active,
+.filter-btn.active {
-.filter-btn:hover {
   background: rgba(0, 255, 255, 0.1);
   color: #00ffff;
   border-color: #00ffff;
 }
 
-/* ITEM LIST ROWS */
 .items-list-scroll {
   flex: 1;
   overflow-y: auto;
@@ -78,60 +66,108 @@
   padding: 10px;
   margin-bottom: 8px;
   background: rgba(255, 255, 255, 0.02);
-  border-left: 3px solid transparent;
+  border-left: 3px solid #9d9d9d;
   cursor: pointer;
-  transition: all 0.2s;
-  position: relative;
-}
-
-.item-row:hover {
-  background: rgba(255, 255, 255, 0.05);
-  transform: translateX(5px);
 }
 
 .item-row.selected {
   background: rgba(0, 255, 255, 0.08);
-  border-left-color: #00ffff;
 }
 
 .item-row-icon {
   width: 44px;
   height: 44px;
   background: rgba(0, 0, 0, 0.5);
-  border: 1px solid rgba(255, 255, 255, 0.1);
+  margin-right: 15px;
   display: flex;
   align-items: center;
   justify-content: center;
-  margin-right: 15px;
 }
 
 .item-row-icon img {
   width: 32px;
   height: 32px;
-  object-fit: contain;
+  image-rendering: pixelated;
-  image-rendering: pixelated; /* Щоб іконки були чіткими */
 }
 
-.item-row-content {
+/* Inspector Base */
+.item-inspector {
   flex: 1;
+  padding: 40px;
+  overflow-y: auto;
+}
+
+.inspector-header {
   display: flex;
-  flex-direction: column;
+  gap: 25px;
+  margin-bottom: 30px;
 }
 
-.item-row-title {
+.header-visual {
-  font-size: 15px;
+  width: 100px;
-  font-weight: 600;
+  height: 100px;
-  color: #fff;
+  background: rgba(0, 0, 0, 0.4);
-  text-transform: uppercase;
+  border: 1px solid rgba(0, 255, 255, 0.2);
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
-.item-row-subtitle {
+.header-visual img {
-  font-size: 11px;
+  width: 64px;
-  color: #666;
+  height: 64px;
-  font-family: "Courier New", monospace;
 }
 
-/* RARITY COLORS */
+/* Mobile Modal Logic */
+@media (max-width: 768px) {
+  .item-list-sidebar {
+    width: 100%;
+    border: none;
+  }
+
+  .item-inspector.mobile-modal {
+    display: flex;
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 3000;
+    background: rgba(0, 0, 0, 0.85);
+    backdrop-filter: blur(6px);
+    align-items: center;
+    justify-content: center;
+    padding: 20px;
+  }
+
+  .inspector-content {
+    background: #0d121d;
+    border: 1px solid #00ffff44;
+    width: 100%;
+    max-height: 120vh;
+    overflow-y: auto;
+    position: relative;
+    padding: 20px;
+    box-shadow: 0 0 30px rgba(0, 0, 0, 0.5);
+  }
+
+  .close-inspector {
+    position: absolute;
+    top: 10px;
+    right: 15px;
+    background: none;
+    border: none;
+    color: #00ffff;
+    font-size: 30px;
+    cursor: pointer;
+  }
+
+  .item-inspector:not(.mobile-modal) {
+    display: none;
+  }
+}
+
+/* Rarity */
 .item-row.legendary {
   border-left-color: #ff8000;
 }
@@ -141,67 +177,11 @@
 .item-row.rare {
   border-left-color: #0070dd;
 }
-.item-row.common {
-  border-left-color: #9d9d9d;
-}
-
-/* INSPECTOR PANEL */
-.item-inspector {
-  flex: 1;
-  padding: 40px;
-  background: radial-gradient(
-    circle at top right,
-    rgba(0, 255, 255, 0.03),
-    transparent
-  );
-  overflow-y: auto;
-}
-
-.inspector-header {
-  display: flex;
-  gap: 30px;
-  margin-bottom: 40px;
-  align-items: center;
-}
-
-.header-visual {
-  width: 120px;
-  height: 120px;
-  background: rgba(0, 0, 0, 0.3);
-  border: 2px solid rgba(0, 255, 255, 0.2);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
-}
-
-.header-visual img {
-  width: 80px;
-  height: 80px;
-}
-
-.header-info h1 {
-  font-size: 32px;
-  margin: 5px 0;
-  text-transform: uppercase;
-  letter-spacing: 2px;
-}
-
-.id-tag {
-  font-family: monospace;
-  color: #00ffff;
-  opacity: 0.6;
-  font-size: 14px;
-}
-
-/* SCROLLBAR CUSTOMIZATION */
-.items-list-scroll::-webkit-scrollbar {
-  width: 4px;
-}
-.items-list-scroll::-webkit-scrollbar-thumb {
-  background: rgba(0, 255, 255, 0.2);
-}
 
+@media screen and (max-width: 600px) {
   .section-title {
     font-size: 16px;
+    padding: 0;
+    margin: 10px;
+  }
 }

package.json

@@ -0,0 +1,14 @@
+{
+  "name": "gso-project-manager",
+  "version": "1.0.0",
+  "scripts": {
+    "install-all": "cd api && npm install && cd ../game-server && npm install && cd ../client && npm install",
+    "dev": "npx concurrently \"npm run dev-api\" \"npm run dev-server\" \"npm run dev-client\"",
+    "dev-api": "cd api && npm run start",
+    "dev-server": "cd game-server && npm run start",
+    "dev-client": "cd client && npm run dev"
+  },
+  "dependencies": {
+    "concurrently": "^8.2.2"
+  }
+}