diff --git a/web/zebra-spaces.html b/web/zebra-spaces.html
index 110a54d..d5c82b9 100644
--- a/web/zebra-spaces.html
+++ b/web/zebra-spaces.html
@@ -184,18 +184,27 @@
* sort knows people are watching. */
.games-h2 { margin-top: 0.5rem; }
#games-thumbs { display: grid; grid-template-columns: 1fr; gap: 0.45rem; }
+ /* game thumb is a STATIC tile — never loads the iframe; it's just a
+ * card with title + 'play' cue. The iframe only mounts when the tile
+ * is clicked into the spotlight slot. Click → spotlight + broadcast. */
.game-thumb {
border: 1px solid #ddd; background: #fff; padding: 0;
- display: grid; grid-template-columns: 1fr; gap: 0;
+ display: grid; grid-template-rows: 1fr auto; gap: 0;
cursor: pointer; position: relative;
aspect-ratio: 16 / 9;
}
.game-thumb:hover { outline: 1px solid #888; }
- .game-thumb .game-label {
+ .game-thumb .game-poster {
display: grid; place-items: center; text-align: center;
- font-family: monospace; font-size: 0.85rem; padding: 0.5rem;
- background: #f0f0f0; color: #333;
+ font-family: 'chunkfiveregular', serif; font-size: 1.05rem;
+ padding: 0.5rem; background: #f0f0f0; color: #333;
+ letter-spacing: 0.02em;
}
+ .game-thumb .game-meta {
+ background: #111; color: #ddd; font-size: 0.65rem; padding: 0.2rem 0.4rem;
+ display: grid; grid-template-columns: 1fr auto; gap: 0.4rem; align-items: center;
+ }
+ .game-thumb .game-meta .play-cue { color: #6c6; letter-spacing: 0.04em; }
/* spotlit game shows the iframe at full size in the middle column */
#spotlight > .game-tile {
border: 1px solid #ddd; background: #fff;
@@ -210,7 +219,7 @@
display: grid; grid-template-columns: 1fr auto; align-items: center;
}
html.theme-dark .game-thumb { background: #000; border-color: #000; }
- html.theme-dark .game-thumb .game-label { background: #111; color: #ddd; }
+ html.theme-dark .game-thumb .game-poster { background: #111; color: #ddd; }
html.theme-dark #spotlight > .game-tile { background: #000; border-color: #000; }
html.theme-dark #spotlight > .game-tile iframe { background: #000; }
html.theme-dark #spotlight > .game-tile .screen-meta { background: #111; color: #ddd; }
@@ -1533,17 +1542,25 @@ function ownerLabel(kind, pubHex){
const handle = m ? (m.mm.handle || shortHex(pubHex)) : shortHex(pubHex);
return handle + "'s " + (TILE_KINDS[kind] ? TILE_KINDS[kind].labelPrefix : kind);
}
-/* game thumbs live in #games-thumbs and click → setSpotlight('game', id) */
+/* game thumbs are STATIC cards. No iframe → no game JS, no network, no
+ * audio. The game only loads (in an iframe in the spotlight slot) when
+ * the tile is clicked. Click also broadcasts the spotlight choice so
+ * the room sees 'alice now viewing unmario'. */
function buildGameThumb(id){
const g = GAMES[id]; if (!g) return null;
const tile = document.createElement('div');
tile.className = 'game-thumb';
tile.dataset.pubHex = id;
tile.dataset.kind = 'game';
- const label = document.createElement('div');
- label.className = 'game-label';
- label.textContent = g.label;
- tile.appendChild(label);
+ const poster = document.createElement('div');
+ poster.className = 'game-poster';
+ poster.textContent = g.label;
+ tile.appendChild(poster);
+ const meta = document.createElement('div'); meta.className = 'game-meta';
+ const who = document.createElement('span'); who.textContent = 'game';
+ const cue = document.createElement('span'); cue.className = 'play-cue'; cue.textContent = '▶ play';
+ meta.appendChild(who); meta.appendChild(cue);
+ tile.appendChild(meta);
const view = document.createElement('div'); view.className = 'viewing-badge'; view.textContent = 'viewing';
tile.appendChild(view);
tile.addEventListener('click', () => {
@@ -3363,8 +3380,8 @@ logLine('', 'ready — pick a handle, type a rendezvous code, enter the space');