This commit is contained in:
cay 2026-03-29 11:23:39 +01:00
parent 551f8458bc
commit d3e2421b19
2 changed files with 40 additions and 5 deletions

View File

@ -16,7 +16,7 @@ body {
width: 2037px;
height: 1018px;
flex-shrink: 0;
will-change: transform; /* translateZ(0) entfernt verhindert Zittern */
will-change: transform;
}
.map-image {
@ -34,7 +34,7 @@ body {
left: 0;
width: 100%;
height: 100%;
will-change: transform; /* translateZ(0) entfernt verhindert Zittern */
will-change: transform;
}
.area {
@ -51,6 +51,29 @@ body {
stroke: #6ec6ff;
}
/* ── Map Tooltip ───────────────────────────────── */
#map-tooltip {
position: fixed;
pointer-events: none;
background: rgba(0, 0, 0, 0.85);
color: #f3e6c5;
border: 1px solid #8b6a3c;
border-radius: 6px;
padding: 8px 12px;
font-family: serif;
font-size: 13px;
display: none;
z-index: 9999;
max-width: min(220px, calc(100vw - 20px));
line-height: 1.6;
}
#map-tooltip hr {
border: none;
border-top: 1px solid #8b6a3c;
margin: 6px 0;
}
#game-chat {
position: fixed;

View File

@ -1,4 +1,4 @@
import { loadCharacterHouse } from "./buildings/character-house.js";
import { loadCharacterHouse } from "./buildings/character-house.js";
import { loadBlackmarket } from "./buildings/blackmarket.js";
import { loadMine } from "./buildings/mine.js";
const popup = document.getElementById("building-popup");
@ -185,8 +185,20 @@ document.querySelectorAll(".building").forEach((building) => {
});
building.addEventListener("mousemove", (e) => {
tooltip.style.left = e.clientX + 15 + "px";
tooltip.style.top = e.clientY + 15 + "px";
// Tooltip erst rendern lassen damit offsetWidth korrekt ist
const tw = tooltip.offsetWidth;
const th = tooltip.offsetHeight;
let x = e.clientX + 15;
let y = e.clientY + 15;
// Rechter Rand Tooltip links vom Cursor anzeigen
if (x + tw > window.innerWidth - 10) x = e.clientX - tw - 10;
// Unterer Rand Tooltip über dem Cursor anzeigen
if (y + th > window.innerHeight - 10) y = e.clientY - th - 10;
tooltip.style.left = x + "px";
tooltip.style.top = y + "px";
});
building.addEventListener("mouseleave", () => {