Load data from JSON files

Load region and system data from JSON files, and use the security parameter to color the systems.

src/components/MapNode.tsx

@@ -1,5 +1,6 @@
 
 import React, { useState } from 'react';
+import { getSecurityColor } from '../utils/securityColors';
 
 interface MapNodeProps {
   id: string;
@@ -9,6 +10,7 @@ interface MapNodeProps {
   onMouseDown: () => void;
   isDragging: boolean;
   type: 'region' | 'system';
+  security?: number;
 }
 
 export const MapNode: React.FC<MapNodeProps> = ({
@@ -18,16 +20,20 @@ export const MapNode: React.FC<MapNodeProps> = ({
   onClick,
   onMouseDown,
   isDragging,
-  type
+  type,
+  security
 }) => {
   const [isHovered, setIsHovered] = useState(false);
   
   const nodeSize = type === 'region' ? 12 : 8;
   const textOffset = type === 'region' ? 20 : 15;
   
-  const nodeColor = type === 'region' 
-    ? (isHovered ? '#8b5cf6' : '#a855f7')
-    : (isHovered ? '#06b6d4' : '#0891b2');
+  // Use security-based color for systems, default colors for regions
+  const nodeColor = type === 'system' && security !== undefined
+    ? getSecurityColor(security)
+    : type === 'region' 
+      ? (isHovered ? '#8b5cf6' : '#a855f7')
+      : (isHovered ? '#06b6d4' : '#0891b2');
 
   return (
     <g