diff --git a/client/src/views/GameInterface/tabs/DungeonsTab.jsx b/client/src/views/GameInterface/tabs/DungeonsTab.jsx index fe11a92..1cb340b 100644 --- a/client/src/views/GameInterface/tabs/DungeonsTab.jsx +++ b/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 (
-
+

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; }