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);

terrain.js

@@ -109,7 +109,8 @@ function generateTerrain(width, height, scale) {
       value /= 1.75; // Normalize
       
       // Determine terrain type based on noise value
-      if (value < -0.2) {
+      // Increase water threshold to create more water areas
+      if (value < 0.0) {
         terrain[x][y] = TERRAIN_WATER;
       } else {
         terrain[x][y] = TERRAIN_GRASS;
@@ -122,8 +123,8 @@ function generateTerrain(width, height, scale) {
 // Check if a position is in water
 function isWater(x, y) {
   // Convert world coordinates to terrain grid coordinates
-  const gridX = Math.floor((x + 2000) / 10) + 100;
-  const gridY = Math.floor((y + 2000) / 10) + 100;
+  const gridX = Math.floor((x + 2000) / 10);
+  const gridY = Math.floor((y + 2000) / 10);
   
   // Check bounds
   if (gridX < 0 || gridX >= terrainWidth || gridY < 0 || gridY >= terrainHeight) {
@@ -134,9 +135,9 @@ function isWater(x, y) {
 }
 
 // Terrain dimensions
-const terrainWidth = 500;
-const terrainHeight = 500;
-const terrainScale = 100;
+const terrainWidth = 400;
+const terrainHeight = 400;
+const terrainScale = 50; // Smaller scale = more detailed terrain
 
 // Initialize Perlin noise
 const perlin = new Perlin();