From 1be71ea6badd794e142ab0c158552f44db2c839f Mon Sep 17 00:00:00 2001 From: Luke Date: Sat, 21 Jan 2023 22:01:22 +0100 Subject: [PATCH] refactor(web/menu): properly align circle menu labels --- web/src/features/menu/planet/index.tsx | 9 +++------ 1 file changed, 3 insertions(+), 6 deletions(-) diff --git a/web/src/features/menu/planet/index.tsx b/web/src/features/menu/planet/index.tsx index 77fa338..d5a8a18 100644 --- a/web/src/features/menu/planet/index.tsx +++ b/web/src/features/menu/planet/index.tsx @@ -138,13 +138,10 @@ const PlanetMenu: React.FC = () => { {menu.items.map((item, index) => { // TODO: center labels and icon inside sector const pieAngle = 360 / menu.items.length; - const startAngle = index * pieAngle; - const endAngle = startAngle + pieAngle; - console.log(startAngle + endAngle / 2); - const angle = degToRad((startAngle + endAngle) / 2); + const angle = degToRad(pieAngle / 2 + 90); const radius = 250 / 2; - const iconX = Math.sin(angle) * radius; - const iconY = Math.cos(angle) * radius; + const iconX = 250 + Math.sin(angle) * radius; + const iconY = 250 + Math.cos(angle) * radius; return ( <>