// app.jsx — root, routes, layout, tweaks panel
const { useState: useStateApp, useEffect: useEffectApp } = React;
const APP_DEFAULTS = /*EDITMODE-BEGIN*/{
"palette": "classic",
"heroVariant": "pixel",
"showChat": true,
"showMarquee": true,
"scanlines": false
}/*EDITMODE-END*/;
// Owner-only admin gate (HANDOFF §16). Wallet match is a UI-level only —
// rules-level enforcement (delete, /plays read) is UID-bound via Firebase
// Anonymous Auth, captured after first sign-in and hardcoded into the rules.
const OWNER_PUBKEY = 'BavzthzgkyBzKZVx9zuYKnJEdmw5PKX7zbx34pmG88RQ';
// Read ?page=… from the URL on first mount. Lets the owner type
// /?page=admin to land directly on the admin page even on devices without
// the gear icon visible. Only pages we recognize are honored.
const KNOWN_PAGES = new Set([
'home','flip','slots','roulette','baccarat','blackjack','hilo','poker','mines',
'fairness','how','leaderboard','profile','wallet','admin',
]);
function readInitialPage() {
try {
const p = new URLSearchParams(location.search).get('page');
if (p && KNOWN_PAGES.has(p)) return p;
} catch {}
return 'home';
}
function App() {
const [t, setT] = useTweaks(APP_DEFAULTS);
const palette = usePalette(t.palette);
const wallet = useWallet();
const fairness = useFairness();
const anonUid = useAnonAuth();
const online = useOnlineCount();
const sol = useSolPrice();
const [page, setPage] = useStateApp(readInitialPage);
const [walletModal, setWalletModal] = useStateApp(false);
const [sidebarOpen, setSidebarOpen] = useStateApp(false);
useEffectApp(() => { setSidebarOpen(false); }, [page]);
// Per-channel chat. Each game gets its own room ('flip', 'slots', ...);
// non-game pages share 'general'. Backed by Firebase Realtime Database
// (see HANDOFF §5.58) — every device subscribed to the same channel sees
// the same live message stream. Messages persist server-side; we read
// the last 50 per channel.
const GAME_CHANNELS = ['flip', 'slots', 'roulette', 'baccarat', 'blackjack', 'hilo', 'poker', 'mines'];
// Presence channel mirrors the chat channel, with 'admin' bubbled up
// separately so the per-channel breakdown shows the owner distinctly.
const chatChannel = GAME_CHANNELS.includes(page) ? page : (page === 'admin' ? 'admin' : 'general');
const chatMessages = useFirebaseChat(chatChannel);
const addChatMessage = (text) => sendChatMessage(chatChannel, wallet.username, text);
// Live presence — writes /presence/{uid} with current channel, refreshes
// every 30s, clears on disconnect. Powers the real online count + the
// admin Ops tab's per-channel breakdown.
usePresence(anonUid, chatChannel);
// Global client-side error capture → /errors/. Capped at 100 server-side
// by the logClientError trim-then-push. Fires only after the anon UID is
// available (rules require auth).
useEffectApp(() => {
if (!anonUid) return;
const onErr = (event) => {
const msg = event?.error?.stack || event?.message || String(event);
logClientError({ msg, page: location.pathname + location.search });
};
const onRej = (event) => {
const r = event?.reason;
const msg = (r && (r.stack || r.message)) || (typeof r === 'string' ? r : 'unhandled rejection');
logClientError({ msg: 'unhandled rejection: ' + msg, page: location.pathname + location.search });
};
window.addEventListener('error', onErr);
window.addEventListener('unhandledrejection', onRej);
return () => {
window.removeEventListener('error', onErr);
window.removeEventListener('unhandledrejection', onRej);
};
}, [anonUid]);
// Close modal once connected
useEffectApp(() => { if (wallet.connected) setWalletModal(false); }, [wallet.connected]);
const M = palette;
const onConnect = () => setWalletModal(true);
const isOwner = !!wallet.address && wallet.address === OWNER_PUBKEY;
// Game pages stay mounted at all times so:
// • Auto-resolving games (flip, slots, roulette, baccarat) keep running
// their setTimeouts in the background — if you click SPIN then navigate
// away, the round still completes, the balance updates, and the result
// is waiting when you come back.
// • Blackjack preserves its in-progress hand state across navigations —
// leave mid-player-phase and your hand is right where you left it when
// you return to the page.
// Marketing / non-game pages mount on demand only (no persistent state to keep).
return (
{t.showMarquee &&
);
}
// GameMount — keeps a game page mounted in the DOM regardless of navigation.
// Hidden pages get display:none (zero layout impact) but their React state
// survives, their setTimeouts keep firing, and their wallet credits/debits
// still flow. This is the mechanism that lets slots/roulette/flip/baccarat
// auto-resolve while you're on a different page, and lets blackjack pause
// mid-hand and pick up exactly where you left it.
function GameMount({ visible, children }) {
return (