import React, { useState, useEffect, useRef, useMemo } from 'react'; const VIEW_WIDTH = 1000; const VIEW_HEIGHT = 600; export default function ScbaTrainingAnimation() { const [step, setStep] = useState(0); // 0: Intro, 1: Check, 2: Backpack, 3: Mask, 4: Breathe const [subProgress, setSubProgress] = useState(0); const [breathingVal, setBreathingVal] = useState(0); // Animation Loop for continuous effects useEffect(() => { let animationFrameId; const startTime = Date.now(); const animate = () => { const now = Date.now(); const elapsed = now - startTime; // Breathing sine wave (0 to 1) const breathe = (Math.sin(elapsed / 500) + 1) / 2; setBreathingVal(breathe); animationFrameId = requestAnimationFrame(animate); }; animate(); return () => cancelAnimationFrame(animationFrameId); }, []); // Sequence Controller useEffect(() => { const sequence = async () => { // Step 0: Intro / Init setStep(0); setSubProgress(0); await wait(1500); // Step 1: Cylinder Check setStep(1); for (let i = 0; i <= 100; i+=2) { setSubProgress(i); await wait(20); } await wait(1000); // Step 2: Backpack / Harness setStep(2); setSubProgress(0); for (let i = 0; i <= 100; i+=2) { setSubProgress(i); await wait(20); } await wait(1000); // Step 3: Mask & Seal setStep(3); setSubProgress(0); for (let i = 0; i <= 100; i+=2) { setSubProgress(i); await wait(20); } await wait(1000); // Step 4: Active Breathing (Loop) setStep(4); setSubProgress(100); await wait(6000); // Breathe for 6 seconds // Reset sequence(); }; sequence(); }, []); const wait = (ms) => new Promise(resolve => setTimeout(resolve, ms)); // Colors const C_BG = "#0f172a"; const C_GRID = "#1e293b"; const C_PRIMARY = "#0ea5e9"; // Sky blue const C_ACCENT = "#22c55e"; // Green const C_WARN = "#f59e0b"; // Amber const C_TEXT = "#e2e8f0"; const C_DIM = "#475569"; return ( ); } const HudOverlay = ({ step, subProgress }) => { return ( {/* Top Bar */} SCBA TRAINING SIM {/* Steps List */} {/* Progress Bar Bottom */} SYS ); }; const StepItem = ({ index, current, text }) => { const active = current === index; const done = current > index; const color = active ? "#f59e0b" : done ? "#22c55e" : "#475569"; return ( {active && } {text} {active && } ); }; const InfoPanel = ({ step, subProgress }) => { const instructions = [ "系统初始化... SYSTEM INIT", "第一步：检查气瓶压力是否在绿色区域 (30MPa)", "第二步：背负气瓶，拉紧肩带与腰带固定", "第三步：佩戴全面罩，按压检查气密性", "第四步：连接供气阀，保持正常呼吸节奏" ]; return ( {/* Header */} 操作指南 INSTRUCTION {/* Dynamic Text */} STATUS: {step === 0 ? "STANDBY" : step === 4 ? "OPERATIONAL" : "CONFIGURING"}

{instructions[step]}

{/* Tech Decoration Data */} AIR_FLOW_RATE {step === 4 ? "40 L/min" : "0 L/min"} MASK_SEAL_INTEGRITY = 3 ? "#22c55e" : "#ef4444"} fontSize="12" textAnchor="end">{step >= 3 ? "100%" : "UNKNOWN"} REMAINING_TIME {step === 4 ? "45:00" : "--:--"} {/* Animated Spinner for Active Step */} {step > 0 && step < 4 && ( {subProgress}% )} ); };