dirk-cfx-react 1.0.0

package/dist/providers/index.mjs

@@ -0,0 +1,205 @@
+import '@mantine/notifications/styles.css';
+import '@mantine/core/styles.css';
+import '@/styles/niceFont.css';
+import '@/styles/scrollBar.css';
+import { library } from '@fortawesome/fontawesome-svg-core';
+import { fab } from '@fortawesome/free-brands-svg-icons';
+import { far } from '@fortawesome/free-regular-svg-icons';
+import { fas } from '@fortawesome/free-solid-svg-icons';
+import { createTheme, MantineProvider, BackgroundImage } from '@mantine/core';
+import { create } from 'zustand';
+import { jsx, Fragment } from 'react/jsx-runtime';
+
+// src/providers/DirkProvider.tsx
+
+// src/utils/misc.ts
+var isEnvBrowser = () => !window.invokeNative;
+
+// src/utils/fetchNui.ts
+async function fetchNui(eventName, data, mockData) {
+  const options = {
+    method: "post",
+    headers: {
+      "Content-Type": "application/json; charset=UTF-8"
+    },
+    body: JSON.stringify(data)
+  };
+  console.log("Mock Data:", mockData);
+  console.log("Is Env Browser:", isEnvBrowser());
+  const resourceName = window.GetParentResourceName ? window.GetParentResourceName() : "nui-frame-app";
+  const resp = await fetch(`https://${resourceName}/${eventName}`, options);
+  const respFormatted = await resp.json();
+  return respFormatted;
+}
+function fetchOnLoad(eventName, data, mockData) {
+  return fetchNui(eventName, data, mockData).catch((err) => {
+    console.error(`[fetchOnLoad] Failed for ${eventName}:`, err);
+    throw err;
+  });
+}
+var localeStore = create((set, get) => {
+  return {
+    locales: {
+      "OccupantsDesc": "Here you can view and manage the occupants of your traphouse. These occupants can be used mainly for selling drugs to the NPCs surrounding your traphouse. However they have other uses to so be careful who you add as an occupant."
+    },
+    locale: (key, ...args) => {
+      const exists = get().locales[key];
+      let translation = exists || key;
+      if (args.length) {
+        translation = translation.replace(/%s/g, () => String(args.shift() || ""));
+      }
+      return translation;
+    }
+  };
+});
+localeStore.getState().locale;
+fetchOnLoad("GET_LOCALES").then((data) => {
+  localeStore.setState({ locales: data });
+});
+var theme = createTheme({
+  primaryColor: "dirk",
+  primaryShade: 9,
+  defaultRadius: "xxs",
+  fontFamily: "Akrobat Regular, sans-serif",
+  radius: {
+    xxs: "0.2vh",
+    xs: "0.4vh",
+    sm: "0.75vh",
+    md: "1vh",
+    lg: "1.5vh",
+    xl: "2vh",
+    xxl: "3vh"
+  },
+  fontSizes: {
+    xxs: "1.2vh",
+    xs: "1.5vh",
+    sm: "1.8vh",
+    md: "2.2vh",
+    lg: "2.8vh",
+    xl: "3.3vh",
+    xxl: "3.8vh"
+  },
+  spacing: {
+    xxs: "0.5vh",
+    xs: "0.75vh",
+    sm: "1.5vh",
+    md: "2vh",
+    lg: "3vh",
+    xl: "4vh",
+    xxl: "5vh"
+  },
+  components: {
+    Progress: {
+      styles: {
+        root: {
+          backgroundColor: "rgba(77, 77, 77, 0.4)"
+        }
+      }
+    },
+    Select: {
+      styles: {
+        dropdown: {
+          borderRadius: "var(--mantine-radius-xxs)"
+        },
+        input: {
+          padding: "var(--mantine-spacing-sm)"
+        },
+        item: {
+          borderRadius: "var(--mantine-radius-xxs)"
+        },
+        wrapper: {
+          borderRadius: "var(--mantine-radius-xxs)"
+        },
+        option: {
+          borderRadius: "var(--mantine-radius-xxs)"
+        }
+      }
+    },
+    MultiSelect: {
+      styles: {
+        dropdown: {
+          borderRadius: "var(--mantine-radius-xxs)"
+        },
+        pill: {
+          borderRadius: "var(--mantine-radius-xxs)"
+        },
+        item: {
+          borderRadius: "var(--mantine-radius-xxs)"
+        },
+        wrapper: {
+          borderRadius: "var(--mantine-radius-xxs)"
+        },
+        option: {
+          borderRadius: "var(--mantine-radius-xxs)"
+        }
+      }
+    },
+    TextInput: {
+      styles: {
+        section: {
+          marginRight: "0.2vh"
+        },
+        input: {
+          padding: "var(--mantine-spacing-sm)"
+        }
+      }
+    }
+  },
+  colors: {
+    dark: [
+      "#ffffff",
+      "#e2e2e2",
+      "#c6c6c6",
+      "#aaaaaa",
+      "#8d8d8d",
+      "#717171",
+      "#555555",
+      "#393939",
+      "#1c1c1c",
+      "#000000"
+    ],
+    dirk: [
+      "#ffffff",
+      "#f3fce9",
+      "#dbf5bd",
+      "#c3ee91",
+      "#ace765",
+      "#94e039",
+      "#7ac61f",
+      "#5f9a18",
+      "#29420a",
+      "#446e11"
+    ]
+  }
+});
+var theme_default = theme;
+library.add(fas, far, fab);
+var useSettings = create((set) => ({
+  game: "rdr3",
+  primaryColor: "teal",
+  primaryShade: 6,
+  customTheme: {}
+}));
+function DirkProvider(props) {
+  useSettings((data) => data.primaryColor);
+  useSettings((data) => data.primaryShade);
+  useSettings((data) => data.customTheme);
+  return /* @__PURE__ */ jsx(MantineProvider, { theme: theme_default, defaultColorScheme: "dark", children: /* @__PURE__ */ jsx(Wrapper, { children: props.children }) });
+}
+function Wrapper({ children }) {
+  const game = useSettings((data) => data.game);
+  return isEnvBrowser() ? /* @__PURE__ */ jsx(
+    BackgroundImage,
+    {
+      w: "100vw",
+      h: "100vh",
+      style: { overflow: "hidden" },
+      src: game === "fivem" ? "https://i.ytimg.com/vi/TOxuNbXrO28/maxresdefault.jpg" : "https://raw.githubusercontent.com/Jump-On-Studios/RedM-jo_libs/refs/heads/main/source-repositories/Menu/public/assets/images/background_dev.jpg",
+      children
+    }
+  ) : /* @__PURE__ */ jsx(Fragment, { children });
+}
+
+export { DirkProvider, useSettings };
+//# sourceMappingURL=index.mjs.map
+//# sourceMappingURL=index.mjs.map

package/dist/providers/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/utils/misc.ts","../../src/utils/fetchNui.ts","../../src/utils/locales.ts","../../src/theme.ts","../../src/providers/DirkProvider.tsx"],"names":["create"],"mappings":"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","file":"index.mjs","sourcesContent":["export const isEnvBrowser = (): boolean => !(window as any).invokeNative;\r\n\r\n// Basic no operation function\r\nexport const noop = () => {};\r\n\r\nexport const splitFAString = (faString:string) => {\r\n  const [prefix, newIcon] = faString.split('-');\r\n  if (!prefix || !newIcon) return {prefix: 'fas', newIcon: 'question'};\r\n  return {prefix, newIcon};\r\n}\r\n\r\nexport const numberToRoman = (num:number) => {\r\n  const romanNumerals = ['I', 'II', 'III', 'IV', 'V', 'VI', 'VII', 'VIII', 'IX', 'X', 'XI', 'XII', 'XIII', 'XIV', 'XV', 'XVI', 'XVII', 'XVIII', 'XIX', 'XX']  \r\n  return romanNumerals[num]\r\n}\r\n\r\nexport const copyToClipboard = (text:string) => {\r\n  const el = document.createElement('textarea');\r\n  el.value = text;\r\n  document.body.appendChild(el);\r\n  el.select();\r\n  document.execCommand('copy');\r\n  document.body.removeChild(el);\r\n}\r\n\r\nexport const openLink = (url:string) => {\r\n  if (isEnvBrowser()) {\r\n    window.open(url, '_blank');\r\n  } else {\r\n    // @ts-expect-error -- invokeNative exists in NUI\r\n    window.invokeNative('openLink', url);\r\n  } \r\n}","import { isEnvBrowser } from \"./misc\";\r\n\r\n/**\r\n * Simple wrapper around fetch API tailored for CEF/NUI use. This abstraction\r\n * can be extended to include AbortController if needed or if the response isn't\r\n * JSON. Tailor it to your needs.\r\n *\r\n * @param eventName - The endpoint eventname to target\r\n * @param data - Data you wish to send in the NUI Callback\r\n * @param mockData - Mock data to be returned if in the browser\r\n *\r\n * @return returnData - A promise for the data sent back by the NuiCallbacks CB argument\r\n */\r\n\r\nexport async function fetchNui<T = unknown>(\r\n  eventName: string,\r\n  data?: unknown,\r\n  mockData?: T,\r\n): Promise<T> {\r\n  const options = {\r\n    method: \"post\",\r\n    headers: {\r\n      \"Content-Type\": \"application/json; charset=UTF-8\",\r\n    },\r\n    body: JSON.stringify(data),\r\n  };\r\n  console.log('Mock Data:', mockData);\r\n  console.log('Is Env Browser:', isEnvBrowser());\r\n  if (isEnvBrowser() && mockData !== undefined) return mockData;\r\n\r\n  const resourceName = (window as any).GetParentResourceName\r\n    ? (window as any).GetParentResourceName()\r\n    : \"nui-frame-app\";\r\n\r\n  const resp = await fetch(`https://${resourceName}/${eventName}`, options);\r\n\r\n  const respFormatted = await resp.json();\r\n\r\n  return respFormatted;\r\n}\r\n\r\n/**\r\n * fetchOnLoad — triggers fetchNui immediately when called.\r\n * Can safely be used anywhere (even top-level, outside React).\r\n *\r\n * Usage:\r\n *   fetchOnLoad<MyType>(\"getData\").then(data => myStore.setState({ data }));\r\n */\r\nexport function fetchOnLoad<T = unknown>(\r\n  eventName: string,\r\n  data?: unknown,\r\n  mockData?: T\r\n): Promise<T> {\r\n  // just call it directly\r\n  return fetchNui<T>(eventName, data, mockData)\r\n    .catch((err) => {\r\n      console.error(`[fetchOnLoad] Failed for ${eventName}:`, err);\r\n      throw err;\r\n    });\r\n}\r\n\r\n\r\nexport const fetchLuaTable = <T>(tableName: string) => () => {\r\n  if (isEnvBrowser()) {\r\n    return Promise.resolve({} as T);\r\n  }\r\n  return fetchNui<T>('GET_LUA_TABLE', { tableName });\r\n};\r\n\r\n","import { create } from \"zustand\";\r\nimport { fetchOnLoad } from \"../utils/fetchNui\";\r\n\r\n\r\ntype localeType = (key: string, ...args: string[]) => string;\r\n\r\ntype LocalesProps = {\r\n  [key: string]: string;\r\n}\r\n\r\ntype LocaleStoreProps = {\r\n  locale: localeType;\r\n  locales: LocalesProps;\r\n};\r\n\r\n\r\nexport const localeStore = create<LocaleStoreProps>((set, get) => {\r\n  return {\r\n    locales: {\r\n      \"OccupantsDesc\": \"Here you can view and manage the occupants of your traphouse. These occupants can be used mainly for selling drugs to the NPCs surrounding your traphouse. However they have other uses to so be careful who you add as an occupant.\", \r\n    },\r\n    locale: (key: string, ...args: (string|number)[]): string => {\r\n      const exists = get().locales[key];\r\n      if (!exists){\r\n        // add to a jsonfile called missing_locales.json within src of project \r\n     \r\n      }\r\n      let translation = exists || key;\r\n      if (args.length) {\r\n        // convert the arg to a string and replace the %s in the translation\r\n  \r\n\r\n        translation = translation.replace(/%s/g, () => String(args.shift() || ''));\r\n      }\r\n      return translation;\r\n    },\r\n  };\r\n});\r\n\r\n// export locale as a standalone function \r\nexport const locale = localeStore.getState().locale;\r\n\r\nfetchOnLoad<LocalesProps>('GET_LOCALES').then((data) => {\r\n  localeStore.setState({ locales: data });\r\n});\r\n","import { createTheme } from \"@mantine/core\";\r\n\r\nconst theme = createTheme({\r\n  primaryColor: \"dirk\",\r\n  primaryShade: 9,\r\n  defaultRadius: \"xxs\",\r\n  fontFamily: \"Akrobat Regular, sans-serif\",\r\n\r\n  radius:{\r\n    xxs: '0.2vh',\r\n    xs: '0.4vh',\r\n    sm: '0.75vh',\r\n    md: '1vh',\r\n    lg: '1.5vh',\r\n    xl: '2vh',\r\n    xxl: '3vh',\r\n  },\r\n\r\n  fontSizes: {\r\n    xxs: '1.2vh',\r\n    xs: '1.5vh',\r\n    sm: '1.8vh',\r\n    md: '2.2vh',\r\n    lg: '2.8vh',\r\n    xl: '3.3vh',\r\n    xxl: '3.8vh',\r\n  },\r\n\r\n  spacing:{\r\n    xxs: '0.5vh',\r\n    xs: '0.75vh',\r\n    sm: '1.5vh',\r\n    md: '2vh',\r\n    lg: '3vh',\r\n    xl: '4vh',\r\n    xxl: '5vh',\r\n  },\r\n\r\n  components:{\r\n    Progress:{\r\n      styles:{\r\n        root:{\r\n          backgroundColor: 'rgba(77, 77, 77, 0.4)',\r\n        },\r\n        \r\n      }\r\n    },\r\n\r\n    Select:{\r\n      styles:{\r\n        dropdown:{\r\n          borderRadius: 'var(--mantine-radius-xxs)',\r\n        },\r\n        input:{\r\n          padding: 'var(--mantine-spacing-sm)',\r\n        },\r\n        item:{\r\n          \r\n          borderRadius: 'var(--mantine-radius-xxs)',\r\n        },\r\n        wrapper:{\r\n          \r\n          borderRadius: 'var(--mantine-radius-xxs)',\r\n        },\r\n        option:{\r\n          borderRadius: 'var(--mantine-radius-xxs)',\r\n        },\r\n\r\n      }\r\n    },\r\n    MultiSelect:{\r\n      styles:{\r\n        dropdown:{\r\n          borderRadius: 'var(--mantine-radius-xxs)',\r\n        },\r\n        pill:{\r\n          borderRadius: 'var(--mantine-radius-xxs)',\r\n        },\r\n        item:{\r\n          borderRadius: 'var(--mantine-radius-xxs)',\r\n        },\r\n        wrapper:{\r\n          borderRadius: 'var(--mantine-radius-xxs)',\r\n        },\r\n        option:{\r\n          borderRadius: 'var(--mantine-radius-xxs)',\r\n        },\r\n\r\n      }\r\n    },\r\n    TextInput:{\r\n      styles:{\r\n        section:{\r\n          marginRight: '0.2vh',\r\n        },\r\n\r\n        input:{\r\n          padding: 'var(--mantine-spacing-sm)',\r\n        },\r\n\r\n       \r\n        \r\n      }\r\n    },\r\n  },\r\n\r\n  colors: {\r\n    dark:[\r\n      \"#ffffff\",\r\n      \"#e2e2e2\",\r\n      \"#c6c6c6\",\r\n      \"#aaaaaa\",\r\n      \"#8d8d8d\",\r\n      \"#717171\",\r\n      \"#555555\",\r\n      \"#393939\",\r\n      \"#1c1c1c\",\r\n      \"#000000\",\r\n    ],\r\n    dirk:[\r\n      \"#ffffff\",\r\n      \"#f3fce9\",\r\n      \"#dbf5bd\",\r\n      \"#c3ee91\",\r\n      \"#ace765\",\r\n      \"#94e039\",\r\n      \"#7ac61f\",\r\n      \"#5f9a18\",\r\n      \"#29420a\",\r\n      \"#446e11\",\r\n    ],\r\n  },\r\n});\r\n\r\n\r\nexport default theme;","import '@mantine/notifications/styles.css';\r\nimport '@mantine/core/styles.css';\r\nimport '@/styles/niceFont.css';\r\nimport '@/styles/scrollBar.css';\r\n\r\nimport { library } from \"@fortawesome/fontawesome-svg-core\";\r\nimport { fab } from \"@fortawesome/free-brands-svg-icons\";\r\nimport { far } from \"@fortawesome/free-regular-svg-icons\";\r\nimport { fas } from \"@fortawesome/free-solid-svg-icons\";\r\nimport { BackgroundImage, MantineProvider } from '@mantine/core';\r\nimport { isEnvBrowser } from '@/utils';\r\nimport { create } from 'zustand';\r\nimport theme from '@/theme';\r\nlibrary.add(fas, far, fab);\r\n\r\nexport type DirkProviderProps = {\r\n  fakeBackground?: boolean;\r\n  children: React.ReactNode;\r\n}\r\n\r\nexport const useSettings = create<{\r\n  game: 'rdr3' | 'fivem';\r\n  primaryColor: string;\r\n  primaryShade: number;\r\n  customTheme: Record<string, string[]>;\r\n}>((set) => ({\r\n  game: 'rdr3',\r\n  primaryColor: 'teal',\r\n  primaryShade: 6,\r\n  customTheme: {},\r\n}));\r\n\r\nexport function DirkProvider(props: DirkProviderProps) {\r\n  const primaryColor = useSettings((data) => data.primaryColor);\r\n  const primaryShade = useSettings((data) => data.primaryShade);\r\n  const customTheme = useSettings((data) => data.customTheme);\r\n  \r\n  // Ensure the theme is updated when the settings change\r\n\r\n  // useEffect(() => {\r\n  //   const updatedTheme = {\r\n  //     ...theme, // Start with the existing theme object\r\n  //     colors: {\r\n  //       ...theme.colors, // Copy the existing colors\r\n  //       custom: customTheme\r\n  //     },\r\n  //   };\r\n    \r\n  //   setCurTheme(updatedTheme);\r\n  //   // set primary color\r\n  //   setCurTheme({\r\n  //     ...updatedTheme,\r\n  //     primaryColor: primaryColor,\r\n  //     primaryShade: primaryShade,\r\n  //   });\r\n\r\n  // }, [primaryColor, primaryShade, customTheme]);\r\n\r\n  // useEffect(() => {\r\n  //   // fetchSettings();\r\n  //   runInitialFetches();\r\n  // }, []);\r\n\r\n  return (\r\n    <MantineProvider theme={theme} defaultColorScheme='dark'>\r\n      <Wrapper>\r\n        {props.children}\r\n      </Wrapper>\r\n    </MantineProvider>\r\n  );\r\n}\r\n\r\nfunction Wrapper({ children }: { children: React.ReactNode }) {\r\n  const game = useSettings((data) => data.game);\r\n  return isEnvBrowser() ? ( \r\n    <BackgroundImage w='100vw' h='100vh' style={{overflow:'hidden'}}\r\n      src={game === 'fivem' ?\r\n        \"https://i.ytimg.com/vi/TOxuNbXrO28/maxresdefault.jpg\"\r\n        : \"https://raw.githubusercontent.com/Jump-On-Studios/RedM-jo_libs/refs/heads/main/source-repositories/Menu/public/assets/images/background_dev.jpg\"}\r\n    >  \r\n      {children}\r\n    </BackgroundImage>\r\n  ) : (\r\n    <>{children}</>\r\n  )\r\n}\r\n\r\n"]}

package/dist/utils/index.d.mts

@@ -0,0 +1,61 @@
+import * as zustand from 'zustand';
+
+declare function colorWithAlpha(color: string, alpha: number): string;
+
+/**
+ * Simple wrapper around fetch API tailored for CEF/NUI use. This abstraction
+ * can be extended to include AbortController if needed or if the response isn't
+ * JSON. Tailor it to your needs.
+ *
+ * @param eventName - The endpoint eventname to target
+ * @param data - Data you wish to send in the NUI Callback
+ * @param mockData - Mock data to be returned if in the browser
+ *
+ * @return returnData - A promise for the data sent back by the NuiCallbacks CB argument
+ */
+declare function fetchNui<T = unknown>(eventName: string, data?: unknown, mockData?: T): Promise<T>;
+/**
+ * fetchOnLoad — triggers fetchNui immediately when called.
+ * Can safely be used anywhere (even top-level, outside React).
+ *
+ * Usage:
+ *   fetchOnLoad<MyType>("getData").then(data => myStore.setState({ data }));
+ */
+declare function fetchOnLoad<T = unknown>(eventName: string, data?: unknown, mockData?: T): Promise<T>;
+declare const fetchLuaTable: <T>(tableName: string) => () => Promise<T>;
+
+interface InternalEvent<T = unknown> {
+    action: string;
+    data?: T;
+}
+/**
+ * Emulates dispatching an event using SendNuiMessage in the lua scripts.
+ * This is used when developing in browser
+ *
+ * @param events - The event you want to cover
+ * @param timer - How long until it should trigger (ms)
+ */
+declare const internalEvent: <P>(events: InternalEvent<P>[], timer?: number) => void;
+
+type localeType = (key: string, ...args: string[]) => string;
+type LocalesProps = {
+    [key: string]: string;
+};
+type LocaleStoreProps = {
+    locale: localeType;
+    locales: LocalesProps;
+};
+declare const localeStore: zustand.UseBoundStore<zustand.StoreApi<LocaleStoreProps>>;
+declare const locale: localeType;
+
+declare const isEnvBrowser: () => boolean;
+declare const noop: () => void;
+declare const splitFAString: (faString: string) => {
+    prefix: string;
+    newIcon: string;
+};
+declare const numberToRoman: (num: number) => string;
+declare const copyToClipboard: (text: string) => void;
+declare const openLink: (url: string) => void;
+
+export { type InternalEvent, colorWithAlpha, copyToClipboard, fetchLuaTable, fetchNui, fetchOnLoad, internalEvent, isEnvBrowser, locale, localeStore, noop, numberToRoman, openLink, splitFAString };

package/dist/utils/index.d.ts

@@ -0,0 +1,61 @@
+import * as zustand from 'zustand';
+
+declare function colorWithAlpha(color: string, alpha: number): string;
+
+/**
+ * Simple wrapper around fetch API tailored for CEF/NUI use. This abstraction
+ * can be extended to include AbortController if needed or if the response isn't
+ * JSON. Tailor it to your needs.
+ *
+ * @param eventName - The endpoint eventname to target
+ * @param data - Data you wish to send in the NUI Callback
+ * @param mockData - Mock data to be returned if in the browser
+ *
+ * @return returnData - A promise for the data sent back by the NuiCallbacks CB argument
+ */
+declare function fetchNui<T = unknown>(eventName: string, data?: unknown, mockData?: T): Promise<T>;
+/**
+ * fetchOnLoad — triggers fetchNui immediately when called.
+ * Can safely be used anywhere (even top-level, outside React).
+ *
+ * Usage:
+ *   fetchOnLoad<MyType>("getData").then(data => myStore.setState({ data }));
+ */
+declare function fetchOnLoad<T = unknown>(eventName: string, data?: unknown, mockData?: T): Promise<T>;
+declare const fetchLuaTable: <T>(tableName: string) => () => Promise<T>;
+
+interface InternalEvent<T = unknown> {
+    action: string;
+    data?: T;
+}
+/**
+ * Emulates dispatching an event using SendNuiMessage in the lua scripts.
+ * This is used when developing in browser
+ *
+ * @param events - The event you want to cover
+ * @param timer - How long until it should trigger (ms)
+ */
+declare const internalEvent: <P>(events: InternalEvent<P>[], timer?: number) => void;
+
+type localeType = (key: string, ...args: string[]) => string;
+type LocalesProps = {
+    [key: string]: string;
+};
+type LocaleStoreProps = {
+    locale: localeType;
+    locales: LocalesProps;
+};
+declare const localeStore: zustand.UseBoundStore<zustand.StoreApi<LocaleStoreProps>>;
+declare const locale: localeType;
+
+declare const isEnvBrowser: () => boolean;
+declare const noop: () => void;
+declare const splitFAString: (faString: string) => {
+    prefix: string;
+    newIcon: string;
+};
+declare const numberToRoman: (num: number) => string;
+declare const copyToClipboard: (text: string) => void;
+declare const openLink: (url: string) => void;
+
+export { type InternalEvent, colorWithAlpha, copyToClipboard, fetchLuaTable, fetchNui, fetchOnLoad, internalEvent, isEnvBrowser, locale, localeStore, noop, numberToRoman, openLink, splitFAString };

package/dist/utils/index.js

@@ -0,0 +1,283 @@
+'use strict';
+
+var zustand = require('zustand');
+
+// src/utils/colorWithAlpha.ts
+var colorNames = {
+  AliceBlue: { r: 240, g: 248, b: 255 },
+  AntiqueWhite: { r: 250, g: 235, b: 215 },
+  Aqua: { r: 0, g: 255, b: 255 },
+  Aquamarine: { r: 127, g: 255, b: 212 },
+  Azure: { r: 240, g: 255, b: 255 },
+  Beige: { r: 245, g: 245, b: 220 },
+  Bisque: { r: 255, g: 228, b: 196 },
+  Black: { r: 0, g: 0, b: 0 },
+  BlanchedAlmond: { r: 255, g: 235, b: 205 },
+  Blue: { r: 0, g: 0, b: 255 },
+  BlueViolet: { r: 138, g: 43, b: 226 },
+  Brown: { r: 165, g: 42, b: 42 },
+  BurlyWood: { r: 222, g: 184, b: 135 },
+  CadetBlue: { r: 95, g: 158, b: 160 },
+  Chartreuse: { r: 127, g: 255, b: 0 },
+  Chocolate: { r: 210, g: 105, b: 30 },
+  Coral: { r: 255, g: 127, b: 80 },
+  CornflowerBlue: { r: 100, g: 149, b: 237 },
+  Cornsilk: { r: 255, g: 248, b: 220 },
+  Crimson: { r: 220, g: 20, b: 60 },
+  Cyan: { r: 0, g: 255, b: 255 },
+  DarkBlue: { r: 0, g: 0, b: 139 },
+  DarkCyan: { r: 0, g: 139, b: 139 },
+  DarkGoldenRod: { r: 184, g: 134, b: 11 },
+  DarkGray: { r: 169, g: 169, b: 169 },
+  DarkGreen: { r: 0, g: 100, b: 0 },
+  DarkKhaki: { r: 189, g: 183, b: 107 },
+  DarkMagenta: { r: 139, g: 0, b: 139 },
+  DarkOliveGreen: { r: 85, g: 107, b: 47 },
+  DarkOrange: { r: 255, g: 140, b: 0 },
+  DarkOrchid: { r: 153, g: 50, b: 204 },
+  DarkRed: { r: 139, g: 0, b: 0 },
+  DarkSalmon: { r: 233, g: 150, b: 122 },
+  DarkSeaGreen: { r: 143, g: 188, b: 143 },
+  DarkSlateBlue: { r: 72, g: 61, b: 139 },
+  DarkSlateGray: { r: 47, g: 79, b: 79 },
+  DarkTurquoise: { r: 0, g: 206, b: 209 },
+  DarkViolet: { r: 148, g: 0, b: 211 },
+  DeepPink: { r: 255, g: 20, b: 147 },
+  DeepSkyBlue: { r: 0, g: 191, b: 255 },
+  DimGray: { r: 105, g: 105, b: 105 },
+  DodgerBlue: { r: 30, g: 144, b: 255 },
+  FireBrick: { r: 178, g: 34, b: 34 },
+  FloralWhite: { r: 255, g: 250, b: 240 },
+  ForestGreen: { r: 34, g: 139, b: 34 },
+  Fuchsia: { r: 255, g: 0, b: 255 },
+  Gainsboro: { r: 220, g: 220, b: 220 },
+  GhostWhite: { r: 248, g: 248, b: 255 },
+  Gold: { r: 255, g: 215, b: 0 },
+  GoldenRod: { r: 218, g: 165, b: 32 },
+  Gray: { r: 128, g: 128, b: 128 },
+  Green: { r: 0, g: 128, b: 0 },
+  GreenYellow: { r: 173, g: 255, b: 47 },
+  HoneyDew: { r: 240, g: 255, b: 240 },
+  HotPink: { r: 255, g: 105, b: 180 },
+  IndianRed: { r: 205, g: 92, b: 92 },
+  Indigo: { r: 75, g: 0, b: 130 },
+  Ivory: { r: 255, g: 255, b: 240 },
+  Khaki: { r: 240, g: 230, b: 140 },
+  Lavender: { r: 230, g: 230, b: 250 },
+  LavenderBlush: { r: 255, g: 240, b: 245 },
+  LawnGreen: { r: 124, g: 252, b: 0 },
+  LemonChiffon: { r: 255, g: 250, b: 205 },
+  LightBlue: { r: 173, g: 216, b: 230 },
+  LightCoral: { r: 240, g: 128, b: 128 },
+  LightCyan: { r: 224, g: 255, b: 255 },
+  LightGoldenRodYellow: { r: 250, g: 250, b: 210 },
+  LightGray: { r: 211, g: 211, b: 211 },
+  LightGreen: { r: 144, g: 238, b: 144 },
+  LightPink: { r: 255, g: 182, b: 193 },
+  LightSalmon: { r: 255, g: 160, b: 122 },
+  LightSeaGreen: { r: 32, g: 178, b: 170 },
+  LightSkyBlue: { r: 135, g: 206, b: 250 },
+  LightSlateGray: { r: 119, g: 136, b: 153 },
+  LightSteelBlue: { r: 176, g: 196, b: 222 },
+  LightYellow: { r: 255, g: 255, b: 224 },
+  Lime: { r: 0, g: 255, b: 0 },
+  LimeGreen: { r: 50, g: 205, b: 50 },
+  Linen: { r: 250, g: 240, b: 230 },
+  Magenta: { r: 255, g: 0, b: 255 },
+  Maroon: { r: 128, g: 0, b: 0 },
+  // Maroon
+  MediumAquaMarine: { r: 102, g: 205, b: 170 },
+  MediumBlue: { r: 0, g: 0, b: 205 },
+  MediumOrchid: { r: 186, g: 85, b: 211 },
+  MediumPurple: { r: 147, g: 112, b: 219 },
+  MediumSeaGreen: { r: 60, g: 179, b: 113 },
+  MediumSlateBlue: { r: 123, g: 104, b: 238 },
+  MediumSpringGreen: { r: 0, g: 250, b: 154 },
+  MediumTurquoise: { r: 72, g: 209, b: 204 },
+  MediumVioletRed: { r: 199, g: 21, b: 133 },
+  MidnightBlue: { r: 25, g: 25, b: 112 },
+  MintCream: { r: 245, g: 255, b: 250 },
+  MistyRose: { r: 255, g: 228, b: 225 },
+  Moccasin: { r: 255, g: 228, b: 181 },
+  NavajoWhite: { r: 255, g: 222, b: 173 },
+  Navy: { r: 0, g: 0, b: 128 },
+  OldLace: { r: 253, g: 245, b: 230 },
+  Olive: { r: 128, g: 128, b: 0 },
+  OliveDrab: { r: 107, g: 142, b: 35 },
+  Orange: { r: 255, g: 165, b: 0 },
+  OrangeRed: { r: 255, g: 69, b: 0 },
+  Orchid: { r: 218, g: 112, b: 214 },
+  PaleGoldenRod: { r: 238, g: 232, b: 170 },
+  PaleGreen: { r: 152, g: 251, b: 152 },
+  PaleTurquoise: { r: 175, g: 238, b: 238 },
+  PaleVioletRed: { r: 219, g: 112, b: 147 },
+  PapayaWhip: { r: 255, g: 239, b: 213 },
+  PeachPuff: { r: 255, g: 218, b: 185 },
+  Peru: { r: 205, g: 133, b: 63 },
+  Pink: { r: 255, g: 192, b: 203 },
+  Plum: { r: 221, g: 160, b: 221 },
+  PowderBlue: { r: 176, g: 224, b: 230 },
+  Purple: { r: 128, g: 0, b: 128 },
+  RebeccaPurple: { r: 102, g: 51, b: 153 },
+  Red: { r: 255, g: 0, b: 0 },
+  RosyBrown: { r: 188, g: 143, b: 143 },
+  RoyalBlue: { r: 65, g: 105, b: 225 },
+  SaddleBrown: { r: 139, g: 69, b: 19 },
+  Salmon: { r: 250, g: 128, b: 114 },
+  SandyBrown: { r: 244, g: 164, b: 96 },
+  SeaGreen: { r: 46, g: 139, b: 87 },
+  SeaShell: { r: 255, g: 245, b: 238 },
+  Sienna: { r: 160, g: 82, b: 45 },
+  Silver: { r: 192, g: 192, b: 192 },
+  SkyBlue: { r: 135, g: 206, b: 235 },
+  SlateBlue: { r: 106, g: 90, b: 205 },
+  SlateGray: { r: 112, g: 128, b: 144 },
+  Snow: { r: 255, g: 250, b: 250 },
+  SpringGreen: { r: 0, g: 255, b: 127 },
+  SteelBlue: { r: 70, g: 130, b: 180 },
+  Tan: { r: 210, g: 180, b: 140 },
+  Teal: { r: 0, g: 128, b: 128 },
+  Thistle: { r: 216, g: 191, b: 216 },
+  Tomato: { r: 255, g: 99, b: 71 },
+  Turquoise: { r: 64, g: 224, b: 208 },
+  Violet: { r: 238, g: 130, b: 238 },
+  Wheat: { r: 245, g: 222, b: 179 },
+  White: { r: 255, g: 255, b: 255 },
+  WhiteSmoke: { r: 245, g: 245, b: 245 },
+  Yellow: { r: 255, g: 255, b: 0 },
+  YellowGreen: { r: 154, g: 205, b: 50 }
+};
+function colorWithAlpha(color, alpha) {
+  const lowerCasedColor = color.toLowerCase();
+  if (colorNames[lowerCasedColor]) {
+    const rgb = colorNames[lowerCasedColor];
+    return `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${alpha})`;
+  }
+  if (/^#([A-Fa-f0-9]{6})$/.test(color)) {
+    const hex = color.slice(1);
+    const bigint = parseInt(hex, 16);
+    const r = bigint >> 16 & 255;
+    const g = bigint >> 8 & 255;
+    const b = bigint & 255;
+    return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+  }
+  if (/^rgb\((\d{1,3}), (\d{1,3}), (\d{1,3})\)$/.test(color)) {
+    const result = color.match(/^rgb\((\d{1,3}), (\d{1,3}), (\d{1,3})\)$/);
+    if (result) {
+      return `rgba(${result[1]}, ${result[2]}, ${result[3]}, ${alpha})`;
+    }
+  }
+  return color;
+}
+
+// src/utils/misc.ts
+var isEnvBrowser = () => !window.invokeNative;
+var noop = () => {
+};
+var splitFAString = (faString) => {
+  const [prefix, newIcon] = faString.split("-");
+  if (!prefix || !newIcon) return { prefix: "fas", newIcon: "question" };
+  return { prefix, newIcon };
+};
+var numberToRoman = (num) => {
+  const romanNumerals = ["I", "II", "III", "IV", "V", "VI", "VII", "VIII", "IX", "X", "XI", "XII", "XIII", "XIV", "XV", "XVI", "XVII", "XVIII", "XIX", "XX"];
+  return romanNumerals[num];
+};
+var copyToClipboard = (text) => {
+  const el = document.createElement("textarea");
+  el.value = text;
+  document.body.appendChild(el);
+  el.select();
+  document.execCommand("copy");
+  document.body.removeChild(el);
+};
+var openLink = (url) => {
+  if (isEnvBrowser()) {
+    window.open(url, "_blank");
+  } else {
+    window.invokeNative("openLink", url);
+  }
+};
+
+// src/utils/fetchNui.ts
+async function fetchNui(eventName, data, mockData) {
+  const options = {
+    method: "post",
+    headers: {
+      "Content-Type": "application/json; charset=UTF-8"
+    },
+    body: JSON.stringify(data)
+  };
+  console.log("Mock Data:", mockData);
+  console.log("Is Env Browser:", isEnvBrowser());
+  if (isEnvBrowser() && mockData !== void 0) return mockData;
+  const resourceName = window.GetParentResourceName ? window.GetParentResourceName() : "nui-frame-app";
+  const resp = await fetch(`https://${resourceName}/${eventName}`, options);
+  const respFormatted = await resp.json();
+  return respFormatted;
+}
+function fetchOnLoad(eventName, data, mockData) {
+  return fetchNui(eventName, data, mockData).catch((err) => {
+    console.error(`[fetchOnLoad] Failed for ${eventName}:`, err);
+    throw err;
+  });
+}
+var fetchLuaTable = (tableName) => () => {
+  if (isEnvBrowser()) {
+    return Promise.resolve({});
+  }
+  return fetchNui("GET_LUA_TABLE", { tableName });
+};
+
+// src/utils/internalEvent.ts
+var internalEvent = (events, timer = 1e3) => {
+  if (isEnvBrowser()) {
+    for (const event of events) {
+      setTimeout(() => {
+        window.dispatchEvent(
+          new MessageEvent("message", {
+            data: {
+              action: event.action,
+              data: event.data
+            }
+          })
+        );
+      }, timer);
+    }
+  }
+};
+var localeStore = zustand.create((set, get) => {
+  return {
+    locales: {
+      "OccupantsDesc": "Here you can view and manage the occupants of your traphouse. These occupants can be used mainly for selling drugs to the NPCs surrounding your traphouse. However they have other uses to so be careful who you add as an occupant."
+    },
+    locale: (key, ...args) => {
+      const exists = get().locales[key];
+      let translation = exists || key;
+      if (args.length) {
+        translation = translation.replace(/%s/g, () => String(args.shift() || ""));
+      }
+      return translation;
+    }
+  };
+});
+var locale = localeStore.getState().locale;
+fetchOnLoad("GET_LOCALES").then((data) => {
+  localeStore.setState({ locales: data });
+});
+
+exports.colorWithAlpha = colorWithAlpha;
+exports.copyToClipboard = copyToClipboard;
+exports.fetchLuaTable = fetchLuaTable;
+exports.fetchNui = fetchNui;
+exports.fetchOnLoad = fetchOnLoad;
+exports.internalEvent = internalEvent;
+exports.isEnvBrowser = isEnvBrowser;
+exports.locale = locale;
+exports.localeStore = localeStore;
+exports.noop = noop;
+exports.numberToRoman = numberToRoman;
+exports.openLink = openLink;
+exports.splitFAString = splitFAString;
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map