Render surface maps directly and preserve their quality

components/GuessMap.tsx

@@ -44,6 +44,7 @@ export function GuessMap({
           crs: L.CRS.Simple,
           minZoom: -5,
           maxZoom: 3,
+          zoomSnap: 0,
           maxBounds: b.pad(0.15),
           attributionControl: false,
         });
@@ -55,7 +56,10 @@ export function GuessMap({
           ),
         );
         overlay.addTo(m);
-        m.fitBounds(b, { padding: [5, 5] });
+        m.setMaxZoom(Math.max(3, m.getBoundsZoom(b) + 3));
+        m.fitBounds(b, { padding: [0, 0], animate: false });
+        const fitZoom = m.getZoom();
+        m.setMinZoom(fitZoom);
         markers.current = L.layerGroup().addTo(m);
         setGeneration((v) => v + 1);
         m.on("click", (e: Leaflet.LeafletMouseEvent) => {
@@ -70,7 +74,19 @@ export function GuessMap({
           )
             callbacks.current.onPin?.({ x, z });
         });
-        const observer = new ResizeObserver(() => m.invalidateSize());
+        let fittedZoom = fitZoom;
+        const observer = new ResizeObserver(() => {
+          // Expanding the map should reveal the whole survey at its new size.
+          // Preserve a player's chosen zoom and center while inspecting terrain.
+          const wasFitted = Math.abs(m.getZoom() - fittedZoom) < 0.01;
+          m.invalidateSize();
+          m.setMinZoom(-5);
+          fittedZoom = m.getBoundsZoom(b);
+          m.setMaxZoom(Math.max(3, fittedZoom + 3));
+          if (wasFitted || m.getZoom() < fittedZoom)
+            m.fitBounds(b, { padding: [0, 0], animate: false });
+          m.setMinZoom(fittedZoom);
+        });
         observer.observe(root.current);
         cleanup = () => {
           observer.disconnect();
@@ -85,7 +101,7 @@ export function GuessMap({
       disposed = true;
       cleanup();
     };
-  }, [bounds, image]);
+  }, [bounds.minX, bounds.maxX, bounds.minZ, bounds.maxZ, image]);
   useEffect(() => {
     const L = lib.current,
       group = markers.current;