Updated DungeonsTab

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

@@ -5,10 +5,10 @@ import "./styles/DungeonsTab.css";
 const DungeonsTab = ({ startDungeon }) => {
   const [dungeons, setDungeons] = useState([]);
   const [selectedDungeon, setSelectedDungeon] = useState(null);
+  const [showSelector, setShowSelector] = useState(true);
 
   useEffect(() => {
     const allKeys = Array.from(GameDataManager.dungeons.keys());
-
     const uniqueDungeons = Array.from(new Set(allKeys))
       .map((id) => GameDataManager.getDungeon(id))
       .filter(
@@ -16,7 +16,6 @@ const DungeonsTab = ({ startDungeon }) => {
       );
 
     setDungeons(uniqueDungeons);
-
     if (uniqueDungeons.length > 0 && !selectedDungeon) {
       setSelectedDungeon(uniqueDungeons[0]);
     }
@@ -25,11 +24,16 @@ const DungeonsTab = ({ startDungeon }) => {
   const handleSelectDungeon = (id) => {
     const translatedDungeon = GameDataManager.getDungeon(id);
     setSelectedDungeon(translatedDungeon);
+    if (window.innerWidth <= 768) {
+      setShowSelector(false);
+    }
   };
 
   return (
     <div className="tab-content active" id="dungeons-tab">
-      <div className="dungeons-container">
+      <div
+        className={`dungeons-container ${!showSelector ? "view-active" : ""}`}
+      >
         <div className="dungeon-selector">
           <div className="selector-header">
             <h2 className="terminal-text">AVAILABLE_MISSIONS</h2>
@@ -57,8 +61,18 @@ const DungeonsTab = ({ startDungeon }) => {
           {selectedDungeon ? (
             <div className="dungeon-details-v2">
               <div className="details-header-scan">
+                <button
+                  className="back-to-list"
+                  onClick={() => setShowSelector(true)}
+                >
+                  <i className="fas fa-arrow-left"></i>
+                </button>
+                <div className="mission-info-group">
                   <div className="mission-type-label">MISSION_BRIEFING</div>
-                <h3 className="mission-title">{selectedDungeon.displayName}</h3>
+                  <h3 className="mission-title">
+                    {selectedDungeon.displayName}
+                  </h3>
+                </div>
                 <div className="scanline-horizontal"></div>
               </div>
 
@@ -92,10 +106,10 @@ const DungeonsTab = ({ startDungeon }) => {
                           </div>
                           <div className="reward-text">
                             <span className="reward-name">
-                              {item.displayName}
+                              {item?.displayName || loot.itemId}
                             </span>
                             <span className="reward-chance">
-                              {loot.chance}% ACQUISITION_CHANCE
+                              {loot.chance}% ACQUISITION
                             </span>
                           </div>
                         </div>

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

@@ -1,4 +1,3 @@
-/* Контейнер вкладки */
 #dungeons-tab {
   height: 100%;
   background: #05080c;
@@ -13,7 +12,6 @@
   border-top: 1px solid rgba(0, 212, 255, 0.2);
 }
 
-/* --- Ліва панель --- */
 .dungeon-selector {
   border-right: 1px solid rgba(0, 212, 255, 0.1);
   display: flex;
@@ -96,7 +94,6 @@
   font-family: "Space Mono", monospace;
 }
 
-/* --- Права панель --- */
 .dungeon-view {
   padding: 20px;
   display: flex;
@@ -119,6 +116,18 @@
   background: rgba(0, 212, 255, 0.03);
   position: relative;
   overflow: hidden;
+  display: flex;
+  align-items: center;
+  gap: 15px;
+}
+
+.back-to-list {
+  display: none;
+  background: none;
+  border: 1px solid #00d4ff;
+  color: #00d4ff;
+  padding: 8px 12px;
+  cursor: pointer;
 }
 
 .scanline-horizontal {
@@ -174,11 +183,6 @@
   line-height: 1.6;
 }
 
-/* --- Нагороди --- */
-.expected-rewards-section {
-  margin-bottom: 30px;
-}
-
 .section-header {
   display: flex;
   align-items: center;
@@ -195,7 +199,7 @@
 
 .rewards-grid {
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
+  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
   gap: 10px;
 }
 
@@ -209,14 +213,15 @@
 }
 
 .reward-icon-container {
-  width: 40px;
+  width: 36px;
-  height: 40px;
+  height: 36px;
   background: #0a0f18;
   border: 1px solid rgba(0, 212, 255, 0.2);
   display: flex;
   align-items: center;
   justify-content: center;
-  margin-right: 15px;
+  margin-right: 12px;
+  flex-shrink: 0;
 }
 
 .reward-icon-container img {
@@ -225,29 +230,27 @@
   object-fit: contain;
 }
 
-.reward-icon-container i {
-  color: #4a5d75;
-  font-size: 1.2rem;
-}
-
 .reward-text {
   display: flex;
   flex-direction: column;
+  overflow: hidden;
 }
 
 .reward-name {
-  font-size: 0.85rem;
+  font-size: 0.75rem;
   color: #fff;
   text-transform: uppercase;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 .reward-chance {
-  font-size: 0.7rem;
+  font-size: 0.65rem;
   color: #00ff88;
   font-family: "Space Mono", monospace;
 }
 
-/* Кольори раритетності */
 .reward-entry.common {
   border-left-color: #4a5d75;
 }
@@ -264,20 +267,15 @@
   border-left-color: #ffaa00;
 }
 
-/* --- Кнопка --- */
-.action-area {
-  margin-top: 20px;
-}
-
 .initiate-deployment-btn {
   width: 100%;
-  padding: 20px;
+  padding: 18px;
   background: #00d4ff;
   border: none;
   color: #000;
   font-family: "Orbitron", sans-serif;
   font-weight: 900;
-  font-size: 1.1rem;
+  font-size: 1rem;
   cursor: pointer;
   display: flex;
   justify-content: space-between;
@@ -288,15 +286,9 @@
 
 .initiate-deployment-btn:hover {
   background: #fff;
-  box-shadow: 0 0 30px rgba(0, 212, 255, 0.5);
+  box-shadow: 0 0 20px rgba(0, 212, 255, 0.4);
-  transform: translateY(-2px);
 }
 
-.initiate-deployment-btn i {
-  font-size: 1.2rem;
-}
-
-/* --- Placeholder --- */
 .dungeon-placeholder {
   height: 100%;
   display: flex;
@@ -307,8 +299,8 @@
 }
 
 .radar-scanner {
-  width: 100px;
+  width: 80px;
-  height: 100px;
+  height: 80px;
   border: 2px solid rgba(0, 212, 255, 0.2);
   border-radius: 50%;
   position: relative;
@@ -336,17 +328,43 @@
   }
 }
 
-/* Кастомний скрол */
+@media screen and (max-width: 768px) {
+  .dungeons-container {
+    grid-template-columns: 1fr;
+  }
+
+  .dungeons-container.view-active .dungeon-selector {
+    display: none;
+  }
+
+  .dungeons-container:not(.view-active) .dungeon-view {
+    display: none;
+  }
+
+  .back-to-list {
+    display: block;
+  }
+
+  .mission-title {
+    font-size: 1.3rem;
+  }
+
+  .dungeon-view {
+    padding: 10px;
+  }
+
+  .rewards-grid {
+    grid-template-columns: 1fr;
+  }
+}
+
 .custom-scroll::-webkit-scrollbar {
-  width: 5px;
+  width: 4px;
 }
 .custom-scroll::-webkit-scrollbar-track {
-  background: rgba(0, 0, 0, 0.2);
+  background: rgba(0, 0, 0, 0.1);
 }
 .custom-scroll::-webkit-scrollbar-thumb {
   background: #1a2638;
-  border-radius: 10px;
+  border-radius: 4px;
-}
-.custom-scroll::-webkit-scrollbar-thumb:hover {
-  background: #00d4ff;
 }