feat: Enhance terrain generation with new types and drawing mechanics

events.js

@@ -7,9 +7,12 @@ let lastMouseWorldY = null;
  **********************************************************************/
 function setupPanZoom() {
   canvas.addEventListener('mousedown', (e) => {
-    isDragging = true;
-    lastMouseX = e.clientX;
-    lastMouseY = e.clientY;
+    // Only start dragging if not in terrain drawing mode
+    if(!purchaseMode || !purchaseMode.startsWith('Draw')) {
+      isDragging = true;
+      lastMouseX = e.clientX;
+      lastMouseY = e.clientY;
+    }
   });
   
   canvas.addEventListener('mouseup', () => { isDragging = false; });
@@ -118,6 +121,32 @@ function setupBuyButtons() {
     logAction("Click on map to place a new Tree.");
   });
   
+  // Terrain drawing buttons
+  document.getElementById('drawWaterBtn').addEventListener('click', () => {
+    purchaseMode = "DrawWater";
+    logAction("Click and drag on map to draw Water ($20).");
+  });
+  
+  document.getElementById('drawGrassBtn').addEventListener('click', () => {
+    purchaseMode = "DrawGrass";
+    logAction("Click and drag on map to draw Grass ($10).");
+  });
+  
+  document.getElementById('drawSandBtn').addEventListener('click', () => {
+    purchaseMode = "DrawSand";
+    logAction("Click and drag on map to draw Sand ($15).");
+  });
+  
+  document.getElementById('drawDirtBtn').addEventListener('click', () => {
+    purchaseMode = "DrawDirt";
+    logAction("Click and drag on map to draw Dirt ($5).");
+  });
+  
+  document.getElementById('drawStoneBtn').addEventListener('click', () => {
+    purchaseMode = "DrawStone";
+    logAction("Click and drag on map to draw Stone ($25).");
+  });
+  
   document.getElementById('toggleLogsBtn').addEventListener('click', (e) => {
     if(logContainer.style.display === "none") {
       logContainer.style.display = "block";
@@ -129,9 +158,108 @@ function setupBuyButtons() {
   });
 }
 
+// Variables for terrain drawing
+let isDrawingTerrain = false;
+let lastDrawX = null;
+let lastDrawY = null;
+let terrainDrawCost = 0;
+let terrainDrawType = null;
+let terrainDrawCount = 0;
+
 function setupCanvasClick() {
+  // Mouse down for terrain drawing
+  canvas.addEventListener('mousedown', (e) => {
+    if(!purchaseMode || !purchaseMode.startsWith('Draw')) return;
+    
+    const rect = canvas.getBoundingClientRect();
+    let cx = e.clientX - rect.left;
+    let cy = e.clientY - rect.top;
+    let worldX = (cx - (canvas.width/2) - offsetX) / scale;
+    let worldY = (cy - (canvas.height/2) - offsetY) / scale;
+    
+    isDrawingTerrain = true;
+    lastDrawX = worldX;
+    lastDrawY = worldY;
+    terrainDrawCount = 0;
+    
+    // Set terrain type and cost based on mode
+    switch(purchaseMode) {
+      case "DrawWater":
+        terrainDrawType = TERRAIN_WATER;
+        terrainDrawCost = COST_WATER;
+        break;
+      case "DrawGrass":
+        terrainDrawType = TERRAIN_GRASS;
+        terrainDrawCost = COST_GRASS;
+        break;
+      case "DrawSand":
+        terrainDrawType = TERRAIN_SAND;
+        terrainDrawCost = COST_SAND;
+        break;
+      case "DrawDirt":
+        terrainDrawType = TERRAIN_DIRT;
+        terrainDrawCost = COST_DIRT;
+        break;
+      case "DrawStone":
+        terrainDrawType = TERRAIN_STONE;
+        terrainDrawCost = COST_STONE;
+        break;
+    }
+  });
+  
+  // Mouse move for terrain drawing
+  canvas.addEventListener('mousemove', (e) => {
+    if(isDrawingTerrain && terrainDrawType !== null) {
+      const rect = canvas.getBoundingClientRect();
+      let cx = e.clientX - rect.left;
+      let cy = e.clientY - rect.top;
+      let worldX = (cx - (canvas.width/2) - offsetX) / scale;
+      let worldY = (cy - (canvas.height/2) - offsetY) / scale;
+      
+      // Only draw if moved enough distance
+      if(Math.abs(worldX - lastDrawX) > 5 || Math.abs(worldY - lastDrawY) > 5) {
+        // Check if we can afford it
+        if(money >= terrainDrawCost) {
+          // Draw a 3x3 area of terrain
+          for(let dx = -1; dx <= 1; dx++) {
+            for(let dy = -1; dy <= 1; dy++) {
+              setTerrainType(worldX + dx * 10, worldY + dy * 10, terrainDrawType);
+            }
+          }
+          
+          addMoney(-terrainDrawCost, `Draw ${getTerrainName(terrainDrawType)}`);
+          terrainDrawCount++;
+          
+          lastDrawX = worldX;
+          lastDrawY = worldY;
+        } else {
+          // Stop drawing if out of money
+          isDrawingTerrain = false;
+          logAction("Not enough money to continue drawing terrain!");
+        }
+      }
+    }
+  });
+  
+  // Mouse up to stop terrain drawing
+  canvas.addEventListener('mouseup', () => {
+    if(isDrawingTerrain) {
+      isDrawingTerrain = false;
+      if(terrainDrawCount > 0) {
+        logAction(`Drew ${terrainDrawCount} patches of ${getTerrainName(terrainDrawType)}.`);
+      }
+      terrainDrawType = null;
+    }
+  });
+  
+  // Mouse leave to stop terrain drawing
+  canvas.addEventListener('mouseleave', () => {
+    isDrawingTerrain = false;
+    terrainDrawType = null;
+  });
+
   canvas.addEventListener('click', (e) => {
-    if(!purchaseMode) return;
+    if(!purchaseMode || purchaseMode.startsWith('Draw')) return;
     const rect = canvas.getBoundingClientRect();
     let cx = e.clientX - rect.left;
     let cy = e.clientY - rect.top;