1 files changed, 77 insertions, 1 deletions
diff --git a/html/rogue/js/world.js b/html/rogue/js/world.js
index c479a57..05cb8ca 100644
--- a/html/rogue/js/world.js
+++ b/html/rogue/js/world.js
@@ -453,7 +453,7 @@ const renderMapleTree = (ctx, tree, groundY) => {
         trunkHeight
     );
     
-    // Draw leaf clusters as overlapping circles
+    // Draw main leaf clusters as base shape
     ctx.fillStyle = canopyColor;
     
     // Center cluster
@@ -471,6 +471,82 @@ const renderMapleTree = (ctx, tree, groundY) => {
         ctx.arc(clusterX, clusterY, canopyRadius * 0.9, 0, Math.PI * 2);
         ctx.fill();
     }
+
+    // Define leaf texture colors (distinct from base color)
+    const leafColors = [
+        '#2b5', // Bright leaf green
+        '#3c6', // Fresh spring green
+        '#195', // Deep forest green
+        '#2a7', // Sage green
+        '#3b5', // Vibrant green
+        '#1a6', // Dark leaf green
+        '#2c4', // Light forest green
+        '#394', // Muted green
+        '#1b7'  // Deep emerald
+    ].filter(color => color !== canopyColor);
+
+    // Add detailed leaf texture using small circles
+    const circleSize = canopyRadius * 0.15; // Size of texture circles
+    const spacing = circleSize * 1.2; // Space between circles
+
+    // Function to fill an area with random circles
+    const fillWithCircles = (centerX, centerY, radius) => {
+        const bounds = {
+            minX: centerX - radius,
+            maxX: centerX + radius,
+            minY: centerY - radius,
+            maxY: centerY + radius
+        };
+
+        // Generate circles within the bounds
+        for (let py = bounds.minY; py < bounds.maxY; py += spacing) {
+            for (let px = bounds.minX; px < bounds.maxX; px += spacing) {
+                // Check if point is within the cluster radius
+                const distToCenter = Math.sqrt(
+                    Math.pow(px - centerX, 2) + 
+                    Math.pow(py - centerY, 2)
+                );
+                
+                if (distToCenter <= radius) {
+                    const seed1 = px * 13.37;
+                    const seed2 = py * 7.89;
+                    
+                    // Random variations with minimum size guarantee
+                    const variation = {
+                        x: (seededRandom(seed1, seed2) - 0.5) * spacing * 0.8,
+                        y: (seededRandom(seed2, seed1) - 0.5) * spacing * 0.8,
+                        size: Math.max(circleSize * (0.6 + seededRandom(seed1, seed2) * 0.8), 1)
+                    };
+
+                    // Pick a random color
+                    const colorIndex = Math.floor(seededRandom(seed1 * seed2, seed2 * seed1) * leafColors.length);
+                    ctx.fillStyle = leafColors[colorIndex];
+
+                    // Draw circle with guaranteed positive radius
+                    ctx.beginPath();
+                    ctx.arc(
+                        px + variation.x,
+                        py + variation.y,
+                        Math.max(variation.size / 2, 0.5), // Ensure minimum radius of 0.5
+                        0,
+                        Math.PI * 2
+                    );
+                    ctx.fill();
+                }
+            }
+        }
+    };
+
+    // Fill each cluster with texture circles
+    fillWithCircles(x, groundY - trunkHeight - canopyRadius, canopyRadius * 0.9);
+    
+    for (let i = 0; i < leafClusters; i++) {
+        const angle = (i / leafClusters) * Math.PI * 2;
+        const clusterX = x + Math.cos(angle) * (canopyRadius * 0.8);
+        const clusterY = groundY - trunkHeight - canopyRadius + Math.sin(angle) * (canopyRadius * 0.8);
+        
+        fillWithCircles(clusterX, clusterY, canopyRadius * 0.8);
+    }
 };
 
 // Main tree render function that handles both types