Improve MineGeo UI and application flows

components/GuessMap.tsx

@@ -15,6 +15,8 @@ export function GuessMap({
   onReady,
   onError,
   disabled = false,
+  zoom = true,
+  compass = true,
 }: {
   bounds: Bounds;
   image: string;
@@ -24,6 +26,8 @@ export function GuessMap({
   onReady?: () => void;
   onError?: (message: string) => void;
   disabled?: boolean;
+  zoom?: boolean;
+  compass?: boolean;
 }) {
   const { t } = useI18n();
   const root = useRef<HTMLDivElement>(null),
@@ -60,10 +64,15 @@ export function GuessMap({
           maxBounds: b.pad(0.15),
           attributionControl: false,
           zoomControl: false,
+          scrollWheelZoom: zoom,
+          touchZoom: zoom,
+          doubleClickZoom: zoom,
+          boxZoom: zoom,
         });
-        L.control
-          .zoom({ zoomInTitle: t("Zoom in"), zoomOutTitle: t("Zoom out") })
-          .addTo(m);
+        if (zoom)
+          L.control
+            .zoom({ zoomInTitle: t("Zoom in"), zoomOutTitle: t("Zoom out") })
+            .addTo(m);
         // Install cleanup immediately, including when later initialization fails.
         let observer: ResizeObserver | undefined;
         cleanup = () => {
@@ -94,6 +103,7 @@ export function GuessMap({
         m.fitBounds(b, { padding: [0, 0], animate: false });
         const fitZoom = m.getZoom();
         m.setMinZoom(fitZoom);
+        if (!zoom) m.setMaxZoom(fitZoom);
         markers.current = L.layerGroup().addTo(m);
         setGeneration((v) => v + 1);
         m.on("click", (e: Leaflet.LeafletMouseEvent) => {
@@ -136,11 +146,14 @@ export function GuessMap({
           const wasFitted = Math.abs(m.getZoom() - fittedZoom) < 0.01;
           m.invalidateSize({ pan: false });
           m.setMinZoom(-5);
+          // Unlock only while refitting a resized fixed-zoom map.
+          if (!zoom) m.setMaxZoom(Infinity);
           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);
+          if (!zoom) m.setMaxZoom(fittedZoom);
         });
         observer.observe(root.current);
       })
@@ -150,7 +163,15 @@ export function GuessMap({
       clearTimeout(loadTimer);
       cleanup();
     };
-  }, [bounds.minX, bounds.maxX, bounds.minZ, bounds.maxZ, image, attempt]);
+  }, [
+    bounds.minX,
+    bounds.maxX,
+    bounds.minZ,
+    bounds.maxZ,
+    image,
+    attempt,
+    zoom,
+  ]);
   useEffect(() => {
     const L = lib.current,
       group = markers.current;
@@ -183,11 +204,15 @@ export function GuessMap({
         style={{ height: "100%", width: "100%" }}
         role="application"
         aria-label={
-          disabled
-            ? t("Minecraft map. North is up.")
-            : t(
-                "Minecraft map. North is up. Click to place a guess, or use arrow keys to pan and Enter to pin the center.",
+          !compass
+            ? t(
+                "Minecraft map. Click to place a guess, or use arrow keys to pan and Enter to pin the center.",
               )
+            : disabled
+              ? t("Minecraft map. North is up.")
+              : t(
+                  "Minecraft map. North is up. Click to place a guess, or use arrow keys to pan and Enter to pin the center.",
+                )
         }
       />
       {error && (