Add Void difficulty and publish changelogs

components/GuessMap.tsx

@@ -16,6 +16,7 @@ export function GuessMap({
   onError,
   disabled = false,
   zoom = true,
+  pan = true,
   compass = true,
 }: {
   bounds: Bounds;
@@ -27,6 +28,7 @@ export function GuessMap({
   onError?: (message: string) => void;
   disabled?: boolean;
   zoom?: boolean;
+  pan?: boolean;
   compass?: boolean;
 }) {
   const { t } = useI18n();
@@ -68,11 +70,16 @@ export function GuessMap({
           touchZoom: zoom,
           doubleClickZoom: zoom,
           boxZoom: zoom,
+          dragging: pan,
+          keyboard: false,
         });
         if (zoom)
           L.control
             .zoom({ zoomInTitle: t("Zoom in"), zoomOutTitle: t("Zoom out") })
             .addTo(m);
+        // Leaflet's keyboard handler couples panning and +/- zoom. Gate them
+        // separately so a fixed map cannot be moved or zoomed by keyboard.
+        if (pan && zoom) m.keyboard.enable();
         // Install cleanup immediately, including when later initialization fails.
         let observer: ResizeObserver | undefined;
         cleanup = () => {
@@ -119,6 +126,29 @@ export function GuessMap({
             callbacks.current.onPin?.({ x, z });
         });
         const keydown = (event: KeyboardEvent) => {
+          if (
+            event.target === m.getContainer() &&
+            pan &&
+            !zoom &&
+            ["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"].includes(
+              event.key,
+            )
+          ) {
+            event.preventDefault();
+            m.panBy([
+              event.key === "ArrowLeft"
+                ? -80
+                : event.key === "ArrowRight"
+                  ? 80
+                  : 0,
+              event.key === "ArrowUp"
+                ? -80
+                : event.key === "ArrowDown"
+                  ? 80
+                  : 0,
+            ]);
+            return;
+          }
           if (
             event.key !== "Enter" ||
             event.target !== m.getContainer() ||
@@ -171,6 +201,7 @@ export function GuessMap({
     image,
     attempt,
     zoom,
+    pan,
   ]);
   useEffect(() => {
     const L = lib.current,
@@ -204,15 +235,19 @@ export function GuessMap({
         style={{ height: "100%", width: "100%" }}
         role="application"
         aria-label={
-          !compass
+          !pan
             ? t(
-                "Minecraft map. Click to place a guess, or use arrow keys to pan and Enter to pin the center.",
+                "Minecraft map. Click to place a guess, or press 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.",
+            : !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 && (