Merge pull request #44 from accius/Modular-Staging

maybe created a nightmare

src/components/WorldMap.jsx

@@ -51,6 +51,7 @@ export const WorldMap = ({
   const satMarkersRef = useRef([]);
   const satTracksRef = useRef([]);
   const pskMarkersRef = useRef([]);
+  const countriesLayerRef = useRef(null);
 
   // Plugin system refs and state
   const pluginLayersRef = useRef({});
@@ -179,6 +180,82 @@ export const WorldMap = ({
     }
   }, [mapStyle]);
 
+  // Countries overlay for "Countries" map style
+  useEffect(() => {
+    if (!mapInstanceRef.current) return;
+    const map = mapInstanceRef.current;
+    
+    // Remove existing countries layer
+    if (countriesLayerRef.current) {
+      map.removeLayer(countriesLayerRef.current);
+      countriesLayerRef.current = null;
+    }
+    
+    // Only add overlay for countries style
+    if (!MAP_STYLES[mapStyle]?.countriesOverlay) return;
+    
+    // Bright distinct colors for countries (designed for maximum contrast between neighbors)
+    const COLORS = [
+      '#e6194b', '#3cb44b', '#4363d8', '#f58231', '#911eb4',
+      '#42d4f4', '#f032e6', '#bfef45', '#fabed4', '#469990',
+      '#dcbeff', '#9A6324', '#800000', '#aaffc3', '#808000',
+      '#000075', '#e6beff', '#ff6961', '#77dd77', '#fdfd96',
+      '#84b6f4', '#fdcae1', '#c1e1c1', '#b39eb5', '#ffb347'
+    ];
+    
+    // Simple string hash for consistent color assignment
+    const hashColor = (str) => {
+      let hash = 0;
+      for (let i = 0; i < str.length; i++) {
+        hash = ((hash << 5) - hash) + str.charCodeAt(i);
+        hash |= 0;
+      }
+      return COLORS[Math.abs(hash) % COLORS.length];
+    };
+    
+    // Fetch world countries GeoJSON (Natural Earth 110m simplified, ~240KB)
+    fetch('https://cdn.jsdelivr.net/gh/johan/world.geo.json@master/countries.geo.json')
+      .then(res => {
+        if (!res.ok) throw new Error(`HTTP ${res.status}`);
+        return res.json();
+      })
+      .then(geojson => {
+        if (!mapInstanceRef.current) return;
+        
+        countriesLayerRef.current = L.geoJSON(geojson, {
+          style: (feature) => {
+            const name = feature.properties?.name || feature.id || 'Unknown';
+            return {
+              fillColor: hashColor(name),
+              fillOpacity: 0.65,
+              color: '#fff',
+              weight: 1,
+              opacity: 0.8
+            };
+          },
+          onEachFeature: (feature, layer) => {
+            const name = feature.properties?.name || 'Unknown';
+            layer.bindTooltip(name, {
+              sticky: true,
+              className: 'country-tooltip',
+              direction: 'top',
+              offset: [0, -5]
+            });
+          }
+        }).addTo(map);
+        
+        // Ensure countries layer is below markers but above tiles
+        countriesLayerRef.current.bringToBack();
+        // Put tile layer behind countries
+        if (tileLayerRef.current) tileLayerRef.current.bringToBack();
+        // Terminator on top
+        if (terminatorRef.current) terminatorRef.current.bringToFront();
+      })
+      .catch(err => {
+        console.warn('Could not load countries GeoJSON:', err);
+      });
+  }, [mapStyle]);
+
   // Update DE/DX markers and celestial bodies
   useEffect(() => {
     if (!mapInstanceRef.current) return;

src/styles/main.css

@@ -381,6 +381,25 @@ body::before {
   color: var(--text-secondary) !important;
 }
 
+/* ============================================
+   COUNTRY TOOLTIP STYLES
+   ============================================ */
+.country-tooltip {
+  background: rgba(10, 14, 20, 0.9) !important;
+  color: #fff !important;
+  border: 1px solid rgba(255, 255, 255, 0.3) !important;
+  border-radius: 4px !important;
+  padding: 4px 8px !important;
+  font-family: 'JetBrains Mono', monospace !important;
+  font-size: 12px !important;
+  font-weight: 600 !important;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4) !important;
+}
+
+.country-tooltip::before {
+  border-top-color: rgba(10, 14, 20, 0.9) !important;
+}
+
 /* ============================================
    CUSTOM MARKER STYLES
    ============================================ */

src/utils/config.js

@@ -197,6 +197,12 @@ export const MAP_STYLES = {
     name: 'Nat Geo',
     url: 'https://server.arcgisonline.com/ArcGIS/rest/services/NatGeo_World_Map/MapServer/tile/{z}/{y}/{x}',
     attribution: '© Esri, National Geographic'
+  },
+  countries: {
+    name: 'Countries',
+    url: 'https://server.arcgisonline.com/ArcGIS/rest/services/Canvas/World_Light_Gray_Base/MapServer/tile/{z}/{y}/{x}',
+    attribution: '© Esri, Natural Earth',
+    countriesOverlay: true
   }
 };