{/* HEADER ZONE */}

🏮

Signal & Drift

UNSW · Sydney

🔥 {stats?.streak ?? 0} streak

{/* MODE TOGGLE */}

{['fish', 'drive'].map(m => ( ))}

{/* ENV DATA BAR */} {mode === 'fish' && (

{[ { icon: '🌊', val: envData?.tide ?? '-' }, { icon: '💨', val: envData?.wind ?? '-' }, { icon: envData?.moon ?? '🌙', val: 'Waning' }, { icon: '🌡️', val: envData?.waterTemp ?? '-' }, { icon: '📊', val: envData?.pressure ?? '-' } ].map((d, i) => (

{d.icon} {d.val}

))}

)} {/* CAR SELECTOR */} {mode === 'drive' && (

{(cars || []).map((car, i) => { const selected = (state?.selectedCar?.name ?? cars[0]?.name) === car.name; return ( ); })}

)} {/* HERO: THE MAP */}

{/* Sydney coastline approximation */} {/* Water shimmer effect */} {mode === 'fish' && (

)} {/* Drop pins */} {(drops || []).map((drop, i) => { if (!drop) return null; const isHit = drop.result === 'hit'; const isFish = drop.type === 'fish'; return (

{ e.stopPropagation(); setActivePin(activePin === drop.id ? null : drop.id); }} style={{ position: 'absolute', left: `${drop.x ?? 50}%`, top: `${drop.y ?? 50}%`, transform: 'translate(-50%, -50%)', width: activePin === drop.id ? 80 : 28, transition: baseTransition, zIndex: activePin === drop.id ? 10 : 1, cursor: 'pointer' }}>

{isFish ? (isHit ? '🐟' : '💀') : (isHit ? '✅' : '📉')}

{activePin === drop.id && (

{drop.label ?? 'Unknown'}

by {drop.by ?? '?'}

{isFish && isHit &&

🎣 {drop.species ?? '?'} · {drop.weight ?? '?'}

} {!isFish &&

{drop.prediction ?? '?'}

}

{isHit ? '✦ SIGNAL' : '✧ DRIFT'}

)}

); })} {/* Ripple effect */} {ripple && (

)} {/* Tap instruction */}

{mode === 'fish' ? 'TAP TO DROP LURE' : 'TAP TO PLACE PREDICTION'}

{/* Multiplayer indicator */} {(memberList || []).length > 1 && (

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

0 ? -6 : 0, fontSize: 10, display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#fff', fontWeight: 700 }}> {!m?.avatarUrl && (m?.displayName?.[0] ?? '?')}

))}

)}

{/* STATS ZONE */}

{[ { label: 'HITS', val: stats?.hits ?? 0, color: '#FFD700' }, { label: 'MISSES', val: stats?.misses ?? 0, color: '#C41E3A' }, { label: 'ACCURACY', val: accuracy + '%', color: accuracy >= 60 ? '#FFD700' : '#C41E3A' }, { label: 'BEST', val: '🔥' + (stats?.bestStreak ?? 0), color: '#FFD700' } ].map((s, i) => (

{s.val}

{s.label}

))}

{/* RECENT DROPS LOG */}

Recent Signals

{(drops || []).slice(-6).reverse().map((d, i) => { if (!d) return null; const isHit = d.result === 'hit'; return (

{isHit ? '✦' : '✧'} {d.label ?? '?'}

{d.by ?? '?'}

); })}

{/* REALITY CHECK OVERLAY */} {showReality && (

🏮

{currentReality}

TAP TO ACKNOWLEDGE

REALITY CHECK · SIGNAL & DRIFT

)}

); }