From b3c84d94c48828debea86377fb15ecb89873128f Mon Sep 17 00:00:00 2001
From: Luke <sabolukas03@gmail.com>
Date: Mon, 16 Jan 2023 15:07:17 +0100
Subject: [PATCH] feat(web/menu): initial planet menu design

---
 web/src/App.tsx                        |  2 +
 web/src/features/menu/planet/index.tsx | 81 ++++++++++++++++++++++++++
 2 files changed, 83 insertions(+)
 create mode 100644 web/src/features/menu/planet/index.tsx

diff --git a/web/src/App.tsx b/web/src/App.tsx
index da4dbac..9f18ab5 100644
--- a/web/src/App.tsx
+++ b/web/src/App.tsx
@@ -12,6 +12,7 @@ import ListMenu from './features/menu/list';
 import Dev from './features/dev';
 import { isEnvBrowser } from './utils/misc';
 import SkillCheck from './features/skillcheck';
+import PlanetMenu from './features/menu/planet';
 
 const App: React.FC = () => {
   useNuiEvent('setClipboard', (data: string) => {
@@ -30,6 +31,7 @@ const App: React.FC = () => {
       <AlertDialog />
       <ContextMenu />
       <ListMenu />
+      <PlanetMenu />
       <SkillCheck />
       {isEnvBrowser() && <Dev />}
     </>
diff --git a/web/src/features/menu/planet/index.tsx b/web/src/features/menu/planet/index.tsx
new file mode 100644
index 0000000..a767fa0
--- /dev/null
+++ b/web/src/features/menu/planet/index.tsx
@@ -0,0 +1,81 @@
+import { ActionIcon, Box, Tooltip } from '@mantine/core';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { IconProp } from '@fortawesome/fontawesome-svg-core';
+
+const radius = 60;
+
+// https://codesandbox.io/embed/circular-menu-e94ug
+function getTransform(index: number, totalItems: number) {
+  const value = index / totalItems;
+
+  const x = radius * Math.cos(Math.PI * 2 * (value - 0.25));
+  const y = radius * Math.sin(Math.PI * 2 * (value - 0.25));
+
+  return `translate(${x}px, ${y}px)`;
+}
+
+const items: { icon: IconProp; label: string }[] = [
+  { icon: 'handcuffs', label: 'Arrest' },
+  { icon: 'warehouse', label: 'Garage' },
+  { icon: 'heart', label: 'Info' },
+  { icon: 'handcuffs', label: 'Arrest' },
+  { icon: 'warehouse', label: 'Garage' },
+  { icon: 'heart', label: 'Info' },
+];
+
+const PlanetMenu: React.FC = () => {
+  return (
+    <Box
+      style={{
+        position: 'absolute',
+        top: '50%',
+        left: '50%',
+        transform: 'translate(-50%, -50%)',
+      }}
+    >
+      <ActionIcon variant="filled" radius="xl" size="xl" color="primary" sx={{ zIndex: 99 }} w={50} h={50}>
+        <FontAwesomeIcon fixedWidth icon="xmark" size="lg" />
+      </ActionIcon>
+      <Box
+        sx={{
+          position: 'absolute',
+          top: '50%',
+          left: '50%',
+          transform: 'translate(-50%, -50%)',
+          width: 120,
+          height: 120,
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+        }}
+      >
+        {items.map((item, index) => (
+          <Box
+            sx={(theme) => ({
+              transform: getTransform(index, items.length),
+              position: 'absolute',
+              width: 40,
+              height: 40,
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              borderRadius: '50%',
+              backgroundColor: theme.colors.dark[6],
+              color: theme.colors.dark[0],
+              boxShadow: theme.shadows.sm,
+              padding: 12,
+              '&:hover': {
+                backgroundColor: theme.colors.dark[5],
+                cursor: 'pointer',
+              },
+            })}
+          >
+            <FontAwesomeIcon icon={item.icon} fixedWidth />
+          </Box>
+        ))}
+      </Box>
+    </Box>
+  );
+};
+
+export default PlanetMenu;