diff --git a/frontend/src/components/MapNode.tsx b/frontend/src/components/MapNode.tsx index ff3cc10..2498477 100644 --- a/frontend/src/components/MapNode.tsx +++ b/frontend/src/components/MapNode.tsx @@ -21,6 +21,7 @@ interface MapNodeProps { showJumps?: boolean; showKills?: boolean; viewBoxWidth?: number; // Add viewBox width for scaling calculations + labelScale?: number; } export const MapNode: React.FC = ({ @@ -43,6 +44,7 @@ export const MapNode: React.FC = ({ showJumps = false, showKills = false, viewBoxWidth = 1200, + labelScale = 1, }) => { const [isHovered, setIsHovered] = useState(false); const [isDragging, setIsDragging] = useState(false); @@ -197,23 +199,22 @@ export const MapNode: React.FC = ({ fontWeight="bold" className={`transition-all duration-300 ${isHovered ? 'fill-purple-200' : 'fill-white' } pointer-events-none select-none`} - style={{ + style={{ textShadow: '2px 2px 4px rgba(0,0,0,0.8)', vectorEffect: 'non-scaling-stroke' }} - transform={`scale(${1 / (1200 / viewBoxWidth)})`} - transformOrigin="0 0" + transform={`scale(${(1 / (1200 / viewBoxWidth)) * labelScale})`} > {name} {security !== undefined && ( {security.toFixed(1)} )} - + {/* Dynamic text positioning based on what's shown */} {(() => { let currentY = textOffset + 15; const textElements = []; - + // Add signatures if present if (signatures !== undefined && signatures > 0) { textElements.push( @@ -225,19 +226,18 @@ export const MapNode: React.FC = ({ fill="#a3a3a3" fontSize="12" className="pointer-events-none select-none" - style={{ + style={{ textShadow: '1px 1px 2px rgba(0,0,0,0.8)', vectorEffect: 'non-scaling-stroke' }} - transform={`scale(${1 / (1200 / viewBoxWidth)})`} - transformOrigin="0 0" + transform={`scale(${(1 / (1200 / viewBoxWidth)) * labelScale})`} > 📡 {signatures} ); currentY += 15; } - + // Add jumps if enabled and present if (showJumps && jumps !== undefined) { textElements.push( @@ -249,19 +249,18 @@ export const MapNode: React.FC = ({ fill="#60a5fa" fontSize="10" className="pointer-events-none select-none" - style={{ + style={{ textShadow: '1px 1px 2px rgba(0,0,0,0.8)', vectorEffect: 'non-scaling-stroke' }} - transform={`scale(${1 / (1200 / viewBoxWidth)})`} - transformOrigin="0 0" + transform={`scale(${(1 / (1200 / viewBoxWidth)) * labelScale})`} > 🚀 {jumps} ); currentY += 15; } - + // Add kills if enabled and present if (showKills && kills !== undefined) { textElements.push( @@ -273,18 +272,17 @@ export const MapNode: React.FC = ({ fill="#f87171" fontSize="10" className="pointer-events-none select-none" - style={{ + style={{ textShadow: '1px 1px 2px rgba(0,0,0,0.8)', vectorEffect: 'non-scaling-stroke' }} - transform={`scale(${1 / (1200 / viewBoxWidth)})`} - transformOrigin="0 0" + transform={`scale(${(1 / (1200 / viewBoxWidth)) * labelScale})`} > ⚔️ {kills} ); } - + return textElements; })()} diff --git a/frontend/src/components/RegionMap.tsx b/frontend/src/components/RegionMap.tsx index 0d89972..c7193de 100644 --- a/frontend/src/components/RegionMap.tsx +++ b/frontend/src/components/RegionMap.tsx @@ -1114,6 +1114,7 @@ export const RegionMap = ({ regionName, focusSystem, isCompact = false, isWormho showJumps={showJumps} showKills={showKills} viewBoxWidth={viewBox.width} + labelScale={isCompact ? 2.0 : 1} /> ))}