点击破坏/修复灯泡

import React, { useState, useEffect, useRef, useMemo, useCallback } from 'react'; import { Lightbulb, Zap, Activity, Info, RotateCcw, Power } from 'lucide-react'; const WIDTH = 1200; const HEIGHT = 700; // --- Utility Components & Constants --- const COLORS = { bg: '#0f172a', wireOff: '#334155', wireOn: '#0ea5e9', // Sky blue bulbOff: '#475569', bulbOn: '#facc15', // Yellow bulbBroken: '#ef4444', // Red text: '#e2e8f0', accent: '#8b5cf6', grid: '#1e293b' }; // SVG Filters for Glow Effects const Defs = () => ( ); // --- Sub-Components --- const Battery = ({ x, y, voltage = "3V" }) => ( {/* Battery Symbol */} {/* Negative Plate */} {/* Positive Plate */} {voltage} - + ); const Switch = ({ x, y, isOpen, onClick, label }) => ( {/* The moving arm */} {label} {isOpen ? "断开 (OFF)" : "闭合 (ON)"} ); const Bulb = ({ x, y, isOn, isBroken, onClick, label, brightness = 1 }) => { const bulbColor = isBroken ? COLORS.bulbBroken : (isOn ? COLORS.bulbOn : COLORS.bulbOff); const opacity = isOn ? 0.6 + (brightness * 0.4) : 1; const glowFilter = isOn ? (brightness > 0.8 ? "url(#strong-glow)" : "url(#glow)") : ""; return ( 点击破坏/修复灯泡 {/* Base */} {/* Glass */} {/* Filament */} {!isBroken && ( )} {/* Broken Indicator */} {isBroken && ( )} {/* Light Rays */} {isOn && ( {[0, 45, 90, 135, 180, 225, 270, 315].map(angle => ( ))} )} {label} {isBroken ? "已损坏 (Broken)" : "正常 (Normal)"} ); }; // Moving Electrons/Current const CurrentFlow = ({ pathD, isActive, speed = 1, offset = 0, color = COLORS.wireOn, width = 4 }) => { if (!isActive) return ; return ( <> {/* Background Wire */} {/* Glowing Flow */} ); }; // --- Main Component --- export default function CircuitSimulation() { const [time, setTime] = useState(0); const requestRef = useRef(); // State const [seriesSwitch, setSeriesSwitch] = useState(false); // Default Open (Off) const [parallelSwitch, setParallelSwitch] = useState(false); // Default Open (Off) const [seriesBulb1Broken, setSeriesBulb1Broken] = useState(false); const [seriesBulb2Broken, setSeriesBulb2Broken] = useState(false); const [parallelBulb1Broken, setParallelBulb1Broken] = useState(false); const [parallelBulb2Broken, setParallelBulb2Broken] = useState(false); // Animation Loop const animate = useCallback((timeVal: number) => { // Slower increment for manageable speed setTime(prev => prev + 1); requestRef.current = requestAnimationFrame(animate); }, []); useEffect(() => { requestRef.current = requestAnimationFrame(animate); return () => { if (requestRef.current) cancelAnimationFrame(requestRef.current); }; }, [animate]); // Logic Calculations // Series Circuit Logic const isSeriesComplete = !seriesSwitch && !seriesBulb1Broken && !seriesBulb2Broken; // Switch is "Close" when false visually in code logic? Let's fix semantics. // Let's standardise: State `true` = Switch OPEN (Circuit Broken). State `false` = Switch CLOSED (Circuit Connected). // Wait, usually boolean `isOn` implies connected. // Let's re-define: `seriesSwitch`: true = Closed (On), false = Open (Off). // Re-define for clarity in handlers const toggleSeriesSwitch = () => setSeriesSwitch(p => !p); const toggleParallelSwitch = () => setParallelSwitch(p => !p); // Series: Current flows only if switch closed AND both bulbs intact const seriesFlowing = seriesSwitch && !seriesBulb1Broken && !seriesBulb2Broken; const seriesBrightness = seriesFlowing ? 0.5 : 0; // Dimmer because voltage splits // Parallel: // Main line flows if switch closed AND at least one branch intact const parallelBranch1Flowing = parallelSwitch && !parallelBulb1Broken; const parallelBranch2Flowing = parallelSwitch && !parallelBulb2Broken; const parallelMainFlowing = parallelBranch1Flowing || parallelBranch2Flowing; const parallelBrightness = 1.0; // Full brightness return (

); }