*

1 files changed, 108 insertions, 4 deletions

diff --git a/html/rogue/js/world.js b/html/rogue/js/world.js
index bc246eb..c416c91 100644
--- a/html/rogue/js/world.js
+++ b/html/rogue/js/world.js
@@ -135,6 +135,23 @@ const createWorld = () => ({
     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,
@@ -174,9 +191,36 @@ const createWorld = () => ({
             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,
@@ -206,6 +250,17 @@ const createWorld = () => ({
             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: [
@@ -235,6 +290,18 @@ const createWorld = () => ({
         }
     ],
     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,
@@ -259,9 +326,26 @@ const createWorld = () => ({
             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,
@@ -281,9 +365,19 @@ const createWorld = () => ({
             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 },
@@ -291,16 +385,26 @@ const createWorld = () => ({
         { 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 }
+        { 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 }
+        { 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: {}
@@ -441,9 +545,9 @@ const renderFirTree = (ctx, tree, groundY) => {
     });
 
     // Add triangle pattern texture
-    const spacing = 12; // Smaller spacing for more triangles
+    const spacing = 8; // Smaller spacing for more triangles
     const triangleSize = 8; // Slightly smaller triangles
-    const margin = 5;
+    const margin = 8;
     
     // Calculate bounds for the pattern
     const bounds = {