'use client'; import React, { useState, useEffect, useRef } from 'react'; // --- Shared Config --- const VIEW_WIDTH = 1000; const VIEW_HEIGHT = 600; // ========================================== // VIEW 1: DATA ASSEMBLY // ========================================== const GRID_ROWS = 5; const GRID_COLS = 5; const TOTAL_PACKETS = GRID_ROWS * GRID_COLS; const PACKET_SIZE = 40; const PACKET_GAP = 4; const SPEED_MULTIPLIER = 0.25; type PacketStatus = 'queued' | 'transit' | 'assembling' | 'docked'; interface Packet { id: number; seqIndex: number; x: number; y: number; status: PacketStatus; binary: string; progress: number; delay: number; } const generateBinaryString = (length: number) => { let str = ''; for (let i = 0; i < length; i++) str += Math.random() > 0.5 ? '1' : '0'; return str; }; const cubicBezier = (t: number, p0: number, p1: number, p2: number, p3: number) => { const cX = 3 * (p1 - p0); const bX = 3 * (p2 - p1) - cX; const aX = p3 - p0 - cX - bX; return aX * t * t * t + bX * t * t + cX * t + p0; }; const HIGHLIGHT_INDICES = new Set([ 14, 19, // short leg 23, 24, // bottom 18, 12, 6 // long leg ]); export const DataAssemblyView = () => { // Coordinates const sourcePos = { x: 150, y: 300 }; const serverPos = { x: 850, y: 300 }; // Calculation for Grid Positioning // We calculate the total width/height from center-to-center of the outer packets const gridSpanWidth = (GRID_COLS - 1) * (PACKET_SIZE + PACKET_GAP); const gridSpanHeight = (GRID_ROWS - 1) * (PACKET_SIZE + PACKET_GAP); // Center the grid horizontally on the server position const gridStartX = serverPos.x - (gridSpanWidth / 2); // Center the grid vertically in the "content area" of the server box. // The server box is 280px high. The header takes the top ~40px. // We shift the center down by 20px to avoid the header text overlap. const gridStartY = (serverPos.y + 20) - (gridSpanHeight / 2); const cp1 = { x: sourcePos.x + 300, y: sourcePos.y - 150 }; const cp2 = { x: serverPos.x - 300, y: serverPos.y + 150 }; const [packets, setPackets] = useState([]); const [isComplete, setIsComplete] = useState(false); const requestRef = useRef(undefined); const lastTimeRef = useRef(undefined); useEffect(() => { const initialPackets: Packet[] = Array.from({ length: TOTAL_PACKETS }).map((_, i) => ({ id: i, seqIndex: i, x: sourcePos.x, y: sourcePos.y, status: 'queued', binary: generateBinaryString(8), progress: 0, delay: i * 300 + Math.random() * 500, })); const shuffled = [...initialPackets].sort(() => Math.random() - 0.5); shuffled.forEach((p, index) => { p.delay = index * 800; }); setPackets(initialPackets); }, []); const animate = (time: number) => { if (lastTimeRef.current === undefined) lastTimeRef.current = time; const deltaTime = time - lastTimeRef.current; lastTimeRef.current = time; setPackets(prevPackets => { let allDocked = true; const nextPackets = prevPackets.map(p => { if (p.status === 'queued') { allDocked = false; if (p.delay <= 0) { return { ...p, status: 'transit' as PacketStatus, delay: 0 }; } return { ...p, delay: p.delay - deltaTime }; } if (p.status === 'transit') { allDocked = false; const speed = 0.0008 * SPEED_MULTIPLIER * deltaTime; const newProgress = p.progress + speed; if (newProgress >= 1) { return { ...p, status: 'assembling' as PacketStatus, progress: 0 }; } const curX = cubicBezier(newProgress, sourcePos.x, cp1.x, cp2.x, serverPos.x); const curY = cubicBezier(newProgress, sourcePos.y, cp1.y, cp2.y, serverPos.y); return { ...p, x: curX, y: curY, progress: newProgress }; } if (p.status === 'assembling') { allDocked = false; const col = p.seqIndex % GRID_COLS; const row = Math.floor(p.seqIndex / GRID_COLS); // Calculate target position based on corrected grid start const targetX = gridStartX + col * (PACKET_SIZE + PACKET_GAP); const targetY = gridStartY + row * (PACKET_SIZE + PACKET_GAP); const dx = targetX - p.x; const dy = targetY - p.y; const dist = Math.sqrt(dx*dx + dy*dy); if (dist < 1) { return { ...p, x: targetX, y: targetY, status: 'docked' as PacketStatus }; } const ease = 0.10; return { ...p, x: p.x + dx * ease, y: p.y + dy * ease }; } return p; }); if (allDocked && prevPackets.length > 0 && !isComplete) { setIsComplete(true); } return nextPackets; }); requestRef.current = requestAnimationFrame(animate); }; useEffect(() => { requestRef.current = requestAnimationFrame(animate); return () => { if (requestRef.current) cancelAnimationFrame(requestRef.current); }; }, [isComplete]); return ( ); };