// Certificate.jsx — printable achievement certificate. // Opens as a modal overlay in screen mode; the @media print rules in styles.css // hide everything else and expand it to a full A4/Letter page so window.print() // produces a clean PDF. function Certificate({ badge, kidName, earnedDate, catalog, logs, onClose }) { if (!badge) return null; const dateObj = earnedDate ? new Date(earnedDate) : new Date(); const dateStr = dateObj.toLocaleDateString('en-US', { year: 'numeric', month: 'long', day: 'numeric' }); // Pick up to 4 relevant logged objects to name in the citation. const relevantLogs = Object.entries(logs || {}) .map(([id, log]) => ({ obj: catalog.find(o => o.id === id), log })) .filter(x => x.obj) .sort((a, b) => (b.log.date || '').localeCompare(a.log.date || '')); const featured = (() => { if (badge.id === 'planet-hop') return relevantLogs.filter(x => x.obj.cat === 'Planet').slice(0, 3); if (badge.id === 'messier') return relevantLogs.filter(x => x.obj.tags?.includes('Messier')).slice(0, 3); if (badge.id === 'deep-sky') return relevantLogs.filter(x => x.obj.cat === 'Galaxy').slice(0, 1); if (badge.id === 'all-cats') return ['Moon', 'Planet', 'Star', 'Constellation', 'Nebula', 'Cluster', 'Galaxy'] .map(c => relevantLogs.find(x => x.obj.cat === c)) .filter(Boolean); return relevantLogs.slice(0, 4); })(); const totalSeen = relevantLogs.length; return (
e.stopPropagation()}>
); } function CertificateBody({ badge, kidName, dateStr, featured, totalSeen }) { return (
{/* corner ornaments */} {/* decorative star field */}
THE FIELD LOG · EST. STARDATE
Stars We Have Seen · GoUniverseGo
Certificate of Celestial Observation
This is to certify that the observer
{kidName || 'Observer'}
has, through patient stargazing under their own dark sky, earned the rank of
{badge.name}
{prettyDesc(badge)}
{featured.length > 0 && (
OBJECTS OBSERVED
{featured.map((x, i) => (
{x.obj.name} {formatDate(x.log.date)}
))}
)}
CHIEF OBSERVER
STARS WE HAVE SEEN · GOUNIVERSEGO · AD ASTRA ·
{dateStr}
DATE AWARDED
ENTRY NO. {String(hashCode(kidName + badge.id)).slice(-6).padStart(6, '0')}  ·  {totalSeen} SIGHTING{totalSeen === 1 ? '' : 'S'} LOGGED
); } function CertCorner({ pos }) { return ( ); } function CertBadgeIcon({ badge }) { // Large, monochrome version of the badge icon for the certificate. return ( {iconFor(badge.id)} ); } function iconFor(id) { switch (id) { case 'first-light': return ; case 'five-alive': return 5; case 'planet-hop': return ; case 'deep-sky': return ; case 'messier': return M; case 'all-cats': return ; case 'cartographer': return ; default: return null; } } function prettyDesc(badge) { // Longer, certificate-friendly descriptions. const map = { 'first-light': 'for the first object entered in the field log', 'five-alive': 'for logging five distinct celestial sightings', 'planet-hop': 'for sighting and recording three planets', 'deep-sky': 'for observing a galaxy beyond our own Milky Way', 'messier': 'for identifying three objects from the Messier catalogue', 'all-cats': 'for observing at least one object from every category in the catalogue', 'cartographer': 'for charting every object in the catalogue — an entire sky fully mapped', }; return map[badge.id] || badge.desc; } function formatDate(d) { if (!d) return ''; try { return new Date(d).toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' }); } catch { return d; } } function hashCode(s) { let h = 0; for (let i = 0; i < s.length; i++) h = ((h << 5) - h + s.charCodeAt(i)) | 0; return Math.abs(h); } Object.assign(window, { Certificate });