chore(base): toggle phone ingame

Author: antonstjernquist

pnpm-lock.yaml

@@ -18,5 +18,5 @@ echo "Moving $name to destination $destination"
 source="./dist"
 
 # Move source to destination
-cp -r $source "$destination/$name"
+cp -Tr $source "$destination/$name"
 

scripts/move.sh

@@ -1,10 +1,19 @@
-let isFocused = false;
-const exps = global.exports;
+let isPhoneOpenState = false;
 
 RegisterCommand(
-  'mock-command',
+  'npwd-toggle-phone',
   () => {
-    console.log('calling mock command');
+    if (isPhoneOpenState) {
+      isPhoneOpenState = false;
+      global.SendNUIMessage({ type: 'SET_PHONE_OPEN', payload: false });
+      SetNuiFocus(false, false);
+    } else {
+      isPhoneOpenState = true;
+      global.SendNUIMessage({ type: 'SET_PHONE_OPEN', payload: true });
+      SetNuiFocus(true, true);
+    }
   },
   false,
 );
+
+RegisterKeyMapping('npwd-toggle-phone', 'Open Phone', 'keyboard', 'M');

src/client/index.ts

@@ -14,6 +14,7 @@
 		"@tanstack/react-query-devtools": "4",
 		"react": "^18.3.1",
 		"react-dom": "^18.3.1",
+		"react-fivem-hooks": "^1.0.3",
 		"react-router": "^6.26.1",
 		"react-router-dom": "^6.26.1"
 	},

src/ui/package.json

@@ -5,6 +5,7 @@ import { useEffect } from 'react';
 import { setTheme } from './utils/theme';
 import { Footer } from './components/Main/Footer';
 import { Header } from './components/Main/Header';
+import { useNuiEvent } from 'react-fivem-hooks';
 
 export const lightTheme = {
   textColor: {
@@ -35,6 +36,15 @@ function App() {
       : setTheme(lightTheme);
   }, []);
 
+  const { data: isOpen } = useNuiEvent<boolean>({
+    event: 'SET_PHONE_OPEN',
+    defaultValue: false,
+  });
+
+  if (!isOpen) {
+    return null;
+  }
+
   return (
     <Frame>
       <main className="flex flex-col flex-1 overflow-hidden">

src/ui/src/App.tsx

@@ -1,6 +1,7 @@
 import { QueryCache, QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
 import { PropsWithChildren } from 'react';
+import { NuiProvider } from 'react-fivem-hooks';
 
 export const Providers = ({ children }: PropsWithChildren) => {
   const queryClient = new QueryClient({
@@ -19,8 +20,10 @@ export const Providers = ({ children }: PropsWithChildren) => {
 
   return (
     <QueryClientProvider client={queryClient}>
-      {/* <ReactQueryDevtools initialIsOpen={false} /> */}
-      {children}
+      <NuiProvider>
+        {/* <ReactQueryDevtools initialIsOpen={false} /> */}
+        {children}
+      </NuiProvider>
     </QueryClientProvider>
   );
 };