'use client'; import React, { useState, useEffect, useRef } from 'react'; // --- Shared Config --- const VIEW_WIDTH = 1000; const VIEW_HEIGHT = 600; interface DPIPacket { id: number; x: number; y: number; type: 'clean' | 'malicious'; status: 'moving_in' | 'scanning' | 'moving_out_clean' | 'moving_out_threat'; scanProgress: number; binary: string[]; threatIndex: number; // index of binary line that is malicious } export const DPIDetectionView = () => { const [packets, setPackets] = useState([]); const requestRef = useRef(0); const lastSpawnRef = useRef(0); const packetIdRef = useRef(0); const SCANNER_X = 350; const SCANNER_WIDTH = 200; // const DROP_ZONE_Y = 600; // Unused but kept for reference // Constants for visuals const PACKET_WIDTH = 140; const PACKET_HEIGHT = 80; const generatePacketContent = (isMalicious: boolean) => { const lines = []; for(let i=0; i<4; i++) { let hex = ""; for(let j=0; j<4; j++) { hex += Math.floor(Math.random()*255).toString(16).padStart(2, '0').toUpperCase() + " "; } lines.push(hex); } // Inject threat let threatIdx = -1; if (isMalicious) { threatIdx = 2; lines[2] = "44 52 4F 50"; // DROP } return { lines, threatIdx }; }; const spawnPacket = () => { const isMalicious = Math.random() > 0.7; // 30% malicious const { lines, threatIdx } = generatePacketContent(isMalicious); const newP: DPIPacket = { id: packetIdRef.current++, x: -200, y: 300 - PACKET_HEIGHT/2, type: isMalicious ? 'malicious' : 'clean', status: 'moving_in', scanProgress: 0, binary: lines, threatIndex: threatIdx }; setPackets(prev => [...prev, newP]); }; const animate = (time: number) => { // Spawn logic if (time - lastSpawnRef.current > 3500) { // Only spawn if previous packet has cleared the scanner entry const lastPacket = packets[packets.length-1]; if (!lastPacket || lastPacket.x > SCANNER_X) { spawnPacket(); lastSpawnRef.current = time; } } setPackets(prev => { return prev.map(p => { let next = { ...p }; if (p.status === 'moving_in') { if (p.x < SCANNER_X + (SCANNER_WIDTH - PACKET_WIDTH)/2) { next.x += 4; } else { next.status = 'scanning'; } } else if (p.status === 'scanning') { next.scanProgress += 0.01; // Scan speed if (next.scanProgress >= 1) { next.status = p.type === 'clean' ? 'moving_out_clean' : 'moving_out_threat'; } } else if (p.status === 'moving_out_clean') { next.x += 6; } else if (p.status === 'moving_out_threat') { next.y += 8; // Drop down next.x += 1; } return next; }).filter(p => p.x < VIEW_WIDTH + 200 && p.y < VIEW_HEIGHT + 200); }); requestRef.current = requestAnimationFrame(animate); }; useEffect(() => { requestRef.current = requestAnimationFrame(animate); return () => { cancelAnimationFrame(requestRef.current); }; }, []); return ( ); };