Reticle (improved)

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}>
+      <text x={center.x + unitPxStep * nbUnits - 15} y={center.y - 20}>
-        {`${radiusUnitValue} ${radiusUnit}`}
+        {`${radiusUnitValue * nbUnits} ${radiusUnit}`}
       </text>
     </g>
   );