*

1 files changed, 108 insertions, 19 deletions

diff --git a/html/rogue/js/world.js b/html/rogue/js/world.js
index b20aa54..1a54853 100644
--- a/html/rogue/js/world.js
+++ b/html/rogue/js/world.js
@@ -1,22 +1,26 @@
 // Define world object types
 const WORLD_OBJECTS = {
     PLATFORM: 'platform',
-    TREE_BACKGROUND: 'tree_background',
-    TREE_FOREGROUND: 'tree_foreground',
+    FIR_BACKGROUND: 'fir_background',
+    FIR_FOREGROUND: 'fir_foreground',
+    MAPLE_BACKGROUND: 'maple_background',
+    MAPLE_FOREGROUND: 'maple_foreground',
     ROCK_BACKGROUND: 'rock_background',
     ROCK_FOREGROUND: 'rock_foreground'
 };
 
-// Tree configurations
-const TREE_TYPES = {
+// Separate configurations for different tree types
+const FIR_TYPES = {
     SMALL: {
+        type: 'fir',
         width: 80,
         height: 120,
-        canopyOffset: 40,  // Distance from bottom where canopy starts
+        canopyOffset: 40,
         canopyColor: '#2a4',
         trunkColor: '#531'
     },
     LARGE: {
+        type: 'fir',
         width: 120,
         height: 200,
         canopyOffset: 60,
@@ -25,6 +29,29 @@ const TREE_TYPES = {
     }
 };
 
+const MAPLE_TYPES = {
+    SMALL: {
+        type: 'maple',
+        width: 100,
+        height: 130,
+        trunkHeight: 60,
+        canopyRadius: 35,
+        leafClusters: 5,
+        canopyColor: '#3a2',
+        trunkColor: '#642'
+    },
+    LARGE: {
+        type: 'maple',
+        width: 160,
+        height: 200,
+        trunkHeight: 85,
+        canopyRadius: 55,
+        leafClusters: 7,
+        canopyColor: '#2a2',
+        trunkColor: '#531'
+    }
+};
+
 // Rock configurations
 const ROCK_TYPES = {
     SMALL: {
@@ -53,14 +80,24 @@ const createWorld = () => ({
     // Separate arrays for different layers
     backgroundTrees: [
         {
-            type: WORLD_OBJECTS.TREE_BACKGROUND,
+            type: WORLD_OBJECTS.FIR_BACKGROUND,
             x: 50,
-            config: TREE_TYPES.LARGE
+            config: FIR_TYPES.LARGE
         },
         {
-            type: WORLD_OBJECTS.TREE_BACKGROUND,
+            type: WORLD_OBJECTS.MAPLE_BACKGROUND,
+            x: 250,
+            config: MAPLE_TYPES.LARGE
+        },
+        {
+            type: WORLD_OBJECTS.FIR_BACKGROUND,
             x: 500,
-            config: TREE_TYPES.SMALL
+            config: FIR_TYPES.SMALL
+        },
+        {
+            type: WORLD_OBJECTS.MAPLE_BACKGROUND,
+            x: 650,
+            config: MAPLE_TYPES.SMALL
         }
     ],
     backgroundRocks: [
@@ -103,14 +140,14 @@ const createWorld = () => ({
     ],
     foregroundTrees: [
         {
-            type: WORLD_OBJECTS.TREE_FOREGROUND,
+            type: WORLD_OBJECTS.MAPLE_FOREGROUND,
             x: 200,
-            config: TREE_TYPES.SMALL
+            config: MAPLE_TYPES.SMALL
         },
         {
-            type: WORLD_OBJECTS.TREE_FOREGROUND,
+            type: WORLD_OBJECTS.FIR_FOREGROUND,
             x: 800,
-            config: TREE_TYPES.LARGE
+            config: FIR_TYPES.LARGE
         }
     ],
     foregroundRocks: [
@@ -127,20 +164,25 @@ const createWorld = () => ({
     ]
 });
 
-const renderTree = (ctx, tree, groundY) => {
+// Rename current tree render function
+const renderFirTree = (ctx, tree, groundY) => {
     const { x, config } = tree;
     const { width, height, canopyOffset, trunkColor, canopyColor } = config;
     
+    // Calculate trunk dimensions
+    const trunkWidth = width/3;
+    const trunkHeight = height - (height - canopyOffset)/2;
+    
     // Draw trunk
     ctx.fillStyle = trunkColor;
     ctx.fillRect(
-        x - width/6,
-        groundY - height,
-        width/3,
-        height
+        x - trunkWidth/2,
+        groundY - trunkHeight,
+        trunkWidth,
+        trunkHeight
     );
     
-    // Draw canopy (triangular shape)
+    // Draw triangular canopy
     ctx.fillStyle = canopyColor;
     ctx.beginPath();
     ctx.moveTo(x - width/2, groundY - canopyOffset);
@@ -150,6 +192,53 @@ const renderTree = (ctx, tree, groundY) => {
     ctx.fill();
 };
 
+// Add new maple tree render function
+const renderMapleTree = (ctx, tree, groundY) => {
+    const { x, config } = tree;
+    const { 
+        width, height, trunkHeight, canopyRadius,
+        leafClusters, trunkColor, canopyColor 
+    } = config;
+    
+    // Draw trunk
+    const trunkWidth = width/4;
+    ctx.fillStyle = trunkColor;
+    ctx.fillRect(
+        x - trunkWidth/2,
+        groundY - trunkHeight,
+        trunkWidth,
+        trunkHeight
+    );
+    
+    // Draw leaf clusters as overlapping circles
+    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);
+        
+        ctx.beginPath();
+        ctx.arc(clusterX, clusterY, canopyRadius * 0.9, 0, Math.PI * 2);
+        ctx.fill();
+    }
+};
+
+// Main tree render function that handles both types
+const renderTree = (ctx, tree, groundY) => {
+    if (tree.config.type === 'fir') {
+        renderFirTree(ctx, tree, groundY);
+    } else if (tree.config.type === 'maple') {
+        renderMapleTree(ctx, tree, groundY);
+    }
+};
+
 const renderRock = (ctx, rock, groundY) => {
     const { x, config } = rock;
     const { width, height, color, highlights } = config;