// components.jsx — Atoms shared across screens
const { useState, useEffect, useRef, useMemo } = React;
// ─── Logo ────────────────────────────────────────────────────────────────
function PokerChip({ size = 22, color = 'var(--gold)' }) {
// A round poker chip with cross-hatched edge bites and a center pip.
const s = size;
return (
{/* Outer rim */}
{/* Edge dashes (chip bites) */}
{[0,1,2,3,4,5,6,7].map(i => {
const a = (i * 360) / 8;
return (
{/* Center pip */}
PL
{/* Highlight */}
);
}
function Wordmark({ small }) {
return (
pokerlatereg.com
PokerLateReg
);
}
// ─── Doyle avatar ───────────────────────────────────────────────────────
function CoachAvatar({ size = 36, mode = 'sharp', talking = false }) {
const ringColor = mode === 'sharp' ? 'var(--red-bright)' : mode === 'mentor' ? 'var(--gold)' : 'var(--green-bright)';
return (
A
);
}
// ─── Live countdown ──────────────────────────────────────────────────────
function Countdown({ target, big = false, urgent: forceUrgent }) {
const [now, setNow] = useState(() => new Date());
useEffect(() => {
const t = setInterval(() => setNow(new Date()), 1000);
return () => clearInterval(t);
}, []);
const diff = Math.max(0, Math.floor((target.getTime() - now.getTime()) / 1000));
const h = Math.floor(diff / 3600);
const m = Math.floor((diff % 3600) / 60);
const s = diff % 60;
const urgent = forceUrgent ?? diff < 600;
const expired = diff === 0;
const color = expired ? 'var(--muted-d)' : urgent ? 'var(--red-bright)' : 'var(--gold)';
return (
{h > 0 ? `${h}:${String(m).padStart(2,'0')}:${String(s).padStart(2,'0')}` : `${m}:${String(s).padStart(2,'0')}`}
);
}
// ─── Doyle take pill ────────────────────────────────────────────────────
function AndrewTake({ take }) {
const map = {
go: { label: 'GO', cls: 'tag-green' },
skip: { label: 'SKIP', cls: 'tag-red' },
pass: { label: 'PASS', cls: 'tag-amber' },
maybe: { label: 'MAYBE', cls: 'tag-amber' },
};
const m = map[take] || map.maybe;
return D · {m.label} ;
}
// ─── Tournament card ─────────────────────────────────────────────────────
function TournamentCard({ t, onTap, compact }) {
const closingFast = (t.regClose.getTime() - Date.now()) < 15 * 60 * 1000;
return (
onTap?.(t)} style={{
all: 'unset', cursor: 'pointer',
display: 'block', width: '100%',
padding: '16px 20px',
borderTop: '1px solid var(--line-d)',
transition: 'background 150ms var(--ease)',
}}
onMouseEnter={(e) => e.currentTarget.style.background = 'var(--felt-2)'}
onMouseLeave={(e) => e.currentTarget.style.background = 'transparent'}
>
{t.tag}
{t.casino}
{t.title}
${t.buyin.toLocaleString()} · {t.room} · L{t.level}
{!compact && (
)}
{t.friends.length > 0 && (
{t.friends.slice(0,3).map((f,i) => (
{f.avatar}
))}
{t.friends.map(f => f.name).join(', ')} {t.friends.length > 1 ? 'are in' : 'is in'}
)}
);
}
function Stat({ label, value, sub }) {
return (
{label}
{value}
{sub &&
{sub}
}
);
}
// ─── Bottom Nav ──────────────────────────────────────────────────────────
function BottomNav({ active, onTab, onPokerLateReg }) {
const tabs = [
{ id: 'home', label: 'Late Reg', icon: 'clock' },
{ id: 'coach', label: 'Kyle', icon: 'doyle' },
{ id: 'friends', label: 'Friends', icon: 'users' },
{ id: 'fantasy', label: 'Fantasy', icon: 'fantasy' },
{ id: 'me', label: 'Me', icon: 'user' },
];
return (
{tabs.map(t => (
onTab(t.id)} style={{
all: 'unset', cursor: 'pointer',
display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 3,
padding: '6px 10px', flex: 1,
color: active === t.id ? 'var(--gold)' : 'var(--muted-d)',
transition: 'color 150ms var(--ease)',
}}>
{t.label}
))}
);
}
function NavIcon({ id }) {
const s = { width: 22, height: 22, fill: 'none', stroke: 'currentColor', strokeWidth: 1.5, strokeLinecap: 'round', strokeLinejoin: 'round' };
switch (id) {
case 'clock': return
A
1
);
case 'fantasy': return (
);
default: return null;
}
}
// ─── Header ──────────────────────────────────────────────────────────────
function AppHeader({ title, eyebrow, right, onHelp }) {
return (
{eyebrow &&
{eyebrow}
}
{title}
);
}
// ─── Pacific Time clock ─────────────────────────────────────────────────
function PacificClock() {
const [now, setNow] = useState(() => new Date());
useEffect(() => {
const t = setInterval(() => setNow(new Date()), 30000);
return () => clearInterval(t);
}, []);
// We're using the "fake now" for the prototype
const fake = new Date(window.APP_DATA.NOW.getTime() + (Date.now() - window.__bootTime));
const hh = fake.getHours();
const mm = fake.getMinutes();
const ampm = hh >= 12 ? 'PM' : 'AM';
const h = ((hh + 11) % 12) + 1;
return (
{h}:{String(mm).padStart(2,'0')} {ampm} · PT
);
}
// Boot reference time
window.__bootTime = window.__bootTime || Date.now();
// ─── Friend dot for map ──────────────────────────────────────────────────
function FriendDot({ friend, x, y, onTap }) {
const color = friend.status === 'alive' ? 'var(--green-bright)' : friend.status === 'busted' ? 'var(--red-bright)' : 'var(--amber-c)';
return (
onTap?.(friend)} style={{
all: 'unset', cursor: 'pointer',
position: 'absolute', left: `${x}%`, top: `${y}%`, transform: 'translate(-50%,-50%)',
}}>
);
}
// Export
Object.assign(window, {
Wordmark, PokerChip, CoachAvatar, Countdown, AndrewTake, TournamentCard, Stat,
BottomNav, AppHeader, PacificClock, FriendDot, NavIcon,
});