From 9383303a3eb4776b33c999d029e3421e6a9225e1 Mon Sep 17 00:00:00 2001
From: suaebahmed <suaebahmed12@gmail.com>
Date: Wed, 6 Dec 2023 23:41:07 +0600
Subject: [PATCH] Added Dynamic row and improved ui

---
 package-lock.json           |  8 ++--
 package.json                |  2 +-
 src/Pages/PathfindingVS.jsx | 76 ++++++++++++++++++-------------------
 src/Pages/Sorting.jsx       | 33 ++++++++--------
 src/components/Modal.jsx    | 16 +++++---
 src/index.css               | 16 +++-----
 src/main.tsx                | 16 ++++----
 src/styles/modal.css        | 10 ++---
 8 files changed, 88 insertions(+), 89 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index e65c4c5..3cdd42e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -24,7 +24,7 @@
         "eslint-plugin-react-refresh": "^0.4.4",
         "postcss": "^8.4.32",
         "postcss-import": "^15.1.0",
-        "tailwindcss": "^3.3.5",
+        "tailwindcss": "^3.3.6",
         "typescript": "^5.2.2",
         "vite": "^5.0.0"
       }
@@ -3475,9 +3475,9 @@
       }
     },
     "node_modules/tailwindcss": {
-      "version": "3.3.5",
-      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.3.5.tgz",
-      "integrity": "sha512-5SEZU4J7pxZgSkv7FP1zY8i2TIAOooNZ1e/OGtxIEv6GltpoiXUqWvLy89+a10qYTB1N5Ifkuw9lqQkN9sscvA==",
+      "version": "3.3.6",
+      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.3.6.tgz",
+      "integrity": "sha512-AKjF7qbbLvLaPieoKeTjG1+FyNZT6KaJMJPFeQyLfIp7l82ggH1fbHJSsYIvnbTFQOlkh+gBYpyby5GT1LIdLw==",
       "dev": true,
       "dependencies": {
         "@alloc/quick-lru": "^5.2.0",
diff --git a/package.json b/package.json
index 190b75c..cfbb961 100644
--- a/package.json
+++ b/package.json
@@ -26,7 +26,7 @@
     "eslint-plugin-react-refresh": "^0.4.4",
     "postcss": "^8.4.32",
     "postcss-import": "^15.1.0",
-    "tailwindcss": "^3.3.5",
+    "tailwindcss": "^3.3.6",
     "typescript": "^5.2.2",
     "vite": "^5.0.0"
   }
diff --git a/src/Pages/PathfindingVS.jsx b/src/Pages/PathfindingVS.jsx
index 6f3ee56..f0a2978 100644
--- a/src/Pages/PathfindingVS.jsx
+++ b/src/Pages/PathfindingVS.jsx
@@ -17,14 +17,22 @@ import { Button } from "../components/Btn.tsx";
 /*
 super(props);// call the super class constructor and pass in the props parameter
 */
-
-var rows = 17;
+var rows = 13;
 var cols = 31;
 
-var START_NODE_ROW = 4, START_NODE_COL = 6;
-var END_NODE_ROW = rows - 6, END_NODE_COL = cols - 6;
-var INIT_START_ROW = START_NODE_ROW, INIT_START_COL = START_NODE_COL;
-var INT_END_ROW = END_NODE_ROW, INIT_END_COL = END_NODE_COL;
+const CELL_SIZE = 30;
+const PADDING = 200;
+const MAX_ROW = Math.floor((window.innerHeight - PADDING) / CELL_SIZE);
+if (MAX_ROW > rows) rows = MAX_ROW >= 19 ? 19 : MAX_ROW; // Rows = [13, 19]
+
+var START_NODE_ROW = 4,
+  START_NODE_COL = 6;
+var END_NODE_ROW = rows - 6,
+  END_NODE_COL = cols - 6;
+var INIT_START_ROW = START_NODE_ROW,
+  INIT_START_COL = START_NODE_COL;
+var INT_END_ROW = END_NODE_ROW,
+  INIT_END_COL = END_NODE_COL;
 
 const FAST = 5;
 const AVERAGE = 15;
@@ -41,7 +49,6 @@ function App() {
 
   useEffect(() => {
     gridInitialize();
-    popupClickHandle();
   }, []);
 
   const gridInitialize = () => {
@@ -272,20 +279,13 @@ function App() {
       END_NODE_COL = c;
     }
   };
-  const popupClickHandle = () => {
-    var blur = document.getElementById("Container-blur");
-    blur.classList.toggle("active");
-    var popup = document.getElementById("popup");
-    popup.classList.toggle("unActive");
-  };
+
+  console.log(window.innerHeight, MAX_ROW, rows);
 
   return (
     <>
-      <Modal
-        style={{ border: "1px solid #334155", paddingBottom: "20px" }}
-        popupClickHandle={popupClickHandle}
-      >
-        <h3 style={{ color: "#334155", textAlign: "center" }}>
+      <Modal className="border border-slate-600">
+        <h3 className="text-xl text-slate-800 text-center mb-3">
           Video Tutorial
         </h3>
         <div style={{ display: "flex", justifyContent: "center" }}>
@@ -298,30 +298,30 @@ function App() {
         </div>
       </Modal>
 
-      <div id="Container-blur">
+      <div id="Container-blur" className="active">
         <Navbar msg="Path Finder Visualizer"></Navbar>
         <div className="path-container">
           <div className="path-header mb-4">
             <div>
               <div className="flex justify-end my-[12px] gap-3">
-                  <Button
-                    className="btn-selector"
-                    onClick={pathFinding}
-                    label="Find the possible path"
-                    // isBgColor
-                  />
-                  <select
-                    className="my-drop-down"
-                    value={pathID}
-                    onChange={(e) => {
-                      setPathID(parseInt(e.target.value));
-                    }}
-                  >
-                    <option value="0">A-Star Search</option>
-                    <option value="1">Breadth-First Search</option>
-                    <option value="2">Depth-First Search</option>
-                    <option value="3">Dijkstra</option>
-                  </select>
+                <Button
+                  className="btn-selector"
+                  onClick={pathFinding}
+                  label="Find the possible path"
+                  // isBgColor
+                />
+                <select
+                  className="form-select"
+                  value={pathID}
+                  onChange={(e) => {
+                    setPathID(parseInt(e.target.value));
+                  }}
+                >
+                  <option value="0">A-Star Search</option>
+                  <option value="1">Breadth-First Search</option>
+                  <option value="2">Depth-First Search</option>
+                  <option value="3">Dijkstra</option>
+                </select>
               </div>
               <div className="path-speed-btns">
                 <div className="-m-1 flex flex-row flex-wrap">
@@ -346,7 +346,7 @@ function App() {
             <div>
               <div className="flex justify-end my-[12px] gap-3">
                 <select
-                  className="my-drop-down"
+                  className="form-select"
                   value={mazeID}
                   onChange={(e) => {
                     setMazeID(parseInt(e.target.value));
diff --git a/src/Pages/Sorting.jsx b/src/Pages/Sorting.jsx
index 91f62ad..3449662 100644
--- a/src/Pages/Sorting.jsx
+++ b/src/Pages/Sorting.jsx
@@ -283,22 +283,19 @@ function SortingApp() {
   return (
     <>
       {/* pop up modal */}
-      <Modal
-        style={{ border: "1px solid #334155", padding: "40px" }}
-        popupClickHandle={popupClickHandle}
-      >
+      <Modal className="border border-slate-600 px-10">
         <div style={{ marginRight: "20px", color: "#64748b" }}>
-          <h1 style={{ textAlign: "center", color: "#334155" }}>
+          <h1 className="text-2xl text-slate-700 text-center">
             Some Sorting Algorithms Tutorial
           </h1>
-          <h2 style={{ color: "#475569" }}>Bubble Sort</h2>
+          <h2 className="text-xl text-slate-600 mt-2 mb-1">Bubble Sort</h2>
           <p>
             Bubble Sort is a simple sorting algorithm that repeatedly steps
             through the list, compares adjacent elements and swaps them if they
             are in the wrong order.The pass through the list is repeated until
             the list is sorted.
           </p>
-          <h3 style={{ color: "#475569" }}>Performence</h3>
+          <h3 className="text-xl text-slate-600 mt-2 mb-1">Performence</h3>
           <ul>
             <li>
               Worst-case time complexity:{" "}
@@ -332,13 +329,13 @@ function SortingApp() {
             </li>
           </ul>
 
-          <h2 style={{ color: "#475569" }}>Selection Sort</h2>
+          <h2 className="text-xl text-slate-600 mt-2 mb-1">Selection Sort</h2>
           <p>
             The selection sort algorithm sorts an array by repeatedly finding
             the minimum element (considering ascending order) from the unsorted
             part and putting it at the beginning.
           </p>
-          <h3 style={{ color: "#475569" }}>Performence</h3>
+          <h3 className="text-xl text-slate-600 mt-2 mb-1">Performence</h3>
           <ul>
             <li>
               Worst-case time complexity:{" "}
@@ -372,7 +369,7 @@ function SortingApp() {
             </li>
           </ul>
 
-          <h2 style={{ color: "#475569" }}>Insertion Sort</h2>
+          <h2 className="text-xl text-slate-600 mt-2 mb-1">Insertion Sort</h2>
           <p>
             Insertion sort is a simple sorting algorithm that works similar to
             the way you sort playing cards in your hands. The array is virtually
@@ -380,7 +377,7 @@ function SortingApp() {
             part are picked and placed at the correct position in the sorted
             part.
           </p>
-          <h3 style={{ color: "#475569" }}>Performence</h3>
+          <h3 className="text-xl text-slate-600 mt-2 mb-1">Performence</h3>
           <ul>
             <li>
               Worst-case time complexity:{" "}
@@ -410,14 +407,14 @@ function SortingApp() {
             </li>
           </ul>
 
-          <h2 style={{ color: "#475569" }}>Quick Sort</h2>
+          <h2 className="text-xl text-slate-600 mt-2 mb-1">Quick Sort</h2>
           <p>
             QuickSort is a Divide and Conquer algorithm. It picks an element as
             a pivot and partitions the given array around the picked pivot.
             There are many different versions of quickSort that pick pivot in
             different ways.
           </p>
-          <ul>
+          <ul className="mt-2 mb-4 ml-2 list-disc list-inside">
             <li>Always pick the first element as a pivot.</li>
             <li>Always pick the last element as a pivot</li>
             <li>Pick a random element as a pivot.</li>
@@ -431,7 +428,7 @@ function SortingApp() {
             elements (greater than x) after x. All this should be done in linear
             time.
           </p>
-          <h3 style={{ color: "#475569" }}>Performence</h3>
+          <h3 className="text-xl text-slate-600 mt-2 mb-1">Performence</h3>
           <ul>
             <li>
               Worst-case time complexity:{" "}
@@ -457,13 +454,13 @@ function SortingApp() {
             </li>
           </ul>
 
-          <h2 style={{ color: "#475569" }}>Merge Sort</h2>
+          <h2 className="text-xl text-slate-600 mt-2 mb-1">Merge Sort</h2>
           <p>
             Merge Sort is an efficient, stable sorting algorithm that makes use
             of the divide and conquer strategy. Conceptually the algorithm works
             as follows:
           </p>
-          <ol>
+          <ol className="list-decimal list-inside mt-2">
             <li>
               Divide the unsorted list into n sublists, each containing one
               element(a list of one element is considered sorted)
@@ -473,7 +470,7 @@ function SortingApp() {
               there is only one sublist remaining. This will be the sorted list.
             </li>
           </ol>
-          <h3 style={{ color: "#475569" }}>Performence</h3>
+          <h3 className="text-xl text-slate-600 mt-2 mb-1">Performence</h3>
           <ul>
             <li>
               Worst-case time complexity:{" "}
@@ -497,7 +494,7 @@ function SortingApp() {
         </div>
       </Modal>
 
-      <div id="Container-blur">
+      <div id="Container-blur" className="active">
         <Navbar msg="Sorting Algorithms"></Navbar>
         <div className="sorting-continer">
           <div className="Btn-Wrap">
diff --git a/src/components/Modal.jsx b/src/components/Modal.jsx
index 3e1f05a..8ed9ee6 100644
--- a/src/components/Modal.jsx
+++ b/src/components/Modal.jsx
@@ -1,14 +1,20 @@
-import React from "react";
+import React, { useState } from "react";
 import "../styles/modal.css";
 
 function Modal(props) {
-  const { popupClickHandle, style } = props;
+  const [isOpen, setIsOpen] = useState(true);
+  const clickHandler = () => {
+    setIsOpen(!isOpen);
+    var blur = document.getElementById("Container-blur");
+    blur.classList.remove("active");
+  };
+
   return (
-    <div style={style} id="popup" className="unActive">
-      <span onClick={popupClickHandle} className="close">
+    <div id="popup" className={isOpen ? `${props.className}` : `unActive`}>
+      <span onClick={clickHandler} className="close">
         &times;
       </span>
-      <div className="modal-container">{props.children}</div>
+      <div className="modal-container pt-4 px-4">{props.children}</div>
     </div>
   );
 }
diff --git a/src/index.css b/src/index.css
index e10b0df..4bb5142 100644
--- a/src/index.css
+++ b/src/index.css
@@ -2,18 +2,14 @@
 @tailwind components;
 @tailwind utilities;
 
-@layer components {
-  /* .btn {
-    @apply inline-flex items-center justify-center px-4 py-2 border border-transparent text-base leading-6 font-medium rounded-md text-white bg-primary-600 hover:bg-primary-500 focus:outline-none focus:border-primary-700 focus:shadow-outline-primary active:bg-primary-700 transition ease-in-out duration-150;
-  } */
-
-  /* .form-input,
+@layer ccomponents {
+  .form-input,
   .form-textarea,
   .form-multiselect,
   .form-select,
   .form-checkbox,
   .form-radio {
-    @apply border bg-white text-sm text-slate-800;
+    @apply border bg-white text-sm text-slate-800 !important;
   }
 
   .form-input,
@@ -21,20 +17,20 @@
   .form-multiselect,
   .form-select,
   .form-checkbox {
-    @apply rounded;
+    @apply rounded !important;
   }
 
   .form-input,
   .form-textarea,
   .form-multiselect,
   .form-select {
-    @apply focus:border-primary-300 border-slate-200 py-2 px-3 leading-5 shadow-sm hover:border-slate-300;
+    @apply focus:border-blue-300 border-slate-300 py-2 px-3 leading-5 shadow-sm hover:border-slate-300 !important;
   }
 
   .form-input,
   .form-textarea {
     @apply placeholder-slate-400;
-  } */
+  }
 }
 
 html,
diff --git a/src/main.tsx b/src/main.tsx
index 2f71de7..5adccbc 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -1,13 +1,13 @@
-import React from 'react'
-import { HashRouter } from 'react-router-dom';
-import ReactDOM from 'react-dom/client'
-import App from './App.tsx'
-import './index.css';
+import "./index.css";
+import React from "react";
+import { HashRouter } from "react-router-dom";
+import ReactDOM from "react-dom/client";
+import App from "./App.tsx";
 
-ReactDOM.createRoot(document.getElementById('root')).render(
+ReactDOM.createRoot(document.getElementById("root")).render(
   <React.StrictMode>
     <HashRouter>
       <App />
     </HashRouter>
-  </React.StrictMode>,
-)
+  </React.StrictMode>
+);
diff --git a/src/styles/modal.css b/src/styles/modal.css
index 41830b6..14a7d9c 100644
--- a/src/styles/modal.css
+++ b/src/styles/modal.css
@@ -23,19 +23,19 @@
 /* animation effects */
 .unActive {
   top: 25% !important;
-  transition: 500ms;
-  visibility: hidden;
-  opacity: 0;
+  transition: 500ms ease-in-out !important;
+  visibility: hidden !important;
+  opacity: 0 !important;
 }
 
 /* close button */
 .close {
   position: absolute;
-  top: 10px;
+  top: 5px;
   right: 20px;
   color: #aaa;
   float: right;
-  font-size: 40px;
+  font-size: 38px;
   font-weight: bold;
 }
 .close:hover,