From b942401253b3568f2495d54d25a7dbc9d71dd564 Mon Sep 17 00:00:00 2001 From: Cay Date: Mon, 16 Mar 2026 14:17:37 +0000 Subject: [PATCH] update mine 6 --- public/js/buildings/mine.js | 180 +++++++++------------------- public/js/buildings/schwarzmarkt.js | 32 +---- public/js/notification.js | 38 ++++++ 3 files changed, 95 insertions(+), 155 deletions(-) create mode 100644 public/js/notification.js diff --git a/public/js/buildings/mine.js b/public/js/buildings/mine.js index 1e83ebe..bd4b59a 100644 --- a/public/js/buildings/mine.js +++ b/public/js/buildings/mine.js @@ -1,121 +1,90 @@ -/* ================================ - Mine – Frontend - Lädt den Aktionen-Tab mit - Produktionsanzeige + Abholen-Button -================================ */ - -/* window.showNotification() kommt aus dem globalen Scope (launcher.ejs) */ +import { showNotification } from "../notification.js"; export async function loadMine(buildingId) { const actionsTab = document.getElementById("tab-actions"); if (!actionsTab) return; - - actionsTab.innerHTML = `
⛏️ Lade Mineninfo...
`; - + actionsTab.innerHTML = `
Lade Mineninfo...
`; await renderMineStatus(buildingId); } -/* ───────────────────────────────────────── - Status rendern -───────────────────────────────────────── */ async function renderMineStatus(buildingId) { const actionsTab = document.getElementById("tab-actions"); - try { - const res = await fetch(`/api/mine/${buildingId}/status`); + const res = await fetch("/api/mine/" + buildingId + "/status"); if (!res.ok) throw new Error("API Fehler"); const data = await res.json(); if (data.error) { - actionsTab.innerHTML = `

⚠️ ${data.error}

`; + actionsTab.innerHTML = "

" + data.error + "

"; return; } const minutesLeft = Math.floor(data.next_cycle_in_seconds / 60); const secondsLeft = data.next_cycle_in_seconds % 60; - /* Ressourcen-Zeilen */ - const resourceRows = data.available - .map((r) => { - const icon = resourceIcon(r.resource); - const label = resourceLabel(r.resource); - const ready = data.ready; - return ` -
- ${icon} - ${label} - ${r.amount} -
`; - }) - .join(""); + const resourceRows = data.available.map((r) => { + const icon = resourceIcon(r.resource); + const label = resourceLabel(r.resource); + return ( + "
" + + "" + icon + "" + + "" + label + "" + + "" + r.amount + "" + + "
" + ); + }).join(""); - actionsTab.innerHTML = ` -
- -
- ⛏️ Level ${data.level} - ${data.cycles > 0 ? `${data.cycles}× Zyklus abgeschlossen` : "Läuft..."} -
- -
- -

Abgebaut

-
- ${resourceRows} -
- -
- -
- Nächster Zyklus in - - ${minutesLeft}m ${secondsLeft}s - -
- -
- -
- -
`; + actionsTab.innerHTML = + "
" + + "
" + + "Level " + data.level + "" + + "" + (data.cycles > 0 ? data.cycles + "x Zyklus abgeschlossen" : "Laeuft...") + "" + + "
" + + "
" + + "

Abgebaut

" + + "
" + resourceRows + "
" + + "
" + + "
" + + "Naechster Zyklus in" + + "" + + minutesLeft + "m " + secondsLeft + "s" + + "" + + "
" + + "
" + + "" + + "
" + + "
"; startCountdown(buildingId); } catch (err) { console.error("Mine Fehler:", err); - actionsTab.innerHTML = `

⚠️ Fehler beim Laden der Mineninfo.

`; + actionsTab.innerHTML = "

Fehler beim Laden der Mineninfo.

"; } } -/* ───────────────────────────────────────── - Abholen-Klick -───────────────────────────────────────── */ document.addEventListener("click", async (e) => { const btn = e.target.closest("#mine-collect-btn"); if (!btn || btn.disabled) return; const buildingId = btn.dataset.building; - - btn.disabled = true; - btn.textContent = "⏳ Wird abgeholt..."; + btn.disabled = true; + btn.textContent = "Wird abgeholt..."; try { - const res = await fetch(`/api/mine/${buildingId}/collect`, { method: "POST" }); + const res = await fetch("/api/mine/" + buildingId + "/collect", { method: "POST" }); if (!res.ok) throw new Error("API Fehler"); const data = await res.json(); if (data.error) { - window.showNotification( + showNotification( data.ready_in_display - ? `Die Mine ist noch nicht bereit.\nBereit in: ${data.ready_in_display}` + ? "Die Mine ist noch nicht bereit.\nBereit in: " + data.ready_in_display : data.error, "Mine", "⛏️" @@ -124,33 +93,20 @@ document.addEventListener("click", async (e) => { return; } - /* Erfolg – was wurde abgeholt? */ const lines = data.collected - .map((c) => `${resourceIcon(c.resource)} ${resourceLabel(c.resource)}: +${c.amount}`) + .map((c) => resourceIcon(c.resource) + " " + resourceLabel(c.resource) + ": +" + c.amount) .join("\n"); - window.showNotification( - `Erfolgreich abgeholt!\n\n${lines}`, - "Mine", - "⛏️" - ); - + showNotification("Erfolgreich abgeholt!\n\n" + lines, "Mine", "⛏️"); await renderMineStatus(buildingId); } catch (err) { console.error("Abholen Fehler:", err); - window.showNotification( - "Fehler beim Abholen. Bitte erneut versuchen.", - "Fehler", - "⚠️" - ); + showNotification("Fehler beim Abholen. Bitte erneut versuchen.", "Fehler", "⚠️"); await renderMineStatus(buildingId); } }); -/* ───────────────────────────────────────── - Countdown-Timer (live) -───────────────────────────────────────── */ let countdownInterval = null; function startCountdown(buildingId) { @@ -158,20 +114,13 @@ function startCountdown(buildingId) { countdownInterval = setInterval(() => { const el = document.getElementById("mine-countdown"); - if (!el) { - clearInterval(countdownInterval); - return; - } + if (!el) { clearInterval(countdownInterval); return; } let secs = parseInt(el.dataset.seconds, 10) - 1; if (secs < 0) secs = 0; el.dataset.seconds = secs; + el.textContent = Math.floor(secs / 60) + "m " + (secs % 60) + "s"; - const m = Math.floor(secs / 60); - const s = secs % 60; - el.textContent = `${m}m ${s}s`; - - /* Zyklus abgeschlossen → UI neu laden */ if (secs === 0) { clearInterval(countdownInterval); renderMineStatus(buildingId); @@ -179,29 +128,12 @@ function startCountdown(buildingId) { }, 1000); } -/* ───────────────────────────────────────── - Hilfsfunktionen -───────────────────────────────────────── */ function resourceIcon(resource) { - const map = { - gold: "🪙", - copper: "🟤", - silver: "⚪", - iron: "⚙️", - stone: "🪨", - wood: "🪵", - }; - return map[resource] ?? "📦"; + const map = { gold: "🪙", copper: "🟤", silver: "⚪", iron: "⚙️", stone: "🪨", wood: "🪵" }; + return map[resource] || "📦"; } function resourceLabel(resource) { - const map = { - gold: "Gold", - copper: "Kupfer", - silver: "Silber", - iron: "Eisen", - stone: "Stein", - wood: "Holz", - }; - return map[resource] ?? resource; -} + const map = { gold: "Gold", copper: "Kupfer", silver: "Silber", iron: "Eisen", stone: "Stein", wood: "Holz" }; + return map[resource] || resource; +} \ No newline at end of file diff --git a/public/js/buildings/schwarzmarkt.js b/public/js/buildings/schwarzmarkt.js index 373d0fe..101b564 100644 --- a/public/js/buildings/schwarzmarkt.js +++ b/public/js/buildings/schwarzmarkt.js @@ -1,34 +1,4 @@ -/* ================================ - Eigene Benachrichtigung -================================ */ - -function showNotification(message, title = "Hinweis", icon = "⚔️") { - const overlay = document.getElementById("game-notification-overlay"); - const notification = document.getElementById("game-notification"); - const msgEl = document.getElementById("notification-message"); - const titleEl = document.getElementById("notification-title"); - const iconEl = document.getElementById("notification-icon"); - const okBtn = document.getElementById("notification-ok"); - - msgEl.innerText = message; - titleEl.innerText = title; - iconEl.innerText = icon; - - overlay.classList.add("show"); - notification.style.display = "block"; - - requestAnimationFrame(() => { - notification.classList.add("show"); - }); - - okBtn.onclick = () => { - notification.classList.remove("show"); - overlay.classList.remove("show"); - setTimeout(() => { - notification.style.display = "none"; - }, 200); - }; -} +import { showNotification } from "../notification.js"; export async function loadSchwarzmarkt() { const ui = document.querySelector(".building-ui"); diff --git a/public/js/notification.js b/public/js/notification.js new file mode 100644 index 0000000..26f51dd --- /dev/null +++ b/public/js/notification.js @@ -0,0 +1,38 @@ +/* ================================ + Globale Notification Funktion + Wird von allen Modulen genutzt +================================ */ + +export function showNotification(message, title = "Hinweis", icon = "⚔️") { + const overlay = document.getElementById("game-notification-overlay"); + const popup = document.getElementById("game-notification"); + const msgEl = document.getElementById("notification-message"); + const titleEl = document.getElementById("notification-title"); + const iconEl = document.getElementById("notification-icon"); + const okBtn = document.getElementById("notification-ok"); + + if (!overlay || !popup || !msgEl) return; + + msgEl.innerText = message; + titleEl.innerText = title; + iconEl.innerText = icon; + + overlay.classList.add("show"); + popup.style.display = "block"; + + requestAnimationFrame(() => { + popup.classList.add("show"); + }); + + // Alten Listener entfernen um Mehrfach-Klicks zu vermeiden + const newBtn = okBtn.cloneNode(true); + okBtn.parentNode.replaceChild(newBtn, okBtn); + + newBtn.onclick = () => { + popup.classList.remove("show"); + overlay.classList.remove("show"); + setTimeout(() => { + popup.style.display = "none"; + }, 200); + }; +}