fix game

cmd/client/web/index.html

@@ -296,6 +296,7 @@
     <div id="loading" class="loading-screen">
         <div class="spinner"></div>
         <p>Lade Escape From Teacher...</p>
+        <div id="loadingQuote" style="max-width:500px;margin-top:30px;padding:0 20px;text-align:center;"></div>
     </div>
 </div>
 
@@ -404,6 +405,28 @@ const SPRUECHE = [
     { text: "„Mach nicht den Reda!“ = In einen Raum gehen, vor dem Schüler warten, und ihnen noch zurufen, dass da eine andere Klasse drin ist – in dem Moment hat er die Tür schon aufgemacht und blickt in die verwirrten Gesichter der fremden Klasse.", author: "Schulflur-Legende" },
 ];
 
+function showLoadingQuote() {
+    const el = document.getElementById('loadingQuote');
+    if (!el || !SPRUECHE.length) return;
+    const q = SPRUECHE[Math.floor(Math.random() * SPRUECHE.length)];
+    const txt = q.text.replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;');
+    const ctx = q.ctx ? q.ctx.replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;') : '';
+    const auth = q.author.replace(/&/g,'&amp;');
+    el.innerHTML = '<p style="font-family:sans-serif;font-size:13px;color:#ddd;line-height:1.6;font-style:italic;">\u201E' + txt + '\u201C</p>'
+        + (ctx ? '<p style="font-size:11px;color:#ccc;margin-top:4px;font-style:italic;">' + ctx + '</p>' : '')
+        + '<p style="font-size:12px;color:#fc0;margin-top:6px;">\u2014 ' + auth + '</p>';
+}
+showLoadingQuote();
+
+// Wechsle Spruch alle 4 Sekunden während des Ladens
+const _loadingQuoteInterval = setInterval(function() {
+    if (document.getElementById('loading') && !document.getElementById('loading').classList.contains('hidden')) {
+        showLoadingQuote();
+    } else {
+        clearInterval(_loadingQuoteInterval);
+    }
+}, 4000);
+
 function showSprueche() {
     document.querySelectorAll('.overlay-screen').forEach(el => el.classList.add('hidden'));
     document.getElementById('spruecheMenu').classList.remove('hidden');
@@ -414,10 +437,10 @@ function showSprueche() {
         const txt = q.text.replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;');
         const ctx = q.ctx ? q.ctx.replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;') : '';
         const auth = q.author.replace(/&/g,'&amp;');
-        return '<div style="background:rgba(0,0,0,0.45);border-left:3px solid #fc0;margin:8px 0;padding:12px 15px;border-radius:3px;">'
-            + '<p style="margin:0 0 6px;font-family:sans-serif;font-size:14px;color:#eee;line-height:1.5;">' + txt + '</p>'
-            + (ctx ? '<p style="margin:0 0 4px;font-size:11px;color:#aaa;font-style:italic;">' + ctx + '</p>' : '')
-            + '<p style="margin:0;font-size:12px;color:#fc0;">— ' + auth + '</p>'
+        return '<div style="background:rgba(255,255,255,0.92);border-left:4px solid #fc0;margin:8px 0;padding:12px 15px;border-radius:3px;">'
+            + '<p style="margin:0 0 6px;font-family:sans-serif;font-size:14px;color:#111;line-height:1.5;">' + txt + '</p>'
+            + (ctx ? '<p style="margin:0 0 4px;font-size:11px;color:#555;font-style:italic;">' + ctx + '</p>' : '')
+            + '<p style="margin:0;font-size:12px;color:#996600;font-weight:bold;">— ' + auth + '</p>'
             + '</div>';
     }).join('');
 }