From 0762a4da7a83b044b6bcde39587a9c8c62257328 Mon Sep 17 00:00:00 2001
From: evlist <vdv@dyomedea.com>
Date: Sun, 9 Oct 2022 11:29:43 +0200
Subject: [PATCH] Reticle (improved)

---
 src/components/map/Reticle.tsx | 24 ++++++++++++++++--------
 1 file changed, 16 insertions(+), 8 deletions(-)

diff --git a/src/components/map/Reticle.tsx b/src/components/map/Reticle.tsx
index 573cafc..aaf380b 100644
--- a/src/components/map/Reticle.tsx
+++ b/src/components/map/Reticle.tsx
@@ -69,7 +69,7 @@ const Reticle: React.FC<{}> = () => {
       <circle
         cx={center.x}
         cy={center.y}
-        r={radius}
+        r={unitPxStep * nbUnits}
         fill='transparent'
         stroke='black'
         strokeWidth={1}
@@ -86,7 +86,9 @@ const Reticle: React.FC<{}> = () => {
         strokeWidth={0.5}
       />
       <g id='reticle-east'>
-        <path stroke='red' className='reticle'
+        <path
+          stroke='red'
+          className='reticle'
           strokeWidth={0.5}
           d={_.range(1, nbSubUnits + 1)
             .map(
@@ -94,27 +96,33 @@ const Reticle: React.FC<{}> = () => {
             )
             .join(' ')}
         />
-        <path stroke='red' className='reticle'
+        <path
+          stroke='red'
+          className='reticle'
           d={_.range(1, nbUnits + 1)
             .map((i) => `M ${center.x + i * unitPxStep},${center.y - 20} v 40`)
             .join(' ')}
           strokeWidth={0.5}
         />
       </g>
-      <use stroke='red' className='reticle'
+      <use
+        stroke='red'
+        className='reticle'
         href='#reticle-east'
         transform={`rotate(90, ${center.x}, ${center.y})`}
       />
-      <use className='reticle'
+      <use
+        className='reticle'
         href='#reticle-east'
         transform={`rotate(180, ${center.x}, ${center.y})`}
       />
-      <use className='reticle'
+      <use
+        className='reticle'
         href='#reticle-east'
         transform={`rotate(-90, ${center.x}, ${center.y})`}
       />
-      <text x={center.x + unitPxStep - 15} y={center.y - 20}>
-        {`${radiusUnitValue} ${radiusUnit}`}
+      <text x={center.x + unitPxStep * nbUnits - 15} y={center.y - 20}>
+        {`${radiusUnitValue * nbUnits} ${radiusUnit}`}
       </text>
     </g>
   );