*

1 files changed, 87 insertions, 96 deletions

diff --git a/html/rogue/js/world.js b/html/rogue/js/world.js
index 0e8cbd7..6dbc8ee 100644
--- a/html/rogue/js/world.js
+++ b/html/rogue/js/world.js
@@ -39,9 +39,19 @@ const MAPLE_TYPES = {
         trunkHeight: 60,
         canopyRadius: 35,
         leafClusters: 5,
-        canopyColor: '#33aa22',
+        canopyColor: '#33aa22', // Bright green
         trunkColor: '#664422'
     },
+    MEDIUM: {
+        type: 'maple',
+        width: 130,
+        height: 160,
+        trunkHeight: 70,
+        canopyRadius: 45,
+        leafClusters: 6,
+        canopyColor: '#228833', // Deep forest green
+        trunkColor: '#553311'
+    },
     LARGE: {
         type: 'maple',
         width: 160,
@@ -49,7 +59,27 @@ const MAPLE_TYPES = {
         trunkHeight: 85,
         canopyRadius: 55,
         leafClusters: 7,
-        canopyColor: '#22aa22',
+        canopyColor: '#115522', // Dark green
+        trunkColor: '#553311'
+    },
+    BRIGHT: {
+        type: 'maple',
+        width: 140,
+        height: 180,
+        trunkHeight: 75,
+        canopyRadius: 50,
+        leafClusters: 6,
+        canopyColor: '#44bb33', // Vibrant green
+        trunkColor: '#664422'
+    },
+    SAGE: {
+        type: 'maple',
+        width: 150,
+        height: 190,
+        trunkHeight: 80,
+        canopyRadius: 52,
+        leafClusters: 6,
+        canopyColor: '#225544', // Sage green
         trunkColor: '#553311'
     }
 };
@@ -145,7 +175,7 @@ const createWorld = () => {
             {
                 type: WORLD_OBJECTS.MAPLE_BACKGROUND,
                 x: -1200,
-                config: MAPLE_TYPES.SMALL
+                config: MAPLE_TYPES.SAGE
             },
             {
                 type: WORLD_OBJECTS.FIR_BACKGROUND,
@@ -161,7 +191,7 @@ const createWorld = () => {
             {
                 type: WORLD_OBJECTS.MAPLE_BACKGROUND,
                 x: -250,
-                config: MAPLE_TYPES.SMALL
+                config: MAPLE_TYPES.BRIGHT
             },
             {
                 type: WORLD_OBJECTS.FIR_BACKGROUND,
@@ -171,7 +201,7 @@ const createWorld = () => {
             {
                 type: WORLD_OBJECTS.MAPLE_BACKGROUND,
                 x: 250,
-                config: MAPLE_TYPES.LARGE
+                config: MAPLE_TYPES.MEDIUM
             },
             {
                 type: WORLD_OBJECTS.FIR_BACKGROUND,
@@ -306,7 +336,7 @@ const createWorld = () => {
             {
                 type: WORLD_OBJECTS.MAPLE_FOREGROUND,
                 x: -150,
-                config: MAPLE_TYPES.SMALL
+                config: MAPLE_TYPES.BRIGHT
             },
             {
                 type: WORLD_OBJECTS.FIR_FOREGROUND,
@@ -316,7 +346,7 @@ const createWorld = () => {
             {
                 type: WORLD_OBJECTS.MAPLE_FOREGROUND,
                 x: 450,
-                config: MAPLE_TYPES.LARGE
+                config: MAPLE_TYPES.SAGE
             },
             {
                 type: WORLD_OBJECTS.FIR_FOREGROUND,
@@ -662,100 +692,61 @@ const renderMapleTree = (ctx, tree, groundY) => {
         trunkColor
     );
 
-    // Draw main leaf clusters as base shape
-    ctx.fillStyle = canopyColor;
-    
-    // Center cluster
-    ctx.beginPath();
-    ctx.arc(x, groundY - trunkHeight - canopyRadius, canopyRadius, 0, Math.PI * 2);
-    ctx.fill();
-    
-    // Surrounding clusters
-    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);
-        
+    // Function to create an irregular polygon
+    const createIrregularPolygon = (centerX, centerY, radius, sides, seed1, seed2) => {
         ctx.beginPath();
-        ctx.arc(clusterX, clusterY, canopyRadius * 0.9, 0, Math.PI * 2);
-        ctx.fill();
-    }
-
-    // Define leaf texture colors (distinct from base color)
-    const leafColors = [
-        '#22bb55', // Bright leaf green
-        '#33cc66', // Fresh spring green
-        '#119955', // Deep forest green
-        '#22aa77', // Sage green
-        '#33bb55', // Vibrant green
-        '#11aa66', // Dark leaf green
-        '#22cc44', // Light forest green
-        '#339944', // Muted green
-        '#11bb77'  // 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();
-                }
-            }
+        
+        // Create points array first to allow smoothing
+        const points = [];
+        for (let i = 0; i < sides; i++) {
+            const angle = (i / sides) * Math.PI * 2;
+            
+            // Even more subtle variation range (0.95-1.05)
+            const radiusVariation = 0.95 + seededRandom(seed1 * i, seed2 * i) * 0.10;
+            const pointRadius = radius * radiusVariation;
+            
+            points.push({
+                x: centerX + Math.cos(angle) * pointRadius,
+                y: centerY + Math.sin(angle) * pointRadius
+            });
+        }
+        
+        // Start the path
+        ctx.moveTo(points[0].x, points[0].y);
+        
+        // Draw smooth curves through all points
+        for (let i = 0; i < points.length; i++) {
+            const current = points[i];
+            const next = points[(i + 1) % points.length];
+            const nextNext = points[(i + 2) % points.length];
+            
+            // Calculate control points for bezier curve with more smoothing
+            const cp1x = current.x + (next.x - points[(i - 1 + points.length) % points.length].x) / 4;
+            const cp1y = current.y + (next.y - points[(i - 1 + points.length) % points.length].y) / 4;
+            const cp2x = next.x - (nextNext.x - current.x) / 4;
+            const cp2y = next.y - (nextNext.y - current.y) / 4;
+            
+            // Draw bezier curve
+            ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, next.x, next.y);
         }
+        
+        ctx.closePath();
     };
 
-    // Fill each cluster with texture circles
-    fillWithCircles(x, groundY - trunkHeight - canopyRadius, canopyRadius * 0.9);
+    // Draw single canopy as irregular polygon
+    const sides = Math.floor(48 + seededRandom(x, groundY) * 16); // 48-64 sides
+    const mainY = groundY - trunkHeight - canopyRadius;
     
-    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);
-    }
+    ctx.fillStyle = canopyColor;
+    createIrregularPolygon(
+        x,
+        mainY,
+        canopyRadius * 1.4, // Increased size
+        sides,
+        x,
+        groundY
+    );
+    ctx.fill();
 };
 
 // Main tree render function that handles both types