feat: Add system map to system view

Integrate a small, focused map of the system's region into the system view page, enabling navigation between systems.

src/components/RegionOverviewMap.tsx

@@ -0,0 +1,286 @@
+
+import React, { useState, useRef, useCallback, useEffect, useMemo } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { MapNode } from './MapNode';
+import { Connection } from './Connection';
+import { useQuery } from '@tanstack/react-query';
+import { getSecurityColor } from '../utils/securityColors';
+
+const pocketbaseUrl = `https://evebase.site.quack-lab.dev/api/collections/regionview/records`;
+
+interface SolarSystem {
+  solarSystemName: string;
+  x: number;
+  y: number;
+  security: number;
+  signatures: number;
+  connectedSystems: string[];
+}
+
+interface Position {
+  x: number;
+  y: number;
+}
+
+interface ProcessedConnection {
+  key: string;
+  from: Position;
+  to: Position;
+  color: string;
+}
+
+interface RegionOverviewMapProps {
+  regionName: string;
+  currentSystem: string;
+  className?: string;
+}
+
+const fetchRegionData = async (regionName: string): Promise<SolarSystem[]> => {
+  const response = await fetch(`/${regionName}.json`);
+  if (!response.ok) {
+    throw new Error('Failed to fetch region data');
+  }
+  const systems = await response.json();
+
+  const regionSignatures = await fetch(`${pocketbaseUrl}?filter=(sysregion%3D'${regionName}')`);
+  const regionSignaturesJson = await regionSignatures.json();
+  
+  if (regionSignaturesJson.items.length > 0) {
+    for (const systemSigs of regionSignaturesJson.items) {
+      const system = systems.find(s => s.solarSystemName === systemSigs.sysname);
+      if (system) {
+        system.signatures = systemSigs.sigcount;
+      }
+    }
+  }
+  return systems;
+};
+
+export const RegionOverviewMap: React.FC<RegionOverviewMapProps> = ({ 
+  regionName, 
+  currentSystem, 
+  className = "" 
+}) => {
+  const navigate = useNavigate();
+  const [viewBox, setViewBox] = useState({ x: 0, y: 0, width: 800, height: 600 });
+  const [isPanning, setIsPanning] = useState(false);
+  const [lastPanPoint, setLastPanPoint] = useState({ x: 0, y: 0 });
+  const [nodePositions, setNodePositions] = useState<Record<string, Position>>({});
+  const svgRef = useRef<SVGSVGElement>(null);
+
+  const { data: systems, isLoading } = useQuery({
+    queryKey: ['region-overview', regionName],
+    queryFn: () => fetchRegionData(regionName),
+  });
+
+  // Process connections
+  const processedConnections = useMemo(() => {
+    if (!systems || !nodePositions) return [];
+
+    const connections = new Map<string, ProcessedConnection>();
+
+    systems.forEach(system => {
+      system.connectedSystems?.forEach(connectedSystem => {
+        const connectionKey = [system.solarSystemName, connectedSystem].sort().join('-');
+        if (connections.has(connectionKey)) return;
+
+        const fromPos = nodePositions[system.solarSystemName];
+        const toPos = nodePositions[connectedSystem];
+        if (!fromPos || !toPos) return;
+
+        const toSystem = systems.find(s => s.solarSystemName === connectedSystem);
+        if (!toSystem) return;
+
+        const avgSecurity = (system.security + toSystem.security) / 2;
+        const connectionColor = getSecurityColor(avgSecurity);
+
+        connections.set(connectionKey, {
+          key: connectionKey,
+          from: fromPos,
+          to: toPos,
+          color: connectionColor
+        });
+      });
+    });
+
+    return Array.from(connections.values());
+  }, [systems, nodePositions]);
+
+  // Initialize positions and center on current system
+  useEffect(() => {
+    if (systems) {
+      const positions: Record<string, Position> = {};
+      systems.forEach(system => {
+        positions[system.solarSystemName] = {
+          x: system.x,
+          y: system.y
+        };
+      });
+      setNodePositions(positions);
+
+      // Find current system and center view on it
+      const currentSystemData = systems.find(s => s.solarSystemName === currentSystem);
+      if (currentSystemData) {
+        setViewBox({
+          x: currentSystemData.x - 200, // Center with some padding
+          y: currentSystemData.y - 150,
+          width: 400,
+          height: 300
+        });
+      }
+    }
+  }, [systems, currentSystem]);
+
+  const handleSystemClick = (systemName: string) => {
+    navigate(`/systems/${systemName}`);
+  };
+
+  const handleMouseDown = useCallback((e: React.MouseEvent) => {
+    if (!svgRef.current) return;
+    setIsPanning(true);
+    const rect = svgRef.current.getBoundingClientRect();
+    setLastPanPoint({
+      x: e.clientX - rect.left,
+      y: e.clientY - rect.top
+    });
+  }, []);
+
+  const handleMouseMove = useCallback((e: React.MouseEvent) => {
+    if (!isPanning || !svgRef.current) return;
+
+    const rect = svgRef.current.getBoundingClientRect();
+    const currentPoint = {
+      x: e.clientX - rect.left,
+      y: e.clientY - rect.top
+    };
+
+    const deltaX = (lastPanPoint.x - currentPoint.x) * (viewBox.width / rect.width);
+    const deltaY = (lastPanPoint.y - currentPoint.y) * (viewBox.height / rect.height);
+
+    setViewBox(prev => ({
+      ...prev,
+      x: prev.x + deltaX,
+      y: prev.y + deltaY
+    }));
+
+    setLastPanPoint(currentPoint);
+  }, [isPanning, lastPanPoint, viewBox.width, viewBox.height]);
+
+  const handleMouseUp = useCallback(() => {
+    setIsPanning(false);
+  }, []);
+
+  const handleWheel = useCallback((e: React.WheelEvent) => {
+    e.preventDefault();
+    if (!svgRef.current) return;
+
+    const rect = svgRef.current.getBoundingClientRect();
+    const mouseX = e.clientX - rect.left;
+    const mouseY = e.clientY - rect.top;
+
+    const scale = e.deltaY > 0 ? 1.1 : 0.9; // Inverted: scroll down = zoom in
+    const newWidth = viewBox.width * scale;
+    const newHeight = viewBox.height * scale;
+
+    const mouseXInSVG = viewBox.x + (mouseX / rect.width) * viewBox.width;
+    const mouseYInSVG = viewBox.y + (mouseY / rect.height) * viewBox.height;
+
+    const newX = mouseXInSVG - (mouseX / rect.width) * newWidth;
+    const newY = mouseYInSVG - (mouseY / rect.height) * newHeight;
+
+    setViewBox({
+      x: newX,
+      y: newY,
+      width: newWidth,
+      height: newHeight
+    });
+  }, [viewBox]);
+
+  if (isLoading) {
+    return (
+      <div className={`bg-black/20 backdrop-blur-sm border border-purple-500/30 rounded-lg flex items-center justify-center ${className}`}>
+        <div className="text-white text-sm">Loading region map...</div>
+      </div>
+    );
+  }
+
+  return (
+    <div className={`bg-black/20 backdrop-blur-sm border border-purple-500/30 rounded-lg overflow-hidden ${className}`}>
+      <div className="p-2 border-b border-purple-500/30">
+        <h3 className="text-white text-sm font-semibold">{regionName} Region</h3>
+        <p className="text-purple-200 text-xs">Click systems to navigate</p>
+      </div>
+      
+      <svg
+        ref={svgRef}
+        width="100%"
+        height="100%"
+        viewBox={`${viewBox.x} ${viewBox.y} ${viewBox.width} ${viewBox.height}`}
+        className="cursor-grab active:cursor-grabbing"
+        onMouseDown={handleMouseDown}
+        onMouseMove={handleMouseMove}
+        onMouseUp={handleMouseUp}
+        onMouseLeave={handleMouseUp}
+        onWheel={handleWheel}
+      >
+        <defs>
+          <filter id="glow-overview">
+            <feGaussianBlur stdDeviation="3" result="coloredBlur" />
+            <feMerge>
+              <feMergeNode in="coloredBlur" />
+              <feMergeNode in="SourceGraphic" />
+            </feMerge>
+          </filter>
+        </defs>
+
+        {/* Render connections */}
+        {processedConnections.map(connection => (
+          <Connection
+            key={connection.key}
+            from={connection.from}
+            to={connection.to}
+            color={connection.color}
+          />
+        ))}
+
+        {/* Render systems */}
+        {systems?.map((system) => (
+          <MapNode
+            key={system.solarSystemName}
+            id={system.solarSystemName}
+            name={system.solarSystemName}
+            position={nodePositions[system.solarSystemName] || { x: 0, y: 0 }}
+            onClick={() => handleSystemClick(system.solarSystemName)}
+            type="system"
+            security={system.security}
+            signatures={system.signatures}
+          />
+        ))}
+
+        {/* Highlight current system with a ring */}
+        {currentSystem && nodePositions[currentSystem] && (
+          <circle
+            cx={nodePositions[currentSystem].x}
+            cy={nodePositions[currentSystem].y}
+            r="15"
+            fill="none"
+            stroke="#a855f7"
+            strokeWidth="3"
+            strokeDasharray="5,5"
+            opacity="0.8"
+          >
+            <animateTransform
+              attributeName="transform"
+              attributeType="XML"
+              type="rotate"
+              from={`0 ${nodePositions[currentSystem].x} ${nodePositions[currentSystem].y}`}
+              to={`360 ${nodePositions[currentSystem].x} ${nodePositions[currentSystem].y}`}
+              dur="3s"
+              repeatCount="indefinite"
+            />
+          </circle>
+        )}
+      </svg>
+    </div>
+  );
+};

src/pages/SystemView.tsx

@@ -1,10 +1,20 @@
+
 import { useParams, useNavigate } from "react-router-dom";
+import { useQuery } from "@tanstack/react-query";
 import SystemTracker from "@/components/SystemTracker";
+import { RegionOverviewMap } from "@/components/RegionOverviewMap";
+import { findSystemRegion } from "@/utils/systemRegionMapping";
 
 const SystemView = () => {
   const { system } = useParams();
   const navigate = useNavigate();
 
+  const { data: regionName } = useQuery({
+    queryKey: ['system-region', system],
+    queryFn: () => findSystemRegion(system!),
+    enabled: !!system,
+  });
+
   if (!system) {
     navigate("/");
     return null;
@@ -14,11 +24,35 @@ const SystemView = () => {
     <div className="min-h-screen bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900">
       <div className="container mx-auto px-4 py-8">
         <div className="text-center mb-8">
-          <h1 className="text-4xl font-bold text-white mb-2">Cosmic Region Navigator</h1>
+          <h1 className="text-4xl font-bold text-white mb-2">System: {system}</h1>
-          <p className="text-slate-300">Viewing signatures for system: {system}</p>
+          <p className="text-slate-300">Viewing signatures and regional overview</p>
         </div>
+        
+        <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
+          {/* Main content - signatures */}
+          <div className="lg:col-span-2">
             <SystemTracker system={system} />
           </div>
+          
+          {/* Regional overview map */}
+          <div className="lg:col-span-1">
+            {regionName ? (
+              <RegionOverviewMap
+                regionName={regionName}
+                currentSystem={system}
+                className="h-96"
+              />
+            ) : (
+              <div className="bg-black/20 backdrop-blur-sm border border-purple-500/30 rounded-lg p-4 h-96 flex items-center justify-center">
+                <div className="text-center">
+                  <div className="text-white text-sm">Loading region data...</div>
+                  <div className="text-purple-200 text-xs mt-1">Finding system location</div>
+                </div>
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
     </div>
   );
 };

src/utils/systemRegionMapping.ts

@@ -0,0 +1,26 @@
+
+// Utility to find which region a system belongs to
+export const findSystemRegion = async (systemName: string): Promise<string | null> => {
+  // List of all region files we have
+  const regions = [
+    'Yasna Zakh', 'Molden Heath', 'Period Basis', 'The Bleak Lands', 
+    'Cloud Ring', 'Paragon Soul'
+  ];
+
+  for (const region of regions) {
+    try {
+      const response = await fetch(`/${region}.json`);
+      if (response.ok) {
+        const systems = await response.json();
+        const foundSystem = systems.find((s: any) => s.solarSystemName === systemName);
+        if (foundSystem) {
+          return region;
+        }
+      }
+    } catch (error) {
+      console.warn(`Failed to load region ${region}:`, error);
+    }
+  }
+  
+  return null;
+};