import React, { useState, useEffect, useRef, useMemo } from 'react'; const VIEW_WIDTH = 1280; const VIEW_HEIGHT = 720; const BG_COLOR = "#0f172a"; const BOARD_COLOR = "#1e293b"; const TEAM_A_COLOR = "#facc15"; // Yellow const TEAM_B_COLOR = "#3b82f6"; // Blue const ACCENT_COLOR = "#10b981"; // Green const TEXT_COLOR = "#f8fafc"; // --- Utility Components --- // Standardized Fraction Component const Fraction = ({ num, den, x, y, size = 24, color = TEXT_COLOR, opacity = 1 }) => ( {num} {den} ); // Worker Character const Worker = ({ x, y, color, scale = 1, isLeft = true, animationOffset = 0 }) => { const bounce = Math.sin(animationOffset * 0.1) * 5; return ( {/* Body */} {/* Head */} {/* Helmet */} {/* Eyes */} ); }; // Particle System for Fireworks class Particle { x: number; y: number; vx: number; vy: number; life: number; color: string; constructor(x: number, y: number, color: string) { this.x = x; this.y = y; const angle = Math.random() * Math.PI * 2; const speed = Math.random() * 5 + 2; this.vx = Math.cos(angle) * speed; this.vy = Math.sin(angle) * speed; this.life = 1.0; this.color = color; } update() { this.x += this.vx; this.y += this.vy; this.vy += 0.1; // Gravity this.vx *= 0.95; // Friction this.life -= 0.02; } } export const RoadRepairChallenge = () => { // Animation State const [scene, setScene] = useState(0); // 0:Intro, 1:Split, 2:Merge, 3:Math, 4:Final, 5:Celebration const frameRef = useRef(0); const particlesRef = useRef([]); const requestRef = useRef(); // Scene-specific interpolated values const [introOp, setIntroOp] = useState(0); const [splitProgress, setSplitProgress] = useState(0); const [mathStep, setMathStep] = useState(0); // 0: Init, 1: Common Denom, 2: Add, 3: Simplify const [finalProgress, setFinalProgress] = useState(0); useEffect(() => { const startTime = Date.now(); let lastSwitch = 0; const loop = () => { const now = Date.now(); const elapsed = now - startTime; frameRef.current++; // --- Timeline Management --- // 0-4s: Intro if (elapsed < 4000) { setScene(0); setIntroOp(Math.min(1, elapsed / 1000)); } // 4-9s: Split Screen Work else if (elapsed < 9000) { setScene(1); setSplitProgress(Math.min(1, (elapsed - 4000) / 2000)); // Animate bar filling } // 9-13s: Merge & Question else if (elapsed < 13000) { setScene(2); } // 13-24s: Math Board else if (elapsed < 24000) { setScene(3); const mathTime = elapsed - 13000; if (mathTime < 2000) setMathStep(0); // Show 1/10 + 1/15 else if (mathTime < 5000) setMathStep(1); // Show 3/30 + 2/30 else if (mathTime < 8000) setMathStep(2); // Show 5/30 else setMathStep(3); // Show 1/6 } // 24-32s: Final Progress else if (elapsed < 32000) { setScene(4); const p = (elapsed - 24000) / 6000; // 6 seconds to fill setFinalProgress(Math.min(1, p)); } // 32s+: Celebration else { setScene(5); if (Math.random() < 0.1) { const px = VIEW_WIDTH * 0.2 + Math.random() * VIEW_WIDTH * 0.6; const py = VIEW_HEIGHT * 0.2 + Math.random() * VIEW_HEIGHT * 0.4; const color = Math.random() > 0.5 ? TEAM_A_COLOR : TEAM_B_COLOR; for(let i=0; i<20; i++) particlesRef.current.push(new Particle(px, py, color)); } } // Update Particles if (particlesRef.current.length > 0) { particlesRef.current.forEach(p => p.update()); particlesRef.current = particlesRef.current.filter(p => p.life > 0); } requestRef.current = requestAnimationFrame(loop); }; requestRef.current = requestAnimationFrame(loop); return () => cancelAnimationFrame(requestRef.current!); }, []); // --- Render Helpers --- // Grid Bar Component const GridBar = ({ total, filled, color, width, height, x, y, label }) => { const cellW = width / total; return ( {/* Background Track */} {/* Grid Lines */} {Array.from({ length: total - 1 }).map((_, i) => ( ))} {/* Filled Cells */} {/* Label */} {label} ); }; // Scene Renders const renderIntro = () => ( 修路大挑战！甲队 (10天) 乙队 (15天) {/* Dirty Road Background */} 任务：修好这条路 ); const renderSplit = () => ( {/* Left Side */} 甲队每天完成 1/10 = 0.5 ? 1 : splitProgress * 2} color={TEAM_A_COLOR} width={400} height={40} x={0} y={200} label="总任务量" /> {splitProgress > 0.5 && } {/* Right Side */} 乙队每天完成 1/15 = 0.5 ? 1 : splitProgress * 2} color={TEAM_B_COLOR} width={400} height={40} x={0} y={200} label="总任务量" /> {splitProgress > 0.5 && } ); const renderMerge = () => ( 两队合作，一天修多少？ {/* Characters High Five */} {/* Floating Blocks Merging */} + ? ); const renderMath = () => { // Layout for math derivation return ( {/* Blackboard Background */} 通分计算 {/* Step 0: Initial Equation */} = 0 ? 1 : 0}> + = {/* Step 1: Common Denominator (30) */} = 1 ? 1 : 0}> {/* 1/10 -> 3/30 */} + {/* 1/15 -> 2/30 */} {/* Arrow Transition */} {mathStep === 1 && ( 最小公倍数: 30 )} {/* Step 2: Addition */} = 2 ? 1 : 0}> = {/* Step 3: Simplify */} = 3 ? 1 : 0}> = {/* Visual Aid for Math */} {mathStep >= 1 && ( {/* Visualizing 30 blocks */} = 2 ? 5 : (mathStep === 1 ? 0 : 0)} color={ACCENT_COLOR} width={600} height={40} x={0} y={0} label="" /> {/* Showing 3 yellow and 2 blue segments overlaid if needed, but keeping it simple for now */} )} ); }; const renderFinal = () => { const days = Math.floor(finalProgress * 6); const completed = days >= 6; return ( 结论：合力每天修 1/6，6天修完！ {/* The Main Road Bar */} {/* Day Markers */} {Array.from({length: 6}).map((_, i) => ( 第{i+1}天 ))} {/* Workers Moving */} {/* Progress Text */} 进度: {Math.min(100, Math.floor(finalProgress * 100))}% ); }; const renderCelebration = () => ( 任务完成！ {/* Completed Smooth Road */} {/* Dancing Workers */} ); return (

); };