path: root/html/rogue/js/world.js

// Define world object types
const WORLD_OBJECTS = {
    PLATFORM: 'platform',
    FIR_BACKGROUND: 'fir_background',
    FIR_FOREGROUND: 'fir_foreground',
    MAPLE_BACKGROUND: 'maple_background',
    MAPLE_FOREGROUND: 'maple_foreground',
    ROCK_BACKGROUND: 'rock_background',
    ROCK_FOREGROUND: 'rock_foreground',
    GRASS_BACKGROUND: 'grass_background',
    GRASS_FOREGROUND: 'grass_foreground'
};

// Separate configurations for different tree types
const FIR_TYPES = {
    SMALL: {
        type: 'fir',
        width: 80,
        height: 120,
        canopyOffset: 40,
        canopyColor: '#22aa44',
        trunkColor: '#553311'
    },
    LARGE: {
        type: 'fir',
        width: 120,
        height: 200,
        canopyOffset: 60,
        canopyColor: '#11aa44',
        trunkColor: '#442200'
    }
};

const MAPLE_TYPES = {
    SMALL: {
        type: 'maple',
        width: 100,
        height: 130,
        trunkHeight: 60,
        canopyRadius: 35,
        leafClusters: 5,
        canopyColor: '#33aa22',
        trunkColor: '#664422'
    },
    LARGE: {
        type: 'maple',
        width: 160,
        height: 200,
        trunkHeight: 85,
        canopyRadius: 55,
        leafClusters: 7,
        canopyColor: '#22aa22',
        trunkColor: '#553311'
    }
};

// Rock configurations
const ROCK_TYPES = {
    SMALL: {
        width: 40,
        height: 30,
        color: '#666',
        highlights: '#888'
    },
    MEDIUM: {
        width: 70,
        height: 45,
        color: '#555',
        highlights: '#777'
    },
    LARGE: {
        width: 100,
        height: 60,
        color: '#444',
        highlights: '#666'
    }
};

// Add grass configurations
const GRASS_TYPES = {
    TALL: {
        type: 'grass',
        width: 30,
        height: 40,
        blades: 5,
        color: '#33aa55',
        shadowColor: '#229944'
    },
    SHORT: {
        type: 'grass',
        width: 20,
        height: 25,
        blades: 4,
        color: '#33bb66',
        shadowColor: '#22aa55'
    },
    GOLDEN_TALL: {
        type: 'grass',
        width: 30,
        height: 40,
        blades: 5,
        color: '#eebb33',
        shadowColor: '#cc9922'
    },
    GOLDEN_SHORT: {
        type: 'grass',
        width: 20,
        height: 25,
        blades: 4,
        color: '#ffcc44',
        shadowColor: '#ddaa33'
    },
    BLUE_TALL: {
        type: 'grass',
        width: 30,
        height: 40,
        blades: 5,
        color: '#44aaff',
        shadowColor: '#2299ff',
        glowing: true
    },
    BLUE_SHORT: {
        type: 'grass',
        width: 20,
        height: 25,
        blades: 4,
        color: '#55bbff',
        shadowColor: '#33aaff',
        glowing: true
    }
};

// Create a world with platforms, trees, and rocks
const createWorld = () => {
    const world = {
        groundHeight: 12,
        // Separate arrays for different layers
        backgroundTrees: [
            // Far left trees
            {
                type: WORLD_OBJECTS.FIR_BACKGROUND,
                x: -1500,
                config: FIR_TYPES.LARGE
            },
            {
                type: WORLD_OBJECTS.MAPLE_BACKGROUND,
                x: -1200,
                config: MAPLE_TYPES.SMALL
            },
            {
                type: WORLD_OBJECTS.FIR_BACKGROUND,
                x: -900,
                config: FIR_TYPES.SMALL
            },
            // Existing trees
            {
                type: WORLD_OBJECTS.FIR_BACKGROUND,
                x: -400,
                config: FIR_TYPES.LARGE
            },
            {
                type: WORLD_OBJECTS.MAPLE_BACKGROUND,
                x: -250,
                config: MAPLE_TYPES.SMALL
            },
            {
                type: WORLD_OBJECTS.FIR_BACKGROUND,
                x: 50,
                config: FIR_TYPES.LARGE
            },
            {
                type: WORLD_OBJECTS.MAPLE_BACKGROUND,
                x: 250,
                config: MAPLE_TYPES.LARGE
            },
            {
                type: WORLD_OBJECTS.FIR_BACKGROUND,
                x: 500,
                config: FIR_TYPES.SMALL
            },
            {
                type: WORLD_OBJECTS.MAPLE_BACKGROUND,
                x: 650,
                config: MAPLE_TYPES.SMALL
            },
            {
                type: WORLD_OBJECTS.FIR_BACKGROUND,
                x: 900,
                config: FIR_TYPES.LARGE
            },
            {
                type: WORLD_OBJECTS.MAPLE_BACKGROUND,
                x: 1100,
                config: MAPLE_TYPES.LARGE
            },
            // Far right trees
            {
                type: WORLD_OBJECTS.MAPLE_BACKGROUND,
                x: 1400,
                config: MAPLE_TYPES.LARGE
            },
            {
                type: WORLD_OBJECTS.FIR_BACKGROUND,
                x: 1700,
                config: FIR_TYPES.SMALL
            },
            {
                type: WORLD_OBJECTS.MAPLE_BACKGROUND,
                x: 2000,
                config: MAPLE_TYPES.LARGE
            }
        ],
        backgroundRocks: [
            // Far left rocks
            {
                type: WORLD_OBJECTS.ROCK_BACKGROUND,
                x: -1300,
                config: ROCK_TYPES.LARGE
            },
            {
                type: WORLD_OBJECTS.ROCK_BACKGROUND,
                x: -1000,
                config: ROCK_TYPES.SMALL
            },
            {
                type: WORLD_OBJECTS.ROCK_BACKGROUND,
                x: -300,
                config: ROCK_TYPES.MEDIUM
            },
            {
                type: WORLD_OBJECTS.ROCK_BACKGROUND,
                x: -100,
                config: ROCK_TYPES.SMALL
            },
            {
                type: WORLD_OBJECTS.ROCK_BACKGROUND,
                x: 150,
                config: ROCK_TYPES.LARGE
            },
            {
                type: WORLD_OBJECTS.ROCK_BACKGROUND,
                x: 400,
                config: ROCK_TYPES.SMALL
            },
            {
                type: WORLD_OBJECTS.ROCK_BACKGROUND,
                x: 750,
                config: ROCK_TYPES.MEDIUM
            },
            {
                type: WORLD_OBJECTS.ROCK_BACKGROUND,
                x: 1000,
                config: ROCK_TYPES.SMALL
            },
            // Far right rocks
            {
                type: WORLD_OBJECTS.ROCK_BACKGROUND,
                x: 1600,
                config: ROCK_TYPES.MEDIUM
            },
            {
                type: WORLD_OBJECTS.ROCK_BACKGROUND,
                x: 1900,
                config: ROCK_TYPES.SMALL
            }
        ],
        platforms: [
            {
                type: WORLD_OBJECTS.PLATFORM,
                x: 300,
                y: 300,
                width: 200,
                height: 20,
                color: '#484'
            },
            {
                type: WORLD_OBJECTS.PLATFORM,
                x: 600,
                y: 200,
                width: 200,
                height: 20,
                color: '#484'
            },
            {
                type: WORLD_OBJECTS.PLATFORM,
                x: -200,
                y: 250,
                width: 200,
                height: 20,
                color: '#484'
            }
        ],
        foregroundTrees: [
            // Far left trees
            {
                type: WORLD_OBJECTS.FIR_FOREGROUND,
                x: -1400,
                config: FIR_TYPES.LARGE
            },
            {
                type: WORLD_OBJECTS.MAPLE_FOREGROUND,
                x: -1100,
                config: MAPLE_TYPES.SMALL
            },
            // Existing trees
            {
                type: WORLD_OBJECTS.MAPLE_FOREGROUND,
                x: -150,
                config: MAPLE_TYPES.SMALL
            },
            {
                type: WORLD_OBJECTS.FIR_FOREGROUND,
                x: 200,
                config: FIR_TYPES.SMALL
            },
            {
                type: WORLD_OBJECTS.MAPLE_FOREGROUND,
                x: 450,
                config: MAPLE_TYPES.LARGE
            },
            {
                type: WORLD_OBJECTS.FIR_FOREGROUND,
                x: 800,
                config: FIR_TYPES.LARGE
            },
            {
                type: WORLD_OBJECTS.MAPLE_FOREGROUND,
                x: 1200,
                config: MAPLE_TYPES.SMALL
            },
            // Far right trees
            {
                type: WORLD_OBJECTS.FIR_FOREGROUND,
                x: 1500,
                config: FIR_TYPES.LARGE
            },
            {
                type: WORLD_OBJECTS.MAPLE_FOREGROUND,
                x: 1800,
                config: MAPLE_TYPES.SMALL
            }
        ],
        foregroundRocks: [
            // Far left rocks
            {
                type: WORLD_OBJECTS.ROCK_FOREGROUND,
                x: -1000,
                config: ROCK_TYPES.MEDIUM
            },
            {
                type: WORLD_OBJECTS.ROCK_FOREGROUND,
                x: 0,
                config: ROCK_TYPES.SMALL
            },
            {
                type: WORLD_OBJECTS.ROCK_FOREGROUND,
                x: 300,
                config: ROCK_TYPES.MEDIUM
            },
            {
                type: WORLD_OBJECTS.ROCK_FOREGROUND,
                x: 700,
                config: ROCK_TYPES.SMALL
            },
            {
                type: WORLD_OBJECTS.ROCK_FOREGROUND,
                x: 950,
                config: ROCK_TYPES.LARGE
            },
            // Far right rocks
            {
                type: WORLD_OBJECTS.ROCK_FOREGROUND,
                x: 1500,
                config: ROCK_TYPES.LARGE
            }
        ],
        backgroundGrass: [
            // Far left grass
            { type: WORLD_OBJECTS.GRASS_BACKGROUND, x: -1400, config: GRASS_TYPES.BLUE_TALL },
            { type: WORLD_OBJECTS.GRASS_BACKGROUND, x: -1100, config: GRASS_TYPES.GOLDEN_SHORT },
            { type: WORLD_OBJECTS.GRASS_BACKGROUND, x: -950, config: GRASS_TYPES.TALL },
            { type: WORLD_OBJECTS.GRASS_BACKGROUND, x: -350, config: GRASS_TYPES.SHORT },
            { type: WORLD_OBJECTS.GRASS_BACKGROUND, x: -180, config: GRASS_TYPES.GOLDEN_TALL },
            { type: WORLD_OBJECTS.GRASS_BACKGROUND, x: 100, config: GRASS_TYPES.TALL },
            { type: WORLD_OBJECTS.GRASS_BACKGROUND, x: 320, config: GRASS_TYPES.BLUE_SHORT },
            { type: WORLD_OBJECTS.GRASS_BACKGROUND, x: 580, config: GRASS_TYPES.GOLDEN_SHORT },
            { type: WORLD_OBJECTS.GRASS_BACKGROUND, x: 750, config: GRASS_TYPES.BLUE_TALL },
            { type: WORLD_OBJECTS.GRASS_BACKGROUND, x: 950, config: GRASS_TYPES.TALL },
            { type: WORLD_OBJECTS.GRASS_BACKGROUND, x: 1050, config: GRASS_TYPES.GOLDEN_TALL },
            // Far right grass
            { type: WORLD_OBJECTS.GRASS_BACKGROUND, x: 1500, config: GRASS_TYPES.BLUE_SHORT },
            { type: WORLD_OBJECTS.GRASS_BACKGROUND, x: 1750, config: GRASS_TYPES.GOLDEN_TALL },
            { type: WORLD_OBJECTS.GRASS_BACKGROUND, x: 1850, config: GRASS_TYPES.SHORT }
        ],
        foregroundGrass: [
            // Far left grass
            { type: WORLD_OBJECTS.GRASS_FOREGROUND, x: -1250, config: GRASS_TYPES.TALL },
            { type: WORLD_OBJECTS.GRASS_FOREGROUND, x: -1050, config: GRASS_TYPES.BLUE_SHORT },
            { type: WORLD_OBJECTS.GRASS_FOREGROUND, x: -280, config: GRASS_TYPES.BLUE_TALL },
            { type: WORLD_OBJECTS.GRASS_FOREGROUND, x: -50, config: GRASS_TYPES.GOLDEN_SHORT },
            { type: WORLD_OBJECTS.GRASS_FOREGROUND, x: 150, config: GRASS_TYPES.TALL },
            { type: WORLD_OBJECTS.GRASS_FOREGROUND, x: 420, config: GRASS_TYPES.BLUE_SHORT },
            { type: WORLD_OBJECTS.GRASS_FOREGROUND, x: 680, config: GRASS_TYPES.GOLDEN_TALL },
            { type: WORLD_OBJECTS.GRASS_FOREGROUND, x: 880, config: GRASS_TYPES.SHORT },
            { type: WORLD_OBJECTS.GRASS_FOREGROUND, x: 1150, config: GRASS_TYPES.BLUE_TALL },
            // Far right grass
            { type: WORLD_OBJECTS.GRASS_FOREGROUND, x: 1650, config: GRASS_TYPES.GOLDEN_TALL },
            { type: WORLD_OBJECTS.GRASS_FOREGROUND, x: 1850, config: GRASS_TYPES.BLUE_SHORT }
        ],
        // Track grass animation states
        grassStates: {},
        // Add methods for quick spatial lookups
        getObjectsInView: function(bounds) {
            return {
                backgroundTrees: this.backgroundTrees.filter(tree => 
                    tree.x > bounds.left && tree.x < bounds.right
                ),
                // ... similar for other object types
            };
        }
    };
    
    return world;
};

// Add seededRandom function
const seededRandom = (x, y) => {
    const dot = x * 12.9898 + y * 78.233;
    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 = [
        '#442211', // Dark brown
        '#553322', // Medium dark brown
        '#443311', // Reddish dark brown
        '#332211', // Very dark brown
        '#554422', // 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;
    const { width, height, canopyOffset, trunkColor, canopyColor } = config;
    
    // Calculate trunk dimensions
    const trunkWidth = width/3;
    const trunkHeight = height - (height - canopyOffset)/2;
    
    // Draw trunk base
    ctx.fillStyle = trunkColor;
    ctx.fillRect(
        x - trunkWidth/2,
        groundY - trunkHeight,
        trunkWidth,
        trunkHeight
    );
    
    // Add trunk hatching
    addHatchingPattern(
        ctx,
        x,
        groundY,
        trunkWidth,
        trunkHeight,
        trunkColor
    );

    // Draw main triangular canopy
    ctx.fillStyle = canopyColor;
    ctx.beginPath();
    ctx.moveTo(x - width/2, groundY - canopyOffset);
    ctx.lineTo(x + width/2, groundY - canopyOffset);
    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 = [
        '#11aa33', // Darker forest green
        '#22bb44', // Medium forest green
        '#33cc55', // Bright forest green
        '#118844', // Deep sea green
        '#22aa66', // Sage green
        '#11bb55', // Deep pine
        '#229955', // Ocean green
        '#33bb66', // Fresh spring green
        '#117744', // 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 = 8; // Smaller spacing for more triangles
    const triangleSize = 8; // Slightly smaller triangles
    const margin = 8;
    
    // 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
const renderMapleTree = (ctx, tree, groundY) => {
    const { x, config } = tree;
    const { 
        width, height, trunkHeight, canopyRadius,
        leafClusters, trunkColor, canopyColor 
    } = config;
    
    // Draw trunk base
    const trunkWidth = width/4;
    ctx.fillStyle = trunkColor;
    ctx.fillRect(
        x - trunkWidth/2,
        groundY - trunkHeight,
        trunkWidth,
        trunkHeight
    );
    
    // Add trunk hatching
    addHatchingPattern(
        ctx,
        x,
        groundY,
        trunkWidth,
        trunkHeight,
        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);
        
        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();
                }
            }
        }
    };

    // 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
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;
    
    // Draw main rock shape (slightly irregular pentagon)
    ctx.fillStyle = color;
    ctx.beginPath();
    ctx.moveTo(x - width/2, groundY);
    ctx.lineTo(x - width/2 + width/6, groundY - height);
    ctx.lineTo(x + width/3, groundY - height);
    ctx.lineTo(x + width/2, groundY - height/2);
    ctx.lineTo(x + width/2, groundY);
    ctx.closePath();
    ctx.fill();

    // Add highlights
    ctx.fillStyle = highlights;
    ctx.beginPath();
    ctx.moveTo(x - width/4, groundY - height);
    ctx.lineTo(x, groundY - height);
    ctx.lineTo(x + width/6, groundY - height/2);
    ctx.lineTo(x - width/6, groundY - height/2);
    ctx.closePath();
    ctx.fill();
};

// Add grass rendering function
const renderGrass = (ctx, grass, groundY, time) => {
    const { x, config } = grass;
    const { width, height, blades, color, shadowColor, glowing } = config;
    
    // Get or initialize grass state
    const stateKey = `grass_${x}`;
    if (!window.gameState.world.grassStates[stateKey]) {
        window.gameState.world.grassStates[stateKey] = {
            rustleAmount: 0,
            rustleDecay: 0.95
        };
    }
    const state = window.gameState.world.grassStates[stateKey];
    
    // Check for player interaction
    const player = window.gameState.player;
    const interactionDistance = width;
    const distanceToPlayer = Math.abs(player.x + player.width/2 - x);
    
    if (distanceToPlayer < interactionDistance) {
        state.rustleAmount = Math.min(1, state.rustleAmount + 0.3);
    } else {
        state.rustleAmount *= state.rustleDecay;
    }

    // Add glow effect for blue grass
    if (glowing) {
        ctx.save();
        ctx.shadowColor = color;
        ctx.shadowBlur = 10 + Math.sin(time/500) * 3; // Pulsing glow effect
    }

    // Draw each blade of grass
    for (let i = 0; i < blades; i++) {
        const bladeX = x + (i - blades/2) * (width/blades);
        const bladeWidth = width / blades * 0.7;
        
        // Calculate blade curve based on rustle and time
        const rustleOffset = Math.sin(time/300 + i) * 5 * state.rustleAmount;
        const baseWave = Math.sin(time/1000 + i) * 2;
        
        // Draw blade
        ctx.fillStyle = i % 2 === 0 ? color : shadowColor;
        ctx.beginPath();
        ctx.moveTo(bladeX, groundY);
        
        // Control points for quadratic curve
        const cp1x = bladeX + rustleOffset + baseWave;
        const cp1y = groundY - height/2;
        const cp2x = bladeX + rustleOffset * 1.5 + baseWave;
        const cp2y = groundY - height;
        
        // Draw curved blade
        ctx.quadraticCurveTo(cp1x, cp1y, cp2x, cp2y);
        ctx.quadraticCurveTo(cp1x + bladeWidth, cp1y, bladeX + bladeWidth, groundY);
        ctx.fill();
    }

    if (glowing) {
        ctx.restore();
    }
};

// Collision detection helper
const checkCollision = (player, platform) => {
    return player.x < platform.x + platform.width &&
           player.x + player.width > platform.x &&
           player.y < platform.y + platform.height &&
           player.y + player.height > platform.y;
};

// World physics helper
const handleWorldCollisions = (player, world) => {
    let onGround = false;
    
    // Check ground collision first
    const groundY = window.innerHeight - world.groundHeight;
    if (player.y + player.height > groundY) {
        player.y = groundY - player.height;
        player.velocityY = 0;
        onGround = true;
    }
    
    // Then check platform collisions
    for (const platform of world.platforms) {
        if (checkCollision(player, platform)) {
            // Calculate overlap on each axis
            const overlapX = Math.min(
                player.x + player.width - platform.x,
                platform.x + platform.width - player.x
            );
            const overlapY = Math.min(
                player.y + player.height - platform.y,
                platform.y + platform.height - player.y
            );

            // Resolve collision on the axis with smallest overlap
            if (overlapX < overlapY) {
                // Horizontal collision
                if (player.x < platform.x) {
                    player.x = platform.x - player.width;
                } else {
                    player.x = platform.x + platform.width;
                }
                player.velocityX = 0;
            } else {
                // Vertical collision
                if (player.y < platform.y) {
                    player.y = platform.y - player.height;
                    player.velocityY = 0;
                    onGround = true;
                } else {
                    player.y = platform.y + platform.height;
                    player.velocityY = 0;
                }
            }
        }
    }
    
    return { ...player, jumping: !onGround };
};