Update script.js

ui/views/CommonwealthOnline/pause-menu/script.js

@@ -114,16 +114,72 @@
   var mapLayer = document.querySelector(".map-layer");
 
   if (pauseScreen && mapLayer) {
-    var MIN_ZOOM = 1;
     var MAX_ZOOM = 4;
     var ZOOM_STEP = 0.18;
-    var zoom = MIN_ZOOM;
+    var zoom = 1;
+    var MIN_ZOOM = 1; // Will be recalculated after map loads
     var panX = 0;
     var panY = 0;
     var isDragging = false;
     var lastX = 0;
     var lastY = 0;
 
+    // Load the map image to measure its intrinsic dimensions, so we can
+    // calculate the actual rendered bounds with background-size: contain
+    // and set the dynamic MIN_ZOOM to prevent seeing past edges.
+    var mapImg = new Image();
+    var mapNaturalWidth = 1024;
+    var mapNaturalHeight = 768;
+    var mapDisplayWidth = 1024;
+    var mapDisplayHeight = 768;
+
+    mapImg.onload = function () {
+      mapNaturalWidth = mapImg.naturalWidth;
+      mapNaturalHeight = mapImg.naturalHeight;
+      updateMapDisplayBounds();
+    };
+    mapImg.src = "assets/map.png";
+
+    function updateMapDisplayBounds() {
+      // Given the map's intrinsic size and the viewport size, calculate where
+      // the map actually renders with background-size: contain.
+      var viewportWidth = window.innerWidth;
+      var viewportHeight = window.innerHeight;
+      var mapAspect = mapNaturalWidth / mapNaturalHeight;
+      var viewportAspect = viewportWidth / viewportHeight;
+
+      if (mapAspect > viewportAspect) {
+        // Map is wider: fit by width
+        mapDisplayWidth = viewportWidth;
+        mapDisplayHeight = viewportWidth / mapAspect;
+      } else {
+        // Map is taller: fit by height
+        mapDisplayHeight = viewportHeight;
+        mapDisplayWidth = viewportHeight * mapAspect;
+      }
+
+      // Calculate dynamic MIN_ZOOM so that even at full zoom-out, the map
+      // fills the viewport and you can't see past the edges.
+      // At zoom level Z, the map renders at (mapDisplayWidth * Z) x (mapDisplayHeight * Z).
+      // To fill the viewport: Z >= max(viewportWidth / mapDisplayWidth, viewportHeight / mapDisplayHeight)
+      MIN_ZOOM = Math.max(
+        viewportWidth / mapDisplayWidth,
+        viewportHeight / mapDisplayHeight
+      );
+
+      // If already zoomed in below the new MIN_ZOOM (shouldn't happen on init),
+      // snap back to MIN_ZOOM.
+      if (zoom < MIN_ZOOM) {
+        zoom = MIN_ZOOM;
+        panX = 0;
+        panY = 0;
+        applyMapTransform();
+      }
+    }
+
+    updateMapDisplayBounds();
+    window.addEventListener("resize", updateMapDisplayBounds);
+
     function applyMapTransform() {
       pauseScreen.style.setProperty("--map-zoom", String(zoom));
       pauseScreen.style.setProperty("--map-pan-x", panX + "px");
@@ -131,10 +187,20 @@
     }
 
     function clampPan() {
-      var maxOffsetX = ((zoom - 1) * window.innerWidth) / 2;
+      // At the current zoom level, the map renders at (mapDisplayWidth * zoom) x (mapDisplayHeight * zoom).
-      var maxOffsetY = ((zoom - 1) * window.innerHeight) / 2;
+      // The viewport is window.innerWidth x window.innerHeight. Pan offsets are clamped so that the
-      panX = Math.max(-maxOffsetX, Math.min(maxOffsetX, panX));
+      // map's edges never go beyond the viewport edges.
-      panY = Math.max(-maxOffsetY, Math.min(maxOffsetY, panY));
+      var zoomedMapWidth = mapDisplayWidth * zoom;
+      var zoomedMapHeight = mapDisplayHeight * zoom;
+      var viewportWidth = window.innerWidth;
+      var viewportHeight = window.innerHeight;
+
+      // If the zoomed map is smaller than the viewport, no panning is allowed.
+      var maxPanX = Math.max(0, (zoomedMapWidth - viewportWidth) / 2);
+      var maxPanY = Math.max(0, (zoomedMapHeight - viewportHeight) / 2);
+
+      panX = Math.max(-maxPanX, Math.min(maxPanX, panX));
+      panY = Math.max(-maxPanY, Math.min(maxPanY, panY));
     }
 
     mapLayer.addEventListener(