feat(nui): Progressbar

web/src/components/App.tsx

@@ -1,10 +1,11 @@
 import Notifications from "./Notifications";
 import CircleProgressbar from "./CircleProgressbar";
-import { CircularProgress } from "@chakra-ui/react";
+import Progressbar from "./Progressbar";
 
 const App: React.FC = () => {
   return (
     <>
+      <Progressbar />
       <CircleProgressbar />
       <Notifications />
     </>

web/src/components/CircleProgressbar.tsx

@@ -13,14 +13,14 @@ interface Props {
   duration: number;
 }
 
-debugData([
+// debugData([
-  {
+//   {
-    action: "circleProgress",
+//     action: "circleProgress",
-    data: {
+//     data: {
-      duration: 8000,
+//       duration: 8000,
-    },
+//     },
-  },
+//   },
-]);
+// ]);
 
 const CircleProgressbar: React.FC = () => {
   const [visible, setVisible] = React.useState(false);

web/src/components/Progressbar.tsx

@@ -0,0 +1,77 @@
+import React from "react";
+import {
+  Progress,
+  ProgressLabel,
+  Flex,
+  Box,
+  ScaleFade,
+} from "@chakra-ui/react";
+import { useNuiEvent } from "../hooks/useNuiEvent";
+import { debugData } from "../utils/debugData";
+import { fetchNui } from "../utils/fetchNui";
+
+interface Props {
+  label: string;
+  duration: number;
+}
+
+debugData([
+  {
+    action: "progress",
+    data: {
+      label: "Using lockpick",
+      duration: 8000,
+    },
+  },
+]);
+
+const Progressbar: React.FC = () => {
+  const [visible, setVisible] = React.useState(false);
+  const [label, setLabel] = React.useState("");
+  const [duration, setDuration] = React.useState(0);
+
+  const progressComplete = () => {
+    setVisible(false);
+    fetchNui("progressComplete");
+  };
+
+  useNuiEvent<Props>("progress", (data) => {
+    if (visible) return;
+    setVisible(true);
+    setLabel(data.label);
+    setDuration(data.duration);
+  });
+
+  return (
+    <Flex
+      h="20%"
+      w="100%"
+      position="absolute"
+      bottom="0"
+      justifyContent="center"
+      alignItems="center"
+    >
+      <Box width="22rem">
+        <ScaleFade in={visible} unmountOnExit>
+          <Progress
+            value={100}
+            backgroundColor="rgba(0, 0, 0, 0.6)"
+            height="3rem"
+            flex="1 1 auto"
+            onAnimationEnd={progressComplete}
+            sx={{
+              // really scuffed solution but works, wonder if there's a better way to do this?
+              "> div:first-of-type": {
+                animation: `progress-bar linear ${duration}ms`,
+              },
+            }}
+          >
+            <ProgressLabel fontSize={22}>{label}</ProgressLabel>
+          </Progress>
+        </ScaleFade>
+      </Box>
+    </Flex>
+  );
+};
+
+export default Progressbar;

web/src/index.css

@@ -26,3 +26,12 @@ code {
     stroke-dasharray: 264, 0;
   }
 }
+
+@keyframes progress-bar {
+  from {
+    width: 0%;
+  }
+  to {
+    width: 100%;
+  }
+}