'use client'; import React, { useState, useEffect, useRef } from 'react'; export default function PhpTransportAnimation() { const VIEW_WIDTH = 800; const VIEW_HEIGHT = 400; // Animation States: 'IDLE', 'PREPARE_GET', 'SEND_GET', 'PROCESS_GET', 'PREPARE_POST', 'SEND_POST', 'PROCESS_POST' const [phase, setPhase] = useState('IDLE'); const [progress, setProgress] = useState(0); // 0 to 1 for movement const requestRef = useRef(); const startTimeRef = useRef(); // Data for visualization const getData = { key: 'id', value: '88', full: '?id=88' }; const postData = { key: 'user', value: 'admin', full: '{ user: "admin" }' }; useEffect(() => { const sequence = async () => { // Helper for delays const wait = (ms: number) => new Promise(r => setTimeout(r, ms)); while (true) { // --- GET SEQUENCE --- setPhase('PREPARE_GET'); setProgress(0); await wait(1500); setPhase('SEND_GET'); await animateTravel(2000); setPhase('PROCESS_GET'); await wait(2500); // --- POST SEQUENCE --- setPhase('PREPARE_POST'); setProgress(0); await wait(1500); setPhase('SEND_POST'); await animateTravel(2000); setPhase('PROCESS_POST'); await wait(2500); } }; sequence(); return () => { if (requestRef.current) cancelAnimationFrame(requestRef.current); }; }, []); const animateTravel = (duration: number) => { return new Promise((resolve) => { startTimeRef.current = performance.now(); const animate = (time: number) => { const elapsed = time - (startTimeRef.current || time); const p = Math.min(elapsed / duration, 1); // Ease out cubic const eased = 1 - Math.pow(1 - p, 3); setProgress(eased); if (p < 1) { requestRef.current = requestAnimationFrame(animate); } else { resolve(); } }; requestRef.current = requestAnimationFrame(animate); }); }; // Helper to render grid const renderGrid = () => { const lines = []; for (let i = 0; i < VIEW_WIDTH; i += 40) { lines.push(); } for (let i = 0; i < VIEW_HEIGHT; i += 40) { lines.push(); } return {lines}; }; // Positions const clientX = 100; const serverX = 700; const pathY = 220; const packetX = clientX + (serverX - clientX) * progress; // Colors const colors = { bg: '#0f172a', get: '#38bdf8', // Sky blue post: '#a855f7', // Purple text: '#94a3b8', highlight: '#ffffff', server: '#334155' }; const isGet = phase.includes('GET'); const isPost = phase.includes('POST'); const currentColor = isGet ? colors.get : colors.post; return (

); }