giers10/virtual_interdimensional_spirit_summoner
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Add backdrop and improve overlay close functionality in app.js

Browse Source
This commit is contained in:
Victor Giers
2025-05-28 05:40:32 +02:00
parent 8149c407e8
commit 0c1bcaac46
1 changed files with 49 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

69
node/server/public/app.js
View File

@@ -436,6 +436,20 @@ let lastOverlaySpiritData = null;
// Overlay zentriert in der Mitte mit Schließen-X // Overlay zentriert in der Mitte mit Schließen-X
function showSpiritOverlay(spirit) { function showSpiritOverlay(spirit) {
// Entferne evtl. vorherige Overlay-Elemente
document.getElementById('spirit-info-backdrop')?.remove();
// Erzeuge einen semi-transparenten Backdrop
const backdrop = document.createElement('div');
backdrop.id = 'spirit-info-backdrop';
backdrop.style = `
position: fixed;
inset: 0;
background: rgba(0,0,0,0.55);
z-index: 9998;
`;
document.body.appendChild(backdrop);
let el = document.getElementById('spirit-info'); let el = document.getElementById('spirit-info');
if (!el) { if (!el) {
el = document.createElement('div'); el = document.createElement('div');
@@ -445,31 +459,32 @@ function showSpiritOverlay(spirit) {
left: 50%; top: 50%; left: 50%; top: 50%;
transform: translate(-50%,-50%); transform: translate(-50%,-50%);
color: white; color: white;
background: rgba(0,0,0,0.87); background: rgba(0,0,0,0.94);
padding: 24px 32px 20px 32px; padding: 28px 36px 24px 36px;
border-radius: 16px; border-radius: 18px;
font-family: 'Segoe UI', sans-serif; font-family: 'Segoe UI', sans-serif;
z-index: 9999; z-index: 9999;
max-width: 540px; max-width: 560px;
min-width: 300px; min-width: 320px;
box-shadow: 0 6px 48px #000a; box-shadow: 0 12px 64px #000a;
text-align: left; text-align: left;
`; `;
document.body.appendChild(el); document.body.appendChild(el);
} }
// Bild-URL (falls vorhanden)
let img = "";
if (spirit["Image URL"]) {
img = `<img src="${spirit["Image URL"]}"
style="display:block; margin:0 auto 20px auto; max-width:70%; max-height:220px; border-radius:8px; box-shadow: 0 0 16px #0008;"
alt="Spirit Image">`;
}
el.innerHTML = ` el.innerHTML = `
<button id="spirit-overlay-close" style=" <button id="spirit-overlay-close" style="
position:absolute; right:12px; top:12px; border:none; background:none; position:absolute; right:-16px; top:-16px;
color:#fff; font-size:1.5em; cursor:pointer; padding:0; line-height:1; width:56px; height:56px;
" title="Schließen">&times;</button> background:none; border:none; border-radius:50%;
${img} color:#fff; font-size:2.5em; cursor:pointer;
line-height:1; display:flex; align-items:center; justify-content:center;
box-shadow: 0 0 16px #0008;
transition: background 0.18s;
" title="Schließen" tabindex="0"
onmouseover="this.style.background='rgba(255,255,255,0.10)'"
onmouseout="this.style.background='none'"
>&times;</button>
${spirit['Image URL'] ? `<img src="${spirit['Image URL']}" alt="Spirit Image" style="display:block; margin:0 auto 18px auto; max-width:240px; max-height:180px; border-radius:9px; background:#222;">` : ''}
<h2 style='padding:0; margin:0 0 8px 0; font-weight:700; letter-spacing:0.04em;'>${spirit.Name || 'Spirit'}</h2> <h2 style='padding:0; margin:0 0 8px 0; font-weight:700; letter-spacing:0.04em;'>${spirit.Name || 'Spirit'}</h2>
<b>${spirit.Kategorie || ''}</b><br><br> <b>${spirit.Kategorie || ''}</b><br><br>
<b>Mythos:</b> ${spirit["Mythos/Legende"] || ''}<br><br> <b>Mythos:</b> ${spirit["Mythos/Legende"] || ''}<br><br>
@@ -480,10 +495,24 @@ function showSpiritOverlay(spirit) {
el.style.display = "block"; el.style.display = "block";
lastOverlaySpiritData = spirit; lastOverlaySpiritData = spirit;
// Close-Button Event // Close-Button Event (X + Fläche)
el.querySelector("#spirit-overlay-close").onclick = () => { el.querySelector("#spirit-overlay-close").onclick = () => closeSpiritOverlay();
el.style.display = "none";
// Schließen beim Klick auf den Backdrop
backdrop.onclick = (e) => {
if (e.target === backdrop) closeSpiritOverlay();
}; };
// Schließen bei Escape bleibt:
document.onkeydown = (e) => {
if (e.key === 'Escape') closeSpiritOverlay();
};
}
// Ausgelagerte Close-Logik (zentral, für mehrfaches Schließen)
function closeSpiritOverlay() {
document.getElementById('spirit-info')?.remove();
document.getElementById('spirit-info-backdrop')?.remove();
document.onkeydown = null;
} }
// Mouse-Picking (zentral) // Mouse-Picking (zentral)