Fix all the fucking connection coloring

src/components/Connection.tsx

@@ -3,11 +3,10 @@ import React from 'react';
 interface ConnectionProps {
   from: { x: number; y: number };
   to: { x: number; y: number };
-  fromColor?: string;
-  toColor?: string;
+  color?: string;
 }
 
-export const Connection: React.FC<ConnectionProps> = ({ from, to, fromColor, toColor }) => {
+export const Connection: React.FC<ConnectionProps> = ({ from, to, color }) => {
   return (
     <g>
       {/* Glow effect */}
@@ -16,8 +15,8 @@ export const Connection: React.FC<ConnectionProps> = ({ from, to, fromColor, toC
         y1={from.y}
         x2={to.x}
         y2={to.y}
-        stroke={fromColor || "#a855f7"}
-        strokeWidth="3"
+        stroke={color || "#a855f7"}
+        strokeWidth="5"
         opacity="0.3"
       />
       
@@ -27,7 +26,7 @@ export const Connection: React.FC<ConnectionProps> = ({ from, to, fromColor, toC
         y1={from.y}
         x2={to.x}
         y2={to.y}
-        stroke={fromColor || "#a855f7"}
+        stroke={color || "#a855f7"}
         strokeWidth="1"
         opacity="0.7"
         className="transition-all duration-300"

src/components/GalaxyMap.tsx

@@ -141,11 +141,11 @@ export const GalaxyMap = () => {
   return (
     <div className="w-full h-screen bg-gradient-to-br from-slate-900 via-purple-900 to-slate-900 overflow-hidden relative">
       <div className="absolute inset-0 bg-[radial-gradient(ellipse_at_center,_var(--tw-gradient-stops))] from-purple-900/20 via-slate-900/40 to-black"></div>
-      
+
       <div className="relative z-10 p-8">
         <h1 className="text-4xl font-bold text-white mb-2 text-center">Galaxy Map</h1>
         <p className="text-purple-200 text-center mb-8">Navigate the known regions of space</p>
-        
+
         <div className="w-full h-[calc(100vh-200px)] border border-purple-500/30 rounded-lg overflow-hidden bg-black/20 backdrop-blur-sm">
           <svg
             ref={svgRef}
@@ -162,38 +162,37 @@ export const GalaxyMap = () => {
             <defs>
               <filter id="glow">
                 <feGaussianBlur stdDeviation="3" result="coloredBlur"/>
-                <feMerge> 
+                <feMerge>
                   <feMergeNode in="coloredBlur"/>
                   <feMergeNode in="SourceGraphic"/>
                 </feMerge>
               </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;
-                
+
                 // Get colors for both regions
-                const fromColor = getSecurityColor(region.security);
                 const toRegion = regions.find(r => r.regionName === connectedRegion);
-                const toColor = toRegion ? getSecurityColor(toRegion.security) : fromColor;
-                
+                const avgSecurity = (region.security + toRegion.security) / 2;
+                const color = getSecurityColor(avgSecurity);
+
                 return (
                   <Connection
                     key={`${region.regionName}-${connectedRegion}`}
                     from={fromPos}
                     to={toPos}
-                    fromColor={fromColor}
-                    toColor={toColor}
+                    color={color}
                   />
                 );
               })
             )}
-            
-            {/* Render nodes */}
+
+            {/* Render fromCodes */}
             {regions?.map((region) => (
               <MapNode
                 key={region.regionName}

src/components/RegionMap.tsx

@@ -24,8 +24,7 @@ interface ProcessedConnection {
   key: string;
   from: Position;
   to: Position;
-  fromColor: string;
-  toColor: string;
+  color: string;
 }
 
 const fetchRegionData = async (regionName: string): Promise<SolarSystem[]> => {
@@ -80,8 +79,7 @@ export const RegionMap: React.FC<{ regionName: string }> = ({ regionName }) => {
           key: connectionKey,
           from: fromPos,
           to: toPos,
-          fromColor: connectionColor,
-          toColor: connectionColor
+          color: connectionColor
         });
       });
     });
@@ -244,8 +242,7 @@ export const RegionMap: React.FC<{ regionName: string }> = ({ regionName }) => {
                 key={connection.key}
                 from={connection.from}
                 to={connection.to}
-                fromColor={connection.fromColor}
-                toColor={connection.toColor}
+                color={connection.color}
               />
             ))}