'use client'; import React, { useState, useEffect, useRef, useMemo } from 'react'; // --- Configuration & Constants --- const VIEW_WIDTH = 1000; const VIEW_HEIGHT = 600; const COURT_WIDTH = 800; const COURT_HEIGHT = 400; const PAD_X = (VIEW_WIDTH - COURT_WIDTH) / 2; const PAD_Y = (VIEW_HEIGHT - COURT_HEIGHT) / 2; const NET_X = VIEW_WIDTH / 2; const KITCHEN_WIDTH = 64; // Non-Volley Zone width (scaled) const KITCHEN_LEFT = NET_X - KITCHEN_WIDTH; const KITCHEN_RIGHT = NET_X + KITCHEN_WIDTH; // Theme Colors const C_BG = '#0f172a'; // Slate 900 const C_GRID = '#1e293b'; // Slate 800 const C_ACCENT = '#38bdf8'; // Sky Blue (UI/Lines) const C_BALL = '#bef264'; // Lime (Ball) const C_P1 = '#f472b6'; // Pink (Player A) const C_P2 = '#818cf8'; // Indigo (Player B) const C_NET = '#94a3b8'; // Slate 400 const C_TEXT = '#e2e8f0'; // Slate 200 const C_ALERT = '#f59e0b'; // Amber // Math Utilities const lerp = (a, b, t) => a + (b - a) * t; const clamp = (val, min, max) => Math.min(Math.max(val, min), max); // Shot Definitions const SHOTS = [ { type: 'SERVE', start: { x: PAD_X + 20, y: VIEW_HEIGHT/2 + 120 }, end: { x: NET_X - 180, y: VIEW_HEIGHT/2 - 120 }, duration: 1100, arc: 1.4, spin: 'top' }, { type: 'RETURN', start: { x: NET_X - 180, y: VIEW_HEIGHT/2 - 120 }, end: { x: PAD_X + 60, y: VIEW_HEIGHT/2 + 140 }, duration: 1000, arc: 0.9, spin: 'flat' }, { type: 'DROP', start: { x: PAD_X + 60, y: VIEW_HEIGHT/2 + 140 }, end: { x: KITCHEN_LEFT - 30, y: VIEW_HEIGHT/2 - 60 }, duration: 1400, arc: 1.8, spin: 'back' }, { type: 'DINK', start: { x: KITCHEN_LEFT - 30, y: VIEW_HEIGHT/2 - 60 }, end: { x: KITCHEN_RIGHT + 40, y: VIEW_HEIGHT/2 + 50 }, duration: 900, arc: 0.7, spin: 'flat' }, { type: 'CROSS_DINK', start: { x: KITCHEN_RIGHT + 40, y: VIEW_HEIGHT/2 + 50 }, end: { x: KITCHEN_LEFT - 40, y: VIEW_HEIGHT/2 + 50 }, duration: 850, arc: 0.7, spin: 'flat' }, { type: 'SPEED_UP', start: { x: KITCHEN_LEFT - 40, y: VIEW_HEIGHT/2 + 50 }, end: { x: VIEW_WIDTH - PAD_X - 40, y: VIEW_HEIGHT/2 - 140 }, duration: 550, arc: 0.3, spin: 'top' }, ]; export const PickleballAnimation = () => { // --- State --- const [gameTime, setGameTime] = useState(0); const [shotIdx, setShotIdx] = useState(0); const [phase, setPhase] = useState('INIT'); // INIT, RALLY, POINT, RESET const [score, setScore] = useState({ p1: 0, p2: 0, server: 1 }); // Refs for high-frequency updates const reqRef = useRef(); const startTimeRef = useRef(0); const ballRef = useRef({ x: SHOTS[0].start.x, y: SHOTS[0].start.y, z: 0 }); const p1PosRef = useRef({ x: PAD_X + 20, y: VIEW_HEIGHT/2 + 120 }); const p2PosRef = useRef({ x: VIEW_WIDTH - PAD_X - 20, y: VIEW_HEIGHT/2 - 120 }); // Visual Effects State const [particles, setParticles] = useState([]); const [trail, setTrail] = useState([]); const [impactWave, setImpactWave] = useState(null); // --- Particle System --- const spawnParticles = (x, y, color, count = 8) => { const newParts = Array.from({ length: count }).map(() => { const angle = Math.random() * Math.PI * 2; const speed = Math.random() * 3 + 1; return { x, y, vx: Math.cos(angle) * speed, vy: Math.sin(angle) * speed, life: 1.0, color }; }); setParticles(prev => [...prev, ...newParts]); }; // --- Game Logic Loop --- useEffect(() => { const animate = () => { const now = Date.now(); // 1. Phase Management if (phase === 'INIT') { setPhase('RALLY'); startTimeRef.current = now; } // 2. Ball Physics if (phase === 'RALLY') { const shot = SHOTS[shotIdx]; const elapsed = now - startTimeRef.current; const t = Math.min(elapsed / shot.duration, 1); // Easing const ease = t; // Linear for X/Y feels best for ball, height handles the curve // Position Calculation const bx = lerp(shot.start.x, shot.end.x, ease); const by = lerp(shot.start.y, shot.end.y, ease); // Parabolic arc: 4 * h * t * (1-t) const bz = shot.arc * 200 * t * (1 - t); ballRef.current = { x: bx, y: by, z: bz }; // Trail Logic (Throttle updates) if (now % 3 === 0) { setTrail(prev => [...prev.slice(-15), { x: bx, y: by, z: bz }]); } // Impact & Shot Transition if (t >= 1) { // Ball hit the ground/paddle spawnParticles(bx, by, C_ACCENT, 6); setImpactWave({ x: bx, y: by, r: 0, opacity: 1 }); if (shotIdx < SHOTS.length - 1) { setShotIdx(prev => prev + 1); startTimeRef.current = now; } else { setPhase('POINT'); setScore(s => ({ ...s, p1: s.p1 + 1 })); setTimeout(() => setPhase('RESET'), 1500); } } } else if (phase === 'RESET') { setShotIdx(0); setTrail([]); setPhase('RALLY'); startTimeRef.current = now + 500; // Small delay before serve // Reset positions ballRef.current = { x: SHOTS[0].start.x, y: SHOTS[0].start.y, z: 0 }; } // 3. Player AI (Smoothing) // Predict target based on current or next shot const shot = SHOTS[shotIdx]; const isEven = shotIdx % 2 === 0; // Even idx = P1 hitting, Odd = P2 hitting // Target logic: If it's my turn to hit, move to ball start. If I just hit, move to center or next ready pos. const p1Target = isEven ? shot.start : { x: PAD_X + 100, y: VIEW_HEIGHT/2 + 50 }; const p2Target = !isEven ? shot.start : { x: VIEW_WIDTH - PAD_X - 100, y: VIEW_HEIGHT/2 - 50 }; // Lerp Player Positions p1PosRef.current.x = lerp(p1PosRef.current.x, p1Target.x, 0.04); p1PosRef.current.y = lerp(p1PosRef.current.y, p1Target.y, 0.04); p2PosRef.current.x = lerp(p2PosRef.current.x, p2Target.x, 0.04); p2PosRef.current.y = lerp(p2PosRef.current.y, p2Target.y, 0.04); // 4. Particle Animation setParticles(prev => prev .map(p => ({ ...p, x: p.x + p.vx, y: p.y + p.vy, life: p.life - 0.05 })) .filter(p => p.life > 0) ); // 5. Impact Wave Animation if (impactWave) { setImpactWave(prev => { if (!prev || prev.opacity <= 0) return null; return { ...prev, r: prev.r + 2, opacity: prev.opacity - 0.05 }; }); } setGameTime(now); // Force re-render reqRef.current = requestAnimationFrame(animate); }; reqRef.current = requestAnimationFrame(animate); return () => cancelAnimationFrame(reqRef.current); }, [phase, shotIdx]); // --- Helpers for Rendering --- const getBallScale = (z) => 1 + (z / 300); const getShadowOpacity = (z) => Math.max(0.1, 0.6 - (z / 200)); return (

); };