Added Dynamic row and improved ui

suaebahmed · Dec 6, 2023 · 9383303 · 9383303
1 parent 453737f
commit 9383303
Show file tree

Hide file tree

Showing 8 changed files with 88 additions and 89 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git 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
@@ -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
@@ -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,15 +369,15 @@ 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
             split into a sorted and an unsorted part. Values from the unsorted
             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
@@ -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
@@ -2,39 +2,35 @@
 @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,
   .form-textarea,
   .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
@@ -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
@@ -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,