'use client'; import React, { useState, useEffect, useRef, useMemo } from 'react'; const VIEW_WIDTH = 1000; const VIEW_HEIGHT = 600; const BG_COLOR = "#0f172a"; const PRIMARY_COLOR = "#38bdf8"; // Sky blue for Input const SECONDARY_COLOR = "#f472b6"; // Pink for Output const ACCENT_COLOR = "#4ade80"; // Green for Retention const TEXT_COLOR = "#e2e8f0"; // Particle Types type Particle = { id: number; x: number; y: number; vx: number; vy: number; life: number; type: 'input' | 'output' | 'retention'; targetX?: number; targetY?: number; }; export default function LearningRetentionView() { const [time, setTime] = useState(0); const [phase, setPhase] = useState<'running' | 'complete' | 'reset'>('running'); // Simulation State const [particlesA, setParticlesA] = useState([]); // Left: Input Only const [particlesB, setParticlesB] = useState([]); // Right: Input + Output const [retentionA, setRetentionA] = useState(0); // Target: 5% const [retentionB, setRetentionB] = useState(0); // Target: 80% const [timerA, setTimerA] = useState(0); const [timerB, setTimerB] = useState(0); const requestRef = useRef(); const startTimeRef = useRef(null); // Constants const MAX_TIME_A = 150; // Scenario A finishes fast const MAX_TIME_B = 450; // Scenario B takes 3x time const PAUSE_TIME = 200; // Pause after completion // Reset function const reset = () => { setTime(0); setPhase('running'); setParticlesA([]); setParticlesB([]); setRetentionA(0); setRetentionB(0); setTimerA(0); setTimerB(0); startTimeRef.current = null; }; const createParticle = (x: number, y: number, type: 'input' | 'output' | 'retention', spread: number = 1): Particle => ({ id: Math.random(), x, y, vx: (Math.random() - 0.5) * spread, vy: (Math.random() * 2) + 1, life: 1.0, type, }); const updateParticles = (particles: Particle[], isActive: boolean, isOutputting: boolean, centerX: number, bottomY: number) => { let nextParticles = particles.map(p => { let newX = p.x + p.vx; let newY = p.y + p.vy; let newLife = p.life - 0.015; // Behavior based on type if (p.type === 'input') { // Gravity if (newY > bottomY - 20) { newLife -= 0.05; // Fade fast at bottom p.vx *= 0.9; } } else if (p.type === 'output') { // Explode outwards newX = p.x + p.vx * 3; newY = p.y + p.vy * 3; newLife -= 0.03; } return { ...p, x: newX, y: newY, life: newLife }; }).filter(p => p.life > 0); // Spawn new particles if (isActive) { // Input Stream (Rain) if (Math.random() < 0.4) { nextParticles.push(createParticle(centerX + (Math.random() - 0.5) * 40, 150, 'input', 2)); } // Output Bursts (Only for Scenario B) if (isOutputting && Math.random() < 0.15) { // Create a burst of output particles from the center for(let k=0; k<5; k++) { const angle = Math.random() * Math.PI * 2; const speed = 2 + Math.random() * 2; nextParticles.push({ id: Math.random(), x: centerX, y: bottomY - 60, vx: Math.cos(angle) * speed, vy: Math.sin(angle) * speed, life: 1.0, type: 'output' }); } } } return nextParticles; }; useEffect(() => { const animate = (timestamp: number) => { if (!startTimeRef.current) startTimeRef.current = timestamp; // Control animation speed logic here rather than relying purely on timestamp for frame skipping // to keep it smooth but logic-bound. if (phase === 'running') { setTimerA(prev => Math.min(prev + 1, MAX_TIME_A)); setTimerB(prev => Math.min(prev + 1, MAX_TIME_B)); const isARunning = timerA < MAX_TIME_A; const isBRunning = timerB < MAX_TIME_B; // Logic A: Input Only // Retention climbs very slowly to 5% then stops/leaks if (isARunning) { setRetentionA(Math.min(5, (timerA / MAX_TIME_A) * 5)); } // Logic B: Input + Output // Retention climbs steadily to 80% // We simulate "Output" phases where retention jumps if (isBRunning) { const progress = timerB / MAX_TIME_B; // Non-linear growth to simulate "effort" setRetentionB(Math.min(80, progress * 80)); } // Particle System Update setParticlesA(prev => updateParticles(prev, isARunning, false, 250, 400)); setParticlesB(prev => updateParticles(prev, isBRunning, isBRunning && timerB % 60 > 30, 750, 400)); // Check completion if (!isARunning && !isBRunning) { setPhase('complete'); startTimeRef.current = timestamp; // Reset ref for pause timer } } else if (phase === 'complete') { // Wait for PAUSE_TIME const elapsed = timestamp - (startTimeRef.current || 0); if (elapsed > 4000) { // 4 seconds pause to read setPhase('reset'); } } else if (phase === 'reset') { reset(); } requestRef.current = requestAnimationFrame(animate); }; requestRef.current = requestAnimationFrame(animate); return () => cancelAnimationFrame(requestRef.current!); }, [phase, timerA, timerB]); // Helper to draw the brain/container const Container = ({ x, y, label, subLabel, retention, color, timeCost, maxTime, active, showOutput }: any) => { const height = 200; const width = 160; const fillHeight = (retention / 100) * height; return ( {/* Title Group */} {label} {subLabel} {/* The Container (Brain/Vessel Metaphor) */} {/* Glass Background */} {/* Liquid Fill */} 50 ? ACCENT_COLOR : PRIMARY_COLOR} opacity="0.9" > {/* Bubbles in liquid */} {active && ( )} {/* Percentage Text */} {Math.round(retention)}% 定着率 (Retention) {/* Time Bar */} 所要時間 (Time Cost) = maxTime ? "#64748b" : color} rx="4" /> {showOutput && active && ( PROCESSING... )} {/* Output Visualization (Arrows radiating) */} {showOutput && active && ( OUTPUTTING )} ); }; return ( ); }