go('idle')} />;
default: return null;
}
})();
return (
{view}
);
}
function ProtoBar() {
const [cur, setCur] = React.useState('idle');
React.useEffect(() => {
// Watch the route in KioskApp by observing the screen element's data-screen-label
const screen = document.getElementById('screen');
if (!screen) return;
const obs = new MutationObserver(() => {
const swap = screen.querySelector('[data-screen-label]');
if (swap) setCur(swap.dataset.screenLabel);
});
obs.observe(screen, { childList: true, subtree: true, attributes: true, attributeFilter: ['data-screen-label'] });
return () => obs.disconnect();
}, []);
return (
<>
Screens
{SCREENS.map(s => (
))}
← → to navigate
);
}
// Lift goto handler into KioskApp via a small bridge component
function KioskAppWithBridge() {
const [screen, setScreen] = React.useState('idle');
const [user, setUser] = React.useState({ name: 'Priya' });
React.useEffect(() => {
function onGoto(e) { setScreen(e.detail); }
function onKey(e) {
const idx = SCREENS.findIndex(s => s.k === screen);
if (e.key === 'ArrowRight') setScreen(SCREENS[Math.min(idx + 1, SCREENS.length - 1)].k);
else if (e.key === 'ArrowLeft') setScreen(SCREENS[Math.max(idx - 1, 0)].k);
}
window.addEventListener('proto-goto', onGoto);
window.addEventListener('keydown', onKey);
return () => { window.removeEventListener('proto-goto', onGoto); window.removeEventListener('keydown', onKey); };
}, [screen]);
const go = (k) => setScreen(k);
const view = (() => {
switch (screen) {
case 'idle': return go('choice')} />;
case 'choice': return go('signin')} onNew={() => go('register')} />;
case 'signin': return { setUser(u); go('briefing'); }} onBack={() => go('choice')} />;
case 'register': return { setUser(u); go('briefing'); }} onBack={() => go('choice')} />;
case 'briefing': return go('consent')} onBack={() => go('choice')} />;
case 'consent': return go('quiz')} onBack={() => go('briefing')} />;
case 'quiz': return go('position')} onBack={() => go('consent')} />;
case 'position': return go('capture')} onBack={() => go('quiz')} />;
case 'capture': return go('voice')} onBack={() => go('position')} />;
case 'voice': return go('breath')} onBack={() => go('capture')} />;
case 'breath': return go('done')} onBack={() => go('voice')} />;
case 'done': return go('idle')} />;
default: return null;
}
})();
return (
{view}
);
}
ReactDOM.createRoot(document.getElementById('screen')).render();
ReactDOM.createRoot(document.getElementById('protobar')).render();
ReactDOM.createRoot(document.getElementById('tweaks-root')).render();