diff --git a/src/components/MapNode.tsx b/src/components/MapNode.tsx index 25296eb..c0a0a7f 100644 --- a/src/components/MapNode.tsx +++ b/src/components/MapNode.tsx @@ -1,4 +1,3 @@ - import React, { useState } from 'react'; import { getSecurityColor } from '../utils/securityColors'; @@ -9,6 +8,7 @@ interface MapNodeProps { onClick: () => void; type: 'region' | 'system'; security?: number; + signatures?: number; } export const MapNode: React.FC = ({ @@ -17,10 +17,11 @@ export const MapNode: React.FC = ({ position, onClick, type, - security + security, + signatures }) => { const [isHovered, setIsHovered] = useState(false); - + // Use security-based color for both systems and regions const nodeColor = security !== undefined ? getSecurityColor(security) @@ -30,7 +31,7 @@ export const MapNode: React.FC = ({ // Further reduce region size to prevent overlap - made even smaller const pillWidth = Math.max(name.length * 5, 40); // Reduced from 8 to 5, min from 60 to 40 const pillHeight = 18; // Reduced from 24 to 18 - + return ( = ({ > {/* Glow effect */} = ({ filter="url(#glow)" className="transition-all duration-300" /> - + {/* Main pill */} = ({ stroke="#ffffff" strokeWidth="1.5" filter="url(#glow)" - className={`transition-all duration-300 ${ - isHovered ? 'drop-shadow-lg' : '' - }`} + className={`transition-all duration-300 ${isHovered ? 'drop-shadow-lg' : '' + }`} /> - + {/* Text inside pill - made smaller */} = ({ // Render system as a dot with external label const nodeSize = 6; const textOffset = 20; // Position text below the dot - moved down more - + return ( = ({ filter="url(#glow)" className="transition-all duration-300" /> - + {/* Main node - removed stroke to eliminate white border */} - + {/* Inner core */} = ({ opacity={0.8} className="transition-all duration-300" /> - + {/* Node label */} = ({ } pointer-events-none select-none`} style={{ textShadow: '2px 2px 4px rgba(0,0,0,0.8)' }} > - {name} {security.toFixed(1)} + {name} {security !== undefined && ( + {security.toFixed(1)} + )} + + + {signatures !== undefined && `📡 ${signatures}`} ); diff --git a/src/components/RegionMap.tsx b/src/components/RegionMap.tsx index 466eccc..f1cd6a0 100644 --- a/src/components/RegionMap.tsx +++ b/src/components/RegionMap.tsx @@ -7,11 +7,15 @@ import { ArrowLeft } from 'lucide-react'; import { useQuery } from '@tanstack/react-query'; import { getSecurityColor } from '../utils/securityColors'; +const pocketbaseUrl = `https://evebase.site.quack-lab.dev/api/collections/regionview/records`; +// const pocketbaseUrl = `https://evebase.site.quack-lab.dev/api/collections/regionview/records?filter=(sysregion%3D'${encodedSystem}')`; + interface SolarSystem { solarSystemName: string; x: number; y: number; security: number; + signatures: number; connectedSystems: string[]; } @@ -32,7 +36,20 @@ const fetchRegionData = async (regionName: string): Promise => { if (!response.ok) { throw new Error('Failed to fetch region data'); } - return response.json(); + const systems = await response.json(); + + const regionSignatures = await fetch(`${pocketbaseUrl}?filter=(sysregion%3D'${regionName}')`); + const regionSignaturesJson = await regionSignatures.json(); + console.log(regionSignaturesJson); + 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 RegionMap: React.FC<{ regionName: string }> = ({ regionName }) => { @@ -58,13 +75,13 @@ export const RegionMap: React.FC<{ regionName: string }> = ({ regionName }) => { system.connectedSystems?.forEach(connectedSystem => { // Create a unique key by sorting system names alphabetically const connectionKey = [system.solarSystemName, connectedSystem].sort().join('-'); - + // Skip if we've already processed this connection if (connections.has(connectionKey)) return; const fromPos = nodePositions[system.solarSystemName]; const toPos = nodePositions[connectedSystem]; - + // Skip if positions are not available if (!fromPos || !toPos) return; @@ -181,7 +198,7 @@ export const RegionMap: React.FC<{ regionName: string }> = ({ regionName }) => {

Error Loading Region

Failed to load data for {regionName}

-
- +
= ({ regionName }) => { > - - - - + + + + - + {/* Render connections first (behind nodes) */} {processedConnections.map(connection => ( = ({ regionName }) => { color={connection.color} /> ))} - + {/* Render systems */} {systems?.map((system) => ( = ({ regionName }) => { onClick={() => handleSystemClick(system.solarSystemName)} type="system" security={system.security} + signatures={system.signatures} /> ))}