); } else if (obs.type === 'circle') { return (

); } else if (obs.type === 'water') { return (

); } return null; }; const btnStyle = (color, isActive) => ({ background: color, color: '#fff', border: 'none', borderRadius: 12, padding: '14px 28px', fontSize: 18, fontWeight: 800, cursor: 'pointer', boxShadow: `0 4px 0 ${isActive ? 'transparent' : 'rgba(0,0,0,0.4)'}, 0 6px 12px rgba(0,0,0,0.3)`, textTransform: 'uppercase', letterSpacing: 2, fontFamily: "'Arial Black', 'Impact', sans-serif", textShadow: '2px 2px 0 rgba(0,0,0,0.3)', transform: isActive ? 'translateY(4px)' : 'translateY(0)', transition: 'transform 0.1s, box-shadow 0.1s', minHeight: 52, WebkitTapHighlightColor: 'transparent', }); const [pressedBtn, setPressedBtn] = useState(null); const renderMenu = () => (

PUTT PUTT
PARTY

{TOTAL_HOLES} holes • chunky physics • N64 vibes

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

m.handle && openProfile(m.handle)} style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 4, padding: 8, background: COLORS.cardBg, borderRadius: 12, border: `3px solid ${[COLORS.red, COLORS.blue, COLORS.green, COLORS.yellow][i % 4]}`, minWidth: 70, cursor: 'pointer', boxShadow: `3px 3px 0 ${COLORS.shadow}`, }}>

{getPlayerAvatar(m.id)}

{m.displayName || 'Player'}

))} {(memberList || []).length === 1 && (

➕

Invite

)}

{(hallOfFame || []).length > 0 && (

HALL OF FAME

{(hallOfFame || []).map((entry, i) => (

{i + 1}

{getPlayerAvatar(entry?.playerId || entry?._user?.id || '')}

{entry?._user?.displayName || entry?.playerName || 'Player'}

{entry?.total ?? '?'} {entry?.isNewRecord && NEW!}

))}

)} {(hallOfFame || []).length === 0 && (

HALL OF FAME

No scores yet. Be the first legend!

)}

); const renderPowerBar = () => { if (!aiming) return null; const barColor = powerLevel < 0.33 ? COLORS.green : powerLevel < 0.66 ? COLORS.yellow : COLORS.red; return (

POWER

); }; const renderCelebration = () => { if (!showCelebration) return null; const msgs = { ace: { text: 'HOLE-IN-ONE!', emoji: '🎉', color: COLORS.yellow, size: 32 }, great: { text: 'GREAT SHOT!', emoji: '🔥', color: COLORS.green, size: 26 }, nice: { text: 'NICE PUTT!', emoji: '👍', color: COLORS.blue, size: 24 }, }; const msg = msgs[showCelebration] || msgs.nice; return (

{msg.emoji}

{msg.text}

{strokes} stroke{strokes !== 1 ? 's' : ''}

); }; const renderCourse = () => (

HOLE {currentHole + 1}/{TOTAL_HOLES}

STROKES {strokes}

{(scores || []).map((s, i) => (

{s}

))}

{ if (gameState === 'playing' && !ballMoving) e.preventDefault(); }} onTouchMove={(e) => { if (aiming) e.preventDefault(); }} style={{ position: 'relative', width: '100%', maxWidth: courseWidth, height: courseHeight, background: 'linear-gradient(180deg, #1a5c2a, #0d4a1a)', borderRadius: 16, border: `4px solid #3a2a1a`, boxShadow: `inset 0 0 30px rgba(0,0,0,0.4), 4px 4px 0 ${COLORS.shadow}`, overflow: 'hidden', touchAction: 'none', cursor: ballMoving ? 'wait' : 'crosshair', margin: '0 auto', transform: shakeScreen ? `translate(${Math.random() * 6 - 3}px, ${Math.random() * 6 - 3}px)` : 'none', transition: shakeScreen ? 'none' : 'transform 0.1s', }} >

{(obstacles || []).map((obs, i) => renderObstacle(obs, i))}

{aiming && aimEnd && ( <>

🎯

)} {(confettiParts || []).map(p => (

))} {renderPowerBar()} {renderCelebration()} {!ballMoving && !showCelebration && !aiming && strokes === 0 && (

DRAG FROM BALL TO AIM & PUTT

)}

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

{getPlayerAvatar(m.id)} {m.displayName || 'Player'}

))}

); const renderRoundOver = () => { const totalScore = (scores || []).reduce((a, b) => a + b, 0); const par = TOTAL_HOLES * 3; const diff = totalScore - par; const existingScores = appData?.hallOfFame ?? []; const myScores = (existingScores || []).filter(s => (s?.playerId === user?.id || s?._user?.id === user?.id)); const myBest = (myScores || []).length > 0 ? Math.min(...(myScores || []).map(s => s?.total ?? 999)) : 999; const isNewRecord = totalScore <= myBest; return (

ROUND OVER!

{isNewRecord && (

NEW HIGH SCORE!

)}

{totalScore} ({diff > 0 ? '+' : ''}{diff} par)

{(roundScores || []).map((rs, i) => (

Hole {rs.hole}

{rs.strokes} {rs.strokes === 1 && 🎉}

))}

); }; return (

{gameState === 'menu' && renderMenu()} {gameState === 'playing' && renderCourse()} {gameState === 'roundOver' && renderRoundOver()}

); }

PUTT PUTTPARTY

🏆 HALL OF FAME

🏆 HALL OF FAME

ROUND OVER!

PUTT PUTT
PARTY

HALL OF FAME

HALL OF FAME