diff --git a/src/components/GalaxyMap.tsx b/src/components/GalaxyMap.tsx index 362a9e9..6379157 100644 --- a/src/components/GalaxyMap.tsx +++ b/src/components/GalaxyMap.tsx @@ -103,8 +103,8 @@ export const GalaxyMap = () => { const mouseX = e.clientX - rect.left; const mouseY = e.clientY - rect.top; - // Reverse scroll direction: positive deltaY zooms out, negative zooms in - const scale = e.deltaY > 0 ? 1.1 : 0.9; + // Invert scroll direction: negative deltaY (scroll up) zooms out, positive (scroll down) zooms in + const scale = e.deltaY < 0 ? 1.1 : 0.9; const newWidth = viewBox.width * scale; const newHeight = viewBox.height * scale; diff --git a/src/components/MapNode.tsx b/src/components/MapNode.tsx index 66f44b5..bef62bd 100644 --- a/src/components/MapNode.tsx +++ b/src/components/MapNode.tsx @@ -27,9 +27,9 @@ export const MapNode: React.FC = ({ : '#a855f7'; // fallback purple color if (type === 'region') { - // Reduce region size to prevent overlap - const pillWidth = Math.max(name.length * 8, 60); // Reduced from 12 to 8, min from 80 to 60 - const pillHeight = 24; // Reduced from 32 to 24 + // 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 ( = ({ }`} /> - {/* Text inside pill */} + {/* Text inside pill - made smaller */} = ({ } else { // Render system as a dot with external label const nodeSize = 6; - const textOffset = 18; // Position text below the dot + const textOffset = 20; // Position text below the dot - moved down more return ( = ({ regionName }) => { const mouseX = e.clientX - rect.left; const mouseY = e.clientY - rect.top; - // Reverse scroll direction: positive deltaY zooms out, negative zooms in - const scale = e.deltaY > 0 ? 1.1 : 0.9; + // Invert scroll direction: negative deltaY (scroll up) zooms out, positive (scroll down) zooms in + const scale = e.deltaY < 0 ? 1.1 : 0.9; const newWidth = viewBox.width * scale; const newHeight = viewBox.height * scale; @@ -113,7 +113,7 @@ export const RegionMap: React.FC<{ regionName: string }> = ({ regionName }) => { const mouseYInSVG = viewBox.y + (mouseY / rect.height) * viewBox.height; const newX = mouseXInSVG - (mouseX / rect.width) * newWidth; - const newY = mouseYInSVG - (mouseY / rect.height) * newWidth; + const newY = mouseYInSVG - (mouseY / rect.height) * newHeight; setViewBox({ x: newX,