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

199
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,67 +32,139 @@ export const MapNode: React.FC<MapNodeProps> = ({
? (isHovered ? '#8b5cf6' : '#a855f7')
: (isHovered ? '#06b6d4' : '#0891b2');
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();
}
}}
>
{/* Node glow effect */}
<circle
r={nodeSize + 6}
fill={nodeColor}
opacity={isHovered ? 0.3 : 0.1}
filter="url(#glow)"
className="transition-all duration-300"
/>
{/* Main node */}
<circle
r={nodeSize}
fill={nodeColor}
stroke="#ffffff"
strokeWidth="2"
filter="url(#glow)"
className={`transition-all duration-300 ${
isHovered ? 'drop-shadow-lg' : ''
} ${isDragging ? 'opacity-80' : ''}`}
/>
{/* Inner core */}
<circle
r={nodeSize - 4}
fill={isHovered ? '#ffffff' : nodeColor}
opacity={0.8}
className="transition-all duration-300"
/>
{/* Node label */}
<text
x="0"
y={textOffset}
textAnchor="middle"
fill="#ffffff"
fontSize={type === 'region' ? '14' : '12'}
fontWeight="bold"
className={`transition-all duration-300 ${
isHovered ? 'fill-purple-200' : 'fill-white'
} pointer-events-none select-none`}
style={{ textShadow: '2px 2px 4px rgba(0,0,0,0.8)' }}
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();
}
}}
>
{name}
</text>
</g>
);
{/* 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})`}
className="cursor-pointer select-none"
onMouseEnter={() => setIsHovered(true)}
onMouseLeave={() => setIsHovered(false)}
onMouseDown={(e) => {
e.preventDefault();
onMouseDown();
}}
onClick={(e) => {
e.stopPropagation();
if (!isDragging) {
onClick();
}
}}
>
{/* Node glow effect */}
<circle
r={nodeSize + 6}
fill={nodeColor}
opacity={isHovered ? 0.3 : 0.1}
filter="url(#glow)"
className="transition-all duration-300"
/>
{/* Main node */}
<circle
r={nodeSize}
fill={nodeColor}
stroke="#ffffff"
strokeWidth="2"
filter="url(#glow)"
className={`transition-all duration-300 ${
isHovered ? 'drop-shadow-lg' : ''
} ${isDragging ? 'opacity-80' : ''}`}
/>
{/* Inner core */}
<circle
r={nodeSize - 4}
fill={isHovered ? '#ffffff' : nodeColor}
opacity={0.8}
className="transition-all duration-300"
/>
{/* Node label */}
<text
x="0"
y={textOffset}
textAnchor="middle"
fill="#ffffff"
fontSize="12"
fontWeight="bold"
className={`transition-all duration-300 ${
isHovered ? 'fill-purple-200' : 'fill-white'
} pointer-events-none select-none`}
style={{ textShadow: '2px 2px 4px rgba(0,0,0,0.8)' }}
>
{name}
</text>
</g>
);
}
};