391 lines
12 KiB
TypeScript
391 lines
12 KiB
TypeScript
|
|
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';
|
|
import {
|
|
Breadcrumb,
|
|
BreadcrumbItem,
|
|
BreadcrumbLink,
|
|
BreadcrumbList,
|
|
BreadcrumbPage,
|
|
BreadcrumbSeparator,
|
|
} from '@/components/ui/breadcrumb';
|
|
|
|
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 RegionMapProps {
|
|
regionName: string;
|
|
focusSystem?: string;
|
|
isCompact?: boolean;
|
|
}
|
|
|
|
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}')&perPage=1000`);
|
|
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;
|
|
};
|
|
|
|
const RegionMap = ({ regionName, focusSystem, isCompact = false }: RegionMapProps) => {
|
|
const navigate = useNavigate();
|
|
const [viewBox, setViewBox] = useState({ x: 0, y: 0, width: 1200, height: 800 });
|
|
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, error } = useQuery({
|
|
queryKey: ['region', regionName],
|
|
queryFn: () => fetchRegionData(regionName),
|
|
});
|
|
|
|
// Process connections once when systems or nodePositions change
|
|
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 node positions and focus on system if specified
|
|
useEffect(() => {
|
|
if (systems) {
|
|
const positions: Record<string, Position> = {};
|
|
systems.forEach(system => {
|
|
positions[system.solarSystemName] = {
|
|
x: system.x,
|
|
y: system.y
|
|
};
|
|
});
|
|
setNodePositions(positions);
|
|
|
|
// If focusSystem is specified and we're in compact mode, center on it
|
|
if (focusSystem && isCompact) {
|
|
const focusSystemData = systems.find(s => s.solarSystemName === focusSystem);
|
|
if (focusSystemData) {
|
|
setViewBox({
|
|
x: focusSystemData.x - 200,
|
|
y: focusSystemData.y - 150,
|
|
width: 400,
|
|
height: 300
|
|
});
|
|
}
|
|
}
|
|
}
|
|
}, [systems, focusSystem, isCompact]);
|
|
|
|
const handleSystemClick = (systemName: string) => {
|
|
if (focusSystem === systemName) return;
|
|
|
|
navigate(`/regions/${regionName}/${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;
|
|
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={`${isCompact ? 'h-full' : 'min-h-screen'} bg-gradient-to-br from-slate-900 via-purple-900 to-slate-900 flex items-center justify-center`}>
|
|
<div className="text-white text-xl">Loading {regionName} data...</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (error) {
|
|
return (
|
|
<div className={`${isCompact ? 'h-full' : 'min-h-screen'} bg-gradient-to-br from-slate-900 via-purple-900 to-slate-900 flex items-center justify-center`}>
|
|
<div className="text-center">
|
|
<h1 className="text-4xl font-bold text-white mb-4">Error Loading Region</h1>
|
|
<p className="text-red-400 mb-6">Failed to load data for {regionName}</p>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// Compact mode (for system page)
|
|
if (isCompact) {
|
|
return (
|
|
<div className="w-full h-full bg-black/20 backdrop-blur-sm">
|
|
<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-compact">
|
|
<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 focused system */}
|
|
{focusSystem && nodePositions[focusSystem] && (
|
|
<circle
|
|
cx={nodePositions[focusSystem].x}
|
|
cy={nodePositions[focusSystem].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[focusSystem].x} ${nodePositions[focusSystem].y}`}
|
|
to={`360 ${nodePositions[focusSystem].x} ${nodePositions[focusSystem].y}`}
|
|
dur="3s"
|
|
repeatCount="indefinite"
|
|
/>
|
|
</circle>
|
|
)}
|
|
</svg>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// Full page mode (original region page)
|
|
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">
|
|
{/* Breadcrumb Navigation */}
|
|
<div className="mb-6">
|
|
<Breadcrumb>
|
|
<BreadcrumbList>
|
|
<BreadcrumbItem>
|
|
<BreadcrumbLink
|
|
onClick={() => navigate("/")}
|
|
className="text-purple-200 hover:text-white cursor-pointer"
|
|
>
|
|
Universe
|
|
</BreadcrumbLink>
|
|
</BreadcrumbItem>
|
|
<BreadcrumbSeparator className="text-slate-400" />
|
|
<BreadcrumbItem>
|
|
<BreadcrumbPage className="text-white font-semibold">
|
|
{regionName}
|
|
</BreadcrumbPage>
|
|
</BreadcrumbItem>
|
|
</BreadcrumbList>
|
|
</Breadcrumb>
|
|
</div>
|
|
|
|
<div className="mb-8">
|
|
<h1 className="text-4xl font-bold text-white mb-2">{regionName}</h1>
|
|
<p className="text-purple-200">Solar systems in this region</p>
|
|
</div>
|
|
|
|
<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}
|
|
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">
|
|
<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}
|
|
/>
|
|
))}
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default RegionMap;
|