*

1 files changed, 94 insertions, 2 deletions

diff --git a/html/rogue/js/world.js b/html/rogue/js/world.js
index 05cb8ca..63acb5a 100644
--- a/html/rogue/js/world.js
+++ b/html/rogue/js/world.js
@@ -312,6 +312,78 @@ const seededRandom = (x, y) => {
     return (Math.sin(dot) * 43758.5453123) % 1;
 };
 
+// Add hatching helper function
+const addHatchingPattern = (ctx, x, y, width, height, color) => {
+    const spacing = 4; // Space between hatch lines
+    const length = 10;  // Length of each hatch line
+    const margin = 4; // Increased margin from edges
+    const baseAngle = Math.PI * 1.5; // Vertical angle (pointing down)
+    const angleVariation = Math.PI / 12; // Reduced angle variation
+    
+    // Define darker brown shades
+    const brownShades = [
+        '#421', // Dark brown
+        '#532', // Medium dark brown
+        '#431', // Reddish dark brown
+        '#321', // Very dark brown
+        '#542', // Warm dark brown
+    ];
+    
+    // Create clipping path for trunk
+    ctx.save();
+    ctx.beginPath();
+    ctx.rect(
+        x - width/2,
+        y - height,
+        width,
+        height
+    );
+    ctx.clip();
+    
+    // Calculate bounds with increased safety margin
+    const bounds = {
+        minX: x - width/2 + margin,
+        maxX: x + width/2 - margin,
+        minY: y - height + margin,
+        maxY: y - margin
+    };
+
+    // Draw hatching
+    ctx.lineWidth = 1;
+    for (let hatchX = bounds.minX; hatchX < bounds.maxX; hatchX += spacing) {
+        for (let hatchY = bounds.minY; hatchY < bounds.maxY; hatchY += spacing) {
+            // Use position for random variation
+            const seed1 = hatchX * 13.37;
+            const seed2 = hatchY * 7.89;
+            
+            // Random variations with reduced range
+            const variation = {
+                x: (seededRandom(seed1, seed2) - 0.5) * 1.5, // Reduced variation
+                y: (seededRandom(seed2, seed1) - 0.5) * 1.5, // Reduced variation
+                angle: baseAngle + (seededRandom(seed1 + seed2, seed2 - seed1) - 0.5) * angleVariation
+            };
+
+            // Pick a random brown shade
+            const colorIndex = Math.floor(seededRandom(seed1 * seed2, seed2 * seed1) * brownShades.length);
+            ctx.strokeStyle = brownShades[colorIndex];
+
+            // Draw hatch line
+            ctx.beginPath();
+            ctx.moveTo(
+                hatchX + variation.x,
+                hatchY + variation.y
+            );
+            ctx.lineTo(
+                hatchX + Math.cos(variation.angle) * length + variation.x,
+                hatchY + Math.sin(variation.angle) * length + variation.y
+            );
+            ctx.stroke();
+        }
+    }
+    
+    ctx.restore();
+};
+
 // Update renderFirTree function
 const renderFirTree = (ctx, tree, groundY) => {
     const { x, config } = tree;
@@ -321,7 +393,7 @@ const renderFirTree = (ctx, tree, groundY) => {
     const trunkWidth = width/3;
     const trunkHeight = height - (height - canopyOffset)/2;
     
-    // Draw trunk
+    // Draw trunk base
     ctx.fillStyle = trunkColor;
     ctx.fillRect(
         x - trunkWidth/2,
@@ -330,6 +402,16 @@ const renderFirTree = (ctx, tree, groundY) => {
         trunkHeight
     );
     
+    // Add trunk hatching
+    addHatchingPattern(
+        ctx,
+        x,
+        groundY,
+        trunkWidth,
+        trunkHeight,
+        trunkColor
+    );
+
     // Draw main triangular canopy
     ctx.fillStyle = canopyColor;
     ctx.beginPath();
@@ -443,7 +525,7 @@ const renderMapleTree = (ctx, tree, groundY) => {
         leafClusters, trunkColor, canopyColor 
     } = config;
     
-    // Draw trunk
+    // Draw trunk base
     const trunkWidth = width/4;
     ctx.fillStyle = trunkColor;
     ctx.fillRect(
@@ -453,6 +535,16 @@ const renderMapleTree = (ctx, tree, groundY) => {
         trunkHeight
     );
     
+    // Add trunk hatching
+    addHatchingPattern(
+        ctx,
+        x,
+        groundY,
+        trunkWidth,
+        trunkHeight,
+        trunkColor
+    );
+
     // Draw main leaf clusters as base shape
     ctx.fillStyle = canopyColor;