From a98a6b8810f55cf7da74b6b86b8426fa037bb28b Mon Sep 17 00:00:00 2001
From: Victor Giers <mail@victorgiers.com>
Date: Wed, 28 May 2025 04:54:26 +0200
Subject: [PATCH] Refactor spirit overlay logic and improve styling

---
 node/server/public/app.js | 50 +++++++++++++++++++++++++++++----------
 1 file changed, 38 insertions(+), 12 deletions(-)

diff --git a/node/server/public/app.js b/node/server/public/app.js
index 6721e3c..2b26e0a 100644
--- a/node/server/public/app.js
+++ b/node/server/public/app.js
@@ -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();