'use client'; import React, { useState, useEffect, useRef, useMemo } from 'react'; // --- Configuration & Constants --- const VIEW_WIDTH = 1000; const VIEW_HEIGHT = 600; const BG_COLOR = '#0f172a'; const PRIMARY_COLOR = '#38bdf8'; // Sky blue const ACCENT_COLOR = '#818cf8'; // Indigo const SUCCESS_COLOR = '#34d399'; // Emerald const TEXT_COLOR = '#f8fafc'; const NODE_Y = 300; // Node Definitions const NODES = [ { id: 'user', label: 'User Client', ip: '192.168.1.10', x: 100, type: 'client' }, { id: 'proxyA', label: 'Proxy A', ip: '10.0.0.5', x: 366, type: 'proxy' }, { id: 'proxyB', label: 'Proxy B', ip: '10.0.0.6', x: 633, type: 'proxy' }, { id: 'server', label: 'Target Server', ip: '172.16.0.2', x: 900, type: 'server' }, ]; // --- Helper Components --- // SVG Filter for Glow Effect const GlowFilter = () => ( ); // Network Node Component const NodeIcon = ({ node, active }: { node: typeof NODES[0], active: boolean }) => { const isServer = node.type === 'server'; const isClient = node.type === 'client'; return ( {/* Halo Effect when active */} {/* Node Shape */} {/* Icon Graphic */} {isClient && ( )} {node.type === 'proxy' && ( )} {isServer && ( )} {/* Labels */} {node.label} {node.ip} ); }; // --- Main Animation Component --- export default function XForwardedForAnimation() { // Animation State // 0: Idle at User // 1: Moving User -> Proxy A // 2: Processing at Proxy A // 3: Moving Proxy A -> Proxy B // 4: Processing at Proxy B // 5: Moving Proxy B -> Server // 6: Processing at Server (Highlight) // 7: Finished (Wait) const [step, setStep] = useState(0); // Packet Data State const [packetSrc, setPacketSrc] = useState(NODES[0].ip); const [packetXFF, setPacketXFF] = useState([]); // Highlighting specific parts of the packet const [highlightSrc, setHighlightSrc] = useState(false); const [highlightXFF, setHighlightXFF] = useState(false); const [finalFocus, setFinalFocus] = useState(false); useEffect(() => { let timer: NodeJS.Timeout; const runSequence = async () => { // Step 0: Initial State if (step === 0) { setPacketSrc(NODES[0].ip); setPacketXFF([]); setHighlightSrc(false); setHighlightXFF(false); setFinalFocus(false); timer = setTimeout(() => setStep(1), 1000); } // Step 1: User -> Proxy A else if (step === 1) { timer = setTimeout(() => setStep(2), 1500); } // Step 2: At Proxy A (Rewrite Src, Add XFF) else if (step === 2) { // Delay slightly then update data await new Promise(r => setTimeout(r, 500)); setHighlightSrc(true); // Flash Src setPacketSrc(NODES[1].ip); // Src becomes Proxy A IP await new Promise(r => setTimeout(r, 600)); setHighlightSrc(false); setHighlightXFF(true); // Flash XFF setPacketXFF([NODES[0].ip]); // Add User IP to XFF timer = setTimeout(() => { setHighlightXFF(false); setStep(3); }, 1000); } // Step 3: Proxy A -> Proxy B else if (step === 3) { timer = setTimeout(() => setStep(4), 1500); } // Step 4: At Proxy B (Rewrite Src, Append XFF) else if (step === 4) { await new Promise(r => setTimeout(r, 500)); setHighlightSrc(true); setPacketSrc(NODES[2].ip); // Src becomes Proxy B IP await new Promise(r => setTimeout(r, 600)); setHighlightSrc(false); setHighlightXFF(true); setPacketXFF([NODES[0].ip, NODES[1].ip]); // Append Proxy A IP timer = setTimeout(() => { setHighlightXFF(false); setStep(5); }, 1000); } // Step 5: Proxy B -> Server else if (step === 5) { timer = setTimeout(() => setStep(6), 1500); } // Step 6: Server Analysis else if (step === 6) { await new Promise(r => setTimeout(r, 500)); setFinalFocus(true); // Highlight the original IP in XFF timer = setTimeout(() => setStep(7), 3000); } // Step 7: Reset else if (step === 7) { setFinalFocus(false); timer = setTimeout(() => setStep(0), 500); } }; runSequence(); return () => clearTimeout(timer); }, [step]); // Calculate Packet Position based on step const getPacketX = () => { switch(step) { case 0: return NODES[0].x; case 1: return NODES[1].x; // Moving target case 2: return NODES[1].x; case 3: return NODES[2].x; // Moving target case 4: return NODES[2].x; case 5: return NODES[3].x; // Moving target case 6: return NODES[3].x; case 7: return NODES[3].x; default: return NODES[0].x; } }; // Determine if packet is moving for CSS transition const isMoving = [1, 3, 5].includes(step); return (

); }