// Cows & Bulls — game hook + shared presentational pieces. Exposed on window.
// Loaded as text/babel. Reads CSS custom properties set by the host App.
(function () {
const { useState, useEffect, useRef, useMemo } = React;
// ---- one-time CSS ---------------------------------------------------------
if (!document.getElementById('cb-styles')) {
const s = document.createElement('style');
s.id = 'cb-styles';
s.textContent = `
.cb-root{ box-sizing:border-box; width:100%; height:100%; background:var(--cb-bg);
color:var(--cb-ink); font-family:var(--cb-sans); position:relative;
-webkit-font-smoothing:antialiased; }
.cb-root *{ box-sizing:border-box; }
.cb-mono{ font-family:var(--cb-mono); font-variant-numeric:tabular-nums; }
.cb-kicker{ font-size:11px; letter-spacing:.18em; text-transform:uppercase;
color:var(--cb-muted); font-weight:600; }
/* slots */
.cb-slots{ display:flex; gap:var(--slot-gap,18px); justify-content:center; }
.cb-slot{ width:var(--slot-w,72px); height:var(--slot-h,88px);
display:flex; align-items:center; justify-content:center;
font-family:var(--cb-mono); font-weight:600; font-size:var(--slot-fz,46px);
color:var(--cb-ink); border-bottom:3px solid var(--cb-line-strong);
transition:border-color .18s, color .18s; }
.cb-slot-cur{ border-bottom-color:var(--cb-accent); }
.cb-slot-cur::after{ content:''; width:2px; height:var(--caret-h,46px);
background:var(--cb-accent); opacity:.0; animation:cb-blink 1.1s steps(1) infinite; }
.cb-slot-empty-dim{ color:var(--cb-faint); }
@keyframes cb-blink{ 50%{opacity:.9} }
@keyframes cb-shake{ 0%,100%{transform:translateX(0)} 20%{transform:translateX(-7px)}
40%{transform:translateX(6px)} 60%{transform:translateX(-4px)} 80%{transform:translateX(3px)} }
.cb-shake{ animation:cb-shake .42s ease; }
/* keypad */
.cb-keys{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; }
.cb-key{ font-family:var(--cb-mono); font-size:19px; font-weight:600;
min-width:46px; height:52px; padding:0 12px; border-radius:10px;
border:1px solid var(--cb-line); background:var(--cb-surface); color:var(--cb-ink);
cursor:pointer; transition:transform .08s, border-color .15s, opacity .15s;
display:flex; align-items:center; justify-content:center; user-select:none; }
.cb-key:hover:not(:disabled){ border-color:var(--cb-line-strong); background:var(--cb-key-hover); }
.cb-key:active:not(:disabled){ transform:translateY(1px); }
.cb-key:disabled{ opacity:.32; cursor:default; }
.cb-key-wide{ flex:1; min-width:88px; letter-spacing:.04em; }
.cb-key-enter{ background:var(--cb-ink); color:var(--cb-bg); border-color:var(--cb-ink);
font-family:var(--cb-sans); font-weight:600; font-size:14px; letter-spacing:.06em;
text-transform:uppercase; }
.cb-key-enter:hover:not(:disabled){ background:var(--cb-ink); opacity:.86; }
.cb-key-enter:disabled{ opacity:.28; }
/* pips */
.cb-pips{ display:inline-flex; gap:4px; align-items:center; }
.cb-pip{ width:9px; height:9px; border-radius:50%; }
.cb-pip-bull{ background:var(--cb-accent); }
.cb-pip-cow{ background:color-mix(in srgb, var(--cb-cow) 16%, transparent); border:1.5px solid var(--cb-cow); }
.cb-score{ font-family:var(--cb-mono); font-size:13px; font-variant-numeric:tabular-nums;
letter-spacing:.02em; white-space:nowrap; }
.cb-score b{ color:var(--cb-accent); font-weight:700; }
.cb-score i{ color:var(--cb-cow); font-style:normal; font-weight:600; }
/* guess rows */
.cb-guess{ display:flex; align-items:center; gap:12px; animation:cb-fade .32s ease; }
@keyframes cb-fade{ from{transform:translateY(-5px)} to{transform:none} }
.cb-gidx{ font-family:var(--cb-mono); font-size:12px; color:var(--cb-faint); width:22px;
text-align:right; flex:0 0 auto; }
.cb-gnum{ font-family:var(--cb-mono); font-size:22px; font-weight:600; letter-spacing:.14em;
color:var(--cb-ink); }
/* leaderboard */
.cb-lrow{ display:grid; align-items:center; gap:10px; padding:8px 0;
border-bottom:1px solid var(--cb-line); }
.cb-lrank{ font-family:var(--cb-mono); font-size:13px; color:var(--cb-muted); width:20px; }
.cb-lname{ font-size:14px; color:var(--cb-ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cb-lg{ font-family:var(--cb-mono); font-size:14px; font-weight:600; }
.cb-lt{ font-family:var(--cb-mono); font-size:12px; color:var(--cb-muted); text-align:right; }
.cb-lrow-me{ background:var(--cb-accent-soft); margin:0 -10px; padding:8px 10px; border-radius:8px;
border-bottom-color:transparent; }
.cb-lrow-top .cb-lg{ color:var(--cb-accent); }
.cb-link{ background:none; border:none; color:var(--cb-muted); font-family:var(--cb-sans);
font-size:13px; cursor:pointer; text-decoration:underline; text-underline-offset:3px; padding:0; }
.cb-link:hover{ color:var(--cb-ink); }
.cb-cta{ font-family:var(--cb-sans); font-size:14px; font-weight:600; letter-spacing:.03em;
border:1px solid var(--cb-ink); background:var(--cb-ink); color:var(--cb-bg);
padding:11px 20px; border-radius:10px; cursor:pointer; transition:opacity .15s; white-space:nowrap; }
.cb-cta:hover{ opacity:.86; }
`;
document.head.appendChild(s);
}
// ---- hook -----------------------------------------------------------------
function useGame({ len, today, version }) {
const secret = useMemo(() => CB.secretFor(today, len) , [len, today, version]);
const board = useMemo(() => CB.leaderboard(today, len), [len, today]);
const [guesses, setGuesses] = useState([]);
const [input, setInput] = useState('');
const [msg, setMsg] = useState('');
const [shake, setShake] = useState(false);
const [won, setWon] = useState(false);
const [startedAt, setStartedAt] = useState(null);
const [elapsed, setElapsed] = useState(0);
const [winTime, setWinTime] = useState(0);
useEffect(() => {
setGuesses([]); setInput(''); setMsg(''); setWon(false);
setStartedAt(null); setElapsed(0); setWinTime(0);
}, [len, today, version]);
useEffect(() => {
if (startedAt == null || won) return;
const t = setInterval(() => setElapsed(Math.floor((Date.now() - startedAt) / 1000)), 500);
return () => clearInterval(t);
}, [startedAt, won]);
const flash = (m) => { setMsg(m); setShake(true); setTimeout(() => setShake(false), 440); };
const api = {
secret, board, guesses, input, msg, shake, won, len, today,
elapsed: won ? winTime : elapsed,
used: new Set(input.split('')),
typeDigit(ch) {
if (won || input.length >= len) return;
if (input.includes(ch)) { flash('No repeated digits'); return; }
if (startedAt == null) setStartedAt(Date.now());
setMsg(''); setInput(input + ch);
},
del() { if (!won) { setInput(input.slice(0, -1)); setMsg(''); } },
submit() {
if (won) return;
const v = CB.validate(input, len);
if (!v.ok) { flash(v.msg); return; }
const { bulls, cows } = CB.score(input, secret);
setGuesses([{ value: input, bulls, cows, n: guesses.length + 1 }, ...guesses]);
setInput('');
if (bulls === len) {
setWon(true);
setWinTime(startedAt ? Math.floor((Date.now() - startedAt) / 1000) : 0);
}
},
reset() {
setGuesses([]); setInput(''); setMsg(''); setWon(false);
setStartedAt(null); setElapsed(0); setWinTime(0);
},
};
return api;
}
// ---- shared keyboard binding ---------------------------------------------
function useKeyboard(g, active) {
const ref = useRef(g); ref.current = g;
useEffect(() => {
if (!active) return;
const onKey = (e) => {
if (e.metaKey || e.ctrlKey || e.altKey) return;
const tag = (document.activeElement && document.activeElement.tagName) || '';
if (tag === 'INPUT' || tag === 'TEXTAREA' || (document.activeElement && document.activeElement.isContentEditable)) return;
if (/^[0-9]$/.test(e.key)) { e.preventDefault(); ref.current.typeDigit(e.key); }
else if (e.key === 'Backspace') { e.preventDefault(); ref.current.del(); }
else if (e.key === 'Enter') { e.preventDefault(); ref.current.submit(); }
};
window.addEventListener('keydown', onKey);
return () => window.removeEventListener('keydown', onKey);
}, [active]);
}
// ---- pieces ---------------------------------------------------------------
function Wordmark({ today, size = 'md', align = 'center' }) {
const p = CB.dateParts(today);
const num = CB.puzzleNumber(today);
const big = size === 'lg';
return (
🥯
Bagels
{p.y} / {p.m} / {p.d} · No. {num}
);
}
function Legend({ style }) {
const row = { display: 'inline-flex', alignItems: 'center', gap: 7 };
const desc = { fontSize: 12.5, color: 'var(--cb-muted)' };
return (
Fermi (A)
right digit, right spot
Pico (B)
right digit, wrong spot
🥯Bagels
nothing matches
);
}
function Slots({ input, len, won, shake, slotW = 72, slotH = 88, fz = 46 }) {
const cells = [];
for (let i = 0; i < len; i++) {
const ch = input[i] || '';
const isCur = !won && i === input.length;
cells.push(
{ch || (isCur ? '' : '\u00A0')}
);
}
return {cells}
;
}
function ResultPips({ bulls, cows, len, showText = true }) {
if (bulls === 0 && cows === 0) {
return (
🥯
{showText && Bagels}
);
}
const pips = [];
for (let i = 0; i < bulls; i++) pips.push();
for (let i = 0; i < cows; i++) pips.push();
return (
{pips}
{showText && {bulls}A {cows}B}
);
}
function Keypad({ g, compact }) {
const digits = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '0'];
const full = g.input.length === g.len;
return (
{digits.map((d) => (
))}
);
}
function MessageLine({ g, center }) {
return (
{g.won ? 'Solved!' : (g.msg || (g.guesses.length ? '' : '\u00A0'))}
);
}
function Timer({ g, style }) {
return (
{CB.fmtTime(g.elapsed)}
);
}
function Leaderboard({ g, variant = 'list', max = 8 }) {
const board = g.board.slice(0, max);
const me = g.won ? CB.rankFor(g.board, g.guesses.length, g.elapsed) : null;
const cols = '20px 1fr auto 52px';
if (variant === 'podium') {
const top = g.board.slice(0, 3);
const rest = g.board.slice(3, max);
return (
{[top[1], top[0], top[2]].map((r, i) => {
if (!r) return
;
const place = r.rank;
const h = place === 1 ? 96 : place === 2 ? 74 : 60;
return (
{r.name}
{r.timeStr}
#{place}
);
})}
{rest.map((r) => (
{r.rank}
{r.name}
{r.guesses}
{r.timeStr}
))}
{me && (
{me}
You
{g.guesses.length}
{CB.fmtTime(g.elapsed)}
)}
);
}
return (
{board.map((r) => (
{r.rank === 1 ? '★' : r.rank}
{r.name}
{r.guesses}
{r.timeStr}
))}
{me && (
{me}
You
{g.guesses.length}
{CB.fmtTime(g.elapsed)}
)}
{label}
);
}
function ShareModal({ g, onClose }) {
const ref = useRef(null);
const [copied, setCopied] = useState('');
const [toast, setToast] = useState('');
useEffect(() => {
let cancel = false;
(async () => { try { await document.fonts.ready; } catch (e) {} if (!cancel && ref.current) drawShare(ref.current, g); })();
return () => { cancel = true; };
}, []);
useEffect(() => {
const k = (e) => { if (e.key === 'Escape') onClose(); };
document.addEventListener('keydown', k, true);
return () => document.removeEventListener('keydown', k, true);
}, [onClose]);
const flash = (w) => { setCopied(w); setTimeout(() => setCopied(''), 1600); };
const blip = (m) => { setToast(m); setTimeout(() => setToast(''), 2400); };
const toBlob = () => new Promise((r) => ref.current.toBlob(r, 'image/png'));
const download = async () => {
const bl = await toBlob();
const a = document.createElement('a');
a.href = URL.createObjectURL(bl); a.download = `bagels-${CB.puzzleNumber(g.today)}.png`; a.click();
setTimeout(() => URL.revokeObjectURL(a.href), 1000);
};
const copyImg = async () => {
try { await navigator.clipboard.write([new ClipboardItem({ 'image/png': await toBlob() })]); flash('image'); }
catch (e) { download(); }
};
const copyTxt = async () => { try { await navigator.clipboard.writeText(shareText(g) + '\n' + SHARE_URL); flash('text'); } catch (e) {} };
// Native OS share sheet — shares the real PNG to ANY app (Instagram, X,
// Telegram, Messages…). Best path on mobile. Returns false if unsupported.
const nativeShare = async () => {
try {
const file = new File([await toBlob()], `bagels-${CB.puzzleNumber(g.today)}.png`, { type: 'image/png' });
if (navigator.canShare && navigator.canShare({ files: [file] })) {
await navigator.share({ files: [file], text: shareText(g), title: 'Bagels' });
return true;
}
} catch (e) { if (e && e.name === 'AbortError') return true; }
return false;
};
const openIntent = (href) => window.open(href, '_blank', 'noopener,noreferrer');
const txt = encodeURIComponent(shareText(g));
const url = encodeURIComponent(SHARE_URL);
const intents = {
x: () => openIntent(`https://twitter.com/intent/tweet?text=${txt}&url=${url}`),
telegram: () => openIntent(`https://t.me/share/url?url=${url}&text=${txt}`),
whatsapp: () => openIntent(`https://wa.me/?text=${encodeURIComponent(shareText(g) + '\n' + SHARE_URL)}`),
facebook: () => openIntent(`https://www.facebook.com/sharer/sharer.php?u=${url}`),
};
// Instagram has no web post URL — try the native sheet, else save the
// image so they can post it manually.
const toInstagram = async () => {
if (await nativeShare()) return;
await download(); blip('Image saved — open Instagram and post it from your camera roll.');
};
const tryX = async () => { if (!(await nativeShare())) intents.x(); };
const nets = [
{ key: 'x', label: 'X', color: '#000', onClick: tryX },
{ key: 'instagram', label: 'Instagram', color: 'linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888)', onClick: toInstagram },
{ key: 'telegram', label: 'Telegram', color: '#229ED9', onClick: intents.telegram },
{ key: 'whatsapp', label: 'WhatsApp', color: '#25D366', onClick: intents.whatsapp },
{ key: 'facebook', label: 'Facebook', color: '#1877F2', onClick: intents.facebook },
];
return ReactDOM.createPortal(
e.stopPropagation()} style={{ background: 'var(--cb-surface)', borderRadius: 16,
padding: 26, width: 'min(420px, 92vw)', maxHeight: '92vh', overflow: 'auto', boxShadow: '0 24px 80px rgba(0,0,0,.4)', color: 'var(--cb-ink)' }}>
{nets.map((n) => (
{NET_ICONS[n.key]}
))}
{toast && (
{toast}
)}
,
document.body,
);
}
function WinNote({ g, inline }) {
const [share, setShare] = useState(false);
const rank = CB.rankFor(g.board, g.guesses.length, g.elapsed);
return (
Solved in {g.guesses.length} guesses · {CB.fmtTime(g.elapsed)}
That puts you at #{rank} on today's board.
{share &&
setShare(false)} />}
);
}
Object.assign(window, {
useGame, useKeyboard, Wordmark, Legend, Slots, ResultPips, Keypad,
MessageLine, Timer, Leaderboard, WinNote, ShareModal,
});
})();