Feat/context menu

client/hud.lua

@@ -31,6 +31,7 @@ end
 
 RegisterNUICallback('userSettingsUpdated', function(userSettings, cb)
   USER_SETTINGS = userSettings
+  print(userSettings)
   cb({})
 end)
 
@@ -91,7 +92,7 @@ CreateThread(function()
       debugPrint('Voice activated > false')
       wasTalking = false
     end
-    Wait(USER_SETTINGS?.voiceUpdateTime or ResourceConfig.voiceUpdateTime)
+    Wait(not USER_SETTINGS and ResourceConfig.voiceUpdateTime)
   end
 end)
 
@@ -118,7 +119,7 @@ CreateThread(function()
       end
     end
 
-    Wait(USER_SETTINGS?.healthArmorInterval or ResourceConfig.defaultHUDSettings.healthArmorUpdate)
+    Wait(not USER_SETTINGS and ResourceConfig.defaultHUDSettings.healthArmorUpdate)
   end
 end)
 

client/menu.lua

@@ -0,0 +1,59 @@
+ContextMenu = {}
+ContextMenu.__index = ContextMenu
+
+local ActiveMenu = nil
+
+function ContextMenu.new(title, items)
+    self = {}
+    setmetatable(self, ContextMenu)
+    self._title = title
+    self._items = items or {}
+
+    return self
+end
+
+function ContextMenu:addItem(title, cb, closeOnClick, condition)
+    if condition or condition == nil then
+        self._items[#self._items + 1] = { id = #self._items + 1, title = title, closeOnClick = closeOnClick, cb = cb }
+    end
+end
+
+function ContextMenu:onClick(data)
+    local menuItem = locateMenuTableItem(self._items, data.id)
+    if (menuItem == nil) then return errorPrint("Menu item was not found.") end
+
+    menuItem.cb()
+end
+
+RegisterNUICallback('onMenuItemClick', function(data, cb)
+    ActiveMenu:onClick(data)
+    if data.closeOnClick == true then
+        ActiveMenu:closeMenu()
+    end
+end)
+
+function ContextMenu:openMenu()
+    local items = {}
+    for k,v in ipairs(self._items) do
+        items[k] = {}
+
+        items[k]["id"] = v.id
+        items[k]["title"] = v.title
+        items[k]["closeOnClick"] = v.closeOnClick
+    end
+
+    SendReactMessage('openMenu', { title = self._title, items = items })
+    SetNuiFocus(true, true)
+
+    ActiveMenu = self
+end
+
+function ContextMenu:closeMenu()
+    SendReactMessage('closeMenu', {})
+    SetNuiFocus(false)
+end
+
+RegisterNUICallback('onCloseMenu', function(data, cb)
+    SetNuiFocus(false)
+    cb()
+end)

client/test.lua

@@ -9,10 +9,12 @@ RegisterCommand('testPrompt', function()
     id = 'myTestPrompt',
     title = 'Wow this has a title!'
   })
+  SpawnCar(content)
 
   debugPrint('Export result >')
   debugPrint('Status | ' ..status)
   debugPrint('Content | ' .. tostring(content))
+
 end)
 
 RegisterCommand('testPromptClose', function()
@@ -23,10 +25,12 @@ RegisterCommand('testPromptClose', function()
     title = 'Closable Prompt',
     isClosable = true
   })
+  SpawnCar(content)
 
   debugPrint('Export result >')
   debugPrint('Status | ' ..status)
   debugPrint('Content | ' .. tostring(content))
+
 end)
 
 RegisterCommand('testToast', function()
@@ -130,4 +134,33 @@ end)
 
 RegisterCommand('closeProgbar', function()
   exports['pe-ui']:closeProgbar()
+end)
+
+function SpawnCar(model)
+  local hash = GetHashKey(model)
+
+  local playerId = PlayerPedId()
+  local coords = GetEntityCoords(playerId)
+
+  RequestModel(hash)
+  while not HasModelLoaded(hash) do
+    Wait(100)
+  end
+
+  CreateVehicle(hash, coords, 0.0, false, false)
+end
+
+RegisterCommand('openMenu', function()
+  local menu = ContextMenu.new("Garage")
+
+  menu:addItem("Adder", function()
+    print("spawning adder xd")
+    SpawnAdder("adder")
+  end, true, true)
+
+  menu:addItem("Say hi", function()
+    print("hi")
+  end, false, true)
+
+  menu:openMenu()
 end)

client/utils.lua

@@ -40,4 +40,21 @@ function errorPrint(...)
   local msgTemplate = '^3[%s]^1[ERROR] %s'
   local finalMsg = msgTemplate:format(currentResourceName, appendStr)
   print(finalMsg)
+end
+
+function locateMenuTableItem(table, value)
+  for i = 1, #table do
+    if table[i].id == value then return table[i] end
+  end
+  return nil
+end
+
+function tableFilter(t, filterIter)
+  local out = {}
+
+  for k, v in pairs(t) do
+    if filterIter(v, k, t) then out[k] = v end
+  end
+
+  return out
 end

web/src/components/MainWrapper.tsx

@@ -9,6 +9,7 @@ import { useHudReady } from '../hooks/useHudReady';
 import { ProgressBarWrapper } from './progress/ProgressBarWrapper';
 import { ScreenshotModeManager } from './misc/ScreenshotModeManager';
 import { CrosshairManager } from './crosshair/CrosshairManager';
+import MenuWrapper from './menu/Menu';
 
 const MainWrapper: React.FC = () => {
   useHudListener();
@@ -17,15 +18,16 @@ const MainWrapper: React.FC = () => {
   return (
     <React.Suspense fallback={<></>}>
       <ScreenshotModeManager>
-        <CinematicBars />
         <CrosshairManager />
+        <MenuWrapper />
         <ProgressBarWrapper />
         <Box h='100%' w='100%' p={4} bg='none'>
           <TextPrompt />
           <SettingsModal />
           <CircleHudWrapper />
         </Box>
       </ScreenshotModeManager>
+      <CinematicBars />
     </React.Suspense>
   );
 };

web/src/components/crosshair/CrosshairManager.tsx

@@ -15,8 +15,8 @@ export const CrosshairManager: React.FC = () => {
       position='absolute'
       h='100vh'
       w='100vw'
-      zIndex={1}
       display='flex'
+      zIndex={2}
       justifyContent='center'
       alignItems='center'
     >

web/src/components/menu/Menu.tsx

@@ -0,0 +1,144 @@
+import React, { useState } from 'react';
+import {
+  Box,
+  IconButton,
+  Text,
+} from '@chakra-ui/react';
+import { useNuiEvent } from '../../hooks/useNuiEvent';
+import { fetchNui } from '../../utils/fetchNui';
+import { debugData } from '../../utils/debugData';
+import { MdClose } from 'react-icons/md';
+
+interface MenuProps {
+  title: string;
+  items: MenuItemProps[];
+}
+
+interface MenuItemProps {
+  id: number;
+  title: string;
+}
+
+debugData([
+  {
+    action: 'openMenu',
+    data: {
+      title: 'Garage',
+      items: [
+        {
+          id: 1,
+          title: 'Open garage',
+        },
+        {
+          id: 1,
+          title: 'Store vehicle',
+        },
+        {
+          id: 1,
+          title: 'Store vehicle',
+        },
+        {
+          id: 1,
+          title: 'Store vehicle',
+        },
+        {
+          id: 1,
+          title: 'Store vehicle',
+        },
+      ],
+    },
+  },
+]);
+
+const MenuWrapper: React.FC = () => {
+  const [menu, setMenu] = useState<MenuProps | null>(null);
+  const [isOpen, setIsOpen] = useState<boolean>(true);
+
+  const handleItemClick = async (item: MenuItemProps) => {
+    await fetchNui('onMenuItemClick', item);
+  };
+
+  const handleCloseMenu = () => {
+    fetchNui('onCloseMenu');
+    setMenu(null);
+    setIsOpen(false);
+  };
+
+  useNuiEvent<MenuProps>('openMenu', data => {
+    setMenu(data);
+    setIsOpen(true);
+  });
+
+  useNuiEvent('closeMenu', () => {
+    setMenu(null);
+    setIsOpen(false);
+  });
+
+  console.log(menu?.title);
+
+  return (
+    <Box
+      position='absolute'
+      h='80vh'
+      w='100%'
+      justifyContent='center'
+      display='flex'
+      zIndex={2}
+      alignItems='center'
+    >
+      {isOpen && menu && (
+        <>
+          <Box
+            width={250}
+            display='flex'
+            justifyContent='center'
+            flexDirection='column'
+            alignItems='center'
+          >
+            <Box w='inherit' display='flex' flexDirection='row'>
+              <Box
+                mr={1}
+                w='inherit'
+                bg='gray.900'
+                mb={2}
+                borderRadius={5}
+                px={5}
+                py={2}
+              >
+                <Text fontWeight={500}>{menu?.title}</Text>
+              </Box>
+              <Box>
+                <IconButton
+                  aria-label='menu-close'
+                  onClick={handleCloseMenu}
+                  bg='gray.900'
+                >
+                  <MdClose fontSize={24} />
+                </IconButton>
+              </Box>
+            </Box>
+            <Box>
+              {menu.items &&
+                menu.items.map(item => (
+                  <Box
+                    cursor='pointer'
+                    onClick={() => handleItemClick(item)}
+                    background='gray.900'
+                    w={250}
+                    mb={1}
+                    borderRadius={5}
+                    px={5}
+                    py={2}
+                  >
+                    {item.title}
+                  </Box>
+                ))}
+            </Box>
+          </Box>
+        </>
+      )}
+    </Box>
+  );
+};
+
+export default MenuWrapper;

web/src/components/misc/CinematicBars.tsx

@@ -31,7 +31,7 @@ export const CinematicBars: React.FC = () => {
     <Box
       position='absolute'
       h='100vh'
-      zIndex={999}
+      zIndex={1}
       w='100%'
       display='flex'
       justifyContent='space-between'