dave/eve-signaler
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 5 Wiki Activity

Fix: Implement connections and region styling

Browse Source 
-   Added "connectsTo" to JSON data for connections.
-   Updated region nodes to be rounded oblongs.
-   Updated the GalaxyMap and RegionMap to render connections.
This commit is contained in:
gpt-engineer-app[bot]
2025-06-13 23:48:04 +00:00
parent 0264ac2f00
commit 81bfc9f45a
9 changed files with 216 additions and 87 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
public/Derelik.json
View File

@@ -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"]
}
]

9
public/Devoid.json
View File

@@ -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"]
}
]

9
public/Domain.json
View File

@@ -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"]
}
]

9
public/Genesis.json
View File

@@ -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"]
}
]

9
public/Kador.json
View File

@@ -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"]
}
]

15
public/universe.json
View File

@@ -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"]
}
]

19
src/components/GalaxyMap.tsx
View File

@@ -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

77
src/components/MapNode.tsx
View File

@@ -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,6 +32,77 @@ export const MapNode: React.FC<MapNodeProps> = ({
? (isHovered ? '#8b5cf6' : '#a855f7')
: (isHovered ? '#06b6d4' : '#0891b2');
if (type === 'region') {
// Render region as a pill/rounded rectangle
const pillWidth = Math.max(name.length * 12, 80);
const pillHeight = 32;
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();
}
}}
>
{/* Glow effect */}
<rect
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})`}
@@ -87,7 +155,7 @@ export const MapNode: React.FC<MapNodeProps> = ({
y={textOffset}
textAnchor="middle"
fill="#ffffff"
fontSize={type === 'region' ? '14' : '12'}
fontSize="12"
fontWeight="bold"
className={`transition-all duration-300 ${
isHovered ? 'fill-purple-200' : 'fill-white'
@@ -98,4 +166,5 @@ export const MapNode: React.FC<MapNodeProps> = ({
</text>
</g>
);
}
};

19
src/components/RegionMap.tsx
View File

@@ -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