diff --git a/public/css/building.css b/public/css/building.css index 87addc6..69281c1 100644 --- a/public/css/building.css +++ b/public/css/building.css @@ -229,3 +229,21 @@ body { #popup-title { font-weight: bold; } + +#map-tooltip { + position: fixed; + pointer-events: none; + background: rgba(0, 0, 0, 0.85); + color: #fff; + padding: 8px 12px; + border-radius: 6px; + font-size: 14px; + display: none; + z-index: 9999; + max-width: 200px; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.4); +} + +#map-tooltip strong { + color: #ffd700; +} diff --git a/public/js/building.js b/public/js/building.js index df3982a..f3f7844 100644 --- a/public/js/building.js +++ b/public/js/building.js @@ -8,10 +8,14 @@ fetch("/api/buildings") if (!element) return; - const title = element.querySelector("title"); + let title = element.querySelector("title"); - if (title) { - title.textContent = building.name; + // Falls kein title existiert → erstellen + if (!title) { + title = document.createElementNS("http://www.w3.org/2000/svg", "title"); + element.prepend(title); } + + title.textContent = building.name; }); }); diff --git a/public/js/map-ui.js b/public/js/map-ui.js index 0914ad4..465d38b 100644 --- a/public/js/map-ui.js +++ b/public/js/map-ui.js @@ -1,5 +1,6 @@ const popup = document.getElementById("building-popup"); const title = document.getElementById("popup-title"); +const tooltip = document.getElementById("map-tooltip"); function resetTabs() { document @@ -112,3 +113,32 @@ async function loadBuilding(buildingId) { console.error("Fehler beim Laden des Gebäudes:", err); } } + +document.querySelectorAll(".building").forEach((building) => { + building.addEventListener("mouseenter", async (e) => { + const id = building.dataset.id; + + const res = await fetch("/api/building/" + id); + const data = await res.json(); + + tooltip.innerHTML = ` + ${data.name}
+ Level ${data.level}
+ Punkte ${data.points}/${data.nextLevelPoints}
+
+ Upgrade Kosten:
+ ${data.upgradeCost} + `; + + tooltip.style.display = "block"; + }); + + building.addEventListener("mousemove", (e) => { + tooltip.style.left = e.clientX + 15 + "px"; + tooltip.style.top = e.clientY + 15 + "px"; + }); + + building.addEventListener("mouseleave", () => { + tooltip.style.display = "none"; + }); +}); diff --git a/views/launcher.ejs b/views/launcher.ejs index 2ec8fa5..b42e5b3 100644 --- a/views/launcher.ejs +++ b/views/launcher.ejs @@ -209,5 +209,6 @@ window.playerName = "<%= character.name %>"; +