dirk-cfx-react 1.0.49 → 1.0.50

package/dist/index.d.cts

@@ -1,4 +1,4 @@
-export { BorderedIcon, BorderedIconProps, ButtonProps, Counter, FloatingParticles, FloatingParticlesProps, InfoBox, InfoBoxProps, InputContainer, InputContainerProps, LevelBanner, ModalContext, ModalProvider, MotionFlex, MotionIcon, MotionImage, MotionText, NavBar, NavigationContext, NavigationProvider, NavigationStore, ParticleState, ProgressProps, SegmentProps, SegmentedControl, SegmentedControlProps, SegmentedProgress, Title, TitleProps, useModal, useModalActions, useNavigation, useNavigationStore } from './components/index.cjs';
+export { BorderedIcon, BorderedIconProps, ButtonProps, Counter, FloatingParticles, FloatingParticlesProps, InfoBox, InfoBoxProps, InputContainer, InputContainerProps, LevelBanner, LevelPanel, ModalContext, ModalProvider, MotionFlex, MotionIcon, MotionImage, MotionText, NavBar, NavigationContext, NavigationProvider, NavigationStore, ParticleState, ProgressProps, SegmentProps, SegmentedControl, SegmentedControlProps, SegmentedProgress, Title, TitleProps, useModal, useModalActions, useNavigation, useNavigationStore } from './components/index.cjs';
 export { InitialFetch, InternalEvent, SkillSettings, UploadImageProps, colorWithAlpha, copyToClipboard, createSkill, fetchNui, getImageShape, initialFetches, internalEvent, isEnvBrowser, isProfanity, locale, localeStore, noop, numberToRoman, openLink, registerInitialFetch, runFetches, splitFAString, updatePresignedURL, uploadImage, useAutoFetcher, useProfanityStore } from './utils/index.cjs';
 export { FormProvider, FormState, TornEdgeSVGFilter, ValidationRules, createFormStore, useForm, useNuiEvent, useTornEdges } from './hooks/index.cjs';
 export { DirkProvider, DirkProviderProps, useSettings } from './providers/index.cjs';

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-export { BorderedIcon, BorderedIconProps, ButtonProps, Counter, FloatingParticles, FloatingParticlesProps, InfoBox, InfoBoxProps, InputContainer, InputContainerProps, LevelBanner, ModalContext, ModalProvider, MotionFlex, MotionIcon, MotionImage, MotionText, NavBar, NavigationContext, NavigationProvider, NavigationStore, ParticleState, ProgressProps, SegmentProps, SegmentedControl, SegmentedControlProps, SegmentedProgress, Title, TitleProps, useModal, useModalActions, useNavigation, useNavigationStore } from './components/index.js';
+export { BorderedIcon, BorderedIconProps, ButtonProps, Counter, FloatingParticles, FloatingParticlesProps, InfoBox, InfoBoxProps, InputContainer, InputContainerProps, LevelBanner, LevelPanel, ModalContext, ModalProvider, MotionFlex, MotionIcon, MotionImage, MotionText, NavBar, NavigationContext, NavigationProvider, NavigationStore, ParticleState, ProgressProps, SegmentProps, SegmentedControl, SegmentedControlProps, SegmentedProgress, Title, TitleProps, useModal, useModalActions, useNavigation, useNavigationStore } from './components/index.js';
 export { InitialFetch, InternalEvent, SkillSettings, UploadImageProps, colorWithAlpha, copyToClipboard, createSkill, fetchNui, getImageShape, initialFetches, internalEvent, isEnvBrowser, isProfanity, locale, localeStore, noop, numberToRoman, openLink, registerInitialFetch, runFetches, splitFAString, updatePresignedURL, uploadImage, useAutoFetcher, useProfanityStore } from './utils/index.js';
 export { FormProvider, FormState, TornEdgeSVGFilter, ValidationRules, createFormStore, useForm, useNuiEvent, useTornEdges } from './hooks/index.js';
 export { DirkProvider, DirkProviderProps, useSettings } from './providers/index.js';

package/dist/index.js

@@ -2,7 +2,7 @@ import { createContext, useEffect, useRef, useState, useContext, useMemo } from
 import { create, useStore, createStore } from 'zustand';
 import axios from 'axios';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { Flex, Text, Image as Image$1, createTheme, useMantineTheme, alpha, Progress, MantineProvider, BackgroundImage } from '@mantine/core';
+import { Flex, Text, Image as Image$1, createTheme, useMantineTheme, alpha, Progress, RingProgress, MantineProvider, BackgroundImage } from '@mantine/core';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { motion, AnimatePresence, useMotionValue } from 'framer-motion';
 import clickSoundUrl from './click_sound-PNCRRTM4.mp3';
@@ -164,11 +164,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);
@@ -176,12 +176,12 @@ 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;
@@ -719,10 +719,12 @@ function createSkill(defaultSettings) {
       const xpRequiredForLevel = nextLevelXP - currentLevelXP;
       const progressToLevel = xpRequiredForLevel > 0 ? xpInCurrentLevel / xpRequiredForLevel * 100 : 100;
       const xpToNextLevel = Math.max(0, nextLevelXP - xp);
+      const prevLevelXP = calculateXPForLevel(currentLevel - 1, settings);
       return {
         currentLevel,
         nextLevel,
         currentLevelXP,
+        prevLevelXP,
         nextLevelXP,
         progressToLevel: Math.min(100, Math.max(0, progressToLevel)),
         xpToNextLevel
@@ -1633,6 +1635,84 @@ function LevelBanner(props) {
     }
   );
 }
+function LevelPanel(props) {
+  const theme2 = useMantineTheme();
+  return /* @__PURE__ */ jsxs(
+    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: theme2.radius.xs,
+        boxShadow: theme2.shadows.sm,
+        outline: "0.2vh solid rgba(255,255,255,0.1)"
+      },
+      justify: "center",
+      align: "center",
+      direction: "column",
+      p: "sm",
+      children: [
+        /* @__PURE__ */ jsx(
+          RingProgress,
+          {
+            size: 190,
+            roundCaps: true,
+            thickness: 10,
+            sections: [{ value: props.progressToLevel, color: alpha(props.color || theme2.colors[theme2.primaryColor][theme2.primaryShade], 0.9) }],
+            label: /* @__PURE__ */ jsx(
+              Flex,
+              {
+                justify: "center",
+                align: "center",
+                direction: "column",
+                children: /* @__PURE__ */ jsx(
+                  Text,
+                  {
+                    size: "6vh",
+                    c: alpha(props.color || theme2.colors[theme2.primaryColor][theme2.primaryShade], 0.9),
+                    style: {
+                      fontFamily: "Akrobat Black",
+                      textShadow: `0 0 10px ${alpha(props.color || theme2.colors[theme2.primaryColor][theme2.primaryShade], 0.7)}`
+                    },
+                    children: props.level
+                  }
+                )
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Text,
+          {
+            size: "sm",
+            style: {
+              fontFamily: "Akrobat Black",
+              letterSpacing: "0.05em",
+              textTransform: "uppercase"
+            },
+            children: props.text || locale("Level")
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          Text,
+          {
+            size: "xs",
+            c: "rgba(255,255,255,0.6)",
+            children: [
+              props.exp,
+              "/",
+              props.nextLevelXP,
+              " ",
+              locale("EXP")
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
 var ModalContext = createContext(null);
 function useModal(selector) {
   const modal = useContext(ModalContext);
@@ -2249,6 +2329,6 @@ function TornEdgeSVGFilter() {
   );
 }
 
-export { BorderedIcon, Counter, DirkProvider, FloatingParticles, FormProvider, InfoBox, InputContainer, LevelBanner, ModalContext, ModalProvider, MotionFlex, MotionIcon, MotionImage, MotionText, NavBar, NavigationContext, NavigationProvider, SegmentedControl, SegmentedProgress, Title, TornEdgeSVGFilter, colorWithAlpha, copyToClipboard, createFormStore, createSkill, fetchNui, getImageShape, initialFetches, internalEvent, isEnvBrowser, isProfanity, locale, localeStore, noop, numberToRoman, openLink, registerInitialFetch, runFetches, splitFAString, updatePresignedURL, uploadImage, useAutoFetcher, useForm, useModal, useModalActions, useNavigation, useNavigationStore, useNuiEvent, useProfanityStore, useSettings, useTornEdges };
+export { BorderedIcon, Counter, DirkProvider, FloatingParticles, FormProvider, InfoBox, InputContainer, LevelBanner, LevelPanel, ModalContext, ModalProvider, MotionFlex, MotionIcon, MotionImage, MotionText, NavBar, NavigationContext, NavigationProvider, SegmentedControl, SegmentedProgress, Title, TornEdgeSVGFilter, colorWithAlpha, copyToClipboard, createFormStore, createSkill, fetchNui, getImageShape, initialFetches, internalEvent, isEnvBrowser, isProfanity, locale, localeStore, noop, numberToRoman, openLink, registerInitialFetch, runFetches, splitFAString, updatePresignedURL, uploadImage, useAutoFetcher, useForm, useModal, useModalActions, useNavigation, useNavigationStore, useNuiEvent, useProfanityStore, useSettings, useTornEdges };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map