);
}
function LiveFeed({ wins, palette: M }) {
return (
{wins.length === 0 ? (
{'>'} no wins yet — pick a game and run it.
) : wins.slice(0,7).map(w=>(
[{new Date(w.t).toLocaleTimeString().slice(0,5)}] {w.user} won {w.amt} {w.coin} on {w.game}({w.mult.toFixed(1)}x)
))}
);
}
// ─── HOW IT WORKS ────────────────────────────────────────────────
function HowPage({ setPage, palette: M }) {
const steps = [
{ n:'01', t:'connect a wallet', d:'phantom or solflare. we never touch your keys. signing a message proves the bag is yours.' },
{ n:'02', t:'pick a game', d:'8 games. every one publishes a server-seed hash before you bet. that hash is the commitment.' },
{ n:'03', t:'commit your seed + place a bet', d:'you set a client seed (or roll a random one). it gets mixed with the server seed and a nonce to produce the round.' },
{ n:'04', t:'roll', d:'we sha-256 (server : client : nonce). the resulting hex deterministically picks the outcome — coin side, slot reels, dealer hand, ball pocket, card draw.' },
{ n:'05', t:'verify', d:'rotate your seed on the fairness page any time. when you do, we reveal the previous server seed and you can recompute hmac-sha256(server, client:nonce) against any recorded round.' },
];
return (
HOW IT WORKS
5 minutes of reading and you'll know more about online gambling than 99% of online gamblers.
{steps.map(s => (
{s.n}
{s.t}
{s.d}
))}
{'>'} the math_
game
RTP
edge
note
{[
['flip','99%','1%','50/50 odds @ 2× payout · 1% commission on wins'],
['slots','96.8%','3.2%','3-reel · 11 symbols · 3-of-a-kind / family / pair · pro mode 6-reel runs 97.8%'],
['blackjack','99%','1%','6-deck shoe · h17 · double any · split aces once'],
['roulette','97.3%','2.7%','european single-zero · pari-mutuel pays'],
['baccarat','98.94%','1.06%','banker bet · 5% commission'],
['hi-lo','99%','1%','higher / lower vs dealer card · per-rank multipliers · ties push'],
['video poker','99.10%','0.90%','jacks or better · 10/6 paytable · royal 200× · sf 30×'],
['mines','99%','1%','5×5 grid · pick safe tiles · cash out before a mine'],
].map((r,i)=>(
{r[0]}
{r[1]}
{r[2]}
{r[3]}
))}
{'>'} casinos are designed to make money. that is fine.
{'>'} the deal at run! is: we tell you the edge. we publish every seed. we let you verify every roll.
{'>'} you cannot beat the math. you can only have fun on the way.
{'>'} set a budget. lose it. log off. play tomorrow.
);
}
// ─── FAIRNESS ────────────────────────────────────────────────────
function FairnessPage({ palette: M, wallet, fairness }) {
// Persist verify-input across page navigation. Without this, leaving the
// page (e.g. to copy a hash from a game) wipes whatever's been pasted in.
const [verifyInput, setVerifyInput] = useStateP(() => {
try {
const s = localStorage.getItem('run!verifyInput');
if (s) {
const p = JSON.parse(s);
return { server: p.server || '', client: p.client || '', nonce: +p.nonce || 0 };
}
} catch {}
return { server:'', client:'', nonce:0 };
});
useEffectP(() => {
try { localStorage.setItem('run!verifyInput', JSON.stringify(verifyInput)); } catch {}
}, [verifyInput]);
const [verifyOut, setVerifyOut] = useStateP(null);
const [signing, setSigning] = useStateP(false);
const [signOut, setSignOut] = useStateP(null);
const [rotating, setRotating] = useStateP(false);
// Verifier input validation (audit MED-2): require hex, sane lengths.
function validInputs() {
const s = (verifyInput.server || '').trim().toLowerCase();
const c = (verifyInput.client || '').trim().toLowerCase();
const n = Number(verifyInput.nonce);
if (!/^[0-9a-f]{32,128}$/.test(s)) return { err: 'server seed must be 32-128 hex characters' };
if (!/^[0-9a-f]{16,128}$/.test(c)) return { err: 'client seed must be 16-128 hex characters' };
if (!Number.isInteger(n) || n < 0 || n > 1e9) return { err: 'nonce must be a non-negative integer' };
return { server: s, client: c, nonce: n };
}
async function computeVerify(parsed) {
const hex = await hmacSha256Hex(parsed.server, `${parsed.client}:${parsed.nonce}`);
// Cross-check that the supplied server seed matches a published commitment.
const commitmentHash = await sha256Hex(parsed.server);
let matchedCommitment = null;
if (commitmentHash === fairness.serverHash) {
matchedCommitment = { hash: fairness.serverHash, label: 'current' };
} else if (fairness.revealedSeeds) {
const m = fairness.revealedSeeds.find(r => r.commitment === commitmentHash);
if (m) matchedCommitment = { hash: commitmentHash, label: 'previously revealed' };
}
// Cross-check the computed round hash against any recorded round.
const matchedRound = fairness.history.find(h =>
h.hex === hex && h.clientSeed === parsed.client && h.nonce === parsed.nonce
);
return { hex, commitmentHash, matchedCommitment, matchedRound };
}
async function doVerify() {
const parsed = validInputs();
if (parsed.err) { setVerifyOut({ err: parsed.err }); return; }
setVerifyOut(await computeVerify(parsed));
}
// Auto-run verifier on input change (debounced 300ms). Silent on validation
// failure so partial typing doesn't flash error toasts; the compute button
// still surfaces an explicit error if clicked with invalid fields.
useEffectP(() => {
const parsed = validInputs();
if (parsed.err) { setVerifyOut(null); return; }
let cancelled = false;
const t = setTimeout(async () => {
const result = await computeVerify(parsed);
if (!cancelled) setVerifyOut(result);
}, 300);
return () => { cancelled = true; clearTimeout(t); };
}, [verifyInput, fairness.serverHash, fairness.revealedSeeds, fairness.history]); // eslint-disable-line
async function doRotate() {
if (rotating) return;
setRotating(true);
try { await fairness.rotateSeed(); } finally { setRotating(false); }
}
async function doSign() {
setSigning(true);
try {
const msg = `Run! casino: I, ${wallet.address}, am alive at ${new Date().toISOString()}.`;
const sig = await wallet.signMessage(msg);
setSignOut({ msg, sig });
} catch (e) {
setSignOut({ err: e?.message || 'rejected' });
} finally { setSigning(false); }
}
return (
PROVABLY FAIR
commit-reveal HMAC-SHA-256. rotate the seed to reveal it. verify here, in any hmac tool, or write your own.
{/* Rows wrapped in rc-table-scroll so long hex strings can scroll
sideways within the Frame on narrow viewports (matches the
recent-rolls pattern). minWidth on the inner div triggers the
overflow when the Frame's content area is narrower. */}
{'>'} rotation reveals the current server seed and installs a new one.
past rounds become verifiable against the revealed seed below.
{/* Input rows wrapped in rc-table-scroll so the wide inputs (64-char
hex) can scroll sideways within the Frame on narrow viewports
(matches the recent-rolls pattern). Button stays outside the
scroll wrapper so it doesn't slide off-screen. */}
{verifyOut.hex}
{/* Commitment check — does sha256(server_seed) match a published commitment? */}
{verifyOut.matchedCommitment ? (
✓ server seed matches the {verifyOut.matchedCommitment.label} commitment
) : (
✗ server seed does not match any published commitment
)}
{/* Round match — does the computed hash match a recorded round in history? */}
{verifyOut.matchedRound ? (
✓ round verified — matches recorded {verifyOut.matchedRound.game} roll at nonce {verifyOut.matchedRound.nonce}
) : (
{'>'} no recorded round in this session matches — compare manually to your saved hash
)}
)}
{verifyOut?.err &&
{'>'} {verifyOut.err}
}
{/* Revealed seeds — populated by past rotations */}
{fairness.revealedSeeds && fairness.revealedSeeds.length > 0 && (
{'>'} each previously-active server seed, revealed at rotation. paste these
into the verifier above to confirm any past round.
))}
)}
{/* Round history. Each row's verify button auto-fills all three
verifier fields with that round's exact server seed (looked up
via commitment in revealedSeeds), client seed, and nonce. Rounds
played under the still-active commitment need a rotate first to
expose the seed; their button stays disabled with an explainer
tooltip. */}
{fairness.history.length === 0 &&
{'>'} send only {wallet.activeCoin} on the {wallet.activeCoin==='SOL'?'solana':'solana SPL'} network
{'>'} 1 confirmation required · usually credited in < 30s
{'>'} no min · no fee · house never touches your funds
)}
↗ FIREBASE
);
}
function AdminSideNav({ palette: M, view, setView }) {
return (
);
}
function AdminLocked({ palette: M, setPage, wallet }) {
return (
⊘ ADMIN · LOCKED
this page is owner-only.
{wallet.connected
? <>the connected wallet {wallet.address.slice(0,6)}…{wallet.address.slice(-4)} is not the owner.
: 'connect the owner wallet to unlock.'}
);
}
function AdminCaveat({ palette: M }) {
return (
⚠ self-reported telemetry{' '}
·{' '}
game resolution runs in the browser; modified-JS users could push fake /plays rows.
treat these numbers as engagement signal, not accounting truth — the fix is the Path B server-authoritative migration.
);
}
// ─── Plays aggregation helpers ────────────────────────────────────
// Both Dashboard and Analytics views run the same per-plays aggregation,
// so we centralize the bucket + per-game math once and let each view
// project what it needs.
function bucketizePlays(plays, range, now) {
const cfg = ADM_RANGES[range];
const start = now - cfg.windowMs;
const buckets = Array.from({ length: cfg.bucketCount }, (_, i) => ({
t: start + i * cfg.bucketMs,
plays: 0, wagered: 0, paid: 0, users: new Set(),
}));
for (const p of plays) {
if (!p.t || p.t < start) continue;
const idx = Math.floor((p.t - start) / cfg.bucketMs);
if (idx < 0 || idx >= buckets.length) continue;
const b = buckets[idx];
b.plays++;
b.wagered += Number(p.bet) || 0;
b.paid += Number(p.payout) || 0;
if (p.user) b.users.add(p.user);
}
return buckets.map(b => ({ ...b, users: b.users.size, net: b.wagered - b.paid }));
}
// aggregatePerGame — per-game stats. With `includeAll = true` every entry in
// ADM_GAMES is included even if it has zero plays (lets the breakdown table
// show all 8 games consistently regardless of which have data yet).
function aggregatePerGame(plays, includeAll = false) {
const m = {};
if (includeAll) {
for (const g of ADM_GAMES) m[g] = { plays:0, wagered:0, paid:0, users: new Set() };
}
for (const p of plays) {
const g = p.game || '?';
const o = m[g] || (m[g] = { plays:0, wagered:0, paid:0, users: new Set() });
o.plays++;
o.wagered += Number(p.bet) || 0;
o.paid += Number(p.payout) || 0;
if (p.user) o.users.add(p.user);
}
return Object.entries(m).map(([g, o]) => ({
game: g,
plays: o.plays,
wagered: o.wagered,
paid: o.paid,
net: o.wagered - o.paid,
rtp: o.wagered > 0 ? (o.paid / o.wagered) * 100 : 0,
users: o.users.size,
ppu: o.users.size > 0 ? o.plays / o.users.size : 0,
})).sort((a, b) => b.wagered - a.wagered);
}
// distinctUsersInWindow — legacy helper (username-keyed). Kept for back-compat
// with the Dashboard's per-window active-users tile, which renders username
// counts. Per-UID counts go through distinctUidsInWindow instead.
function distinctUsersInWindow(plays, now, windowMs) {
const cutoff = windowMs === Infinity ? 0 : now - windowMs;
const s = new Set();
for (const p of plays) if (p.t && p.t >= cutoff && (p.uid || p.user)) s.add(p.uid || p.user);
return s.size;
}
// ─── SVG chart primitives ─────────────────────────────────────────
// All charts render into a parent-measured width via ResizeObserver, so
// the line+area chart scales fluidly with the canvas. Falls back to a
// sensible default width (800) before mount.
function useElementWidth(initial = 800) {
const ref = React.useRef(null);
const [w, setW] = React.useState(initial);
React.useEffect(() => {
if (!ref.current || typeof ResizeObserver === 'undefined') return;
const ro = new ResizeObserver(entries => {
const e = entries[0];
if (e && e.contentRect.width > 0) setW(Math.floor(e.contentRect.width));
});
ro.observe(ref.current);
return () => ro.disconnect();
}, []);
return [ref, w];
}
function scaleLinear(d0, d1, r0, r1) {
if (d1 === d0) return () => (r0 + r1) / 2;
const k = (r1 - r0) / (d1 - d0);
return v => r0 + (v - d0) * k;
}
// LineChart — time-series with optional area fill. `data` is [{x, y}],
// x is a timestamp (ms), y is the metric value. yFmt + xFmt are tick
// label formatters. `color` is the line color (area fill is color@33).
function LineChart({ data, height = 260, color, fill = true, palette: M, yFmt = String, xFmt = (t) => new Date(t).toLocaleTimeString([], {hour:'numeric'}), xTicks = 6, yTicks = 4 }) {
const [wrapRef, width] = useElementWidth();
if (!data || data.length === 0) {
return (
);
}
// BarChart — horizontal bar per category, sorted by value desc. `data`
// is [{ label, value, color? }]. Labels render on the left, value on
// the right of each bar. Bar widths are scaled to the max in the set.
function BarChart({ data, palette: M, height = 220, valueFmt = (v) => String(v), accentFor }) {
const [wrapRef, width] = useElementWidth();
if (!data || data.length === 0) {
return
);
}
// ─── Shared bits ──────────────────────────────────────────────────
function ViewHeader({ palette: M, title, subtitle }) {
return (
{title}
{subtitle &&
{subtitle}
}
);
}
function RadioStrip({ palette: M, options, value, onChange }) {
return (
{options.map(o => {
const active = value === o.k;
return (
);
})}
);
}
function DataError({ palette: M, message }) {
return (
⚠ {message}
this almost certainly means the Firebase rules haven't been published yet, or your admin uid
isn't in the read allowlist. paste admin/firebase-rules-step2.json into the Firebase
console, then refresh.
);
}
function NoPlaysYet({ palette: M }) {
return (
no plays recorded yet. play a few rounds on any game (or have a test user do so) and they'll
start appearing here within ~1 second of each round resolving.
);
}
function LeaderBoard({ rows, M, kind }) {
if (!rows || rows.length === 0) {
return