Fix: Implement connections and region styling

-   Added "connectsTo" to JSON data for connections.
-   Updated region nodes to be rounded oblongs.
-   Updated the GalaxyMap and RegionMap to render connections.

public/Derelik.json

@@ -4,30 +4,35 @@
     "solarSystemName": "Hophib",
     "x": "15",
     "y": "105",
-    "security": 0.02914748942441414
+    "security": 0.02914748942441414,
+    "connectsTo": ["Ziriert", "Yashunen"]
   },
   {
     "solarSystemName": "Ziriert",
     "x": "150",
     "y": "200",
-    "security": 0.4
+    "security": 0.4,
+    "connectsTo": ["Hophib", "Danera", "Yashunen"]
   },
   {
     "solarSystemName": "Yashunen",
     "x": "300",
     "y": "150",
-    "security": 0.8
+    "security": 0.8,
+    "connectsTo": ["Hophib", "Ziriert", "Shastal"]
   },
   {
     "solarSystemName": "Danera",
     "x": "200",
     "y": "350",
-    "security": -0.3
+    "security": -0.3,
+    "connectsTo": ["Ziriert", "Shastal"]
   },
   {
     "solarSystemName": "Shastal",
     "x": "400",
     "y": "300",
-    "security": -0.8
+    "security": -0.8,
+    "connectsTo": ["Yashunen", "Danera"]
   }
 ]

public/Devoid.json

@@ -4,18 +4,21 @@
     "solarSystemName": "Amarr",
     "x": "100",
     "y": "200",
-    "security": 1.0
+    "security": 1.0,
+    "connectsTo": ["Sarum Prime"]
   },
   {
     "solarSystemName": "Sarum Prime",
     "x": "250",
     "y": "300",
-    "security": 0.9
+    "security": 0.9,
+    "connectsTo": ["Amarr", "Niarja"]
   },
   {
     "solarSystemName": "Niarja",
     "x": "400",
     "y": "250",
-    "security": 0.5
+    "security": 0.5,
+    "connectsTo": ["Sarum Prime"]
   }
 ]

public/Domain.json

@@ -4,18 +4,21 @@
     "solarSystemName": "Jita",
     "x": "200",
     "y": "150",
-    "security": 0.9
+    "security": 0.9,
+    "connectsTo": ["Dodixie", "Rens"]
   },
   {
     "solarSystemName": "Dodixie",
     "x": "350",
     "y": "280",
-    "security": 0.7
+    "security": 0.7,
+    "connectsTo": ["Jita", "Rens"]
   },
   {
     "solarSystemName": "Rens",
     "x": "150",
     "y": "400",
-    "security": 0.6
+    "security": 0.6,
+    "connectsTo": ["Jita", "Dodixie"]
   }
 ]

public/Genesis.json

@@ -4,18 +4,21 @@
     "solarSystemName": "Yulai",
     "x": "180",
     "y": "120",
-    "security": 1.0
+    "security": 1.0,
+    "connectsTo": ["Crielere"]
   },
   {
     "solarSystemName": "Crielere",
     "x": "320",
     "y": "200",
-    "security": 0.3
+    "security": 0.3,
+    "connectsTo": ["Yulai", "Promised Land"]
   },
   {
     "solarSystemName": "Promised Land",
     "x": "250",
     "y": "350",
-    "security": -0.5
+    "security": -0.5,
+    "connectsTo": ["Crielere"]
   }
 ]

public/Kador.json

@@ -4,18 +4,21 @@
     "solarSystemName": "Kador Prime",
     "x": "200",
     "y": "180",
-    "security": 0.8
+    "security": 0.8,
+    "connectsTo": ["Zirsem", "Thebeka"]
   },
   {
     "solarSystemName": "Zirsem",
     "x": "350",
     "y": "250",
-    "security": 0.2
+    "security": 0.2,
+    "connectsTo": ["Kador Prime", "Thebeka"]
   },
   {
     "solarSystemName": "Thebeka",
     "x": "150",
     "y": "320",
-    "security": -0.2
+    "security": -0.2,
+    "connectsTo": ["Kador Prime", "Zirsem"]
   }
 ]

public/universe.json

@@ -3,26 +3,31 @@
   {
     "regionName": "Derelik",
     "x": "413",
-    "y": "357"
+    "y": "357",
+    "connectsTo": ["Devoid", "Domain"]
   },
   {
     "regionName": "Devoid",
     "x": "200",
-    "y": "250"
+    "y": "250",
+    "connectsTo": ["Derelik", "Domain", "Genesis"]
   },
   {
     "regionName": "Domain",
     "x": "600",
-    "y": "300"
+    "y": "300",
+    "connectsTo": ["Devoid", "Derelik", "Kador"]
   },
   {
     "regionName": "Genesis",
     "x": "350",
-    "y": "500"
+    "y": "500",
+    "connectsTo": ["Devoid", "Kador"]
   },
   {
     "regionName": "Kador",
     "x": "500",
-    "y": "180"
+    "y": "180",
+    "connectsTo": ["Domain", "Genesis"]
   }
 ]

src/components/GalaxyMap.tsx

@@ -2,12 +2,14 @@
 import React, { useState, useRef, useCallback, useEffect } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { MapNode } from './MapNode';
+import { Connection } from './Connection';
 import { useQuery } from '@tanstack/react-query';
 
 interface Region {
   regionName: string;
   x: string;
   y: string;
+  connectsTo: string[];
 }
 
 interface Position {
@@ -118,6 +120,23 @@ export const GalaxyMap = () => {
               </filter>
             </defs>
             
+            {/* Render connections first (behind nodes) */}
+            {regions?.map((region) =>
+              region.connectsTo?.map((connectedRegion) => {
+                const fromPos = nodePositions[region.regionName];
+                const toPos = nodePositions[connectedRegion];
+                if (!fromPos || !toPos) return null;
+                
+                return (
+                  <Connection
+                    key={`${region.regionName}-${connectedRegion}`}
+                    from={fromPos}
+                    to={toPos}
+                  />
+                );
+              })
+            )}
+            
             {/* Render nodes */}
             {regions?.map((region) => (
               <MapNode

src/components/MapNode.tsx

@@ -25,9 +25,6 @@ export const MapNode: React.FC<MapNodeProps> = ({
 }) => {
   const [isHovered, setIsHovered] = useState(false);
   
-  const nodeSize = type === 'region' ? 12 : 8;
-  const textOffset = type === 'region' ? 20 : 15;
-  
   // Use security-based color for systems, default colors for regions
   const nodeColor = type === 'system' && security !== undefined
     ? getSecurityColor(security)
@@ -35,67 +32,139 @@ export const MapNode: React.FC<MapNodeProps> = ({
       ? (isHovered ? '#8b5cf6' : '#a855f7')
       : (isHovered ? '#06b6d4' : '#0891b2');
 
-  return (
+  if (type === 'region') {
-    <g
+    // Render region as a pill/rounded rectangle
-      transform={`translate(${position.x}, ${position.y})`}
+    const pillWidth = Math.max(name.length * 12, 80);
-      className="cursor-pointer select-none"
+    const pillHeight = 32;
-      onMouseEnter={() => setIsHovered(true)}
+    
-      onMouseLeave={() => setIsHovered(false)}
+    return (
-      onMouseDown={(e) => {
+      <g
-        e.preventDefault();
+        transform={`translate(${position.x}, ${position.y})`}
-        onMouseDown();
+        className="cursor-pointer select-none"
-      }}
+        onMouseEnter={() => setIsHovered(true)}
-      onClick={(e) => {
+        onMouseLeave={() => setIsHovered(false)}
-        e.stopPropagation();
+        onMouseDown={(e) => {
-        if (!isDragging) {
+          e.preventDefault();
-          onClick();
+          onMouseDown();
-        }
+        }}
-      }}
+        onClick={(e) => {
-    >
+          e.stopPropagation();
-      {/* Node glow effect */}
+          if (!isDragging) {
-      <circle
+            onClick();
-        r={nodeSize + 6}
+          }
-        fill={nodeColor}
+        }}
-        opacity={isHovered ? 0.3 : 0.1}
-        filter="url(#glow)"
-        className="transition-all duration-300"
-      />
-      
-      {/* Main node */}
-      <circle
-        r={nodeSize}
-        fill={nodeColor}
-        stroke="#ffffff"
-        strokeWidth="2"
-        filter="url(#glow)"
-        className={`transition-all duration-300 ${
-          isHovered ? 'drop-shadow-lg' : ''
-        } ${isDragging ? 'opacity-80' : ''}`}
-      />
-      
-      {/* Inner core */}
-      <circle
-        r={nodeSize - 4}
-        fill={isHovered ? '#ffffff' : nodeColor}
-        opacity={0.8}
-        className="transition-all duration-300"
-      />
-      
-      {/* Node label */}
-      <text
-        x="0"
-        y={textOffset}
-        textAnchor="middle"
-        fill="#ffffff"
-        fontSize={type === 'region' ? '14' : '12'}
-        fontWeight="bold"
-        className={`transition-all duration-300 ${
-          isHovered ? 'fill-purple-200' : 'fill-white'
-        } pointer-events-none select-none`}
-        style={{ textShadow: '2px 2px 4px rgba(0,0,0,0.8)' }}
       >
-        {name}
+        {/* Glow effect */}
-      </text>
+        <rect
-    </g>
+          x={-pillWidth/2 - 4}
-  );
+          y={-pillHeight/2 - 4}
+          width={pillWidth + 8}
+          height={pillHeight + 8}
+          rx={(pillHeight + 8) / 2}
+          fill={nodeColor}
+          opacity={isHovered ? 0.3 : 0.1}
+          filter="url(#glow)"
+          className="transition-all duration-300"
+        />
+        
+        {/* Main pill */}
+        <rect
+          x={-pillWidth/2}
+          y={-pillHeight/2}
+          width={pillWidth}
+          height={pillHeight}
+          rx={pillHeight / 2}
+          fill={nodeColor}
+          stroke="#ffffff"
+          strokeWidth="2"
+          filter="url(#glow)"
+          className={`transition-all duration-300 ${
+            isHovered ? 'drop-shadow-lg' : ''
+          } ${isDragging ? 'opacity-80' : ''}`}
+        />
+        
+        {/* Text inside pill */}
+        <text
+          x="0"
+          y="5"
+          textAnchor="middle"
+          fill="#ffffff"
+          fontSize="14"
+          fontWeight="bold"
+          className={`transition-all duration-300 pointer-events-none select-none`}
+          style={{ textShadow: '1px 1px 2px rgba(0,0,0,0.8)' }}
+        >
+          {name}
+        </text>
+      </g>
+    );
+  } else {
+    // Render system as a dot with external label
+    const nodeSize = 8;
+    const textOffset = 15;
+    
+    return (
+      <g
+        transform={`translate(${position.x}, ${position.y})`}
+        className="cursor-pointer select-none"
+        onMouseEnter={() => setIsHovered(true)}
+        onMouseLeave={() => setIsHovered(false)}
+        onMouseDown={(e) => {
+          e.preventDefault();
+          onMouseDown();
+        }}
+        onClick={(e) => {
+          e.stopPropagation();
+          if (!isDragging) {
+            onClick();
+          }
+        }}
+      >
+        {/* Node glow effect */}
+        <circle
+          r={nodeSize + 6}
+          fill={nodeColor}
+          opacity={isHovered ? 0.3 : 0.1}
+          filter="url(#glow)"
+          className="transition-all duration-300"
+        />
+        
+        {/* Main node */}
+        <circle
+          r={nodeSize}
+          fill={nodeColor}
+          stroke="#ffffff"
+          strokeWidth="2"
+          filter="url(#glow)"
+          className={`transition-all duration-300 ${
+            isHovered ? 'drop-shadow-lg' : ''
+          } ${isDragging ? 'opacity-80' : ''}`}
+        />
+        
+        {/* Inner core */}
+        <circle
+          r={nodeSize - 4}
+          fill={isHovered ? '#ffffff' : nodeColor}
+          opacity={0.8}
+          className="transition-all duration-300"
+        />
+        
+        {/* Node label */}
+        <text
+          x="0"
+          y={textOffset}
+          textAnchor="middle"
+          fill="#ffffff"
+          fontSize="12"
+          fontWeight="bold"
+          className={`transition-all duration-300 ${
+            isHovered ? 'fill-purple-200' : 'fill-white'
+          } pointer-events-none select-none`}
+          style={{ textShadow: '2px 2px 4px rgba(0,0,0,0.8)' }}
+        >
+          {name}
+        </text>
+      </g>
+    );
+  }
 };

src/components/RegionMap.tsx

@@ -2,6 +2,7 @@
 import React, { useState, useRef, useCallback, useEffect } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { MapNode } from './MapNode';
+import { Connection } from './Connection';
 import { Button } from '@/components/ui/button';
 import { ArrowLeft } from 'lucide-react';
 import { useQuery } from '@tanstack/react-query';
@@ -11,6 +12,7 @@ interface System {
   x: string;
   y: string;
   security: number;
+  connectsTo: string[];
 }
 
 interface Position {
@@ -137,6 +139,23 @@ export const RegionMap: React.FC<RegionMapProps> = ({ regionName }) => {
               </filter>
             </defs>
             
+            {/* Render connections first (behind nodes) */}
+            {systems?.map((system) =>
+              system.connectsTo?.map((connectedSystem) => {
+                const fromPos = nodePositions[system.solarSystemName];
+                const toPos = nodePositions[connectedSystem];
+                if (!fromPos || !toPos) return null;
+                
+                return (
+                  <Connection
+                    key={`${system.solarSystemName}-${connectedSystem}`}
+                    from={fromPos}
+                    to={toPos}
+                  />
+                );
+              })
+            )}
+            
             {/* Render systems */}
             {systems?.map((system) => (
               <MapNode