dirk-cfx-react 1.0.49 → 1.0.50

package/dist/components/index.cjs

@@ -1,11 +1,11 @@
 'use strict';
 
+var react = require('react');
+var zustand = require('zustand');
 var reactFontawesome = require('@fortawesome/react-fontawesome');
 var core = require('@mantine/core');
 var jsxRuntime = require('react/jsx-runtime');
 var framerMotion = require('framer-motion');
-var react = require('react');
-var zustand = require('zustand');
 var clickSoundUrl = require('../click_sound-PNCRRTM4.mp3');
 var hoverSoundUrl = require('../hover_sound-NBUA222C.mp3');
 require('@mantine/core/styles.css');
@@ -170,11 +170,11 @@ var colorNames = {
   Yellow: { r: 255, g: 255, b: 0 },
   YellowGreen: { r: 154, g: 205, b: 50 }
 };
-function colorWithAlpha(color, alpha2) {
+function colorWithAlpha(color, alpha3) {
   const lowerCasedColor = color.toLowerCase();
   if (colorNames[lowerCasedColor]) {
     const rgb = colorNames[lowerCasedColor];
-    return `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${alpha2})`;
+    return `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${alpha3})`;
   }
   if (/^#([A-Fa-f0-9]{6})$/.test(color)) {
     const hex = color.slice(1);
@@ -182,16 +182,63 @@ function colorWithAlpha(color, alpha2) {
     const r = bigint >> 16 & 255;
     const g = bigint >> 8 & 255;
     const b = bigint & 255;
-    return `rgba(${r}, ${g}, ${b}, ${alpha2})`;
+    return `rgba(${r}, ${g}, ${b}, ${alpha3})`;
   }
   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]}, ${alpha2})`;
+      return `rgba(${result[1]}, ${result[2]}, ${result[3]}, ${alpha3})`;
     }
   }
   return color;
 }
+
+// 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(mockData);
+  if (isEnvBrowser() && mockData === void 0) {
+    console.warn(
+      `[fetchNui] Called fetchNui for event "${eventName}" in browser environment without mockData. Returning empty object.`
+    );
+    return {};
+  }
+  const resourceName = window.GetParentResourceName ? window.GetParentResourceName() : "nui-frame-app";
+  const resp = await fetch(`https://${resourceName}/${eventName}`, options);
+  return await resp.json();
+}
+async function registerInitialFetch(eventName, data, mockData) {
+  const fetcher = () => fetchNui(eventName, data, mockData);
+  return fetcher();
+}
+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;
+registerInitialFetch("GET_LOCALES", void 0).then((data) => {
+  localeStore.setState({ locales: data });
+});
 function BorderedIcon(props) {
   const theme = core.useMantineTheme();
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -1054,6 +1101,84 @@ function LevelBanner(props) {
     }
   );
 }
+function LevelPanel(props) {
+  const theme = core.useMantineTheme();
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    core.Flex,
+    {
+      w: "fit-content",
+      pr: "8vh",
+      pl: "8vh",
+      bg: "linear-gradient(180deg, rgba(30, 30, 30, 0.82) 0%, rgba(30, 30, 30, 0.3) 50%, rgba(30, 30, 30, 0.6) 100%)",
+      style: {
+        borderRadius: theme.radius.xs,
+        boxShadow: theme.shadows.sm,
+        outline: "0.2vh solid rgba(255,255,255,0.1)"
+      },
+      justify: "center",
+      align: "center",
+      direction: "column",
+      p: "sm",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          core.RingProgress,
+          {
+            size: 190,
+            roundCaps: true,
+            thickness: 10,
+            sections: [{ value: props.progressToLevel, color: core.alpha(props.color || theme.colors[theme.primaryColor][theme.primaryShade], 0.9) }],
+            label: /* @__PURE__ */ jsxRuntime.jsx(
+              core.Flex,
+              {
+                justify: "center",
+                align: "center",
+                direction: "column",
+                children: /* @__PURE__ */ jsxRuntime.jsx(
+                  core.Text,
+                  {
+                    size: "6vh",
+                    c: core.alpha(props.color || theme.colors[theme.primaryColor][theme.primaryShade], 0.9),
+                    style: {
+                      fontFamily: "Akrobat Black",
+                      textShadow: `0 0 10px ${core.alpha(props.color || theme.colors[theme.primaryColor][theme.primaryShade], 0.7)}`
+                    },
+                    children: props.level
+                  }
+                )
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          core.Text,
+          {
+            size: "sm",
+            style: {
+              fontFamily: "Akrobat Black",
+              letterSpacing: "0.05em",
+              textTransform: "uppercase"
+            },
+            children: props.text || locale("Level")
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          core.Text,
+          {
+            size: "xs",
+            c: "rgba(255,255,255,0.6)",
+            children: [
+              props.exp,
+              "/",
+              props.nextLevelXP,
+              " ",
+              locale("EXP")
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
 var ModalContext = react.createContext(null);
 function useModal(selector) {
   const modal = react.useContext(ModalContext);
@@ -1210,6 +1335,7 @@ exports.FloatingParticles = FloatingParticles;
 exports.InfoBox = InfoBox;
 exports.InputContainer = InputContainer;
 exports.LevelBanner = LevelBanner;
+exports.LevelPanel = LevelPanel;
 exports.ModalContext = ModalContext;
 exports.ModalProvider = ModalProvider;
 exports.MotionFlex = MotionFlex;