*

1 files changed, 103 insertions, 2 deletions

diff --git a/html/rogue/js/world.js b/html/rogue/js/world.js
index e6d8b6e..c479a57 100644
--- a/html/rogue/js/world.js
+++ b/html/rogue/js/world.js
@@ -306,7 +306,13 @@ const createWorld = () => ({
     grassStates: {}
 });
 
-// Rename current tree render function
+// Add seededRandom function
+const seededRandom = (x, y) => {
+    const dot = x * 12.9898 + y * 78.233;
+    return (Math.sin(dot) * 43758.5453123) % 1;
+};
+
+// Update renderFirTree function
 const renderFirTree = (ctx, tree, groundY) => {
     const { x, config } = tree;
     const { width, height, canopyOffset, trunkColor, canopyColor } = config;
@@ -324,7 +330,7 @@ const renderFirTree = (ctx, tree, groundY) => {
         trunkHeight
     );
     
-    // Draw triangular canopy
+    // Draw main triangular canopy
     ctx.fillStyle = canopyColor;
     ctx.beginPath();
     ctx.moveTo(x - width/2, groundY - canopyOffset);
@@ -332,6 +338,101 @@ const renderFirTree = (ctx, tree, groundY) => {
     ctx.lineTo(x, groundY - height);
     ctx.closePath();
     ctx.fill();
+
+    // Define a range of green colors for texture that are distinct from the base color
+    const greenColors = [
+        '#1a3', // Darker forest green
+        '#2b4', // Medium forest green
+        '#3c5', // Bright forest green
+        '#184', // Deep sea green
+        '#2a6', // Sage green
+        '#1b5', // Deep pine
+        '#295', // Ocean green
+        '#3b6', // Fresh spring green
+        '#174', // Dark emerald
+    ];
+
+    // Filter out any colors too similar to the base color
+    const distinctColors = greenColors.filter(color => {
+        // Simple check - if colors are exactly the same, filter out
+        return color !== canopyColor;
+    });
+
+    // Add triangle pattern texture
+    const spacing = 12; // Smaller spacing for more triangles
+    const triangleSize = 8; // Slightly smaller triangles
+    const margin = 5;
+    
+    // Calculate bounds for the pattern
+    const bounds = {
+        minX: x - width/2 + margin,
+        maxX: x + width/2 - margin,
+        minY: groundY - height + margin,
+        maxY: groundY - canopyOffset - margin
+    };
+
+    // Generate triangle pattern
+    for (let py = bounds.minY; py < bounds.maxY; py += spacing) {
+        // Calculate how wide the tree is at this height
+        const heightRatio = (py - (groundY - height)) / (groundY - canopyOffset - (groundY - height));
+        const levelWidth = width * heightRatio;
+        
+        // Calculate x bounds for this row
+        const rowMinX = x - levelWidth/2 + margin;
+        const rowMaxX = x + levelWidth/2 - margin;
+        
+        // Add slight offset to alternate rows
+        const rowOffset = (Math.floor(py / spacing) % 2) * (spacing / 2);
+        
+        for (let px = rowMinX; px < rowMaxX; px += spacing) {
+            // Use position for random variation
+            const seed1 = px * 13.37;
+            const seed2 = py * 7.89;
+            
+            // Random variations
+            const variation = {
+                x: (seededRandom(seed1, seed2) - 0.5) * 6,
+                y: (seededRandom(seed2, seed1) - 0.5) * 6,
+                rotation: seededRandom(seed1 + seed2, seed2 - seed1) * Math.PI * 0.5,
+                size: triangleSize * (0.7 + seededRandom(seed1, seed2) * 0.6)
+            };
+
+            // Pick a random color from our green palette
+            const colorIndex = Math.floor(seededRandom(seed1 * seed2, seed2 * seed1) * distinctColors.length);
+            ctx.fillStyle = distinctColors[colorIndex];
+
+            ctx.save();
+            ctx.translate(
+                px + rowOffset + variation.x, 
+                py + variation.y
+            );
+            ctx.rotate(variation.rotation);
+            
+            // Draw small triangle
+            ctx.beginPath();
+            ctx.moveTo(-variation.size/2, variation.size/2);
+            ctx.lineTo(variation.size/2, variation.size/2);
+            ctx.lineTo(0, -variation.size/2);
+            ctx.closePath();
+            ctx.fill();
+            
+            ctx.restore();
+        }
+    }
+};
+
+// Helper function to darken/lighten colors
+const shadeColor = (color, percent) => {
+    const num = parseInt(color.replace('#', ''), 16);
+    const amt = Math.round(2.55 * percent);
+    const R = (num >> 16) + amt;
+    const G = (num >> 8 & 0x00FF) + amt;
+    const B = (num & 0x0000FF) + amt;
+    return '#' + (0x1000000 +
+        (R < 255 ? (R < 1 ? 0 : R) : 255) * 0x10000 +
+        (G < 255 ? (G < 1 ? 0 : G) : 255) * 0x100 +
+        (B < 255 ? (B < 1 ? 0 : B) : 255)
+    ).toString(16).slice(1);
 };
 
 // Add new maple tree render function