fix(cockpit): a place pack that will not load ends the loading batch failed; flags keep their neighbours out from under the border and out of a scaled flag's edge; a new ride asks again for a sheet that failed

scripts/build-owner-flags.mjs

@@ -9,7 +9,7 @@
  *   src/ui/ownerFlagSheet.js                           its layout (generated)
  *
  * Flag i (in the sorted code list) sits at column i % COLUMNS, row
- * floor(i / COLUMNS). A rerun with the same flag-icons and sharp versions
+ * floor(i / COLUMNS), each cell followed by a GUTTER of transparent pixels. A rerun with the same flag-icons and sharp versions
  * reproduces both files.
  *
  * Usage: node scripts/build-owner-flags.mjs
@@ -33,6 +33,11 @@ const FLAG_ICONS_VERSION = require('flag-icons/package.json').version;
 
 /** One flag's cell, CSS pixels × 2. */
 export const CELL = Object.freeze({ width: 40, height: 30 });
+/**
+ * Transparent sheet pixels after each flag, so a browser smoothing a scaled
+ * flag (a 125% display) never reaches into its neighbour.
+ */
+export const GUTTER = 2;
 export const COLUMNS = 16;
 
 const SHEET = path.join(
@@ -51,11 +56,13 @@ async function flagCell(code) {
 
 const codes = [...OWNER_COUNTRY_CODES];
 const rows = Math.ceil(codes.length / COLUMNS);
+const pitchX = CELL.width + GUTTER;
+const pitchY = CELL.height + GUTTER;
 const cells = await Promise.all(codes.map(flagCell));
 const sheet = await sharp({
   create: {
-    width: COLUMNS * CELL.width,
-    height: rows * CELL.height,
+    width: COLUMNS * pitchX,
+    height: rows * pitchY,
     channels: 4,
     background: { r: 0, g: 0, b: 0, alpha: 0 },
   },
@@ -63,8 +70,8 @@ const sheet = await sharp({
   .composite(
     cells.map((input, i) => ({
       input,
-      left: (i % COLUMNS) * CELL.width,
-      top: Math.floor(i / COLUMNS) * CELL.height,
+      left: (i % COLUMNS) * pitchX,
+      top: Math.floor(i / COLUMNS) * pitchY,
     })),
   )
   .png({ compressionLevel: 9, palette: true, quality: 100, effort: 10 })
@@ -76,6 +83,7 @@ const layout = `// Generated by scripts/build-owner-flags.mjs from flag-icons ${
 export const OWNER_FLAG_SHEET = Object.freeze({
   cellWidthPx: ${CELL.width},
   cellHeightPx: ${CELL.height},
+  gutterPx: ${GUTTER},
   columns: ${COLUMNS},
   rows: ${rows},
   codes: Object.freeze(${JSON.stringify(codes)}),

scripts/format-scope.json

@@ -1366,5 +1366,7 @@
   "server/providers/inaturalist/proxy.fixture.mjs",
   "scripts/build-owner-flags.mjs",
   "src/ui/ownerFlagSheet.js",
-  "src/data/placePacksLoading.test.mjs"
+  "src/data/placePacksLoading.test.mjs",
+  "src/ui/placePacksLoading.js",
+  "src/ui/placePacksLoading.test.mjs"
 ]

scripts/package-boundaries.json

@@ -1069,6 +1069,7 @@
       "src/cockpitOrbitalSatellites.js",
       "src/layers/installations/classLabel.js",
       "src/data/placeBelow.js",
+      "src/ui/placePacksLoading.js",
       "src/ui/ownerFlag.js",
       "src/ui/ownerFlagSheet.js",
       "src/layers/satellites/sensors.js",
@@ -2916,6 +2917,7 @@
       "src/ui/cockpitOrbitalSatellites.js",
       "src/cockpitOrbitalSatellites.js",
       "src/data/placeBelow.js",
+      "src/ui/placePacksLoading.js",
       "src/ui/ownerFlag.js",
       "src/ui/ownerFlagSheet.js",
       "src/ui/cockpitContext.js",