'use client'; import React, { useState, useEffect, useRef, useMemo } from 'react'; // --- Shared Config --- const VIEW_WIDTH = 1000; const VIEW_HEIGHT = 600; // ========================================== // VIEW 3: PROTOCOL DECODING (New) // ========================================== const DECODING_FIELDS = [ { id: 'method', label: 'METHOD', value: 'GET', color: '#00ccff', startLine: 0 }, { id: 'url', label: 'URL', value: '/api/v1/status', color: '#00ff66', startLine: 1 }, { id: 'version', label: 'VERSION', value: 'HTTP/1.1', color: '#ffaa00', startLine: 2 }, { id: 'host', label: 'HOST', value: 'server-01.local', color: '#ff0055', startLine: 4 }, { id: 'ua', label: 'USER-AGENT', value: 'Mozilla/5.0', color: '#aa00ff', startLine: 6 }, { id: 'accept', label: 'ACCEPT', value: 'application/json', color: '#00ccff', startLine: 8 } ]; const BINARY_LINES = [ "01000111 01000101 01010100 00100000", // GET "00101111 01100001 01110000 01101001", // /api "01001000 01010100 01010100 01010000", // HTTP "00110001 00101110 00110001 00001101", // 1.1 "01001000 01101111 01110011 01110100", // Host "00111010 00100000 01110011 01100101", // : se "01010101 01110011 01100101 01110010", // User "00101101 01000001 01100111 01100101", // -Age "01000001 01100011 01100011 01100101", // Acce "01110000 01110100 00111010 00100000", // pt: "01100001 01110000 01110000 01101100", // appl "01101001 01100011 01100001 01110100" // icat ]; type DecodingState = 'SPAWN' | 'MOVE_IN' | 'DECODING' | 'COMPLETE' | 'MOVE_OUT'; export const ProtocolDecodingView = () => { const [state, setState] = useState('SPAWN'); const [packetX, setPacketX] = useState(-300); const [packetOpacity, setPacketOpacity] = useState(0); const [currentFieldIndex, setCurrentFieldIndex] = useState(-1); const [visibleFields, setVisibleFields] = useState([]); const [particle, setParticle] = useState<{x: number, y: number, text: string, color: string, opacity: number} | null>(null); // Refs for Animation Loop Logic (to avoid closure staleness and effect cleanup issues) const requestRef = useRef(undefined); // This ref holds the latest values of state so the animation loop can access them // without needing to be recreated and triggering effect cleanup. const latestStateRef = useRef({ state, particle, currentFieldIndex, packetX, visibleFields }); useEffect(() => { latestStateRef.current = { state, particle, currentFieldIndex, packetX, visibleFields }; }, [state, particle, currentFieldIndex, packetX, visibleFields]); // Coordinates const packetTargetX = 150; const packetY = 100; const fieldsX = 600; const fieldsStartY = 100; const fieldHeight = 50; const animate = (time: number) => { const { state: curState, particle: curParticle, currentFieldIndex: curIdx, packetX: curPacketX } = latestStateRef.current; if (curState === 'MOVE_IN') { setPacketX(prev => { const dist = packetTargetX - prev; if (dist < 1) { // Transition happens via effect to avoid sync issues, but here we trigger the logic setState('DECODING'); // We must defer this slightly or ensure it doesn't conflict scheduleNextField(0); return packetTargetX; } return prev + dist * 0.05; }); setPacketOpacity(prev => Math.min(prev + 0.05, 1)); } else if (curState === 'MOVE_OUT') { setPacketX(prev => prev + 10); // Move right off screen setPacketOpacity(prev => Math.max(prev - 0.02, 0)); if (curPacketX > VIEW_WIDTH + 100) { // Wait until offscreen setState('SPAWN'); } } else if (curState === 'SPAWN') { setPacketX(-300); setPacketOpacity(0); setVisibleFields([]); setCurrentFieldIndex(-1); setState('MOVE_IN'); } // Particle Animation if (curParticle && curParticle.opacity > 0) { const targetY = fieldsStartY + curIdx * fieldHeight + 20; const dx = fieldsX - curParticle.x; const dy = targetY - curParticle.y; const dist = Math.sqrt(dx*dx + dy*dy); if (dist < 10) { // Arrived setVisibleFields(prev => { if (prev.includes(curIdx)) return prev; return [...prev, curIdx]; }); setParticle(null); // Hide particle // Schedule next if (curIdx < DECODING_FIELDS.length - 1) { // We do NOT use timeoutRef.current here in a way that gets cleared by useEffect // We just set a standalone timeout or handle it via frame counting? // Using window.setTimeout is fine AS LONG AS the main useEffect doesn't clear it on re-render. // Since our main useEffect has [] deps, it won't clear it. window.setTimeout(() => { scheduleNextField(curIdx + 1); }, 300); } else { // Done setState('COMPLETE'); window.setTimeout(() => { setState('MOVE_OUT'); }, 2000); } } else { setParticle(prev => prev ? ({ ...prev, x: prev.x + dx * 0.12, // Slightly faster y: prev.y + dy * 0.12, opacity: 1 }) : null); } } requestRef.current = requestAnimationFrame(animate); }; const scheduleNextField = (index: number) => { setCurrentFieldIndex(index); const field = DECODING_FIELDS[index]; // Spawn particle at the binary line position const lineY = packetY + 60 + (field.startLine * 20); setParticle({ x: packetTargetX + 100, // Center of binary block y: lineY, text: field.value, color: field.color, opacity: 1 }); }; // This effect runs ONCE. It starts the loop. // The loop accesses fresh state via latestStateRef. useEffect(() => { requestRef.current = requestAnimationFrame(animate); return () => { if (requestRef.current) cancelAnimationFrame(requestRef.current); }; }, []); return ( ); };