diff --git a/public/css/mine.css b/public/css/mine.css index 9925330..4e9e22c 100644 --- a/public/css/mine.css +++ b/public/css/mine.css @@ -1,7 +1,6 @@ /* ================================================ mine.css – Mine Gebäude UI Passt zum bestehenden Design aus building.css - und dem qm-popup / game-notification System ================================================ */ /* ── Panel-Wrapper ─────────────────────────────── */ @@ -12,7 +11,7 @@ gap: 0; } -/* ── Header-Zeile: Level + Zyklusinfo ──────────── */ +/* ── Header ────────────────────────────────────── */ .mine-header-row { display: flex; align-items: center; @@ -53,7 +52,27 @@ margin: 0 0 8px 0; } -/* ── Ressourcen-Auswahl ────────────────────────── */ +.mine-queue-count { + color: #c8952a; + font-weight: normal; + text-transform: none; + letter-spacing: 0; +} + +/* ── Hinweistext ───────────────────────────────── */ +.mine-hint { + font-size: 11px; + color: #806040; + margin: 0 0 8px 0; + line-height: 1.4; +} + +.mine-hint-center { + text-align: center; + margin-top: 6px; +} + +/* ── Ressourcen-Auswahl Raster ─────────────────── */ .mine-res-selector { display: grid; grid-template-columns: 1fr 1fr; @@ -118,17 +137,11 @@ } /* ── Aktuelle Produktion ───────────────────────── */ -.mine-resources { - display: flex; - flex-direction: column; - gap: 6px; -} - .mine-resource-row { display: flex; align-items: center; gap: 10px; - background: rgba(255, 255, 255, 0.03); + background: rgba(255,255,255,0.03); border: 1px solid rgba(122, 90, 26, 0.3); border-radius: 6px; padding: 7px 12px; @@ -149,7 +162,6 @@ justify-content: center; } -/* Ressource Icons – einheitliche Größe */ .mine-resource-icon-gold, .mine-resource-icon-iron, .mine-resource-icon-wood, @@ -235,96 +247,113 @@ animation: minePulse 1s ease-in-out infinite; } -/* ── Schleifen-Bereich ─────────────────────────── */ -.mine-loop-row { +/* ── Warteschlangen-Slots ──────────────────────── */ +.mine-queue-slot { display: flex; align-items: center; - justify-content: space-between; - margin-bottom: 8px; -} - -.mine-loop-dots { - display: flex; - gap: 6px; - align-items: center; -} - -.mine-loop-dot { - width: 14px; - height: 14px; - border-radius: 50%; - background: rgba(255,255,255,0.08); - border: 1px solid rgba(122, 90, 26, 0.5); - transition: background 0.3s, border-color 0.3s; -} - -.mine-loop-dot-active { - background: linear-gradient(135deg, #a030f0, #6010c0); - border-color: #c060ff; - box-shadow: 0 0 6px rgba(160, 48, 240, 0.6); -} - -.mine-loop-info { + gap: 8px; + border-radius: 6px; + padding: 6px 10px; + margin-bottom: 5px; font-size: 12px; - color: #a07830; } -.mine-loop-maxed { - color: #f0c84a; +.mine-queue-slot-filled { + background: rgba(160, 48, 240, 0.08); + border: 1px solid rgba(160, 48, 240, 0.35); +} + +.mine-queue-pos { + font-size: 11px; + color: #806080; + min-width: 16px; +} + +.mine-queue-icon { + display: flex; + align-items: center; + justify-content: center; + width: 22px; + height: 22px; +} + +.mine-queue-icon img { + width: 22px; + height: 22px; + object-fit: contain; + filter: drop-shadow(0 1px 2px rgba(0,0,0,0.6)); + display: block; +} + +.mine-queue-label { + flex: 1; + color: #d0a0ff; font-weight: bold; } -.mine-btn-loop { +.mine-queue-dur { + font-size: 11px; + color: #806080; +} + +/* ── Schleife hinzufügen ───────────────────────── */ +.mine-queue-add { + margin-bottom: 2px; +} + +.mine-btn-add-loop { width: 100%; display: flex; align-items: center; justify-content: center; gap: 6px; - background: linear-gradient(180deg, #3a1060 0%, #200840 100%); - color: #d090ff; - border: 1px solid #8040c0; + background: linear-gradient(180deg, #2a1040 0%, #180828 100%); + color: #c080ff; + border: 1px dashed #6030a0; border-radius: 6px; - padding: 8px 16px; + padding: 8px 14px; font-size: 12px; font-family: sans-serif; font-weight: bold; cursor: pointer; - letter-spacing: 0.03em; - transition: filter 0.15s, transform 0.1s; - box-shadow: 0 2px 6px rgba(0,0,0,0.4); + letter-spacing: 0.02em; + transition: border-color 0.2s, background 0.2s, transform 0.1s; } -.mine-btn-loop:hover:not(:disabled) { - filter: brightness(1.25); +.mine-btn-add-loop:hover:not(:disabled) { + border-color: #a060e0; + background: linear-gradient(180deg, #3a1860 0%, #280a40 100%); transform: translateY(-1px); } -.mine-btn-loop:active:not(:disabled) { - transform: translateY(0); - filter: brightness(0.9); +.mine-btn-add-loop-open { + border-style: solid; + border-color: #a060e0; + background: linear-gradient(180deg, #3a1860 0%, #280a40 100%); } -.mine-btn-loop.mine-btn-disabled, -.mine-btn-loop:disabled { - background: linear-gradient(180deg, #1a1020 0%, #100810 100%); - border-color: #3a2050; - color: #604080; +.mine-btn-add-loop.mine-btn-disabled, +.mine-btn-add-loop:disabled { + background: linear-gradient(180deg, #1a1020 0%, #100818 100%); + border-color: #301850; + color: #503060; cursor: not-allowed; - box-shadow: none; transform: none; - filter: none; +} + +/* ── Picker im Loop-Bereich ────────────────────── */ +.mine-loop-picker { + margin-top: 8px; + padding: 10px; + background: rgba(100, 30, 160, 0.07); + border: 1px solid rgba(100, 30, 160, 0.25); + border-radius: 6px; } .mine-loop-gem-icon { font-size: 14px; } -.mine-loop-no-gems { - font-size: 10px; - color: #804060; - font-weight: normal; -} - /* ── Aktions-Bereich ───────────────────────────── */ .mine-actions { margin-top: 4px; diff --git a/public/js/buildings/mine.js b/public/js/buildings/mine.js index e16eb2c..f5d80e8 100644 --- a/public/js/buildings/mine.js +++ b/public/js/buildings/mine.js @@ -28,12 +28,13 @@ async function renderMineStatus(buildingId) { "
Ressource wählen
" + + "Wähle eine Ressource für die nächsten " + data.session_hours + "h.
" + + renderResourceGrid(data.production, null, buildingId, "select") + ); +} - const buttons = resources.map(r => { - const isSelected = data.selected_resource === r.resource; +/* ───────────────────────────────────────────────── + Aktive Session (mit Timer, Queue, Collect-Button) +───────────────────────────────────────────────── */ +function renderActiveSession(data, buildingId) { + return ( + // Aktuelle Produktion + renderCurrentProduction(data) + + renderDivider() + + + // Warteschlangen-Bereich + renderQueueSection(data, buildingId) + + renderDivider() + + + // Abholen-Button + renderCollectSection(data, buildingId) + ); +} + +/* ───────────────────────────────────────────────── + Aktuelle Produktion +───────────────────────────────────────────────── */ +function renderCurrentProduction(data) { + const minutesLeft = Math.floor(data.next_cycle_in_seconds / 60); + const secondsLeft = data.next_cycle_in_seconds % 60; + const progressPct = Math.min(100, Math.round((data.cycles / data.max_cycles) * 100)); + + return ( + "Aktuelle Session – " + data.session_hours + "h
" + + "Warteschlange" + + " (" + loop_slots_used + "/4)
"; + + // Belegte Slots + loop_queue.forEach((res, i) => { + html += + "Warteschlange voll – 4 Schleifen aktiv.
"; + } + + return html; +} + +/* ───────────────────────────────────────────────── + Ressourcen-Raster (wiederverwendbar für select + loop) + mode: "select" | "loop" +───────────────────────────────────────────────── */ +function renderResourceGrid(production, activeResource, buildingId, mode) { + const buttons = production.map(r => { + const isActive = r.resource === activeResource; return ( - "