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

Refactor spirit overlay logic and improve styling

Browse Source
This commit is contained in:
Victor Giers
2025-05-28 04:54:26 +02:00
parent 1587b1dd94
commit a98a6b8810
1 changed files with 38 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -411,30 +411,56 @@ async function spawnSpirit(spiritData) {
updateSpiritOverlay(spiritData);
}
// ---- Overlay für Spirit-Infos ----
function updateSpiritOverlay(spirit) {
// ---- Overlay-Logik ----
let lastOverlaySpiritData = null;
// Overlay zentriert in der Mitte mit Schließen-X
function showSpiritOverlay(spirit) {
let el = document.getElementById('spirit-info');
if (!el) {
el = document.createElement('div');
el.id = 'spirit-info';
el.style = `
position:absolute; right:40px; bottom:40px; color:white;
background:rgba(0,0,0,0.6); padding:10px 18px; border-radius:10px;
font-family: sans-serif; z-index:10; max-width: 360px;
position: fixed;
left: 50%; top: 50%;
transform: translate(-50%,-50%);
color: white;
background: rgba(0,0,0,0.87);
padding: 24px 32px 20px 32px;
border-radius: 16px;
font-family: 'Segoe UI', sans-serif;
z-index: 9999;
max-width: 540px;
min-width: 300px;
box-shadow: 0 6px 48px #000a;
text-align: left;
`;
document.body.appendChild(el);
}
el.innerHTML = `
<h2 style='padding:0; margin:0;'>${spirit.Name || 'Spirit'}</h2>
<b>${spirit.Kategorie || ''}</b><br><br>
<b>Mythos:</b> ${spirit["Mythos/Legende"] || ''}<br><br>
<b>Rolle:</b> ${spirit["Funktion/Rolle"] || ''}<br>
<b>Charakter:</b> ${spirit.Charakter || ''}<br><br>
${spirit.Herkunft ? ' <i>' + spirit.Herkunft : ''}</i>
<button id="spirit-overlay-close" style="
position:absolute; right:12px; top:12px; border:none; background:none;
color:#fff; font-size:1.5em; cursor:pointer; padding:0; line-height:1;
" title="Schließen">&times;</button>
<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>Mythos:</b> ${spirit["Mythos/Legende"] || ''}<br><br>
<b>Rolle:</b> ${spirit["Funktion/Rolle"] || ''}<br>
<b>Charakter:</b> ${spirit.Charakter || ''}<br><br>
${spirit.Herkunft ? '<i>' + spirit.Herkunft + '</i>' : ''}
`;
el.style.display = "block";
lastOverlaySpiritData = spirit;
// Close-Button Event
el.querySelector("#spirit-overlay-close").onclick = () => {
el.style.display = "none";
};
}
// Kein automatisches Update mehr! Nicht von spawnSpirit aufrufen!
// (aber Option: „verstecke Overlay“ falls Spirit verschwindet, kann man so machen...)
// ---- Render-Loop ----
function animate() {
const dt = clock.getDelta(), t = clock.getElapsedTime();