'use client'; import React, { useState, useEffect } from 'react'; const CSharpStringImmutability = () => { const [step, setStep] = useState(0); const [cycle, setCycle] = useState(0); // Animation constants const TIMINGS = { INIT: 800, LINE1_HIGHLIGHT: 800, LINE1_ALLOC: 1500, LINE2_HIGHLIGHT: 1000, LINE2_CALC: 1000, LINE2_ALLOC: 1500, LINE2_REPOINT: 1200, LINE3_HIGHLIGHT: 1000, LINE3_CALC: 1000, LINE3_ALLOC: 1500, LINE3_REPOINT: 1200, GC_START: 1000, GC_SWEEP: 2000, RESET: 2000 }; useEffect(() => { let mounted = true; const wait = (ms) => new Promise(resolve => setTimeout(resolve, ms)); const runSequence = async () => { if (!mounted) return; setStep(0); // Reset await wait(TIMINGS.INIT); // --- Line 1: string s = "Hello"; --- if (!mounted) return; setStep(1); // Highlight Line 1 await wait(TIMINGS.LINE1_HIGHLIGHT); if (!mounted) return; setStep(2); // Allocate Stack & Heap "Hello" await wait(TIMINGS.LINE1_ALLOC); // --- Line 2: s += " World"; --- if (!mounted) return; setStep(3); // Highlight Line 2 await wait(TIMINGS.LINE2_HIGHLIGHT); if (!mounted) return; setStep(4); // Calculation/Process await wait(TIMINGS.LINE2_CALC); if (!mounted) return; setStep(5); // Allocate Heap "Hello World" (New Object) await wait(TIMINGS.LINE2_ALLOC); if (!mounted) return; setStep(6); // Update Stack Pointer await wait(TIMINGS.LINE2_REPOINT); // --- Line 3: s = s.ToUpper(); --- if (!mounted) return; setStep(7); // Highlight Line 3 await wait(TIMINGS.LINE3_HIGHLIGHT); if (!mounted) return; setStep(8); // Calculation await wait(TIMINGS.LINE3_CALC); if (!mounted) return; setStep(9); // Allocate Heap "HELLO WORLD" (New Object) await wait(TIMINGS.LINE3_ALLOC); if (!mounted) return; setStep(10); // Update Stack Pointer await wait(TIMINGS.LINE3_REPOINT); // --- GC Phase --- if (!mounted) return; setStep(11); // Show GC Scanner await wait(TIMINGS.GC_START); if (!mounted) return; setStep(12); // Sweep (Fade out old objects) await wait(TIMINGS.GC_SWEEP); await wait(TIMINGS.RESET); if (mounted) setCycle(c => c + 1); }; runSequence(); return () => { mounted = false; }; }, [cycle]); // Coordinates const CODE_X = 40; const STACK_X = 380; const HEAP_X = 650; // Helper to generate bezier curves const getPath = (startX, startY, endX, endY) => { const cp1X = startX + (endX - startX) * 0.5; const cp1Y = startY; const cp2X = startX + (endX - startX) * 0.5; const cp2Y = endY; return `M ${startX} ${startY} C ${cp1X} ${cp1Y} ${cp2X} ${cp2Y} ${endX} ${endY}`; }; return (

); }; export default CSharpStringImmutability;