'use client'; import React, { useState, useEffect, useRef } from 'react'; const VIEW_WIDTH = 1000; const VIEW_HEIGHT = 600; export default function CaoCaoWeighingElephant() { // Animation Phases: // 0: Idle/Intro // 1: Elephant Boards (Boat Sinks) // 2: Mark Water Level (Data Capture) // 3: Elephant Exits (Boat Rises) // 4: Load Rocks (Boat Sinks) // 5: Match Level (Calculation) // 6: Result const [phase, setPhase] = useState(0); const [boatY, setBoatY] = useState(0); const [rockCount, setRockCount] = useState(0); const [showMark, setShowMark] = useState(false); const [elephantPos, setElephantPos] = useState({ x: 850, opacity: 1 }); // Start on shore // Simulation constants const WATER_LEVEL = 400; const BOAT_INITIAL_Y = 360; const SINK_DEPTH = 60; // How much the elephant makes the boat sink useEffect(() => { let timeoutId: NodeJS.Timeout; const runSequence = async () => { // Phase 0: Intro setPhase(0); setBoatY(0); setRockCount(0); setShowMark(false); setElephantPos({ x: 850, opacity: 1 }); await new Promise(r => timeoutId = setTimeout(r, 2000)); // Phase 1: Elephant Boards setPhase(1); setElephantPos({ x: 500, opacity: 1 }); // Move to boat await new Promise(r => timeoutId = setTimeout(r, 1000)); setBoatY(SINK_DEPTH); // Boat sinks await new Promise(r => timeoutId = setTimeout(r, 2500)); // Phase 2: Mark Level setPhase(2); setShowMark(true); await new Promise(r => timeoutId = setTimeout(r, 2000)); // Phase 3: Elephant Exits setPhase(3); setElephantPos({ x: 850, opacity: 0 }); // Move away/fade await new Promise(r => timeoutId = setTimeout(r, 500)); setBoatY(0); // Boat rises await new Promise(r => timeoutId = setTimeout(r, 2000)); // Phase 4: Load Rocks setPhase(4); // Add rocks incrementally const totalRocks = 6; for (let i = 1; i <= totalRocks; i++) { setRockCount(i); // Sinking proportional to rocks setBoatY((SINK_DEPTH / totalRocks) * i); await new Promise(r => timeoutId = setTimeout(r, 800)); } // Phase 5: Match & Calculate setPhase(5); await new Promise(r => timeoutId = setTimeout(r, 2000)); // Phase 6: Result setPhase(6); await new Promise(r => timeoutId = setTimeout(r, 4000)); // Loop runSequence(); }; runSequence(); return () => clearTimeout(timeoutId); }, []); // Visual Helpers const getPhaseText = () => { switch(phase) { case 0: return "场景初始化: 曹操称象"; case 1: return "步骤一: 牵象上船，观察吃水深度"; case 2: return "步骤二: 刻痕记位 (记录吃水线)"; case 3: return "步骤三: 牵象下船，船身浮起"; case 4: return "步骤四: 装载石块，直至船沉至刻痕"; case 5: return "步骤五: 船身吃水与象等同"; case 6: return "结论: 石块总重 = 大象重量"; default: return ""; } }; const elephantPath = "M 40,50 Q 30,20 60,10 Q 90,0 110,20 L 120,50 L 120,90 L 100,90 L 100,60 L 60,60 L 60,90 L 40,90 L 40,50 M 110,20 Q 130,40 120,70"; return (

{/* CSS for custom animations that are hard to do in pure inline styles */}

); }