'use client'; import React, { useState, useEffect, useRef, useMemo } from 'react'; const VIEW_WIDTH = 1000; const VIEW_HEIGHT = 600; const BEAKER_X = VIEW_WIDTH / 2; const BEAKER_Y = VIEW_HEIGHT / 2 + 50; const BEAKER_WIDTH = 300; const BEAKER_HEIGHT = 350; const WATER_LEVEL = 250; // Height of water from bottom of beaker // Particle Types type ParticleType = 'bubble' | 'spark' | 'smoke' | 'trail'; interface Particle { id: number; x: number; y: number; vx: number; vy: number; life: number; // 0 to 1 type: ParticleType; size: number; color: string; } export const SodiumReactionView = () => { // Animation State const [sodium, setSodium] = useState({ x: BEAKER_X, y: BEAKER_Y - BEAKER_HEIGHT / 2 - 100, r: 25, vx: 0, vy: 0, active: false, melting: false }); const [particles, setParticles] = useState([]); const [phLevel, setPhLevel] = useState(7.0); const [temp, setTemp] = useState(25.0); const [equationOpacity, setEquationOpacity] = useState(0); const [cycle, setCycle] = useState(0); // To trigger resets // Refs for animation loop to avoid stale closures const stateRef = useRef({ sodium: { x: BEAKER_X, y: BEAKER_Y - BEAKER_HEIGHT / 2 - 100, r: 25, vx: 0, vy: 0, active: false, melting: false }, particles: [] as Particle[], phLevel: 7.0, temp: 25.0, trail: [] as {x: number, y: number, alpha: number}[], }); const requestRef = useRef(); const particleIdCounter = useRef(0); // Reset Animation useEffect(() => { stateRef.current = { sodium: { x: BEAKER_X, y: BEAKER_Y - BEAKER_HEIGHT / 2 - 100, r: 25, vx: 0, vy: 5, active: true, melting: false }, particles: [], phLevel: 7.0, temp: 25.0, trail: [], }; setEquationOpacity(0); // Fade in equation setTimeout(() => setEquationOpacity(1), 500); }, [cycle]); const updatePhysics = () => { const s = stateRef.current.sodium; const waterSurfaceY = BEAKER_Y + BEAKER_HEIGHT/2 - WATER_LEVEL; // 1. Sodium Movement if (s.active) { // Falling phase if (!s.melting) { s.y += s.vy; s.vy += 0.2; // Gravity // Hit water if (s.y + s.r >= waterSurfaceY) { s.y = waterSurfaceY - s.r * 0.6; // Float slightly submerged s.melting = true; s.vy = 0; // Initial horizontal kick s.vx = (Math.random() - 0.5) * 10; } } // Reacting phase (Skating on water) else { // Random erratic movement (propulsion from H2 gas) s.vx += (Math.random() - 0.5) * 1.5; s.vy += (Math.random() - 0.5) * 0.5; // Damping s.vx *= 0.95; s.vy *= 0.9; // Position update s.x += s.vx; s.y += s.vy; // Containment within beaker const limitX = BEAKER_WIDTH / 2 - s.r - 10; if (s.x > BEAKER_X + limitX) { s.x = BEAKER_X + limitX; s.vx *= -1; } if (s.x < BEAKER_X - limitX) { s.x = BEAKER_X - limitX; s.vx *= -1; } // Keep on surface (bobbing) const surfaceDiff = s.y - (waterSurfaceY - s.r * 0.5); s.y -= surfaceDiff * 0.1; // Shrink (Reaction consumes Na) s.r -= 0.04; // Temperature Rise stateRef.current.temp = Math.min(stateRef.current.temp + 0.5, 95); // pH Rise stateRef.current.phLevel = Math.min(stateRef.current.phLevel + 0.02, 14); // Trail generation (Phenolphthalein pink) if (Math.random() > 0.5) { stateRef.current.trail.push({ x: s.x, y: s.y + s.r, alpha: 1.0 }); } // Particle generation (Bubbles H2) for (let i = 0; i < 2; i++) { const pid = particleIdCounter.current++; stateRef.current.particles.push({ id: pid, x: s.x + (Math.random() - 0.5) * s.r, y: s.y + s.r * 0.8, vx: (Math.random() - 0.5) * 2 - s.vx * 0.5, // Opposite to motion vy: Math.random() * 2 + 1, // Down initially then up? Bubbles go up. life: 1.0, type: 'bubble', size: Math.random() * 4 + 2, color: '#ffffff' }); } // Sparks/Smoke (when small or random high energy) if (s.r < 10 || Math.random() > 0.96) { const pid = particleIdCounter.current++; stateRef.current.particles.push({ id: pid, x: s.x, y: s.y - s.r, vx: (Math.random() - 0.5) * 10, vy: -Math.random() * 10, life: 1.0, type: 'spark', size: Math.random() * 3 + 1, color: '#fbbf24' // Amber }); } } // Death condition if (s.r <= 0) { s.active = false; // Final pop for(let k=0; k<20; k++) { const pid = particleIdCounter.current++; stateRef.current.particles.push({ id: pid, x: s.x, y: s.y, vx: (Math.random() - 0.5) * 15, vy: (Math.random() - 0.5) * 15, life: 1.0, type: 'smoke', size: Math.random() * 8 + 4, color: '#cbd5e1' }); } setTimeout(() => setCycle(c => c + 1), 3000); // Restart loop } } // 2. Particle System Update stateRef.current.particles.forEach(p => { p.life -= 0.015; p.x += p.vx; p.y += p.vy; if (p.type === 'bubble') { p.vy -= 0.1; // Buoyancy (up is negative Y in screen coords? No, wait. 0,0 is top left.) // Actually SVG Y grows downwards. So up is negative. // Bubbles should move UP (negative Y). // Let's fix initial velocity logic: if (p.vy > -2) p.vy -= 0.1; } else if (p.type === 'spark') { p.vy += 0.2; // Gravity affects sparks } else if (p.type === 'smoke') { p.vy -= 0.05; // Smoke rises slowly p.size += 0.1; } }); // Remove dead particles stateRef.current.particles = stateRef.current.particles.filter(p => p.life > 0); // 3. Trail Update (Diffusion) stateRef.current.trail.forEach(t => { t.alpha -= 0.002; // Fade slowly t.y += 0.2; // Sink slowly t.x += (Math.random() - 0.5) * 0.5; // Diffuse }); stateRef.current.trail = stateRef.current.trail.filter(t => t.alpha > 0); // Sync React State for render (throttled slightly for performance if needed, but 60fps usually fine here) setSodium({...s}); setParticles([...stateRef.current.particles]); setPhLevel(stateRef.current.phLevel); setTemp(stateRef.current.temp); requestRef.current = requestAnimationFrame(updatePhysics); }; useEffect(() => { requestRef.current = requestAnimationFrame(updatePhysics); return () => { if (requestRef.current) cancelAnimationFrame(requestRef.current); }; }, [cycle]); // Visual Helpers const waterSurfaceY = BEAKER_Y + BEAKER_HEIGHT/2 - WATER_LEVEL; // Generate Trail Path for SVG // Since trail is points, we can render them as circles or a cloud. // For phenolphthalein effect, fuzzy circles work best. return ( ); };