'use client'; import React, { useState, useEffect, useRef, useMemo } from 'react'; // ----------------------------------------------------------------------------- // Constants & Configuration // ----------------------------------------------------------------------------- const VIEW_WIDTH = 1000; const VIEW_HEIGHT = 600; const BG_COLOR = '#0f172a'; // Slate-900 // Locations const POS_UNTRUST = { x: 100, y: 300 }; const POS_FIREWALL = { x: 400, y: 300 }; const POS_SERVER = { x: 850, y: 300 }; const POS_TRUST = { x: 850, y: 500 }; // Packet Types type PacketType = 'untrust-valid' | 'untrust-invalid' | 'trust'; type PacketStatus = 'moving-to-fw' | 'scanning' | 'moving-to-server' | 'blocked' | 'arrived' | 'moving-direct'; interface Packet { id: number; type: PacketType; status: PacketStatus; x: number; y: number; progress: number; // 0 to 1 along current segment scanTimer: number; // Frames to wait at firewall opacity: number; scale: number; label?: string; } // ----------------------------------------------------------------------------- // Helper Functions // ----------------------------------------------------------------------------- const lerp = (start: number, end: number, t: number) => start * (1 - t) + end * t; const distance = (p1: {x:number, y:number}, p2: {x:number, y:number}) => Math.sqrt(Math.pow(p2.x - p1.x, 2) + Math.pow(p2.y - p1.y, 2)); // ----------------------------------------------------------------------------- // Main Component // ----------------------------------------------------------------------------- export default function FirewallSimulation() { // State for rendering particles and stats const [packets, setPackets] = useState([]); const [fwScanLineY, setFwScanLineY] = useState(0); // For firewall visual effect const [stats, setStats] = useState({ allowed: 0, blocked: 0, trust: 0 }); // Refs for animation loop logic (mutable, non-rendering) const packetsRef = useRef([]); const frameRef = useRef(0); const requestRef = useRef(); const packetIdCounter = useRef(0); // Stats ref to avoid dependency issues in loop const statsRef = useRef({ allowed: 0, blocked: 0, trust: 0 }); // --------------------------------------------------------------------------- // Animation Loop // --------------------------------------------------------------------------- useEffect(() => { const animate = () => { frameRef.current++; const currentPackets = packetsRef.current; const newPackets: Packet[] = []; let statsChanged = false; // --- 1. Spawn New Packets --- // Spawn Untrust packet every 90 frames if (frameRef.current % 90 === 0) { const isMalicious = Math.random() > 0.6; // 40% chance of malicious packetIdCounter.current++; currentPackets.push({ id: packetIdCounter.current, type: isMalicious ? 'untrust-invalid' : 'untrust-valid', status: 'moving-to-fw', x: POS_UNTRUST.x, y: POS_UNTRUST.y, progress: 0, scanTimer: 0, opacity: 1, scale: 1, label: isMalicious ? 'Unknown Port' : 'TCP:80' }); } // Spawn Trust packet every 140 frames if (frameRef.current % 140 === 70) { packetIdCounter.current++; currentPackets.push({ id: packetIdCounter.current, type: 'trust', status: 'moving-direct', x: POS_TRUST.x, y: POS_TRUST.y, progress: 0, scanTimer: 0, opacity: 1, scale: 1, label: 'Internal' }); } // --- 2. Update Packets --- currentPackets.forEach(p => { let keep = true; const speed = 0.015; if (p.status === 'moving-to-fw') { p.progress += speed; if (p.progress >= 1) { p.progress = 1; p.status = 'scanning'; p.scanTimer = 40; // Wait 40 frames p.x = POS_FIREWALL.x; p.y = POS_FIREWALL.y; } else { p.x = lerp(POS_UNTRUST.x, POS_FIREWALL.x, p.progress); p.y = lerp(POS_UNTRUST.y, POS_FIREWALL.y, p.progress); } } else if (p.status === 'scanning') { p.scanTimer--; if (p.scanTimer <= 0) { if (p.type === 'untrust-invalid') { p.status = 'blocked'; statsRef.current.blocked++; statsChanged = true; } else { p.status = 'moving-to-server'; p.progress = 0; p.label = 'NAT:8080'; // Port Forwarding Logic statsRef.current.allowed++; statsChanged = true; } } } else if (p.status === 'moving-to-server') { p.progress += speed; if (p.progress >= 1) { p.status = 'arrived'; } else { p.x = lerp(POS_FIREWALL.x, POS_SERVER.x, p.progress); p.y = lerp(POS_FIREWALL.y, POS_SERVER.y, p.progress); } } else if (p.status === 'moving-direct') { // Trust users go straight to server (vertical then horizontal or direct diagonal) // Let's do a simple direct lerp for visual clarity p.progress += speed * 0.8; // Slightly slower visually as it travels further if (p.progress >= 1) { p.status = 'arrived'; statsRef.current.trust++; statsChanged = true; } else { p.x = lerp(POS_TRUST.x, POS_SERVER.x, p.progress); p.y = lerp(POS_TRUST.y, POS_SERVER.y, p.progress); } } else if (p.status === 'blocked') { p.opacity -= 0.05; p.scale += 0.1; if (p.opacity <= 0) keep = false; } else if (p.status === 'arrived') { p.opacity -= 0.05; p.scale -= 0.05; if (p.opacity <= 0) keep = false; } if (keep) newPackets.push(p); }); packetsRef.current = newPackets; // --- 3. Update Visual State --- // Update Firewall Scan Line setFwScanLineY((Math.sin(frameRef.current * 0.1) * 40)); // Trigger Render setPackets([...packetsRef.current]); if (statsChanged) { setStats({ ...statsRef.current }); } requestRef.current = requestAnimationFrame(animate); }; requestRef.current = requestAnimationFrame(animate); return () => { if (requestRef.current) cancelAnimationFrame(requestRef.current); }; }, []); // --------------------------------------------------------------------------- // Render Helpers // --------------------------------------------------------------------------- // Memoize static background elements const staticBackground = useMemo(() => ( <> {/* Glow Filters */} {/* Gradients */} {/* Grid Background */} {/* Zones */} {/* Untrust Zone */} UNTRUST ZONE {/* Trust Zone */} TRUST ZONE {/* Connection Lines */} {/* Untrust -> FW */} {/* FW -> Server */} {/* Trust -> Server */} ), []); return (

); }