feat: Add terrain rendering with water and grass generation

render.js

@@ -3,6 +3,10 @@
  **********************************************************************/
 function drawWorld() {
   ctx.clearRect(0, 0, canvas.width, canvas.height);
+  
+  // Draw terrain first (water and grass)
+  drawTerrain();
+  
   drawGrid();
 
   // resources
@@ -29,6 +33,38 @@ function drawWorld() {
   });
 }
 
+function drawTerrain() {
+  ctx.save();
+  ctx.translate(canvas.width/2 + offsetX, canvas.height/2 + offsetY);
+  ctx.scale(scale, scale);
+  
+  // Calculate visible area based on canvas size and scale
+  const visibleWidth = canvas.width / scale;
+  const visibleHeight = canvas.height / scale;
+  const startX = Math.floor((-offsetX / scale) - (visibleWidth / 2));
+  const startY = Math.floor((-offsetY / scale) - (visibleHeight / 2));
+  const endX = Math.ceil(startX + visibleWidth);
+  const endY = Math.ceil(startY + visibleHeight);
+  
+  // Draw terrain cells
+  const cellSize = 10; // Size of each terrain cell
+  
+  for (let x = startX; x <= endX; x += cellSize) {
+    for (let y = startY; y <= endY; y += cellSize) {
+      // Check if this position is water
+      if (isWater(x, y)) {
+        ctx.fillStyle = "rgba(0, 100, 255, 0.5)"; // Blue for water
+        ctx.fillRect(x, y, cellSize, cellSize);
+      } else {
+        ctx.fillStyle = "rgba(100, 200, 100, 0.3)"; // Green for grass
+        ctx.fillRect(x, y, cellSize, cellSize);
+      }
+    }
+  }
+  
+  ctx.restore();
+}
+
 function drawGrid() {
   ctx.save();
   ctx.translate(canvas.width/2 + offsetX, canvas.height/2 + offsetY);