\n \n \n \n

\n );\n }\n\n const plantType = getPlantType(selectedPlantType);\n const growth = calculatePlantGrowth(weeklyStats, selectedPlantType);\n const currentStage = plantType.stages[growth.currentStage];\n const nextStage = plantType.stages[growth.currentStage + 1];\n const isDemo = weeklyStats.isDemo;\n\n const createParticle = (x: number, y: number) => {\n const newParticle = { id: particleId, x, y };\n setParticles(prev => [...prev, newParticle]);\n setParticleId(prev => prev + 1);\n\n // Remove particle after animation\n setTimeout(() => {\n setParticles(prev => prev.filter(p => p.id !== newParticle.id));\n }, 3000);\n };\n\n const handlePlantClick = (event: React.MouseEvent) => {\n const rect = event.currentTarget.getBoundingClientRect();\n const x = event.clientX - rect.left;\n const y = event.clientY - rect.top;\n createParticle(x, y);\n };\n\n useEffect(() => {\n if (growth.currentStage >= 4) {\n const interval = setInterval(() => {\n const x = Math.random() * 300 + 50;\n const y = Math.random() * 200 + 100;\n createParticle(x, y);\n }, 2000);\n\n return () => clearInterval(interval);\n }\n }, [growth.currentStage]);\n\n const getPlantSize = () => {\n if (globalThis.innerWidth < 640) return \"w-20 h-20\"; // Mobile\n if (globalThis.innerWidth < 1024) return \"w-24 h-24\"; // Tablet\n return \"w-32 h-32\"; // Desktop\n };\n\n const getGlowIntensity = () => {\n return growth.currentStage >= 5 ? \"progress-glow\" : \"\";\n };\n\n return (\n

\n {/* Professional Background Elements */}\n

\n \n \n \n

\n \n

\n \n \n \n

\n\n {/* Main Content */}\n

\n {/* Professional Header */}\n

\n Your Coding Plant\n

\n Growing with every line of code you write\n

\n {isDemo && (\n

\n \n Demo Data\n

\n )}\n

\n\n {/* Enhanced Plant Display */}\n

\n \n \n \n

\n\n {/* Enhanced Particles */}\n {particles.map(particle => (\n \n ))}\n

\n\n {/* Professional Plant Info */}\n

\n {/* Plant Status */}\n

\n {currentStage.name}\n

\n {currentStage.description}\n

\n\n {/* Professional Stage Indicator */}\n

\n {plantType.stages.map((stage, index) => (\n \n {index <= growth.currentStage && (\n

\n )}\n

\n ))}\n

\n\n {/* Professional Stats Grid */}\n

\n {growth.weeklyHours.toFixed(1)}h\n

This Week

\n {(growth.consistency * 100).toFixed(0)}%\n

Consistency

\n {growth.languageDiversity}\n

Languages

\n {growth.currentStage + 1}\n

Stage

\n\n {/* Professional Next Stage Preview */}\n {nextStage && (\n

\n \n

\n Next: {nextStage.name}\n

\n Keep coding to unlock this magnificent stage!\n

\n\n

\n Required: {nextStage.requiredHours}h coding\n

\n {nextStage.requiredConsistency && (\n

\n \n Consistency: {(nextStage.requiredConsistency * 100).toFixed(0)}%\n \n

\n )}\n {nextStage.requiredLanguages && (\n

\n Languages: {nextStage.requiredLanguages}\n

\n )}\n

\n\n

\n \n Overall Progress\n \n \n {growth.progressToNext.toFixed(1)}%\n \n

\n \n

\n \n )}\n \n \n \n );\n}","deleted","label",[169,170,150],"frontend","components","permalink","https://www.val.town/x/loading/plant/code/frontend/components/PlantGarden.tsx","extension","actionData","errors"]