'use client'; import React, { useState, useEffect, useRef, useMemo } from 'react'; const VIEW_WIDTH = 800; const VIEW_HEIGHT = 600; const BG_COLOR = '#0f172a'; // Helper to generate random numbers const random = (min, max) => Math.random() * (max - min) + min; // Particle Interface interface Particle { id: number; x: number; y: number; vx: number; vy: number; life: number; type: 'water' | 'light' | 'co2' | 'nutrient'; } export const PlantGrowthView = () => { const [time, setTime] = useState(0); const [phase, setPhase] = useState<'seed' | 'germination' | 'growth' | 'photosynthesis'>('seed'); const requestRef = useRef(); // HUD Data states const [hydration, setHydration] = useState(0); const [sunlight, setSunlight] = useState(0); const [biomass, setBiomass] = useState(0); // Particles ref for performance const particlesRef = useRef([]); // Animation Loop useEffect(() => { const animate = (t: number) => { setTime(prev => prev + 1); // Cycle logic (0 to 1200 frames approx 20 seconds) const cycle = (prev % 1200); // Phase management if (cycle < 100) setPhase('seed'); else if (cycle < 400) setPhase('germination'); else if (cycle < 800) setPhase('growth'); else setPhase('photosynthesis'); // Update HUD Data simulation if (cycle > 100 && cycle < 1100) { setHydration(h => Math.min(100, h + 0.2)); setBiomass(b => Math.min(100, b + 0.1)); } else if (cycle >= 1100) { // Reset fade out } else { setHydration(0); setSunlight(0); setBiomass(0); } if (cycle > 400 && cycle < 1100) { setSunlight(s => Math.min(100, s + 0.3)); } // Particle System Logic // 1. Spawning if (cycle > 120 && cycle < 1000) { // Water (Rain/Soil) if (Math.random() < 0.3) { particlesRef.current.push({ id: Math.random(), x: random(300, 500), y: 600, vx: random(-0.5, 0.5), vy: random(-1, -2), life: 100, type: 'water' }); } // Nutrients (Soil side) if (Math.random() < 0.2) { particlesRef.current.push({ id: Math.random(), x: random(200, 600), y: random(500, 600), vx: (400 - random(200, 600)) * 0.01, vy: -0.5, life: 80, type: 'nutrient' }); } } if (cycle > 450 && cycle < 1000) { // Light (Sun) if (Math.random() < 0.4) { particlesRef.current.push({ id: Math.random(), x: random(100, 300), y: random(50, 150), vx: 2, vy: 2, life: 60, type: 'light' }); } // CO2 (Air) if (Math.random() < 0.2) { particlesRef.current.push({ id: Math.random(), x: random(600, 750), y: random(100, 300), vx: -1, vy: 0.5, life: 120, type: 'co2' }); } } // 2. Updating positions particlesRef.current = particlesRef.current.map(p => ({ ...p, x: p.x + p.vx, y: p.y + p.vy, life: p.life - 1 })).filter(p => p.life > 0); requestRef.current = requestAnimationFrame(() => animate(prev + 1)); }; requestRef.current = requestAnimationFrame(() => animate(0)); return () => cancelAnimationFrame(requestRef.current!); }, []); // Calculate Growth Progress (0 to 1) const growthProgress = useMemo(() => { const cycle = time % 1200; if (cycle < 100) return 0; if (cycle > 900) return 1; return (cycle - 100) / 800; }, [time]); // Procedural Plant Geometry const stemPath = `M 400 500 Q 400 400 400 350 T 400 200`; const rootPath1 = `M 400 500 Q 380 550 350 580`; const rootPath2 = `M 400 500 Q 420 550 450 580`; const rootPath3 = `M 400 500 Q 400 560 400 590`; // Leaf positions const leafL1 = { x: 400, y: 350, rot: -45, scale: Math.max(0, (growthProgress - 0.3) * 3) }; const leafR1 = { x: 400, y: 320, rot: 45, scale: Math.max(0, (growthProgress - 0.35) * 3) }; const leafL2 = { x: 400, y: 260, rot: -60, scale: Math.max(0, (growthProgress - 0.5) * 3) }; const leafR2 = { x: 400, y: 230, rot: 50, scale: Math.max(0, (growthProgress - 0.55) * 3) }; // Flower/Top const flowerScale = Math.max(0, (growthProgress - 0.8) * 5); const flowerOpacity = Math.min(1, flowerScale); // Colors const colors = { water: '#38bdf8', // Sky 400 light: '#facc15', // Yellow 400 co2: '#94a3b8', // Slate 400 nutrient: '#a855f7', // Purple 500 plant: '#10b981', // Emerald 500 soil: '#64748b' // Slate 500 }; return ( ); };