engineering/www.unturf.com
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

zebra-report: static game thumb cards with '▶ play' cue — mirror

Browse source
This commit is contained in:
russell@unturf.com 2026-06-02 12:10:52 -04:00
parent 785cbcc705
commit d5e050753a
No known key found for this signature in database
1 changed files with 29 additions and 12 deletions
Download patch file Download diff file Expand all files Collapse all files

41
zebra-report/zebra-spaces.html
View file

@ -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');
<footer style="margin:2.2rem auto 0;font-size:0.65rem;color:#999;line-height:1.7;word-break:break-all;font-family:monospace">
<span id="pi-seal" style="color:#777;cursor:default;user-select:none" title="">page integrity</span> &nbsp;·&nbsp; built <span class="stamp-date">2026-06-02</span><br>
md5 <span class="stamp-md5">f42670fad4ce383bc903910aa43e99a3</span><br>
sha256 <span class="stamp-sha">3519283eb1041cef47bab75c9924c4d58702b64c2681aa66ccd71c5d2a9f3cbb</span><br>
md5 <span class="stamp-md5">aec8e1a791c0723464e7405f71b11ae7</span><br>
sha256 <span class="stamp-sha">baa9354fbc0ff538dcb65e510ae7c6e1b01a5032e8e44c8ff51b0c76f821f4cf</span><br>
<span style="color:#bbb">hashes are of this page with these two fields zeroed — to verify, blank them and re-hash</span><br>
<span style="color:#bbb">one self-contained file — <strong>save a copy</strong> and verify against these hashes; point at your own servers with ?signal= and ?turncred=, or <a href="host-your-own.html" style="color:#999">host your own community</a></span>
</footer>