import React, { useState, useEffect, useRef, useMemo, useCallback } from 'react'; const WIDTH = 1200; const HEIGHT = 700; const COURT_START_X = 400; const COURT_WIDTH = 750; const GROUND_Y = 550; const NET_X = COURT_START_X + COURT_WIDTH / 2; const NET_HEIGHT = 80; // Grip Data Configuration const GRIPS = [ { id: 'continental', name: '大陆式 (Continental)', desc: '锤子握法，适合发球、截击、切削。', bevel: 2, // Bevel 2 speed: 90, spin: 20, trajectory: 'flat', color: '#38bdf8', // Sky Blue physics: { vx: 22, vy: -3, spinForce: 0.05, gravity: 0.4, bounce: 0.6 } }, { id: 'eastern', name: '东方式 (Eastern)', desc: '像握手一样，适合平击球，击球点在身前。', bevel: 3, // Bevel 3 speed: 80, spin: 50, trajectory: 'drive', color: '#4ade80', // Green physics: { vx: 18, vy: -8, spinForce: 0.15, gravity: 0.4, bounce: 0.7 } }, { id: 'semi-western', name: '半西方式 (Semi-Western)', desc: '现代网球主流，兼顾力量与旋转。', bevel: 4, // Bevel 4 speed: 70, spin: 80, trajectory: 'topspin', color: '#fbbf24', // Amber physics: { vx: 16, vy: -13, spinForce: 0.25, gravity: 0.4, bounce: 0.85 } }, { id: 'western', name: '西方式 (Western)', desc: '平底锅握法，极强上旋，击球点高，适合红土。', bevel: 5, // Bevel 5 speed: 60, spin: 98, trajectory: 'extreme', color: '#f87171', // Red physics: { vx: 14, vy: -17, spinForce: 0.35, gravity: 0.4, bounce: 0.95 } } ]; // Helper to get coordinates for octagon const getOctagonPoints = (cx, cy, radius) => { let points = ""; for (let i = 0; i < 8; i++) { // Rotate by -22.5 deg (half of 45) so the flat side is on top for Bevel 1 const angle = (i * 45 - 22.5 - 90) * (Math.PI / 180); const x = cx + radius * Math.cos(angle); const y = cy + radius * Math.sin(angle); points += `${x},${y} `; } return points; }; // Helper to get label position for octagon bevels const getBevelLabelPos = (cx, cy, radius, i) => { // Bevel 1 is top flat side. // Side 0 in our loop corresponds to the vertex, we want the midpoint of the side const angle = (i * 45 - 90) * (Math.PI / 180); const x = cx + (radius + 25) * Math.cos(angle); const y = cy + (radius + 25) * Math.sin(angle); return { x, y }; }; export default function TennisTechView() { const [activeGripIdx, setActiveGripIdx] = useState(0); // Animation State (Refs for performance) const ballRef = useRef({ x: COURT_START_X, y: 450, vx: 0, vy: 0, active: false, phase: 'idle', rotation: 0 }); const trailRef = useRef([]); // Stores previous positions const frameRef = useRef(0); const timeRef = useRef(0); // Render State (Keep minimal) const [ballRender, setBallRender] = useState({ x: COURT_START_X, y: 450, show: false, rotation: 0 }); const [trailRender, setTrailRender] = useState([]); const [statsRender, setStatsRender] = useState({ speed: 0, spin: 0 }); // Animated stats // Initialize random stars/particles only once const particles = useMemo(() => { return Array.from({ length: 30 }, () => ({ x: Math.random() * WIDTH, y: Math.random() * HEIGHT, size: Math.random() * 2 + 1, opacity: Math.random() * 0.5 + 0.1 })); }, []); // Main Animation Loop useEffect(() => { const loop = () => { timeRef.current += 1; const grip = GRIPS[activeGripIdx]; const ball = ballRef.current; // --- Physics Logic --- if (ball.phase === 'idle') { // Prepare to launch if (timeRef.current % 180 === 0) { // Auto launch every 3 seconds approx ball.phase = 'launch'; ball.x = COURT_START_X + 20; // Start position ball.y = 450; ball.vx = grip.physics.vx; ball.vy = grip.physics.vy; ball.active = true; ball.rotation = 0; trailRef.current = []; } } else if (ball.phase === 'launch') { // Apply Physics ball.x += ball.vx; ball.y += ball.vy; // Magnus Effect (Spin pushes ball down) // More spin = more downward force ball.vy += grip.physics.gravity + (grip.physics.spinForce * 0.5); // Air resistance ball.vx *= 0.995; // Rotation ball.rotation += grip.physics.spinForce * 50; // Bounce if (ball.y >= GROUND_Y - 10) { ball.y = GROUND_Y - 10; ball.vy = -ball.vy * grip.physics.bounce; // Energy loss ball.vx *= 0.8; // Friction // If too slow, stop if (Math.abs(ball.vy) < 1 && Math.abs(ball.vx) < 0.5) { ball.phase = 'idle'; ball.active = false; } } // Net Collision (Simplified) if (ball.x > NET_X - 5 && ball.x < NET_X + 5) { if (ball.y > GROUND_Y - NET_HEIGHT) { // Hit net ball.vx = -ball.vx * 0.2; ball.vy = 2; } } // Out of bounds reset if (ball.x > WIDTH + 50) { ball.phase = 'idle'; ball.active = false; } // Trail Logic if (timeRef.current % 3 === 0) { trailRef.current.push({ x: ball.x, y: ball.y, id: timeRef.current }); if (trailRef.current.length > 15) trailRef.current.shift(); } } // --- Render Updates --- // We sync refs to state for rendering. // Note: In a heavy app we'd use direct DOM manipulation, but for this complexity React State is fine // provided we don't trigger complex re-renders of the whole tree. setBallRender({ x: ball.x, y: ball.y, show: ball.active || ball.phase === 'idle', // Keep showing even if idle for visual continuity rotation: ball.rotation }); setTrailRender([...trailRef.current]); // Animate Stats Bars (Lerp) setStatsRender(prev => ({ speed: prev.speed + (grip.speed - prev.speed) * 0.1, spin: prev.spin + (grip.spin - prev.spin) * 0.1 })); frameRef.current = requestAnimationFrame(loop); }; frameRef.current = requestAnimationFrame(loop); return () => cancelAnimationFrame(frameRef.current); }, [activeGripIdx]); // Re-start loop logic if grip changes (but refs keep position if needed, actually we want reset) // Reset ball on grip change useEffect(() => { ballRef.current = { x: COURT_START_X + 20, y: 450, vx: 0, vy: 0, active: false, phase: 'idle', rotation: 0 }; trailRef.current = []; timeRef.current = 179; // Trigger launch immediately next frame }, [activeGripIdx]); const activeGrip = GRIPS[activeGripIdx]; return (

{/* --- Interactive Controls (HTML Overlay) --- */}

{GRIPS.map((grip, i) => ( ))}

); }