'use client'; import React, { useState, useEffect, useRef } from 'react'; const VIEW_WIDTH = 1000; const VIEW_HEIGHT = 600; const TOTAL_HEADS = 8; const TOTAL_LEGS = 22; export default function ChickenRabbitSolver() { // Animation States const [step, setStep] = useState(0); const [animals, setAnimals] = useState(Array(TOTAL_HEADS).fill({ legs: 0, isRabbit: false })); const [extraLegs, setExtraLegs] = useState(0); const [flyingLegs, setFlyingLegs] = useState<{id: number, targetIdx: number, progress: number}[]>([]); // 0: Intro, 1: Show Heads, 2: Assume Chickens, 3: Calculate Diff, 4: Distribute, 5: Result const timerRef = useRef(null); const reset = () => { setStep(0); setAnimals(Array(TOTAL_HEADS).fill({ legs: 0, isRabbit: false })); setExtraLegs(0); setFlyingLegs([]); runAnimation(); }; const runAnimation = async () => { const wait = (ms: number) => new Promise(r => setTimeout(r, ms)); // Step 0: Intro setStep(0); await wait(2000); // Step 1: Show Heads setStep(1); await wait(2000); // Step 2: Assume all are chickens (Give 2 legs) setStep(2); setAnimals(prev => prev.map(a => ({ ...a, legs: 2 }))); await wait(3000); // Step 3: Calculate Difference // Current legs: 8 * 2 = 16. Target: 22. Diff: 6. setStep(3); setExtraLegs(TOTAL_LEGS - (TOTAL_HEADS * 2)); await wait(3000); // Step 4: Distribute Legs setStep(4); const diff = TOTAL_LEGS - (TOTAL_HEADS * 2); // 6 legs const rabbitsCount = diff / 2; // 3 rabbits needed // Animate distribution for (let i = 0; i < rabbitsCount; i++) { // Spawn flying legs const legId = i; setFlyingLegs(prev => [...prev, { id: legId, targetIdx: i, progress: 0 }]); // Animate flight for(let p = 0; p <= 100; p+=5) { setFlyingLegs(prev => prev.map(fl => fl.id === legId ? { ...fl, progress: p / 100 } : fl)); await wait(20); } // Land legs setAnimals(prev => { const newArr = [...prev]; newArr[i] = { ...newArr[i], legs: 4, isRabbit: true }; return newArr; }); setExtraLegs(prev => prev - 2); setFlyingLegs(prev => prev.filter(fl => fl.id !== legId)); await wait(500); } // Step 5: Conclusion setStep(5); await wait(5000); // Loop reset(); }; useEffect(() => { runAnimation(); return () => { // Cleanup not strictly necessary for this self-contained demo but good practice }; }, []); // Visual Constants const startX = 150; const gapX = 100; const groundY = 400; // Helper to get color const getAnimalColor = (isRabbit: boolean, step: number) => { if (step < 2) return "#94a3b8"; // Gray (Unknown) return isRabbit ? "#ec4899" : "#38bdf8"; // Pink (Rabbit) or Blue (Chicken) }; return (

); }