function App({ data, setData, user, isMultiplayer, sharedData, setSharedData }) { const appData = (isMultiplayer ? sharedData : data) || {}; const saveData = isMultiplayer ? setSharedData : setData; const canvasRef = useRef(null); const animFrameRef = useRef(null); const ballRef = useRef({ x: 0, y: 0, vx: 0, vy: 0 }); const holeRef = useRef({ x: 0, y: 0 }); const wallsRef = useRef([]); const obstaclesRef = useRef([]); const aimRef = useRef({ active: false, startX: 0, startY: 0, currentX: 0, currentY: 0 }); const gameStateRef = useRef('aiming'); const strokesRef = useRef(0); const ballInHoleRef = useRef(false); const sizeRef = useRef({ w: 0, h: 0 }); const parRef = useRef(3); const [strokes, setStrokes] = useState(0); const [bestScore, setBestScore] = useState(appData?.bestScore ?? null); const [gameState, setGameState] = useState('aiming'); const [showVictory, setShowVictory] = useState(false); const [victoryText, setVictoryText] = useState(''); const [showNewBest, setShowNewBest] = useState(false); const [holeNumber, setHoleNumber] = useState(appData?.holeNumber ?? 1); const [power, setPower] = useState(0); const [showPowerMeter, setShowPowerMeter] = useState(false); const [celebFrame, setCelebFrame] = useState(0); const [par, setPar] = useState(3); const [totalScore, setTotalScore] = useState(appData?.totalScore ?? 0); const [holesPlayed, setHolesPlayed] = useState(appData?.holesPlayed ?? 0); const [showStats, setShowStats] = useState(false); const BALL_RADIUS = 8; const HOLE_RADIUS = 12; const FRICTION = 0.985; const MIN_SPEED = 0.15; const MAX_POWER = 18; const WALL_BOUNCE = 0.65; const N64_RED = '#E60012'; const N64_BLUE = '#0033A0'; const N64_YELLOW = '#F8B500'; const N64_GREEN = '#0B6623'; const COURSE_GREEN_LIGHT = '#38b000'; const COURSE_GREEN_DARK = '#008000'; const COURSE_BORDER = '#5d4037'; const BALL_WHITE = '#FFFFFF'; const HOLE_BLACK = '#111'; const SAND_COLOR = '#e9c46a'; const WATER_COLOR = '#0077b6'; const generateHole = useCallback((num) => { const w = sizeRef.current.w || 360; const h = sizeRef.current.h || 600; const margin = 40; const holeType = ((num - 1) % 5); let ballStart, holePos, walls, obs, holePar; const defaultWalls = [ { x: margin, y: margin, w: w - margin * 2, h: 12, color: COURSE_BORDER }, { x: margin, y: h - margin, w: w - margin * 2, h: 12, color: COURSE_BORDER }, { x: margin, y: margin, w: 12, h: h - margin * 2, color: COURSE_BORDER }, { x: w - margin - 12, y: margin, w: 12, h: h - margin * 2, color: COURSE_BORDER }, ]; if (holeType === 0) { ballStart = { x: w / 2, y: h - 80 }; holePos = { x: w / 2, y: 100 }; walls = defaultWalls; obs = [{ x: w / 2 - 30, y: h / 2 - 10, w: 60, h: 20, type: 'wall' }]; holePar = 2; } else if (holeType === 1) { ballStart = { x: 80, y: h - 80 }; holePos = { x: w - 80, y: 100 }; walls = defaultWalls; obs = [ { x: w / 2 - 6, y: h * 0.25, w: 12, h: h * 0.35, type: 'wall' }, { x: w * 0.25 - 20, y: h * 0.55, w: 40, h: 40, type: 'sand' }, ]; holePar = 3; } else if (holeType === 2) { ballStart = { x: w / 2, y: h - 80 }; holePos = { x: w / 2, y: 90 }; walls = defaultWalls; obs = [ { x: margin + 20, y: h * 0.35, w: w * 0.3, h: 12, type: 'wall' }, { x: w - margin - 20 - w * 0.3, y: h * 0.55, w: w * 0.3, h: 12, type: 'wall' }, { x: w / 2 - 20, y: h * 0.7, w: 40, h: 40, type: 'water' }, ]; holePar = 3; } else if (holeType === 3) { ballStart = { x: w / 2, y: h - 80 }; holePos = { x: w / 2, y: 80 }; walls = defaultWalls; obs = [ { x: w * 0.2, y: h * 0.3, w: 50, h: 12, type: 'wall' }, { x: w * 0.55, y: h * 0.3, w: 50, h: 12, type: 'wall' }, { x: w * 0.35, y: h * 0.5, w: 50, h: 12, type: 'wall' }, { x: w * 0.15, y: h * 0.65, w: 30, h: 30, type: 'sand' }, { x: w * 0.65, y: h * 0.65, w: 30, h: 30, type: 'sand' }, ]; holePar = 4; } else { ballStart = { x: 80, y: h - 80 }; holePos = { x: w - 80, y: 80 }; walls = defaultWalls; obs = [ { x: w / 2 - 6, y: margin + 12, w: 12, h: h * 0.25, type: 'wall' }, { x: w / 2 - 6, y: h * 0.5, w: 12, h: h * 0.25, type: 'wall' }, { x: w * 0.25, y: h * 0.45, w: 40, h: 40, type: 'water' }, { x: w * 0.65, y: h * 0.35, w: 30, h: 30, type: 'sand' }, ]; holePar = 4; } return { ballStart, holePos, walls, obstacles: obs, par: holePar }; }, []); const resetHole = useCallback((num) => { const hole = generateHole(num); ballRef.current = { x: hole.ballStart.x, y: hole.ballStart.y, vx: 0, vy: 0 }; holeRef.current = { x: hole.holePos.x, y: hole.holePos.y }; wallsRef.current = hole.walls || []; obstaclesRef.current = hole.obstacles || []; parRef.current = hole.par || 3; setPar(hole.par || 3); strokesRef.current = 0; setStrokes(0); gameStateRef.current = 'aiming'; setGameState('aiming'); setShowVictory(false); setShowNewBest(false); setShowPowerMeter(false); setPower(0); ballInHoleRef.current = false; }, [generateHole]); useEffect(() => { const canvas = canvasRef.current; if (!canvas) return; const container = canvas.parentElement; if (!container) return; const w = container.clientWidth || 360; const h = Math.min(container.clientHeight || 600, window.innerHeight * 0.6); canvas.width = w * 2; canvas.height = h * 2; canvas.style.width = w + 'px'; canvas.style.height = h + 'px'; sizeRef.current = { w, h }; resetHole(holeNumber); }, [holeNumber, resetHole]); const render = useCallback(() => { const canvas = canvasRef.current; if (!canvas) return; const ctx = canvas.getContext('2d'); if (!ctx) return; const { w, h } = sizeRef.current; if (!w || !h) return; ctx.save(); ctx.scale(2, 2); ctx.clearRect(0, 0, w, h); const gridSize = 32; for (let x = 0; x < w; x += gridSize) { for (let y = 0; y < h; y += gridSize) { ctx.fillStyle = ((Math.floor(x / gridSize) + Math.floor(y / gridSize)) % 2 === 0) ? COURSE_GREEN_LIGHT : COURSE_GREEN_DARK; ctx.fillRect(x, y, gridSize, gridSize); } } (obstaclesRef.current || []).forEach(o => { if (o.type === 'sand') { ctx.fillStyle = SAND_COLOR; ctx.beginPath(); ctx.ellipse(o.x + o.w / 2, o.y + o.h / 2, o.w / 2, o.h / 2, 0, 0, Math.PI * 2); ctx.fill(); } else if (o.type === 'water') { ctx.fillStyle = WATER_COLOR; ctx.beginPath(); ctx.ellipse(o.x + o.w / 2, o.y + o.h / 2, o.w / 2, o.h / 2, 0, 0, Math.PI * 2); ctx.fill(); } else { ctx.fillStyle = COURSE_BORDER; ctx.fillRect(o.x, o.y, o.w, o.h); } }); (wallsRef.current || []).forEach(wall => { ctx.fillStyle = wall.color || COURSE_BORDER; ctx.fillRect(wall.x, wall.y, wall.w, wall.h); }); const hole = holeRef.current; ctx.fillStyle = HOLE_BLACK; ctx.beginPath(); ctx.arc(hole.x, hole.y, HOLE_RADIUS, 0, Math.PI * 2); ctx.fill(); ctx.strokeStyle = '#fff'; ctx.lineWidth = 2; ctx.beginPath(); ctx.moveTo(hole.x, hole.y); ctx.lineTo(hole.x, hole.y - 30); ctx.stroke(); ctx.fillStyle = N64_RED; ctx.beginPath(); ctx.moveTo(hole.x, hole.y - 30); ctx.lineTo(hole.x + 15, hole.y - 22); ctx.lineTo(hole.x, hole.y - 14); ctx.fill(); if (!ballInHoleRef.current) { const ball = ballRef.current; ctx.fillStyle = 'rgba(0,0,0,0.3)'; ctx.beginPath(); ctx.arc(ball.x + 2, ball.y + 2, BALL_RADIUS, 0, Math.PI * 2); ctx.fill(); ctx.fillStyle = BALL_WHITE; ctx.beginPath(); ctx.arc(ball.x, ball.y, BALL_RADIUS, 0, Math.PI * 2); ctx.fill(); ctx.strokeStyle = '#000'; ctx.lineWidth = 1; ctx.stroke(); } const aim = aimRef.current; if (aim.active && gameStateRef.current === 'aiming') { const dx = aim.startX - aim.currentX; const dy = aim.startY - aim.currentY; const dist = Math.sqrt(dx * dx + dy * dy); const pw = Math.min(dist / 10, MAX_POWER); const norm = dist > 0 ? { x: dx / dist, y: dy / dist } : { x: 0, y: -1 }; const ball = ballRef.current; ctx.strokeStyle = N64_YELLOW; ctx.lineWidth = 4; ctx.setLineDash([4, 4]); ctx.beginPath(); ctx.moveTo(ball.x, ball.y); ctx.lineTo(ball.x + norm.x * pw * 8, ball.y + norm.y * pw * 8); ctx.stroke(); ctx.setLineDash([]); } ctx.restore(); }, []); const handleHoleComplete = useCallback((s) => { if (ballInHoleRef.current) return; ballInHoleRef.current = true; gameStateRef.current = 'scored'; setGameState('scored'); const p = parRef.current; let text = s === 1 ? 'HOLE IN ONE!' : s <= p - 1 ? 'BIRDIE!' : s === p ? 'PAR!' : 'BOGEY'; setVictoryText(text); setShowVictory(true); const newTotal = totalScore + s; const newPlayed = holesPlayed + 1; setTotalScore(newTotal); setHolesPlayed(newPlayed); let isNewBest = false; if (bestScore === null || s < bestScore) { setBestScore(s); setShowNewBest(true); isNewBest = true; } // Discrete persistence call if (typeof saveData === 'function') { saveData({ bestScore: isNewBest ? s : bestScore, holeNumber, totalScore: newTotal, holesPlayed: newPlayed }); } }, [bestScore, holeNumber, totalScore, holesPlayed, saveData]); const physicsStep = useCallback(() => { if (gameStateRef.current !== 'rolling') return; const ball = ballRef.current; const hole = holeRef.current; (obstaclesRef.current || []).forEach(o => { const dx = ball.x - (o.x + o.w / 2); const dy = ball.y - (o.y + o.h / 2); if (o.type === 'sand') { if ((dx * dx) / (o.w * o.w / 4) + (dy * dy) / (o.h * o.h / 4) < 1) { ball.vx *= 0.94; ball.vy *= 0.94; } } else if (o.type === 'water') { if ((dx * dx) / (o.w * o.w / 4) + (dy * dy) / (o.h * o.h / 4) < 1) { const holeData = generateHole(holeNumber); ball.x = holeData.ballStart.x; ball.y = holeData.ballStart.y; ball.vx = 0; ball.vy = 0; strokesRef.current += 1; setStrokes(strokesRef.current); gameStateRef.current = 'aiming'; setGameState('aiming'); } } else if (o.type === 'wall') { if (ball.x + BALL_RADIUS > o.x && ball.x - BALL_RADIUS < o.x + o.w && ball.y + BALL_RADIUS > o.y && ball.y - BALL_RADIUS < o.y + o.h) { ball.vx = -ball.vx * WALL_BOUNCE; ball.vy = -ball.vy * WALL_BOUNCE; } } }); ball.vx *= FRICTION; ball.vy *= FRICTION; ball.x += ball.vx; ball.y += ball.vy; (wallsRef.current || []).forEach(wall => { if (ball.x + BALL_RADIUS > wall.x && ball.x - BALL_RADIUS < wall.x + wall.w && ball.y + BALL_RADIUS > wall.y && ball.y - BALL_RADIUS < wall.y + wall.h) { if (ball.x < wall.x || ball.x > wall.x + wall.w) ball.vx = -ball.vx * WALL_BOUNCE; else ball.vy = -ball.vy * WALL_BOUNCE; } }); const dist = Math.sqrt((ball.x - hole.x) ** 2 + (ball.y - hole.y) ** 2); const speed = Math.sqrt(ball.vx ** 2 + ball.vy ** 2); if (dist < HOLE_RADIUS && speed < 10) { ball.vx = 0; ball.vy = 0; ball.x = hole.x; ball.y = hole.y; handleHoleComplete(strokesRef.current); } else if (speed < MIN_SPEED) { ball.vx = 0; ball.vy = 0; gameStateRef.current = 'aiming'; setGameState('aiming'); } }, [holeNumber, generateHole, handleHoleComplete]); useEffect(() => { let running = true; const loop = () => { if (!running) return; physicsStep(); render(); animFrameRef.current = requestAnimationFrame(loop); }; loop(); return () => { running = false; if (animFrameRef.current) cancelAnimationFrame(animFrameRef.current); }; }, [physicsStep, render]); useEffect(() => { if (!showVictory) return; let frame = 0; const interval = setInterval(() => { frame++; setCelebFrame(frame); if (frame > 100) clearInterval(interval); }, 30); return () => clearInterval(interval); }, [showVictory]); const handlePointerDown = (e) => { if (gameStateRef.current !== 'aiming' || !canvasRef.current) return; const rect = canvasRef.current.getBoundingClientRect(); const clientX = e.touches ? e.touches[0].clientX : e.clientX; const clientY = e.touches ? e.touches[0].clientY : e.clientY; const x = clientX - rect.left; const y = clientY - rect.top; aimRef.current = { active: true, startX: x, startY: y, currentX: x, currentY: y }; setShowPowerMeter(true); }; const handlePointerMove = (e) => { if (!aimRef.current.active || !canvasRef.current) return; const rect = canvasRef.current.getBoundingClientRect(); const clientX = e.touches ? e.touches[0].clientX : e.clientX; const clientY = e.touches ? e.touches[0].clientY : e.clientY; const x = clientX - rect.left; const y = clientY - rect.top; aimRef.current.currentX = x; aimRef.current.currentY = y; const dist = Math.sqrt((aimRef.current.startX - x) ** 2 + (aimRef.current.startY - y) ** 2); setPower(Math.min(dist / 10, MAX_POWER)); }; const handlePointerUp = () => { if (!aimRef.current.active) return; const dx = aimRef.current.startX - aimRef.current.currentX; const dy = aimRef.current.startY - aimRef.current.currentY; const dist = Math.sqrt(dx * dx + dy * dy); if (dist > 5) { const pw = Math.min(dist / 10, MAX_POWER); ballRef.current.vx = (dx / dist) * pw; ballRef.current.vy = (dy / dist) * pw; strokesRef.current += 1; setStrokes(strokesRef.current); gameStateRef.current = 'rolling'; setGameState('rolling'); } aimRef.current.active = false; setShowPowerMeter(false); setPower(0); }; const nextHole = () => { const next = holeNumber + 1; setHoleNumber(next); resetHole(next); }; const styles = { container: { minHeight: '100dvh', background: '#111', color: '#fff', fontFamily: "'Arial Black', 'Impact', sans-serif", display: 'flex', flexDirection: 'column', padding: '12px', boxSizing: 'border-box', overflow: 'hidden', }, header: { display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '8px', background: N64_BLUE, border: '4px solid #fff', boxShadow: '4px 4px 0 #000', marginBottom: '12px', }, title: { fontSize: '20px', margin: 0, color: N64_YELLOW, textShadow: '2px 2px 0 #000', letterSpacing: '1px' }, hud: { display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: '4px', marginBottom: '8px' }, hudItem: (color) => ({ background: color, padding: '6px 2px', textAlign: 'center', fontSize: '12px', fontWeight: '900', border: '3px solid rgba(255,255,255,0.4)', boxShadow: 'inset 2px 2px 0 rgba(255,255,255,0.2), 2px 2px 0 #000', }), canvasWrap: { flex: 1, position: 'relative', border: '8px solid #444', borderRadius: '4px', boxShadow: 'inset 0 0 40px rgba(0,0,0,0.5), 0 0 20px rgba(0,0,0,0.8)', overflow: 'hidden', background: '#000', }, powerBar: { position: 'absolute', bottom: '20px', left: '20px', right: '20px', height: '24px', background: '#222', border: '3px solid #fff', boxShadow: '4px 4px 0 #000', }, powerFill: { height: '100%', width: `${(power / MAX_POWER) * 100}%`, background: power > MAX_POWER * 0.7 ? N64_RED : power > MAX_POWER * 0.4 ? N64_YELLOW : N64_GREEN, transition: 'width 0.05s', }, btn: (color) => ({ background: color, border: '4px solid rgba(255,255,255,0.5)', borderRadius: '50%', width: '64px', height: '64px', color: '#fff', fontSize: '14px', fontWeight: '900', cursor: 'pointer', boxShadow: '4px 4px 0 #000, inset -4px -4px 0 rgba(0,0,0,0.3)', display: 'flex', alignItems: 'center', justifyContent: 'center', textShadow: '1px 1px 0 #000', margin: '4px', }), victory: { position: 'absolute', inset: 0, background: 'rgba(0,0,0,0.8)', display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', zIndex: 100, }, vicText: { fontSize: '48px', color: N64_YELLOW, textShadow: '4px 4px 0 #E60012, 8px 8px 0 #0033A0', transform: `scale(${1 + Math.sin(celebFrame * 0.2) * 0.1}) rotate(${Math.sin(celebFrame * 0.1) * 5}deg)`, marginBottom: '20px', textAlign: 'center', } }; return (

PUTT-PUTT 64

PRESS START

HOLE {holeNumber}

PAR {par}

SHOT {strokes}

BEST {bestScore ?? '--'}

); }