cay/dok
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

sfrjr

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
public/css/launcher.css
View File

@ -16,7 +16,7 @@ body {
width: 2037px; width: 2037px;
height: 1018px; height: 1018px;
flex-shrink: 0; flex-shrink: 0;
will-change: transform; /* translateZ(0) entfernt – verhindert Zittern */ will-change: transform;
} }
.map-image { .map-image {
@ -34,7 +34,7 @@ body {
left: 0; left: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
will-change: transform; /* translateZ(0) entfernt – verhindert Zittern */ will-change: transform;
} }
.area { .area {
@ -51,6 +51,29 @@ body {
stroke: #6ec6ff; 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 { #game-chat {
position: fixed; position: fixed;

18
public/js/map-ui.js
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 { loadBlackmarket } from "./buildings/blackmarket.js";
import { loadMine } from "./buildings/mine.js"; import { loadMine } from "./buildings/mine.js";
const popup = document.getElementById("building-popup"); const popup = document.getElementById("building-popup");
@ -185,8 +185,20 @@ document.querySelectorAll(".building").forEach((building) => {
}); });
building.addEventListener("mousemove", (e) => { building.addEventListener("mousemove", (e) => {
tooltip.style.left = e.clientX + 15 + "px"; // Tooltip erst rendern lassen damit offsetWidth korrekt ist
tooltip.style.top = e.clientY + 15 + "px"; 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", () => { building.addEventListener("mouseleave", () => {