{/* Floating background sparkles */} {[...Array(6)].map((_, i) => (

✨

))} {/* Header */}

🎲 Actuarial Oracle 🔮

UNSW • Where Data Meets Destiny

{(memberList || []).length > 1 && (

{(memberList || []).slice(0, 5).map((m, i) => (

0 ? -6 : 0, boxShadow: '0 2px 6px rgba(0,0,0,0.1)' }}> {(m?.displayName ?? '?')[0]}

))} {spinCount} total spins

)}

{/* ZONE 1: The Whimsy Wheel */}

{/* Pointer */}

▼

{/* Wheel segments using conic gradient */}

`${c} ${i * segmentAngle}deg ${(i + 1) * segmentAngle}deg`).join(', ')})`, display: 'flex', alignItems: 'center', justifyContent: 'center', position: 'relative' }}> {(forecasts || []).map((f, i) => { const angle = (i * segmentAngle + segmentAngle / 2) * (Math.PI / 180); const r = 72; return (

{f.icon}

); })} {/* Center circle */}

P(x)

{local.spinning ? '🎲 Calculating probabilities...' : '✨ Tap the wheel to reveal your forecast!'}

{/* Forecast Reveal Overlay */} {local.showReveal && forecast && (

{/* Sparkles */} {(local.sparkles || []).map(s => (

✨

))}

{forecast.icon}

{forecast.title}

{forecast.stat}

{forecast.desc}

📋 {forecast.detail}

)} {/* ZONE 2: Metrics Carousel */}

📊 Momentous Metrics {local.cardIndex + 1}/{(metrics || []).length}

{ touchStart.current = e.touches?.[0]?.clientX ?? null; }} onTouchEnd={(e) => { const end = e.changedTouches?.[0]?.clientX ?? null; if (touchStart.current !== null && end !== null) { const diff = touchStart.current - end; if (Math.abs(diff) > 40) swipeCards(diff > 0 ? 1 : -1); } touchStart.current = null; }} style={{ position: 'relative', overflow: 'hidden', borderRadius: 20, minHeight: 140 }} >

{(metrics || []).map((m, i) => { const isExpanded = local.expandedCard === i; return (

toggleExpand(i)} style={{ minWidth: '100%', padding: '0 2px', boxSizing: 'border-box', cursor: 'pointer' }}>

{m.emoji}

{m.label}

{m.value}

{m.sub}

{/* Bar */}

{/* Expanded detail */}

✨ Within the 95% confidence interval of excellence ✨

); })}

{/* Dot indicators */}

{(metrics || []).map((_, i) => (

setLocal(s => ({ ...s, cardIndex: i, expandedCard: null }))} style={{ width: i === local.cardIndex ? 20 : 8, height: 8, borderRadius: 4, background: i === local.cardIndex ? '#7B5EA7' : '#D8C6F0', transition: 'all 0.3s ease', cursor: 'pointer' }} /> ))}

); }