engineering/zebra-report
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

zebra-spaces: timeline column gets a game switcher (unmario / cake murder adventure)

Browse source
This commit is contained in:
Russell Ballestrini 2026-05-31 18:35:04 -04:00
parent c7a8a938b3
commit 95d68fafac
No known key found for this signature in database
1 changed files with 31 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

39
web/zebra-spaces.html
View file

@ -32,6 +32,13 @@
min-width: 0; display: flex; flex-direction: column;
}
.controls { min-width: 0; }
.game-tabs { display: flex; gap: 0.4rem; margin-bottom: 0.5rem; flex-wrap: wrap; }
.game-tabs button {
background: #fff; color: #000; border: 1px solid #000;
padding: 0.3rem 0.8rem; font-family: monospace; font-size: 0.8rem; cursor: pointer;
}
.game-tabs button.active { background: #000; color: #fff; }
.game-tabs button:hover:not(.active) { background: #f0f0f0; }
.timeline-frame {
flex: 1; min-height: 80vh; width: 100%;
border: 1px solid #ddd; background: #fff;
@ -158,13 +165,19 @@
<div class="page">
<main class="timeline">
<!-- placeholder content for the timeline column until v0.3 lands. unmario.com is
framed unsandboxed so its own JS can run; it's same-org, public-domain. If
it refuses framing (CSP/X-Frame-Options) the iframe just stays blank — no
impact on the controls column. -->
<iframe class="timeline-frame"
<!-- placeholder content until the v0.3 event timeline lands: a game switcher
framing an external playable. Iframes load unsandboxed so the game JS can
run; if a target refuses framing (X-Frame-Options / CSP frame-ancestors)
the iframe goes blank — no impact on the controls column. -->
<div class="game-tabs" id="game-tabs">
<button type="button" class="active" data-game="unmario"
data-src="https://unmario.com/">unmario</button>
<button type="button" data-game="cake"
data-src="https://cuppcb.com/games/cake-murder-adventure/">cake murder adventure</button>
</div>
<iframe id="game-frame" class="timeline-frame"
src="https://unmario.com/"
title="unmario"
title="game"
loading="lazy"
referrerpolicy="no-referrer"></iframe>
</main>
@ -1349,6 +1362,16 @@ $('btn-copy-share').addEventListener('click', async () => {
const c = new URLSearchParams(location.search).get('code');
if (c) $('rdv-code').value = c;
}
/* game-tabs: click a button → swap iframe src + mark active. data-src is
* the only source of truth so new games just need a button. */
$('game-tabs').addEventListener('click', (ev) => {
const b = ev.target.closest('button[data-src]');
if (!b) return;
const frame = $('game-frame');
if (frame.src !== b.dataset.src) frame.src = b.dataset.src;
for (const el of $('game-tabs').querySelectorAll('button')) el.classList.toggle('active', el === b);
});
$('btn-leave').addEventListener('click', async () => {
wantConnected = false;
if (sigReconnect){ clearTimeout(sigReconnect); sigReconnect = null; }
@ -1377,8 +1400,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-05-31</span><br>
md5 <span class="stamp-md5">59cff62721b306e556354c7b5f7128c3</span><br>
sha256 <span class="stamp-sha">0554de3a7a0dafec83a4933327ea3b9a6c243f0a33976d7d60221c67aa126b47</span><br>
md5 <span class="stamp-md5">58a132641bdbf355a8b1981522ba0509</span><br>
sha256 <span class="stamp-sha">6dc07c94b3265f75f37fb69955ca1faf9bfaac12a99259948521cf901d740d3e</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>