GameJam: Galerie-Spiele erst auf Klick laden (kein Auto-Ton)

Statt jedes eingereichte Spiel sofort in ein iframe zu laden (wodurch
mehrere Spiele gleichzeitig Ton abspielten), zeigt die Galerie jetzt
einen "Spiel starten"-Platzhalter. Das iframe (und damit Ton) wird
erst beim Klick erzeugt.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

public/gamejam.html

@@ -298,6 +298,16 @@
   .games { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-top: 6px; }
   .game { background: var(--panel); border: 1px solid var(--line); }
   .game .frame { width: 100%; aspect-ratio: 16/10; border: none; background: var(--panel2); display: block; }
+  /* Klick-zum-Starten-Platzhalter: Spiel (und Ton) lädt erst beim Klick. */
+  .game .frame-idle {
+    width: 100%; aspect-ratio: 16/10; border: none; background: var(--panel2);
+    display: flex; flex-direction: column; align-items: center; justify-content: center;
+    gap: 10px; cursor: pointer; color: var(--ac);
+    font-family: 'Space Mono', monospace; font-size: 12px; letter-spacing: 1px;
+    text-transform: uppercase; transition: background .15s;
+  }
+  .game .frame-idle:hover { background: var(--panel); }
+  .game .frame-idle svg.ic { width: 34px; height: 34px; }
   .game .gm {
     padding: 15px 17px; display: flex; justify-content: space-between;
     align-items: center; gap: 12px; border-top: 1px solid var(--line);
@@ -738,8 +748,10 @@ async function loadGallery() {
     const who = escapeHtml(g.teilnehmer || g.team || "");
     gallery.insertAdjacentHTML("beforeend", `
       <div class="game">
-        <iframe class="frame" src="${url}" sandbox="allow-scripts allow-pointer-lock"
-                loading="lazy" title="${name}"></iframe>
+        <button class="frame-idle" type="button" data-url="${url}" aria-label="${name}">
+          <svg class="ic" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><path d="M10 8l6 4-6 4z"/></svg>
+          <span>Spiel starten</span>
+        </button>
         <div class="gm">
           <div><div class="gt">${name}</div><div class="gte">${who}</div></div>
           <a href="${url}" target="_blank" rel="noopener">Spielen
@@ -748,6 +760,19 @@ async function loadGallery() {
       </div>`);
   }
 }
+
+/* Spiel erst beim Klick laden — dann startet auch erst der Ton. */
+gallery.addEventListener("click", (e) => {
+  const idle = e.target.closest(".frame-idle");
+  if (!idle) return;
+  const iframe = document.createElement("iframe");
+  iframe.className = "frame";
+  iframe.src = idle.getAttribute("data-url") || "";
+  iframe.setAttribute("sandbox", "allow-scripts allow-pointer-lock");
+  iframe.setAttribute("title", idle.getAttribute("aria-label") || "Spiel");
+  idle.replaceWith(iframe);
+});
+
 loadGallery();
 document.getElementById("refreshBtn").addEventListener("click", loadGallery);
 </script>