From b0ad48985a4d2a2d6b880f31b6c0ced3f4b4dec3 Mon Sep 17 00:00:00 2001
From: PhatPhuckDave <david.majdandzic@hotmail.com>
Date: Mon, 11 Aug 2025 19:26:35 +0200
Subject: [PATCH] refactor(RegionMap.tsx): extract map interaction constants to
 improve code readability

---
 frontend/src/components/RegionMap.tsx | 27 +++++++++++++++++++--------
 1 file changed, 19 insertions(+), 8 deletions(-)

diff --git a/frontend/src/components/RegionMap.tsx b/frontend/src/components/RegionMap.tsx
index d97ef65..e19ac43 100644
--- a/frontend/src/components/RegionMap.tsx
+++ b/frontend/src/components/RegionMap.tsx
@@ -12,6 +12,17 @@ import { ListCharacters, StartESILogin, SetDestinationForAll, PostRouteForAllByN
 import { toast } from '@/hooks/use-toast';
 import { getSystemsRegions } from '@/utils/systemApi';
 
+// Interaction/indicator constants
+const SELECT_HOLD_MS = 300;
+const PAN_THRESHOLD_PX = 6;
+const DRAG_SNAP_DISTANCE = 20;
+const VIA_WAYPOINT_RING_RADIUS = 14;
+const VIA_WAYPOINT_RING_COLOR = '#10b981';
+const INDICATED_RING_RADIUS = 20;
+const INDICATED_RING_COLOR = '#f59e0b';
+const INDICATED_RING_ANIM_VALUES = '18;22;18';
+const INDICATED_RING_ANIM_DUR = '1.2s';
+
 interface RegionMapProps {
   regionName: string;
   focusSystem?: string;
@@ -392,7 +403,7 @@ export const RegionMap = ({ regionName, focusSystem, isCompact = false, isWormho
       const dx = system.x - x;
       const dy = system.y - y;
       const distance = Math.sqrt(dx * dx + dy * dy);
-      if (distance < 20) {
+      if (distance < DRAG_SNAP_DISTANCE) {
         targetSystem = system;
       }
     });
@@ -484,7 +495,7 @@ export const RegionMap = ({ regionName, focusSystem, isCompact = false, isWormho
     }
   };
 
-  const PAN_THRESHOLD_PX = 6; // movement before starting pan
+  // const PAN_THRESHOLD_PX = 6; // movement before starting pan
 
   const handleMouseDown = useCallback((e: React.MouseEvent) => {
     if (!svgRef.current) return;
@@ -504,7 +515,7 @@ export const RegionMap = ({ regionName, focusSystem, isCompact = false, isWormho
     clearSelectTimer();
     selectTimerRef.current = window.setTimeout(() => {
       setIsSelecting(true);
-    }, 1000);
+    }, SELECT_HOLD_MS);
   }, [positions, systems]);
 
   const handleMouseMove = useCallback((e: React.MouseEvent) => {
@@ -859,9 +870,9 @@ export const RegionMap = ({ regionName, focusSystem, isCompact = false, isWormho
               <circle
                 cx={positions[name].x}
                 cy={positions[name].y}
-                r="14"
+                r={VIA_WAYPOINT_RING_RADIUS}
                 fill="none"
-                stroke="#10b981"
+                stroke={VIA_WAYPOINT_RING_COLOR}
                 strokeWidth="3"
                 opacity="0.9"
                 filter="url(#glow)"
@@ -876,14 +887,14 @@ export const RegionMap = ({ regionName, focusSystem, isCompact = false, isWormho
             <circle
               cx={positions[indicatedSystem].x}
               cy={positions[indicatedSystem].y}
-              r="20"
+              r={INDICATED_RING_RADIUS}
               fill="none"
-              stroke="#f59e0b"
+              stroke={INDICATED_RING_COLOR}
               strokeWidth="3"
               opacity="0.9"
               filter="url(#glow)"
             >
-              <animate attributeName="r" values="18;22;18" dur="1.2s" repeatCount="indefinite" />
+              <animate attributeName="r" values={INDICATED_RING_ANIM_VALUES} dur={INDICATED_RING_ANIM_DUR} repeatCount="indefinite" />
             </circle>
           </g>
         )}