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

Add number of signatures to display on region map

Browse Source
This commit is contained in:
PhatPhuckDave
2025-06-14 17:26:28 +02:00
parent 7ee12606c1
commit 98e260977c
2 changed files with 64 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
src/components/MapNode.tsx
View File

@@ -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<MapNodeProps> = ({
@@ -17,10 +17,11 @@ export const MapNode: React.FC<MapNodeProps> = ({
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<MapNodeProps> = ({
// 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 (
<g
transform={`translate(${position.x}, ${position.y})`}
@@ -44,8 +45,8 @@ export const MapNode: React.FC<MapNodeProps> = ({
>
{/* Glow effect */}
<rect
x={-pillWidth/2 - 3}
y={-pillHeight/2 - 3}
x={-pillWidth / 2 - 3}
y={-pillHeight / 2 - 3}
width={pillWidth + 6}
height={pillHeight + 6}
rx={(pillHeight + 6) / 2}
@@ -54,11 +55,11 @@ export const MapNode: React.FC<MapNodeProps> = ({
filter="url(#glow)"
className="transition-all duration-300"
/>
{/* Main pill */}
<rect
x={-pillWidth/2}
y={-pillHeight/2}
x={-pillWidth / 2}
y={-pillHeight / 2}
width={pillWidth}
height={pillHeight}
rx={pillHeight / 2}
@@ -66,11 +67,10 @@ export const MapNode: React.FC<MapNodeProps> = ({
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 */}
<text
x="0"
@@ -90,7 +90,7 @@ export const MapNode: React.FC<MapNodeProps> = ({
// Render system as a dot with external label
const nodeSize = 6;
const textOffset = 20; // Position text below the dot - moved down more
return (
<g
transform={`translate(${position.x}, ${position.y})`}
@@ -110,17 +110,16 @@ export const MapNode: React.FC<MapNodeProps> = ({
filter="url(#glow)"
className="transition-all duration-300"
/>
{/* Main node - removed stroke to eliminate white border */}
<circle
r={nodeSize}
fill={nodeColor}
filter="url(#glow)"
className={`transition-all duration-300 ${
isHovered ? 'drop-shadow-lg' : ''
}`}
className={`transition-all duration-300 ${isHovered ? 'drop-shadow-lg' : ''
}`}
/>
{/* Inner core */}
<circle
r={nodeSize - 3}
@@ -128,7 +127,7 @@ export const MapNode: React.FC<MapNodeProps> = ({
opacity={0.8}
className="transition-all duration-300"
/>
{/* Node label */}
<text
x="0"
@@ -142,7 +141,20 @@ export const MapNode: React.FC<MapNodeProps> = ({
} pointer-events-none select-none`}
style={{ textShadow: '2px 2px 4px rgba(0,0,0,0.8)' }}
>
{name} {security.toFixed(1)}
{name} {security !== undefined && (
<tspan fill={getSecurityColor(security)}>{security.toFixed(1)}</tspan>
)}
</text>
<text
x="0"
y={textOffset + 15}
textAnchor="middle"
fill="#a3a3a3"
fontSize="12"
className="pointer-events-none select-none"
style={{ textShadow: '1px 1px 2px rgba(0,0,0,0.8)' }}
>
{signatures !== undefined && `📡 ${signatures}`}
</text>
</g>
);

44
src/components/RegionMap.tsx
View File

@@ -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<SolarSystem[]> => {
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 }) => {
<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>
<Button
<Button
onClick={() => navigate('/')}
className="bg-purple-600 hover:bg-purple-700"
>
@@ -196,14 +213,14 @@ export const RegionMap: React.FC<{ regionName: string }> = ({ regionName }) => {
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">
<div className="flex items-center justify-between mb-8">
<div>
<h1 className="text-4xl font-bold text-white mb-2">{regionName}</h1>
<p className="text-purple-200">Solar systems in this region</p>
</div>
<Button
<Button
onClick={() => navigate('/')}
className="bg-purple-600 hover:bg-purple-700"
>
@@ -211,7 +228,7 @@ export const RegionMap: React.FC<{ regionName: string }> = ({ regionName }) => {
Back to Galaxy
</Button>
</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}
@@ -227,14 +244,14 @@ export const RegionMap: React.FC<{ regionName: string }> = ({ regionName }) => {
>
<defs>
<filter id="glow">
<feGaussianBlur stdDeviation="3" result="coloredBlur"/>
<feMerge>
<feMergeNode in="coloredBlur"/>
<feMergeNode in="SourceGraphic"/>
<feGaussianBlur stdDeviation="3" result="coloredBlur" />
<feMerge>
<feMergeNode in="coloredBlur" />
<feMergeNode in="SourceGraphic" />
</feMerge>
</filter>
</defs>
{/* Render connections first (behind nodes) */}
{processedConnections.map(connection => (
<Connection
@@ -244,7 +261,7 @@ export const RegionMap: React.FC<{ regionName: string }> = ({ regionName }) => {
color={connection.color}
/>
))}
{/* Render systems */}
{systems?.map((system) => (
<MapNode
@@ -255,6 +272,7 @@ export const RegionMap: React.FC<{ regionName: string }> = ({ regionName }) => {
onClick={() => handleSystemClick(system.solarSystemName)}
type="system"
security={system.security}
signatures={system.signatures}
/>
))}
</svg>