GaelGil · GaelGil · May 14, 2025 · Jan 15, 2024 · Jan 15, 2024 · Jan 15, 2024
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,7 @@
 {
   "name": "algorithm-visualiser",
   "version": "0.1.0",
+  "homepage": "https://gaelgil.github.io/algorithm-visualizer/",
   "private": true,
   "dependencies": {
     "@testing-library/jest-dom": "^5.16.4",
@@ -15,9 +16,10 @@
     "web-vitals": "^2.1.4"
   },
   "scripts": {
+    "predeploy": "npm run build",
+    "deploy": "gh-pages -d build",
     "start": "export SET NODE_OPTIONS=--openssl-legacy-provider && react-scripts start",
     "build": "react-scripts build",
-    "test": "./node_modules/.bin/mocha ./src/sortingAlgorithms/tests/",
     "eject": "react-scripts eject"
   },
   "eslintConfig": {
@@ -37,5 +39,8 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "gh-pages": "^6.3.0"
   }
 }
diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/index.html b/public/index.html
@@ -9,12 +9,12 @@
       name="description"
       content="Web site created using create-react-app"
     />
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+    <!-- <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" /> -->
     <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <!-- <link rel="manifest" href="%PUBLIC_URL%/manifest.json" /> -->
     <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.
@@ -27,7 +27,7 @@
     <title>Algorithm Vizualiser</title>
   </head>
   <body>
-    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <!-- <noscript>You need to enable JavaScript to run this app.</noscript> -->
     <div id="root"></div>
     <!--
       This HTML file is a template.

diff --git a/public/logo192.png b/public/logo192.png
diff --git a/public/logo512.png b/public/logo512.png
diff --git a/public/manifest.json b/public/manifest.json
diff --git a/public/robots.txt b/public/robots.txt
diff --git a/src/App.css b/src/App.css
@@ -0,0 +1,17 @@
+body {
+    margin: 0;
+    padding: 0;
+    background-color: #282c34;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+      'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+      sans-serif;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+
+
+
+  code {
+    font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+      monospace;
+  }
diff --git a/src/App.js b/src/App.js
@@ -2,7 +2,7 @@ import React, { useState } from 'react';
 import './App.css';
 import SortingVisualiser from './components/SortingVisualiser/SortingVisualiser';
 import GraphTraversalVisualiser from './components/GraphTraversalVisualiser/GraphTraversalVisualiser';
-import NavBar from './components/NavBar/NavBar';
+import NavBar from './components/NavBar/navbar'
 
 function App() {
   const [currentView, setCurrentView] = useState('sorting'); // Default to sorting visualization

diff --git a/src/components/GraphTraversalVisualiser/GraphTraversalVisualiser.jsx b/src/components/GraphTraversalVisualiser/GraphTraversalVisualiser.jsx
@@ -3,13 +3,13 @@ import "./GraphTraversalVisualiser.css"
 import { UCS } from './graphAlgorithms/ucs';
 import { BFS } from './graphAlgorithms/bfs';
 import { DFS } from './graphAlgorithms/dfs';
+import { conflict } from './graphAlgorithms/helper';
 
 const MatrixVisualization = () => {
   const [matrix, setMatrix] = useState([]);
   const [start, setStart] = useState({ row: 0, col: 0 });
-  // const [objective, setObjective] = useState({ row: 0, col: 0 });
-
   const [objectives, setObjectives] = useState([]);
+  // const [weights, setWeights] = useState([]);
   const [obstacles, setObstacles] = useState([]);
   const [algorithm, setAlgorithm] = useState('Reset');
   const [button, setButton] = useState(false);
@@ -19,42 +19,10 @@ const MatrixVisualization = () => {
     generateMatrix();
   }, []);
 
-  // function to check for conflict
-  const conflict = (i, j, maze) => {
-    // index checking
-    if (i < 0 || i >= maze.length || j < 0 || j >= maze[0].length) { 
-        return false;
-    }
-    // if its currently in use
-    if (maze[i][j] === "w") {
-        return true;
-    }
-    // if objective is surronded by obstacles
-    if (maze[i][j] === "o") { 
-        if (
-            (i > 0 && maze[i - 1][j] === "w") ||
-            (i < maze.length - 1 && maze[i + 1][j] === "w") ||
-            (j > 0 && maze[i][j - 1] === "w") ||
-            (j < maze[0].length - 1 && maze[i][j + 1] === "w")
-        ) {
-            return true;
-        }
-    }
-    return false;
-  }
 
-  // clear the old path
-  const clearPath = () => {
-    const pathNodes = document.querySelectorAll('.path');
-    pathNodes.forEach((node) => {
-      node.classList.remove('path');
-    });
-    const expandedNodes = document.querySelectorAll('.expanded');
-    expandedNodes.forEach((node) => {
-      node.classList.remove('expanded');
-    });
-  };
 
+
+  // generate a new matrix
   const generateMatrix = () => {
     const n = 30
     const newMatrix = Array.from({ length: n }, () => Array(n).fill(" ")); // generate array
@@ -93,9 +61,11 @@ const MatrixVisualization = () => {
     // set the approriate obstacles, objectives and new matrix/grid
     setObjectives(objectivesArray);
     setObstacles(obstaclesArray);
+    // setWeights(weightsArray);
     setMatrix(newMatrix);
   };
 
+  // reset the matrix
   const resetMatrix = () => {
     clearPath(); // remove the previously drawn path
     generateMatrix(); // generate a new matrix
@@ -123,10 +93,20 @@ const MatrixVisualization = () => {
     }
     }
 
+  // clear the old path
+  const clearPath = () => {
+    const pathNodes = document.querySelectorAll('.path');
+    pathNodes.forEach((node) => {
+      node.classList.remove('path');
+    });
+    const expandedNodes = document.querySelectorAll('.expanded');
+    expandedNodes.forEach((node) => {
+      node.classList.remove('expanded');
+    });
+  };
+
   const handleSubmit = (event) => {
     let method = algorithm;
-    let time = 0;
-    disableButtons();
     if (method === 'astar') {
       // 
     } else if (method === 'BFS') {
@@ -135,7 +115,6 @@ const MatrixVisualization = () => {
       colorNodes(result.path, result.expanded);
     } else if (method === 'Reset') {
       resetMatrix();
-      enableButtons(1);
     } else if (method === 'DFS') {
       const result = DFS(matrix,[start.row, start.col], [objectives[0].row, objectives[0].col]); 
       colorNodes(result.path, result.expanded);
@@ -145,23 +124,13 @@ const MatrixVisualization = () => {
       colorNodes(result.path, result.expanded);
     }
 
-    enableButtons(time);
     event.preventDefault();
   };
 
   const handleChange = (event) => {
     setAlgorithm(event.target.value);
   };
 
-  const disableButtons = () => {
-    setButton(true);
-  };
-
-  const enableButtons = (time) => {
-    setTimeout(() => {
-      setButton(false);
-    }, time);
-  };
 
   return (
     <div className='GraphTraversalVisualiser'>
@@ -203,7 +172,6 @@ const MatrixVisualization = () => {
               <option value='DFS'>DFS</option>
               <option value='UCS'>UCS</option>
               <option value='Astar'>Astar</option>
-              {/* <option value='IDS'>IDS</option> */}
             </select>
           </label>
           <input

diff --git a/src/components/GraphTraversalVisualiser/graphAlgorithms/astar.js b/src/components/GraphTraversalVisualiser/graphAlgorithms/astar.js
@@ -1,4 +1,46 @@
-export function Astar(grid){
-    return 0
-}
+import { PriorityQueue } from './datastructures/priorityQueue';
+import { getNeighbors } from './helper';
 
+
+
+
+export function Astar(grid, start, destination) {
+    let priorityQueue = new PriorityQueue();
+    priorityQueue.enqueue({ node: start, path: [start], cost: 0 });
+
+    let visited = {};
+    let expanded = [];
+
+    while (!priorityQueue.isEmpty()) {
+        let { node, path, cost } = priorityQueue.dequeue(); // get the node, its path, and cost from the front of the priority queue
+        let nodeKey = node.toString(); // to string for comparison
+
+        if (nodeKey === destination.toString()) { // check if we have arrived at the solution
+            return { status: "found", path, cost , expanded};
+        } else {
+            if (!(visited.hasOwnProperty(nodeKey))) { // if we have not been to this node, add it
+                visited[nodeKey] = true; // mark as visited
+                let neighbors = getNeighbors(grid, node); // get neighbors of the current node
+                for (let i = 0; i < neighbors.length; i++) {
+                    let neighbor = neighbors[i];
+                    let neighborKey = neighbor.toString();
+                    let neighborCost = cost
+                    if (grid[neighbor[0]][neighbor[1]] === "e"){
+                        neighborCost += 5;
+                    }else {
+                        neighborCost +=1;
+                    };
+
+                    if (!(visited.hasOwnProperty(neighborKey))) { // if the neighbor has not been visited, add to the priority queue
+                        if (!(grid[neighbor[0]][neighbor[1]] === "w")) { // if there is no wall, then we add
+                            priorityQueue.enqueue({ node: neighbor, path: path.concat([neighbor]), cost: neighborCost }, neighborCost);
+                            expanded.push(neighbor); // add the expanded node to the list
+                        }
+                    }
+                }
+            }
+        }
+    }
+
+    return { status: "not found", path: [], cost: 0 };
+}
diff --git a/src/components/GraphTraversalVisualiser/graphAlgorithms/helper.js b/src/components/GraphTraversalVisualiser/graphAlgorithms/helper.js
@@ -32,3 +32,28 @@ export function getNeighbors(matrix, current_node) {
 
     return neighbors;
 }
+
+
+  // function to check for conflict
+export function conflict(i, j, maze){
+    // index checking
+    if (i < 0 || i >= maze.length || j < 0 || j >= maze[0].length) { 
+        return false;
+    }
+    // if its currently in use
+    if (maze[i][j] === "w") {
+        return true;
+    }
+    // if objective is surronded by obstacles
+    if (maze[i][j] === "o") { 
+        if (
+            (i > 0 && maze[i - 1][j] === "w") ||
+            (i < maze.length - 1 && maze[i + 1][j] === "w") ||
+            (j > 0 && maze[i][j - 1] === "w") ||
+            (j < maze[0].length - 1 && maze[i][j + 1] === "w")
+        ) {
+            return true;
+        }
+    }
+    return false;
+  }
diff --git a/src/components/NavBar/navbar.css b/src/components/NavBar/navbar.css
@@ -1,7 +1,6 @@
 .NavBar {
-  background-color: #333; /* Background color of the navbar */
+  background-color: #333; 
   overflow: hidden;
-  width: 100%;
   padding: 1%;
 }
 
@@ -21,3 +20,15 @@
   background-color: #555;
 }
 
+.nav_button {
+	background: none;
+	color: white;
+	border: none;
+	padding: 0;
+	font: inherit;
+	cursor: pointer;
+	outline: inherit;
+}
+
+
+
diff --git a/src/components/NavBar/navbar.jsx b/src/components/NavBar/navbar.jsx
@@ -1,11 +1,11 @@
 import React from 'react';
-import './NavBar.css';
+import './navbar.css';
 
 function NavBar({ onNavigate }) {
   return (
     <nav className="NavBar">
-      <li><a onClick={() => onNavigate('sorting')}>Sorting Visualizer</a></li>
-      <li><a onClick={() => onNavigate('traversal')}>Graph Traversal Visualizer</a></li>
+      <li><button class='nav_button' onClick={() => onNavigate('sorting')}>Sorting Visualizer</button></li>
+      <li><button class='nav_button'  onClick={() => onNavigate('traversal')}>Graph Traversal Visualizer</button></li>
       <li><a href="https://github.com/GaelGil/algorithm-visualizer">About</a></li>
     </nav>
   );

diff --git a/src/components/SortingVisualiser/SortingVisualiser.jsx b/src/components/SortingVisualiser/SortingVisualiser.jsx
@@ -6,8 +6,8 @@ import { getSelectionSortAnimations } from './sortingAlgorithms/selectionSort';
 import './SortingVisualiser.css'; 
 
 const ANIMATION_SPEED_MS = 5;
-const PRIMARY_COLOR = 'red';
-const SECONDARY_COLOR = 'grey';
+const PRIMARY_COLOR = 'green';
+const SECONDARY_COLOR = 'red';
 
 const SortingVisualiser = () => {
   const [array, setArray] = useState([]); 
@@ -104,7 +104,7 @@ const SortingVisualiser = () => {
                   className="array-bar"
                   key={idx}
                   style={{
-                    backgroundColor: "grey",
+                    backgroundColor: "red",
                     height: `${value}px`,
                     width: "20px",
                   }}>