diff --git a/public/gamejam.html b/public/gamejam.html index b567c1b..36a23ef 100644 --- a/public/gamejam.html +++ b/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", `
- +
${name}
${who}
Spielen @@ -748,6 +760,19 @@ async function loadGallery() {
`); } } + +/* 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);