'use client'; import React, { useState, useEffect, useRef, useMemo } from 'react'; const VIEW_WIDTH = 1000; const VIEW_HEIGHT = 600; // ---------------------------------------------------------------------- // Types & Constants // ---------------------------------------------------------------------- type AnimalType = 'unknown' | 'chicken' | 'rabbit'; interface AnimalState { id: number; type: AnimalType; legs: number; x: number; y: number; isTransforming: boolean; } interface Scenario { heads: number; legs: number; title: string; } const SCENARIOS: Scenario[] = [ { heads: 8, legs: 26, title: '範例一：8 個頭，26 隻腳' }, { heads: 6, legs: 20, title: '範例二：6 個頭，20 隻腳' }, ]; // ---------------------------------------------------------------------- // Sub-components // ---------------------------------------------------------------------- const BackgroundGrid = () => ( ); const Animal = ({ data }: { data: AnimalState }) => { // Styles based on type const isRabbit = data.type === 'rabbit'; const isChicken = data.type === 'chicken'; const isUnknown = data.type === 'unknown'; // Colors const bodyColor = isRabbit ? '#f1f5f9' : isChicken ? '#facc15' : '#475569'; const strokeColor = isUnknown ? '#94a3b8' : '#000'; // Transitions const transitionStyle = { transition: 'all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1)' }; return ( {/* Shadow */} {/* Legs - Back (Rabbit only) */} = 4 ? 1 : 0, transition: 'opacity 0.3s' }}> {/* Legs - Front (Everyone has at least 2 legs in phase 2) */} = 2 ? 1 : 0, transition: 'opacity 0.3s' }}> {/* Body */} {/* Ears (Rabbit) */} {/* Main Shape */} {/* Comb (Chicken) */} {/* Face */} {/* Eyes */} {/* Mouth/Beak */} {isChicken && ( )} {isRabbit && ( )} {isUnknown && ( ? )} ); }; // ---------------------------------------------------------------------- // Main Component // ---------------------------------------------------------------------- export const ChickenRabbitAnimation = () => { const [animals, setAnimals] = useState([]); const [displayText, setDisplayText] = useState(''); const [subText, setSubText] = useState(''); const [mathBoard, setMathBoard] = useState<{ assumedLegs: number | null; targetLegs: number | null; diff: number | null; }>({ assumedLegs: null, targetLegs: null, diff: null }); const scenarioIdxRef = useRef(0); const isRunningRef = useRef(false); // Helper to wait const wait = (ms: number) => new Promise(r => setTimeout(r, ms)); // Main Animation Loop useEffect(() => { const runAnimation = async () => { if (isRunningRef.current) return; isRunningRef.current = true; while (true) { const scenario = SCENARIOS[scenarioIdxRef.current]; const { heads, legs } = scenario; // Reset State setMathBoard({ assumedLegs: null, targetLegs: null, diff: null }); setDisplayText(scenario.title); setSubText('我們來看看這個籠子裡有什麼...'); // Initialize Animals (Unknown state) const newAnimals: AnimalState[] = []; const startX = (VIEW_WIDTH - (heads * 100)) / 2 + 50; for (let i = 0; i < heads; i++) { newAnimals.push({ id: i, type: 'unknown', legs: 0, x: startX + i * 100, y: VIEW_HEIGHT / 2 + 50, isTransforming: false }); } setAnimals(newAnimals); await wait(3000); // Step 1: Assumption - All are chickens setDisplayText('第一步：假設全部都是雞'); setSubText('每隻動物給牠 2 隻腳！'); // Animate legs appearing setAnimals(prev => prev.map(a => ({ ...a, type: 'chicken', legs: 2, isTransforming: true }))); await wait(500); setAnimals(prev => prev.map(a => ({ ...a, isTransforming: false }))); // Stop bounce const currentLegs = heads * 2; setMathBoard(prev => ({ ...prev, assumedLegs: currentLegs, targetLegs: legs })); await wait(2000); // Step 2: Calculate Difference const diff = legs - currentLegs; setDisplayText(`算算看：${heads} 隻雞 × 2 = ${currentLegs} 隻腳`); setSubText(`可是題目說有 ${legs} 隻腳，我們還少 ${diff} 隻腳！`); setMathBoard(prev => ({ ...prev, diff: diff })); await wait(3000); // Step 3: Distribute remaining legs setDisplayText(`第二步：補上剩下的 ${diff} 隻腳`); setSubText('每補 2 隻腳，一隻雞就會變成兔子！'); const rabbitsNeeded = diff / 2; for (let i = 0; i < rabbitsNeeded; i++) { await wait(800); // Animate one chicken turning into rabbit setAnimals(prev => { const next = [...prev]; next[i] = { ...next[i], type: 'rabbit', legs: 4, isTransforming: true }; return next; }); setMathBoard(prev => ({ ...prev, diff: (prev.diff || 0) - 2 })); await wait(400); setAnimals(prev => { const next = [...prev]; next[i].isTransforming = false; return next; }); } await wait(1000); // Step 4: Conclusion setDisplayText('完成！'); setSubText(`答案：兔子有 ${rabbitsNeeded} 隻，雞有 ${heads - rabbitsNeeded} 隻`); await wait(5000); // Prepare for next scenario loop scenarioIdxRef.current = (scenarioIdxRef.current + 1) % SCENARIOS.length; } }; runAnimation(); }, []); return (

); };