AVAILABLE_MISSIONS
@@ -57,8 +61,18 @@ const DungeonsTab = ({ startDungeon }) => {
{selectedDungeon ? (
-
MISSION_BRIEFING
-
{selectedDungeon.displayName}
+
+
+
MISSION_BRIEFING
+
+ {selectedDungeon.displayName}
+
+
@@ -92,10 +106,10 @@ const DungeonsTab = ({ startDungeon }) => {
- {item.displayName}
+ {item?.displayName || loot.itemId}
- {loot.chance}% ACQUISITION_CHANCE
+ {loot.chance}% ACQUISITION
diff --git a/client/src/views/GameInterface/tabs/styles/DungeonsTab.css b/client/src/views/GameInterface/tabs/styles/DungeonsTab.css
index 78d8625..18419d0 100644
--- a/client/src/views/GameInterface/tabs/styles/DungeonsTab.css
+++ b/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;
- height: 40px;
+ width: 36px;
+ 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);
- transform: translateY(-2px);
+ box-shadow: 0 0 20px rgba(0, 212, 255, 0.4);
}
-.initiate-deployment-btn i {
- font-size: 1.2rem;
-}
-
-/* --- Placeholder --- */
.dungeon-placeholder {
height: 100%;
display: flex;
@@ -307,8 +299,8 @@
}
.radar-scanner {
- width: 100px;
- height: 100px;
+ width: 80px;
+ 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;
-}
-.custom-scroll::-webkit-scrollbar-thumb:hover {
- background: #00d4ff;
+ border-radius: 4px;
}