From 189a8a451f70a11664a3a55d538634a04e01daaa Mon Sep 17 00:00:00 2001
From: DokaDoka <31368547+DokaDoka@users.noreply.github.com>
Date: Wed, 22 Feb 2023 00:12:43 +1100
Subject: [PATCH] feat(web/radial): gap variable

---
 web/src/features/menu/radial/index.tsx | 15 +++++++++------
 1 file changed, 9 insertions(+), 6 deletions(-)

diff --git a/web/src/features/menu/radial/index.tsx b/web/src/features/menu/radial/index.tsx
index e83cd50..8ce7abd 100644
--- a/web/src/features/menu/radial/index.tsx
+++ b/web/src/features/menu/radial/index.tsx
@@ -90,20 +90,23 @@ const RadialMenu: React.FC = () => {
               // Always draw full circle to avoid elipse circles with 2 or less items
               const pieAngle = 360 / (menu.items.length < 3 ? 3 : menu.items.length);
               const angle = degToRad(pieAngle / 2 + 90);
-              const radius = 175 * 0.65;
-              const iconX = 175 + Math.sin(angle) * radius;
-              const iconY = 175 + Math.cos(angle) * radius;
+              const gap = 0
+              const radius = 175 * 0.65 - gap;
+              const sinAngle = Math.sin(angle)
+              const cosAngle = Math.cos(angle)
+              const iconX = 175 + sinAngle * radius;
+              const iconY = 175 + cosAngle * radius;
 
               return (
                 <>
                   <g
-                    transform={`rotate(-${index * pieAngle} 175 175)`}
+                    transform={`rotate(-${index * pieAngle} 175 175) translate(${sinAngle * gap}, ${cosAngle * gap})`}
                     className={classes.sector}
                     onClick={() => fetchNui('radialClick', index)}
                   >
                     <path
-                      d={`M175.01,175.01 l175,0 A175.01,175.01 0 0,0 ${175 + 175 * Math.cos(-degToRad(pieAngle))}, ${
-                        175 + 175 * Math.sin(-degToRad(pieAngle))
+                      d={`M175.01,175.01 l${175 - gap},0 A175.01,175.01 0 0,0 ${175 + (175 - gap) * Math.cos(-degToRad(pieAngle))}, ${
+                        175 + (175 - gap) * Math.sin(-degToRad(pieAngle))
                       } z`}
                     />
                     <g transform={`rotate(${index * pieAngle - 90} ${iconX} ${iconY})`} pointerEvents="none">