sfrjr
This commit is contained in:
parent
551f8458bc
commit
d3e2421b19
@ -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;
|
||||
|
||||
|
||||
@ -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", () => {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user