Grid to editor

editor/client/public/map/map.js

@@ -146,6 +146,7 @@
 
   let mapRenderer = null;
   let terrainMesh = null;
+  let gridLinesMesh = null;
   let terrainTexturePromise = null;
   let modelIndex = null;
   let neighborChunks = [];
@@ -496,7 +497,7 @@
         const sy = (ChunkTerrain.CHUNK_HEIGHT - 1 - y) * cell;
         ctx.fillStyle = SHAPE_COLORS[type] || "#15171b";
         ctx.fillRect(x * cell, sy, cell, cell);
-        ctx.strokeStyle = "rgba(255, 255, 255, 0.08)";
+        ctx.strokeStyle = "rgba(255, 255, 255, 0.25)";
         ctx.strokeRect(x * cell, sy, cell, cell);
 
         const dir = SHAPE_DIRECTIONS[type];
@@ -599,6 +600,9 @@
   function rebuildTerrainMesh() {
     const floats = ChunkTerrain.buildTerrainVerts(tiles);
     terrainMesh = floats.length ? mapRenderer.createMesh(floats) : null;
+
+    const lineFloats = ChunkTerrain.buildGridLines(tiles);
+    gridLinesMesh = lineFloats.length ? mapRenderer.createMesh(lineFloats) : null;
   }
 
   // Keeps the preview canvas's backing-store resolution matched to its
@@ -649,6 +653,7 @@
       target: [ChunkTerrain.CHUNK_WIDTH / 2, ChunkTerrain.CHUNK_HEIGHT / 2, zLevelHeight],
       worldH: zoomWorldH,
       terrain: terrainMesh ? { mesh: terrainMesh, texture: terrainTexture } : null,
+      gridLines: gridLinesMesh ? { mesh: gridLinesMesh } : null,
       models,
       neighbors,
       highlight: hoverTile ? { x: hoverTile.x, y: hoverTile.y, z: zLevelHeight } : null,

editor/client/public/map/renderer.js

@@ -221,6 +221,7 @@ const MapRenderer = (() => {
     // scene = {
     //   target: [x, y, z], worldH: number,
     //   terrain: { mesh, texture } | null,
+    //   gridLines: { mesh } | null,
     //   models: [{ mesh, texture, color: [r,g,b,a in 0..1], offset: [x,y,z] }],
     //   neighbors: [{
     //     offset: [x,y,z],
@@ -248,6 +249,10 @@ const MapRenderer = (() => {
         drawMesh(scene.terrain.mesh, identity, scene.terrain.texture, [1, 1, 1, 1], true);
       }
 
+      if(scene.gridLines) {
+        drawMesh(scene.gridLines.mesh, identity, null, [0, 0, 0, 0.35], false, gl.LINES);
+      }
+
       for(const model of scene.models) {
         const modelMatrix = mat4Translation(new Float32Array(16), model.offset);
         drawMesh(model.mesh, modelMatrix, model.texture, model.color, true);