feat: Add instruction, revise & add new UI style

Add second style for the UI Add Instruction feature for alternative of HelpNotification
baguscodestudio · Feb 1, 2023 · f6b6a0a · f6b6a0a
1 parent 95f92f7
commit f6b6a0a
Show file tree

Hide file tree

Showing 10 changed files with 434 additions and 126 deletions.
diff --git a/client.lua b/client.lua
@@ -1,6 +1,7 @@
 local Settings = {
     HelpPosition = 'top-left',
     HelpAudio = true,
+    NotificationStyle = 'clean', -- clean or transparent
     NotificationPosition = 'top-right',
     NotificationAudio = true,
     Volume = 1
@@ -38,6 +39,7 @@ function SendAlert(title, message, type, duration, position)
             type=type,
             play=Settings.NotificationAudio,
             volume=Settings.Volume,
+            style=Settings.NotificationStyle,
             position=position or Settings.NotificationPosition,
             duration=duration
         }

diff --git a/web/index.html b/web/index.html
@@ -4,7 +4,19 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/src/favicon.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer" />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&display=swap"
+      rel="stylesheet"
+    />
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css"
+      integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g=="
+      crossorigin="anonymous"
+      referrerpolicy="no-referrer"
+    />
     <title>BCS HUD</title>
   </head>
   <body>

diff --git a/web/src/App.tsx b/web/src/App.tsx
@@ -8,6 +8,7 @@ import Modal from './components/Modal';
 import InputKeyboard from './components/InputKeyboard';
 import { fetchNui } from './utils/fetchNui';
 import { locale } from './store/locale';
+import Instruction from './components/Instruction';
 
 function App() {
   useEffect(() => {
@@ -17,13 +18,14 @@ function App() {
   }, []);
 
   return (
-    <>
+    <div className="">
       <InputKeyboard />
       <Modal />
       <Settings />
+      <Instruction />
       <HelpNotification />
       <Alert />
-    </>
+    </div>
   );
 }
 

diff --git a/web/src/components/Alert.tsx b/web/src/components/Alert.tsx
@@ -10,30 +10,61 @@ import { Check } from '@styled-icons/bootstrap/Check';
 import { Times } from '@styled-icons/fa-solid/Times';
 import { Info } from '@styled-icons/bootstrap/Info';
 
-const AlertTypes: AlertType = {
-  warning: {
-    color: 'bg-yellow-500',
-    text: 'text-yellow-600',
-    background: 'bg-slate-200',
-    icon: <Exclamation />,
+const AlertTypes: {
+  clean: AlertType;
+  transparent: AlertType;
+} = {
+  clean: {
+    warning: {
+      color: 'bg-yellow-500',
+      text: 'text-yellow-600',
+      background: 'bg-slate-200',
+      icon: <Exclamation />,
+    },
+    success: {
+      color: 'bg-lime-500',
+      text: 'text-lime-700',
+      background: 'bg-slate-150',
+      icon: <Check />,
+    },
+    error: {
+      color: 'bg-red-500',
+      text: 'text-red-700',
+      background: 'bg-slate-200',
+      icon: <Times />,
+    },
+    info: {
+      color: 'bg-blue-500',
+      text: 'text-blue-700',
+      background: 'bg-slate-150',
+      icon: <Info />,
+    },
   },
-  success: {
-    color: 'bg-lime-500',
-    text: 'text-lime-700',
-    background: 'bg-slate-150',
-    icon: <Check />,
-  },
-  error: {
-    color: 'bg-red-500',
-    text: 'text-red-700',
-    background: 'bg-slate-200',
-    icon: <Times />,
-  },
-  info: {
-    color: 'bg-blue-500',
-    text: 'text-blue-700',
-    background: 'bg-slate-150',
-    icon: <Info />,
+  transparent: {
+    warning: {
+      color: 'bg-warning',
+      text: 'text-warning',
+      background: 'from-warning to-warning/15',
+      icon: <Exclamation />,
+    },
+    success: {
+      color: 'bg-success',
+      text: 'text-success',
+      background: 'from-success to-success/15',
+      icon: <Check />,
+    },
+    error: {
+      color: 'bg-error',
+      text: 'text-error',
+      background: 'from-error to-error/15',
+      icon: <Times size="1.5rem" />,
+    },
+    info: {
+      color: 'bg-blue-500',
+      text: 'text-blue-700',
+      background: 'bg-slate-150',
+      icon: <Info />,
+    },
   },
 };
 
@@ -69,10 +100,10 @@ const POSITIONS: { [key: string]: { from: string; to: string } } = {
 //     action: 'sendAlert',
 //     data: {
 //       title: 'Test',
-//       message:
-//         "Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.",
-//       type: 'success',
-//       duration: 3000,
+//       message: "Lorem Ipsum has been the industry's standard ",
+//       type: 'error',
+//       style: 'transparent',
+//       duration: 300000,
 //       play: true,
 //       position: 'top-left',
 //     },
@@ -84,51 +115,90 @@ export const Alert = () => {
   useNuiEvent<AlertData>('sendAlert', (data) => {
     if (data.volume) notification.volume = data.volume;
     if (data.play) notification.play();
-    toast.custom(
-      (t) => (
-        <Transition
-          appear
-          show={t.visible}
-          enter="transition ease-in-out duration-300 transform"
-          enterFrom={POSITIONS[data.position || 'top-right'].from}
-          enterTo={POSITIONS[data.position || 'top-right'].to}
-          leave="transition ease-in-out duration-300 transform"
-          leaveFrom={POSITIONS[data.position || 'top-right'].to}
-          leaveTo={POSITIONS[data.position || 'top-right'].from}
-        >
-          <div
-            className={`w-96 h-full rounded-l-lg bg-white shadow-lg flex justify-between items-center whitespace-pre ${
-              AlertTypes[data.type].text
-            }`}
-          >
-            <div
-              className={`rounded-l-lg ${
-                AlertTypes[data.type].color
-              } w-2 h-full`}
+    data.style == 'transparent'
+      ? toast.custom(
+          (t) => (
+            <Transition
+              appear
+              show={t.visible}
+              enter="transition ease-in-out duration-300 transform"
+              enterFrom={POSITIONS[data.position || 'top-right'].from}
+              enterTo={POSITIONS[data.position || 'top-right'].to}
+              leave="transition ease-in-out duration-300 transform"
+              leaveFrom={POSITIONS[data.position || 'top-right'].to}
+              leaveTo={POSITIONS[data.position || 'top-right'].from}
             >
-              &nbsp;
-            </div>
-            <div
-              className={`mx-2 w-7 h-7 rounded-full flex justify-center items-center ${
-                AlertTypes[data.type].color
-              } text-white`}
+              <div
+                className={`w-96 border-[1px] border-white/60 px-2 h-full rounded-md shadow-lg flex justify-around backdrop-blur-2xl items-center text-white bg-gradient-to-br ${
+                  AlertTypes[data.style][data.type].background
+                }`}
+              >
+                <div
+                  className={`w-8 h-8 rounded-sm flex justify-center items-center bg-white ${
+                    AlertTypes[data.style][data.type].text
+                  }`}
+                >
+                  {AlertTypes[data.style][data.type].icon}
+                </div>
+                <div className="py-1 my-2 w-5/6">
+                  <h5 className="font-semibold font-Chalet">{data.title}</h5>
+                  <p className="text-sm font-Chalet">{data.message}</p>
+                </div>
+              </div>
+            </Transition>
+          ),
+          {
+            position: data.position
+              ? (data.position as ToastPosition)
+              : 'top-right',
+            duration: data.duration ? data.duration : 4000,
+          }
+        )
+      : toast.custom(
+          (t) => (
+            <Transition
+              appear
+              show={t.visible}
+              enter="transition ease-in-out duration-300 transform"
+              enterFrom={POSITIONS[data.position || 'top-right'].from}
+              enterTo={POSITIONS[data.position || 'top-right'].to}
+              leave="transition ease-in-out duration-300 transform"
+              leaveFrom={POSITIONS[data.position || 'top-right'].to}
+              leaveTo={POSITIONS[data.position || 'top-right'].from}
             >
-              {AlertTypes[data.type].icon}
-            </div>
-            <div className="px-3 py-1 my-2 w-5/6">
-              <h5 className="font-semibold font-Chalet">{data.title}</h5>
-              <p className="text-sm font-Chalet">{data.message}</p>
-            </div>
-          </div>
-        </Transition>
-      ),
-      {
-        position: data.position
-          ? (data.position as ToastPosition)
-          : 'top-right',
-        duration: data.duration ? data.duration : 4000,
-      }
-    );
+              <div
+                className={`w-96 h-full rounded-l-lg bg-white shadow-lg flex justify-between items-center ${
+                  AlertTypes[data.style][data.type].text
+                }`}
+              >
+                <div
+                  className={`rounded-l-lg ${
+                    AlertTypes[data.style][data.type].color
+                  } w-2 h-full`}
+                >
+                  &nbsp;
+                </div>
+                <div
+                  className={`mx-2 w-7 h-7 rounded-full flex justify-center items-center ${
+                    AlertTypes[data.style][data.type].color
+                  } text-white`}
+                >
+                  {AlertTypes[data.style][data.type].icon}
+                </div>
+                <div className="px-3 py-1 my-2 w-5/6">
+                  <h5 className="font-semibold font-Chalet">{data.title}</h5>
+                  <p className="text-sm font-Chalet">{data.message}</p>
+                </div>
+              </div>
+            </Transition>
+          ),
+          {
+            position: data.position
+              ? (data.position as ToastPosition)
+              : 'top-right',
+            duration: data.duration ? data.duration : 4000,
+          }
+        );
   });
 
   return <Toaster />;